@abi-software/map-side-bar 2.9.2-beta.1 → 2.10.0-beta.0

package/src/components/SearchFilters.vue

@@ -56,45 +56,23 @@
             :collapse-tags="true"
             collapse-tags-tooltip
             :options="options"
-            :props="cascaderProps"
+            :props="props"
             @change="cascadeEvent($event)"
             @expand-change="cascadeExpandChange"
             :show-all-levels="true"
             popper-class="sidebar-cascader-popper"
           >
             <template #default="{ node, data }">
-              <div v-if="isFlatmapConnectionsFilterNode(node)">
-                <div class="sidebar-cascader-search el-input">
-                  <div class="el-input__wrapper">
-                    <input
-                      class="el-input__inner"
-                      :ref="'searchInput_' + node.pathValues[0]"
-                      :value="searchInputs[node.pathValues[0]]"
-                      @input="searchInputChange($event, node)"
-                      @focus="searchInputFocusToggle($event, true)"
-                      @blur="searchInputFocusToggle($event, false)"
-                      style="width: 100%"
-                      autocomplete="off"
-                      placeholder="Search"
-                    />
+              <el-row>
+                <el-col :span="4" v-if="hasLineStyles(data)">
+                  <div class="path-visual" :style="getLineStyles(data)"></div>
+                </el-col>
+                <el-col :span="20">
+                  <div :style="getBackgroundStyles(data)">
+                    {{ data.label }}
                   </div>
-                </div>
-              </div>
-              <div v-else>
-                <el-row>
-                  <el-col :span="4" v-if="hasLineStyles(data)">
-                    <div class="path-visual" :style="getLineStyles(data)"></div>
-                  </el-col>
-                  <el-col :span="20">
-                    <span v-if="isFlatmapConnectionsNode(node)" class="sr-only">
-                      {{ getNodeKey(node.value) }}
-                    </span>
-                    <div :style="getBackgroundStyles(data)">
-                      {{ data.label }}
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
+                </el-col>
+              </el-row>
             </template>
           </el-cascader>
           <div v-if="showFiltersText" class="filter-default-value">Filters</div>
@@ -212,7 +190,7 @@ export default {
       filters: [],
       facets: ['Species', 'Gender', 'Organ', 'Datasets'],
       numberDatasetsShown: ['10', '20', '50'],
-      cascaderProps: { multiple: true },
+      props: { multiple: true },
       options: [
         {
           value: 'Species',
@@ -221,7 +199,6 @@ export default {
         },
       ],
       presentTags:[],
-      searchInputs: {},
     }
   },
   setup() {
@@ -277,23 +254,6 @@ export default {
         )
       return value
     },
