{"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:DQpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvb3B0aW9uIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9wb3BvdmVyIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9zZWxlY3QiOw0KDQouZmlsdGVyLWRlZmF1bHQtdmFsdWUgew0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDA7DQogIGxlZnQ6IDA7DQogIHBhZGRpbmctdG9wOiAxMHB4Ow0KICBwYWRkaW5nLWxlZnQ6IDE2cHg7DQp9DQoNCi5oZWxwIHsNCiAgd2lkdGg6IDI0cHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiAyNHB4Ow0KICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7DQogIGN1cnNvcjogcG9pbnRlcjsNCn0NCg0KLnBvcG92ZXIgew0KICBjb2xvcjogcmdiKDQ4LCA0OSwgNTEpOw0KICBmb250LWZhbWlseTogQXNhcDsNCiAgbWFyZ2luOiAxMnB4Ow0KfQ0KDQouZmlsdGVyLWljb24taW5zaWRlIHsNCiAgd2lkdGg6IDEycHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiAxMnB4ICFpbXBvcnRhbnQ7DQogIGNvbG9yOiAjMjkyYjY2Ow0KICB0cmFuc2Zvcm06IHNjYWxlKDIpICFpbXBvcnRhbnQ7DQogIG1hcmdpbi1ib3R0b206IDBweCAhaW1wb3J0YW50Ow0KfQ0KDQouY2FzY2FkZXIgew0KICBmb250LWZhbWlseTogQXNhcDsNCiAgZm9udC1zaXplOiAxNHB4Ow0KICBmb250LXdlaWdodDogNTAwOw0KICBmb250LXN0cmV0Y2g6IG5vcm1hbDsNCiAgZm9udC1zdHlsZTogbm9ybWFsOw0KICBsaW5lLWhlaWdodDogbm9ybWFsOw0KICBsZXR0ZXItc3BhY2luZzogbm9ybWFsOw0KICBjb2xvcjogIzI5MmI2NjsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KICBwYWRkaW5nLWJvdHRvbTogNnB4Ow0KfQ0KDQouY2FzY2FkZXIgOjp2LWRlZXAgLmVsLWNhc2NkZXItcGFuZWwgew0KICBtYXgtaGVpZ2h0OiA1MDBweDsNCn0NCg0KLmNhc2NhZGVyOjp2LWRlZXAgLmVsLXNjcm9sbGJhcl9fd3JhcCB7DQogIG92ZXJmbG93LXg6IGhpZGRlbjsNCiAgbWFyZ2luLWJvdHRvbTogMnB4ICFpbXBvcnRhbnQ7DQp9DQoNCi5jYXNjYWRlciA6OnYtZGVlcCBsaVthcmlhLW93bnMqPSJjYXNjYWRlciJdID4gLmVsLWNoZWNrYm94IHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCg0KLmRhdGFzZXQtcmVzdWx0cy1mZWVkYmFjayB7DQogIGZsb2F0OiByaWdodDsNCiAgdGV4dC1hbGlnbjogcmlnaHQ7DQogIGNvbG9yOiByZ2IoNDgsIDQ5LCA1MSk7DQogIGZvbnQtZmFtaWx5OiBBc2FwOw0KICBmb250LXNpemU6IDE4cHg7DQogIGZvbnQtd2VpZ2h0OiA1MDA7DQogIHBhZGRpbmctdG9wOiA4cHg7DQp9DQoNCi5zZWFyY2gtZmlsdGVycyB7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgZmxvYXQ6IGxlZnQ7DQogIHBhZGRpbmctcmlnaHQ6IDE1cHg7DQogIHBhZGRpbmctYm90dG9tOiAxMnB4Ow0KfQ0KDQoubnVtYmVyLXNob3duLXNlbGVjdCB7DQogIGZsb2F0OiByaWdodDsNCn0NCg0KLm51bWJlci1zaG93bi1zZWxlY3QgOjp2LWRlZXAgLmVsLWlucHV0X19pbm5lciB7DQogIHdpZHRoOiA2OHB4Ow0KICBoZWlnaHQ6IDQwcHg7DQogIGNvbG9yOiByZ2IoNDgsIDQ5LCA1MSk7DQp9DQoNCi5zZWFyY2gtZmlsdGVycyA6OnYtZGVlcCAuZWwtY2FzY2FkZXItbm9kZS5pcy1hY3RpdmUgew0KICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KfQ0KDQouc2VhcmNoLWZpbHRlcnMgOjp2LWRlZXAgLmVsLWNhc2NhZGVyLW5vZGUuaW4tYWN0aXZlLXBhdGggew0KICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KfQ0KDQouc2VhcmNoLWZpbHRlcnMgOjp2LWRlZXAgLmVsLWNoZWNrYm94X19pbnB1dC5pcy1jaGVja2VkID4gLmVsLWNoZWNrYm94X19pbm5lciB7DQogIGJhY2tncm91bmQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCiAgYm9yZGVyLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7DQp9DQoNCi5jYXNjYWRlciA6OnYtZGVlcCAuZWwtY2FzY2FkZXItbWVudTpudGgtY2hpbGQoMikgLmVsLWNhc2NhZGVyLW5vZGU6Zmlyc3QtY2hpbGQgew0KICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2U0ZTdlZDsNCn0NCg0KLmNhc2NhZGVyIDo6di1kZWVwIC5lbC1jYXNjYWRlci1ub2RlX19sYWJlbCB7DQogIHRleHQtYWxpZ246IGxlZnQ7DQp9DQoNCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyIHsNCiAgICBiYWNrZ3JvdW5kOiAjZjNlY2Y2ICFpbXBvcnRhbnQ7DQogICAgYm9yZGVyOiAxcHggc29saWQgJGFwcC1wcmltYXJ5LWNvbG9yOw0KICAgIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgICBjb2xvcjogIzMwMzEzMyAhaW1wb3J0YW50Ow0KICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICBsaW5lLWhlaWdodDogMThweDsNCn0NCg0KLmZpbHRlcnMgOjp2LWRlZXAgLmVsLXBvcG92ZXJbeC1wbGFjZW1lbnRePSJ0b3AiXSAucG9wcGVyX19hcnJvdyB7DQogIGJvcmRlci10b3AtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCiAgYm9yZGVyLWJvdHRvbS13aWR0aDogMDsNCn0NCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0idG9wIl0gLnBvcHBlcl9fYXJyb3c6OmFmdGVyIHsNCiAgYm9yZGVyLXRvcC1jb2xvcjogI2YzZWNmNjsNCiAgYm9yZGVyLWJvdHRvbS13aWR0aDogMDsNCn0NCg0KLmZpbHRlcnMgOjp2LWRlZXAgLmVsLXBvcG92ZXJbeC1wbGFjZW1lbnRePSJib3R0b20iXSAucG9wcGVyX19hcnJvdyB7DQogIGJvcmRlci10b3Atd2lkdGg6IDA7DQogIGJvcmRlci1ib3R0b20tY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCn0NCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0iYm90dG9tIl0gLnBvcHBlcl9fYXJyb3c6OmFmdGVyIHsNCiAgYm9yZGVyLXRvcC13aWR0aDogMDsNCiAgYm9yZGVyLWJvdHRvbS1jb2xvcjogI2YzZWNmNjsNCn0NCg0KLmZpbHRlcnMgOjp2LWRlZXAgLmVsLXBvcG92ZXJbeC1wbGFjZW1lbnRePSJyaWdodCJdIC5wb3BwZXJfX2Fycm93IHsNCiAgYm9yZGVyLXJpZ2h0LWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7DQogIGJvcmRlci1sZWZ0LXdpZHRoOiAwOw0KfQ0KLmZpbHRlcnMgOjp2LWRlZXAgLmVsLXBvcG92ZXJbeC1wbGFjZW1lbnRePSJyaWdodCJdIC5wb3BwZXJfX2Fycm93OjphZnRlciB7DQogIGJvcmRlci1yaWdodC1jb2xvcjogI2YzZWNmNjsNCiAgYm9yZGVyLWxlZnQtd2lkdGg6IDA7DQp9DQoNCi5maWx0ZXJzIDo6di1kZWVwIC5lbC1wb3BvdmVyW3gtcGxhY2VtZW50Xj0ibGVmdCJdIC5wb3BwZXJfX2Fycm93IHsNCiAgYm9yZGVyLXJpZ2h0LXdpZHRoOiAwOw0KICBib3JkZXItbGVmdC1jb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KfQ0KLmZpbHRlcnMgOjp2LWRlZXAgLmVsLXBvcG92ZXJbeC1wbGFjZW1lbnRePSJsZWZ0Il0gLnBvcHBlcl9fYXJyb3c6OmFmdGVyIHsNCiAgYm9yZGVyLXJpZ2h0LXdpZHRoOiAwOw0KICBib3JkZXItbGVmdC1jb2xvcjogI2YzZWNmNjsNCn0NCg=="},{"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>\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          :options=\"options\"\r\n          :props=\"props\"\r\n          @change=\"cascadeEvent($event)\"\r\n          @expand-change=\"cascadeExpandChange\"\r\n          :show-all-levels=\"false\"\r\n          :append-to-body=\"false\"\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, facet) {\r\n      if (facet) return term + \">\" + facet;\r\n      else return term;\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              });\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          facetPropPath: fs[0], \r\n          facet: fs[1].split(\">\")[1],\r\n          term: fs[1].split(\">\")[0], \r\n          AND: fs[2] // for setting the boolean\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 propPath = fs[0].includes('duplicate') ? fs[0].split('duplicate')[0] : fs[0]\r\n          return {\r\n            facetPropPath: propPath, \r\n            facet: fs[1].split(\">\")[1],\r\n            term: fs[1].split(\">\")[0], \r\n            AND: fs[2] // for setting the boolean\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.makeCascadeLabelsClickable();\r\n      }\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.makeCascadeLabelsClickable();\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          return [\r\n            e.facetPropPath,\r\n            this.createCascaderItemValue(capitalise(e.term), e.facet),\r\n          ]\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 (filter) {\r\n      //Do not set the value unless it is ready\r\n      if (this.cascaderIsReady && filter) {\r\n        if (this.validateFilter(filter)) {\r\n          this.cascadeSelected.filter(f=>f.term != filter.term)\r\n          this.cascadeSelected.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])\r\n          this.cascadeSelectedWithBoolean.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), 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        this.$refs.cascader.$el\r\n          .querySelectorAll(\".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     * Validate ther filter term to make sure the term is correct\r\n     */\r\n    validateFilter: function(filter) {\r\n      if (filter && filter.facet && filter.term) {\r\n        const item = this.createCascaderItemValue(filter.term, filter.facet);\r\n        const facet = this.options.find(element => element.value === filter.facetPropPath);\r\n        if (facet) {\r\n          const filter = facet.children.find(element => element.value === item);\r\n          if (filter)\r\n            return true;\r\n        }\r\n      }\r\n      return false;\r\n    },\r\n    /**\r\n     * Return a list of valid filers given a list of filters, \r\n     */\r\n    getValidatedFilters: function (filters) {\r\n      if (filters) {\r\n        if (this.cascaderIsReady) {\r\n          const result = [];\r\n          filters.forEach(filter => {\r\n            if (this.validateFilter(filter)) {\r\n              result.push(filter);\r\n            }\r\n          });\r\n          return result;\r\n        } else return filters;\r\n      }\r\n      return [];\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.makeCascadeLabelsClickable();\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.cascader ::v-deep .el-cascder-panel {\r\n  max-height: 500px;\r\n}\r\n\r\n.cascader::v-deep .el-scrollbar__wrap {\r\n  overflow-x: hidden;\r\n  margin-bottom: 2px !important;\r\n}\r\n\r\n.cascader ::v-deep li[aria-owns*=\"cascader\"] > .el-checkbox {\r\n  display: none;\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  padding-bottom: 12px;\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.search-filters ::v-deep .el-cascader-node.is-active {\r\n  color: $app-primary-color;\r\n}\r\n\r\n.search-filters ::v-deep .el-cascader-node.in-active-path {\r\n  color: $app-primary-color;\r\n}\r\n\r\n.search-filters ::v-deep .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.cascader ::v-deep .el-cascader-menu:nth-child(2) .el-cascader-node:first-child {\r\n  border-bottom: 1px solid #e4e7ed;\r\n}\r\n\r\n.cascader ::v-deep .el-cascader-node__label {\r\n  text-align: left;\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"]}]}