Merge branch 'develop'

wwu-mmll · Jul 7, 2020 · b0b3700 · b0b3700
2 parents 194a76e + d70f3e7
commit b0b3700
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 131 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "materialize-css": "^1.0.0",
+    "ml-confusion-matrix": "^0.4.0",
     "vue": "^2.6.11",
     "vue-plotly": "^1.1.0"
   },

diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <title>Photon Explorer</title>
+    <title>PHOTONAI Explorer</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but Investigator UI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but PHOTONAI Explorer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/components/BestConfigElement.vue b/src/components/BestConfigElement.vue
@@ -75,6 +75,7 @@ export default {
 
     padding: 5px 15px 15px 15px;
     margin-top: 5px;
+    margin-bottom: 20px;
   }
   .fixedWidth{
     min-width: 230px;

diff --git a/src/components/Confusion.vue b/src/components/Confusion.vue
@@ -1,5 +1,13 @@
 <template>
-  <Plotly :data="data.validation.data" :layout="data.validation.layout"></Plotly>
+  <div class="row">
+    <div class="col s6">
+      <Plotly :data="data.training.data" :layout="data.training.layout"></Plotly>
+    </div>
+    <div class="col s6">
+      <Plotly :data="data.validation.data" :layout="data.validation.layout"></Plotly>
+    </div>
+  </div>
+
 </template>
 
 <script>

diff --git a/src/components/OptimisationHistory.vue b/src/components/OptimisationHistory.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="optHist">
+    <Plotly :data="data.data" :layout="data.layout"></Plotly>
+  </div>
+</template>
+
+<script>
+  import { Plotly } from "vue-plotly";
+  import { plotOptimizerHistory } from "../preprocessing/plotCreation";
+
+  export default {
+    name: "OptimisationHistory",
+    components: {
+      Plotly
+    },
+    props: {
+      file: Object    // Complete pipe required
+    },
+    computed: {
+      data() {
+        return plotOptimizerHistory(this.file);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Visualisation.vue b/src/components/Visualisation.vue
@@ -9,45 +9,53 @@
 
 
     <div class="row">
-      <div class="col m7 s12">
+      <div class="col m12 s12">
         <h2>Best Hyperparameter configuration</h2>
         <BestConfigDiagram :config-dict="file.best_config.human_readable_config"></BestConfigDiagram>
       </div>
-      <div class="col m4 offset-m1 s12">
-        <h2>Cross Validation</h2>
-        <p><b>Outer Fold:</b> {{ file.hyperpipe_info.cross_validation.OuterCV }}</p>
-        <p><b>Inner Fold:</b> {{ file.hyperpipe_info.cross_validation.InnerCV }}</p>
-      </div>
     </div>
 
+
     <div class="row">
       <div class="col s12">
         <h2>Performance</h2>
         <PerformancePlots :file="file"></PerformancePlots>
       </div>
 
     </div>
+
     <div class="row">
-      <div class="col m6 s12">
-        <h2>Confusion matrix</h2>
+      <div class="col m8 s12">
+        <h2 v-if="file.hyperpipe_info.estimation_type=='classifier'">Confusion matrix</h2>
+        <h2 v-else>Predictions</h2>
         <Confusion :file="file"></Confusion>
       </div>
-      <div class="col m5 offset-m1 s12">
-        <h2>Optimization Progress</h2>
+    </div>
+
+    <div class="row">
+      <h2>Hyperparameter Optimization Progress</h2>
+      <p> Optimizer: {{ file.hyperpipe_info.optimization.Optimizer }} with parameters {{ file.hyperpipe_info.optimization.OptimizerParams}}</p>
+      <div class="col m6 s12">
+        <OptimisationHistory :file="file"></OptimisationHistory>
       </div>
     </div>
 
     <div class="row">
       <div class="col s12">
         <div class="configItemHeader">
-          <h2>Fold Information</h2>
+          <div class="fold-information">
+            <h2>Fold Information</h2>
+            <p><b>Outer Fold Split:</b> {{ file.hyperpipe_info.cross_validation.OuterCV }}</p>
+            <p><b>Inner Fold Split:</b> {{ file.hyperpipe_info.cross_validation.InnerCV }}</p>
+          </div>
           <a @click="showFoldTable = !showFoldTable" href="#" class="btn-flat expansionBtn">
             <i class="material-icons" style="font-size: 3rem">{{ foldInfoButtonText }}</i>
           </a>
         </div>
         <FoldTable style="float: none" v-show="showFoldTable" :best-config-metric="file.hyperpipe_info.best_config_metric"
                    :bestFoldMetrics="file.best_config.best_config_score.validation.metrics" :folds="file.outer_folds" :max-metric-count="99"></FoldTable>
       </div>
+
     </div>
 
     <!-- One column once again -->
@@ -61,6 +69,7 @@
   import TestedConfigTable from "./TestedConfigTable";
   import PerformancePlots from "./PerformancePlots";
   import Confusion from "./Confusion";
+  import OptimisationHistory from "./OptimisationHistory";
 
   export default {
     name: "NewVisualisation",
@@ -69,7 +78,8 @@
       FoldTable,
       TestedConfigTable,
       PerformancePlots,
-      Confusion
+      Confusion,
+      OptimisationHistory
     },
     props: {
       file: Object
@@ -127,5 +137,12 @@
     justify-content: space-between;
   }
 
+  .fold-information p{
+    margin: 0px;
+  }
+  .fold-information{
+    margin-bottom: 20px;
+  }
+
 
 </style>