Support context lost event in flatmapvuer and scaffoldvuer.

cypress/component/MapContent.cy.js

@@ -101,14 +101,17 @@ describe('MapContent', () => {
       if (err.message.includes("knowledge/query/")) {
         return false
       }
+      if (err.message.includes("Cannot read properties of null (reading 'id')")) {
+        return false
+      }
       return true
     })
 
     Cypress.Commands.add('checkFlatmapProvenanceCard', (species, prevPublicationLink) => {
       cy.get('#flatmap-select').click({force: true} );
       cy.get('.el-select-dropdown__wrap > .el-scrollbar__view').contains(species).click();
       cy.get('.multi-container > .el-loading-parent--relative > [name="el-loading-fade"] > .el-loading-mask', {timeout: 60000}).should('not.exist');
-      cy.get('.el-row > div[style=""]').click()
+      cy.get('#maplibre-minimap > .maplibregl-canvas-container > .maplibregl-canvas', {timeout: 60000}).should('be.visible');      cy.get('.el-row > div[style=""]').click()
       cy.get('.flatmap-context-card > .card-right > a').contains('here').should('have.attr', 'href').and('include', species.toLowerCase())
       cy.get('.flatmap-context-card').trigger('mouseover');
       cy.get('.flatmap-context-card').within(() => {
@@ -201,6 +204,7 @@ ${publicationLink}`;
 
       // Wait for the loading to complete
       cy.get('.multi-container > .el-loading-parent--relative > [name="el-loading-fade"] > .el-loading-mask', {timeout: 60000}).should('not.exist');
+      cy.get('#maplibre-minimap > .maplibregl-canvas-container > .maplibregl-canvas', {timeout: 60000}).should('be.visible');
 
       // Verify that the selected species is in the species dropdown
       cy.get('.contentvuer .component-container .el-select.select-box .el-select__selection .el-select__selected-item.el-select__placeholder')
@@ -260,9 +264,8 @@ ${publicationLink}`;
     cy.wait('@anatomyResponse', {timeout: 20000});
 
     cy.get('.multi-container > .el-loading-parent--relative > [name="el-loading-fade"] > .el-loading-mask', {timeout: 60000}).should('not.exist');
+    cy.get('#maplibre-minimap > .maplibregl-canvas-container > .maplibregl-canvas', {timeout: 60000}).should('be.visible');
 
-
-    //There is some issue with capture function with Cypress causing the screenshot to be taken incorrectly,
     //the following attempt to workaround it.
     function is_high_resolution_screen() {
       // retina display has a devicePixelRatio of 2
@@ -288,9 +291,6 @@ ${publicationLink}`;
       cy.checkGlobalSettings('MapContent_1pane', setting, index);
     })
 
-    //Test the existence of the minimap
-    cy.get('#maplibre-minimap > .maplibregl-canvas-container > .maplibregl-canvas', {timeout: 60000}).should('exist');
-
     cy.checkFlatmapProvenanceCard('Mouse')
     cy.get('@Mouse_publicationLink').then((mousePublicationLink) => {
       cy.checkFlatmapProvenanceCard('Rat', mousePublicationLink);

package.json

@@ -52,11 +52,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.11.4",
+    "@abi-software/flatmapvuer": "^1.12.0-beta.0",
     "@abi-software/map-side-bar": "2.10.6",
-    "@abi-software/map-utilities": "1.7.5",
+    "@abi-software/map-utilities": "^1.7.6",
     "@abi-software/plotvuer": "1.0.5",
-    "@abi-software/scaffoldvuer": "1.12.0",
+    "@abi-software/scaffoldvuer": "^1.13.0-beta.0",
     "@abi-software/simulationvuer": "2.0.17",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.0.3",

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();