@abi-software/map-side-bar 2.16.0 → 2.18.0

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=20"
+    "node": "^24.20.0"
   },
   "repository": {
     "type": "git",
@@ -20,6 +20,7 @@
     "serve": "vite --host",
     "build-bundle": "vite build",
     "preview": "vite preview",
+    "lint": "eslint .",
     "test": "cypress run --component",
     "cypress:open": "cypress open",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
@@ -46,45 +47,55 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "1.3.0",
-    "@abi-software/map-utilities": "1.9.0",
-    "@abi-software/svg-sprite": "^1.1.0",
-    "@element-plus/icons-vue": "^2.3.1",
-    "algoliasearch": "^4.10.5",
-    "element-plus": "2.8.4",
-    "js-base64": "^3.7.7",
-    "marked": "^4.1.1",
+    "@abi-software/gallery": "1.6.0",
+    "@abi-software/map-utilities": "1.11.0",
+    "@abi-software/svg-sprite": "1.4.0",
+    "@element-plus/icons-vue": "^2.3.2",
+    "algoliasearch": "^4.27.0",
+    "element-plus": "^2.14.5",
+    "js-base64": "^3.9.2",
+    "marked": "^8.0.1",
     "mitt": "^3.0.1",
-    "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.4.21",
-    "xss": "^1.0.14"
+    "vue": "^3.5.41",
+    "xss": "^1.0.15"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/compiler-sfc": "^3.3.13",
+    "@eslint/js": "^10.0.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "unplugin-vue-components": "^32.1.0",
+    "@vue/compiler-sfc": "^3.5.41",
     "@vuese/markdown-render": "^2.11.3",
-    "auto-changelog": "^2.4.0",
-    "autoprefixer": "^10.4.17",
-    "chokidar": "^3.6.0",
-    "concurrently": "^8.2.2",
-    "cypress": "^13.13.0",
-    "cypress-multi-reporters": "^1.6.4",
-    "cypress-wait-until": "^3.0.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "mochawesome": "^7.1.3",
-    "raw-loader": "^0.5.1",
-    "sass": "^1.70.0",
+    "auto-changelog": "^2.6.0",
+    "autoprefixer": "^10.5.4",
+    "chokidar": "^5.0.0",
+    "concurrently": "^9.2.4",
+    "cypress": "^15.21.0",
+    "cypress-multi-reporters": "^2.0.5",
+    "cypress-wait-until": "^3.0.2",
+    "eslint": "^10.9.1",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "mochawesome": "^8.0.1",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.103.1",
     "transform-loader": "^0.2.4",
-    "typescript": "^4.4.3",
-    "vite": "^5.0.10",
-    "vitepress": "^1.0.2",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.1",
+    "vitepress": "^1.6.4",
     "vue-custom-element": "^3.3.0",
     "vue-docgen-api": "^4.79.2"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "4.59.0",
-    "@rollup/rollup-linux-x64-gnu": "4.59.0",
-    "@rollup/rollup-win32-x64-msvc": "4.59.0"
+    "@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"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.6.0": true,
+    "cypress@15.21.1": true,
+    "fsevents@2.3.3": true,
+    "esbuild@0.21.5": true
   }
 }

package/src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
-    />
     <div class="options-container">
       <div>Click arrow to open sidebar</div>
       <el-button @click="openSearch">search Uberon from refs</el-button>
