Support context lost event in flatmapvuer and scaffoldvuer.

src/components/ContentVuer.vue

@@ -119,17 +119,6 @@ export default {
       this.activeSpecies = species;
       this.$emit("species-changed", species);
     },
-    /**
-     * Check if this viewer is currently visible
-     */
-    isVisible: function() {
-      const paneName = this.splitFlowStore.getPaneNameById(this.entry.id);
-      let visible = false;
-      if (paneName !== undefined) {
-        visible = this.splitFlowStore.isPaneActive(paneName);
-      }
-      return visible;
-    },
     onResize: function () {
       this.$refs.viewer?.onResize();
     },

src/components/SplitDialog.vue

@@ -102,15 +102,19 @@ export default {
       const vuers = this.$refs['content'];
       if (vuers) {
         vuers.forEach(vuer => {
-          if (vuer.isVisible())
+          if (vuer.visible)
             activeContents.push(vuer);
         });
       }
       return activeContents;
     },
     isIdVisible: function(id) {
-      const refName = this.splitFlowStore.getPaneNameById(id);
-      return refName !== undefined;
+      const paneName = this.splitFlowStore.getPaneNameById(id);
+      let visible = false;
+      if (paneName !== undefined) {
+        visible = this.splitFlowStore.isPaneActive(paneName);
+      }
+      return visible;
     },
     getContentsWithId: function(id) {
       let contents = this.$refs["content"];
@@ -484,7 +488,7 @@ export default {
 
       // Prioritize visible contents so minimap initializes with visible maps first
       multiFlatmapContents.sort((a, b) => {
-        return b.isVisible() - a.isVisible();
+        return b.visible - a.visible;
       });
 
       // Disable minimap when there are more than four panel in map-viewer

src/components/viewers/Flatmap.vue

@@ -27,11 +27,13 @@
       :connectivityInfoSidebar="connectivityInfoSidebar"
       :pathControls="true"
       ref="flatmap"
+      @context-restored="contextRestored"
       @ready="flatmapReadyCall"
       :displayMinimap="displayMinimap"
       :displayWarning="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
+      :render="visible"
       :sparcAPI="apiLocation"
       :showLocalSettings="showLocalSettings"
       :showOpenMapButton="showOpenMapButton"
@@ -92,6 +94,10 @@ export default {
     getFlatmapImp() {
       return this.$refs.flatmap?.mapImp;
     },
+    contextRestored(flatmap) {
+      this.flatmapReadyForMarkerUpdates(flatmap);
+      this.updateViewerSettings();
+    },
     flatmapReadyCall: function (flatmap) {
       this.flatmapReady = true;
       const mapImp = this.getFlatmapImp();

src/components/viewers/MultiFlatmap.vue

@@ -2,6 +2,7 @@
   <div class="viewer-container">
     <MultiFlatmapVuer
       :availableSpecies="availableSpecies"
+      @context-restored="contextRestored"
       @flatmapChanged="flatmapChanged"
       @ready="multiFlatmapReady"
       :state="entry.state"
@@ -30,6 +31,7 @@
       :enableOpenMapUI="true"
       :openMapOptions="openMapOptions"
       :flatmapAPI="flatmapAPI"
+      :render="visible"
       :sparcAPI="apiLocation"
       :showLocalSettings="showLocalSettings"
       :showOpenMapButton="showOpenMapButton"
@@ -60,10 +62,7 @@ import Tagging from '../../services/tagging.js';
 import ContentMixin from "../../mixins/ContentMixin";
 import EventBus from "../EventBus";
 import {
-  capitalise,
   availableSpecies,
-  getBodyScaffoldInfo,
-  transformObjToString
 } from "../scripts/utilities";
 import DyncamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
 
@@ -101,12 +100,13 @@ export default {
   },
   data: function () {
     return {
-      zoomLevel: 6,
-      flatmapReady: false,
       availableSpecies: availableSpecies(),
+      flatmapReady: false,
       scaffoldResource: { },
       showStarInLegend: false,
+      speciesHasChanged: false,
       openMapOptions: getOpenMapOptions("Human Male"),
+      zoomLevel: 6,
     }
   },
   methods: {
@@ -177,7 +177,7 @@ export default {
     },
     zoomToFeatures: function (info, forceSelect) {
       let name = info.name;
-      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+      const flatmap = this.getFlatmapImp();
       if (name) {
         const results = flatmap.search(name);
         if (results.featureIds.length > 0) {
@@ -200,18 +200,36 @@ export default {
         this.$emit("flatmap-provenance-ready", provClone);
       }
     },
+    contextRestored: function(flatmap) {
+      if (flatmap) {
+        this.flatmapMarkerUpdate(flatmap.mapImp);
+        this.updateViewerSettings();
+        if (this.speciesHasChanged) {
+          this.speciesHasChanged = false;
+          this.$emit("species-changed", this.activeSpecies);
+        }
+      }
+    },
     flatmapChanged: async function (activeSpecies) {
       this.activeSpecies = activeSpecies;
       this.openMapOptions = getOpenMapOptions(activeSpecies);
       const flatmapImp = this.getFlatmapImp();
+      this.updateProvCard();
       //If the viewer is loading a new map, flatmapImp is not defined here yet.
       //The following will be handled by multiFlatmapReady instead
       if (flatmapImp) {
-        this.updateProvCard();
-        this.flatmapMarkerUpdate(flatmapImp);
-        this.updateViewerSettings();
+        if (!flatmapImp.contextLost) {
+          this.flatmapMarkerUpdate(flatmapImp);
+          this.updateViewerSettings();
+          this.speciesHasChanged = false;
+          this.$emit("species-changed", activeSpecies);
+        } else {
+          this.speciesHasChanged = true;
+        }
       }
-      this.$emit("species-changed", activeSpecies);
+
+
+
       // GA Tagging
       // Event tracking for maps' species change
       Tagging.sendEvent({

src/components/viewers/Scaffold.vue

@@ -255,7 +255,7 @@ export default {
     scaffoldIsReady: function () {
       this.scaffoldLoaded = true;
       this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1];
-      if (this.isVisible()) {
+      if (this.visible) {
         let rotation = "free";
         if (this.entry.rotation) rotation = this.entry.rotation;
       }

src/mixins/ContentMixin.js

@@ -83,7 +83,6 @@ export default {
       if (this.multiflatmapRef) {
         const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
         const mapImp = currentFlatmap?.mapImp;
-
         if (mapImp) {
           if (option === true) {
             // Only create minimap when it is not created before or destroyed
@@ -274,13 +273,6 @@ export default {
         )
       );
     },
-    /**
-     * Check if this viewer is currently visible
-     */
-    isVisible: function() {
-      const paneName = this.splitFlowStore.getPaneNameById(this.entry.id);
-      return paneName !== undefined;
-    },
     /**
      * Get the term to zoom/highlight in a synchronisation event,
      * if it cannot be found in the map, it will perform several
@@ -559,10 +551,12 @@ export default {
         clearTimeout(this.highlightDelay);
         if (!hoverAnatomies.length && !hoverOrgans.length && !hoverDOI && !hoverConnectivity.length) {
           if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
-            flatmap.mapImp?.clearSearchResults();
-            if (payload.connectivityProcessed) {
-              // grey out all connectivity if no search results
-              flatmap.mapImp?.setPaint({ dimmed: true })
+            if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
+              flatmap.mapImp?.clearSearchResults();
+              if (payload.connectivityProcessed) {
+                // grey out all connectivity if no search results
+                flatmap.mapImp?.setPaint({ dimmed: true })
+              }
             }
           } else if (this.scaffoldRef && scaffold) {
             scaffold.changeHighlightedByName(hoverOrgans, "", false);
@@ -589,7 +583,9 @@ export default {
                       )
                     );
                     if (!found) {
-                      flatmap.mapImp.clearSearchResults();
+                      if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
+                        flatmap.mapImp.clearSearchResults();
+                      }
                     }
                   }
                 }