--- a/client/src/bottlenecks/Bottlenecks.vue	Fri Nov 02 14:51:14 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 05 13:12:33 2018 +0100
@@ -30,18 +30,18 @@
                     </a>
                 </div>
                 <div class="col-2">
-                    {{ displayCurrentSurvey(bottleneck) }}
+                    {{ displayCurrentSurvey(bottleneck.properties.current) }}
                 </div>
                 <div class="col-3">
-                    {{ displayCurrentChainage(bottleneck) }}
+                    {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
                 </div>
                 <div class="col-2 text-right">
-                    <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck)">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)">
                         <i class="fa fa-angle-down"></i>
                     </button>
                 </div>
-                <div :class="['col-12', 'surveys', {open: selectedBottleneck === bottleneck}]">
-                   <a href="#" class="d-block p-2" v-for="(survey, index) in surveys[bottleneck.properties.name]" :key="index" @click="selectSurvey(survey, bottleneck)">
+                <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
+                   <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)">
                       {{ survey.date_info }}
                     </a>
                 </div>
@@ -77,8 +77,8 @@
       search: "",
       sortColumn: "name",
       sortDirection: "ASC",
-      selectedBottleneck: null,
-      surveys: {}
+      openBottleneck: null,
+      openBottleneckSurveys: null
     };
   },
   computed: {
@@ -153,10 +153,8 @@
         });
     },
     selectSurvey(survey, bottleneck) {
-      this.$store.commit("fairwayprofile/setSelectedMorph", survey);
-      this.$store.commit("fairwayprofile/setAvailableSurveys", {
-        surveys: this.surveys[bottleneck.properties.name]
-      });
+      this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck.properties.name);
+      this.$store.commit("bottlenecks/setSelectedSurvey", survey);
       this.moveToBottleneck(bottleneck);
     },
     moveToBottleneck(bottleneck) {
@@ -179,19 +177,21 @@
       this.sortColumn = column;
       this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
     },
-    toggleBottleneck(bottleneck) {
-      if (bottleneck === this.selectedBottleneck) {
-        this.selectedBottleneck = null;
+    toggleBottleneck(name) {
+      this.openBottleneckSurveys = null;
+      if (name === this.openBottleneck) {
+        this.openBottleneck = null;
       } else {
-        HTTP.get("/surveys/" + bottleneck.properties.name, {
+        this.openBottleneck = name;
+        
+        HTTP.get("/surveys/" + name, {
           headers: {
             "X-Gemma-Auth": localStorage.getItem("token"),
             "Content-type": "text/xml; charset=UTF-8"
           }
         })
           .then(response => {
-            this.surveys[bottleneck.properties.name] = response.data.surveys;
-            this.selectedBottleneck = bottleneck;
+            this.openBottleneckSurveys = response.data.surveys;
           })
           .catch(error => {
             const { status, data } = error.response;
@@ -202,13 +202,12 @@
           });
       }
     },
-    displayCurrentSurvey(bottleneck) {
-      const current = bottleneck.properties.current;
+    displayCurrentSurvey(current) {
       return current ? current.substr(0, current.length - 1) : "";
     },
-    displayCurrentChainage(bottleneck) {
+    displayCurrentChainage(from, to) {
       return (
-        bottleneck.properties.from / 10 + " - " + bottleneck.properties.to / 10
+        from / 10 + " - " + to / 10
       );
     }
   },