@abi-software/mapintegratedvuer 1.20.0 → 1.21.0

package/eslint.config.js

@@ -0,0 +1,33 @@
+import { includeIgnoreFile } from "eslint/config";
+import js from "@eslint/js";
+import cypress from "eslint-plugin-cypress";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+import { fileURLToPath } from "node:url";
+
+const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
+
+export default [
+  includeIgnoreFile(gitignorePath),
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    ...cypress.configs.recommended,
+    files: ["cypress/**/*.js"],
+  },
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=20"
+    "node": "^24.20.0"
   },
   "scripts": {
     "serve": "vite --host --force",
     "heroku-postbuild": "vite build",
     "build-bundle": "vite build -c vite.bundle-build.js",
     "build-static": "vite build -c vite.static-build.js",
+    "lint": "eslint .",
     "start": "vite build && vite preview",
     "test-unit": "mochapack --webpack-config test/unit/webpack.config.js --require test/unit/setup.js test/unit/**/*.spec.js",
     "test": "vitest --dom",
@@ -55,89 +56,63 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.14.0",
-    "@abi-software/map-side-bar": "2.16.0",
-    "@abi-software/map-utilities": "1.9.0",
-    "@abi-software/plotvuer": "1.1.0",
-    "@abi-software/scaffoldvuer": "1.18.0",
-    "@abi-software/simulationvuer": "3.3.0",
+    "@abi-software/flatmapvuer": "1.16.0",
+    "@abi-software/map-side-bar": "2.18.0",
+    "@abi-software/map-utilities": "1.11.0",
+    "@abi-software/plotvuer": "1.3.0",
+    "@abi-software/scaffoldvuer": "1.20.0",
+    "@abi-software/simulationvuer": "4.3.0",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@abi-software/svg-sprite": "1.1.0",
-    "@element-plus/icons-vue": "^2.3.1",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@abi-software/svg-sprite": "1.4.0",
+    "@element-plus/icons-vue": "^2.3.2",
+    "@vitejs/plugin-vue": "^6.0.8",
     "css-element-queries": "^1.2.3",
-    "element-plus": "2.8.4",
-    "marked": "^4.3.0",
+    "element-plus": "^2.14.5",
+    "marked": "^8.0.1",
     "mitt": "^3.0.1",
-    "pinia": "^2.1.7",
-    "splitpanes": "^3.1.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.4.21",
-    "xss": "^1.0.14"
+    "pinia": "^4.0.3",
+    "splitpanes": "^4.1.2",
+    "unplugin-vue-components": "^32.1.0",
+    "vue": "^3.5.41",
+    "xss": "^1.0.15"
   },
   "devDependencies": {
-    "@pinia/testing": "^0.1.3",
-    "@vue/test-utils": "^2.4.4",
+    "@eslint/js": "^10.0.1",
+    "@pinia/testing": "^2.0.1",
+    "@vue/test-utils": "^2.4.11",
     "@vuese/markdown-render": "^2.11.3",
-    "auto-changelog": "^2.4.0",
-    "babel-eslint": "^10.0.3",
+    "auto-changelog": "^2.6.0",
     "babel-plugin-component": "^1.1.1",
-    "chai": "^4.1.2",
-    "chokidar": "^3.6.0",
-    "concurrently": "^8.2.2",
-    "cypress": "^13.17.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",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-vue": "^9.19.2",
-    "happy-dom": "^15.11.6",
-    "jsdom": "^16.2.2",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^10.4.0",
-    "mochapack": "^2.1.4",
-    "mochawesome": "^7.1.3",
-    "mochawesome-merge": "^4.3.0",
-    "mochawesome-report-generator": "^6.2.0",
-    "sass": "^1.69.5",
-    "vite": "^5.0.10",
-    "vitepress": "^1.0.0-rc.45",
-    "vitest": "^1.2.2",
+    "chokidar": "^5.0.0",
+    "concurrently": "^9.2.4",
+    "cypress": "^15.21.0",
+    "cypress-multi-reporters": "^2.0.5",
+    "cypress-visual-regression": "^6.0.0",
+    "cypress-wait-until": "^3.0.2",
+    "dom-parser": "^1.1.5",
+    "eslint": "^10.9.1",
+    "eslint-plugin-cypress": "^7.0.0",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "happy-dom": "^20.11.6",
+    "mocha": "^10.8.2",
+    "mochapack": "^2.1.5",
+    "mochawesome": "^8.0.1",
+    "mochawesome-merge": "^4.4.1",
+    "mochawesome-report-generator": "^6.3.2",
+    "sass": "^1.103.1",
+    "vite": "^8.2.1",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.11",
     "vue-docgen-api": "^4.79.2",
-    "vue-router": "^4.2.5"
+    "vue-router": "^5.2.0"
   },
   "optionalDependencies": {
-    "@esbuild/darwin-arm64": "^0.25.3",
-    "@rollup/rollup-darwin-arm64": "4.62.3",
-    "@rollup/rollup-linux-x64-gnu": "4.62.3",
-    "@rollup/rollup-win32-x64-msvc": "4.62.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "overrides": [
-      {
-        "files": [
-          "**/__tests__/*.{j,t}s?(x)",
-          "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "mocha": true
-        }
-      }
-    ]
+    "@esbuild/darwin-arm64": "0.28.2",
+    "@esbuild/linux-x64": "0.28.2",
+    "@rollup/rollup-darwin-arm64": "4.63.0",
+    "@rollup/rollup-linux-x64-gnu": "4.63.0",
+    "@rollup/rollup-win32-x64-msvc": "4.63.0"
   },
   "overrides": {
     "@abi-software/flatmapvuer": "$@abi-software/flatmapvuer",
@@ -146,5 +121,15 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "allowScripts": {
+    "esbuild@0.21.5": true,
+    "nodent-runtime@3.2.1": true,
+    "fsevents@2.3.3": true,
+    "es5-ext@0.10.64": true,
+    "cypress@15.21.1": true,
+    "core-js-pure@3.50.0": true,
+    "core-js@3.50.0": true,
+    "@parcel/watcher@2.6.0": true
+  }
 }

