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