--- a/client/src/components/gauge/Gauges.vue	Fri May 03 10:31:40 2019 +0200
+++ b/client/src/components/gauge/Gauges.vue	Fri May 03 10:33:51 2019 +0200
@@ -113,7 +113,7 @@
     };
   },
   computed: {
-    ...mapState("application", ["showGauges", "activeSplitscreenId"]),
+    ...mapState("application", ["showGauges", "paneSetup"]),
     ...mapState("gauges", ["gauges", "longtermInterval"]),
     ...mapGetters("gauges", ["selectedGauge"]),
     gaugesLabel() {
@@ -165,12 +165,16 @@
     }
   },
   watch: {
-    selectedGaugeISRS() {
-      if (this.activeSplitscreenId === "gauge-waterlevel") {
-        this.showWaterlevelDiagram();
-      }
-      if (this.activeSplitscreenId === "gauge-hydrological-conditions") {
-        this.showHydrologicalConditionsDiagram();
+    selectedGaugeISRS(gauge) {
+      if (gauge) {
+        let coordinates = this.selectedGauge.geometry.coordinates;
+        this.$store.dispatch("map/moveMap", {
+          coordinates,
+          zoom: null,
+          preventZoomOut: true
+        });
+      } else {
+        this.$store.commit("application/paneSetup", "DEFAULT");
       }
     }
   },
@@ -187,37 +191,7 @@
       });
     },
     showWaterlevelDiagram() {
-      // for panning the map to the gauge on opening the diagram: needs to be
-      // set outside of the expandCallback to not always refer to the currently
-      // selectedGauge
-      let coordinates = this.selectedGauge.geometry.coordinates;
-
-      // configure splitscreen
-      let splitscreenConf = {
-        id: "gauge-waterlevel",
-        component: "waterlevel",
-        title: `${this.gaugeLabel(this.selectedGauge)}: ${this.$gettext(
-          "Waterlevel"
-        )} ${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()}`,
-        icon: "ruler-vertical",
-        closeCallback: () => {
-          this.$store.commit("gauges/selectedGaugeISRS", null);
-          this.$store.commit("gauges/waterlevels", []);
-        },
-        expandCallback: () => {
-          this.$store.dispatch("map/moveMap", {
-            coordinates,
-            zoom: null,
-            preventZoomOut: true
-          });
-        }
-      };
-      this.$store.commit("application/addSplitscreen", splitscreenConf);
-      this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
-      this.$store.commit("application/splitscreenLoading", true);
       this.loading = true;
-      this.$store.commit("application/showSplitscreen", true);
-
       Promise.all([
         this.$store.dispatch("gauges/loadWaterlevels"),
         this.$store.dispatch("gauges/loadNashSutcliffe")
@@ -230,53 +204,25 @@
           });
         })
         .finally(() => {
-          this.$store.commit("application/splitscreenLoading", false);
+          this.$store.commit(
+            "application/paneSetup",
+            [
+              "GAUGE_HYDROLOGICALCONDITIONS",
+              "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
+            ].includes(this.paneSetup)
+              ? "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
+              : "GAUGE_WATERLEVEL"
+          );
           this.loading = false;
         });
     },
     showHydrologicalConditionsDiagram() {
-      // for panning the map to the gauge on opening the diagram: needs to be
-      // set outside of the expandCallback to not always refer to the currently
-      // selectedGauge
-      let coordinates = this.selectedGauge.geometry.coordinates;
-
-      // configure splitscreen
-      let splitscreenConf = {
-        id: "gauge-hydrological-conditions",
-        component: "hydrological-conditions",
-        title: `${this.gaugeLabel(this.selectedGauge)}: ${this.$gettext(
-          "Hydrological Conditions"
-        )}`,
-        icon: "ruler-vertical",
-        closeCallback: () => {
-          this.$store.commit("gauges/selectedGaugeISRS", null);
-          this.$store.commit("gauges/longtermWaterlevels", []);
-          this.$store.commit("gauges/yearWaterlevels", []);
-        },
-        expandCallback: () => {
-          this.$store.dispatch("map/moveMap", {
-            coordinates,
-            zoom: null,
-            preventZoomOut: true
-          });
-        }
-      };
-      this.$store.commit("application/addSplitscreen", splitscreenConf);
-      this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
-      this.$store.commit("application/splitscreenLoading", true);
       this.loading = true;
-      this.$store.commit("application/showSplitscreen", true);
 
       Promise.all([
         this.$store.dispatch("gauges/loadLongtermWaterlevels"),
         this.$store.dispatch("gauges/loadYearWaterlevels")
       ])
-        .then(() => {
-          splitscreenConf.title = `${
-            splitscreenConf.title
-          } ${this.longtermInterval.join(" - ")}`;
-          this.$store.commit("application/addSplitscreen", splitscreenConf);
-        })
         .catch(error => {
           const { status, data } = error.response;
           displayError({
@@ -285,7 +231,15 @@
           });
         })
         .finally(() => {
-          this.$store.commit("application/splitscreenLoading", false);
+          this.$store.commit(
+            "application/paneSetup",
+            [
+              "GAUGE_WATERLEVEL",
+              "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
+            ].includes(this.paneSetup)
+              ? "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
+              : "GAUGE_HYDROLOGICALCONDITIONS"
+          );
           this.loading = false;
         });
     },