@abi-software/mapintegratedvuer 1.8.0-beta.1 → 1.8.0-isan.1

package/src/components/SplitFlow.vue

@@ -23,14 +23,14 @@
           :envVars="envVars"
           :visible="sideBarVisibility"
           :class="['side-bar', { 'start-up': startUp }]"
-          :activeTabId="activeDockedId"
           :open-at-start="startUp"
           :annotationEntry="annotationEntry"
           :createData="createData"
-          :connectivityInfo="connectivityInfo"
-          @tab-close="onSidebarTabClose"
+          :connectivityEntry="connectivityEntry"
+          :connectivityKnowledge="connectivityKnowledge"
+          @tabClicked="onSidebarTabClicked"
+          @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
-          @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
           @anatomy-in-datasets="updateMarkers($event)"
           @annotation-submitted="onAnnotationSubmitted"
@@ -43,7 +43,10 @@
           @datalink-clicked="datalinkClicked($event)"
           @show-connectivity="onShowConnectivity"
           @show-reference-connectivities="onShowReferenceConnectivities"
-          @connectivity-component-click="onConnectivityComponentClick"
+          @connectivity-clicked="onConnectivityClicked"
+          @connectivity-hovered="onConnectivityHovered"
+          @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+          @connectivity-source-change="onConnectivitySourceChange"
         />
         <SplitDialog
           :entries="entries"
@@ -65,6 +68,7 @@ import EventBus from "./EventBus";
 import SplitDialog from "./SplitDialog.vue";
 // import contextCards from './context-cards'
 import { SideBar } from "@abi-software/map-side-bar";
+import "@abi-software/map-side-bar/dist/style.css";
 import {
   capitalise,
   getNewMapEntry,
@@ -83,8 +87,6 @@ import {
   ElMain as Main,
 } from "element-plus";
 
-import "@abi-software/map-side-bar/dist/style.css";
-
 /**
  * Component of the floating dialogs.
  */
@@ -117,16 +119,17 @@ export default {
       sideBarVisibility: true,
       startUp: true,
       search: '',
-      activeDockedId : 1,
       filterTriggered: false,
       availableFacets: [],
-      connectivityInfo: null,
-      annotationEntry: {},
+      connectivityEntry: [],
+      annotationEntry: [],
       annotationCallback: undefined,
       confirmCreateCallback: undefined,
       cancelCreateCallback: undefined,
       confirmDeleteCallback: undefined,
       createData: {},
+      connectivityKnowledge: [],
+      connectivityExplorerClicked: false,
     }
   },
   watch: {
@@ -141,14 +144,24 @@ export default {
     },
   },
   methods: {
+    onConnectivityExplorerClicked: function (payload) {
+      this.connectivityExplorerClicked = true;
+      this.onDisplaySearch({ term: payload.id }, false);
+    },
     /**
      * Callback when an action is performed (open new dialogs).
      */
     actionClick: function (action) {
       if (action) {
         if (action.type == "Search") {
-          if (action.nervePath) {
-            this.openSearch([action.filter], action.label);
+          if (action.filter) {
+            this.openSearch([action.filter], action.term);
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': action.term || 'filter',
+              'location': 'map_location_pin'
+            });
           } else {
             this.openSearch([], action.term);
             // GA Tagging
@@ -164,11 +177,29 @@ export default {
             });
             this.filterTriggered = true;
           }
+        } else if (action.type == "PMRSearch") {
+          if (action.term) {
+            let term = action.term;
+            if (term === "cvs:functional.cell") {
+              term = "cellular";
+            } else if (term === "cvs:functional.tissue") {
+              term = "tissue scale";
+            } else if (term === "cvs:functional.whole-body") {
+              term = "whole-body scale";
+            }
+            term = `"${term}"`;
+            this.openPMRSearch([], term);
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': action.term || 'filter',
+              'location': 'map_location_pin'
+            });
+          }
         } else if (action.type == "URL") {
           window.open(action.resource, "_blank");
         } else if (action.type == "Facet") {
           if (this.$refs.sideBar) {
-            this.closeConnectivityInfo();
             this.$refs.sideBar.addFilter(action);
             const { facet } = action;
             // GA Tagging
@@ -190,33 +221,31 @@ export default {
               facetPropPath: "organisms.primary.species.name",
             });
           });
-          if (facets.length == 0)
-            facets.push({
-              facet: "Show All",
-              term: "Species",
-              facetPropPath: "organisms.primary.species.name",
-            });
           facets.push(
             ...action.labels.map(val => ({
               facet: capitalise(val),
               term: "Anatomical structure",
               facetPropPath: "anatomy.organ.category.name",
+              facetSubPropPath: "anatomy.organ.name",
             }))
           );
