--- a/client/src/application/Main.vue	Tue Oct 23 13:05:47 2018 +0200
+++ b/client/src/application/Main.vue	Tue Oct 23 14:28:43 2018 +0200
@@ -2,7 +2,7 @@
     <div class="main d-flex flex-column">
         <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
         <div v-if="isSplitscreen" class="profile d-flex flex-row">
-            <FairwayProfile :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
+            <FairwayProfile :additionalSurveys="additionalSurveys" :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
         </div>
     </div>
 </template>
@@ -47,8 +47,16 @@
       "totalLength",
       "waterLevels",
       "fairwayCoordinates",
-      "selectedWaterLevel"
+      "selectedWaterLevel",
+      "availableSurveys"
     ]),
+    ...mapState("morphstore", ["selectedMorph"]),
+    additionalSurveys() {
+      if (!this.availableSurveys) return [];
+      return this.availableSurveys.surveys.filter(x => {
+        return x.date_info !== this.selectedMorph.date_info;
+      });
+    },
     xAxis() {
       return [this.xScale.x, this.xScale.y];
     },
@@ -95,7 +103,7 @@
       const clientWidth = document.querySelector(".profile").clientWidth;
       if (!clientHeight || !clientWidth) return;
       this.height = document.querySelector(".profile").clientHeight - 25;
-      this.width = document.querySelector(".profile").clientWidth - 200;
+      this.width = document.querySelector(".profile").clientWidth - 220;
     }
   }
 };

--- a/client/src/fairway/Fairwayprofile.vue	Tue Oct 23 13:05:47 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Tue Oct 23 14:28:43 2018 +0200
@@ -2,21 +2,39 @@
     <div class="profiledisplay d-flex flex-row">
         <div class="fairwayprofile">
         </div>
-        <!-- <div class="waterlevelselection d-flex flex-column">
-            <div class="form-check" v-for="level in waterLevels" :key="level.level">
-                <input class="form-check-input" :id="level.year" @change="setWaterlevel(level)" :value="level.level" type="radio">
-                <label class="form-check-label" :for="level.year">{{level.year}}</label>
-            </div>
-        </div> -->
+        <div class="additionalsurveys d-flex flex-column">
+            <small class="label">Available Additional Surveys</small>
+            <select>
+                <option value="">None</option>
+                <option v-for="survey in additionalSurveys" :key="survey.date_info">
+                    {{survey.date_info}}
+                </option>
+            </select>
+        </div>
     </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
+.label {
+  margin-bottom: $small-offset;
+}
 .waterlevelselection {
   margin-top: $large-offset;
   margin-right: $large-offset;
 }
 
+.additionalsurveys {
+  width: 300px;
+  margin-top: $large-offset;
+  margin-bottom: auto;
+  margin-right: $large-offset;
+  margin-left: auto;
+}
+
+.additionalsurveys input {
+  margin-right: $small-offset;
+}
+
 .profiledisplay {
   width: 100vw;
 }
@@ -24,7 +42,7 @@
 .fairwayprofile {
   background-color: white;
   margin-left: auto;
-  margin-right: auto;
+  margin-right: $offset;
   margin-top: auto;
   margin-bottom: auto;
 }
@@ -50,7 +68,8 @@
     "fairwayCoordinates",
     "selectedWaterLevel",
     "minAlt",
-    "maxAlt"
+    "maxAlt",
+    "additionalSurveys"
   ],
   computed: {
     waterColor() {
@@ -84,7 +103,9 @@
     }
   },
   methods: {
-    setWaterlevel() {},
+    selectAdditionalSurveyData(e) {
+      console.log(e);
+    },
     drawDiagram() {
       const chartDiv = document.querySelector(".fairwayprofile");
       d3.select("svg").remove();

--- a/client/src/fairway/store.js	Tue Oct 23 13:05:47 2018 +0200
+++ b/client/src/fairway/store.js	Tue Oct 23 14:28:43 2018 +0200
@@ -50,6 +50,9 @@
     },
     setFairwayCoordinates: (state, coordinates) => {
       state.fairwayCoordinates = coordinates;
+    },
+    clearCurrentProfile: state => {
+      state.currentProfile = [];
     }
   },
 

--- a/client/src/morphtool/Morphtool.vue	Tue Oct 23 13:05:47 2018 +0200
+++ b/client/src/morphtool/Morphtool.vue	Tue Oct 23 14:28:43 2018 +0200
@@ -134,6 +134,10 @@
       })
         .then(response => {
           this.surveyList = response.data;
+          this.$store.commit(
+            "fairwayprofile/setAvailableSurveys",
+            response.data
+          );
         })
         .catch(error => {
           this.surveyList = null;