@@ -389,6 +385,7 @@ export default {
 }
 body {
   margin: 0px;
+  font-family: $font-family;
 }
 .map-icon {
   color: $app-primary-color;

package/src/assets/fonts.scss

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

package/src/assets/pagination.scss

@@ -1,4 +1,5 @@
-@import '_variables';
+@use '_variables' as *;
+@forward '_variables';
 
 .pagination {
   padding-bottom: 16px;

package/src/assets/searchPopover.scss

@@ -1,4 +1,7 @@
 
+@use '_variables' as *;
+@forward '_variables';
+
 .filter-help-popover {
   font-family: 'Asap', sans-serif;
   background: #f3ecf6 !important;

package/src/assets/styles.scss

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

package/src/components/ConnectivityCard.vue

@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/connectivity-explorer.scss';
+@use '../assets/connectivity-explorer.scss';
 
 .connectivity-card {
   padding-left: 5px;

package/src/components/ConnectivityExplorer.vue

@@ -653,8 +653,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/searchPopover.scss';
-@import '../assets/pagination.scss';
+@use '../assets/searchPopover.scss';
+@use '../assets/pagination.scss';
 
 .connectivity-card {
   position: relative;

package/src/components/ConnectivityInfo.vue

@@ -1216,7 +1216,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/connectivity-explorer.scss';
+@use '../assets/connectivity-explorer.scss';
 
 .connectivity-info-title {
   padding: 0;

package/src/components/ContributorItem.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/_variables.scss';
+@use '../assets/_variables.scss';
 
 .contributor-item {
   display: inline;
@@ -67,7 +67,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '../assets/_variables.scss';
+@use '../assets/_variables.scss';
 
 .contributor-popover.el-popover {
   font-family: $font-family;

package/src/components/DatasetCard.vue

@@ -217,6 +217,7 @@ export default {
     },
     createFlatmapItems: function () {
       if (this.entry.flatmaps) {
+        const flatmaps = []
         this.entry.flatmaps.forEach((flatmap) => {
           if (flatmap.associated_flatmap?.identifier) {
             const filePath = flatmap.dataset.path
@@ -245,7 +246,7 @@ export default {
               doi: this.entry.doi,
               version: this.version,
             }
-            this.items['Flatmaps'].push({
+            flatmaps.push({
               id,
               title: baseName(filePath),
               type: 'Flatmap',
@@ -256,6 +257,7 @@ export default {
             })
           }
         })
+        this.items['Flatmaps'].push(...flatmaps.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createImageItems: function () {
@@ -276,6 +278,7 @@ export default {
     },
     createPlotItems: function () {
       if (this.entry.plots) {
+        const plots = []
         this.entry.plots.forEach((plot) => {
           const filePath = plot.dataset.path
           const id = plot.identifier
@@ -333,7 +336,7 @@ export default {
             discoverId: this.discoverId,
             version: this.version,
           }
-          this.items['Plots'].push({
+          plots.push({
             id,
             title: baseName(filePath),
             type: 'Plot',
@@ -343,11 +346,14 @@ export default {
             mimetype,
           })
         })
+        this.items['Plots'].push(...plots.sort((a, b) => a.title.localeCompare(b.title)))
+
       }
     },
     createScaffoldItems: function () {
       if (this.entry.scaffolds) {
         let index = 0
+        const scaffolds = []
         this.entry.scaffolds.forEach((scaffold, i) => {
           const filePath = scaffold.dataset.path
           const id = scaffold.identifier
@@ -381,7 +387,7 @@ export default {
             s3uri: this.entry.s3uri,
             contextCardUrl: this.getContextCardUrl(i),
           }
-          this.items['Scaffolds'].push({
+          scaffolds.push({
             id,
             title: baseName(filePath),
             type: 'Scaffold',
@@ -391,10 +397,12 @@ export default {
             mimetype,
           })
         })
+        this.items['Scaffolds'].push(...scaffolds.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createSimulationItems: function () {
       if (this.entry.simulation) {
+        const simulations = []
         this.entry.simulation.forEach((simulation) => {
           if (simulation.additional_mimetype.name === "application/x.vnd.abi.simulation+json") {
             let action = {
@@ -409,7 +417,7 @@ export default {
               discoverId: this.discoverId,
               dataset: `${this.envVars.ROOT_URL}/datasets/${this.discoverId}?type=dataset`,
             }
-            this.items['Simulations'].push({
+            simulations.push({
               id: 'simulation',
               title: ' ',
               type: 'Simulation',
@@ -448,7 +456,7 @@ export default {
               doi: this.entry.doi,
               version: this.version,
             }
-            this.items['Simulations'].push({
+            simulations.push({
               id,
               title: baseName(filePath),
               type: 'Simulation',
@@ -459,6 +467,7 @@ export default {
             })
           }
         })
+        this.items['Simulations'].push(...simulations.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createVideoItems: function () {

package/src/components/DatasetExplorer.vue

@@ -573,8 +573,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/searchPopover.scss';
-@import '../assets/pagination.scss';
+@use '../assets/searchPopover.scss';
+@use '../assets/pagination.scss';
 
 .dataset-card {
   position: relative;

package/src/components/SearchFilters.vue

@@ -208,6 +208,10 @@ export default {
       showFiltersText: true,
       cascadeSelected: [],
       cascadeSelectedWithBoolean: [],
+      // Re-entrancy lock: el-cascader can echo an extra @change
+      // after we reassign cascadeSelected in setCascader;
+      // stays locked until the filterTimeout debounce below unlocks it.
+      cascadeEventLocked: false,
       filterTimeout: null,
       numberShown: 10,
       filters: [],
@@ -258,7 +262,6 @@ export default {
             if (this.options.length) {
               this.checkShowAllBoxes()
               // this.setCascader(this.entry.filterFacets)
-              this.cssMods()
               this.$emit('cascaderReady')
             }
           })
@@ -570,6 +573,12 @@ export default {
     },
     // cascadeEvent: initiate searches based off cascader changes
     cascadeEvent: function (eventIn) {
+      // Ignore the echoed @change el-cascader fires
+      // after we reassign cascadeSelected in setCascader
+      if (this.cascadeEventLocked) {
+        return
+      }
+      this.cascadeEventLocked = true
       let event = [...eventIn]
       if (event) {
         // Check for show all in selected cascade options
@@ -667,7 +676,7 @@ export default {
 
         this.filterTimeout = setTimeout(() => {
           this.$emit('filterResults', filters) // emit filters for apps above sidebar
-          this.cssMods() // update css for the cascader
+          this.cascadeEventLocked = false // safe to process real cascader changes again
         }, 600);
       }
     },
@@ -775,7 +784,6 @@ export default {
         this.updateListFilters(this.__expandItem__[0])
       }
       this.updateListStyleOrder()
-      this.cssMods()
     },
     updateListStyleOrder: function () {
       this.$nextTick(() => {
@@ -954,30 +962,6 @@ export default {
         })
       )
     },
-    makeCascadeLabelsClickable: function () {
-      // Next tick allows the cascader menu to change
-      this.$nextTick(() => {
-        document
-          .querySelectorAll('.sidebar-cascader-popper .el-cascader-node__label')
-          .forEach((el) => {
-            // step through each cascade label
-            el.onclick = function () {
-              const checkbox = this.previousElementSibling
-              if (checkbox) {
-                if (!checkbox.parentElement.attributes['aria-owns']) {
-                  // check if we are at the lowest level of cascader
-                  this.previousElementSibling.click() // Click the checkbox
-                }
-              }
-            }
-          })
-      })
-    },
-
-    cssMods: function () {
-      this.makeCascadeLabelsClickable()
-    },
-
     flattenToFilters: function (filter, targetOption, previousMatched = false) {
       let filtersArray = []
 
@@ -1142,7 +1126,6 @@ export default {
       this.cascaderIsReady = true
       this.checkShowAllBoxes()
       this.setCascader(this.entry.filterFacets)
-      this.cssMods()
       this.$emit('cascaderReady')
     })
   },

package/src/components/index.js

@@ -1,4 +1,5 @@
 import SideBar from "./SideBar.vue"
+import "../assets/fonts.scss";
 
 export {
   SideBar

package/src/components.d.ts

@@ -1,10 +1,14 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
@@ -50,7 +54,7 @@ declare module 'vue' {
     SideBar: typeof import('./components/SideBar.vue')['default']
     Tabs: typeof import('./components/Tabs.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

package/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import "./assets/fonts.scss"
 import MapSideBar from './components/SideBar.vue'
 
 const app = createApp(App);

package/vite.config.js

@@ -28,31 +28,42 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': resolve(__dirname, './src'),
+            '@': resolve(import.meta.dirname, './src'),
         }
     },
     build: {
         lib: {
-            entry: resolve(__dirname, "./src/components/index.js"),
+            entry: resolve(import.meta.dirname, "./src/components/index.js"),
             name: "MapSideBar",
             fileName: 'map-side-bar',
         },
         rollupOptions: {
-            external: ["vue", "@abi-software/map-utilities", "@element-plus/icons-vue"],
+            external: [
+              "vue",
+              "@abi-software/map-utilities",
+              "@element-plus/icons-vue",
+              "@abi-software/map-utilities/dist/style.css"
+            ],
             output: {
               globals: {
                 vue: "Vue",
                 "@abi-software/map-utilities": "@abi-software/map-utilities",
                 "@element-plus/icons-vue": "@element-plus/icons-vue"
               },
+              // keep css output name stable for the "./dist/style.css" export/import paths
+              assetFileNames: (assetInfo) =>
+                assetInfo.name?.endsWith(".css")
+                  ? "style.css"
+                  : "assets/[name][extname]",
             },
         },
     },
     css: {
         preprocessorOptions: {
             scss: {
-                additionalData: `@use './src/assets/styles' as *;`
+                api: 'modern-compiler',
+                additionalData: `@use '@/assets/styles' as *;`
             }
         }
     }
-})
+})

package/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-    es2022: true,
-  },
-  extends: [
-    "plugin:vue/essential",
-    "eslint:recommended"
-  ],
-  rules: {}
-}

package/static.json

@@ -1,7 +0,0 @@
-{
-    "root": "dist",
-    "clean_urls": true,
-    "routes": {
-      "/**": "index.html"
-    }
-  }