@abi-software/mapintegratedvuer 1.6.5 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.6.5",
+  "version": "1.7.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.0",
+    "@abi-software/map-side-bar": "2.6.0",
+    "@abi-software/map-utilities": "1.3.0",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.6.2",
-    "@abi-software/simulationvuer": "^1.0.1",
+    "@abi-software/scaffoldvuer": "1.7.0",
+    "@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/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/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;
     },