Refactor imagery loading EventEmitter into store value

interface/frontend/src/components/open-image/ImageSeries.vue

@@ -91,9 +91,19 @@
           <div class="card-header">
             <h5 class="card-title">
               <span class="float-right">
-              <i class="fa fa-expand warning" @click="showImport = !showImport"></i>
+                <button class="btn btn-sm btn-outline-success" :disabled="!imageInProgress.id" @click="startNewCase()">
+                  Start New Case
+                  <i class="fa fa-arrow-up"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-warning" @click="showImport = !showImport">
+                  Expand Imagery List
+                  <i class="fa fa-expand"></i>
+                </button>
+
               </span>
+
               Import image series for new case
+
             </h5>
           </div>
           <div class="card-block" v-show="showImport">
@@ -102,16 +112,9 @@
             <!-- navigation and preview -->
             <div class="row">
               <div class="col-md-8">
-                <div class="float-right">
-                  <button class="btn btn-success" :disabled="!selectedUri" @click="startNewCase()">
-                    Start New Case
-                  </button>
-                </div>
                 <tree-view class="item left"
                            :model="directories"
-                           :parent="directories.name"
-                           :selectedSeries="selectedUri"
-                           v-on:selectSeries="selectSeries">
+                           :parent="directories.name">
                 </tree-view>
               </div>
               <div class="col-md-4">
@@ -153,7 +156,6 @@
           paths: [],
           state: ''
         },
-        selectedUri: null,
         showImport: false
       }
     },
@@ -165,6 +167,7 @@
         endpoints: 'endpoints',
         caseInProgress: 'caseInProgress',
         caseInProgressIsValid: 'caseInProgressIsValid',
+        imageInProgress: 'imageInProgress',
         candidatesExist: 'candidatesExist'
       })
     },
@@ -223,12 +226,11 @@
           this.selectCase(case_)
         }
       },
-      selectSeries (seriesId) {
-        console.log('selecting ', seriesId)
-        this.selectedUri = seriesId
-      },
       async startNewCase () {
-        await this.$store.dispatch('startNewCase', {'uri': this.selectedUri})
+        if (!this.imageInProgress.id) {
+          return console.error('No Imagery Selected')
+        }
+        await this.$store.dispatch('startNewCase', {'uri': this.imageInProgress.id})
         setTimeout(() => { this.refreshAvailableCases() }, 1000)
       },
       displayName (case_) {

interface/frontend/src/components/open-image/TreeView.vue

@@ -19,7 +19,6 @@
                    :selectedSeries="selectedSeries"
                    :parent="parent + '/' + model.name"
                    v-on:childSelected="selectSeries"
-                   v-on:selectSeries="selectSeries"
         ></tree-view>
         <li @click="select(file)" v-for="file in model.files" class="text-muted" :key="file.name">{{ file.name }}</li>
       </ul>
@@ -92,7 +91,7 @@
         this.$set(this, 'open', !this.open)
       },
       selectSeries: function (seriesId) {
-        this.$emit('selectSeries', seriesId)
+        this.$store.dispatch('loadImagery', {'id': seriesId})
       },
       select: function (file) {
         // file selected should tell parent series

interface/frontend/src/store.js

@@ -13,6 +13,9 @@ const actions = {
     axios.get(API_ROOT)
       .then((response) => { commit('GET_ENDPOINTS', response.data) })
   },
+  loadImagery ({ commit }, { id, caseCreated }) {
+    commit('SET_IMAGE_IN_PROGRESS', { id, caseCreated })
+  },
   loadCase ({ commit }, { url }) {
     axios.get(url)
       .then((response) => { commit('SET_CASE_IN_PROGRESS', response.data) })
@@ -47,6 +50,9 @@ const actions = {
 
 const store = new Vuex.Store({
   state: {
+    // The image chosen by the user, to be made into a case
+    imageInProgress: {},
+
     // the case that we are working on, either selected or
     // created on the open and import page
     caseInProgress: {},
@@ -55,6 +61,9 @@ const store = new Vuex.Store({
     topLevelEndpoints: {}
   },
   getters: {
+    imageInProgress (state) {
+      return state.imageInProgress
+    },
     caseInProgress (state) {
       return state.caseInProgress
     },
@@ -90,6 +99,9 @@ const store = new Vuex.Store({
     GET_ENDPOINTS (state, endpoints) {
       state.topLevelEndpoints = endpoints
     },
+    SET_IMAGE_IN_PROGRESS (state, _image) {
+      state.imageInProgress = _image
+    },
     SET_CASE_IN_PROGRESS (state, _case) {
       state.caseInProgress = _case
     },