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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.3-beta.0",
+  "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"
@@ -9,14 +9,30 @@
           @click="search(item)"
           size="large"
         >
-          {{ item.label }}
+          <template v-if="item.longLabel">
+            <el-popover
+              width="auto"
+              trigger="hover"
+              :show-after="200"
+              :persistent="false"
+              popper-class="popover-dropdown"
+            >
+              <template #reference>
+                {{ item.label }}
+              </template>
+              {{ item.longLabel }}
+            </el-popover>
+          </template>
+          <template v-else>
+            {{ item.label }}
+          </template>
         </el-tag>
       </template>
     </div>
     <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">
@@ -25,14 +41,37 @@
       </span>
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item v-for="(item, i) in searchHistory">
-            <div>{{ item.label }}</div>
+          <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>
+                    <span class="dropdown-clickable-item" @click="search(item)">
+                      {{ item.label }}
+                    </span>
+                  </template>
+                  {{ item.longLabel }}
+                </el-popover>
+              </template>
+              <template v-else>
+                <span class="dropdown-clickable-item" @click="search(item)">
+                  {{ item.label }}
+                </span>
+              </template>
+            </div>
             <div>
               <el-popover
                 width="auto"
                 trigger="hover"
                 :teleported="true"
-                :show-after="100"
+                :show-after="200"
+                :persistent="false"
                 popper-class="popover-dropdown"
               >
                 <template #reference>
@@ -41,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>
@@ -60,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>
@@ -87,18 +141,13 @@
 import {
   ElTag as Tag,
   ElSelect as Select,
-  ElDropdown as Dropdown,
-  ElIcon as Icon,
+  ElDropdown,
+  ElIcon,
 } from 'element-plus'
 
 import EventBus from './EventBus.js'
 
-// remove duplicates by stringifying the objects
-const removeDuplicates = function (arrayOfAnything) {
-  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
-    JSON.parse(e)
-  )
-}
+const MAX_SEARCH_HISTORY = 12;
 
 function generateUUID() {
   const arr = new Uint8Array(16);
@@ -148,58 +197,164 @@ export default {
       localStorage.removeItem('sparc.science-sidebar-search-history')
       this.searchHistory = []
     },
-    addSearchToHistory(filters = [], search) {
+    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
-      let searchHistory = JSON.parse(
-        localStorage.getItem('sparc.science-sidebar-search-history')
-      )
-      if (searchHistory) {
-        searchHistory.push({
+
+      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);
+        const newItem = {
           filters: filters,
           search: search,
           saved: false,
-          label: this.searchHistoryItemLabel(search, filters),
+          label: label,
+          longLabel: longLabel,
           id: generateUUID(),
-        });
-        this.searchHistory = removeDuplicates(searchHistory)
+          updated: (new Date()).getTime(),
+        };
+
+        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',
           JSON.stringify(this.searchHistory)
-        )
-      } else {
-        localStorage.setItem(
-          'sparc.science-sidebar-search-history',
-          JSON.stringify([{
-            filters: filters,
-            search: search,
-            saved: false,
-            label: this.searchHistoryItemLabel(search, filters),
-            id: generateUUID(),
-          }])
-        )
+        );
+      }
+    },
+    /**
+     * 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) {
-          item['label'] = this.searchHistoryItemLabel(item.search, item.filters);
+          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;
         }
-      });
-      this.searchHistory = this.searchHistory.sort((a, b) => {
-        if (a.saved > b.saved) {
-          return -1;
-        }
-        if (a.saved < b.saved) {
-          return 1;
+
+        if (!item.updated) {
+          item['updated'] = (new Date()).getTime();
         }
-        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(
         'sparc.science-sidebar-search-history',
         JSON.stringify(this.searchHistory)
@@ -209,18 +364,38 @@ export default {
       this.$emit('search', item)
     },
     searchHistoryItemLabel: function (search, filters) {
-      let label = search;
+      let label = search ? `"${search.trim()}"` : '';
+      let longLabel = '';
       let filterItems = [];
+      let filterLabels = [];
 
       if (filters) {
         filterItems = filters.filter((filterItem) => filterItem.facet !== 'Show all');
+        filterLabels = filterItems.map((item) => item.facet2 || item.facet);
+      }
+
+      if (label && filterItems.length) {
+        longLabel += label;
+        longLabel += `, ${filterLabels.join(', ')}`;
+        label += ` (+${filterItems.length})`;
+      }
+
+      if (!label && filterItems.length) {
+        label = filterItems[0].facet;
+
+        if (filterItems.length > 1) {
+          longLabel += `${filterLabels.join(', ')}`;
+          label += ` (+${filterItems.length - 1})`;
+        }
       }
 
       if (!label) {
-        label = filterItems.length ? filterItems[0].facet : 'Unknown search';
+        label = 'Unknown search';
+      } else if (label.length > 15 && !longLabel) {
+        longLabel = label;
       }
 
-      return label;
+      return {label, longLabel};
     },
     toggleSavedSearch: function (item) {
       this.searchHistory.forEach((_item) => {
@@ -264,15 +439,16 @@ 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;
 
-  .el-tag__content {
+  :deep(.el-tag__content) {
     max-width: 15ch;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 24px;
   }
 }
 
@@ -300,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 {
@@ -334,6 +509,14 @@ export default {
     overflow: hidden;
   }
 
+  .dropdown-clickable-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $app-primary-color;
+    }
+  }
+
   + .el-dropdown-menu__item {
     &::before {
       content: "";
@@ -348,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 {
@@ -359,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;
@@ -371,16 +554,49 @@ 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;
   }
 }
 
-.el-popper.popover-dropdown {
+.el-popover.el-popper.popover-dropdown {
   padding: 4px 10px;
-  min-width: max-content;
+  width: max-content;
+  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;