@abi-software/mapintegratedvuer 1.21.2 → 1.22.0

package/eslint.config.js

@@ -12,7 +12,7 @@ const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url));
 export default [
   includeIgnoreFile(gitignorePath, { gitignoreResolution: true }),
   {
-    ignores: ['dist/**', 'docs/.vitepress/**', 'docs/components/**', 'test/**'],
+    ignores: ['dist/**', 'docs/.vitepress/**', 'docs/components/**', 'test/**', 'CHANGELOG.md'],
   },
   js.configs.recommended,
   ...vue.configs['flat/essential'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.21.2",
+  "version": "1.22.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -58,11 +58,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.17.0",
+    "@abi-software/flatmapvuer": "1.19.0",
     "@abi-software/map-side-bar": "2.19.0",
     "@abi-software/map-utilities": "1.12.0",
     "@abi-software/plotvuer": "1.3.0",
-    "@abi-software/scaffoldvuer": "1.21.0",
+    "@abi-software/scaffoldvuer": "2.0.0",
     "@abi-software/simulationvuer": "4.3.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.4.0",

package/src/App.vue

@@ -30,29 +30,12 @@
             <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
             <el-button @click="setSearch()" size="small">Set Search</el-button>
           </div>
-          <div class="row">
-            <div style="font-weight: 600">Connectivity tooltip labels:</div>
-          </div>
-          <div class="row">
-            <el-checkbox @change="onShowLongLabelChange" v-model="showLongLabel" size="small">
-              Show long label
-            </el-checkbox>
-            <el-checkbox
-              @change="onTruncateLongLabelChange"
-              :disabled="!showLongLabel"
-              v-model="truncateLongLabel"
-              size="small"
-            >
-              Truncate long label
-            </el-checkbox>
-            <el-checkbox
-              @change="onShowIdInTooltipChange"
-              :disabled="!showLongLabel"
-              v-model="showIdInTooltip"
-              size="small"
-            >
-              Show ID in tooltip
-            </el-checkbox>
+          <div class="row radio-row">
+            <span class="radio-label">Open new species in:</span>
+            <el-radio-group v-model="openNewSpeciesInSplitView" size="small">
+              <el-radio :value="false">Current view</el-radio>
+              <el-radio :value="true">Split view</el-radio>
+            </el-radio-group>
           </div>
         </div>
         <template #reference>
@@ -76,6 +59,7 @@
         :allClosable="false"
         :showGlobalSettings="true"
         :showOpenMapButton="true"
+        :openNewSpeciesInSplitView="openNewSpeciesInSplitView"
         @updateShareLinkRequested="updateUUID"
         @isReady="viewerIsReady"
         @mapLoaded="mapIsLoaded"
@@ -183,6 +167,7 @@ export default {
       showLongLabel: true,
       truncateLongLabel: true,
       showIdInTooltip: true,
+      openNewSpeciesInSplitView: true,
     };
   },
   computed: {
@@ -334,15 +319,6 @@ export default {
       this.$refs.map.openSearch([], '10.26275/1uno-tynt');
       this.closePopover();
     },
-    onShowLongLabelChange: function () {
-      this.closePopover();
-    },
-    onTruncateLongLabelChange: function () {
-      this.closePopover();
-    },
-    onShowIdInTooltipChange: function () {
-      this.closePopover();
-    },
     mapIsLoaded: function (map) {
       console.log('map is loaded', map);
       // map.changeViewingMode('Annotation')
@@ -573,6 +549,14 @@ body {
   text-align: center;
 }
 
+.radio-row {
+  align-items: center;
+}
+
+.radio-label {
+  font-size: 12px;
+}
+
 .map-icon {
   color: $app-primary-color !important;
 }

package/src/components/ContentBar.vue

@@ -434,6 +434,7 @@ export default {
     border-color: $app-primary-color;
     color: #fff;
     font-size: 11px !important;
+
     &:hover {
       color: #fff !important;
       background-color: #ac76c5 !important;

package/src/components/MapContent.vue

@@ -132,6 +132,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to open a species from the species dropdown's "open new view"
+     * in a split view. From a single view, it opens as a vertical split on the right.
+     * From a split view, it replaces the other pane's view.
+     * Default is `true`.
+     */
+    openNewSpeciesInSplitView: {
+      type: Boolean,
+      default: true,
+    },
   },
   provide: function () {
     return {
@@ -308,7 +318,11 @@ export default {
               discoverId: state.dataset_id,
               version: state.dataset_version,
             };
-            this.$refs.flow.createNewEntry(newView);
+            // sourceId is only provided by "open new view" from the species dropdown
+            this.$refs.flow.createNewEntry(newView, {
+              openInSplitView: this.openNewSpeciesInSplitView && state.sourceId !== undefined,
+              sourceId: state.sourceId,
+            });
           } else {
             //State for multiflatmap containing the following items:
             //  taxo - taxo of species to set
@@ -466,6 +480,12 @@ export default {
        */
       this.$emit('mapLoaded', map);
     });
+    // Allow other components to request opening a map via setCurrentEntry
+    EventBus.on('SetCurrentEntry', (entry) => {
+      if (entry) {
+        this.setCurrentEntry(entry);
+      }
+    });
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);

package/src/components/SplitFlow.vue

@@ -835,8 +835,10 @@ export default {
     /**
      * Add new entry which will sequentially create a
      * new dialog.
+     * Set `options.openInSplitView` with `options.sourceId` to open the
+     * new entry next to the source entry instead of the primary pane.
      */
-    createNewEntry: function (data) {
+    createNewEntry: function (data, options = {}) {
       let newEntry = {};
       newEntry.viewUrl = undefined;
       newEntry.state = undefined;
@@ -845,7 +847,15 @@ export default {
       newEntry.id = this.getNewEntryId();
       newEntry.discoverId = data.discoverId;
       this.entriesStore.addNewEntry(newEntry);
-      this.splitFlowStore.setIdToPrimaryPane(newEntry.id);
+      if (options.openInSplitView) {
+        this.splitFlowStore.placeEntryInSplitView({
+          id: newEntry.id,
+          sourceId: options.sourceId,
+          entries: this.entries,
+        });
+      } else {
+        this.splitFlowStore.setIdToPrimaryPane(newEntry.id);
+      }
       //close sidebar on entry creation to see the context card
       if (this.$refs.sideBar) {
         this.$refs.sideBar.setDrawerOpen(false);

package/src/components/viewers/MultiFlatmap.vue

@@ -37,6 +37,7 @@
       :showOpenMapButton="showOpenMapButton"
       @pan-zoom-callback="flatmapPanZoomCallback"
       @open-map="openMap"
+      @open-map-species="openMapSpecies"
       @finish-help-mode="endHelp"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @open-pubmed-url="onOpenPubmedUrl"
@@ -135,6 +136,19 @@ export default {
       //First search and show the result
       return flatmap.searchAndShowResult(term, true, true);
     },
+    // Open the given species as a new view.
+    openMapSpecies: function (species) {
+      EventBus.emit('SetCurrentEntry', {
+        resource: species,
+        type: 'MultiFlatmap',
+        mode: 'main',
+        state: undefined,
+        label: '',
+        discoverId: undefined,
+        sourceId: this.entry.id,
+      });
+      this.trackOpenMap(`open_new_AC_map_${species}`);
+    },
     /**
      * Append the list of suggested terms to suggestions
      */

package/src/stores/splitFlow.js

@@ -349,6 +349,37 @@ export const useSplitFlowStore = defineStore('splitFlow', {
         this.customLayout[currentKey].id = firstPaneId;
       }
     },
+    /**
+     * Place a newly created entry alongside the source entry.
+     * Single view: switch to vertical split with the new entry on the right.
+     * Multiple views: replace the other pane (pane-2 if the source is in
+     * pane-1, otherwise pane-1). The replaced entry remains in the entries list.
+     * Falls back to the primary pane if the source is not currently visible.
+     */
+    placeEntryInSplitView(payload) {
+      const { id, sourceId, entries } = payload;
+      if (this.activeView === 'singlepanel') {
+        const sourceKey = findKeyWithId(this.customLayout, sourceId);
+        if (sourceKey !== 'pane-1') {
+          this.setIdToPrimaryPane(id);
+          return;
+        }
+        this.updateActiveView({ view: '2vertpanel', entries }, false);
+        this.assignOrSwapPaneWithIds({ source: id, target: this.customLayout['pane-2'].id }, false);
+      } else {
+        const sourceKey = findKeyWithId(this.customLayout, sourceId);
+        if (!sourceKey || !this.isPaneActive(sourceKey)) {
+          this.setIdToPrimaryPane(id);
+          return;
+        }
+        const targetKey = sourceKey === 'pane-1' ? 'pane-2' : 'pane-1';
+        this.assignOrSwapPaneWithIds(
+          { source: id, target: this.customLayout[targetKey].id },
+          false,
+        );
+      }
+      this.updateSplitPanels();
+    },
     reset() {
       const original = getOriginalState();
       this.activeView = original.activeView;