-          if (this.$refs.sideBar) {
-            this.closeConnectivityInfo();
-            this.$refs.sideBar.openSearch(facets, "");
-
-            const filterValuesArray = intersectArrays(this.availableFacets, action.labels);
-            const filterValues = filterValuesArray.join(', ');
-            // GA Tagging
-            // Event tracking for map action search/filter data
-            Tagging.sendEvent({
-              'event': 'interaction_event',
-              'event_name': 'portal_maps_action_filter',
-              'category': filterValues || 'filter',
-              'location': 'map_popup_button'
-            });
+          this.openSearch(facets, "")
+          const filterValuesArray = intersectArrays(this.availableFacets, action.labels);
+          const filterValues = filterValuesArray.join(', ');
+          // GA Tagging
+          // Event tracking for map action search/filter data
+          Tagging.sendEvent({
+            'event': 'interaction_event',
+            'event_name': 'portal_maps_action_filter',
+            'category': filterValues || 'filter',
+            'location': 'map_popup_button'
+          });
+        } else if (action.type == "OpenCOR") {
+          if (action.resource) {
+            const link = `https://opencor.ws/appdev/?openFile/${action.resource}`;
+            if (window) {
+              window.open(link,'_blank');
+            }
           }
         } else {
           this.trackGalleryClick(action);
@@ -251,7 +280,7 @@ export default {
         'file_path': filePath,
       });
     },
