@abi-software/map-side-bar 2.5.3-beta.9 → 2.6.1-beta.0

package/package.json

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

package/src/App.vue

@@ -7,8 +7,9 @@
     <div class="options-container">
       <div>Click arrow to open sidebar</div>
       <el-button @click="openSearch">search Uberon from refs</el-button>
-      <el-button @click="singleFacets">Add heart to Filter</el-button>
+      <el-button @click="singleFacets">Add heart to Filter (facet2 set)</el-button>
       <el-button @click="addStomach">Add stomach to Filter</el-button>
+      <el-button @click="addInferiorVagus">Add inferior vagus to Filter (incorrect case)</el-button>
       <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
       <el-button @click="multiFacets">multiple facets</el-button>
       <el-button @click="neuronSearch">open neuron search</el-button>
@@ -187,6 +188,14 @@ export default {
         AND: true,
       })
     },
+    addInferiorVagus: function () {
+      this.$refs.sideBar.addFilter({
+        facet: 'Inferior vagus X ganglion',
+        term: 'Anatomical structure',
+        facetPropPath: 'anatomy.organ.category.name',
+        AND: true,
+      })
+    },
     addInvalidTerm: function () {
       this.$refs.sideBar.addFilter({
         facet: 'Invalid',

package/src/components/ConnectivityInfo.vue

@@ -2,7 +2,7 @@
   <div v-if="entry" class="main" v-loading="loading">
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
-      <div>
+      <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
             {{ capitalise(entry.title) }}
@@ -35,9 +35,6 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <div class="block" v-if="resources.length">
-          <external-resource-card :resources="resources"></external-resource-card>
-        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -199,8 +196,8 @@
         </el-button>
       </div>
 
-      <div v-if="connectivityError" class="connectivity-error-container">
-        <div class="connectivity-error">
+      <div class="connectivity-error-container">
+        <div class="connectivity-error" v-if="connectivityError">
           <strong v-if="connectivityError.errorConnectivities">
             {{ connectivityError.errorConnectivities }}
           </strong>
@@ -219,6 +216,10 @@
         />
       </template>
     </div>
+
+    <div class="content-container content-container-references" v-if="resources.length">
+      <external-resource-card :resources="resources" @references-loaded="onReferencesLoaded"></external-resource-card>
+    </div>
   </div>
 </template>
 
@@ -234,9 +235,13 @@ import {
   ElContainer as Container,
   ElIcon as Icon,
 } from 'element-plus'
-import ExternalResourceCard from './ExternalResourceCard.vue'
+
 import EventBus from './EventBus.js'
-import { CopyToClipboard, ConnectivityGraph } from '@abi-software/map-utilities';
+import {
+  CopyToClipboard,
+  ConnectivityGraph,
+  ExternalResourceCard,
+} from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
@@ -307,6 +312,7 @@ export default {
       connectivityError: null,
       timeoutID: undefined,
       graphViewLoaded: false,
+      updatedCopyContent: '',
     }
   },
   watch: {
@@ -319,9 +325,6 @@ export default {
     },
   },
   computed: {
-    updatedCopyContent: function () {
-      return this.getUpdateCopyContent();
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -421,7 +424,10 @@ export default {
       const name = data.map(t => t.label).join(', ');
       this.toggleConnectivityTooltip(name, {show: true});
     },
-    getUpdateCopyContent: function () {
+    onReferencesLoaded: function (references) {
+      this.updatedCopyContent = this.getUpdateCopyContent(references);
+    },
+    getUpdateCopyContent: function (references) {
       if (!this.entry) {
         return '';
       }
@@ -443,21 +449,6 @@ export default {
         contentArray.push(`<div>${this.provSpeciesDescription}</div>`);
       }
 
-      // PubMed URL
-      if (this.resources?.length) {
-        const pubmedContents = [];
-        this.resources.forEach((resource) => {
-          let pubmedContent = '';
-          if (resource.id === 'pubmed') {
-            pubmedContent += `<div><strong>PubMed URL:</strong></div>`;
-            pubmedContent += '\n';
-            pubmedContent += `<div><a href="${resource.url}">${resource.url}</a></div>`;
-          }
-          pubmedContents.push(pubmedContent);
-        });
-        contentArray.push(pubmedContents.join('\n\n<br>'));
-      }
-
       // entry.paths
       if (this.entry.paths) {
         contentArray.push(`<div>${this.entry.paths}</div>`);
@@ -513,6 +504,17 @@ export default {
         contentArray.push(transformedDestinations);
       }
 
+      // References
+      if (references) {
+        let contentString = `<div><strong>References</strong></div>`;
+        contentString += '\n';
+        const contentList = references.list
+          .map((item) => `<li>${item}</li>`)
+          .join('\n');
+        contentString += `<ul>${contentList}</ul>`;
+        contentArray.push(contentString);
+      }
+
       return contentArray.join('\n\n<br>');
     },
     toggleConnectivityTooltip: function (name, option) {
@@ -597,6 +599,7 @@ export default {
     },
   },
   mounted: function () {
+    this.updatedCopyContent = this.getUpdateCopyContent();
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -617,6 +620,11 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   gap: 1rem;
+
+  .title-content {
+    flex: 1 0 0%;
+    max-width: 85%;
+  }
 }
 
 .title {
@@ -922,7 +930,10 @@ export default {
 
 .title-buttons {
   display: flex;
+  flex: 1 0 0%;
+  max-width: 15%;
   flex-direction: row;
+  justify-content: end;
   gap: 0.5rem;
 
   :deep(.copy-clipboard-button) {
@@ -954,12 +965,18 @@ export default {
 
 .content-container-connectivity {
   position: relative;
+
+  &:not([style*="display: none"]) ~ .content-container-references {
+    margin-top: -1.25rem;
+  }
 }
 
 .connectivity-error-container {
   position: sticky;
   bottom: 0.5rem;
   width: 100%;
+  min-height: 31px; // placeholder
+  margin-top: -10px !important;
   display: flex;
   flex-direction: row;
   align-items: center;

package/src/components/SearchFilters.vue

@@ -15,6 +15,11 @@
         placement="bottom-start"
         :width="200"
         trigger="hover"
+        :teleported="false"
+        ref="cascadeTagsPopover"
+        :persistent="false"
+        popper-class="cascade-tags-popper"
+        @show="onCascadeTagsPopoverShown"
       >
         <template #default>
           <div class="el-tags-container">
@@ -59,14 +64,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 +97,7 @@
         v-model="numberShown"
         placeholder="10"
         @change="numberShownChanged($event)"
+        :teleported="false"
       >
         <el-option
           v-for="item in numberDatasetsShown"
@@ -168,6 +175,7 @@ export default {
       showFiltersText: true,
       cascadeSelected: [],
       cascadeSelectedWithBoolean: [],
+      filterTimeout: null,
       numberShown: 10,
       filters: [],
       facets: ['Species', 'Gender', 'Organ', 'Datasets'],
@@ -477,10 +485,18 @@ export default {
           filters = [];
         }
 
+        // timeout: add delay for filter checkboxes
+        if (this.filterTimeout) {
+          clearTimeout(this.filterTimeout);
+        }
+
         this.$emit('loading', true) // let sidebarcontent wait for the requests
-        this.$emit('filterResults', filters) // emit filters for apps above sidebar
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
-        this.cssMods() // update css for the cascader
+
+        this.filterTimeout = setTimeout(() => {
+          this.$emit('filterResults', filters) // emit filters for apps above sidebar
+          this.cssMods() // update css for the cascader
+        }, 600);
       }
     },
     //this fucntion is needed as we previously stored booleans in the array of event that
@@ -737,19 +753,25 @@ export default {
      */
     validateAndConvertFilterToHierarchical: function (filter) {
       if (filter && filter.facet && filter.term) {
+        // Convert terms to lower case.
+        // Flatmap gives us Inferior vagus X ganglion but the term in Algolia
+        // is Inferior vagus x ganglion (there are other cases as well)
+        const lowercase = filter.facet.toLowerCase()
         if (filter.facet2) {
           return filter // if it has a second term we will assume it is hierarchical and return it as is
         } else {
           for (const firstLayer of this.options) {
             if (firstLayer.value === filter.facetPropPath) {
               for (const secondLayer of firstLayer.children) {
-                if (secondLayer.label === filter.facet) {
+                if (secondLayer.label?.toLowerCase() === lowercase) {
                   // if we find a match on the second level, the filter will already be correct
+                  // Make sure the case matches the one from Algolia
+                  filter.facet = secondLayer.label
                   return filter
                 } else {
                   if (secondLayer.children && secondLayer.children.length > 0) {
                     for (const thirdLayer of secondLayer.children) {
-                      if (thirdLayer.label === filter.facet) {
+                      if (thirdLayer.label?.toLowerCase() === lowercase) {
                         // If we find a match on the third level, we need to switch facet1 to facet2
                         //   and populate facet1 with its parents label.
                         filter.facet2 = thirdLayer.label
@@ -782,6 +804,48 @@ export default {
       }
       return []
     },
+    onCascadeTagsPopoverShown: function () {
+      const cascadeTagsPopover = this.$refs.cascadeTagsPopover;
+      const fullscreenContainer = document.querySelector('.mapcontent');
+      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) {
+          cascadeTagsPopoverContentRef.style.zIndex = cascaderTagZIndex;
+
+          if (fullscreenContainer) {
+            fullscreenContainer.append(cascadeTagsPopoverContentRef);
+          } else {
+            document.body.append(cascadeTagsPopoverContentRef);
+          }
+
+          // Work around to fix the first time replacement position
+          window.dispatchEvent(new Event('resize'));
+        }
+      }
+    },
+    /**
+     * Move the cascader(panel) under map container
+     * so that it will work on fulscreen mode
+     */
+    replaceCascader: function () {
+      const fullscreenContainer = document.querySelector('.mapcontent');
+      const cascader = this.$refs.cascader;
+
+      if (cascader) {
+        const cascaderEl = cascader.contentRef;
+
+        if (fullscreenContainer) {
+          fullscreenContainer.append(cascaderEl);
+        } else {
+          document.body.append(cascaderEl);
+        }
+      }
+    },
   },
   mounted: function () {
     this.algoliaClient = markRaw(new AlgoliaClient(
@@ -796,6 +860,7 @@ export default {
       this.setCascader(this.entry.filterFacets)
       this.cssMods()
       this.$emit('cascaderReady')
+      this.replaceCascader();
     })
   },
 }
@@ -923,40 +988,9 @@ 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[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;
+.filters :deep(.el-popover .el-popper__arrow::before) {
+  background: #f3ecf6;
+  border-color: $app-primary-color;
 }
 </style>
 
@@ -1013,4 +1047,18 @@ export default {
   background-color: $app-primary-color;
   border-color: $app-primary-color;
 }
+
+.el-popover.cascade-tags-popper {
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  color: #303133 !important;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.el-popover.cascade-tags-popper .el-popper__arrow::before {
+  background: #f3ecf6;
+  border-color: $app-primary-color;
+}
 </style>

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"
@@ -98,7 +106,7 @@
                   </el-button>
                 </template>
                 <span v-if="savedSearchHistory.length > 1 && !item.saved">
-                  Please unsave one before adding another.
+                  Limit 2: Please remove a saved search before adding another.
                 </span>
                 <span v-else-if="item.saved">
                   Remove from saved searches.
@@ -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 {
@@ -435,6 +444,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 6px;
+  transform: translateZ(0);
 }
 
 .search-tag.el-tag {
@@ -539,6 +549,10 @@ export default {
     margin: 0;
   }
 }
+
+:deep(.search-history-dropdown__popper) {
+  position: fixed !important;
+}
 </style>
 
 <style lang="scss">
@@ -595,9 +609,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/components.d.ts

@@ -34,7 +34,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']

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

package/src/components/ExternalResourceCard.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="resource-container">
-    <template v-for="resource in resources" :key="resource.id">
-      <div class="resource">
-        <el-button
-          v-if="resource.id === 'pubmed'"
-          class="button"
-          id="open-pubmed-button"
-          :icon="ElIconNotebook"
-          @click="openUrl(resource.url)"
-        >
-          Open publications in PubMed
-        </el-button>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import {
-  Notebook as ElIconNotebook,
-} from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
-import { ElButton as Button } from 'element-plus'
-import EventBus from './EventBus'
-
-export default {
-  name: 'ExternalResourceCard',
-  components: {
-    Button,
-  },
-  props: {
-    resources: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data: function () {
-    return {
-      pubmeds: [],
-      pubmedIds: [],
-      ElIconNotebook: shallowRef(ElIconNotebook)
-    }
-  },
-  methods: {
-    capitalise: function (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
-    },
-    openUrl: function (url) {
-      EventBus.emit('open-pubmed-url', url);
-      window.open(url, '_blank')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.resource-container {
-  margin-top: 0.5em;
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.attribute-content {
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.el-link {
-  color: $app-primary-color;
-  text-decoration: none;
-  word-wrap: break-word;
-  &:hover,
-  &:focus {
-    color: $app-primary-color;
-  }
-}
-
-:deep(.el-carousel__button) {
-  background-color: $app-primary-color;
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.button {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-  font-size: 14px !important;
-  background-color: $app-primary-color;
-  color: #fff;
-  &:hover {
-    color: #fff !important;
-    background: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-  & + .button {
-    margin-top: 10px !important;
-    background-color: $app-primary-color;
-    color: #fff;
-  }
-}
-</style>