@abi-software/mapintegratedvuer 1.21.2 → 1.23.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.23.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -58,12 +58,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.17.0",
-    "@abi-software/map-side-bar": "2.19.0",
-    "@abi-software/map-utilities": "1.12.0",
+    "@abi-software/flatmapvuer": "1.20.0",
+    "@abi-software/map-side-bar": "2.20.0",
+    "@abi-software/map-utilities": "1.13.0",
     "@abi-software/plotvuer": "1.3.0",
-    "@abi-software/scaffoldvuer": "1.21.0",
-    "@abi-software/simulationvuer": "4.3.0",
+    "@abi-software/scaffoldvuer": "2.1.0",
+    "@abi-software/simulationvuer": "4.4.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",

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/ContextCard.vue

@@ -7,7 +7,7 @@
         class="context-card"
       >
         <div class="card-left">
-          <img :src="banner" class="context-image" />
+          <img :crossorigin="crossorigin" :src="banner" class="context-image" />
         </div>
         <div class="card-right scrollbar">
           <div>
@@ -54,7 +54,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">{{ view.description }}</div>
                 </div>
                 <div class="padding" />
@@ -72,6 +76,7 @@
                       :style="'background-color:' + sample.color"
                     ></div>
                     <img
+                      :crossorigin="crossorigin"
                       class="key-image"
                       v-else-if="sample.thumbnail"
                       :src="getFileFromPath(sample.thumbnail)"
@@ -99,7 +104,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <span @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">
                     {{ view.description }}
                     <i class="el-icon-warning-outline info"></i>
@@ -171,6 +180,9 @@ export default {
     CopyToClipboard,
   },
   mixins: [S3Bucket],
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/DatasetHeader.vue

@@ -18,7 +18,7 @@
         class="dataset-card"
         ref="card"
       >
-        <img :src="entry.datasetImage" class="image" />
+        <img :crossorigin="crossorigin" :src="entry.datasetImage" class="image" />
         <div style="padding: 14px">
           <span class="dataset-description">{{ entry.datasetDescription }}</span>
           <div>
@@ -33,6 +33,9 @@
 <script>
 export default {
   name: 'DatasetHeader',
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/MapContent.vue

@@ -132,9 +132,27 @@ 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,
+    },
+    /**
+     * The `crossorigin` attribute value used for images.
+     */
+    crossorigin: {
+      type: String,
+      default: 'anonymous',
+    },
   },
   provide: function () {
     return {
+      crossorigin: computed(() => this.crossorigin),
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
       truncateLongLabel: computed(() => this.truncateLongLabel),
@@ -308,7 +326,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 +488,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/components/viewers/Simulation.vue

@@ -1,5 +1,14 @@
 <template>
-  <SimulationVuer :apiLocation="apiLocation" :id="id" ref="simulation" />
+  <SimulationVuer
+    v-if="isCrossOriginIsolated"
+    :apiLocation="apiLocation"
+    :id="id"
+    ref="simulation"
+  />
+  <div v-else class="simulation-unsupported">
+    Simulations require a cross-origin isolated page (for SharedArrayBuffer support). This browser
+    or host is not configured for it.
+  </div>
 </template>
 
 <script>
@@ -13,6 +22,13 @@ export default {
   components: {
     SimulationVuer,
   },
+  data: function () {
+    return {
+      // libOpenCOR (wasm) uses threads, which need SharedArrayBuffer and therefore COOP/COEP headers.
+      // Without them it aborts on Safari.
+      isCrossOriginIsolated: window.crossOriginIsolated === true,
+    };
+  },
   computed: {
     id: function () {
       //resource field is only available for simulation omex file and it will run locally.
@@ -22,3 +38,9 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.simulation-unsupported {
+  padding: 1rem;
+}
+</style>

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;

package/vite.config.js

@@ -9,6 +9,32 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const pathSrc = path.resolve(__dirname, './src');
 
+// SimulationVuer (libOpenCOR wasm) needs SharedArrayBuffer, which requires cross-origin isolation.
+// Safari/WebKit does not support COEP `credentialless`,
+// so serve `require-corp` to WebKit browsers and `credentialless` to the rest.
+const isWebKitOnly = (ua = '') => ua.includes('AppleWebKit') && !/(Chrome|Chromium|Edg)\//.test(ua);
+
+const crossOriginIsolation = () => {
+  const middleware = (req, res, next) => {
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+    res.setHeader(
+      'Cross-Origin-Embedder-Policy',
+      isWebKitOnly(req.headers['user-agent']) ? 'require-corp' : 'credentialless',
+    );
+    res.setHeader('Vary', 'User-Agent');
+    next();
+  };
+  return {
+    name: 'cross-origin-isolation',
+    configureServer: (server) => {
+      server.middlewares.use(middleware);
+    },
+    configurePreviewServer: (server) => {
+      server.middlewares.use(middleware);
+    },
+  };
+};
+
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   const config = {
@@ -53,11 +79,8 @@ export default defineConfig(({ command }) => {
   if (command === 'serve') {
     config.server = {
       port: 8081,
-      headers: {
-        'Cross-Origin-Opener-Policy': 'same-origin',
-        'Cross-Origin-Embedder-Policy': 'credentialless',
-      },
     };
+    config.plugins.push(crossOriginIsolation());
     config.define = {
       'process.env.HTTP_PROXY': 8081,
       global: 'globalThis',

package/dist/Simulation-BOtU3kTT.js

@@ -1,25 +0,0 @@
-import { _ as e } from "./connectivities-DyeS8w0c.js";
-import { t } from "./ContentMixin-Xg0PjBqG.js";
-import { createBlock as n, openBlock as r, resolveComponent as i } from "vue";
-import { SimulationVuer as a } from "@abi-software/simulationvuer";
-import "@abi-software/simulationvuer/dist/style.css";
-//#region src/components/viewers/Simulation.vue
-var o = {
-	name: "Simulation",
-	mixins: [t],
-	components: { SimulationVuer: a },
-	computed: { id: function() {
-		return this.entry.resource ? this.entry.resource : this.entry.discoverId;
-	} }
-};
-function s(e, t, a, o, s, c) {
-	let l = i("SimulationVuer");
-	return r(), n(l, {
-		apiLocation: e.apiLocation,
-		id: c.id,
-		ref: "simulation"
-	}, null, 8, ["apiLocation", "id"]);
-}
-var c = /*#__PURE__*/ e(o, [["render", s]]);
-//#endregion
-export { c as default };