@abi-software/mapintegratedvuer 1.23.0 → 1.24.0

package/src/components/SplitDialog.vue

@@ -22,12 +22,13 @@
 <script>
 import ContentVuer from './ContentVuer.vue';
 import CustomSplitter from './CustomSplitter.vue';
-import EventBus from './EventBus';
+import EventBus, { onEvents } from './EventBus';
 import { mapStores } from 'pinia';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { useSettingsStore } from '../stores/settings';
 import { useConnectivitiesStore } from '../stores/connectivities';
 import { queryPathsByRoute, queryAllConnectedPaths } from '@abi-software/map-utilities';
+import { getLatestFlatmap } from './scripts/utilities.js';
 
 export default {
   name: 'SplitDialog',
@@ -314,13 +315,8 @@ export default {
       return ids;
     },
     getLatestFlatmapUUID: async function (flatmapAPI, id) {
-      const flatmapResponse = await fetch(flatmapAPI);
-      const flatmapJson = await flatmapResponse.json();
-      const latestFlatmap = flatmapJson
-        .filter((f) => f.id === id)
-        .sort((a, b) => b.created.localeCompare(a.created))[0];
-      const flatmapUUID = latestFlatmap.uuid;
-      return flatmapUUID;
+      const latestFlatmap = await getLatestFlatmap(flatmapAPI, id);
+      return latestFlatmap.uuid;
     },
     parseSearchTerms: function (query) {
       return query
@@ -587,93 +583,98 @@ export default {
     },
   },
   mounted: function () {
-    EventBus.on('PaneResize', (payload) => {
-      this.setStyles(payload.refName, payload.rect);
-      this.updateFlatmapMinimap();
-    });
-    EventBus.on('PaneUnmounted', (payload) => {
-      this.hidePane(payload.refName);
-    });
-    EventBus.on('species-layout-connectivity-update', () => {
-      this.onSpeciesLayoutConnectivityUpdate();
-    });
-    EventBus.on('connectivity-query-filter', (payload) => {
-      this.connectivityQueryFilter(payload);
-    });
-    //The followings are migrated from ContentVuer and its child components to here
-    EventBus.on('hoverUpdate', (payload) => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onHoverUpdate(payload);
-      });
-    });
-    EventBus.on('startHelp', () => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onStartHelp();
-      });
-    });
-    EventBus.on('connectivity-item-close', () => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onConnectivityItemClose();
-      });
-    });
-    EventBus.on('sidebar-annotation-close', () => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onSidebarAnnotationClose();
-      });
-    });
-    EventBus.on('globalViewerSettingsUpdate', () => {
-      const contents = this.$refs['content'];
-      contents.forEach((content) => {
-        content.onGlobalViewerSettingsUpdate();
-      });
-    });
-    EventBus.on('markerUpdate', () => {
-      const contents = this.$refs['content'];
-      contents.forEach((content) => {
-        content.onFlatmapMarkerUpdate();
-      });
-    });
-    EventBus.on('connectivity-hovered', (payload) => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onShowConnectivityTooltips(payload);
-      });
-    });
-    EventBus.on('connectivity-source-change', (payload) => {
-      const contents = this.getActiveContents();
-      //Use ongoingSource array to make sure, the knowledge
-      //from each source is only loaded once.
-      //TODO: This can be improved with using just one viewer to give us
-      //the new knowlegdge with the species/sources specified which
-      //will require some UI changes on the sidebar
-      const ongoingSources = [];
-      contents.forEach((content) => {
-        content.onConnectivitySourceChange(payload, ongoingSources);
-      });
-    });
-    EventBus.on('show-connectivity', (payload) => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onShowConnectivity(payload);
-      });
-    });
-    EventBus.on('show-reference-connectivities', (payload) => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onShowReferenceConnectivity(payload);
-      });
-    });
-    EventBus.on('filter-visibility', (payload) => {
-      const contents = this.getActiveContents();
-      contents.forEach((content) => {
-        content.onFilterVisibility(payload);
-      });
+    this._offBus = onEvents({
+      PaneResize: (payload) => {
+        this.setStyles(payload.refName, payload.rect);
+        this.updateFlatmapMinimap();
+      },
+      PaneUnmounted: (payload) => {
+        this.hidePane(payload.refName);
+      },
+      'species-layout-connectivity-update': () => {
+        this.onSpeciesLayoutConnectivityUpdate();
+      },
+      'connectivity-query-filter': (payload) => {
+        this.connectivityQueryFilter(payload);
+      },
+      //The followings are migrated from ContentVuer and its child components to here
+      hoverUpdate: (payload) => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onHoverUpdate(payload);
+        });
+      },
+      startHelp: () => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onStartHelp();
+        });
+      },
+      'connectivity-item-close': () => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onConnectivityItemClose();
+        });
+      },
+      'sidebar-annotation-close': () => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onSidebarAnnotationClose();
+        });
+      },
+      globalViewerSettingsUpdate: () => {
+        const contents = this.$refs['content'];
+        contents.forEach((content) => {
+          content.onGlobalViewerSettingsUpdate();
+        });
+      },
+      markerUpdate: () => {
+        const contents = this.$refs['content'];
+        contents.forEach((content) => {
+          content.onFlatmapMarkerUpdate();
+        });
+      },
+      'connectivity-hovered': (payload) => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onShowConnectivityTooltips(payload);
+        });
+      },
+      'connectivity-source-change': (payload) => {
+        const contents = this.getActiveContents();
+        //Use ongoingSource array to make sure, the knowledge
+        //from each source is only loaded once.
+        //TODO: This can be improved with using just one viewer to give us
+        //the new knowlegdge with the species/sources specified which
+        //will require some UI changes on the sidebar
+        const ongoingSources = [];
+        contents.forEach((content) => {
+          content.onConnectivitySourceChange(payload, ongoingSources);
+        });
+      },
+      'show-connectivity': (payload) => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onShowConnectivity(payload);
+        });
+      },
+      'show-reference-connectivities': (payload) => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onShowReferenceConnectivity(payload);
+        });
+      },
+      'filter-visibility': (payload) => {
+        const contents = this.getActiveContents();
+        contents.forEach((content) => {
+          content.onFilterVisibility(payload);
+        });
+      },
     });
   },
