@abi-software/map-side-bar 2.0.0-response.1 → 2.0.0

package/src/components/SearchFilters.vue

@@ -1,105 +1,146 @@
 <template>
   <div class="filters">
-    <map-svg-sprite-color />
+    <MapSvgSpriteColor />
+    <div class="cascader-tag" v-if="presentTags.length > 0">
+      <el-tag
+        class="ml-2"
+        type="info"
+        closable
+        @close="cascadeTagClose(presentTags[0])"
+      >
+        {{ presentTags[0] }}
+      </el-tag>
+      <el-popover
+        v-if="presentTags.length > 1"
+        placement="bottom-start"
+        :width="200"
+        trigger="hover"
+      >
+        <template #default>
+          <div class="el-tags-container">
+            <el-tag
+              v-for="(tag, i) in presentTags.slice(1)"
+              :key="i"
+              class="ml-2"
+              type="info"
+              closable
+              @close="cascadeTagClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+          </div>
+        </template>
+        <template #reference>
+          <div class="el-tags-container">
+            <el-tag
+              v-if="presentTags.length > 1"
+              class="ml-2"
+              type="info"
+            >
+              +{{ presentTags.length - 1 }}
+            </el-tag>
+          </div>
+        </template>
+      </el-popover>
+    </div>
     <transition name="el-zoom-in-top">
-      <span v-show="showFilters" class="search-filters transition-box">
-        <custom-cascader
+      <span v-show="showFilters" v-loading="!cascaderIsReady" class="search-filters transition-box">
+        <el-cascader
           class="cascader"
           ref="cascader"
           v-model="cascadeSelected"
-          placeholder
+          size="large"
+          placeholder=" "
           :collapse-tags="true"
+          collapse-tags-tooltip
           :options="options"
           :props="props"
           @change="cascadeEvent($event)"
           @expand-change="cascadeExpandChange"
-          :show-all-levels="false"
-          :append-to-body="false"
-          @tags-changed="tagsChangedCallback"
-        ></custom-cascader>
-        <div v-if="showFiltersText" class="filter-default-value">
-          Filters
-        </div>
+          :show-all-levels="true"
+          popper-class="sidebar-cascader-popper"
+        />
+        <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
+          :append-to-body="false"
           popper-class="popover"
-          >
-          <map-svg-icon slot="reference" icon="help" class="help"/>
-          <div >
-            <strong>Within categories:</strong> OR 
-            <br/>
+        >
+          <template #reference>
+            <MapSvgIcon icon="help" class="help" />
+          </template>
+          <div>
+            <strong>Within categories:</strong> OR
+            <br />
             example: 'heart' OR 'colon'
-            <br/>
-            <br/>
+            <br />
+            <br />
             <strong>Between categories:</strong> AND
-            <br/>
+            <br />
             example: 'rat' AND 'lung'
           </div>
         </el-popover>
-        
       </span>
     </transition>
-
-    <el-select
-      class="number-shown-select"
-      v-model="numberShown"
-      placeholder="10"
-      @change="numberShownChanged($event)"
-    >
-      <el-option
-        v-for="item in numberDatasetsShown"
-        :key="item"
-        :label="item"
-        :value="item"
-      ></el-option>
-    </el-select>
-    <span class="dataset-results-feedback">{{ this.numberOfResultsText }}</span>
+    <div class="dataset-shown">
+      <span class="dataset-results-feedback">{{ numberOfResultsText }}</span>
+      <el-select
+        class="number-shown-select"
+        v-model="numberShown"
+        placeholder="10"
+        @change="numberShownChanged($event)"
+      >
+        <el-option
+          v-for="item in numberDatasetsShown"
+          :key="item"
+          :label="item"
+          :value="item"
+        ></el-option>
+      </el-select>
+    </div>
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Option, Select, Popover } from "element-ui";
-import CustomCascader from "./Cascader";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-import speciesMap from "./species-map";
+import { markRaw } from 'vue'
+import {
+  ElOption as Option,
+  ElSelect as Select,
+  ElPopover as Popover,
+  ElCascader as Cascader,
+} from 'element-plus'
+import speciesMap from './species-map.js'
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
+import '@abi-software/svg-sprite/dist/style.css'
 