-    onDisplaySearch: function (payload) {
+    onDisplaySearch: function (payload, tracking = true) {
       let searchFound = false;
       //Search all active viewers when global callback is on
       let splitdialog = this.$refs.splitdialog;
@@ -265,14 +294,16 @@ export default {
       }
       this.$refs.dialogToolbar.setFailedSearch(searchFound ? undefined : payload.term);
 
-      // GA Tagging
-      // Event tracking for map on display search
-      Tagging.sendEvent({
-        'event': 'interaction_event',
-        'event_name': 'portal_maps_display_search',
-        'category': payload.term,
-        'location': 'map_toolbar'
-      });
+      if (tracking) {        
+        // GA Tagging
+        // Event tracking for map on display search
+        Tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': 'portal_maps_display_search',
+          'category': payload.term,
+          'location': 'map_toolbar'
+        });
+      }
     },
     fetchSuggestions: function(payload) {
       const suggestions = [];
@@ -310,55 +341,83 @@ export default {
     onShowReferenceConnectivities: function (refSource) {
       EventBus.emit('show-reference-connectivities', refSource);
     },
-    onConnectivityComponentClick: function (data) {
-      EventBus.emit('connectivity-component-click', {
-        connectivityInfo: this.connectivityInfo,
+    onConnectivityClicked: function (data) {
+      if (this.$refs && this.$refs.sideBar) {
+        this.connectivityEntry = [];
+        EventBus.emit("connectivity-query-filter", {
+          id: 2,
+          type: "query-filter-update",
+          query: data.query,
+          filter: data.filter,
+          data: data.data,
+        });
+        this.$refs.sideBar.openConnectivitySearch(data.filter, data.query);
+      }
+    },
+    onConnectivityHovered: function (data) {
+      EventBus.emit('connectivity-hovered', {
+        connectivityEntry: this.connectivityEntry,
         data: data,
       });
     },
+    onConnectivitySourceChange: function (data) {
+      this.connectivityExplorerClicked = true;
+      EventBus.emit('connectivity-source-change', data);
+    },
     hoverChanged: function (data) {
-      const hoverAnatomies = data && data.anatomy ? data.anatomy : [];
-      const hoverOrgans = data && data.organs ? data.organs : [];
-      const hoverDOI = data && data.doi ? data.doi : '';
-      this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI);
+      let hoverAnatomies = [], hoverOrgans = [], hoverDOI = '', hoverConnectivity = [];
+      if (data) {
+        if (data.type === 'dataset') {
+          hoverAnatomies = data.anatomy ? data.anatomy : [];
+          hoverOrgans = data.organs ? data.organs : [];
+          hoverDOI = data.doi ? data.doi : '';
+        } else if (data.type === 'connectivity') {
+          hoverConnectivity = data.id ? [data.id] : '';
+        }
+      }
+      this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI, hoverConnectivity);
       EventBus.emit("hoverUpdate");
     },
     searchChanged: function (data) {
-      if (data && data.type == "query-update") {
-        this.search = data.value;
-        if (this.search && !this.filterTriggered) {
-          // GA Tagging
-          // Event tracking for map action search/filter data
-          Tagging.sendEvent({
-            'event': 'interaction_event',
-            'event_name': 'portal_maps_action_search',
-            'category': this.search,
-            'location': 'map_sidebar_search'
-          });
+      if (data.id === 1) {
+        if (data && data.type == "query-update") {
+          this.search = data.value;
+          if (this.search && !this.filterTriggered) {
+            // GA Tagging
+            // Event tracking for map action search/filter data
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_search',
+              'category': this.search,
+              'location': 'map_sidebar_search'
+            });
+          }
+          this.filterTriggered = false; // reset for next action
         }
-        this.filterTriggered = false; // reset for next action
-      }
-      if (data && data.type == "filter-update") {
-        this.settingsStore.updateFacets(data.value);
+        if (data && data.type == "filter-update") {
+          this.settingsStore.updateFacets(data.value);
 
-        // Remove filter event from maps' popup
-        if (!this.filterTriggered) {
-          const { value } = data;
-          const filterValuesArray = value.filter((val) =>
-            val.facet && val.facet.toLowerCase() !== 'show all'
-          ).map((val) => val.facet);
-          const filterValues = filterValuesArray.join(', ');
+          // Remove filter event from maps' popup
+          if (!this.filterTriggered) {
+            const { value } = data;
+            const filterValuesArray = value.filter((val) =>
+              val.facet && val.facet.toLowerCase() !== 'show all'
+            ).map((val) => val.facet);
+            const filterValues = filterValuesArray.join(', ');
 
-          // GA Tagging
-          // Event tracking for map action search/filter data
-          Tagging.sendEvent({
-            'event': 'interaction_event',
-            'event_name': 'portal_maps_action_filter',
-            'category': filterValues || 'filter',
-            'location': 'map_sidebar_filter'
-          });
+            // GA Tagging
+            // Event tracking for map action search/filter data
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': filterValues || 'filter',
+              'location': 'map_sidebar_filter'
+            });
+          }
+          this.filterTriggered = false; // reset for next action
         }
-        this.filterTriggered = false; // reset for next action
+      } else if (data.id === 2) {
+        EventBus.emit("connectivity-query-filter", data);
       }
     },
     updateMarkers: function (data) {
@@ -437,17 +496,17 @@ export default {
       this.search = query;
       this._facets = facets;
       if (this.$refs && this.$refs.sideBar) {
-        this.closeConnectivityInfo();
         this.$refs.sideBar.openSearch(facets, query);
+        //this.$refs.sideBar.tabClicked({id:  1, type: 'datasetExplorer'});
       }
       this.startUp = false;
     },
-    closeConnectivityInfo: function() {
-      // close all opened popups on DOM
-      const containerEl = this.$el;
-      containerEl.querySelectorAll('.maplibregl-popup-close-button').forEach((el) => {
-        el.click();
-      });
+    openPMRSearch: function (facets, query) {
+      if (this.$refs && this.$refs.sideBar) {
+        this.$refs.sideBar.openPMRSearch(facets, query);
+        //this.$refs.sideBar.tabClicked({id:  1, type: 'datasetExplorer'});
+      }
+      this.startUp = false;
     },
     onFullscreen: function (val) {
       this.$emit("onFullscreen", val);
@@ -497,9 +556,6 @@ export default {
         this.$refs.sideBar.close();
       }
     },
-    tabClicked: function ({id, type}) {
-      this.activeDockedId = id;
-    },
     toggleSyncMode: function (payload) {
       if (payload) {
         if (payload.flag) {
@@ -558,12 +614,18 @@ export default {
         this.confirmDeleteCallback(payload);
       }
     },
-    onSidebarTabClose: function (id) {
-      if (id === 2) EventBus.emit('connectivity-info-close');
-      if (id === 3) EventBus.emit('annotation-close', { tabClose: true });
+    onSidebarTabClicked: function (tab) {
+      let globalSettings = { ...this.settingsStore.globalSettings };
+      if (tab.id === 1 && tab.type === 'datasetExplorer') {
+        globalSettings.interactiveMode = 'dataset';
+      } else if (tab.id === 2 && tab.type === 'connectivityExplorer') {
+        globalSettings.interactiveMode = 'connectivity';
+      }
+      this.settingsStore.updateGlobalSettings(globalSettings);
+      this.$refs.dialogToolbar.loadGlobalSettings();
     },
-    resetActivePathways: function () {
-      this.hoverChanged(undefined);
+    onSidebarTabClosed: function (tab) {
+      if (tab.id === 3 && tab.type === "annotation") EventBus.emit('annotation-close');
     },
   },
   created: function () {
@@ -592,29 +654,32 @@ export default {
       this.cancelCreateCallback = markRaw(payload.cancelCreate);
       this.confirmDeleteCallback = markRaw(payload.confirmDelete);
       if (this.$refs.sideBar) {
-        this.tabClicked({id: 3, type: 'annotation'});
+        this.$refs.sideBar.tabClicked({id: 3, type: 'annotation'});
         this.$refs.sideBar.setDrawerOpen(true);
       }
     });
-    EventBus.on('annotation-close', payload => {
-      this.tabClicked({id:  1, type: 'search'});
-      this.annotationEntry = {};
+    EventBus.on('annotation-close', () => {
+      this.$refs.sideBar.tabClicked({id:  1, type: 'datasetExplorer'});
+      this.annotationEntry = [];
       this.createData = {};
       if (this.$refs.sideBar) {
         this.$refs.sideBar.setDrawerOpen(false);
       }
     });
     EventBus.on('connectivity-info-open', payload => {
-      this.connectivityInfo = payload;
-      if (this.$refs.sideBar) {
-        this.tabClicked({id: 2, type: 'connectivity'});
-        this.$refs.sideBar.setDrawerOpen(true);
+      this.connectivityEntry = payload;
+      // click on the flatmap paths/features directly
+      // or onDisplaySearch is performed
+      if (!this.connectivityExplorerClicked) {
+        this.connectivityKnowledge = payload.map((entry) => {
+          return { label: entry.title, id: entry.featureId[0] }
+        });
+        if (this.$refs.sideBar) {
+          this.$refs.sideBar.tabClicked({id:  2, type: 'connectivityExplorer'});
+          this.$refs.sideBar.setDrawerOpen(true);
+        }
       }
-    });
-    EventBus.on('connectivity-info-close', payload => {
-      this.tabClicked({id: 1, type: 'search'});
-      this.connectivityInfo = null;
-      this.resetActivePathways();
+      this.connectivityExplorerClicked = false;
     });
     EventBus.on('connectivity-graph-error', payload => {
       if (this.$refs.sideBar) {
@@ -629,6 +694,16 @@ export default {
         this.$refs.sideBar.close();
       }
     });
+    EventBus.on("connectivity-knowledge", payload => {
+      this.connectivityKnowledge = payload;
+    })
+    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'});
+      }
+    })
     this.$nextTick(() => {
       if (this.search === "" && this._facets.length === 0) {
         if (this.$refs.sideBar) {

package/src/components/scripts/utilities.js

@@ -2,7 +2,7 @@ const initialDefaultState = () => {
   return {
     entries: [
       {
-        resource: "Human Male",
+        resource: "Rat",
         type: "MultiFlatmap",
         mode: "main",
         id: 1,

package/src/components/viewers/Flatmap.vue

@@ -6,7 +6,7 @@
       :mapManager="mapManager"
       @resource-selected="flatmaprResourceSelected(entry.type, $event)"
       @pan-zoom-callback="flatmapPanZoomCallback"
-      :name="entry.resource"
+      :name="entry.resource ? entry.resource : entry.data"
       style="height: 100%; width: 100%"
       :minZoom="entry.minZoom"
       :helpMode="helpMode"
@@ -20,7 +20,6 @@
       @annotation-close="onAnnotationClose"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
-      @connectivity-info-close="onConnectivityInfoClose"
       @connectivity-graph-error="onConnectivityGraphError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       :pathControls="true"
@@ -81,8 +80,8 @@ export default {
       return this.$refs.flatmap?.mapImp;
     },
     flatmaprResourceSelected: function (type, resource) {
-      this.resourceSelected(type, resource);
-
+      this.resourceSelected(
+        type, resource, (this.$refs.flatmap.viewingMode === "Exploration"));
       if (resource.eventType === 'click' && resource.feature.type === 'feature') {
         const eventData = {
           label: resource.label || '',
@@ -173,9 +172,9 @@ export default {
     },
   },
   mounted: function() {
-    EventBus.on('annotation-close', (payload) => {
+    EventBus.on('annotation-close', () => {
       const currentFlatmap = this.$refs.flatmap;
-      if (payload?.tabClose && currentFlatmap) {
+      if (currentFlatmap) {
         this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
       }
     });
@@ -183,7 +182,7 @@ export default {
       this.flatmapMarkerUpdate(undefined);
     });
     EventBus.on("hoverUpdate", () => {
-      this.mapHoverHighlight();
+      this.cardHoverHighlight();
     });
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;

package/src/components/viewers/MultiFlatmap.vue

@@ -19,7 +19,6 @@
       @annotation-close="onAnnotationClose"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
-      @connectivity-info-close="onConnectivityInfoClose"
       @connectivity-graph-error="onConnectivityGraphError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       ref="multiflatmap"
@@ -308,6 +307,7 @@ export default {
       const imp = this.getFlatmapImp();
       if (imp) {
         let provClone = {id: this.entry.id, prov: imp.provenance};
+        EventBus.emit("mapImpProv", provClone);
         this.$emit("flatmap-provenance-ready", provClone);
       }
     },
@@ -320,7 +320,6 @@ export default {
           await this.toggleSyncMode();
       }
       this.updateProvCard();
-      this.onConnectivityInfoClose();
 
       // GA Tagging
       // Event tracking for maps' species change
@@ -337,11 +336,12 @@ export default {
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
+        this.loadConnectivityKnowledge(flatmapImp);
         EventBus.emit("mapLoaded", flatmap);
       }
     },
     getFlatmapImp: function () {
-      if (this.entry.type === "MultiFlatmap" && this.flatmapReady && this.$refs.multiflatmap) {
+      if (this.flatmapReady && this.$refs.multiflatmap) {
         return this.$refs.multiflatmap.getCurrentFlatmap()["mapImp"];
       } else {
         return undefined;
@@ -426,6 +426,12 @@ export default {
         flatmap.showConnectivityTooltips(payload);
       }
     },
+    changeConnectivitySource: function (payload) {
+      if (this.flatmapReady) {
+        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        flatmap.changeConnectivitySource(payload);
+      }
+    },
   },
   computed: {
     facetSpecies() {
@@ -451,8 +457,8 @@ export default {
   mounted: function () {
     this.getFeaturedDatasets();
 
-    EventBus.on('annotation-close', (payload) => {
-      if (payload?.tabClose && this.flatmapReady && this.$refs.multiflatmap) {
+    EventBus.on('annotation-close', () => {
+      if (this.flatmapReady && this.$refs.multiflatmap) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.annotationEventCallback({}, { type: 'aborted' })
       }
@@ -480,10 +486,14 @@ export default {
       }
     });
 
-    EventBus.on('connectivity-component-click', (payload) => {
+    EventBus.on('connectivity-hovered', (payload) => {
       this.showConnectivityTooltips(payload);
     });
 
+    EventBus.on('connectivity-source-change', (payload) => {
+      this.changeConnectivitySource(payload);
+    });
+
     EventBus.on("markerUpdate", () => {
       if (this.flatmapReady) {
         this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
@@ -491,7 +501,15 @@ export default {
     });
     EventBus.on("hoverUpdate", () => {
       if (this.flatmapReady) {
-        this.mapHoverHighlight();
+        this.cardHoverHighlight();
+      }
+    });
+    EventBus.on("connectivity-query-filter", (payload) => {
+      if (this.flatmapReady && this.$refs.multiflatmap) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        if (currentFlatmap) {
+          this.connectivityQueryFilter(currentFlatmap, payload)
+        }
       }
     });
   },

package/src/components/viewers/Scaffold.vue

@@ -201,7 +201,7 @@ export default {
       }
     },
     markerLabels: function () {
-      return this.settingsStore.globalSettings.displayMarker ? this.settingsStore.numberOfDatasetsForFacets : {};
+      return this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.numberOfDatasetsForFacets : {};
     },
   },
   data: function () {
@@ -219,7 +219,7 @@ export default {
     });
     EventBus.on("hoverUpdate", () => {
       if (this.scaffoldLoaded) {
-        this.mapHoverHighlight();
+        this.cardHoverHighlight();
       }
     });
   },

package/src/components/viewers/Simulation.vue

@@ -1,7 +1,7 @@
 <template>
   <SimulationVuer
     :apiLocation="apiLocation"
-    :id="entry.discoverId"
+    :id="id"
   />
 </template>
 
@@ -13,9 +13,27 @@ import "@abi-software/simulationvuer/dist/style.css";
 
 export default {
   name: "Simulation",
+  data: function() {
+    return {
+      id: undefined,
+    };
+  },
   mixins: [ ContentMixin ],
   components: {
     SimulationVuer,
   },
+  created: function() {
+    if (this.entry) {
+      if (this.entry.discoverId) {
+        this.id = this.entry.discoverId;
+      } else if (this.entry.resource) {
+        if (this.settingsStore.pmrHost) {
+          this.id = this.entry.resource.replace(this.settingsStore.pmrHost, '');
+        } else {
+          this.id = this.entry.resource;
+        }
+      }
+    }
+  }
 };
 </script>