{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SearchFilters.vue?vue&type=style&index=0&id=ccebc8fa&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SearchFilters.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvb3B0aW9uIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9wb3BvdmVyIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9zZWxlY3QiOw0KDQouZmlsdGVyLWRlZmF1bHQtdmFsdWUgew0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDA7DQogIGxlZnQ6IDA7DQogIHBhZGRpbmctdG9wOiAxMHB4Ow0KICBwYWRkaW5nLWxlZnQ6IDE2cHg7DQp9DQoNCi5oZWxwIHsNCiAgd2lkdGg6IDI0cHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiAyNHB4Ow0KICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7DQogIGN1cnNvcjogcG9pbnRlcjsNCn0NCg0KLnBvcG92ZXIgew0KICBjb2xvcjogcmdiKDQ4LCA0OSwgNTEpOw0KICBmb250LWZhbWlseTogQXNhcDsNCiAgbWFyZ2luOiAxMnB4Ow0KfQ0KDQouZmlsdGVyLWljb24taW5zaWRlIHsNCiAgd2lkdGg6IDEycHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiAxMnB4ICFpbXBvcnRhbnQ7DQogIGNvbG9yOiAjMjkyYjY2Ow0KICB0cmFuc2Zvcm06IHNjYWxlKDIpICFpbXBvcnRhbnQ7DQogIG1hcmdpbi1ib3R0b206IDBweCAhaW1wb3J0YW50Ow0KfQ0KDQouY2FzY2FkZXIgew0KICBmb250LWZhbWlseTogQXNhcDsNCiAgZm9udC1zaXplOiAxNHB4Ow0KICBmb250LXdlaWdodDogNTAwOw0KICBmb250LXN0cmV0Y2g6IG5vcm1hbDsNCiAgZm9udC1zdHlsZTogbm9ybWFsOw0KICBsaW5lLWhlaWdodDogbm9ybWFsOw0KICBsZXR0ZXItc3BhY2luZzogbm9ybWFsOw0KICBjb2xvcjogIzI5MmI2NjsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KICBwYWRkaW5nLWJvdHRvbTogNnB4Ow0KfQ0KDQouZGF0YXNldC1yZXN1bHRzLWZlZWRiYWNrIHsNCiAgZmxvYXQ6IHJpZ2h0Ow0KICB0ZXh0LWFsaWduOiByaWdodDsNCiAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsNCiAgZm9udC1mYW1pbHk6IEFzYXA7DQogIGZvbnQtc2l6ZTogMThweDsNCiAgZm9udC13ZWlnaHQ6IDUwMDsNCiAgcGFkZGluZy10b3A6IDhweDsNCn0NCg0KLnNlYXJjaC1maWx0ZXJzIHsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBmbG9hdDogbGVmdDsNCiAgcGFkZGluZy1yaWdodDogMTVweDsNCn0NCg0KLm51bWJlci1zaG93bi1zZWxlY3Qgew0KICBmbG9hdDogcmlnaHQ7DQp9DQoNCi5udW1iZXItc2hvd24tc2VsZWN0IDo6di1kZWVwIC5lbC1pbnB1dF9faW5uZXIgew0KICB3aWR0aDogNjhweDsNCiAgaGVpZ2h0OiA0MHB4Ow0KICBjb2xvcjogcmdiKDQ4LCA0OSwgNTEpOw0KfQ0KDQouZmlsdGVycyA6OnYtZGVlcCAuZWwtcG9wb3ZlciB7DQogICAgYmFja2dyb3VuZDogI2YzZWNmNiAhaW1wb3J0YW50Ow0KICAgIGJvcmRlcjogMXB4IHNvbGlkICRhcHAtcHJpbWFyeS1jb2xvcjsNCiAgICBib3JkZXItcmFkaXVzOiA0cHg7DQogICAgY29sb3I6ICMzMDMxMzMgIWltcG9ydGFudDsNCiAgICBmb250LXNpemU6IDEycHg7DQogICAgbGluZS1oZWlnaHQ6IDE4cHg7DQp9DQoNCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0idG9wIl0gLnBvcHBlcl9fYXJyb3cgew0KICBib3JkZXItdG9wLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7DQogIGJvcmRlci1ib3R0b20td2lkdGg6IDA7DQp9DQouZmlsdGVycyA6OnYtZGVlcCAuZWwtcG9wb3Zlclt4LXBsYWNlbWVudF49InRvcCJdIC5wb3BwZXJfX2Fycm93OjphZnRlciB7DQogIGJvcmRlci10b3AtY29sb3I6ICNmM2VjZjY7DQogIGJvcmRlci1ib3R0b20td2lkdGg6IDA7DQp9DQoNCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0iYm90dG9tIl0gLnBvcHBlcl9fYXJyb3cgew0KICBib3JkZXItdG9wLXdpZHRoOiAwOw0KICBib3JkZXItYm90dG9tLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7DQp9DQouZmlsdGVycyA6OnYtZGVlcCAuZWwtcG9wb3Zlclt4LXBsYWNlbWVudF49ImJvdHRvbSJdIC5wb3BwZXJfX2Fycm93OjphZnRlciB7DQogIGJvcmRlci10b3Atd2lkdGg6IDA7DQogIGJvcmRlci1ib3R0b20tY29sb3I6ICNmM2VjZjY7DQp9DQoNCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0icmlnaHQiXSAucG9wcGVyX19hcnJvdyB7DQogIGJvcmRlci1yaWdodC1jb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KICBib3JkZXItbGVmdC13aWR0aDogMDsNCn0NCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0icmlnaHQiXSAucG9wcGVyX19hcnJvdzo6YWZ0ZXIgew0KICBib3JkZXItcmlnaHQtY29sb3I6ICNmM2VjZjY7DQogIGJvcmRlci1sZWZ0LXdpZHRoOiAwOw0KfQ0KDQouZmlsdGVycyA6OnYtZGVlcCAuZWwtcG9wb3Zlclt4LXBsYWNlbWVudF49ImxlZnQiXSAucG9wcGVyX19hcnJvdyB7DQogIGJvcmRlci1yaWdodC13aWR0aDogMDsNCiAgYm9yZGVyLWxlZnQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCn0NCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0ibGVmdCJdIC5wb3BwZXJfX2Fycm93OjphZnRlciB7DQogIGJvcmRlci1yaWdodC13aWR0aDogMDsNCiAgYm9yZGVyLWxlZnQtY29sb3I6ICNmM2VjZjY7DQp9DQo="},{"version":3,"sources":["SearchFilters.vue"],"names":[],"mappings":";AAwhBA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"SearchFilters.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\r\n  <div class=\"filters\">\r\n    <map-svg-sprite-color />\r\n    <transition name=\"el-zoom-in-top\">\r\n      <span v-show=\"showFilters\" class=\"search-filters transition-box\">\r\n        <custom-cascader\r\n          class=\"cascader\"\r\n          ref=\"cascader\"\r\n          v-model=\"cascadeSelected\"\r\n          placeholder\r\n          :collapse-tags=\"true\"\r\n          collapse-tags-tooltip\r\n          :options=\"options\"\r\n          :props=\"props\"\r\n          @change=\"cascadeEvent($event)\"\r\n          @expand-change=\"cascadeExpandChange\"\r\n          :show-all-levels=\"false\"\r\n          v-loading=\"!cascaderIsReady\"\r\n          popper-class=\"sidebar-cascader-popper\"\r\n          @tags-changed=\"tagsChangedCallback\"\r\n        ></custom-cascader>\r\n        <div v-if=\"showFiltersText\" class=\"filter-default-value\">\r\n          Filters\r\n        </div>\r\n        <el-popover\r\n          title=\"How do filters work?\"\r\n          width=\"250\"\r\n          trigger=\"hover\"\r\n          :append-to-body=false\r\n          popper-class=\"popover\"\r\n          >\r\n          <map-svg-icon slot=\"reference\" icon=\"help\" class=\"help\"/>\r\n          <div >\r\n            <strong>Within categories:</strong> OR \r\n            <br/>\r\n            example: 'heart' OR 'colon'\r\n            <br/>\r\n            <br/>\r\n            <strong>Between categories:</strong> AND\r\n            <br/>\r\n            example: 'rat' AND 'lung'\r\n          </div>\r\n        </el-popover>\r\n        \r\n      </span>\r\n    </transition>\r\n\r\n    <el-select\r\n      class=\"number-shown-select\"\r\n      v-model=\"numberShown\"\r\n      placeholder=\"10\"\r\n      @change=\"numberShownChanged($event)\"\r\n    >\r\n      <el-option\r\n        v-for=\"item in numberDatasetsShown\"\r\n        :key=\"item\"\r\n        :label=\"item\"\r\n        :value=\"item\"\r\n      ></el-option>\r\n    </el-select>\r\n    <span class=\"dataset-results-feedback\">{{ this.numberOfResultsText }}</span>\r\n  </div>\r\n</template>\r\n\r\n\r\n<script>\r\n/* eslint-disable no-alert, no-console */\r\nimport Vue from \"vue\";\r\nimport { Option, Select, Popover } from \"element-ui\";\r\nimport CustomCascader from \"./Cascader\";\r\nimport lang from \"element-ui/lib/locale/lang/en\";\r\nimport locale from \"element-ui/lib/locale\";\r\nimport speciesMap from \"./species-map\";\r\nimport { MapSvgIcon, MapSvgSpriteColor } from \"@abi-software/svg-sprite\";\r\n\r\nimport {AlgoliaClient} from \"../algolia/algolia.js\";\r\nimport {facetPropPathMapping} from \"../algolia/utils.js\";\r\n\r\nlocale.use(lang);\r\nVue.use(Option);\r\nVue.use(Select);\r\nVue.use(Popover)\r\n\r\nconst capitalise = function (txt) {\r\n  return txt.charAt(0).toUpperCase() + txt.slice(1);\r\n};\r\n\r\nconst convertReadableLabel = function (original) {\r\n  const name = original.toLowerCase();\r\n  if (speciesMap[name]) {\r\n    return capitalise(speciesMap[name]);\r\n  } else {\r\n    return capitalise(name);\r\n  }\r\n};\r\n\r\nexport default {\r\n  name: \"SearchFilters\",\r\n  components: {\r\n    CustomCascader,\r\n    MapSvgIcon,\r\n    MapSvgSpriteColor,\r\n  },\r\n  props: {\r\n    /**\r\n     * Object containing information for\r\n     * the required viewing.\r\n     */\r\n    entry: Object,\r\n    envVars: {\r\n      type: Object,\r\n      default: ()=>{}\r\n    },\r\n  },\r\n  data: function () {\r\n    return {\r\n      cascaderIsReady: false,\r\n      previousShowAllChecked: {\r\n        species: false,\r\n        gender: false,\r\n        organ: false,\r\n        datasets: false,\r\n      },\r\n      showFilters: true,\r\n      showFiltersText: true,\r\n      cascadeSelected: [],\r\n      cascadeSelectedWithBoolean: [], \r\n      numberShown: 10,\r\n      filters: [],\r\n      facets: [\"Species\", \"Gender\", \"Organ\", \"Datasets\"],\r\n      numberDatasetsShown: [\"10\", \"20\", \"50\"],\r\n      props: { multiple: true },\r\n      options: [\r\n        {\r\n          value: \"Species\",\r\n          label: \"Species\",\r\n          children: [{}],\r\n        },\r\n      ],\r\n    };\r\n  },\r\n  computed: {\r\n    numberOfResultsText: function () {\r\n      return `${this.entry.numberOfHits} results | Showing`;\r\n    },\r\n  },\r\n  methods: {\r\n    createCascaderItemValue: function (term, facet1=undefined, facet2=undefined) {\r\n      let value = term;\r\n      if (facet1) value = `${term}>${facet1}`;\r\n      if (facet1 && facet2) value = `${term}>${facet1}>${facet2}`;\r\n      if (!facet1 && facet2) console.warn(`Warning: ${facet2} provided without its parent, this will not be shown in the cascader`) \r\n      return value;\r\n    },\r\n    populateCascader: function () {\r\n      return new Promise((resolve) => {\r\n        // Algolia facet serach\r\n        this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)\r\n          .then((data) => {\r\n            this.facets = data;\r\n            this.options = data;\r\n\r\n            // create top level of options in cascader\r\n            this.options.forEach((facet, i) => {\r\n              this.options[i].label = convertReadableLabel(facet.label);\r\n              this.options[i].value = this.createCascaderItemValue(\r\n                facet.key,\r\n                undefined\r\n              );\r\n\r\n              // put \"Show all\" as first option\r\n              this.options[i].children.unshift({\r\n                value: this.createCascaderItemValue(\"Show all\"),\r\n                label: \"Show all\",\r\n              });\r\n\r\n              // populate second level of options \r\n              this.options[i].children.forEach((facetItem, j) => {\r\n                this.options[i].children[j].label = convertReadableLabel(\r\n                  facetItem.label\r\n                );\r\n                this.options[i].children[j].value =\r\n                  this.createCascaderItemValue(facet.label, facetItem.label);\r\n                if (this.options[i].children[j].children && this.options[i].children[j].children.length > 0) {\r\n                  this.options[i].children[j].children.forEach((term, k) => {\r\n                    this.options[i].children[j].children[k].label = convertReadableLabel(\r\n                      term.label\r\n                    );\r\n                    this.options[i].children[j].children[k].value =\r\n                      this.createCascaderItemValue(\r\n                        facet.label,\r\n                        facetItem.label,\r\n                        term.label\r\n                      );\r\n                  });\r\n                }\r\n              });\r\n            });\r\n          })\r\n          .finally(() => {\r\n            resolve();\r\n          });\r\n      });\r\n    },\r\n    tagsChangedCallback: function (presentTags) {\r\n      if (presentTags.length > 0) {\r\n        this.showFiltersText = false;\r\n      } else {\r\n        this.showFiltersText = true;\r\n      }\r\n    },\r\n    // cascadeEvent: initiate searches based off cascader changes\r\n    cascadeEvent: function (event) {\r\n      if (event) {\r\n        // Check for show all in selected cascade options\r\n        event = this.showAllEventModifier(event);\r\n\r\n        // Create results for the filter update \r\n        let filterKeys = event.filter( selection => selection !== undefined).map( fs => {\r\n          let {hString, bString} = this.findHierarachyStringAndBooleanString(fs)\r\n          let {facet, facet2, term} = this.getFacetsFromHierarchyString(hString)\r\n          return {\r\n            facetPropPath: fs[0], \r\n            facet: facet,\r\n            facet2: facet2,\r\n            term: term, \r\n            AND: bString // for setting the boolean\r\n          }\r\n        })\r\n\r\n        // Move results from arrays to object for use on scicrunch (note that we remove 'duplicate' as that is only needed for filter keys)\r\n        let filters = event.filter( selection => selection !== undefined).map( fs => {\r\n          let facetSubPropPath = undefined\r\n          let propPath = fs[0].includes('duplicate') ? fs[0].split('duplicate')[0] : fs[0]\r\n          let {hString, bString} = this.findHierarachyStringAndBooleanString(fs)\r\n          let {facet, facet2, term} = this.getFacetsFromHierarchyString(hString)\r\n          if (facet2) { // We need to change the propPath if we are at the third level of the cascader\r\n            facet = facet2\r\n            facetSubPropPath = 'anatomy.organ.name'\r\n          }\r\n          return {\r\n            facetPropPath: propPath,\r\n            facet: facet,\r\n            term: term, \r\n            AND: bString, // for setting the boolean\r\n            facetSubPropPath: facetSubPropPath // will be used for filters if we are at the third level of the cascader\r\n          }\r\n        })\r\n\r\n\r\n        this.$emit('loading', true) // let sidebarcontent wait for the requests\r\n\r\n        this.$emit(\"filterResults\", filters); // emit filters for apps above sidebar\r\n        this.setCascader(filterKeys); //update our cascader v-model if we modified the event\r\n        this.cssMods(); // update css for the cascader\r\n      }\r\n    },\r\n    //this fucntion is needed as we previously stored booleans in the array of event that \r\n    //  are stored in the cascader\r\n    findHierarachyStringAndBooleanString(cascadeEventItem){ \r\n      let hString, bString\r\n      if (cascadeEventItem.length >= 3){\r\n        if (cascadeEventItem[2] && cascadeEventItem[2].split('>').length > 2){\r\n          hString = cascadeEventItem[2]\r\n          bString = cascadeEventItem.length == 4 ? cascadeEventItem[3] : undefined\r\n        } else {\r\n          hString = cascadeEventItem[1]\r\n          bString =  cascadeEventItem[2]\r\n        }\r\n      } else {\r\n        hString = cascadeEventItem[1]\r\n        bString = undefined\r\n      }\r\n      return {hString, bString}\r\n    },\r\n    // Splits the terms and facets from the string stored in the cascader\r\n    getFacetsFromHierarchyString(hierarchyString){\r\n      let facet, term, facet2 = undefined\r\n      let fsSplit = hierarchyString.split(\">\");\r\n      if (fsSplit.length == 3){ // if we are at the third level of the cascader\r\n        facet2 = fsSplit[2];\r\n        facet = fsSplit[1];\r\n        term = fsSplit[0];\r\n      } else {\r\n        facet = fsSplit[1];\r\n        term = fsSplit[0];\r\n      } \r\n      return {facet, facet2, term}\r\n    },\r\n    // 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\r\n    // *NOTE* Does NOT remove 'Show all' selections from showing in 'cascadeSelected'\r\n    showAllEventModifier: function (event) {\r\n      // check if show all is in the cascader checked option list\r\n      let hasShowAll = event\r\n        .map((ev) => (ev ? ev[1].toLowerCase().includes(\"show all\") : false))\r\n        .includes(true);\r\n      // remove all selected options below the show all if checked\r\n      if (hasShowAll) {\r\n        let modifiedEvent = [];\r\n        let facetMaps = {};\r\n        //catagorised different facet items\r\n        for (const i in event) {\r\n          if (facetMaps[event[i][0]] === undefined) facetMaps[event[i][0]] = [];\r\n          facetMaps[event[i][0]].push(event[i]);\r\n        }\r\n        // go through each facets\r\n        for (const facet in facetMaps) {\r\n          let showAll = undefined;\r\n          // Find the show all item if any\r\n          for (let i = facetMaps[facet].length - 1; i >= 0; i--) {\r\n            if (facetMaps[facet][i][1].toLowerCase().includes(\"show all\")) {\r\n              //seperate the showAll item and the rest\r\n              showAll = facetMaps[facet].splice(i, 1)[0];\r\n              break;\r\n            }\r\n          }\r\n          if (showAll) {\r\n            if (this.previousShowAllChecked[facet]) {\r\n              //Unset the show all if it was present previously\r\n              //and there are other items\r\n              if (facetMaps[facet].length > 0)\r\n                modifiedEvent.push(...facetMaps[facet]);\r\n              else modifiedEvent.push(showAll);\r\n            } else {\r\n              //showAll is turned on\r\n              modifiedEvent.push(showAll);\r\n            }\r\n          } else {\r\n            modifiedEvent.push(...facetMaps[facet]);\r\n          }\r\n        }\r\n        //Make sure the expanded item are sorted first.\r\n        return modifiedEvent.sort((a, b) => {\r\n          if (this.__expandItem__) {\r\n            if (a[0] == this.__expandItem__) {\r\n              if (b[0] == this.__expandItem__) {\r\n                return 0;\r\n              } else {\r\n                return -1;\r\n              }\r\n            } else if (b[0] == this.__expandItem__) {\r\n              if (a[0] == this.__expandItem__) {\r\n                return 0;\r\n              } else {\r\n                return 1;\r\n              }\r\n            } else {\r\n              return 0;\r\n            }\r\n          } else return 0;\r\n        });\r\n      }\r\n      return event;\r\n    },\r\n    cascadeExpandChange: function (event) {\r\n      //work around as the expand item may change on modifying the cascade props\r\n      this.__expandItem__ = event;\r\n      this.cssMods();\r\n    },\r\n    numberShownChanged: function (event) {\r\n      this.$emit(\"numberPerPage\", parseInt(event));\r\n    },\r\n    updatePreviousShowAllChecked: function (options) {\r\n      //Reset the states\r\n      for (const facet in this.previousShowAllChecked) {\r\n        this.previousShowAllChecked[facet] = false;\r\n      }\r\n      options.forEach((element) => {\r\n        if (element[1].toLowerCase().includes(\"show all\"))\r\n          this.previousShowAllChecked[element[0]] = true;\r\n      });\r\n    },\r\n    // setCascader: Clears previous selections and takes in an array of facets to select: filterFacets\r\n    // facets are in the form:\r\n    //    {\r\n    //      facetPropPath: 'anatomy.organ.name',\r\n    //      term: 'Sex',\r\n    //      facet: 'Male'\r\n    //      AND: true  // Optional value for setting the boolean within a facet\r\n    //    }\r\n    setCascader: function (filterFacets) {\r\n      //Do not set the value unless it is ready\r\n      if (this.cascaderIsReady && filterFacets && filterFacets.length != 0) {\r\n        this.cascadeSelected = filterFacets.map(e => {\r\n          let filters = [\r\n            e.facetPropPath,\r\n            this.createCascaderItemValue(capitalise(e.term), e.facet),\r\n          ]\r\n          // Add the third level of the cascader if it exists\r\n          if (e.facet2) filters.push(this.createCascaderItemValue(capitalise(e.term), e.facet, e.facet2))\r\n          return filters\r\n        });\r\n\r\n        // Unforttunately the cascader is very particular about it's v-model\r\n        //   to get around this we create a clone of it and use this clone for adding our boolean information\r\n        this.cascadeSelectedWithBoolean= filterFacets.map(e => {\r\n          return [\r\n            e.facetPropPath,\r\n            this.createCascaderItemValue(capitalise(e.term), e.facet),\r\n            e.AND\r\n          ]\r\n        });\r\n        this.updatePreviousShowAllChecked(this.cascadeSelected);\r\n      }\r\n    },\r\n    addFilter: function (filterToAdd) {\r\n      //Do not set the value unless it is ready\r\n      if (this.cascaderIsReady && filterToAdd) {\r\n        let filter = this.validateAndConvertFilterToHierarchical(filterToAdd)\r\n        if (filter) {\r\n          this.cascadeSelected.filter(f=>f.term != filter.term)\r\n          this.cascadeSelected.push([filter.facetPropPath,this.createCascaderItemValue(filter.term, filter.facet), this.createCascaderItemValue(filter.term, filter.facet, filter.facet2)])\r\n          this.cascadeSelectedWithBoolean.push([filter.facetPropPath,this.createCascaderItemValue(filter.term, filter.facet), this.createCascaderItemValue(filter.term, filter.facet, filter.facet2), filter.AND])\r\n          // The 'AND' her is to set the boolean value when we search on the filters. It can be undefined without breaking anything\r\n          return true;\r\n        }\r\n      }\r\n    },\r\n    initiateSearch: function() {\r\n      this.cascadeEvent(this.cascadeSelectedWithBoolean)\r\n    },\r\n    // checkShowAllBoxes: Checks each 'Show all' cascade option by using the setCascader function\r\n    checkShowAllBoxes: function(){\r\n      this.setCascader(\r\n        this.options.map(option => {\r\n          return {\r\n            facetPropPath: option.value,\r\n            term: option.label,\r\n            facet: 'Show all'\r\n          }\r\n        })\r\n      )\r\n    },\r\n    makeCascadeLabelsClickable: function () {\r\n      // Next tick allows the cascader menu to change\r\n      this.$nextTick(() => {\r\n        document\r\n          .querySelectorAll(\".sidebar-cascader-popper .el-cascader-node__label\")\r\n          .forEach((el) => {\r\n            // step through each cascade label\r\n            el.onclick = function () {\r\n              const checkbox = this.previousElementSibling;\r\n              if (checkbox) {\r\n                if (!checkbox.parentElement.attributes[\"aria-owns\"]) {\r\n                  // check if we are at the lowest level of cascader\r\n                  this.previousElementSibling.click(); // Click the checkbox\r\n                }\r\n              }\r\n            };\r\n          });\r\n      });\r\n    },\r\n\r\n    cssMods: function (){\r\n      this.makeCascadeLabelsClickable();\r\n      this.removeTopLevelCascaderCheckboxes();\r\n    },\r\n\r\n    removeTopLevelCascaderCheckboxes: function () {\r\n      // Next tick allows the cascader menu to change\r\n      this.$nextTick(() => {\r\n        let cascadePanels = document.querySelectorAll(\".sidebar-cascader-popper .el-cascader-menu__list\");\r\n        // Hide the checkboxes on the first level of the cascader\r\n        cascadePanels[0].querySelectorAll('.el-checkbox__input').forEach(el=>el.style.display='none');\r\n      });\r\n    },\r\n\r\n\r\n    /*\r\n      * Given a filter, the function below returns the filter in the format of the cascader, returns false if facet is not found\r\n      */\r\n    validateAndConvertFilterToHierarchical: function (filter) {\r\n      if (filter && filter.facet && filter.term) {\r\n        if (filter.facet2) {\r\n          return filter // if it has a second term we will assume it is hierarchical and return it as is\r\n        } else {\r\n          for (const firstLayer of this.options){\r\n            if (firstLayer.value === filter.facetPropPath) {\r\n              for (const secondLayer of firstLayer.children) {\r\n                if (secondLayer.label === filter.facet) {\r\n                  // if we find a match on the second level, the filter will already be correct\r\n                  return filter\r\n                } else {\r\n                  if (secondLayer.children && secondLayer.children.length > 0) {\r\n                    for (const thirdLayer of secondLayer.children) {\r\n                      if (thirdLayer.label === filter.facet) {\r\n                        // If we find a match on the third level, we need to switch facet1 to facet2\r\n                        //   and populate facet1 with its parents label.\r\n                        filter.facet2 = thirdLayer.label\r\n                        filter.facet = secondLayer.label\r\n                        return filter\r\n                      }\r\n                    }\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n      return false\r\n    },\r\n\r\n    getHierarchicalValidatedFilters: function (filters) {\r\n      if (filters) {\r\n        if (this.cascaderIsReady) {\r\n          const result = [];\r\n          filters.forEach(filter => {\r\n            const validatedFilter = this.validateAndConvertFilterToHierarchical(filter)\r\n            if (validatedFilter) {\r\n              result.push(validatedFilter);\r\n            }\r\n          });\r\n          return result;\r\n        } else return filters;\r\n      }\r\n      return [];\r\n    },\r\n\r\n  },\r\n  mounted: function () {\r\n    this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);\r\n    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);\r\n    this.populateCascader().then(() => {\r\n      this.cascaderIsReady = true;\r\n      this.checkShowAllBoxes();\r\n      this.setCascader(this.entry.filterFacets);\r\n      this.cssMods();\r\n      this.$emit(\"cascaderReady\");\r\n    });\r\n  },\r\n};\r\n</script>\r\n\r\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\r\n<style scoped lang=\"scss\">\r\n@import \"~element-ui/packages/theme-chalk/src/option\";\r\n@import \"~element-ui/packages/theme-chalk/src/popover\";\r\n@import \"~element-ui/packages/theme-chalk/src/select\";\r\n\r\n.filter-default-value {\r\n  pointer-events: none;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  padding-top: 10px;\r\n  padding-left: 16px;\r\n}\r\n\r\n.help {\r\n  width: 24px !important;\r\n  height: 24px;\r\n  transform: scale(1.1);\r\n  cursor: pointer;\r\n}\r\n\r\n.popover {\r\n  color: rgb(48, 49, 51);\r\n  font-family: Asap;\r\n  margin: 12px;\r\n}\r\n\r\n.filter-icon-inside {\r\n  width: 12px !important;\r\n  height: 12px !important;\r\n  color: #292b66;\r\n  transform: scale(2) !important;\r\n  margin-bottom: 0px !important;\r\n}\r\n\r\n.cascader {\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  color: #292b66;\r\n  text-align: center;\r\n  padding-bottom: 6px;\r\n}\r\n\r\n.dataset-results-feedback {\r\n  float: right;\r\n  text-align: right;\r\n  color: rgb(48, 49, 51);\r\n  font-family: Asap;\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  padding-top: 8px;\r\n}\r\n\r\n.search-filters {\r\n  position: relative;\r\n  float: left;\r\n  padding-right: 15px;\r\n}\r\n\r\n.number-shown-select {\r\n  float: right;\r\n}\r\n\r\n.number-shown-select ::v-deep .el-input__inner {\r\n  width: 68px;\r\n  height: 40px;\r\n  color: rgb(48, 49, 51);\r\n}\r\n\r\n.filters ::v-deep .el-popover {\r\n    background: #f3ecf6 !important;\r\n    border: 1px solid $app-primary-color;\r\n    border-radius: 4px;\r\n    color: #303133 !important;\r\n    font-size: 12px;\r\n    line-height: 18px;\r\n}\r\n\r\n.filters ::v-deep .el-popover[x-placement^=\"top\"] .popper__arrow {\r\n  border-top-color: $app-primary-color;\r\n  border-bottom-width: 0;\r\n}\r\n.filters ::v-deep .el-popover[x-placement^=\"top\"] .popper__arrow::after {\r\n  border-top-color: #f3ecf6;\r\n  border-bottom-width: 0;\r\n}\r\n\r\n.filters ::v-deep .el-popover[x-placement^=\"bottom\"] .popper__arrow {\r\n  border-top-width: 0;\r\n  border-bottom-color: $app-primary-color;\r\n}\r\n.filters ::v-deep .el-popover[x-placement^=\"bottom\"] .popper__arrow::after {\r\n  border-top-width: 0;\r\n  border-bottom-color: #f3ecf6;\r\n}\r\n\r\n.filters ::v-deep .el-popover[x-placement^=\"right\"] .popper__arrow {\r\n  border-right-color: $app-primary-color;\r\n  border-left-width: 0;\r\n}\r\n.filters ::v-deep .el-popover[x-placement^=\"right\"] .popper__arrow::after {\r\n  border-right-color: #f3ecf6;\r\n  border-left-width: 0;\r\n}\r\n\r\n.filters ::v-deep .el-popover[x-placement^=\"left\"] .popper__arrow {\r\n  border-right-width: 0;\r\n  border-left-color: $app-primary-color;\r\n}\r\n.filters ::v-deep .el-popover[x-placement^=\"left\"] .popper__arrow::after {\r\n  border-right-width: 0;\r\n  border-left-color: #f3ecf6;\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\">\r\n.sidebar-cascader-popper {\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  color: #292b66;\r\n  text-align: center;\r\n  padding-bottom: 6px;\r\n}\r\n\r\n.sidebar-cascader-popper .el-cascader-node.is-active {\r\n  color: $app-primary-color;\r\n}\r\n\r\n.sidebar-cascader-popper .el-cascader-node.in-active-path {\r\n  color: $app-primary-color;\r\n}\r\n\r\n.sidebar-cascader-popper .el-checkbox__input.is-checked > .el-checkbox__inner {\r\n  background-color: $app-primary-color;\r\n  border-color: $app-primary-color;\r\n}\r\n\r\n.sidebar-cascader-popper .el-cascader-menu:nth-child(2) .el-cascader-node:first-child {\r\n  border-bottom: 1px solid #e4e7ed;\r\n}\r\n\r\n.sidebar-cascader-popper .el-cascader-node__label {\r\n  text-align: left;\r\n}\r\n\r\n.sidebar-cascader-popper .el-cascder-panel {\r\n  max-height: 500px;\r\n}\r\n\r\n.sidebar-cascader-popper .el-scrollbar__wrap {\r\n  overflow-x: hidden;\r\n  margin-bottom: 2px !important;\r\n}\r\n\r\n.sidebar-cascader-popper .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{\r\n  background-color: $app-primary-color;\r\n  border-color: $app-primary-color;\r\n}\r\n</style>"]}]}