-import {AlgoliaClient} from "../algolia/algolia.js";
-import {facetPropPathMapping} from "../algolia/utils.js";
-
-locale.use(lang);
-Vue.use(Option);
-Vue.use(Select);
-Vue.use(Popover)
+import { AlgoliaClient } from '../algolia/algolia.js'
+import { facetPropPathMapping } from '../algolia/utils.js'
 
 const capitalise = function (txt) {
-  return txt.charAt(0).toUpperCase() + txt.slice(1);
-};
+  return txt.charAt(0).toUpperCase() + txt.slice(1)
+}
 
 const convertReadableLabel = function (original) {
-  const name = original.toLowerCase();
+  const name = original.toLowerCase()
   if (speciesMap[name]) {
-    return capitalise(speciesMap[name]);
+    return capitalise(speciesMap[name])
   } else {
-    return capitalise(name);
+    return capitalise(name)
   }
-};
-
-
+}
 
 export default {
-  name: "SearchFilters",
+  name: 'SearchFilters',
   components: {
-    CustomCascader,
     MapSvgIcon,
     MapSvgSpriteColor,
+    Option,
+    Select,
+    Popover,
+    Cascader
   },
   props: {
     /**
@@ -109,12 +150,7 @@ export default {
     entry: Object,
     envVars: {
       type: Object,
-      default: ()=>{}
-    },
-  },
-  inject: {
-    'alternateSearch' : {
-      default: undefined,
+      default: () => {},
     },
   },
   data: function () {
@@ -129,152 +165,375 @@ export default {
       showFilters: true,
       showFiltersText: true,
       cascadeSelected: [],
-      cascadeSelectedWithBoolean: [], 
+      cascadeSelectedWithBoolean: [],
       numberShown: 10,
       filters: [],
-      numberDatasetsShown: ["10", "20", "50"],
+      facets: ['Species', 'Gender', 'Organ', 'Datasets'],
+      numberDatasetsShown: ['10', '20', '50'],
       props: { multiple: true },
       options: [
         {
-          value: "Species",
-          label: "Species",
+          value: 'Species',
+          label: 'Species',
           children: [{}],
         },
       ],
-    };
+      presentTags:[],
+    }
+  },
+  setup() {
+    const cascaderTags = markRaw({});
+    const correctnessCheck = markRaw({
+      term: new Set(),
+      facet: new Set(),
+      facet2: new Set()
+    });
+    return { cascaderTags, correctnessCheck }
   },
   computed: {
     numberOfResultsText: function () {
-      return `${this.entry.numberOfHits} results | Showing`;
+      return `${this.entry.numberOfHits} results | Showing`
     },
   },
   methods: {
-    createCascaderItemValue: function (term, facet) {
-      if (facet) return term + ">" + facet;
-      else return term;
-    },
-    populateCascaderOptions: function(data) {
-      this.options = data;
-      // create top level of options in cascader
-      this.options.forEach((facet, i) => {
-        this.options[i].label = convertReadableLabel(facet.label);
-        this.options[i].value = this.createCascaderItemValue(
-          facet.key,
-          undefined
-        );
-
-        // put "Show all" as first option
-        this.options[i].children.unshift({
-          value: this.createCascaderItemValue("Show all"),
-          label: "Show all",
-        });
-
-        // populate second level of options 
-        this.options[i].children.forEach((facetItem, j) => {
-          this.options[i].children[j].label = convertReadableLabel(
-            facetItem.label
-          );
-          this.options[i].children[j].value =
-            this.createCascaderItemValue(facet.label, facetItem.label);
-        });
-      });
+    createCascaderItemValue: function (
+      term,
+      facet1 = undefined,
+      facet2 = undefined
+    ) {
+      let value = term
+      if (facet1) value = `${term}>${facet1}`
+      if (facet1 && facet2) value = `${term}>${facet1}>${facet2}`
+      if (!facet1 && facet2)
+        console.warn(
+          `Warning: ${facet2} provided without its parent, this will not be shown in the cascader`
+        )
+      return value
     },
-    populateDefaultCascader: function() {
+    populateCascader: function () {
       return new Promise((resolve) => {
         // Algolia facet serach
-        this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
+        this.algoliaClient
+          .getAlgoliaFacets(facetPropPathMapping)
           .then((data) => {
-            this.populateCascaderOptions(data);
+            this.facets = data
+            this.options = data
+
+            // create top level of options in cascader
+            this.options.forEach((facet, i) => {
+              this.options[i].total = this.countTotalFacet(facet)
+
+              this.options[i].label = convertReadableLabel(facet.label)
+              this.options[i].value = this.createCascaderItemValue(
+                facet.key,
+                undefined
+              )
+
+              // put "Show all" as first option
+              this.options[i].children.unshift({
+                value: this.createCascaderItemValue('Show all'),
+                label: 'Show all',
+              })
+
+              // populate second level of options
+              this.options[i].children.forEach((facetItem, j) => {
+                this.options[i].children[j].label = convertReadableLabel(
+                  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
+                ) {
+                  this.options[i].children[j].children.forEach((term, k) => {
+                    this.options[i].children[j].children[k].label =
+                      convertReadableLabel(term.label)
+                    this.options[i].children[j].children[k].value =
+                      this.createCascaderItemValue(
+                        facet.label,
+                        facetItem.label,
+                        term.label
+                      )
+                  })
+                }
+              })
+            })
           })
           .finally(() => {
-            resolve();
-          });
-      });
-    },
-    setCascaderReady:function() {
-      this.cascaderIsReady = true;
-      this.checkShowAllBoxes();
-      this.setCascader(this.entry.filterFacets);
-      this.makeCascadeLabelsClickable();
-      this.$emit("cascaderReady");
+            resolve()
+          })
+      })
     },
-    alternateSearchCB: function(payload) {
-      this.populateCascaderOptions(payload.data);
-      this.setCascaderReady();
+    /**
+     * Create manual events when cascader tag is closed
+     */
+    cascadeTagClose: function (tag) {
+      let manualEvent = []
+
+      Object.entries(this.cascaderTags).map((entry) => {
+        const term = entry[0], facet = entry[1] // Either "Array" or "Object", depends on the cascader item level
+        const option = this.options.filter((option) => option.label == term)[0]
+        const key = option.key
+
+        for (let index = 0; index < option.children.length; index++) {
+          const child = option.children[index]
+          const label = child.label, value = child.value
+
+          if (Array.isArray(facet)) {
+            // push "Show all" if there is no item checked
+            if (facet.length === 0 && label.toLowerCase() === "show all") {
+              manualEvent.push([key, value])
+              break
+              // push all checked items
+            } else if (label !== tag && facet.includes(label))
+              manualEvent.push([key, value])
+          } else {
+            // loop nested cascader items
+            Object.entries(facet).map((entry2) => {
+              const term2 = entry2[0], facet2 = entry2[1] // object key, object value
+
+              if (term2 === label) {
+                child.children.map((child2) => {
+                  const label2 = child2.label, value2 = child2.value
+                  // push all checked items
+                  if (label2 !== tag && facet2.includes(label2))
+                    manualEvent.push([key, value2])
+                })
+              }
+            })
+          }
+        }
+      })
+      this.cascadeEvent(manualEvent)
     },
-    populateCascader: function () {
-      if (this.alternateSearch) {
-        this.alternateSearch({requestType: 'getFacets'}, this.alternateSearchCB);
-      } else {
-        this.populateDefaultCascader().then(() => {
-          this.setCascaderReady();
-        });
+    /**
+     * Re-generate 'cascaderTags' and 'presentTags'
+     * Not able to avoid wrong facet at the moment
+     */
+    tagsChangedCallback: function (event) {
+      if (this.correctnessCheck.term && this.correctnessCheck.facet && this.correctnessCheck.facet2) {
+        this.options.map((option) => {
+          this.correctnessCheck.term.add(option.label)
+          option.children.map((child) => {
+            this.correctnessCheck.facet.add(child.label)
+            if (option.label === 'Anatomical structure' && child.label !== 'Show all') {
+              child.children.map((child2) => {
+                this.correctnessCheck.facet2.add(child2.label)
+              })
+            }
+          })
+        })
       }
+
+      this.cascaderTags = {}
+      this.presentTags = []
+      event.map((item) => {
+        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) {
+                if (facet in this.cascaderTags[term]) this.cascaderTags[term][facet].push(facet2)
+                else this.cascaderTags[term][facet] = [facet2]
+              } else {
+                this.cascaderTags[term] = {}
+                this.cascaderTags[term][facet] = [facet2]
+              }
+            }
+          } else {
+            // 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(facet)
+            else {
+              if (facet.toLowerCase() !== "show all") this.cascaderTags[term] = [facet]
+              else this.cascaderTags[term] = []
+            }
+          }
+        }
+      })
+
+      Object.values(this.cascaderTags).map((value) => {
+        const extend = Array.isArray(value) ? value : Object.values(value).flat(1)
+        this.presentTags = [...this.presentTags, ...extend]
+      })
+      this.presentTags = [...new Set(this.presentTags)]
+      if (this.presentTags.length > 0) this.showFiltersText = false
+      else this.showFiltersText = true
     },