+  beforeUnmount: function () {
+    this._offBus?.();
+  },
 };
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->

package/src/components/SplitFlow.vue

@@ -11,11 +11,16 @@
         @onFullscreen="onFullscreen"
         @local-search="onDisplaySearch"
         @fetch-suggestions="fetchSuggestions"
+        :captureScreenshot="captureScreenshot"
+        :getScreenshotTarget="getScreenshotElement"
         ref="dialogToolbar"
       />
     </el-header>
     <el-main class="dialog-main">
-      <div style="width: 100%; height: 100%; position: relative; overflow: hidden">
+      <div
+        ref="captureArea"
+        style="width: 100%; height: 100%; position: relative; overflow: hidden"
+      >
         <SideBar
           ref="sideBar"
           :envVars="envVars"
@@ -67,7 +72,8 @@
 import { provide, markRaw, computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import DialogToolbarContent from './DialogToolbarContent.vue';
-import EventBus from './EventBus';
+import { captureElement, ScreenshotError } from '../services/screenshot';
+import EventBus, { onEvents } from './EventBus';
 import SplitDialog from './SplitDialog.vue';
 // import contextCards from './context-cards'
 import { SideBar } from '@abi-software/map-side-bar';
@@ -887,6 +893,56 @@ export default {
     onFullscreen: function (val) {
       this.$emit('onFullscreen', val);
     },
+    /**
+     * Capture a screenshot and download it.
+     * Captures the pane with `paneId` if provided, otherwise all
+     * visible panes including the sidebar.
+     * With `legend` set to `only`, the legend of each pane is downloaded as a separate image.
+     * @param {Object} options - { paneId, scale, legend, toolbar }
+     */
+    captureScreenshot: async function (options = {}) {
+      const { paneId } = options;
+      const contents = this.$refs.splitdialog?.getActiveContents() || [];
+      const scale = options.scale || this.settingsStore.screenshot.scale;
+      const legend = options.legend || this.settingsStore.screenshot.legend;
+      const toolbar = options.toolbar ?? this.settingsStore.screenshot.toolbar;
+
+      if (paneId !== undefined) {
+        const content = this.$refs.splitdialog?.getContentsWithId(paneId);
+
+        if (!content) {
+          return Promise.reject(new Error(`Pane ${paneId} not found`));
+        }
+
+        return content.captureScreenshot(options);
+      }
+
+      if (legend === 'only') {
+        const withLegend = contents.filter((content) => content.hasLegend?.());
+        const results = [];
+
+        if (!withLegend.length) {
+          throw new ScreenshotError('no-legend', 'No legend to capture');
+        }
+
+        for (const content of withLegend) {
+          results.push(...(await content.captureScreenshot({ ...options, scale, legend })));
+        }
+
+        return results;
+      }
+
+      return captureElement(this.$refs.captureArea, {
+        scale,
+        legend,
+        toolbar,
+        title: 'maps-view',
+        viewers: contents,
+      });
+    },
+    getScreenshotElement: function () {
+      return this.$refs.captureArea;
+    },
     resetApp: function () {
       this.setState(initialDefaultState());
     },
@@ -1166,117 +1222,123 @@ export default {
     this._externalStateSet = false;
   },
   mounted: function () {
-    EventBus.on('CreateNewEntry', (newView) => {
-      this.createNewEntry(newView);
-    });
-    EventBus.on('RemoveEntryRequest', (id) => {
-      this.removeEntry(id);
-    });
-    EventBus.on('PopoverActionClick', (payload) => {
-      this.actionClick(payload);
-    });
-    EventBus.on('annotation-open', (payload) => {
-      this.openAnnotation(payload);
-    });
-    EventBus.on('sidebar-annotation-close', () => {
-      const globalSettings = { ...this.settingsStore.globalSettings };
-      const { interactiveMode, viewingMode } = globalSettings;
+    this._offBus = onEvents({
+      CreateNewEntry: (newView) => {
+        this.createNewEntry(newView);
+      },
+      RemoveEntryRequest: (id) => {
+        this.removeEntry(id);
+      },
+      PopoverActionClick: (payload) => {
+        this.actionClick(payload);
+      },
+      'annotation-open': (payload) => {
+        this.openAnnotation(payload);
+      },
+      'sidebar-annotation-close': () => {
+        const globalSettings = { ...this.settingsStore.globalSettings };
+        const { interactiveMode, viewingMode } = globalSettings;
 
-      // Sidebar annotation close event emits whenever viewing mode is changed.
-      // if annotation state is being restored on first load for annotation viewing mode,
-      // open the anootation tab and return.
-      if (this.sidebarAnnotationState && viewingMode === 'Annotation') {
-        this.sidebarAnnotationState = false;
-        this.$refs.sideBar.tabClicked({ id: 3, type: 'annotation' });
-        return;
-      }
+        // Sidebar annotation close event emits whenever viewing mode is changed.
+        // if annotation state is being restored on first load for annotation viewing mode,
+        // open the anootation tab and return.
+        if (this.sidebarAnnotationState && viewingMode === 'Annotation') {
+          this.sidebarAnnotationState = false;
+          this.$refs.sideBar.tabClicked({ id: 3, type: 'annotation' });
+          return;
+        }
 
-      this.annotationEntry = [];
-      this.createData = {};
+        this.annotationEntry = [];
+        this.createData = {};
 
-      if (this.$refs.sideBar) {
-        if (interactiveMode === 'dataset') {
-          this.$refs.sideBar.tabClicked({ id: 1, type: 'datasetExplorer' });
-        } else if (interactiveMode === 'connectivity') {
+        if (this.$refs.sideBar) {
+          if (interactiveMode === 'dataset') {
+            this.$refs.sideBar.tabClicked({ id: 1, type: 'datasetExplorer' });
+          } else if (interactiveMode === 'connectivity') {
+            this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
+          }
+
+          this.$refs.sideBar.closeConnectivity();
+          EventBus.emit('connectivity-item-close');
+        }
+      },
+      'update-offline-annotation-enabled': (payload) => {
+        this.settingsStore.updateOfflineAnnotationEnabled(payload);
+      },
+      'connectivity-info-open': (payload) => {
+        this.openConnectivityInfo(payload);
+      },
+      'connectivity-info-close': (_payload) => {
+        if (this.$refs.sideBar) {
+          this.connectivityProcessed = false;
+          this.$refs.sideBar.resetConnectivitySearch();
+        }
+      },
+      'connectivity-error': (payload) => {
+        if (this.$refs.sideBar) {
+          this.$refs.sideBar.updateConnectivityError(payload.data);
+        }
+      },
+      'neuron-connection-feature-click': (payload) => {
+        if (this.$refs.sideBar) {
+          const { filters, search } = payload;
+          this.$refs.sideBar.openConnectivitySearch(filters, search);
           this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
+          this.$refs.sideBar.setDrawerOpen(true);
+        }
+      },
+      OpenNewMap: (type) => {
+        this.updateFlatmapMinimap();
+        this.openNewMap(type);
+      },
+      startHelp: () => {
+        if (this.$refs.sideBar) {
+          this.$refs.sideBar.close();
+        }
+      },
+      'connectivity-knowledge': (payload) => {
+        // Ignore the default/global connectivity dump (emitted when no active
+        // viewer's map/species keys are resolved yet) while restoring a
+        // permalink's sidebar connectivityEntries, otherwise the sidebar would
+        // briefly flash the entire, unfiltered connectivity list.
+        if (!(payload.isDefaultKnowledge && this.restoringConnectivityState)) {
+          this.connectivityKnowledge = payload.data;
+          this.connectivityHighlight = payload.highlight;
+          this.connectivityProcessed = payload.processed;
         }
 
-        this.$refs.sideBar.closeConnectivity();
-        EventBus.emit('connectivity-item-close');
-      }
-    });
-    EventBus.on('update-offline-annotation-enabled', (payload) => {
-      this.settingsStore.updateOfflineAnnotationEnabled(payload);
-    });
-    EventBus.on('connectivity-info-open', (payload) => {
-      this.openConnectivityInfo(payload);
-    });
-    EventBus.on('connectivity-info-close', (_payload) => {
-      if (this.$refs.sideBar) {
-        this.connectivityProcessed = false;
-        this.$refs.sideBar.resetConnectivitySearch();
-      }
-    });
-    EventBus.on('connectivity-error', (payload) => {
-      if (this.$refs.sideBar) {
-        this.$refs.sideBar.updateConnectivityError(payload.data);
-      }
-    });
-    EventBus.on('neuron-connection-feature-click', (payload) => {
-      if (this.$refs.sideBar) {
-        const { filters, search } = payload;
-        this.$refs.sideBar.openConnectivitySearch(filters, search);
-        this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
-        this.$refs.sideBar.setDrawerOpen(true);
-      }
-    });
-    EventBus.on('OpenNewMap', (type) => {
-      this.updateFlatmapMinimap();
-      this.openNewMap(type);
-    });
-    EventBus.on('startHelp', () => {
-      if (this.$refs.sideBar) {
-        this.$refs.sideBar.close();
-      }
-    });
-    EventBus.on('connectivity-knowledge', (payload) => {
-      // Ignore the default/global connectivity dump (emitted when no active
-      // viewer's map/species keys are resolved yet) while restoring a
-      // permalink's sidebar connectivityEntries, otherwise the sidebar would
-      // briefly flash the entire, unfiltered connectivity list.
-      if (!(payload.isDefaultKnowledge && this.restoringConnectivityState)) {
-        this.connectivityKnowledge = payload.data;
-        this.connectivityHighlight = payload.highlight;
-        this.connectivityProcessed = payload.processed;
-      }
-
-      // Restore sidebar state if it exists and not restored yet
-      // after loading connectivity knowledge
-      if (!this.sidebarStateRestored) {
-        this.restoreSidebarState(this.state);
-      }
-    });
-    EventBus.on('modeUpdate', (payload) => {
-      if (payload === 'dataset') {
-        this.$refs.sideBar.tabClicked({ id: 1, type: 'datasetExplorer' });
-      } else if (payload === 'connectivity') {
-        this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
-      }
-    });
-    EventBus.on('connectivity-filter-options', (payload) => {
-      this.filterOptions = payload;
+        // Restore sidebar state if it exists and not restored yet
+        // after loading connectivity knowledge
+        if (!this.sidebarStateRestored) {
+          this.restoreSidebarState(this.state);
+        }
+      },
+      modeUpdate: (payload) => {
+        if (payload === 'dataset') {
+          this.$refs.sideBar.tabClicked({ id: 1, type: 'datasetExplorer' });
+        } else if (payload === 'connectivity') {
+          this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
+        }
+      },
+      'connectivity-filter-options': (payload) => {
+        this.filterOptions = payload;
+      },
     });
     this.$nextTick(() => {
       if (this.search === '' && this._facets.length === 0) {
         if (this.$refs.sideBar) {
           this.$refs.sideBar.close();
         }
-        setTimeout(() => {
+        this._startUpTimer = setTimeout(() => {
           this.startUp = false;
         }, 2000);
       } else this.openSearch(this._facets, this.search);
     });
   },
+  beforeUnmount: function () {
+    this._offBus?.();
+    clearTimeout(this._startUpTimer);
+  },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     envVars: function () {

package/src/components/scripts/utilities.js

@@ -1,5 +1,46 @@
+import { markRaw } from 'vue';
+
 const defaultSpecies = 'Human Male';
 
+// Session-level caches, so viewers and searches share one request instead of
+// re-fetching the same data.
+const flatmapListCache = new Map();
+const flatmapPathwaysCache = new Map();
+const bodyScaffoldInfoCache = new Map();
+
+// Cache the promise so concurrent callers share a single request.
+// Failed requests are dropped so a later call can retry.
+const cachedRequest = (cache, key, load) => {
+  if (!cache.has(key)) {
+    const promise = load().catch((error) => {
+      cache.delete(key);
+      throw error;
+    });
+    cache.set(key, promise);
+  }
+  return cache.get(key);
+};
+
+const fetchJson = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Request failed (${response.status}): ${url}`);
+  }
+  return response.json();
+};
+
+// Latest version of the flatmap with the given id, e.g. 'human-flatmap_male'
+const getLatestFlatmap = async (flatmapAPI, id) => {
+  const flatmaps = await cachedRequest(flatmapListCache, flatmapAPI, () => fetchJson(flatmapAPI));
+  return flatmaps.filter((f) => f.id === id).sort((a, b) => b.created.localeCompare(a.created))[0];
+};
+
+// Pathways are large and read-only, so they are shared and kept non-reactive
+const getFlatmapPathways = (flatmapAPI, uuid) => {
+  const url = `${flatmapAPI}/flatmap/${uuid}/pathways`;
+  return cachedRequest(flatmapPathwaysCache, url, () => fetchJson(url).then(markRaw));
+};
+
 const initialDefaultState = () => {
   return {
     entries: [
@@ -174,7 +215,19 @@ const extractS3BucketNameAndPrefix = (uri) => {
   return undefined;
 };
 
-const getBodyScaffoldInfo = async (sparcApi, species) => {
+const getBodyScaffoldInfo = (sparcApi, species) => {
+  const key = `${sparcApi}|${species}`;
+  return cachedRequest(bodyScaffoldInfoCache, key, async () => {
+    const info = await fetchBodyScaffoldInfo(sparcApi, species);
+    // Do not keep the fallback url, so a later call can retry the API
+    if (!info.datasetInfo) {
+      bodyScaffoldInfoCache.delete(key);
+    }
+    return info;
+  });
+};
+
+const fetchBodyScaffoldInfo = async (sparcApi, species) => {
   //Get body scaffold information
   let url = '';
   let datasetInfo = undefined;
@@ -243,6 +296,8 @@ export {
   initialState,
   initialDefaultState,
   getBodyScaffoldInfo,
+  getLatestFlatmap,
+  getFlatmapPathways,
   getNewMapEntry,
   intersectArrays,
   transformObjToString,

package/src/components/viewers/Flatmap.vue

@@ -100,6 +100,7 @@ export default {
     },
     flatmapReadyCall: function (flatmap) {
       this.flatmapReady = true;
+      this.$emit('viewer-ready', true);
       const mapImp = this.getFlatmapImp();
       if (mapImp?.mapMetadata?.name) {
         this.updateEntryLabel(mapImp?.mapMetadata?.name);

package/src/components/viewers/MultiFlatmap.vue

@@ -228,6 +228,8 @@ export default {
     flatmapChanged: async function (activeSpecies) {
       this.activeSpecies = activeSpecies;
       this.openMapOptions = getOpenMapOptions(activeSpecies);
+      // The selected species' map may still be loading, multiFlatmapReady will set it ready
+      this.$emit('viewer-ready', !!this.$refs.multiflatmap?.getCurrentFlatmap()?.mapImp);
       const flatmapImp = this.getFlatmapImp();
       this.updateProvCard();
       //If the viewer is loading a new map, flatmapImp is not defined here yet.
@@ -254,6 +256,7 @@ export default {
       if (flatmap) {
         flatmap.enablePanZoomEvents(true); // Use zoom events for dynamic markers
         this.flatmapReady = true;
+        this.$emit('viewer-ready', true);
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();