@abi-software/mapintegratedvuer 1.23.0 → 1.24.0

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