fix: load dashboard panels in sequence, WIP

Firefox is hanging when all the panels try to load at once. Let's WIP and see if loading in series works better -- then once it is working, we can try to optimize the load order / speed later.
sfcta · Feb 7, 2022 · 8e42dec · 8e42dec
1 parent 1e26a5b
commit 8e42dec
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/src/charts/links.vue b/src/charts/links.vue
@@ -5,6 +5,7 @@ link-volumes.deck-map(
   :config="config"
   :thumbnail="false"
   :datamanager="datamanager"
+  @isLoaded="isLoaded"
 )
 
 </template>
@@ -28,6 +29,10 @@ export default class VueComponent extends Vue {
     // console.log(this.fileSystemConfig)
     // console.log('subfolder', this.subfolder)
     // console.log('config', this.config)
+    // this.$emit('isLoaded')
+  }
+
+  private isLoaded() {
     this.$emit('isLoaded')
   }
 }

diff --git a/src/components/TopSheet/TopSheet.vue b/src/components/TopSheet/TopSheet.vue
@@ -115,7 +115,6 @@ export default class VueComponent extends Vue {
       this.table = []
       // this.table = [{ title: message, value: '', style: { backgroundColor: 'yellow' } }]
     }
-    this.$emit('isLoaded')
   }
 
   private processWorkerMessage(message: MessageEvent) {
@@ -130,9 +129,11 @@ export default class VueComponent extends Vue {
         break
       case 'results':
         this.table = data.results
+        this.$emit('isLoaded')
         break
       default:
         // shouldn't be here
+        this.$emit('isLoaded')
         console.error(data)
     }
   }

diff --git a/src/components/viz-configurator/VizConfigurator.vue b/src/components/viz-configurator/VizConfigurator.vue
@@ -126,7 +126,8 @@ export default class VueComponent extends Vue {
 
   private clickedExport() {
     let suggestedFilename = 'viz-links-export.yaml'
-    const configFile = this.yamlConfig.toLocaleLowerCase()
+
+    const configFile = this.yamlConfig?.toLocaleLowerCase() || ''
     if (configFile.endsWith('yaml') || configFile.endsWith('yml')) {
       suggestedFilename = this.yamlConfig
     }

diff --git a/src/plugins/links-gl/LinkVolumes.vue b/src/plugins/links-gl/LinkVolumes.vue
@@ -233,6 +233,11 @@ class MyPlugin extends Vue {
   private isDarkMode = this.$store.state.colorScheme === ColorScheme.DarkMode
   private isDataLoaded = false
 
+  private setDataIsLoaded() {
+    this.isDataLoaded = true
+    this.$emit('isLoaded', true)
+  }
+
   public buildFileApi() {
     const filesystem = this.getFileSystem(this.root)
     this.myState.fileApi = new HTTPFileSystem(filesystem)
@@ -341,7 +346,10 @@ class MyPlugin extends Vue {
   }
 
   @Watch('$store.state.colorScheme') private swapTheme() {
-    this.isDarkMode = this.$store.state.colorScheme === ColorScheme.DarkMode
+    setTimeout(
+      () => (this.isDarkMode = this.$store.state.colorScheme === ColorScheme.DarkMode),
+      100
+    )
   }
 
   private arrayBufferToBase64(buffer: any) {
@@ -779,7 +787,7 @@ class MyPlugin extends Vue {
     this.csvData.dataTable[LOOKUP_COLUMN].values = lookup
 
     this.myState.statusMessage = ''
-    this.isDataLoaded = true
+    this.setDataIsLoaded()
   }
 
   private handleDatasetisLoaded(datasetId: string) {
@@ -815,7 +823,7 @@ class MyPlugin extends Vue {
 
     // last dataset
     if (datasetKeys.length === Object.keys(this.vizDetails.datasets).length) {
-      this.isDataLoaded = true
+      this.setDataIsLoaded()
       this.myState.statusMessage = ''
       console.log({ DATASETS: this.datasets })
     }

diff --git a/src/views/DashBoard.vue b/src/views/DashBoard.vue
@@ -40,20 +40,17 @@
 
 
         //- card contents
-        .spinner-box(v-if="getCardComponent(card)"
-          :id="card.id"
-          :class="{'is-loaded': card.isLoaded}"
-        )
+        .spinner-box(v-if="getCardComponent(card)" :id="card.id" :class="{'is-loaded': numberOfShownCards >= card.number}")
 
           component.dash-card(
+            v-if="numberOfShownCards >= card.number"
             :is="getCardComponent(card)"
             :fileSystemConfig="fileSystemConfig"
             :subfolder="xsubfolder"
             :files="fileList"
             :yaml="card.props.configFile"
             :config="card.props"
             :datamanager="datamanager"
-            :style="{opacity: opacity[card.id]}"
             :cardId="card.id"
             :cardTitle="card.title"
             :allConfigFiles="allConfigFiles"
@@ -273,9 +270,10 @@ export default class VueComponent extends Vue {
       cards.forEach(card => {
         card.id = `card-id-${numCard}`
         card.isLoaded = false
+        card.number = numCard
 
         // Vue is weird about new properties: use Vue.set() instead
-        Vue.set(this.opacity, card.id, 0.1)
+        Vue.set(this.opacity, card.id, 0.15)
         Vue.set(this.infoToggle, card.id, false)
 
         numCard++
@@ -285,6 +283,8 @@ export default class VueComponent extends Vue {
     }
   }
 
+  private numberOfShownCards = 1
+
   @Watch('$store.state.locale') updateLabels() {
     this.title = this.getDashboardLabel('title')
     this.description = this.getDashboardLabel('description')
@@ -310,6 +310,7 @@ export default class VueComponent extends Vue {
   private async handleCardIsLoaded(card: any) {
     card.isLoaded = true
     this.opacity[card.id] = 1.0
+    this.numberOfShownCards++
   }
 }
 </script>