@abi-software/map-side-bar 2.5.3-beta.16 → 2.5.3-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.3-beta.16",
+  "version": "2.5.3-beta.17",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.2.2-beta.7",
+    "@abi-software/map-utilities": "^1.2.2-beta.8",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/SearchFilters.vue

@@ -15,6 +15,10 @@
         placement="bottom-start"
         :width="200"
         trigger="hover"
+        :teleported="false"
+        popper-class="cascade-tags-popover"
+        ref="cascadeTagsPopover"
+        @show="onCascadeTagsPopoverShown"
       >
         <template #default>
           <div class="el-tags-container">
@@ -59,14 +63,15 @@
           @expand-change="cascadeExpandChange"
           :show-all-levels="true"
           popper-class="sidebar-cascader-popper"
+          :teleported="false"
         />
         <div v-if="showFiltersText" class="filter-default-value">Filters</div>
         <el-popover
           title="How do filters work?"
           width="250"
           trigger="hover"
-          :append-to-body="false"
           popper-class="popover"
+          :teleported="false"
         >
           <template #reference>
             <MapSvgIcon icon="help" class="help" />
@@ -91,6 +96,7 @@
         v-model="numberShown"
         placeholder="10"
         @change="numberShownChanged($event)"
+        :teleported="false"
       >
         <el-option
           v-for="item in numberDatasetsShown"
@@ -791,6 +797,22 @@ export default {
       }
       return []
     },
+    onCascadeTagsPopoverShown: function () {
+      const cascadeTagsPopover = this.$refs.cascadeTagsPopover;
+      const cascader = this.$refs.cascader;
+
+      if (cascader && cascadeTagsPopover) {
+        const cascaderZIndex = cascader.contentRef?.style.zIndex;
+        const cascaderTagZIndex = (cascaderZIndex * 1) + 1;
+        const cascadeTagsPopoverContentRef = cascadeTagsPopover.popperRef?.contentRef;
+
+        if (cascadeTagsPopoverContentRef) {
+          const cascaderTag = cascadeTagsPopoverContentRef.closest('.cascader-tag');
+          cascadeTagsPopoverContentRef.style.zIndex = cascaderTagZIndex;
+          cascaderTag.style.zIndex = cascaderTagZIndex;
+        }
+      }
+    },
   },
   mounted: function () {
     this.algoliaClient = markRaw(new AlgoliaClient(
@@ -932,40 +954,13 @@ export default {
   line-height: 18px;
 }
 
-.filters :deep(.el-popover[x-placement^='top'] .popper__arrow) {
-  border-top-color: $app-primary-color;
-  border-bottom-width: 0;
-}
-.filters :deep(.el-popover[x-placement^='top'] .popper__arrow::after) {
-  border-top-color: #f3ecf6;
-  border-bottom-width: 0;
-}
-
-.filters :deep(.el-popover[x-placement^='bottom'] .popper__arrow) {
-  border-top-width: 0;
-  border-bottom-color: $app-primary-color;
-}
-.filters :deep(.el-popover[x-placement^='bottom'] .popper__arrow::after) {
-  border-top-width: 0;
-  border-bottom-color: #f3ecf6;
-}
-
-.filters :deep(.el-popover[x-placement^='right'] .popper__arrow) {
-  border-right-color: $app-primary-color;
-  border-left-width: 0;
-}
-.filters :deep(.el-popover[x-placement^='right'] .popper__arrow::after) {
-  border-right-color: #f3ecf6;
-  border-left-width: 0;
+.filters :deep(.el-popover .el-popper__arrow::before) {
+  background: #f3ecf6;
+  border-color: $app-primary-color;
 }
 
-.filters :deep(.el-popover[x-placement^='left'] .popper__arrow) {
-  border-right-width: 0;
-  border-left-color: $app-primary-color;
-}
-.filters :deep(.el-popover[x-placement^='left'] .popper__arrow::after) {
-  border-right-width: 0;
-  border-left-color: #f3ecf6;
+:deep(.cascade-tags-popover) {
+  position: fixed !important;
 }
 </style>
 
@@ -981,6 +976,7 @@ export default {
   color: #292b66;
   text-align: center;
   padding-bottom: 6px;
+  position: fixed !important;
 }
 
 .sidebar-cascader-popper .el-cascader-node.is-active {

package/src/exampleConnectivityInput.js

@@ -274,10 +274,7 @@ export default {
         "ilxtr:neuron-type-aacar-5"
     ],
     "hyperlinks": [
-        {
-            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fwww.ncbi.nlm.nih.gov%2Fpubmed%2F27783854",
-            "id": "pubmed"
-        }
+        "https://doi.org/10.1002/cphy.c150046"
     ],
     "provenanceTaxonomy": [
         "NCBITaxon:9606",

package/vite.config.js

@@ -38,11 +38,12 @@ export default defineConfig({
             fileName: 'map-side-bar',
         },
         rollupOptions: {
-            external: ["vue"],
+            external: ["vue", "@abi-software/map-utilities"],
             output: {
-                globals: {
-                    vue: "Vue",
-                },
+              globals: {
+                vue: "Vue",
+                "@abi-software/map-utilities": "@abi-software/map-utilities"
+              },
             },
         },
     },