-    tagsChangedCallback: function (presentTags) {
-      if (presentTags.length > 0) {
-        this.showFiltersText = false;
-      } else {
-        this.showFiltersText = true;
+    /**
+     * Support for function 'showAllEventModifierForAutoCheckAll'
+     * Called in function 'populateCascader'
+     */
+    countTotalFacet: function (facet) {
+      if (['anatomy.organ.category.name'].includes(facet.key)) {
+        const count = facet.children.reduce((total, num) => {
+          // The first 'total' will be an object
+          total = typeof total == 'number' ? total : total.children.length
+          return total + num.children.length
+        })
+        return count
       }
+      return facet.children.length
+    },
+    /**
+     * When check/uncheck all child items, automatically check "Show all"
+     */
+    showAllEventModifierForAutoCheckAll: function (event) {
+      const currentKeys = {}
+      event.map((e) => {
+        const eventKey = e[0]
+        if (eventKey in currentKeys) currentKeys[eventKey] += 1
+        else currentKeys[eventKey] = 1
+      })
+      this.options.map((option) => {
+        const key = option.key
+        const value = option.children.filter((child) => child.label === "Show all")[0].value
+        const total = option.total
+        // Remove events if all child items is checked
+        if (currentKeys[key] === total) {
+          event = event.filter((e) => e[0] !== option.key)
+          delete currentKeys[key]
+        }
+        // Add 'Show all' if facet type not exist in event
+        if (!(key in currentKeys)) event.unshift([key, value])
+      })
+      return event
     },
     // cascadeEvent: initiate searches based off cascader changes
     cascadeEvent: function (event) {
       if (event) {
         // Check for show all in selected cascade options
-        event = this.showAllEventModifier(event);
+        event = this.showAllEventModifier(event)
+
+        event = this.showAllEventModifierForAutoCheckAll(event)
+        /**
+         * Move the new added event to the beginning
+         * Otherwise, cascader will show different expand item
+         */
+        if (this.__expandItem__) {
+          let position = 0
+          if (this.__expandItem__.length > 1) {
+            position = 1
+          }
+          const current = event.filter((e) => e[position] == this.__expandItem__[position]);
+          const rest = event.filter((e) => e[position] !== this.__expandItem__[position]);
+          event = [...current, ...rest]
+        }
 
-        // Create results for the filter update 
-        let filterKeys = event.filter( selection => selection !== undefined).map( fs => ({
-          facetPropPath: fs[0], 
-          facet: fs[1].split(">")[1],
-          term: fs[1].split(">")[0], 
-          AND: fs[2] // for setting the boolean
-        }))
+        // Create results for the filter update
+        let filterKeys = event
+          .filter((selection) => selection !== undefined)
+          .map((fs) => {
+            let { hString, bString } =
+              this.findHierarachyStringAndBooleanString(fs)
+            let { facet, facet2, term } =
+              this.getFacetsFromHierarchyString(hString)
+            return {
+              facetPropPath: fs[0],
+              facet: facet,
+              facet2: facet2,
+              term: term,
+              AND: bString, // for setting the boolean
+            }
+          })
 
         // Move results from arrays to object for use on scicrunch (note that we remove 'duplicate' as that is only needed for filter keys)
-        let filters = event.filter( selection => selection !== undefined).map( fs => {
-          let propPath = fs[0].includes('duplicate') ? fs[0].split('duplicate')[0] : fs[0]
-          return {
-            facetPropPath: propPath, 
-            facet: fs[1].split(">")[1],
-            term: fs[1].split(">")[0], 
-            AND: fs[2] // for setting the boolean
-          }
-        })
+        let filters = event
+          .filter((selection) => selection !== undefined)
+          .map((fs) => {
+            let facetSubPropPath = undefined
+            let propPath = fs[0].includes('duplicate')
+              ? fs[0].split('duplicate')[0]
+              : fs[0]
+            let { hString, bString } =
+              this.findHierarachyStringAndBooleanString(fs)
+            let { facet, facet2, term } =
+              this.getFacetsFromHierarchyString(hString)
+            if (facet2) {
+              // We need to change the propPath if we are at the third level of the cascader
+              facet = facet2
+              facetSubPropPath = 'anatomy.organ.name'
+            }
+            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
+            }
+          })
 
         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.makeCascadeLabelsClickable();
+        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 fucntion is needed as we previously stored booleans in the array of event that
+    //  are stored in the cascader
+    findHierarachyStringAndBooleanString(cascadeEventItem) {
+      let hString, bString
+      if (cascadeEventItem.length >= 3) {
+        if (cascadeEventItem[2] && cascadeEventItem[2].split('>').length > 2) {
+          hString = cascadeEventItem[2]
+          bString =
+            cascadeEventItem.length == 4 ? cascadeEventItem[3] : undefined
+        } else {
+          hString = cascadeEventItem[1]
+          bString = cascadeEventItem[2]
+        }
+      } else {
+        hString = cascadeEventItem[1]
+        bString = undefined
+      }
+      return { hString, bString }
+    },
+    // Splits the terms and facets from the string stored in the cascader
+    getFacetsFromHierarchyString(hierarchyString) {
+      let facet,
+        term,
+        facet2 = undefined
+      let fsSplit = hierarchyString.split('>')
+      if (fsSplit.length == 3) {
+        // if we are at the third level of the cascader
+        facet2 = fsSplit[2]
+        facet = fsSplit[1]
+        term = fsSplit[0]
+      } else {
+        facet = fsSplit[1]
+        term = fsSplit[0]
+      }
+      return { facet, facet2, term }
+    },
     // showAllEventModifier:  Modifies a cascade event to unclick all selections in category if "show all" is clicked. Also unchecks "Show all" if any secection is clicked
     // *NOTE* Does NOT remove 'Show all' selections from showing in 'cascadeSelected'
     showAllEventModifier: function (event) {
       // check if show all is in the cascader checked option list
       let hasShowAll = event
-        .map((ev) => (ev ? ev[1].toLowerCase().includes("show all") : false))
-        .includes(true);
+        .map((ev) => (ev ? ev[1].toLowerCase().includes('show all') : false))
+        .includes(true)
       // remove all selected options below the show all if checked
       if (hasShowAll) {
-        let modifiedEvent = [];
-        let facetMaps = {};
+        let modifiedEvent = []
+        let facetMaps = {}
         //catagorised different facet items
         for (const i in event) {
-          if (facetMaps[event[i][0]] === undefined) facetMaps[event[i][0]] = [];
-          facetMaps[event[i][0]].push(event[i]);
+          if (facetMaps[event[i][0]] === undefined) facetMaps[event[i][0]] = []
+          facetMaps[event[i][0]].push(event[i])
         }
         // go through each facets
         for (const facet in facetMaps) {
-          let showAll = undefined;
+          let showAll = undefined
           // Find the show all item if any
           for (let i = facetMaps[facet].length - 1; i >= 0; i--) {
-            if (facetMaps[facet][i][1].toLowerCase().includes("show all")) {
+            if (facetMaps[facet][i][1].toLowerCase().includes('show all')) {
               //seperate the showAll item and the rest
-              showAll = facetMaps[facet].splice(i, 1)[0];
-              break;
+              showAll = facetMaps[facet].splice(i, 1)[0]
+              break
             }
           }
           if (showAll) {
@@ -282,14 +541,14 @@ export default {
               //Unset the show all if it was present previously
               //and there are other items
               if (facetMaps[facet].length > 0)
-                modifiedEvent.push(...facetMaps[facet]);
-              else modifiedEvent.push(showAll);
+                modifiedEvent.push(...facetMaps[facet])
+              else modifiedEvent.push(showAll)
             } else {
               //showAll is turned on
-              modifiedEvent.push(showAll);
+              modifiedEvent.push(showAll)
             }
           } else {
-            modifiedEvent.push(...facetMaps[facet]);
+            modifiedEvent.push(...facetMaps[facet])
           }
         }
         //Make sure the expanded item are sorted first.
@@ -297,41 +556,41 @@ export default {
           if (this.__expandItem__) {
             if (a[0] == this.__expandItem__) {
               if (b[0] == this.__expandItem__) {
-                return 0;
+                return 0
               } else {
-                return -1;
+                return -1
               }
             } else if (b[0] == this.__expandItem__) {
               if (a[0] == this.__expandItem__) {
-                return 0;
+                return 0
               } else {
-                return 1;
+                return 1
               }
             } else {
-              return 0;
+              return 0
             }
-          } else return 0;
-        });
+          } else return 0
+        })
       }
-      return event;
+      return event
     },
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
-      this.__expandItem__ = event;
-      this.makeCascadeLabelsClickable();
+      this.__expandItem__ = event
+      this.cssMods()
     },
     numberShownChanged: function (event) {
-      this.$emit("numberPerPage", parseInt(event));
+      this.$emit('numberPerPage', parseInt(event))
     },
     updatePreviousShowAllChecked: function (options) {
       //Reset the states
       for (const facet in this.previousShowAllChecked) {
-        this.previousShowAllChecked[facet] = false;
+        this.previousShowAllChecked[facet] = false
       }
       options.forEach((element) => {
-        if (element[1].toLowerCase().includes("show all"))
-          this.previousShowAllChecked[element[0]] = true;
-      });
+        if (element[1].toLowerCase().includes('show all'))
+          this.previousShowAllChecked[element[0]] = true
+      })
     },
     // setCascader: Clears previous selections and takes in an array of facets to select: filterFacets
     // facets are in the form:
