Merge pull request simwrapper#118 from simwrapper/errorHandling

Error handling

src/App.vue

@@ -6,7 +6,7 @@
     router-view.main-content
     p(style="text-justify: center; margin: auto auto; font-size: 2rem;"): i • S i m W r a p p e r •
 
-  .message-zone(v-if="state.statusErrors.length")
+  //.message-zone(v-if="state.statusErrors.length")
     .message-error(v-for="err,i in state.statusErrors")
       p: i.fa.fa-icon.fa-exclamation-triangle(style="color: orange;")
       p(v-html="err")

src/Globals.ts

@@ -126,6 +126,11 @@ export interface BreadCrumb {
   url?: string
 }
 
+export interface Warnings {
+  msg: string
+  desc?: string
+}
+
 export interface ColorSet {
   text: string
   background: string

src/charts/bar.vue

@@ -50,6 +50,8 @@ export default class VueComponent extends Vue {
 
     this.$emit('dimension-resizer', { id: this.cardId, resizer: this.changeDimensions })
     this.$emit('isLoaded')
+
+    this.checkWarningsAndErrors()
   }
 
   private changeDimensions(dimensions: { width: number; height: number }) {
@@ -62,6 +64,21 @@ export default class VueComponent extends Vue {
     } catch (e) {}
   }
 
+  // Check this plot for warnings and errors
+  private checkWarningsAndErrors() {
+    var plotTitle = this.cardTitle
+    // warnings
+    // missing title
+    if (plotTitle.length == 0) {
+      this.$store.commit('setStatus', {
+        type: Status.WARNING,
+        msg: `The plot title is missing!`,
+        desc: "Please add a plot title in the .yaml-file (title: 'Example title')",
+      })
+    }
+    // errors
+  }
+
   @Watch('globalState.isDarkMode')
   updateTheme() {
     const colors = {

src/charts/bubble.vue

@@ -80,7 +80,11 @@ export default class VueComponent extends Vue {
       else this.updateChartSimple()
     } catch (e) {
       const msg = '' + e
-      this.$store.commit('setStatus', { type: Status.ERROR, msg })
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        msg,
+        desc: 'Add a desription...',
+      })
     }
   }
 

src/charts/heatmap.vue

@@ -13,7 +13,7 @@ import { transpose } from 'mathjs'
 
 import VuePlotly from '@/components/VuePlotly.vue'
 import DashboardDataManager from '@/js/DashboardDataManager'
-import { DataTable, FileSystemConfig, UI_FONT } from '@/Globals'
+import { DataTable, FileSystemConfig, UI_FONT, Status } from '@/Globals'
 import globalStore from '@/store'
 import { buildCleanTitle } from '@/charts/allCharts'
 
@@ -36,6 +36,7 @@ export default class VueComponent extends Vue {
 
   private async mounted() {
     this.updateTheme()
+    this.checkWarningsAndErrors()
     this.dataSet = await this.loadData()
     if (Object.keys(this.dataSet).length) {
       this.updateChart()
@@ -80,8 +81,11 @@ export default class VueComponent extends Vue {
       return dataset
     } catch (e) {
       const message = '' + e
-      console.error(message)
-      this.$store.commit('error', message)
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        message,
+        desc: 'Add a desription...',
+      })
     }
     return {}
   }
@@ -95,7 +99,11 @@ export default class VueComponent extends Vue {
       else this.updateChartSimple()
     } catch (e) {
       const msg = '' + e
-      this.$store.commit('error', msg)
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        msg,
+        desc: 'Add a desription...',
+      })
     }
   }
 
@@ -142,6 +150,21 @@ export default class VueComponent extends Vue {
     ]
   }
 
+  // Check this plot for warnings and errors
+  private checkWarningsAndErrors() {
+    var plotTitle = this.cardTitle
+    // warnings
+    // missing title
+    if (plotTitle.length == 0) {
+      this.$store.commit('setStatus', {
+        type: Status.WARNING,
+        msg: `The plot title is missing!`,
+        desc: "Please add a plot title in the .yaml-file (title: 'Example title')",
+      })
+    }
+    // errors
+  }
+
   private layout: any = {
     margin: { t: 8, b: 50 },
     font: {

src/charts/line.vue

@@ -79,7 +79,11 @@ export default class VueComponent extends Vue {
       else this.updateChartSimple()
     } catch (e) {
       const msg = '' + e
-      this.$store.commit('setStatus', { type: Status.ERROR, msg })
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        msg,
+        desc: 'Add a desription...',
+      })
     }
   }
 

