# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1567159895 -7200
# Node ID 81ab34bd2d0d3553e354e1d2c613725bebf252c5
# Parent  2de64420870615c79b5c087f24892352d21f2811
Legend: Improve display of data availability

In order to show Nash Sutcliffe data for bottleneckts
the according gauge has to be determined. Every gauge is
loaded at initial startup, data will be available when
necessary for identification of bottlenecks.

The Nash Sutcliffe data is lazy loaded and used here.
Perhaps we could use this cache for the style layer too.

diff -r 2de644208706 -r 81ab34bd2d0d client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Fri Aug 30 11:30:11 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Fri Aug 30 12:11:35 2019 +0200
@@ -77,12 +77,12 @@
                 icon="caret-up"
                 fixed-width
                 :style="{
-                  color: forecastVsRealityColor(feature),
+                  color: gaugeStatusColor,
                   'font-size': 'x-large'
                 }"
               />
               <small class="my-auto">
-                {{ forecastVsReality(feature) }}
+                {{ gaugeStatusText }}
               </small>
             </div>
             <div>
@@ -219,16 +219,56 @@
 
 export default {
   name: "identify",
+  data() {
+    return {
+      gaugeStatus: ""
+    };
+  },
   computed: {
     ...mapGetters("application", ["versionStr"]),
     ...mapState("application", ["showIdentify", "userManualUrl", "config"]),
     ...mapGetters("map", ["filteredIdentifiedFeatures"]),
     ...mapState("map", ["currentMeasurement"]),
+    ...mapState("gauges", ["gauges"]),
     identifiedLabel() {
       return this.$gettext("Identified Features");
     },
     usermanualFilename() {
       return this.$gettext("User Manual");
+    },
+    gaugeStatusColor() {
+      return forecastVsRealityColorCodes[this.gaugeStatus];
+    },
+    gaugeStatusText() {
+      const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h;
+      const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h;
+      const messagesPerState = {
+        OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`,
+        WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`,
+        DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`,
+        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
+      };
+      return messagesPerState[this.gaugeStatus];
+    }
+  },
+  watch: {
+    filteredIdentifiedFeatures() {
+      const bottlecks = this.filteredIdentifiedFeatures.filter(f =>
+        /bottleneck/.test(f.id_)
+      );
+      if (bottlecks.length > 0) {
+        const gauge = this.gauges.find(
+          g => g.properties.objname === bottlecks[0].get("gauge_objname")
+        );
+        const isrs = gauge.properties.isrs_code;
+        this.$store
+          .dispatch("gauges/getNashSutcliffeForISRS", isrs)
+          .then(response => {
+            this.gaugeStatus = classifications.calcForecastVsRealityForNSC(
+              response
+            );
+          });
+      }
     }
   },
   methods: {
@@ -268,22 +308,6 @@
         classifications.forecastAccuracy(feature)
       ];
     },
-    forecastVsReality(feature) {
-      const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h;
-      const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h;
-      const messagesPerState = {
-        OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`,
-        WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`,
-        DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`,
-        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
-      };
-      return messagesPerState[[classifications.forecastVsReality(feature)]];
-    },
-    forecastVsRealityColor(feature) {
-      return forecastVsRealityColorCodes[
-        classifications.forecastVsReality(feature)
-      ];
-    },
     recency(feature) {
       const revisitingFactor = this.config.bn_revtime_multiplier;
       const messagesPerState = {
diff -r 2de644208706 -r 81ab34bd2d0d client/src/store/gauges.js
--- a/client/src/store/gauges.js	Fri Aug 30 11:30:11 2019 +0200
+++ b/client/src/store/gauges.js	Fri Aug 30 12:11:35 2019 +0200
@@ -11,9 +11,17 @@
  * Author(s):
  * Markus Kottländer <markus@intevation.de>
  */
+import Vue from "vue";
 import { HTTP } from "@/lib/http";
 import { WFS } from "ol/format";
-import { isPast, startOfDay, endOfDay, format } from "date-fns";
+import {
+  isPast,
+  startOfDay,
+  endOfDay,
+  format,
+  isBefore,
+  addMinutes
+} from "date-fns";
 
 let dateFrom = new Date();
 dateFrom.setDate(dateFrom.getDate() - 30);
@@ -31,6 +39,7 @@
     yearWaterlevels: [],
     nashSutcliffe: null,
     nashSutcliffeOverview: [],
+    nashSutcliffeCache: {},
     dateFrom: dateFrom,
     dateTo: dateTo,
     yearCompare: new Date().getFullYear()
@@ -54,6 +63,13 @@
     }
   },
   mutations: {
+    addNSCtoCache: (state, entry) => {
+      const { isrsCode, nsc, timestamp } = entry;
+      Vue.set(state.nashSutcliffeCache, isrsCode, {
+        nsc,
+        timestamp
+      });
+    },
     gauges: (state, gauges) => {
       state.gauges = gauges;
     },
@@ -100,6 +116,35 @@
     }
   },
   actions: {
+    getNashSutcliffeForISRS: ({ state, commit }, isrsCode) => {
+      return new Promise((resolve, reject) => {
+        const now = new Date();
+        let nashSutcliffe = state.nashSutcliffeCache[isrsCode];
+        if (nashSutcliffe) {
+          const { timestamp, nsc } = nashSutcliffe;
+          const isRecent = isBefore(now, addMinutes(timestamp, 15));
+          if (isRecent) {
+            resolve(nsc);
+            return;
+          }
+        }
+        HTTP.get(`/data/nash-sutcliffe/${isrsCode}`, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            nashSutcliffe = response.data;
+            commit("addNSCtoCache", {
+              isrsCode,
+              nsc: nashSutcliffe,
+              timestamp: now
+            });
+            resolve(nashSutcliffe);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    },
     selectedGaugeISRS: ({ commit, dispatch, state }, isrs) => {
       if (state.selectedGaugeISRS !== isrs) {
         commit("selectedGaugeISRS", isrs);