@@ -344,48 +603,78 @@ export default {
     setCascader: function (filterFacets) {
       //Do not set the value unless it is ready
       if (this.cascaderIsReady && filterFacets && filterFacets.length != 0) {
-        this.cascadeSelected = filterFacets.map(e => {
-          return [
+        this.cascadeSelected = filterFacets.map((e) => {
+          let filters = [
             e.facetPropPath,
             this.createCascaderItemValue(capitalise(e.term), e.facet),
           ]
-        });
+          // Add the third level of the cascader if it exists
+          if (e.facet2)
+            filters.push(
+              this.createCascaderItemValue(
+                capitalise(e.term),
+                e.facet,
+                e.facet2
+              )
+            )
+          return filters
+        })
 
         // Unforttunately the cascader is very particular about it's v-model
         //   to get around this we create a clone of it and use this clone for adding our boolean information
-        this.cascadeSelectedWithBoolean= filterFacets.map(e => {
+        this.cascadeSelectedWithBoolean = filterFacets.map((e) => {
           return [
             e.facetPropPath,
             this.createCascaderItemValue(capitalise(e.term), e.facet),
-            e.AND
+            e.AND,
           ]
-        });
-        this.updatePreviousShowAllChecked(this.cascadeSelected);
+        })
+        this.updatePreviousShowAllChecked(this.cascadeSelected)
       }
+
+      this.tagsChangedCallback(filterFacets);
     },
-    addFilter: function (filter) {
+    addFilter: function (filterToAdd) {
       //Do not set the value unless it is ready
-      if (this.cascaderIsReady && filter) {
-        if (this.validateFilter(filter)) {
-          this.cascadeSelected.filter(f=>f.term != filter.term)
-          this.cascadeSelected.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
-          this.cascadeSelectedWithBoolean.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
+      if (this.cascaderIsReady && filterToAdd) {
+        let filter = this.validateAndConvertFilterToHierarchical(filterToAdd)
+        if (filter) {
+          this.cascadeSelected.filter((f) => f.term != filter.term)
+          this.cascadeSelected.push([
+            filter.facetPropPath,
+            this.createCascaderItemValue(filter.term, filter.facet),
+            this.createCascaderItemValue(
+              filter.term,
+              filter.facet,
+              filter.facet2
+            ),
+          ])
+          this.cascadeSelectedWithBoolean.push([
+            filter.facetPropPath,
+            this.createCascaderItemValue(filter.term, filter.facet),
+            this.createCascaderItemValue(
+              filter.term,
+              filter.facet,
+              filter.facet2
+            ),
+            filter.AND,
+          ])
           // The 'AND' her is to set the boolean value when we search on the filters. It can be undefined without breaking anything
-          return true;
+          return true
         }
       }
     },
-    initiateSearch: function() {
+    initiateSearch: function () {
       this.cascadeEvent(this.cascadeSelectedWithBoolean)
     },
     // checkShowAllBoxes: Checks each 'Show all' cascade option by using the setCascader function
-    checkShowAllBoxes: function(){
+    checkShowAllBoxes: function () {
       this.setCascader(
-        this.options.map(option => {
+        this.options.map((option) => {
           return {
             facetPropPath: option.value,
             term: option.label,
-            facet: 'Show all'
+            facet: 'Show all',
           }
         })
       )
@@ -393,70 +682,140 @@ export default {
     makeCascadeLabelsClickable: function () {
       // Next tick allows the cascader menu to change
       this.$nextTick(() => {
-        this.$refs.cascader.$el
-          .querySelectorAll(".el-cascader-node__label")
+        document
+          .querySelectorAll('.sidebar-cascader-popper .el-cascader-node__label')
           .forEach((el) => {
             // step through each cascade label
             el.onclick = function () {
-              const checkbox = this.previousElementSibling;
+              const checkbox = this.previousElementSibling
               if (checkbox) {
-                if (!checkbox.parentElement.attributes["aria-owns"]) {
+                if (!checkbox.parentElement.attributes['aria-owns']) {
                   // check if we are at the lowest level of cascader
-                  this.previousElementSibling.click(); // Click the checkbox
+                  this.previousElementSibling.click() // Click the checkbox
                 }
               }
-            };
-          });
-      });
+            }
+          })
+      })
     },
-    /**
-     * Validate ther filter term to make sure the term is correct
+
+    cssMods: function () {
+      this.makeCascadeLabelsClickable()
+      this.removeTopLevelCascaderCheckboxes()
+    },
+
+    removeTopLevelCascaderCheckboxes: function () {
+      // Next tick allows the cascader menu to change
+      this.$nextTick(() => {
+        let cascadePanels = document.querySelectorAll(
+          '.sidebar-cascader-popper .el-cascader-menu__list'
+        )
+        // Hide the checkboxes on the first level of the cascader
+        cascadePanels[0]
+          .querySelectorAll('.el-checkbox__input')
+          .forEach((el) => (el.style.display = 'none'))
+      })
+    },
+    /*
+     * Given a filter, the function below returns the filter in the format of the cascader, returns false if facet is not found
      */
-    validateFilter: function(filter) {
+    validateAndConvertFilterToHierarchical: function (filter) {
       if (filter && filter.facet && filter.term) {
-        const item = this.createCascaderItemValue(filter.term, filter.facet);
-        const facet = this.options.find(element => element.value === filter.facetPropPath);
-        if (facet) {
-          const filter = facet.children.find(element => element.value === item);
-          if (filter)
-            return true;
+        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 we find a match on the second level, the filter will already be correct
+                  return filter
+                } else {
+                  if (secondLayer.children && secondLayer.children.length > 0) {
+                    for (const thirdLayer of secondLayer.children) {
+                      if (thirdLayer.label === filter.facet) {
+                        // 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
+                        filter.facet = secondLayer.label
+                        return filter
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
-      return false;
+      return false
     },
-    /**
-     * Return a list of valid filers given a list of filters, 
-     */
-    getValidatedFilters: function (filters) {
+    getHierarchicalValidatedFilters: function (filters) {
       if (filters) {
         if (this.cascaderIsReady) {
-          const result = [];
-          filters.forEach(filter => {
-            if (this.validateFilter(filter)) {
-              result.push(filter);
+          const result = []
+          filters.forEach((filter) => {
+            const validatedFilter =
+              this.validateAndConvertFilterToHierarchical(filter)
+            if (validatedFilter) {
+              result.push(validatedFilter)
             }
-          });
-          return result;
-        } else return filters;
+          })
+          return result
+        } else return filters
       }
-      return [];
+      return []
     },
   },
   mounted: function () {
-    if (!this.alternateSearch) {
-      this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
-      this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
-    }
-    this.populateCascader();
+    this.algoliaClient = 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()
+      this.setCascader(this.entry.filterFacets)
+      this.cssMods()
+      this.$emit('cascaderReady')
+    })
   },
-};
+}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/option";
-@import "~element-ui/packages/theme-chalk/src/popover";
-@import "~element-ui/packages/theme-chalk/src/select";
+<style lang="scss" scoped>
+
+.cascader-tag {
+  position: absolute;
+  top: 110px;
+  left: 50px;
+  z-index: 1;
+  display: flex;
+  gap: 4px;
+}
+
+.el-tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.el-tag {
+  .cascader-tag &,
+  .el-tags-container & {
+    font-family: 'Asap', sans-serif;
+    font-size: 12px;
+    color: #303133 !important;
+    background-color: #fff;
+    border-color: #dcdfe6 !important;
+  }
+}
+
+:deep(.el-cascader__tags) {
+  display: none;
+}
 
 .filter-default-value {
   pointer-events: none;
@@ -501,21 +860,16 @@ export default {
   padding-bottom: 6px;
 }
 
-.cascader ::v-deep .el-cascder-panel {
-  max-height: 500px;
-}
-
-.cascader::v-deep .el-scrollbar__wrap {
-  overflow-x: hidden;
-  margin-bottom: 2px !important;
-}
-
-.cascader ::v-deep li[aria-owns*="cascader"] > .el-checkbox {
-  display: none;
+.dataset-shown {
+  display: flex;
+  flex-direction: row;
+  float: right;
+  padding-bottom: 6px;
+  gap: 8px;
 }
 
 .dataset-results-feedback {
-  float: right;
+  white-space:nowrap;
   text-align: right;
   color: rgb(48, 49, 51);
   font-family: Asap;
@@ -528,82 +882,113 @@ export default {
   position: relative;
   float: left;
   padding-right: 15px;
-  padding-bottom: 12px;
 }
 
-.number-shown-select {
-  float: right;
-}
-
-.number-shown-select ::v-deep .el-input__inner {
+.number-shown-select :deep(.el-select__wrapper) {
   width: 68px;
   height: 40px;
   color: rgb(48, 49, 51);
 }
 
-.search-filters ::v-deep .el-cascader-node.is-active {
-  color: $app-primary-color;
-}
-
-.search-filters ::v-deep .el-cascader-node.in-active-path {
-  color: $app-primary-color;
-}
-
-.search-filters ::v-deep .el-checkbox__input.is-checked > .el-checkbox__inner {
-  background-color: $app-primary-color;
-  border-color: $app-primary-color;
-}
-
-.cascader ::v-deep .el-cascader-menu:nth-child(2) .el-cascader-node:first-child {
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.cascader ::v-deep .el-cascader-node__label {
-  text-align: left;
+.el-select-dropdown__item.is-selected {
+  color: #8300BF;
 }
 
-.filters ::v-deep .el-popover {
-    background: #f3ecf6 !important;
-    border: 1px solid $app-primary-color;
-    border-radius: 4px;
-    color: #303133 !important;
-    font-size: 12px;
-    line-height: 18px;
+.filters :deep(.el-popover) {
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  color: #303133 !important;
+  font-size: 12px;
+  line-height: 18px;
 }
 
-.filters ::v-deep .el-popover[x-placement^="top"] .popper__arrow {
+.filters :deep(.el-popover[x-placement^='top'] .popper__arrow) {
   border-top-color: $app-primary-color;
   border-bottom-width: 0;
 }
-.filters ::v-deep .el-popover[x-placement^="top"] .popper__arrow::after {
+.filters :deep(.el-popover[x-placement^='top'] .popper__arrow::after) {
   border-top-color: #f3ecf6;
   border-bottom-width: 0;
 }
 
-.filters ::v-deep .el-popover[x-placement^="bottom"] .popper__arrow {
+.filters :deep(.el-popover[x-placement^='bottom'] .popper__arrow) {
   border-top-width: 0;
   border-bottom-color: $app-primary-color;
 }
-.filters ::v-deep .el-popover[x-placement^="bottom"] .popper__arrow::after {
+.filters :deep(.el-popover[x-placement^='bottom'] .popper__arrow::after) {
   border-top-width: 0;
   border-bottom-color: #f3ecf6;
 }
 
-.filters ::v-deep .el-popover[x-placement^="right"] .popper__arrow {
+.filters :deep(.el-popover[x-placement^='right'] .popper__arrow) {
   border-right-color: $app-primary-color;
   border-left-width: 0;
 }
-.filters ::v-deep .el-popover[x-placement^="right"] .popper__arrow::after {
+.filters :deep(.el-popover[x-placement^='right'] .popper__arrow::after) {
   border-right-color: #f3ecf6;
   border-left-width: 0;
 }
 
-.filters ::v-deep .el-popover[x-placement^="left"] .popper__arrow {
+.filters :deep(.el-popover[x-placement^='left'] .popper__arrow) {
   border-right-width: 0;
   border-left-color: $app-primary-color;
 }
-.filters ::v-deep .el-popover[x-placement^="left"] .popper__arrow::after {
+.filters :deep(.el-popover[x-placement^='left'] .popper__arrow::after) {
   border-right-width: 0;
   border-left-color: #f3ecf6;
 }
 </style>
+
+<style lang="scss">
+.sidebar-cascader-popper {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #292b66;
+  text-align: center;
+  padding-bottom: 6px;
+}
+
+.sidebar-cascader-popper .el-cascader-node.is-active {
+  color: $app-primary-color;
+}
+
+.sidebar-cascader-popper .el-cascader-node.in-active-path {
+  color: $app-primary-color;
+}
+
+.sidebar-cascader-popper .el-checkbox__input.is-checked > .el-checkbox__inner {
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+}
+
+.sidebar-cascader-popper
+  .el-cascader-menu:nth-child(2)
+  .el-cascader-node:first-child {
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.sidebar-cascader-popper .el-cascader-node__label {
+  text-align: left;
+}
+
+.sidebar-cascader-popper .el-cascder-panel {
+  max-height: 500px;
+}
+
+.sidebar-cascader-popper .el-scrollbar__wrap {
+  overflow-x: hidden;
+  margin-bottom: 2px !important;
+}
+
+.sidebar-cascader-popper .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+}
+</style>