@abi-software/mapintegratedvuer 1.6.5 → 1.7.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.6.5",
+  "version": "1.7.1-beta.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,12 +50,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.6.2",
-    "@abi-software/map-side-bar": "^2.5.2",
-    "@abi-software/map-utilities": "^1.2.1",
+    "@abi-software/flatmapvuer": "1.7.2",
+    "@abi-software/map-side-bar": "2.6.2",
+    "@abi-software/map-utilities": "1.3.1",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.6.2",
-    "@abi-software/simulationvuer": "^1.0.1",
+    "@abi-software/scaffoldvuer": "1.7.1",
+    "@abi-software/simulationvuer": "1.0.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -81,6 +81,7 @@
     "concurrently": "^8.2.2",
     "cypress": "^13.13.0",
     "cypress-multi-reporters": "^1.6.4",
+    "cypress-visual-regression": "^5.2.2",
     "cypress-wait-until": "^1.7.1",
     "dom-parser": "^0.1.6",
     "eslint": "^8.56.0",

package/src/App.vue

@@ -20,6 +20,7 @@
                 <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
                 <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
                 <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
+                <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
               </el-row>
@@ -166,6 +167,15 @@ export default {
         }
       );
     },
+    setWholebody: function() {
+      this.$refs.map.setCurrentEntry(
+        {
+          type: "Scaffold",
+          label: "Human",
+          isBodyScaffold: true
+        }
+      );
+    },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },

package/src/components/ContentBar.vue

@@ -13,7 +13,7 @@
         <el-option
           v-for="entry in entries"
           :key="entry.id"
-          :label="getEntryTitle(entry)"
+          :label="getTitle(entry)"
           :value="entry.id"
         />
       </el-select>
@@ -126,6 +126,7 @@ export default {
       boundariesElement: null, // this is set @vue:mounted by the parent component via the 'setBoundary' method
       showDetails: true,
       contextCardEntry: undefined,
+      titles: [],
     }
   },
   computed: {
@@ -168,7 +169,18 @@ export default {
       }
     },
     entries: function() {
-      return this.entriesStore.entries;
+      this.titles = [];
+      return this.entriesStore.entries.map((entry) => {
+        const title = this.getEntryTitle(entry);
+        this.titles.push({
+          id: entry.id,
+          title: title,
+        });
+        return {
+          ...entry,
+          title: title,
+        };
+      });
     },
   },
   methods: {
@@ -184,13 +196,43 @@ export default {
           type = "3D Scaffold";
         title += type;
         if (entry.datasetId)
-          title += " (" + entry.datasetId + ")";
+          title += " - " + entry.datasetId + "";
         else if (entry.discoverId)
-          title += " (" + entry.discoverId + ")";
+          title += " - " + entry.discoverId + "";
+
         return title;
       }
       return "Viewer";
     },