package/src/App.vue

@@ -4,34 +4,46 @@
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
       <div class="button-container">
         <el-popover
+          ref="optionsPopover"
           placement="bottom"
           trigger="click"
           width=500
           class="popover"
           :teleported=false
-          >
-            <div class="options-container">
-              <div class="row">
-                <el-button @click="saveSettings()" size="small">Save Settings</el-button>
-                <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
-                <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </div>
-              <div class="row">
-                <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
-                <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-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
-              </div>
+        >
+          <div class="options-container">
+            <div class="row">
+              <el-button @click="saveSettings()" size="small">Save Settings</el-button>
+              <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
+              <el-button @click="getShareableURL()" size="small">Get Link</el-button>
             </div>
-            <template #reference>
-
-                <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
-
-            </template>
+            <div class="row">
+              <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
+              <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>
+            </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>
+          </div>
+          <template #reference>
+            <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
+          </template>
         </el-popover>
       </div>
     <div class="map-app">
@@ -42,6 +54,8 @@
         :options="options"
         :state="state"
         :showLongLabel="showLongLabel"
+        :truncateLongLabel="truncateLongLabel"
+        :showIdInTooltip="showIdInTooltip"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -161,6 +175,8 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
+      truncateLongLabel: true,
+      showIdInTooltip: true,
     }
   },
   computed: {
@@ -182,6 +198,11 @@ export default {
     }
   },
   methods: {
+    closePopover: function() {
+      if (this.$refs.optionsPopover) {
+        this.$refs.optionsPopover.hide();
+      }
+    },
     changeViewingMode: function(modeName) {
       this.$refs.map.changeViewingMode(modeName);
     },
@@ -261,6 +282,7 @@ export default {
           label: "Functional"
         }
       );
+      this.closePopover();
     },
     setLegacyMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -270,6 +292,7 @@ export default {
           uuid: "01fedbf9-d783-509c-a10c-827941ab13da",
         }
       );
+      this.closePopover();
     },
     setMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -281,6 +304,7 @@ export default {
           organ: "UBERON:0018675"
         }
       );
+      this.closePopover();
     },
     setRatFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -289,6 +313,7 @@ export default {
           taxo: "NCBITaxon:10114"
         }
       );