src/charts/pie.vue

@@ -77,7 +77,11 @@ export default class VueComponent extends Vue {
       else this.updateChartSimple()
     } catch (e) {
       const msg = '' + e
-      this.$store.commit('setStatus', { type: Status.ERROR, msg })
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        msg,
+        desc: 'Add a desription...',
+      })
     }
   }
 

src/charts/scatter.vue

@@ -79,7 +79,11 @@ export default class VueComponent extends Vue {
       else this.updateChartSimple()
     } catch (e) {
       const msg = '' + e
-      this.$store.commit('setStatus', { type: Status.ERROR, msg })
+      this.$store.commit('setStatus', {
+        type: Status.ERROR,
+        msg,
+        desc: 'Add a desription...',
+      })
     }
   }
 

src/components/RunFinderPanel.vue

@@ -6,21 +6,42 @@
 
   .top-panel
     .stuff-in-main-panel
-      .more-stuff
-
+      .more-stuff(v-if="!showWarnings")
         .root-files(v-for="node,i in rootNodes" :key="i")
           h3: b {{ node.name }}
 
           tree-view.things(:initialData="node" @navigate="$emit('navigate', $event)")
 
+      .warnings(v-else)
+        .message-area(v-if="!state.statusErrors.length && !state.statusWarnings.length")
+          p.no-error There are no errors or warnings.
+
+        .message-area(v-else)
+          h3(v-if="state.statusErrors.length") {{state.statusErrors.length}} Error{{state.statusErrors.length !== 1 ? 's' : ''}}
+          .single-message(v-for="err,i in state.statusErrors")
+            li(v-html="err.msg" @click="toggleShowDescription(i, true)")
+            .description(v-if="descriptionIndexListError.includes(i)")
+              p(v-html="err.desc")
+          h3(v-if="state.statusWarnings.length") {{state.statusWarnings.length}} Warnings
+          .single-message(v-for="err,i in state.statusWarnings")
+            li(v-html="err.msg" @click="toggleShowDescription(i, false)")
+            .description(v-if="descriptionIndexListWarning.includes(i)")
+              p(v-html="err.desc")
+
+
   .bottom-panel
     //- h3 Search
     //- input.input(placeholder="Search text (TBA)")
+    button.button.clear-button.is-warning(v-if="state.statusErrors.length && showWarnings || state.statusWarnings.length && showWarnings" @click="clearAllButtons()") Clear all errors
+
 
     .commands
       button.button(:class="{'is-dark' : state.isDarkMode}" @click="onScan" :title="$t('sync')"): i.fa.fa-sync
       button.button(:class="{'is-dark' : state.isDarkMode}" @click="onDarkLight" :title="$t('theme')"): i.fa.fa-adjust
       button.button(:class="{'is-dark' : state.isDarkMode}" @click="onLanguage" :title="$t('lang')"): i.fa.fa-globe
+      button.button(v-if="state.statusErrors.length" :class="{'is-dark' : state.isDarkMode}" style="background-color: red; color: white; border-color: red" @click="onWarning" :title="$t('lang')"): i.fa.fa-exclamation-triangle
+      button.button(v-if="!state.statusErrors.length && state.statusWarnings.length" :class="{'is-dark' : state.isDarkMode}" style="background-color: yellow; border-color: yellow" @click="onWarning" :title="$t('lang')"): i.fa.fa-exclamation-triangle
+      button.button(v-if="!state.statusErrors.length && !state.statusWarnings.length" :class="{'is-dark' : state.isDarkMode}" @click="onWarning" :title="$t('lang')"): i.fa.fa-exclamation-triangle
       button.button(:class="{'is-dark' : state.isDarkMode}" style="margin-right: 0" @click="onSplit" :title="$t('split')"): i.fa.fa-columns
 
     p(style="margin: 0.25rem 0.25rem 0.25rem 0.5rem") {{ globalState.runFolderCount ? `Folders scanned: ${globalState.runFolderCount}` : '' }}