+    getTitle: function(_entry) {
+      const {id, title} = _entry;
+      const foundTitles = this.titles.filter((t) => t.title === title);
+
+      if (foundTitles.length > 1) {
+        const titleList = [];
+
+        for (let i = 0; i < foundTitles.length; i++) {
+          const alpha = this.getCharById(i);
+
+          titleList.push({
+            id: foundTitles[i].id,
+            title: foundTitles[i].title + alpha,
+          });
+        }
+
+        const titleToReturn = titleList.find(t => t.id === id);
+        if (titleToReturn) {
+          return titleToReturn.title;
+        }
+      }
+
+      return title;
+    },
+    getCharById: function(id) {
+      // starts from char 'A'
+      const character = ' (' + String.fromCharCode(65 + id) + ')';
+      return character;
+    },
     viewerChanged: function(value) {
       if (this.entry.id && this.entry.id != value) {
         this.splitFlowStore.assignOrSwapPaneWithIds({
@@ -261,32 +303,37 @@ export default {
   display:flex;
   flex-direction: row;
   .select-box {
-    width: 177px;
-    height: 26px;
-    border-radius: 4px;
-    border: 1px solid rgb(144, 147, 153);
-    background-color: #fff;
-    font-weight: 500;
-    color: rgb(48, 49, 51);
-    margin-left: 8px;
-    margin-top: 3px;
-    margin-bottom: 2px;
+    max-width: 300px;
     z-index: 5;
     :deep(.el-select__wrapper) {
-      width:177px;
       color: $app-primary-color;
-      height: 26px;
-      min-height: 26px;
-      line-height: 26px;
-      padding-left: 4px;
+      height: 29px;
+      min-height: 29px;
+      line-height: 29px;
+      font-weight: 500;
+      margin-top: 1px;
+      margin-left: 8px;
+      padding-left: 8px;
       padding-right: 8px;
-      background-color: #fff;
-      border-style: none;
+      box-shadow: none !important;
+      background: transparent;
       span {
         color: $app-primary-color;
       }
     }
 
+    :deep(.el-select__placeholder) {
+      width: fit-content;
+      position: relative;
+      top: auto;
+      transform: none;
+      min-width: 80px;
+    }
+
+    :deep(.el-select__caret) {
+      color: $app-primary-color;
+    }
+
     :deep(.el-input__icon) {
       line-height: 24px;
       color: $lightGrey;

package/src/components/MapContent.vue

@@ -27,7 +27,7 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
-import { initialState } from "./scripts/utilities.js";
+import { initialState, getBodyScaffoldInfo } from "./scripts/utilities.js";
 import RetrieveContextCardMixin from "../mixins/RetrieveContextCardMixin.js"
 import {
   ElLoading as Loading
@@ -155,6 +155,9 @@ export default {
         } else if (document.msExitFullscreen) { /* IE/Edge */
           document.msExitFullscreen();
         }
+
+        let mapApp = this.$refs.MapApp;
+        this.replacePopupsOnFullscreen(mapApp, document.body);
       }
     },
     /**
@@ -172,6 +175,15 @@ export default {
       } else if (parent.msRequestFullscreen) { /* IE/Edge */
         mapApp.msRequestFullscreen();
       }
+
+      this.replacePopupsOnFullscreen(document.body, mapApp);
+    },
+    replacePopupsOnFullscreen: function (containerA, containerB) {
+      const allTeleportedPopovers = containerA.querySelectorAll('[id^="el-popper-container"]');
+
+      allTeleportedPopovers.forEach((teleportedPopover) => {
+        containerB.append(teleportedPopover);
+      });
     },
     setState: function(state){
       return this.$refs.flow.setState(state);
@@ -189,7 +201,7 @@ export default {
      */
     setCurrentEntry: async function(state) {
       if (state && state.type) {
-        if (state.type === "Scaffold" && state.url) {
+        if (state.type === "Scaffold" && (state.url || state.isBodyScaffold)) {
           //State for scaffold containing the following items:
           //  label - Setting the name of the dialog
           //  region - Which region/group currently focusing on
@@ -204,52 +216,67 @@ export default {
             state: state.state,
             viewUrl: state.viewUrl
           };
-          // Add content from scicrunch for the context card
-          const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
-          newView = {...newView, ...contextCardInfo};
+          if (state.isBodyScaffold) {
+            const data = await getBodyScaffoldInfo(this.options.sparcApi, state.label);
+            newView = { ...newView, ...data.datasetInfo, resource: data.url };
+          } else {
+            // Add content from scicrunch for the context card
+            const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
+            newView = { ...newView, ...contextCardInfo };
+          }
           this.$refs.flow.createNewEntry(newView);
         } else if (state.type === "MultiFlatmap") {
-          //State for scaffold containing the following items:
-          //  label - Setting the name of the dialog
-          //  taxo - taxo of species to set
-          //  biologicalSex - biological sex to be displayed (PATO)
-          //  organ - Target organ, flatmap will conduct a local search
-          //          using this
-
-          //Look for the key in the available species array,
-          //it will use the taxo and biologicalSex as hints.
-          const key = findSpeciesKey(state);
-          if (key) {
-            const currentState = this.getState();
-            if (currentState && currentState.entries) {
-              for (let i = 0; i < currentState.entries.length; i++) {
-                const entry =  currentState.entries[i];
-                if (entry.type === "MultiFlatmap") {
-                  entry.resource = key;
-                  entry.state = {species: key};
-                  if (state.organ || state.uuid) {
-                    entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
-                    //if it contains an uuid, use the taxo to help identify if the uuid
-                    //is current
-                    if (state.uuid) entry.state.state.entry = state.taxo;
+          if (state.resource) {
+            //State for new multiflatmap containing the following items:
+            //  label - Setting the name of the dialog
+            //  resource - the url to metadata
+            //  state - state to restore (viewport)
+            const newView = {
+              type: state.type,
+              resource: state.resource,
+              state: state.state,
+              label: state.label
+            };
+            this.$refs.flow.createNewEntry(newView);
+          } else {
+            //State for multiflatmap containing the following items:
+            //  taxo - taxo of species to set
+            //  biologicalSex - biological sex to be displayed (PATO)
+            //  organ - Target organ, flatmap will conduct a local search
+            //          using this
+  
+            //Look for the key in the available species array,
+            //it will use the taxo and biologicalSex as hints.
+            const key = findSpeciesKey(state);
+            if (key) {
+              const currentState = this.getState();
+              if (currentState && currentState.entries) {
+                for (let i = 0; i < currentState.entries.length; i++) {
+                  const entry = currentState.entries[i];
+                  if (entry.type === "MultiFlatmap") {
+                    entry.resource = key;
+                    entry.state = { species: key };
+                    if (state.organ || state.uuid) {
+                      entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
+                      //if it contains an uuid, use the taxo to help identify if the uuid
+                      //is current
+                      if (state.uuid) entry.state.state.entry = state.taxo;
+                    }
+                    this.$refs.flow.setState(currentState);
+                    //Do not create a new entry, instead set the multiflatmap viewer
+                    //to the primary slot
+                    this.$refs.flow.setIdToPrimaryPane(entry.id);
+                    break;
                   }
-                  this.$refs.flow.setState(currentState);
-                  //Do not create a new entry, instead set the multiflatmap viewer
-                  //to the primary slot
-                  this.$refs.flow.setIdToPrimaryPane(entry.id);
-                  break;
                 }
               }
             }
           }
-        }
-        else if (state.type === "Flatmap") {
-          //State for scaffold containing the following items:
+        } else if (state.type === "Flatmap") {
+          //State for flatmap containing the following items:
           //  label - Setting the name of the dialog
-          //  region - Which region/group currently focusing on
           //  resource - the url to metadata
           //  state - state to restore (viewport)
-          //  viewUrl - relative path of the view file to metadata
           const newView = {
             type: state.type,
             resource: state.resource,

package/src/components/scripts/utilities.js

@@ -88,11 +88,11 @@ const capitalise = term => {
  */
 const availableSpecies = () => {
   return {
-    "Human Female": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
-    "Human Male": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
-    "Rat": { taxo: "NCBITaxon:10114", iconClass: "mapicon-icon_rat", displayLatestChanges: true, displayWarning: true },
-    "Mouse": { taxo: "NCBITaxon:10090", iconClass: "mapicon-icon_mouse", displayLatestChanges: true, displayWarning: true },
-    "Pig": { taxo: "NCBITaxon:9823", iconClass: "mapicon-icon_pig", displayLatestChanges: true, displayWarning: true },
+    "Human Female": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: false },
+    "Human Male": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: false },
+    "Rat": { taxo: "NCBITaxon:10114", iconClass: "mapicon-icon_rat", displayLatestChanges: true, displayWarning: false },
+    "Mouse": { taxo: "NCBITaxon:10090", iconClass: "mapicon-icon_mouse", displayLatestChanges: true, displayWarning: false },
+    "Pig": { taxo: "NCBITaxon:9823", iconClass: "mapicon-icon_pig", displayLatestChanges: true, displayWarning: false },
     "Cat": { taxo: "NCBITaxon:9685", iconClass: "mapicon-icon_cat", displayLatestChanges: true, displayWarning: true },
   }
 }

package/src/components/viewers/Flatmap.vue

@@ -3,6 +3,7 @@
     <FlatmapVuer
       :state="entry.state"
       :entry="entry.resource"
+      :mapManager="mapManager"
       @resource-selected="flatmaprResourceSelected(entry.type, $event)"
       @pan-zoom-callback="flatmapPanZoomCallback"
       :name="entry.resource"
@@ -32,6 +33,7 @@
       :sparcAPI="apiLocation"
       @open-map="openMap"
       @pathway-selection-changed="onPathwaySelectionChanged"
+      @mapmanager-loaded="onMapmanagerLoaded"
     />
 
     <HelpModeDialog

package/src/components/viewers/MultiFlatmap.vue

@@ -5,6 +5,7 @@
       @flatmapChanged="flatmapChanged"
       @ready="multiFlatmapReady"
       :state="entry.state"
+      :mapManager="mapManager"
       @resource-selected="flatmaprResourceSelected(entry.type, $event)"
       style="height: 100%; width: 100%"
       :initial="entry.resource"
@@ -33,6 +34,7 @@
       @finish-help-mode="endHelp"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @open-pubmed-url="onOpenPubmedUrl"
+      @mapmanager-loaded="onMapmanagerLoaded"
     />
 
     <HelpModeDialog
@@ -450,8 +452,9 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on('annotation-close', (payload) => {
-      if (payload?.tabClose && this.$refs.multiflatmap.getCurrentFlatmap()) {
-        this.$refs.multiflatmap.getCurrentFlatmap().annotationEventCallback({}, { type: 'aborted' })
+      if (payload?.tabClose && this.flatmapReady && this.$refs.multiflatmap) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.annotationEventCallback({}, { type: 'aborted' })
       }
     });
 

package/src/mixins/ContentMixin.js

@@ -4,7 +4,6 @@ import {
   getParentsRegion,
 } from "../components/SimulatedData.js";
 import EventBus from "../components/EventBus";
-import markerZoomLevels from "../components/markerZoomLevelsHardCoded.js";
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
@@ -77,6 +76,9 @@ export default {
 
       this.onConnectivityInfoClose();
     },
+    onMapmanagerLoaded: function (mapManager) {
+      this.settingsStore.updateMapManager(mapManager);
+    },
     trackOpenMap: function (category) {
       // GA Tagging
       // Open map tracking
@@ -123,16 +125,13 @@ export default {
         eventType: undefined,
       };
 
+
       if (type == "MultiFlatmap" || type == "Flatmap") {
-        result.internalName = this.idNamePair[resource.feature.models];
+        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 = this.idNamePair[resource.feature.models];
-            let hardcodedAnnotation = markerZoomLevels.filter(
-              mz => mz.id === resource.feature.models
-            );
-
+            let label = result.internalName;
             if (
               this.settingsStore.isFeaturedMarkerIdentifier(
                 resource.feature.id
@@ -146,15 +145,6 @@ export default {
                 ),
                 featuredDataset: true,
               };
-            } else if (hardcodedAnnotation.filter(h => h.keyword).length > 0) {
-              // if it matches our stored keywords, it is a keyword search
-              // Keyword searches do not contain labels, so switch to keyword search if no label exists
-              returnedAction = {
-                type: "Search",
-                term:
-                  "http://purl.obolibrary.org/obo/" +
-                  resource.feature.models.replace(":", "_"),
-              };
             } else {
               // Facet search on anatomy if it is not a keyword search
               returnedAction = {
@@ -525,6 +515,7 @@ export default {
       scaffoldLoaded: false,
       isInHelp: false,
       hoverDelay: undefined,
+      mapManager: undefined,
     };
   },
   created: function () {
@@ -534,6 +525,9 @@ export default {
       this.flatmapAPI = this.settingsStore.flatmapAPI;
     if (this.settingsStore.sparcApi)
       this.apiLocation = this.settingsStore.sparcApi;
+    if (this.settingsStore.mapManager) {
+      this.mapManager = this.settingsStore.mapManager;
+    }
   },
   watch: {
     helpMode: function (newVal) {

package/src/mixins/DynamicMarkerMixin.js

@@ -1,9 +1,7 @@
 
-import markerZoomLevels from "../components/markerZoomLevelsHardCoded.js";
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 
-
 // remove duplicates by stringifying the objects
 const removeDuplicates = function (arrayOfAnything) {
   if (!arrayOfAnything) return []
@@ -77,8 +75,6 @@ export default {
         for (let j = 0; j < dataset.terms.length; j++) {
           if (fma.includes(dataset.terms[j])) {
             datasetAdjusted.terms.push(dataset.terms[j]);
-
-            
           }
         }
         markersOnFlatmap.push(datasetAdjusted);

package/src/stores/settings.js

@@ -14,6 +14,7 @@ export const useSettingsStore = defineStore('settings', {
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
       flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
+      mapManager: undefined,
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
       numberOfDatasetsForFacets: [],
@@ -67,6 +68,9 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI2(flatmapAPI2) {
       this.flatmapAPI2 = flatmapAPI2;
     },
+    updateMapManager(mapManager) {
+      this.mapManager = mapManager;
+    },
     updateNLLinkPrefix(nlLinkPrefix) {
       this.nlLinkPrefix = nlLinkPrefix;
     },