@abi-software/mapintegratedvuer 1.23.0 → 1.24.1

package/src/components/viewers/Scaffold.vue

@@ -57,6 +57,7 @@
 import { markRaw } from 'vue';
 import EventBus from '../EventBus';
 import ContentMixin from '../../mixins/ContentMixin';
+import { snapshotThreeRenderer } from '../../services/screenshot.js';
 
 import { ScaffoldVuer } from '@abi-software/scaffoldvuer';
 import '@abi-software/scaffoldvuer/dist/style.css';
@@ -150,7 +151,10 @@ export default {
       // Both EventBus.emit and getKnowledgeTooltip will trigger sidebar content update
       // Then setVisibilityFilter will be called to zoom to the clicked nerve.
       if (resource.length === 1) {
-        this.clickedObject = resource[0].data;
+        // Keep only the fields needed here; resource data carries the live
+        // zincObject, which should not be made reactive or retained.
+        const { id, isNerves, anatomicalId } = resource[0].data;
+        this.clickedObject = { id, isNerves, anatomicalId };
         if (this.clickedObject.isNerves || this.clickedObject.anatomicalId) {
           const label = this.clickedObject.id.toLowerCase();
           if (this.$refs.scaffold.viewingMode === 'Neuron Connection') {
@@ -245,6 +249,11 @@ export default {
         this.scaffoldCamera.onResize();
       }
     },
+    getScreenshotSources: async function (pixelRatio) {
+      const zincRenderer = this.$refs.scaffold?.$module?.zincRenderer;
+      if (!zincRenderer) return [];
+      return [snapshotThreeRenderer(zincRenderer, pixelRatio)];
+    },
     getState: function () {
       if (this.$refs.scaffold) {
         return this.$refs.scaffold.getState();
@@ -297,6 +306,7 @@ export default {
     },
     scaffoldIsReady: function () {
       this.scaffoldLoaded = true;
+      this.$emit('viewer-ready', true);
       this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1];
       if (!this.scaffoldRef) {
         this.scaffoldRef = markRaw(this.$refs.scaffold);
@@ -309,7 +319,7 @@ export default {
       }
       this.updateViewerSettings();
       EventBus.emit('mapLoaded', this.$refs.scaffold);
-      setTimeout(() => {
+      this._greyScaleTimer = setTimeout(() => {
         this.setNerveGreyScale();
       }, 500);
     },
@@ -383,6 +393,9 @@ export default {
         ? this.settingsStore.numberOfDatasetsForFacets
         : {};
     },
+    scaffoldKnowledge: function () {
+      return this.connectivityKnowledge?.[this.entry.resource];
+    },
   },
   watch: {
     visible: {
@@ -403,23 +416,19 @@ export default {
           });
         }
       },
-      deep: true,
       immediate: true,
     },
-    connectivityKnowledge: {
-      handler(newVal, _oldVal) {
+    // Knowledge entries are replaced so a shallow watch on this scaffold's entry is sufficient
+    scaffoldKnowledge: {
+      handler(scaffoldKnowledge) {
         // Store scaffold knowledge locally
-        if (this.entry.resource in newVal) {
-          const scaffoldKnowledge = newVal[this.entry.resource];
-          if (scaffoldKnowledge.length !== this.nervesKnowledge.length) {
-            this.nervesKnowledge = scaffoldKnowledge;
-            if (this.scaffoldLoaded) {
-              this.setNerveGreyScale();
-            }
+        if (scaffoldKnowledge && scaffoldKnowledge.length !== this.nervesKnowledge.length) {
+          this.nervesKnowledge = scaffoldKnowledge;
+          if (this.scaffoldLoaded) {
+            this.setNerveGreyScale();
           }
         }
       },
-      deep: true,
       immediate: true,
     },
   },
@@ -435,6 +444,9 @@ export default {
       query: '',
     };
   },
+  beforeUnmount: function () {
+    clearTimeout(this._greyScaleTimer);
+  },
 };
 </script>
 

package/src/components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconCamera: typeof import('@element-plus/icons-vue')['Camera']
     ElIconCompass: typeof import('@element-plus/icons-vue')['Compass']
     ElIconEditPen: typeof import('@element-plus/icons-vue')['EditPen']
     ElIconMoreFilled: typeof import('@element-plus/icons-vue')['MoreFilled']
@@ -57,6 +58,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Scaffold: typeof import('./components/viewers/Scaffold.vue')['default']
+    ScreenshotPopover: typeof import('./components/ScreenshotPopover.vue')['default']
     SearchControls: typeof import('./components/SearchControls.vue')['default']
     Simulation: typeof import('./components/viewers/Simulation.vue')['default']
     SplitDialog: typeof import('./components/SplitDialog.vue')['default']

package/src/mixins/ContentMixin.js

@@ -6,6 +6,7 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { useConnectivitiesStore } from '../stores/connectivities';
 import Tagging from '../services/tagging.js';
+import { snapshotMaplibre } from '../services/screenshot.js';
 
 import { getFlatmapFilterOptions } from '@abi-software/map-utilities';
 import { FlatmapQueries } from '@abi-software/flatmapvuer/src/services/flatmapQueries.js';
@@ -17,14 +18,18 @@ import {
   getTermNerveMaps,
   getFilterOptions as getScaffoldFilterOptions,
 } from '@abi-software/scaffoldvuer/src/scripts/MappedNerves.js';
-import { defaultSpecies } from '../components/scripts/utilities.js';
+import {
+  defaultSpecies,
+  getLatestFlatmap,
+  getFlatmapPathways,
+} from '../components/scripts/utilities.js';
 
 function capitalise(text) {
   return text[0].toUpperCase() + text.substring(1);
 }
 
 export default {
-  emits: ['flatmap-provenance-ready', 'resource-selected', 'species-changed'],
+  emits: ['flatmap-provenance-ready', 'resource-selected', 'species-changed', 'viewer-ready'],
   props: {
     /**
      * Object containing information for
@@ -78,6 +83,8 @@ export default {
   },
   beforeUnmount: function () {
     this.alive = false;
+    window.removeEventListener('mousedown', this.checkEndHelpMouseDown);
+    clearTimeout(this.highlightDelay);
   },
   mounted: function () {
     if (this.$refs.multiflatmap) {
@@ -139,6 +146,17 @@ export default {
     getState: function () {
       return undefined;
     },
+    /**
+     * Return snapshots of WebGL canvases rendered at `pixelRatio`,
+     * used by the screenshot service. Defaults to the flatmap canvas.
+     */
+    getScreenshotSources: async function (pixelRatio) {
+      const map = this.getFlatmapImp?.()?.map;
+      if (map) {
+        return [await snapshotMaplibre(map, pixelRatio)];
+      }
+      return [];
+    },
     openMap: function (type) {
       EventBus.emit('OpenNewMap', type);
       this.trackOpenMap(`open_new_${type}_map`);
@@ -612,19 +630,14 @@ export default {
       return;
     },
     loadExplorerConfig: async function () {
-      this.flatmapService = await this.mockUpFlatmapService();
+      this.flatmapService = markRaw(await this.mockUpFlatmapService());
       this.loadConnectivityExplorerConfig(this.flatmapService);
     },
     mockUpFlatmapService: async function () {
-      const flatmapResponse = await fetch(this.flatmapAPI);
-      const flatmapJson = await flatmapResponse.json();
-      const latestFlatmap = flatmapJson
-        .filter((f) => f.id === 'human-flatmap_male')
-        .sort((a, b) => b.created.localeCompare(a.created))[0];
+      const latestFlatmap = await getLatestFlatmap(this.flatmapAPI, 'human-flatmap_male');
       const flatmapUuid = latestFlatmap.uuid;
       const flatmapSource = latestFlatmap.sckan['knowledge-source'];
-      const pathwaysResponse = await fetch(`${this.flatmapAPI}/flatmap/${flatmapUuid}/pathways`);
-      const pathwaysJson = await pathwaysResponse.json();
+      const pathwaysJson = await getFlatmapPathways(this.flatmapAPI, flatmapUuid);
 
       this.flatmapQueries = markRaw(new FlatmapQueries());
       this.flatmapQueries.initialise(this.flatmapAPI);
@@ -692,8 +705,10 @@ export default {
       let validNerves = [];
 
       if (!this.connectivityKnowledge[sckanVersion]) {
-        this.flatmapQueries = markRaw(new FlatmapQueries());
-        this.flatmapQueries.initialise(this.flatmapAPI);
+        if (!this.flatmapQueries) {
+          this.flatmapQueries = markRaw(new FlatmapQueries());
+          this.flatmapQueries.initialise(this.flatmapAPI);
+        }
         const knowledge = await loadAndStoreKnowledge(flatmapImp, this.flatmapQueries);
         this.connectivityKnowledge[sckanVersion] = knowledge
           .filter((item) => item.connectivity?.length)
@@ -770,10 +785,8 @@ export default {
       EventBus.emit('species-layout-connectivity-update');
     },
     knowledgeTooltipQuery: async function (data) {
-      await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.flatmapService.mapImp, {
-        resource: [data.id],
-      });
-      let tooltip = await this.flatmapQueries.createTooltipData(this.flatmapService.mapImp, {
+      // queryTooltipData does not share state between queries, so it can run in parallel
+      let tooltip = await this.flatmapQueries.queryTooltipData(this.flatmapService.mapImp, {
         resource: [data.id],
         label: data.label,
         provenanceTaxonomy: data.taxons,
@@ -793,12 +806,10 @@ export default {
       );
       EventBus.emit('connectivity-info-open', this.tooltipEntry);
 
-      let prom1 = [];
       // While having placeholders displayed, get details for all paths and then replace.
-      for (let index = 0; index < payload.data.length; index++) {
-        prom1.push(await this.knowledgeTooltipQuery(payload.data[index]));
-      }
-      this.tooltipEntry = await Promise.all(prom1);
+      this.tooltipEntry = await Promise.all(
+        payload.data.map((data) => this.knowledgeTooltipQuery(data)),
+      );
       const featureIds = this.tooltipEntry.map((tooltip) => tooltip.featureId[0]);
       if (featureIds.length > 0) {
         EventBus.emit('connectivity-info-open', this.tooltipEntry);