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

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>

package/src/components.d.ts

@@ -16,16 +16,20 @@ declare module 'vue' {
     DialogToolbarContent: typeof import('./components/DialogToolbarContent.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconMoreFilled: typeof import('@element-plus/icons-vue')['MoreFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

package/src/mixins/ContentMixin.js

@@ -9,6 +9,9 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import Tagging from '../services/tagging.js';
 
+import { FlatmapQueries } from "@abi-software/flatmapvuer/src/services/flatmapQueries.js";
+import { getKnowledgeSource, loadAndStoreKnowledge } from "@abi-software/flatmapvuer/src/services/flatmapKnowledge.js";
+
 function capitalise(text) {
   return text[0].toUpperCase() + text.substring(1)
 }
@@ -73,8 +76,6 @@ export default {
         EventBus.emit("OpenNewMap", type);
         this.trackOpenMap(`open_new_${type}_map`);
       }
-
-      this.onConnectivityInfoClose();
     },
     onMapmanagerLoaded: function (mapManager) {
       this.settingsStore.updateMapManager(mapManager);
@@ -107,42 +108,37 @@ export default {
     /**
      * Callback when the vuers emit a selected event.
      */
-    resourceSelected: function (type, resource) {
+    resourceSelected: function (type, resources) {
+      const resource = resources[0]
       // Skip processing if resources already has actions
-      if (this.resourceHasAction(resource)) {
+      if (resource && this.resourceHasAction(resource)) {
         EventBus.emit("PopoverActionClick", resource);
         return;
       }
-
       let returnedAction = undefined;
       let action = "none";
       let fireResourceSelected = false;
       const result = {
         paneIndex: this.entry.id,
         type: type,
-        resource: resource,
+        resource: resources,
         internalName: undefined,
         eventType: undefined,
       };
-
-
       if (type == "MultiFlatmap" || type == "Flatmap") {
-        result.internalName = resource?.feature?.label ? resource.feature.label : this.idNamePair[resource.feature.models];
+        const flatmapImp = this.getFlatmapImp();
+        result.internalName = resource?.feature?.label ?
+          resource.feature.label : this.idNamePair[resource.feature.models];
         if (resource.eventType == "click") {
           result.eventType = "selected";
           if (resource.feature.type == "marker") {
+
             let label = result.internalName;
-            if (
-              this.settingsStore.isFeaturedMarkerIdentifier(
-                resource.feature.id
-              )
-            ) {
+            if (this.settingsStore.isFeaturedMarkerIdentifier(resource.feature.id)) {
               // It is a featured dataset search for DOI.
               returnedAction = {
                 type: "Search",
-                term: this.settingsStore.featuredMarkerDoi(
-                  resource.feature.id
-                ),
+                term: this.settingsStore.featuredMarkerDoi(resource.feature.id),
                 featuredDataset: true,
               };
             } else {
@@ -151,17 +147,41 @@ export default {
                 type: "Facet",
                 facet: label,
                 facetPropPath: "anatomy.organ.category.name",
+                facetSubPropPath: "anatomy.organ.name",
                 term: "Anatomical structure",
               };
+              let labels = new Set();
+              if (resource?.feature['marker-terms']) {
+                resource.feature['marker-terms'].forEach((term) => {
+                  labels.add(term.label)
+                });
+                labels.add(label)
+                if (labels.size > 0) {
+                  returnedAction = {
+                    type: "Facets",
+                    labels: [...labels],
+                  };
+                }
+              } else if (resource?.feature?.models) {
+                returnedAction = {
+                  type: "PMRSearch",
+                  term: resource.feature.models,
+                };
+              }
             }
-
             fireResourceSelected = true;
             if (type == "MultiFlatmap") {
-              const flatmap =
-                this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
-              flatmap.clearSearchResults();
+              flatmapImp.clearSearchResults();
             }
           } else if (resource.feature.type == "feature") {
+            if (flatmapImp.options && flatmapImp.options.style === 'functional') {
+              if (resource.feature?.hyperlinks?.pmr) {
+                returnedAction = {
+                  type: "URL",
+                  resource: resource.feature?.hyperlinks?.pmr,
+                };
+              }
+            }
             // Do no open scaffold in sync map
             if (this.syncMode) {
               fireResourceSelected = true;
@@ -174,16 +194,16 @@ export default {
           fireResourceSelected = true;
         }
       } else if (type == "Scaffold") {
-        if (resource && resource[0]) {
-          if (resource[0].data?.id === undefined || resource[0].data?.id === "") {
-            resource[0].data.id = resource[0].data?.group;
+        if (resource) {
+          if (resource.data?.id === undefined || resource.data?.id === "") {
+            resource.data.id = resource.data?.group;
           }
-          result.internalName = resource[0].data.id;
+          result.internalName = resource.data.id;
           // Facet search if marker is clicked
-          if (resource[0].data.lastActionOnMarker === true) {
+          if (resource.data.lastActionOnMarker === true) {
             returnedAction = {
               type: "Facet",
-              facet: capitalise(resource[0].data.id),
+              facet: capitalise(resource.data.id),
               facetPropPath: "anatomy.organ.category.name",
               term: "Anatomical structure",
             };
@@ -248,7 +268,7 @@ export default {
             return fetch(`${this.apiLocation}get-related-terms/${id}`)
               .then(response => response.json())
               .then(data => {
-                if (data.uberon.array.length > 0) {
+                if (data.uberon?.array.length > 0) {
                   name =
                     data.uberon.array[0].name.charAt(0).toUpperCase() +
                     data.uberon.array[0].name.slice(1);
@@ -458,25 +478,64 @@ export default {
         this.endHelp();
       }
     },
-    mapHoverHighlight: function (mapImp) {
+    flatmapHighlight: async function (flatmap, hoverAnatomies, hoverDOI, hoverConnectivity) {
+      let toHighlight = [...hoverAnatomies, ...hoverConnectivity];
+      const globalSettings = this.settingsStore.globalSettings;
+      
+
+      // to highlight connected paths
+      if (globalSettings.highlightConnectedPaths) {
+        const hoverEntry = hoverAnatomies.length ? hoverAnatomies :
+          hoverConnectivity.length ? hoverConnectivity :
+            []
+        const connectedPaths = await flatmap.retrieveConnectedPaths(hoverEntry);
+        if (connectedPaths) {
+          toHighlight.push(...connectedPaths);
+        }
+      }
+
+      // to highlight related paths from reference DOI
+      if (globalSettings.highlightDOIPaths) {
+        const connectionsFromDOI = await flatmap.searchConnectivitiesByReference(hoverDOI);
+        if (connectionsFromDOI) {
+          toHighlight.push(...connectionsFromDOI);
+        }
+      }
+      toHighlight = [...new Set(toHighlight)];
+      return toHighlight;
+    },
+    cardHoverHighlight: function () {
       if (this.visible) {
         const hoverAnatomies = this.settingsStore.hoverAnatomies;
         const hoverOrgans = this.settingsStore.hoverOrgans;
-        if (hoverAnatomies.length || hoverOrgans.length) {
-          clearTimeout(this.hoverDelay);
-          if (this.multiflatmapRef || this.flatmapRef) {
-            mapImp?.zoomToFeatures(hoverAnatomies, { noZoomIn: true });
-          } else if (this.scaffoldRef) {
-            mapImp?.changeHighlightedByName(hoverOrgans, "", false);
+        const hoverDOI = this.settingsStore.hoverDOI;
+        const hoverConnectivity = this.settingsStore.hoverConnectivity;
+
+        let flatmap = null;
+        let scaffold = null;
+        if (this.flatmapRef) flatmap = this.$flatmapRef;
+        if (this.multiflatmapRef) flatmap = this.$multiflatmapRef;
+        if (this.scaffoldRef) scaffold = this.$scaffoldRef;
+
+        // reset
+        if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
+          flatmap.mapImp.clearSearchResults();
+        } else if (this.scaffoldRef && scaffold) {
+          scaffold.changeHighlightedByName(hoverOrgans, "", false);
+        }
+
+        if (hoverAnatomies.length || hoverOrgans.length || hoverDOI || hoverConnectivity.length) {
+          if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
+            this.flatmapHighlight(flatmap, hoverAnatomies, hoverDOI, hoverConnectivity).then((paths) => {
+              try {
+                flatmap.zoomToFeatures(paths);
+              } catch (error) {
+                console.log(error)
+              }
+            });
+          } else if (this.scaffoldRef && scaffold) {
+            scaffold.changeHighlightedByName(hoverOrgans, "", false);
           }
-        } else {
-          this.hoverDelay = setTimeout(() => {
-            if (this.multiflatmapRef || this.flatmapRef) {
-              mapImp?.clearSearchResults();
-            } else if (this.scaffoldRef) {
-              mapImp?.changeHighlightedByName(hoverOrgans, "", false);
-            }
-          }, 500);
         }
       }
     },
@@ -489,12 +548,58 @@ export default {
     onConnectivityInfoOpen: function (connectivityInfoData) {
       EventBus.emit('connectivity-info-open', connectivityInfoData);
     },
-    onConnectivityInfoClose: function () {
-      EventBus.emit('connectivity-info-close');
-    },
     onConnectivityGraphError: function (errorInfo) {
       EventBus.emit('connectivity-graph-error', errorInfo);
     },
+    loadConnectivityKnowledge: async function (flatmap) {
+      const sckanVersion = getKnowledgeSource(flatmap);
+      const flatmapQueries = markRaw(new FlatmapQueries());
+      flatmapQueries.initialise(this.flatmapAPI);
+      const knowledge = await loadAndStoreKnowledge(flatmap, flatmapQueries);
+      this.connectivityKnowledge = knowledge.filter((item) => {
+        if (item.source === sckanVersion && item.connectivity?.length) return true;
+        return false;
+      });
+      EventBus.emit("connectivity-knowledge", this.connectivityKnowledge);
+    },
+    connectivityQueryFilter: async function (flatmap, payload) {
+      let results = this.connectivityKnowledge;
+      if (payload.type === "query-update") {
+        if (this.query !== payload.value) this.target = [];
+        this.query = payload.value;
+      } else if (payload.type === "filter-update") {
+        this.filter = payload.value;
+        this.target = [];
+      } else if (payload.type === "query-filter-update") {
+        this.query = payload.query;
+        this.filter = payload.filter;
+        this.target = payload.data;
+        // restore connectivity explorer content
+        if (!this.query) {
+          EventBus.emit("connectivity-knowledge", [...results]);
+        }
+        return;
+      }
+      if (this.query) {
+        let flag = "", order = [], suggestions = [], paths = [];
+        this.searchSuggestions(this.query, suggestions);
+        const labels = [...new Set(suggestions)];
+        flag = 'label';
+        order = labels;
+        if (labels.length === 1) {
+          const options = {
+            type: this.filter.map(f => f.facet.toLowerCase()),
+            target: this.target.map(d => d.id),
+          };
+          paths = await flatmap.retrieveConnectedPaths([this.query], options);
+          flag = 'id';
+          order = [this.query, ...paths.filter(item => item !== this.query)];
+        }
+        results = results.filter(item => paths.includes(item.id) || labels.includes(item.label));
+        results.sort((a, b) => order.indexOf(a[flag]) - order.indexOf(b[flag]));
+      }
+      EventBus.emit("connectivity-knowledge", results);
+    }
   },
   data: function () {
     return {
@@ -514,8 +619,11 @@ export default {
       scaffoldRef: null,
       scaffoldLoaded: false,
       isInHelp: false,
-      hoverDelay: undefined,
       mapManager: undefined,
+      connectivityKnowledge: [],
+      query: "",
+      filter: [],
+      target: [], // Support origins/components/destinations term search
     };
   },
   created: function () {

package/src/mixins/DynamicMarkerMixin.js

@@ -40,8 +40,9 @@ export default {
 
       if (flatmapImp) {
         // Set the dataset markers
-        let markers = this.settingsStore.markers;
+        let markers = this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.markers : [];
         markers = removeDuplicates(markers);
+        let multiMarkers = this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.multiScaleMarkers : [];
         let fmMarkers = this.removeMarkersNotOnFlatmap(flatmapImp, markers);
         flatmapImp.clearMarkers();
         flatmapImp.clearDatasetMarkers();
@@ -54,6 +55,7 @@ export default {
         } else {
           flatmapImp.addDatasetMarkers(fmMarkers);
         }
+        flatmapImp.addMarkers(multiMarkers);
 
         // Set the featured markers
         if (this.entry.type === "MultiFlatmap") {

package/src/stores/settings.js

@@ -11,16 +11,19 @@ export const useSettingsStore = defineStore('settings', {
       algoliaKey: undefined,
       algoliaId: undefined,
       pennsieveApi: undefined,
+      pmrHost: "https://models.physiomeproject.org/",
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
-      flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
       mapManager: undefined,
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
       numberOfDatasetsForFacets: [],
       markers: [],
+      multiScaleMarkers: ["cvs:functional.whole-body", "cvs:functional.tissue", "cvs:functional.cell"],
       hoverAnatomies: [],
       hoverOrgans: [],
+      hoverDOI: '',
+      hoverConnectivity: [],
       featuredMarkers: [],
       featuredMarkerIdentifiers: [],
       featuredMarkerDois: [],
@@ -30,6 +33,12 @@ export const useSettingsStore = defineStore('settings', {
       useHelpModeDialog: false,
       connectivityInfoSidebar: true,
       annotationSidebar: true,
+      globalSettings: {
+        displayMarkers: true,
+        highlightConnectedPaths: false,
+        highlightDOIPaths: false, // comment out to hide in settings
+        interactiveMode: 'dataset', // dataset, connectivity, multiscale
+      },
     }
   },
   getters: {
@@ -42,6 +51,16 @@ export const useSettingsStore = defineStore('settings', {
       );
       return state.featuredMarkerDois[index];
     },
+    getUpdatedGlobalSettingsKey: state => settings => {
+      let updatedSettings = [];
+      for (const [key, value] of Object.entries(settings)) {
+        const attribute = state.globalSettings[key];
+        if (attribute === undefined || (attribute !== value)) {
+          updatedSettings.push(key);
+        }
+      }
+      return updatedSettings;
+    },
   },
   actions: {
     updateShareLink(newLink) {
@@ -65,9 +84,6 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI(flatmapAPI) {
       this.flatmapAPI = flatmapAPI;
     },
-    updateFlatmapAPI2(flatmapAPI2) {
-      this.flatmapAPI2 = flatmapAPI2;
-    },
     updateMapManager(mapManager) {
       this.mapManager = mapManager;
     },
@@ -77,12 +93,17 @@ export const useSettingsStore = defineStore('settings', {
     updateRootUrl(rootUrl) {
       this.rootUrl = rootUrl;
     },
+    updatePmrHost(pmrHost) {
+      this.pmrHost = pmrHost ? pmrHost : "https://models.physiomeproject.org/";
+    },
     updateMarkers(markers) {
       this.markers = markers;
     },
-    updateHoverFeatures(anatomies, organs) {
+    updateHoverFeatures(anatomies, organs, doi, connectivity) {
       this.hoverAnatomies = anatomies;
       this.hoverOrgans = organs;
+      this.hoverDOI = doi;
+      this.hoverConnectivity = connectivity;
     },
     updateFeatured(datasetIdentifiers) {
       this.featuredMarkerIdentifiers = new Array(datasetIdentifiers.length);
@@ -166,5 +187,10 @@ export const useSettingsStore = defineStore('settings', {
     updateAnnotationSidebar(annotationSidebar) {
       this.annotationSidebar = annotationSidebar;
     },
+    updateGlobalSettings(globalSettings) {
+      for (const [key, value] of Object.entries(globalSettings)) {
+        this.globalSettings[key] = value;
+      }
+    },
   }
 });