@@ -66,17 +87,45 @@ class MyComponent extends Vue {
 
   private baseURL = import.meta.env.BASE_URL
 
+  private showWarnings = false
+  private showDescription = false
+  private descriptionIndexListWarning: number[] = []
+  private descriptionIndexListError: number[] = []
+  private isError = false
+
   private mounted() {
     // start the run finder process
     runFinder.findRuns()
     // react to found folders
     this.onRunFoldersChanged()
   }
 
+  @Watch('$route.path') test() {
+    this.clearAllButtons()
+  }
+
   @Watch('$store.state.runFolderCount') updatedCount() {
     this.debounceRunFoldersChanged()
   }
 
+  @Watch('$store.state.statusErrors') openErrorPage() {
+    if (this.$store.state.statusErrors.length) this.showWarnings = true
+  }
+
+  @Watch('$store.state.statusWarnings') openWarningPage() {
+    if (this.$store.state.statusWarnings.length) this.showWarnings = true
+  }
+
+  @Watch('state.isDarkMode') updateTheme() {
+    console.log('Hi!', this.$store.state.statusWarnings)
+  }
+
+  @Watch('$store.state.statusErrors') gotNewErrors() {
+    if (this.$store.state.statusErrors.length) {
+      this.showWarnings = true
+    }
+  }
+
   private async onRunFoldersChanged() {
     const newTree = {} as any
     this.rootNodes = []
@@ -139,6 +188,11 @@ class MyComponent extends Vue {
     return rootNode
   }
 
+  private clearAllButtons() {
+    this.$store.commit('clearAllErrors')
+    this.showWarnings = false
+  }
+
   private onSplit() {
     this.$emit('split')
   }
@@ -157,6 +211,28 @@ class MyComponent extends Vue {
     this.$root.$i18n.locale = newLocale
   }
 
+  private onWarning() {
+    this.showWarnings = !this.showWarnings
+  }
+
+  private toggleShowDescription(i: number, isError: boolean) {
+    this.isError = isError
+    if (isError) {
+      if (this.descriptionIndexListError.includes(i)) {
+        var index = this.descriptionIndexListError.indexOf(i)
+        this.descriptionIndexListError.splice(index, 1)
+      } else {
+        this.descriptionIndexListError.push(i)
+      }
+    } else {
+      if (this.descriptionIndexListWarning.includes(i)) {
+        var index = this.descriptionIndexListWarning.indexOf(i)
+        this.descriptionIndexListWarning.splice(index, 1)
+      } else {
+        this.descriptionIndexListWarning.push(i)
+      }
+    }
+  }
   private globalState = globalStore.state
 }
 export default MyComponent
@@ -213,7 +289,7 @@ export default MyComponent
 
 .bottom-panel {
   margin-top: auto;
-  padding: 0 1rem 0.25rem 0.5rem;
+  padding: 0 0.5rem 0.25rem 0.5rem;
 }
 
 a {
@@ -235,7 +311,7 @@ a {
 .commands {
   display: flex;
   flex-direction: row;
-  margin-right: -0.5rem;
+  // margin-right: -0.5rem;
 }
 
 .commands .button {
@@ -283,6 +359,50 @@ a {
   margin-left: -1rem;
 }
 
+.warnings {
+  display: flex;
+  flex-direction: column;
+  inline-size: 13rem;
+  text-align: left;
+  font-size: 0.9rem;
+}
+
+.message-area {
+  text-indent: -20px;
+  margin-left: 20px;
+}
+
+.single-message {
+  list-style-position: outside;
+  cursor: pointer;
+}
+
+.description {
+  width: 100%;
+  height: min-content;
+  background-color: rgb(95, 123, 167);
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  padding: 0 0.25rem;
+  text-indent: 0;
+  margin-left: 0px;
+}
+
+.no-error {
+  text-indent: 0;
+  margin-left: -20px;
+}
+
+.clear-button {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  margin-left: 0rem;
+}
+
+::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+
 @media only screen and (max-width: 640px) {
   .content {
     padding: 2rem 1rem 8rem 1rem;

src/js/DashboardDataManager.ts

@@ -283,8 +283,14 @@ export default class DashboardDataManager {
         thread.onmessage = e => {
           thread.terminate()
           if (e.data.error) {
-            console.error(e.data.error)
-            globalStore.commit('error', e.data.error)
+            console.log(e.data.error)
+            var msg = '' + e.data.error
+            //globalStore.commit('error', e.data.error)
+            globalStore.commit('setStatus', {
+              type: Status.ERROR,
+              msg: `File cannot be loaded...`,
+              desc: 'Please check if the file exists: ' + this.subfolder + '/' + config.dataset,
+            })
             reject()
           }
           resolve(e.data)