--- a/client/src/morphtool/Morphtool.vue	Fri Nov 02 14:51:14 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Mon Nov 05 13:12:33 2018 +0100
@@ -1,36 +1,34 @@
 <template>
     <div class="morphcontainer">
-        <div v-if="selectedBottleneck">
-            <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow">
-                <div class="headline">
-                    <h4>{{bottleneckName}}</h4>
-                    <hr>
-                    <div
-                        @click="clearSelection"
-                        class="float-left ui-element d-flex morphtoolminus"
-                    >
-                        <i class="fa fa-close morphtoolsminus"></i>
-                    </div>
+        <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow">
+            <div class="headline">
+                <h4>{{ selectedBottleneck }}</h4>
+                <hr>
+                <div
+                    @click="clearSelection"
+                    class="float-left ui-element d-flex morphtoolminus"
+                >
+                    <i class="fa fa-close morphtoolsminus"></i>
                 </div>
-                <ul class="list-group surveylist">
-                    <li
-                        v-for="survey of surveyList.surveys"
-                        :key="survey.data_info"
-                        class="list-group-item"
-                        @click.prevent="selectSurvey(survey)"
-                    >
-                        <a href="#" @click.prevent>{{survey.date_info}}</a>
-                    </li>
-                </ul>
             </div>
+            <ul class="list-group surveylist">
+                <li
+                    v-for="survey of surveys"
+                    :key="survey.data_info"
+                    class="list-group-item"
+                    @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
+                >
+                    <a href="#" @click.prevent>{{ survey.date_info }}</a>
+                </li>
+            </ul>
         </div>
-        <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
+        <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool">
             <div class="d-flex flex-row justify-content-between">
                 <i class="fa fa-close text-danger"></i>
                 <small>Bottleneck:&nbsp;</small>
                 <h6>
-                    {{bottleneckName}}
-                    <small>( {{selectedMorph.date_info}} )</small>
+                    {{ selectedBottleneck }}
+                    <small>( {{ selectedSurvey.date_info }} )</small>
                 </h6>
             </div>
         </div>
@@ -106,83 +104,21 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 import { displayError } from "../application/lib/errors.js";
 import { HTTP } from "../application/lib/http";
 
 export default {
   name: "morphtool",
-  data() {
-    return {
-      surveyList: null,
-      bottleneckName: ""
-    };
-  },
   computed: {
     ...mapState("application", ["drawMode"]),
-    ...mapState("identifystore", ["identifiedFeatures"]),
-    ...mapState("fairwayprofile", ["selectedMorph"]),
-    selectedBottleneck: function() {
-      if (this.identifiedFeatures && !this.drawMode) {
-        for (let feature of this.identifiedFeatures) {
-          let id = feature.getId();
-          // RegExp.prototype.test() works with number, str and undefined
-          if (/^bottlenecks\./.test(id)) {
-            this.$store.commit("fairwayprofile/setSelectedMorph", null);
-            return feature;
-          }
-        }
-      }
-      return null;
-    }
-  },
-  watch: {
-    selectedBottleneck: function(bottleneckFeature) {
-      if (bottleneckFeature) {
-        let bottleneckName = bottleneckFeature.get("objnam");
-        if (bottleneckName) {
-          this.bottleneckName = bottleneckName;
-          this.queryBottleneck(bottleneckName);
-        }
-      }
-    }
+    ...mapState("bottlenecks", ["selectedBottleneck", "surveys", "selectedSurvey"])
   },
   methods: {
-    queryBottleneck(name) {
-      // DEBUG console.log("starting to query bottleneck", name);
-      HTTP.get("/surveys/" + name, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      })
-        .then(response => {
-          this.surveyList = response.data;
-          this.$store.commit(
-            "fairwayprofile/setAvailableSurveys",
-            response.data
-          );
-        })
-        .catch(error => {
-          this.surveyList = null;
-          const { status, data } = error.response;
-          displayError({
-            title: "Backend Error",
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
-    selectSurvey(survey) {
-      this.$store.commit("fairwayprofile/setSelectedMorph", survey);
-      this.surveyList = null;
-    },
     clearSelection() {
-      this.$store.commit("identifystore/setIdentifiedFeatures", []);
-      this.$store.commit("fairwayprofile/setSelectedMorph", null);
-      this.$store.commit("fairwayprofile/clearCurrentProfile");
+      this.$store.dispatch("bottlenecks/setSelectedBottleneck", null);
       this.$store.commit("application/closeSplitScreen");
-      this.surveyList = null;
       if (this.drawMode) {
         this.$store.commit("application/toggleDrawModeLine");
       }