Merge pull request #212 from akhuoa/feature/performance-optimisation

Optimise performance of components loading

src/components/ContentVuer.vue

@@ -20,34 +20,39 @@
     ></DatasetHeader>
   -->
     <div class="component-container" ref="container">
-      <Component
-        :is="viewerType"
-        :entry="entry"
-        :mouseHovered="mouseHovered"
-        :visible="visible"
-        ref="viewer"
-        @flatmap-provenance-ready="flatmapProvenacneReady"
-        @resource-selected="resourceSelected"
-        @species-changed="speciesChanged"
-      />
+      <Suspense>
+        <Component
+          :is="viewerType"
+          :entry="entry"
+          :mouseHovered="mouseHovered"
+          :visible="visible"
+          :lazy="true"
+          ref="viewer"
+          @flatmap-provenance-ready="flatmapProvenacneReady"
+          @resource-selected="resourceSelected"
+          @species-changed="speciesChanged"
+        />
+      </Suspense>
     </div>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { defineAsyncComponent } from 'vue'
 import { ElButton as Button } from "element-plus";
 import ContentBar from "./ContentBar.vue";
-import Flatmap from "./viewers/Flatmap.vue";
-import Iframe from "./viewers/Iframe.vue";
-import MultiFlatmap from "./viewers/MultiFlatmap.vue";
-import Plot from "./viewers/Plot.vue";
-import Scaffold from "./viewers/Scaffold.vue";
-import Simulation from "./viewers/Simulation.vue";
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
 import { useSplitFlowStore } from '../stores/splitFlow';
 
+const Flatmap = defineAsyncComponent(() => import("./viewers/Flatmap.vue"));
+const Iframe = defineAsyncComponent(() => import("./viewers/Iframe.vue"));
+const MultiFlatmap = defineAsyncComponent(() => import("./viewers/MultiFlatmap.vue"));
+const Plot = defineAsyncComponent(() => import("./viewers/Plot.vue"));
+const Scaffold = defineAsyncComponent(() => import("./viewers/Scaffold.vue"));
+const Simulation = defineAsyncComponent(() => import("./viewers/Simulation.vue"));
+
 export default {
   name: "ContentVuer",
   props: {

src/components/SplitDialog.vue

@@ -73,10 +73,10 @@ export default {
       return refName;
     },
     getStyle: function(id) {
-      /* 
-        Set the style based on the position of the spltters 
+      /*
+        Set the style based on the position of the spltters
         Header is 30px in height and the splitter is 1px in
-        height/width. The width, height and positon of the 
+        height/width. The width, height and positon of the
         viewer should take that into account.
       */
       const refName = this.getRefsName(id);
@@ -124,7 +124,7 @@ export default {
       return states;
     },
     setStyles: function(refName, rect) {
-      if (this.$refs && ('tabContainer' in this.$refs)) {
+      if (this.$refs && this.$refs.tabContainer) {
         const bound = this.$refs.tabContainer.getBoundingClientRect();
         const style = {};
         style["width"] = `${rect.width}px`;

src/components/viewers/Flatmap.vue

@@ -64,7 +64,7 @@ export default {
       return this.$refs.flatmap.searchAndShowResult(term);
     },
     getFlatmapImp() {
-      return this.$refs.flatmap.mapImp;
+      return this.$refs.flatmap?.mapImp;
     },
     flatmaprResourceSelected: function (type, resource) {
       this.resourceSelected(

src/components/viewers/MultiFlatmap.vue

@@ -325,7 +325,7 @@ export default {
       }
     },
     getFlatmapImp: function () {
-      if (this.entry.type === "MultiFlatmap" && this.flatmapReady) {
+      if (this.entry.type === "MultiFlatmap" && this.flatmapReady && this.$refs.multiflatmap) {
         return this.$refs.multiflatmap.getCurrentFlatmap()["mapImp"];
       } else {
         return undefined;