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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.3-beta.16",
+  "version": "2.5.3-beta.18",
   "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/components/SearchHistory.vue

@@ -13,6 +13,7 @@
             <el-popover
               width="auto"
               trigger="hover"
+              :teleported="false"
               :show-after="200"
               :persistent="false"
               popper-class="popover-dropdown"
@@ -32,7 +33,13 @@
     <div v-else>
       <span class="empty-saved-search">No Saved Searches</span>
     </div>
-    <el-dropdown trigger="click" :hide-on-click="false">
+    <el-dropdown
+      trigger="click"
+      :hide-on-click="false"
+      :teleported="false"
+      class="search-history-dropdown"
+      popper-class="search-history-dropdown__popper"
+    >
       <span class="el-dropdown-select">
         Search history
         <el-icon class="el-icon--right">
@@ -47,6 +54,7 @@
                 <el-popover
                   width="auto"
                   trigger="hover"
+                  :teleported="false"
                   :show-after="200"
                   :persistent="false"
                   popper-class="popover-dropdown"
@@ -69,7 +77,7 @@
               <el-popover
                 width="auto"
                 trigger="hover"
-                :teleported="true"
+                :teleported="false"
                 :show-after="200"
                 :persistent="false"
                 popper-class="popover-dropdown"
@@ -110,7 +118,7 @@
               <el-popover
                 width="auto"
                 trigger="hover"
-                :teleported="true"
+                :teleported="false"
                 :show-after="200"
                 :persistent="false"
                 popper-class="popover-dropdown"
@@ -422,6 +430,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding-bottom: 6px;
+  z-index: 2;
 }
 
 .empty-saved-search {
@@ -539,6 +548,10 @@ export default {
     margin: 0;
   }
 }
+
+:deep(.search-history-dropdown__popper) {
+  position: fixed !important;
+}
 </style>
 
 <style lang="scss">
@@ -595,9 +608,11 @@ export default {
   max-width: 240px;
   font-family: Asap;
   font-size: 12px;
+  white-space: normal;
   word-break: break-word;
   text-align: left;
   color: inherit;
+  position: fixed !important;
   background: #f3ecf6 !important;
   border: 1px solid $app-primary-color;
 

package/src/components/SidebarContent.vue

@@ -588,6 +588,7 @@ export default {
   overflow-y: scroll;
   scrollbar-width: thin;
   border-radius: var(--el-border-radius-base);
+  z-index: 1;
 }
 
 .content :deep(.el-loading-spinner .path) {

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"
+              },
             },
         },
     },