+      this.closePopover();
     },
     setScaffold: function() {
       this.$refs.map.setCurrentEntry(
@@ -299,6 +324,7 @@ export default {
           viewUrl: "colonMouse_Layout1_view.json"
         }
       );
+      this.closePopover();
     },
     setWholebody: function() {
       this.$refs.map.setCurrentEntry(
@@ -308,12 +334,20 @@ export default {
           isBodyScaffold: true
         }
       );
+      this.closePopover();
     },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
+      this.closePopover();
+    },
+    onShowLongLabelChange: function() {
+      this.closePopover();
+    },
+    onTruncateLongLabelChange: function() {
+      this.closePopover();
     },
-    toggleLongLabel: function() {
-      this.showLongLabel = !this.showLongLabel;
+    onShowIdInTooltipChange: function() {
+      this.closePopover();
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)

package/src/assets/fonts.scss

@@ -0,0 +1,2 @@
+@use 'variables' as *;
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');

package/src/assets/header-icon.scss

@@ -1,4 +1,5 @@
-@import '_variables.scss';
+@use '_variables' as *;
+@forward '_variables';
 
 .tooltip {
   font-family: 'Asap', 'Avenir',  Arial, sans-serif;

package/src/assets/styles.scss

@@ -1,6 +1,5 @@
-@import '_variables';
-
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+@use '_variables' as *;
+@forward '_variables';
 
 /* icon font path, required */
 $--color-primary: $app-primary-color !default;

package/src/components/CustomSplitter.vue

@@ -6,7 +6,7 @@
     <splitpanes
       class="default-theme"
       :horizontal="isHorizontal"
-      :dbl-click-splitter="false"
+      :maximize-panes="false"
     >
       <template v-for="(child) in children" :key="child">
         <pane :ref="child" @vue:beforeUnmount="childUnmounted(child)">
@@ -14,7 +14,7 @@
             v-if="customLayout[child].content"
             @resize="calculateStyles(child)">
           </resize-sensor>
-          <custom-splitter 
+          <custom-splitter
             v-else
             :key="child"
             :index="child"
@@ -53,7 +53,7 @@ export default {
   methods: {
     requestStylesUpdate: function(refName) {
       if (this.$refs) {
-        if (refName in this.$refs && this.$refs[refName] && 
+        if (refName in this.$refs && this.$refs[refName] &&
         this.$refs[refName][0] && this.$refs[refName][0].$el) {
           const el = this.$refs[refName][0].$el;
           const rect = el.getBoundingClientRect();

package/src/components/MapContent.vue

@@ -20,6 +20,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
@@ -64,6 +65,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    truncateLongLabel: {
+      type: Boolean,
+      default: true,
+    },
+    showIdInTooltip: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The options include APIs and Keys.
      */
@@ -133,6 +142,8 @@ export default {
     return {
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
+      truncateLongLabel: computed(() => this.truncateLongLabel),
+      showIdInTooltip: computed(() => this.showIdInTooltip),
     };
   },
   data: function () {

package/src/components/SearchControls.vue

@@ -80,7 +80,7 @@ export default {
     font-size: 0.8rem;
     margin-left: 0.5rem;
   }
-  :deep(.search-box) {
+  :deep(.search-box.el-autocomplete) {
     margin-top: 2px;
     margin-left:0.5rem;
     height:28px;

package/src/components/SplitFlow.vue

@@ -30,7 +30,7 @@
           :connectivityKnowledge="connectivityKnowledge"
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
-          :showLongLabel="showLongLabel"
+          :showLongLabel="true"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -67,7 +67,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { provide, markRaw } from 'vue'
+import { provide, markRaw, computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import DialogToolbarContent from "./DialogToolbarContent.vue";
 import EventBus from "./EventBus";
@@ -141,12 +141,13 @@ export default {
     SplitDialog,
     SideBar,
   },
-  setup() {
+  setup(props) {
     const mainStore = useMainStore();
-    provide('userApiKey', mainStore.userToken);
     const settings = useSettingsStore();
     let annotator = markRaw(new AnnotationService(`${settings.flatmapAPI}annotator`));
-    provide('$annotator', annotator)
+    provide('userApiKey', mainStore.userToken);
+    provide('$annotator', annotator);
+    provide('showLongLabel', computed(() => props.showLongLabel));
     return { annotator }
   },
   props: {

package/src/components/index.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import MapContent from './MapContent.vue';
+import '../assets/fonts.scss';
 
 export {
   MapContent