-    getNodeKey: function (nodeValue) {
-      return nodeValue ? nodeValue.split('>')[1] : '';
-    },
-    isFlatmapConnectionsNode: function (node) {
-      return (
-        node.pathValues[0].includes('flatmap.connectivity.source') &&
-        node.isLeaf
-      )
-    },
-    isFlatmapConnectionsFilterNode: function (node) {
-      return (
-        node.pathValues[0].includes('flatmap.connectivity.source') &&
-        node.pathLabels.includes('Filters') &&
-        node.isDisabled &&
-        node.isLeaf
-      )
-    },
     processOptions: function () {
       // create top level of options in cascader
       this.options.forEach((facet, i) => {
@@ -313,14 +273,6 @@ export default {
           })
         }
 
-        if (facet.key.includes('flatmap.connectivity.source')) {
-          this.options[i].children.unshift({
-            value: this.createCascaderItemValue('ConnectivityFilters'),
-            label: 'Filters',
-            disabled: true,
-          });
-        }
-
         // populate second level of options
         this.options[i].children.forEach((facetItem, j) => {
           // Format labels except funding program
@@ -329,17 +281,8 @@ export default {
               facetItem.label
             )
           }
-
-          // Use key as value for connectivity source filters
-          if (facetItem.key && facet.key.includes('flatmap.connectivity.source.')) {
-            const childKey = facetItem.key;
-            const parentKey = facet.key;
-            const key = childKey.replace(`${parentKey}.`, '');
-            this.options[i].children[j].value = this.createCascaderItemValue(facet.label, key);
-          } else {
-            this.options[i].children[j].value = this.createCascaderItemValue(facet.label, facetItem.label)
-          }
-
+          this.options[i].children[j].value =
+            this.createCascaderItemValue(facet.label, facetItem.label)
           if (
             this.options[i].children[j].children &&
             this.options[i].children[j].children.length > 0
@@ -446,17 +389,8 @@ export default {
       this.cascaderTags = {}
       this.presentTags = []
       event.map((item) => {
-        const { facet, facet2, term, tagLabel, facetPropPath } = item
-        let facetLabel = facet;
-
-        // Connectivity filter has different value and label,
-        // value is used for filter logic
-        // label is used for user interface (and this cascader tag is just user interface)
-        if (facetPropPath && facetPropPath.includes('flatmap.connectivity.source.') && tagLabel) {
-          facetLabel = tagLabel;
-        }
-
-        if (this.correctnessCheck.term.has(term) && this.correctnessCheck.facet.has(facetLabel)) {
+        const { facet, facet2, term } = item
+        if (this.correctnessCheck.term.has(term) && this.correctnessCheck.facet.has(facet)) {
           if (facet2) {
             if (this.correctnessCheck.facet2.has(facet2)) {
               if (term in this.cascaderTags) {
@@ -471,14 +405,11 @@ export default {
             // If 'cascaderTags' has key 'Anatomical structure',
             // it's value type will be Object (because it has nested facets),
             // in this case 'push' action will not available.
-            if (term in this.cascaderTags && term !== 'Anatomical structure') {
-              this.cascaderTags[term].push(facetLabel)
-            } else {
-              if (facet.toLowerCase() !== "show all") {
-                this.cascaderTags[term] = [facetLabel]
-              } else {
-                this.cascaderTags[term] = []
-              }
+            if (term in this.cascaderTags && term !== 'Anatomical structure')
+              this.cascaderTags[term].push(facet)
+            else {
+              if (facet.toLowerCase() !== "show all") this.cascaderTags[term] = [facet]
+              else this.cascaderTags[term] = []
             }
           }
         }
@@ -540,13 +471,6 @@ export default {
         event = this.showAllEventModifier(event)
 
         event = this.showAllEventModifierForAutoCheckAll(event)
-
-        const cascaderRef = this.$refs.cascader;
-        const checkedNodes = cascaderRef?.getCheckedNodes(true);
-        const filteredCheckedNodes = checkedNodes.filter((checkedNode) =>
-          checkedNode.checked && checkedNode.label !== 'Show all'
-        );
-
         /**
          * Move the new added event to the beginning
          * Otherwise, cascader will show different expand item
@@ -568,19 +492,12 @@ export default {
               this.findHierarachyStringAndBooleanString(fs)
             let { facet, facet2, term } =
               this.getFacetsFromHierarchyString(hString)
-
-            const foundNode = filteredCheckedNodes.find((checkedNode) =>
-              fs.join() === checkedNode.pathValues.join()
-            );
-            const tagLabel = foundNode ? foundNode.label : undefined;
-
             return {
               facetPropPath: fs[0],
               facet: facet,
               facet2: facet2,
               term: term,
               AND: bString, // for setting the boolean
-              tagLabel: tagLabel // for connectivity filter's cascader tag
             }
           })
 
@@ -601,19 +518,12 @@ export default {
               facet = facet2
               facetSubPropPath = 'anatomy.organ.name'
             }
-
-            const foundNode = filteredCheckedNodes.find((checkedNode) =>
-              fs.join() === checkedNode.pathValues.join()
-            );
-            const tagLabel = foundNode ? foundNode.label : undefined;
-
             return {
               facetPropPath: propPath,
               facet: facet,
               term: term,
               AND: bString, // for setting the boolean
               facetSubPropPath: facetSubPropPath, // will be used for filters if we are at the third level of the cascader
-              tagLabel: tagLabel // for connectivity filter's cascader tag
             }
           })
 
@@ -622,7 +532,7 @@ export default {
           clearTimeout(this.filterTimeout);
         }
 
-        this.$emit('loading', true) // let sidebarcontent wait for the requests
+        this.$emit('loading', true) // let dataset explorer wait for the requests
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
 
         this.filterTimeout = setTimeout(() => {
@@ -737,82 +647,8 @@ export default {
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event
-      if (this.__expandItem__) {
-        this.updateListFilters(this.__expandItem__[0])
-      }
-      this.updateListStyleOrder()
       this.cssMods()
     },
-    updateListStyleOrder: function () {
-      this.$nextTick(() => {
-        const cascaderRef = this.$refs.cascader;
-        const contentRef = cascaderRef?.contentRef;
-
-        if (contentRef) {
-          const menuList = contentRef.querySelectorAll('.el-cascader-menu__list');
-          if (menuList) {
-            menuList.forEach((ul) => {
-              const searchInput = ul.querySelector('.sidebar-cascader-search');
-
-              // order the list using CSS
-              // active items on top - defined in CSS under .cascader-menu-with-search
-              if (searchInput) {
-                ul.classList.add('cascader-menu-with-search');
-              } else {
-                ul.classList.remove('cascader-menu-with-search');
-              }
-            })
-          }
-        }
-      });
-    },
-    searchInputChange: function (event, node) {
-      event.preventDefault();
-      const { target } = event;
-      if (target) {
-        const value = target.value;
-        const expandItem = node.pathValues[0];
-
-        this.searchInputs[expandItem] = value;
-        this.updateListFilters(expandItem);
-      }
-    },
-    searchInputFocusToggle: function (event, option) {
-      const { target } = event;
-      if (!target) return;
-
-      const inputWrapper = target.closest('.el-input__wrapper');
-      if (option === true) {
-        inputWrapper.classList.add('is-focus');
-      } else {
-        inputWrapper.classList.remove('is-focus');
-      }
-    },
-    updateListFilters: function (expandItem) {
-      const searchValue = this.searchInputs[expandItem] || '';
-
-      this.$nextTick(() => {
-        const searchInputEl = this.$refs['searchInput_' + expandItem];
-        if (!searchInputEl) return;
-
-        const ul = searchInputEl.closest('.el-cascader-menu__list');
-        ul.querySelectorAll('.el-cascader-node').forEach((li, index) => {
-          // skip index:0 (search box), and index:1 (Show all)
-          if (index > 1) {
-            const content = li.querySelector('.el-cascader-node__label').textContent;
-            if (content.toLowerCase().includes(searchValue.toLowerCase())) {
-              li.classList.remove('hide');
-            } else {
-              li.classList.add('hide');
-            }
-          }
-        });
-
-        if (searchValue) {
-          searchInputEl.focus();
-        }
-      });
-    },
     numberShownChanged: function (event) {
       this.$emit('numberPerPage', parseInt(event))
     },
@@ -974,13 +810,7 @@ export default {
           for (const firstLayer of this.options) {
             if (firstLayer.value === filter.facetPropPath) {
               for (const secondLayer of firstLayer.children) {
-                // connectivity filters
-                if (filter.facetPropPath.includes('flatmap.connectivity.source.') && secondLayer.key) {
-                  const value = secondLayer.key.replace(`${filter.facetPropPath}.`, '');
-                  if (value.toLowerCase() === lowercase) {
-                    return filter
-                  }
-                } else if (secondLayer.label?.toLowerCase() === lowercase) {
+                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
@@ -1006,47 +836,33 @@ export default {
       return false
     },
     getHierarchicalValidatedFilters: function (filters) {
-      const result = []
-      const terms = []
-      const notFound = []
-
       if (filters) {
-        if (!this.cascaderIsReady) {
-          return {
-            result: filters,
-            notFound: notFound,
-          }
-        }
-
-        filters.forEach((filter) => {
-          const validatedFilter =
-            this.validateAndConvertFilterToHierarchical(filter)
-          if (validatedFilter) {
-            result.push(validatedFilter)
-            terms.push(validatedFilter.term)
-          } else {
-            // not found items
-            notFound.push(filter)
-          }
-        })
-
-        // make sure unused filter terms' show all checkbox is always checked
-        this.options.forEach((option)=>{
-          if (!terms.includes(option.label)) {
-            result.push({
-              facet: "Show all",
-              facetPropPath: option.key,
-              label: "Show all",
-              term: option.label
-            })
-          }
-        })
-      }
-
-      return {
-        result: result,
-        notFound: notFound,
+        if (this.cascaderIsReady) {
+          const result = []
+          const terms = []
+          filters.forEach((filter) => {
+            const validatedFilter =
+              this.validateAndConvertFilterToHierarchical(filter)
+            if (validatedFilter) {
+              result.push(validatedFilter)
+              terms.push(validatedFilter.term)
+            }
+          })
+          // make sure unused filter terms' show all checkbox is always checked
+          this.options.forEach((option)=>{
+            if (!terms.includes(option.label)) {
+              result.push({
+                facet: "Show all",
+                facetPropPath: option.key,
+                label: "Show all",
+                term: option.label
+              })
+            }
+          })
+          return result
+        } else return filters
       }
+      return []
     },
     hasLineStyles: function(item) {
       return 'colour' in item && item.colourStyle === 'line'
@@ -1070,16 +886,12 @@ export default {
     },
   },
   mounted: function () {
-    // in populateCascader function,
-    // algoliaClient run only when there are no this.entry.options
-    if (!this.entry.options) {
-      this.algoliaClient = markRaw(new AlgoliaClient(
-        this.envVars.ALGOLIA_ID,
-        this.envVars.ALGOLIA_KEY,
-        this.envVars.PENNSIEVE_API_LOCATION
-      ))
-      this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
-    }
+    this.algoliaClient = markRaw(new AlgoliaClient(
+      this.envVars.ALGOLIA_ID,
+      this.envVars.ALGOLIA_KEY,
+      this.envVars.PENNSIEVE_API_LOCATION
+    ))
+    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
     this.populateCascader().then(() => {
       this.cascaderIsReady = true
       this.checkShowAllBoxes()
@@ -1281,56 +1093,6 @@ export default {
   border-color: $app-primary-color;
 }
 
-.sidebar-cascader-popper .el-cascader-menu:last-child .el-cascader-node {
-  &.is-disabled {
-    border-bottom: 1px solid #e4e7ed;
-    padding-bottom: 0.5rem;
-    position: sticky;
-    top: 0.5rem;
-    background-color: white;
-    z-index: 20;
-    box-shadow: 0px -6px 0px 6px white;
-    cursor: default;
-
-    .el-checkbox.is-disabled {
-      display: none;
-    }
-
-    .el-cascader-node__label {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    // hide show all for connection filters
-    + .el-cascader-node {
-      display: none;
-    }
-  }
-
-  &.hide {
-    display: none;
-  }
-}
-
-.sidebar-cascader-popper .sidebar-cascader-search.el-input {
-  --el-input-focus-border-color: #{$app-primary-color};
-}
-
-.sidebar-cascader-popper .el-cascader-menu__list.cascader-menu-with-search {
-  display: flex;
-  flex-direction: column;
-
-  .el-cascader-node:nth-child(1),
-  .el-cascader-node:nth-child(2),
-  .el-cascader-node.is-active {
-    order: 1;
-  }
-
-  .el-cascader-node {
-    order: 2;
-  }
-}
-
 .filter-help-popover,
 .cascade-tags-popover {
   font-family: 'Asap', sans-serif;
@@ -1358,14 +1120,4 @@ export default {
   margin-right: 5px;
   display: inline-block;
 }
-
-.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
 </style>

package/src/components/SearchHistory.vue

@@ -237,7 +237,7 @@ export default {
 
       if (!isExistingItem) {
         const {label, longLabel} = this.searchHistoryItemLabel(search, filters);
-        if (label || longLabel) {
+        if (label || longLabel) {          
           const newItem = {
             filters: filters,
             search: search,
@@ -247,14 +247,14 @@ export default {
             id: generateUUID(),
             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(this.localStorageKey, JSON.stringify(this.searchHistory));
         }
@@ -355,7 +355,7 @@ export default {
 
       if (filters) {
         filterItems = filters.filter((filterItem) => filterItem.facet !== 'Show all');
-        filterLabels = filterItems.map((item) => item.tagLabel || item.facet);
+        filterLabels = filterItems.map((item) => item.facet);
       }
 
       if (label && filterItems.length) {
@@ -365,7 +365,7 @@ export default {
       }
 
       if (!label && filterItems.length) {
-        label = filterItems[0].tagLabel || filterItems[0].facet;
+        label = filterItems[0].facet;
 
         if (filterItems.length > 1) {
           longLabel += `${filterLabels.join(', ')}`;

package/src/components/SideBar.vue

@@ -50,12 +50,11 @@
                 :envVars="envVars"
                 :connectivityEntry="connectivityEntry"
                 :availableAnatomyFacets="availableAnatomyFacets"
-                :connectivityFilterOptions="filterOptions"
                 @filter-visibility="$emit('filter-visibility', $event)"
+                :connectivityFilterOptions="filterOptions"
                 :showVisibilityFilter="showVisibilityFilter"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged(tab.id, $event)"
-                @connectivity-explorer-reset="onConnectivityExplorerReset"
                 @show-connectivity="showConnectivity"
                 @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-hovered="onConnectivityHovered"
@@ -64,7 +63,7 @@
               />
             </template>
             <template v-else>
-              <SidebarContent
+              <DatasetExplorer
                 class="sidebar-content-container"
                 v-show="tab.id === activeTabId"
                 :contextCardEntry="tab.contextCard"
@@ -88,7 +87,7 @@ import {
 } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
-import SidebarContent from './SidebarContent.vue'
+import DatasetExplorer from './DatasetExplorer.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
@@ -99,7 +98,7 @@ import ConnectivityExplorer from './ConnectivityExplorer.vue'
  */
 export default {
   components: {
-    SidebarContent,
+    DatasetExplorer,
     Tabs,
     ElIconArrowLeft,
     ElIconArrowRight,
@@ -216,12 +215,6 @@ export default {
         this.activeAnnotationData = data;
       }
     },
-    /**
-     * This event is emitted after clicking reset button in connectivity explorer
-     */
-    onConnectivityExplorerReset: function (payload) {
-      this.$emit('connectivity-explorer-reset', payload);
-    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds

package/src/components/index.js

@@ -3,6 +3,3 @@ import SideBar from "./SideBar.vue"
 export {
   SideBar
 };
-
-
-

package/src/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
+    DatasetExplorer: typeof import('./components/DatasetExplorer.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
@@ -44,7 +45,6 @@ declare module 'vue' {
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
-    SidebarContent: typeof import('./components/SidebarContent.vue')['default']
     Tabs: typeof import('./components/Tabs.vue')['default']
   }
   export interface ComponentCustomProperties {