@abi-software/map-side-bar 2.5.3-beta.1 → 2.5.3-beta.10

package/package.json

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

package/src/components/ConnectivityInfo.vue

@@ -81,7 +81,7 @@
       </div>
     </div>
 
-    <div class="content-container content-container-connectivity" v-if="activeView === 'listView'">
+    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -209,13 +209,15 @@
       </div>
     </div>
 
-    <div class="content-container" v-if="activeView === 'graphView'">
-      <connectivity-graph
-        :entry="entry.featureId[0]"
-        :mapServer="envVars.FLATMAPAPI_LOCATION"
-        @tap-node="onTapNode"
-        ref="connectivityGraphRef"
-      />
+    <div class="content-container" v-show="activeView === 'graphView'">
+      <template v-if="graphViewLoaded">
+        <connectivity-graph
+          :entry="entry.featureId[0]"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          @tap-node="onTapNode"
+          ref="connectivityGraphRef"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -304,6 +306,7 @@ export default {
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,
+      graphViewLoaded: false,
     }
   },
   watch: {
@@ -406,13 +409,11 @@ export default {
     switchConnectivityView: function (val) {
       this.activeView = val;
 
-      if (val === 'graphView') {
-        const connectivityGraphRef = this.$refs.connectivityGraphRef;
-        if (connectivityGraphRef && connectivityGraphRef.$el) {
-          connectivityGraphRef.$el.scrollIntoView({
-            behavior: 'smooth',
-          });
-        }
+      if (val === 'graphView' && !this.graphViewLoaded) {
+        // to load the connectivity graph only after the container is in view
+        this.$nextTick(() => {
+          this.graphViewLoaded = true;
+        });
       }
     },
     onTapNode: function (data) {

package/src/components/SearchFilters.vue

@@ -168,6 +168,7 @@ export default {
       showFiltersText: true,
       cascadeSelected: [],
       cascadeSelectedWithBoolean: [],
+      filterTimeout: null,
       numberShown: 10,
       filters: [],
       facets: ['Species', 'Gender', 'Organ', 'Datasets'],
@@ -477,10 +478,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
+        }, 400);
       }
     },
     //this fucntion is needed as we previously stored booleans in the array of event that
@@ -1008,6 +1017,8 @@ export default {
 
 .sidebar-cascader-popper .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  --el-checkbox-checked-bg-color: #{$app-primary-color};
+  --el-checkbox-checked-input-border-color: #{$app-primary-color};
   background-color: $app-primary-color;
   border-color: $app-primary-color;
 }

package/src/components/SearchHistory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="history-container" v-if="searchHistory.length">
     <div class="saved-search-history" v-if="savedSearchHistory.length">
-      <template v-for="(item, i) in savedSearchHistory">
+      <template v-for="(item, i) in savedSearchHistory" :key="item.id">
         <el-tag
           class="search-tag"
           v-if="i < 2"
@@ -13,6 +13,8 @@
             <el-popover
               width="auto"
               trigger="hover"
+              :show-after="200"
+              :persistent="false"
               popper-class="popover-dropdown"
             >
               <template #reference>
@@ -30,7 +32,7 @@
     <div v-else>
       <span class="empty-saved-search">No Saved Searches</span>
     </div>
-    <el-dropdown trigger="click" :max-height="350" :hide-on-click="false">
+    <el-dropdown trigger="click" :hide-on-click="false">
       <span class="el-dropdown-select">
         Search history
         <el-icon class="el-icon--right">
@@ -39,22 +41,28 @@
       </span>
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item v-for="(item, i) in searchHistory">
+          <el-dropdown-item v-for="item in searchHistory" :key="item.id">
             <div>
               <template v-if="item.longLabel">
                 <el-popover
                   width="auto"
                   trigger="hover"
+                  :show-after="200"
+                  :persistent="false"
                   popper-class="popover-dropdown"
                 >
                   <template #reference>
-                    {{ item.label }}
+                    <span class="dropdown-clickable-item" @click="search(item)">
+                      {{ item.label }}
+                    </span>
                   </template>
                   {{ item.longLabel }}
                 </el-popover>
               </template>
               <template v-else>
-                {{ item.label }}
+                <span class="dropdown-clickable-item" @click="search(item)">
+                  {{ item.label }}
+                </span>
               </template>
             </div>
             <div>
@@ -62,7 +70,8 @@
                 width="auto"
                 trigger="hover"
                 :teleported="true"
-                :show-after="100"
+                :show-after="200"
+                :persistent="false"
                 popper-class="popover-dropdown"
               >
                 <template #reference>
@@ -71,8 +80,20 @@
                     :disabled="savedSearchHistory.length > 1 && !item.saved"
                   >
                     <el-icon color="#8300BF">
-                      <el-icon-star-filled v-if="item.saved" />
-                      <el-icon-star v-else />
+                      <template v-if="item.saved">
+                        <svg
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"></path>
+                        </svg>
+                      </template>
+                      <template v-else>
+                        <svg
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"></path>
+                        </svg>
+                      </template>
                     </el-icon>
                   </el-button>
                 </template>
@@ -90,11 +111,14 @@
                 width="auto"
                 trigger="hover"
                 :teleported="true"
-                :show-after="100"
+                :show-after="200"
+                :persistent="false"
                 popper-class="popover-dropdown"
               >
                 <template #reference>
-                  <el-button circle text size="small" @click="removeFromSavedSearch(item)">
+                  <el-button circle text size="small"
+                    @click="removeFromSavedSearch(item)"
+                  >
                     <el-icon color="#8300BF">
                       <el-icon-delete />
                     </el-icon>
@@ -117,12 +141,14 @@
 import {
   ElTag as Tag,
   ElSelect as Select,
-  ElDropdown as Dropdown,
-  ElIcon as Icon,
+  ElDropdown,
+  ElIcon,
 } from 'element-plus'
 
 import EventBus from './EventBus.js'
 
+const MAX_SEARCH_HISTORY = 12;
+
 function generateUUID() {
   const arr = new Uint8Array(16);
   window.crypto.getRandomValues(arr);
@@ -171,13 +197,50 @@ export default {
       localStorage.removeItem('sparc.science-sidebar-search-history')
       this.searchHistory = []
     },
+    sortFilters(a, b) {
+      return a.facetPropPath.localeCompare(b.facetPropPath);
+    },
+    // Sort by saved and updated
+    sortSearchHistory(a, b) {
+      if (a.saved !== b.saved) {
+        return b.saved - a.saved;
+      }
+      if (a.updated !== b.updated) {
+        return b.updated - a.updated;
+      }
+      return 0;
+    },
+    formatFilters(filterItem) {
+      // because filters do not work correctly with facet2
+      if (filterItem.facet2) {
+        filterItem.facet = filterItem.facet2;
+        delete filterItem.facet2;
+      }
+      return filterItem;
+    },
     addSearchToHistory(filters = [], search = '') {
       search = search.trim() // remove whitespace
 
-      const isExistingItem = this.searchHistory.some((item) => (
-        item.search === search &&
-        JSON.stringify(item.filters) === JSON.stringify(filters)
-      ));
+      const isExistingItem = this.searchHistory.some((item) => {
+        let historyFilters = item.filters;
+        let newFilters = filters;
+
+        // make all filters same format
+        historyFilters.forEach((filter) => this.formatFilters(filter));
+        newFilters.forEach((filter) => this.formatFilters(filter));
+
+        // sort filters (to check duplicates in string format)
+        historyFilters = historyFilters.sort(this.sortFilters);
+        newFilters = newFilters.sort(this.sortFilters);
+
+        const historyFiltersString = JSON.stringify(historyFilters);
+        const newFiltersString = JSON.stringify(newFilters);
+
+        return (
+          item.search === search &&
+          historyFiltersString === newFiltersString
+        );
+      });
 
       if (!isExistingItem) {
         const {label, longLabel} = this.searchHistoryItemLabel(search, filters);
@@ -193,6 +256,11 @@ export default {
 
         this.searchHistory.push(newItem);
 
+        this.searchHistory = this.searchHistory.sort(this.sortSearchHistory);
+
+        // trim search history to 12 items
+        this.trimSearchHistory();
+
         // Save new data
         localStorage.setItem(
           'sparc.science-sidebar-search-history',
@@ -200,35 +268,91 @@ export default {
         );
       }
     },
+    /**
+     * Remove the duplicate items in search history.
+     */
+    removeDuplicateSearchHistory: function () {
+      const keys = [];
+      const duplicateItemIDs = [];
+
+      this.searchHistory.forEach((item) => {
+        const key = `${item.search}-${JSON.stringify(item.filters)}`;
+        const existingItem = keys.find(k => k.key === key);
+        // duplicate item
+        if (existingItem) {
+          // if current item is saved item
+          // add the other item into duplicates
+          if (item.saved) {
+            duplicateItemIDs.push(existingItem.id);
+          } else {
+            duplicateItemIDs.push(item.id);
+          }
+        } else {
+          keys.push({
+            id: item.id,
+            key: key
+          });
+        }
+      });
+
+      if (duplicateItemIDs.length) {
+        this.searchHistory = this.searchHistory.filter((item) => !duplicateItemIDs.includes(item.id));
+      }
+    },
+    /**
+     * Function to trim search history to maximum items,
+     */
+    trimSearchHistory: function () {
+      // since saved has max 2
+      // remove extra from unsaved
+      if (this.searchHistory.length > MAX_SEARCH_HISTORY) {
+        const savedItems = this.searchHistory.filter((item) => item.saved);
+        const unsavedItems = this.searchHistory.filter((item) => !item.saved);
+        const extra = MAX_SEARCH_HISTORY - this.searchHistory.length;
+
+        this.searchHistory = [
+          ...savedItems,
+          ...unsavedItems.slice(0, extra),
+        ];
+      }
+    },
     updateSearchHistory: function () {
       // Update for missing attributes
       this.searchHistory.forEach((item) => {
         if (!item.id) {
           item['id'] = generateUUID();
         }
+
         if (!item.label) {
           const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters);
           item['label'] = label;
           item['longLabel'] = longLabel;
         }
+
+        // make all filters same format
+        item.filters.forEach((filter) =>
+          this.formatFilters(filter)
+        );
+
+        // sort filters (to check duplicates in string format)
+        item.filters = item.filters.sort(this.sortFilters);
+
         if (!item.saved) {
           item['saved'] = false;
         }
+
         if (!item.updated) {
           item['updated'] = (new Date()).getTime();
         }
       });
 
-      // Sort by saved and updated
-      this.searchHistory = this.searchHistory.sort((a, b) => {
-        if (a.saved !== b.saved) {
-          return b.saved - a.saved;
-        }
-        if (a.updated !== b.updated) {
-          return a.updated - b.updated;
-        }
-        return 0;
-      });
+      this.searchHistory = this.searchHistory.sort(this.sortSearchHistory);
+
+      // check and remove duplicates
+      this.removeDuplicateSearchHistory();
+
+      // trim search history to 12 items
+      this.trimSearchHistory();
 
       // Save updated data
       localStorage.setItem(
@@ -315,7 +439,7 @@ export default {
 
 .search-tag.el-tag {
   margin: 0;
-  cursor: pointer;
+  cursor: pointer !important;
   background: #f9f2fc!important;
   border-color: $app-primary-color!important;
   color:$app-primary-color!important;
@@ -324,6 +448,7 @@ export default {
     max-width: 15ch;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 24px;
   }
 }
 
@@ -351,7 +476,6 @@ export default {
   transition: var(--el-transition-duration);
   transform: translateZ(0);
   box-shadow: 0 0 0 1px var(--el-border-color) inset;
-  cursor: pointer;
 }
 
 .el-dropdown-select {
@@ -385,6 +509,14 @@ export default {
     overflow: hidden;
   }
 
+  .dropdown-clickable-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $app-primary-color;
+    }
+  }
+
   + .el-dropdown-menu__item {
     &::before {
       content: "";
@@ -399,8 +531,8 @@ export default {
   &:hover,
   &:focus,
   &:active {
-    color: inherit;
-    background-color: var(--el-bg-color-page);
+    color: inherit !important;
+    background-color: var(--el-fill-color-light) !important;
   }
 
   i {
@@ -410,7 +542,7 @@ export default {
 </style>
 
 <style lang="scss">
-.el-dropdown__popper {
+.el-popper.el-dropdown__popper {
   font-family: Asap;
   font-size: 14px;
   font-weight: 400;
@@ -422,8 +554,38 @@ export default {
   min-width: 180px;
   width: fit-content;
 
-  .el-button + .el-button {
-    margin: 0;
+  .el-button {
+    background-color: transparent !important;
+    transition: all .25s ease;
+
+    > span {
+      pointer-events: none;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: transparent !important;
+      box-shadow: none !important;
+      border: 0 none !important;
+    }
+
+    &:not([disabled]) {
+      &:hover,
+      &:focus {
+        background-color: #f3e6f9 !important;
+      }
+    }
+
+    + .el-button {
+      margin: 0;
+    }
+  }
+
+  // element plus's dropdown max-height has problem
+  .el-dropdown__list {
+    max-height: 350px;
+    overflow-y: auto;
+    scrollbar-width: thin;
   }
 }
 
@@ -433,6 +595,8 @@ export default {
   max-width: 240px;
   font-family: Asap;
   font-size: 12px;
+  word-break: break-word;
+  text-align: left;
   color: inherit;
   background: #f3ecf6 !important;
   border: 1px solid $app-primary-color;

package/src/components/SidebarContent.vue

@@ -173,7 +173,7 @@ export default {
       this.results = []
       this.loadingCards = false
     },
-    openSearch: function (filter, search = '') {
+    openSearch: function (filter, search = '', option = { withSearch: true }) {
       this.searchInput = search
       this.resetPageNavigation()
       //Proceed normally if cascader is ready
@@ -192,14 +192,16 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes()
           this.resetSearch()
         } else if (this.filter) {
-          this.searchAlgolia(this.filter, search)
+          if (option.withSearch) {
+            this.searchAlgolia(this.filter, search)
+          }
           this.$refs.filtersRef.setCascader(this.filter)
         }
       } else {
         //cascader is not ready, perform search if no filter is set,
         //otherwise waith for cascader to be ready
         this.filter = filter
-        if (!filter || filter.length == 0) {
+        if ((!filter || filter.length == 0) && option.withSearch) {
           this.searchAlgolia(this.filter, search)
         }
       }
@@ -224,13 +226,12 @@ export default {
       this.openSearch(this.filter, this.searchInput)
     },
     clearSearchClicked: function () {
-      this.searchInput = ''
-      this.resetPageNavigation()
-      this.searchAlgolia(this.filters, this.searchInput)
-      this.$refs.searchHistory.selectValue = 'Search history'
+      this.searchInput = '';
+      this.searchAndFilterUpdate();
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
+        this.searchInput = this.searchInput.trim();
         this.searchAndFilterUpdate();
       }
     },
@@ -242,9 +243,23 @@ export default {
         type: 'filter-update',
       })
     },
+    /**
+     * Transform filters for third level items to perform search
+     * because cascader keeps adding it back.
+     */
+    transformFiltersBeforeSearch: function (filters) {
+      return filters.map((filter) => {
+        if (filter.facet2) {
+          filter.facet = filter.facet2;
+          delete filter.facet2;
+        }
+        return filter;
+      });
+    },
     searchAndFilterUpdate: function () {
       this.resetPageNavigation();
-      this.searchAlgolia(this.filters, this.searchInput);
+      const transformedFilters = this.transformFiltersBeforeSearch(this.filters);
+      this.searchAlgolia(transformedFilters, this.searchInput);
       this.$refs.searchHistory.selectValue = 'Search history';
       // save history only if there has value
       if (this.filters.length || this.searchInput?.trim()) {
@@ -445,7 +460,9 @@ export default {
     searchHistorySearch: function (item) {
       this.searchInput = item.search
       this.filters = item.filters
-      this.openSearch(item.filters, item.search)
+      this.searchAndFilterUpdate();
+      // withSearch: false to prevent algoliaSearch in openSearch
+      this.openSearch([...item.filters], item.search, { withSearch: false });
     },
   },
   mounted: function () {
@@ -493,6 +510,9 @@ export default {
   height: 100%;
   flex-flow: column;
   display: flex;
+  border: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .step-item {
@@ -505,15 +525,16 @@ export default {
   width: 298px !important;
   height: 40px;
   padding-right: 14px;
-  align-items: left;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
 }
 
 .header {
-  border: solid 1px #292b66;
-  background-color: #292b66;
-  text-align: left;
-
   .el-button {
+    font-family: inherit;
+
     &:hover,
     &:focus {
       background: $app-primary-color;
@@ -566,6 +587,7 @@ export default {
   background-color: #ffffff;
   overflow-y: scroll;
   scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
 }
 
 .content :deep(.el-loading-spinner .path) {

package/src/components.d.ts

@@ -25,8 +25,6 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
-    ElIconStar: typeof import('@element-plus/icons-vue')['Star']
-    ElIconStarFilled: typeof import('@element-plus/icons-vue')['StarFilled']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
     ElInput: typeof import('element-plus/es')['ElInput']