Update Phase I learning code to latest master

client/package.json

@@ -16,7 +16,8 @@
     "vue": "^2.6.10",
     "vue-async-computed": "^3.5.1",
     "vue-router": "3.4.3",
-    "vuetify": "^2.3.7",
+    "vuetify": "2.3.22",
+    "vue-google-charts": "0.3.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

client/src/components/DataImportExport.vue

@@ -4,12 +4,15 @@ import { mapActions } from "vuex";
 export default {
   name: "DataImportExport",
   components: {},
-  inject: ["girderRest"],
+  inject: ["girderRest", "notificationBus"],
   data: () => ({
     importEnabled: false,
     exportEnabled: false,
     importing: false,
-    importDialog: false
+    importDialog: false,
+    reevaluateDialog: false,
+    reevaluating: false,
+    learningMode: "randomForest"
   }),
   async created() {
     var { data: result } = await this.girderRest.get(
@@ -18,16 +21,33 @@ export default {
     this.importEnabled = result.import;
     this.exportEnabled = result.export;
   },
+  mounted() {
+    this.notificationBus.$on(
+      "message:miqa.learning_with_data",
+      this.learningFinished
+    );
+  },
+  beforeDestroy() {
+    this.notificationBus.$off(
+      "message:miqa.learning_with_data",
+      this.learningFinished
+    );
+  },
   methods: {
     ...mapActions(["loadSessions"]),
     async importData() {
       this.importing = true;
       try {
         var { data: result } = await this.girderRest.post("miqa/data/import");
         this.importing = false;
+        let msg = "";
+        if (result.error) {
+          msg = `Import failed: ${result.error}`;
+        } else {
+          msg = `Import finished with ${result.success} scans imported and ${result.failed} failed.`;
+        }
         this.$snackbar({
-          text: `Import finished.
-          With ${result.success} scans succeeded and ${result.failed} failed.`,
+          text: msg,
           timeout: 6000
         });
         this.loadSessions();
@@ -47,6 +67,20 @@ export default {
         text: "Saved data to json file successfully.",
         positiveButton: "Ok"
       });
+    },
+    reevaluate() {
+      this.reevaluating = true;
+      this.girderRest.post(`/learning/retrain_with_data/${this.learningMode}`);
+    },
+    learningFinished(a) {
+      this.reevaluating = false;
+      this.reevaluateDialog = false;
+      this.loadSessions();
+      this.$prompt({
+        title: "Re-evaluate",
+        text: "Re-evaluate successfully",
+        positiveButton: "Ok"
+      });
     }
   }
 };
@@ -64,6 +98,13 @@ export default {
     <v-btn text color="primary" @click="exportData" :disabled="!exportEnabled"
       >Export</v-btn
     >
+    <v-btn
+      text
+      color="primary"
+      @click="reevaluateDialog = true"
+      :disabled="!exportEnabled"
+      >Retrain</v-btn
+    >
     <v-dialog v-model="importDialog" width="500" :persistent="importing">
       <v-card>
         <v-card-title class="title">
@@ -84,6 +125,42 @@ export default {
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="reevaluateDialog" width="500" :persistent="reevaluating">
+      <v-card>
+        <v-card-title class="title">
+          Re-evaluate
+        </v-card-title>
+        <v-card-text>
+          This will update the learning model with values of all current
+          sessions and reevaluate current unmarked sessions
+          <v-container fluid>
+            <v-radio-group v-model="learningMode" row>
+              <v-radio
+                label="Random Forest Classifier"
+                value="randomForest"
+              ></v-radio>
+              <v-radio
+                label="Neural Network Classifier"
+                value="neuralNetwork"
+              ></v-radio>
+            </v-radio-group>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text @click="reevaluateDialog = false" :disabled="reevaluating"
+            >Cancel</v-btn
+          >
+          <v-btn
+            text
+            color="primary"
+            @click="reevaluate"
+            :loading="reevaluating"
+            >Re-evaluate</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 

client/src/components/MetricsDisplay.vue

@@ -0,0 +1,98 @@
+<script>
+import iqmMeta from "../utils/iqmMeta";
+
+export default {
+  name: "MetricsDisplay",
+  props: {
+    iqm: {
+      type: Array,
+      required: true
+    },
+    goodProb: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      selectedMetric: Object.keys(iqmMeta)[0]
+    };
+  },
+  computed: {
+    iqmMeta: () => iqmMeta,
+    selectItems() {
+      return this.iqm.map(metric => {
+        var key = Object.keys(metric)[0];
+        return {
+          value: key,
+          text: iqmMeta[key].display
+        };
+      });
+    },
+    values() {
+      if (!this.selectedMetric) {
+        return [];
+      }
+      var metric = this.iqm.find(metric => metric[this.selectedMetric]);
+      var value = metric[this.selectedMetric];
+      if (!Array.isArray(value)) {
+        return [
+          {
+            key: this.selectedMetric,
+            value
+          }
+        ];
+      } else {
+        return value.map(subValueObject => {
+          var sub = Object.keys(subValueObject)[0];
+          return {
+            key: sub,
+            value: subValueObject[sub]
+          };
+        });
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <v-card width="400">
+    <v-card-title class="subheading pb-2">
+      Metrics
+    </v-card-title>
+    <v-card-text class="pt-0">
+      <v-container fluid class="pa-0" grid-list-md>
+        <v-layout v-if="goodProb">
+          Good probability<span
+            class="ml-1"
+            :style="{ color: goodProb > 0.5 ? 'green' : 'red' }"
+            >{{ goodProb.toFixed(2) }}</span
+          >
+        </v-layout>
+        <v-layout>
+          <v-flex style="width: 250px;" shrink>
+            <v-select
+              v-model="selectedMetric"
+              :items="selectItems"
+              :hint="iqmMeta[selectedMetric].fullname"
+              persistent-hint
+            />
+          </v-flex>
+        </v-layout>
+        <v-layout>
+          <v-flex>
+            <ul>
+              <li v-for="({ key, value }, i) of values" :key="i">
+                {{ key }}: {{ value }}
+              </li>
+            </ul>
+          </v-flex>
+        </v-layout>
+        <v-layout v-if="selectedMetric">
+          <v-flex v-html="iqmMeta[selectedMetric].description"> </v-flex>
+        </v-layout>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>

client/src/components/NavigationTabs.vue

@@ -30,6 +30,10 @@ export default {
       <v-icon>view_column</v-icon>
       Sessions
     </v-tab>
+    <v-tab to="/metrics">
+      <v-icon>bar_chart</v-icon>
+      Metrics
+    </v-tab>
     <v-tab to="/settings" v-if="userLevel.value === 0">
       <v-icon>settings</v-icon>
       Settings

client/src/main.js

@@ -8,6 +8,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import Girder, { RestClient, utils } from "@girder/components/src";
+import NotificationBus from "@girder/components/src/utils/notifications";
 import { API_URL, STATIC_PATH } from "./constants";
 
 import vMousetrap from "./vue-utilities/v-mousetrap";
@@ -34,6 +35,8 @@ Vue.use(snackbarService(vuetify));
 Vue.use(promptService(vuetify));
 
 girder.rest = new RestClient({ apiRoot: API_URL });
+const notificationBus = new NotificationBus(girder.rest);
+notificationBus.connect();
 
 import config from "itk/itkConfig";
 config.itkModulesPath = STATIC_PATH + config.itkModulesPath;
@@ -49,7 +52,7 @@ girder.rest.fetchUser().then(() => {
     router,
     store,
     render: h => h(App),
-    provide: { girderRest: girder.rest }
+    provide: { girderRest: girder.rest, notificationBus }
   })
     .$mount("#app")
     .$snackbarAttach()

client/src/router.js

@@ -5,6 +5,7 @@ import girder from "./girder";
 import Settings from "./views/Settings.vue";
 import Dataset from "./views/Dataset.vue";
 import Login from "./views/Login.vue";
+import Metrics from "./views/Metrics.vue";
 
 Vue.use(Router);
 
@@ -41,6 +42,12 @@ export default new Router({
       component: Settings,
       beforeEnter: beforeEnterAdmin
     },
+    {
+      path: "/metrics",
+      name: "metrics",
+      component: Metrics,
+      beforeEnter: beforeEnterAdmin
+    },
     // Order matters
     {
       path: "/:datasetId?",

client/src/store/index.js

@@ -58,6 +58,10 @@ const store = new Vuex.Store({
         return state.datasets[datasetId];
       };
     },
+    allDatasets(state) {
+      console.log('allDatasets');
+      return Object.keys(state.datasets).map(dsId => state.datasets[dsId]);
+    },
     currentSession(state, getters) {
       if (getters.currentDataset) {
         const curSessionId = getters.currentDataset.session;