@abi-software/map-side-bar 2.19.1-demo.0 → 2.20.0-acuppoints.0

package/src/components/CellCardExplorer.vue

@@ -1,879 +0,0 @@
-<template>
-  <el-card :body-style="bodyStyle" class="content-card">
-    <template #header>
-      <div class="header">
-        <div class="search-input-container" :class="{ 'is-focus': searchInput }">
-          <el-input
-            class="search-input"
-            placeholder="Search"
-            v-model="searchInput"
-            @keyup="searchEvent"
-            clearable
-            @clear="clearSearchClicked"
-          ></el-input>
-          <el-popover width="350" trigger="hover" popper-class="filter-help-popover">
-            <template #reference>
-              <MapSvgIcon icon="help" class="help" />
-            </template>
-            <div>
-              <strong>Search rules:</strong>
-              <ul>
-                <li>
-                  <strong>Multiple Terms:</strong>
-                  Separate terms with a comma (
-                  <code>,</code>
-                  ). This will find cell cards that match any of the terms (an "OR" search).
-                </li>
-                <li>
-                  <strong>Exact Phrase:</strong>
-                  Terms within a comma block will be matched as an exact phrase.
-                </li>
-              </ul>
-              <br />
-              <strong>Examples:</strong>
-              <ul>
-                <li>
-                  <strong>To find by exact phrase:</strong>
-                  Searching for
-                  <code>soma location</code>
-                  will find any card containing
-                  <code>"soma location"</code>
-                  .
-                </li>
-                <li>
-                  <strong>To find by multiple terms:</strong>
-                  Searching for
-                  <code>mouse, vagal</code>
-                  will find cards that contain either
-                  <code>mouse</code>
-                  OR
-                  <code>vagal</code>
-                  .
-                </li>
-              </ul>
-            </div>
-          </el-popover>
-        </div>
-        <el-button type="primary" class="button" @click="searchEvent" size="large">
-          Search
-        </el-button>
-        <el-button link class="el-button-link" @click="onResetClick" size="large">Reset</el-button>
-      </div>
-    </template>
-
-    <SearchFilters
-      class="filters"
-      ref="filtersRef"
-      :entry="filterEntry"
-      :envVars="envVars"
-      @filterResults="filterUpdate"
-      @numberPerPage="numberPerPageUpdate"
-      @loading="filtersLoading"
-      @cascaderReady="cascaderReady"
-    ></SearchFilters>
-
-    <SearchHistory
-      ref="searchHistory"
-      localStorageKey="sparc.science-cell-card-search-history"
-      @search="searchHistorySearch"
-    ></SearchHistory>
-
-    <div class="content scrollbar" v-loading="loadingCards" ref="content">
-      <CellCard
-        v-for="cellType in cellTypes"
-        :key="cellType.id"
-        :cellType="cellType"
-        :isActive="activeCardId === cellType.id"
-        @open="openCard(cellType.id)"
-        @close="closeCard"
-        @dataset-search="onDatasetSearch"
-        @connectivity-search="onConnectivitySearch"
-        @soma-location-hovered="showSomaLocation"
-        @related-cell-click="onRelatedCellClick"
-      />
-      <el-pagination
-        class="pagination"
-        v-model:current-page="page"
-        hide-on-single-page
-        large
-        layout="prev, pager, next"
-        :page-size="numberPerPage"
-        :total="totalFilteredCount"
-        @current-change="pageChange"
-      ></el-pagination>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import 'element-plus/es/components/message/style/css';
-import SearchFilters from './SearchFilters.vue';
-import SearchHistory from './SearchHistory.vue';
-import EventBus from './EventBus.js';
-import CellCard from './CellCard.vue';
-import { capitalise, generateUUID } from '../utils/common.js';
-import { MapSvgIcon } from '@abi-software/svg-sprite';
-
-let cachedCellCardsData = null;
-let pendingCellCardsRequest = null;
-
-export default {
-  components: {
-    SearchFilters,
-    SearchHistory,
-    CellCard,
-    MapSvgIcon,
-  },
-  name: 'CellCardExplorer',
-  emits: ['soma-location-hovered', 'dataset-search', 'connectivity-search', 'soma-locations-ready'],
-  props: {
-    envVars: {
-      type: Object,
-      default: () => {},
-    },
-    activeSpecies: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data: function () {
-    return {
-      bodyStyle: {
-        flex: '1 1 auto',
-        'flex-flow': 'column',
-        display: 'flex',
-      },
-      allCellTypes: [],
-      cellTypes: [],
-      filterOptions: [],
-      activeFilters: [],
-      searchInput: '',
-      numberPerPage: 10,
-      page: 1,
-      start: 0,
-      totalFilteredCount: 0,
-      loadingCards: false,
-      activeCardId: null,
-      cascaderIsReady: false,
-      geneBaseToDisplay: {},
-      geneDisplayToBase: {},
-    };
-  },
-  computed: {
-    filterEntry: function () {
-      return {
-        numberOfHits: this.totalFilteredCount,
-        filterFacets: this.activeFilters,
-        showFilters: true,
-        options: this.filterOptions,
-        helper: {
-          within: "'mouse' OR 'human'",
-          between: "'species' AND 'soma location'",
-        },
-      };
-    },
-  },
-  watch: {
-    activeSpecies: {
-      deep: true,
-      immediate: true,
-      handler: 'syncActiveSpeciesFilters',
-    },
-  },
-  mounted: function () {
-    this.fetchCellTypes(this.envVars.CELL_CARDS_API);
-  },
-  methods: {
-    syncCascaderFromActiveFilters: function () {
-      if (!this.cascaderIsReady || !this.$refs.filtersRef) {
-        return;
-      }
-
-      if (this.activeFilters.length) {
-        this.$refs.filtersRef.setCascader(this.activeFilters);
-        return;
-      }
-
-      this.$refs.filtersRef.checkShowAllBoxes();
-    },
-    syncActiveSpeciesFilters: function () {
-      this.page = 1;
-      this.start = 0;
-      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
-      const nonSpeciesFilters = this.activeFilters.filter((activeFilter) => {
-        return activeFilter?.term?.toLowerCase() !== 'species';
-      });
-
-      const speciesFilters = normalizedActiveSpecies.map((species) => {
-        return {
-          facetPropPath: 'species',
-          facet: capitalise(species),
-          term: 'Species',
-          tagLabel: capitalise(species),
-        };
-      });
-
-      this.activeFilters = [...nonSpeciesFilters, ...speciesFilters];
-      this.syncCascaderFromActiveFilters();
-      this.applyFilters(this.activeFilters);
-      this.emitSomaLocations(this.filterOptions);
-    },
-    getCellCardsData: async function (url) {
-      if (cachedCellCardsData) {
-        return cachedCellCardsData;
-      }
-
-      if (!pendingCellCardsRequest) {
-        pendingCellCardsRequest = fetch(url)
-          .then((response) => {
-            if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            return response.json();
-          })
-          .then((data) => {
-            cachedCellCardsData = data;
-            return data;
-          })
-          .finally(() => {
-            pendingCellCardsRequest = null;
-          });
-      }
-
-      return pendingCellCardsRequest;
-    },
-    fetchCellTypes: async function (url) {
-      if (url) {
-        this.loadingCards = true;
-        try {
-          const data = await this.getCellCardsData(url);
-          if (data.DEFAULT_CELL_TYPES) {
-            const loadedCellTypes = data.DEFAULT_CELL_TYPES.map((cellType) => {
-              return {
-                ...cellType,
-                id: generateUUID(),
-              };
-            });
-
-            this.setGeneMappings(data.DEFAULT_GENES);
-            this.allCellTypes = loadedCellTypes;
-            this.filterOptions = this.buildFilterOptions(loadedCellTypes);
-            this.emitSomaLocations(this.filterOptions);
-            this.syncActiveSpeciesFilters();
-          }
-        } catch (error) {
-          console.error('Error fetching cell types:', error);
-        } finally {
-          this.loadingCards = false;
-        }
-      }
-    },
-    activateCard: function (cardId) {
-      this.activeCardId = this.activeCardId === cardId ? null : cardId;
-    },
-    openCard: function (cardId) {
-      this.activeCardId = cardId;
-    },
-    closeCard: function () {
-      this.activeCardId = null;
-    },
-    openSearch: function (filters, query) {
-      this.page = 1;
-      this.start = 0;
-      this.searchInput = String(query || '').trim();
-
-      const openSearchFilters = filters.map((filter) => {
-        return {
-          facetPropPath: 'somaLocations',
-          facet: capitalise(filter.facet || ''),
-          term: filter.term || '',
-          tagLabel: capitalise(filter.facet || ''),
-        };
-      });
-      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
-      const speciesFilters = normalizedActiveSpecies.map((species) => {
-        return {
-          facetPropPath: 'species',
-          facet: capitalise(species),
-          term: 'Species',
-          tagLabel: capitalise(species),
-        };
-      });
-
-      this.activeFilters = [...openSearchFilters, ...speciesFilters];
-      this.syncCascaderFromActiveFilters();
-      this.applyFilters(this.activeFilters);
-      this.emitSomaLocations(this.filterOptions);
-      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
-      this.$nextTick(() => this.scrollToTop());
-    },
-    clearSearchClicked: function () {
-      this.searchInput = '';
-      this.searchAndFilterUpdate();
-    },
-    searchEvent: function (event = false) {
-      if (event.keyCode === 13 || event instanceof MouseEvent) {
-        this.searchInput = this.searchInput.trim();
-        this.searchAndFilterUpdate();
-      }
-    },
-    onResetClick: function () {
-      this.searchInput = '';
-      this.activeFilters = [];
-      this.page = 1;
-      this.start = 0;
-      this.$refs.filtersRef?.checkShowAllBoxes();
-      if (this.$refs.searchHistory) {
-        this.$refs.searchHistory.selectValue = 'Search history';
-      }
-      this.applyFilters(this.activeFilters);
-      this.emitSomaLocations(this.filterOptions);
-
-      EventBus.emit('trackEvent', {
-        event_name: `portal_maps_action_filter`,
-        category: `reset`,
-        location: 'map_sidebar_cell_card_explorer',
-      });
-    },
-    searchAndFilterUpdate: function () {
-      this.page = 1;
-      this.start = 0;
-      this.applyFilters(this.activeFilters);
-      this.emitSomaLocations(this.filterOptions);
-      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
-    },
-    filterUpdate: function (filters) {
-      this.activeFilters = [...filters];
-      this.page = 1;
-      this.start = 0;
-      this.applyFilters(this.activeFilters);
-      this.emitSomaLocations(this.filterOptions);
-      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
-      this.loadingCards = false;
-    },
-    numberPerPageUpdate: function (value) {
-      this.numberPerPage = parseInt(value, 10) || 10;
-
-      EventBus.emit('trackEvent', {
-        event_name: `portal_maps_cell_card_perPage`,
-        category: value + '',
-        location: 'map_sidebar_cell_card_explorer',
-      });
-
-      const preventPaginationTracking = this.page === 1;
-      this.pageChange(1, preventPaginationTracking);
-    },
-    pageChange: function (page, preventTracking = false) {
-      this.page = page;
-      this.start = (page - 1) * this.numberPerPage;
-      this.applyFilters(this.activeFilters);
-      this.scrollToTop();
-
-      if (!preventTracking) {
-        EventBus.emit('trackEvent', {
-          event_name: `portal_maps_cell_card_pagination`,
-          category: `page_${this.page}`,
-          location: 'map_sidebar_cell_card_explorer',
-        });
-      }
-    },
-    scrollToTop: function () {
-      if (this.$refs.content) {
-        this.$refs.content.scroll({ top: 0, behavior: 'smooth' });
-      }
-    },
-    filtersLoading: function () {
-      // SearchFilters only emits loading:true and never emits false.
-      // CellCardExplorer filters synchronously, so loading is reset in filterUpdate.
-    },
-    searchHistoryUpdate: function (filters, search) {
-      if (this.$refs.searchHistory) {
-        this.$refs.searchHistory.selectValue = 'Search history';
-        // save history only if there has value
-        if (filters.length || search?.trim()) {
-          this.$refs.searchHistory.addSearchToHistory(filters, search);
-        }
-      }
-    },
-    searchHistorySearch: function (item) {
-      this.searchInput = item.search || '';
-      this.activeFilters = Array.isArray(item.filters) ? [...item.filters] : [];
-      this.page = 1;
-      this.start = 0;
-      this.applyFilters(this.activeFilters);
-
-      if (this.$refs.filtersRef) {
-        if (this.activeFilters.length) {
-          this.$refs.filtersRef.setCascader(this.activeFilters);
-        } else {
-          this.$refs.filtersRef.checkShowAllBoxes();
-        }
-      }
-
-      this.emitSomaLocations(this.filterOptions);
-    },
-    cascaderReady: function () {
-      this.cascaderIsReady = true;
-      this.syncCascaderFromActiveFilters();
-    },
-    normalizeFacetValue: function (value) {
-      return String(value || '')
-        .trim()
-        .toLowerCase();
-    },
-    getSelectedSomaLocationFilters: function () {
-      return (this.activeFilters || [])
-        .filter((filter) => {
-          return (
-            this.normalizeFacetValue(filter?.term) === 'soma location' &&
-            this.normalizeFacetValue(filter?.facet) !== 'show all'
-          );
-        })
-        .map((filter) => this.normalizeFacetValue(filter?.facet))
-        .filter(Boolean);
-    },
-    getAvailableSpeciesSet: function () {
-      const availableSpecies = new Set();
-
-      this.allCellTypes.forEach((cellType) => {
-        const species = this.normalizeFacetValue(cellType?.species);
-        if (species) {
-          availableSpecies.add(species);
-        }
-      });
-
-      return availableSpecies;
-    },
-    getValidatedActiveSpecies: function () {
-      const availableSpecies = this.getAvailableSpeciesSet();
-      const normalizedActiveSpecies = this.activeSpecies
-        .map((species) => this.normalizeActiveSpeciesFilterTerm(species))
-        .filter(Boolean);
-
-      return [...new Set(normalizedActiveSpecies)].filter((species) => {
-        return availableSpecies.has(species);
-      });
-    },
-    getCellTypesForActiveSpecies: function () {
-      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
-      if (!normalizedActiveSpecies.length) {
-        return this.allCellTypes;
-      }
-
-      const activeSpeciesSet = new Set(normalizedActiveSpecies);
-      return this.allCellTypes.filter((cellType) => {
-        const normalizedCellTypeSpecies = this.normalizeActiveSpeciesFilterTerm(cellType?.species);
-        return activeSpeciesSet.has(normalizedCellTypeSpecies);
-      });
-    },
-    // To update the species from the flatmap,
-    // mainly from "human male" and "human female" to "human".
-    normalizeActiveSpeciesFilterTerm: function (value) {
-      const normalized = this.normalizeFacetValue(value);
-      if (normalized === 'human male' || normalized === 'human female') {
-        return 'human';
-      }
-      return normalized;
-    },
-    setGeneMappings: function (genes) {
-      const baseToDisplay = {};
-      const displayToBase = {};
-
-      (Array.isArray(genes) ? genes : []).forEach((gene) => {
-        const base = this.normalizeFacetValue(gene?.base);
-        const display = String(gene?.display || '').trim();
-        const normalizedDisplay = this.normalizeFacetValue(display);
-
-        if (!base) return;
-
-        if (display) {
-          baseToDisplay[base] = display;
-          displayToBase[normalizedDisplay] = base;
-          return;
-        }
-
-        baseToDisplay[base] = base;
-      });
-
-      this.geneBaseToDisplay = baseToDisplay;
-      this.geneDisplayToBase = displayToBase;
-    },
-    normalizeSearchTerms: function (query) {
-      return String(query || '')
-        .split(',')
-        .map((term) => term.trim().toLowerCase())
-        .filter(Boolean);
-    },
-    getCellTypeSearchText: function (cellType) {
-      const relatedCellLabels = (cellType.relatedCells || [])
-        .map((relatedCell) => relatedCell.label)
-        .filter(Boolean)
-        .join(' ');
-
-      return [
-        cellType.preferredLabel,
-        cellType.entity,
-        cellType.species,
-        (cellType.somaLocations || []).join(' '),
-        cellType.circuitRole,
-        cellType.creLine,
-        cellType.geneExpressionString,
-        cellType.fiberTypeString,
-        cellType.physiologyString,
-        cellType.sourceNomenclatureLabel,
-        relatedCellLabels,
-      ]
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase();
-    },
-    matchSearchQuery: function (cellType, searchTerms) {
-      if (!searchTerms.length) {
-        return true;
-      }
-
-      const searchableText = this.getCellTypeSearchText(cellType);
-      return searchTerms.some((term) => searchableText.includes(term));
-    },
-    buildFacetChildren: function (cellTypes, key) {
-      const values = new Set();
-
-      cellTypes.forEach((cellType) => {
-        const fieldValue = cellType[key];
-        if (Array.isArray(fieldValue)) {
-          fieldValue.forEach((item) => {
-            const normalized = String(item || '').trim();
-            if (normalized) values.add(normalized);
-          });
-          return;
-        }
-
-        const normalized = String(fieldValue || '').trim();
-        if (normalized) values.add(normalized);
-      });
-
-      return [...values]
-        .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
-        .map((value) => ({ label: value }));
-    },
-    buildFilterOptions: function (cellTypes) {
-      const options = [
-        {
-          key: 'species',
-          label: 'Species',
-          children: this.buildFacetChildren(cellTypes, 'species'),
-        },
-        {
-          key: 'somaLocations',
-          label: 'Soma location',
-          children: this.buildFacetChildren(cellTypes, 'somaLocations'),
-        },
-        {
-          key: 'geneBaseNames',
-          label: 'Gene',
-          children: this.buildGeneFacetChildren(cellTypes),
-        },
-        {
-          key: 'sourceNomenclatureLabel',
-          label: 'Source',
-          children: this.buildFacetChildren(cellTypes, 'sourceNomenclatureLabel'),
-        },
-        {
-          key: 'notes',
-          label: 'Notes',
-          children: [{ label: 'with notes' }, { label: 'without notes' }],
-        },
-      ];
-
-      return options.filter((option) => option.children.length > 0);
-    },
-    emitSomaLocations: function (filterOptions) {
-      const somaLocationOption = (filterOptions || []).find(
-        (option) => option.key === 'somaLocations',
-      );
-      const availableDataRaw = localStorage.getItem('available-name-curie-mapping');
-      const availableData = availableDataRaw ? JSON.parse(availableDataRaw) : {};
-      const selectedSomaLocationFilters = this.getSelectedSomaLocationFilters();
-      const shouldFilterBySelectedSomaLocations =
-        (this.activeFilters || []).length > 0 && selectedSomaLocationFilters.length > 0;
-      const selectedSomaLocationSet = new Set(selectedSomaLocationFilters);
-      const filteredCellTypes = this.getFilteredCellTypes(this.activeFilters, this.searchInput);
-      const somaLocationCounts = filteredCellTypes.reduce((counts, cellType) => {
-        (Array.isArray(cellType?.somaLocations) ? cellType.somaLocations : []).forEach(
-          (location) => {
-            const normalizedLocation = String(location || '')
-              .trim()
-              .toLowerCase();
-            if (!normalizedLocation) return;
-            counts.set(normalizedLocation, (counts.get(normalizedLocation) || 0) + 1);
-          },
-        );
-        return counts;
-      }, new Map());
-      const somaLocations = (somaLocationOption?.children || [])
-        .map((child) => String(child?.label || '').trim())
-        .filter(Boolean)
-        .filter((label) => {
-          if (!shouldFilterBySelectedSomaLocations) {
-            return true;
-          }
-
-          return selectedSomaLocationSet.has(label.toLowerCase());
-        })
-        .map((label) => {
-          const curie =
-            Object.keys(availableData).find(
-              (curie) => String(availableData[curie] || '').toLowerCase() === label.toLowerCase(),
-            ) || '';
-
-          return {
-            label,
-            curie,
-            count: somaLocationCounts.get(label.toLowerCase()) || 0,
-          };
-        });
-
-      const uniqueSomaLocations = [
-        ...new Map(somaLocations.map((item) => [item.label.toLowerCase(), item])).values(),
-      ];
-
-      this.$emit('soma-locations-ready', uniqueSomaLocations);
-    },
-    buildGeneFacetChildren: function (cellTypes) {
-      const values = new Set();
-
-      cellTypes.forEach((cellType) => {
-        (cellType.geneBaseNames || []).forEach((geneBaseName) => {
-          const normalizedBase = this.normalizeFacetValue(geneBaseName);
-          if (normalizedBase) values.add(normalizedBase);
-        });
-      });
-
-      return [...values]
-        .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
-        .map((base) => ({
-          label: this.geneBaseToDisplay[base] || base,
-        }));
-    },
-    matchFieldFilter: function (cellType, filter) {
-      const filterFacet = this.normalizeFacetValue(filter.facet);
-      const filterTerm = this.normalizeFacetValue(filter.term);
-
-      if (!filterFacet || filterFacet === 'show all') {
-        return true;
-      }
-
-      if (filterTerm === 'species') {
-        return this.normalizeFacetValue(cellType.species) === filterFacet;
-      }
-
-      if (filterTerm === 'soma location') {
-        return (cellType.somaLocations || []).some((location) => {
-          return this.normalizeFacetValue(location) === filterFacet;
-        });
-      }
-
-      if (filterTerm === 'gene') {
-        const selectedGeneBase = this.geneDisplayToBase[filterFacet] || filterFacet;
-        return (cellType.geneBaseNames || []).some((geneBaseName) => {
-          return this.normalizeFacetValue(geneBaseName) === selectedGeneBase;
-        });
-      }
-
-      if (filterTerm === 'circuit role') {
-        return this.normalizeFacetValue(cellType.circuitRole) === filterFacet;
-      }
-
-      if (filterTerm === 'source') {
-        return this.normalizeFacetValue(cellType.sourceNomenclatureLabel) === filterFacet;
-      }
-
-      if (filterTerm === 'notes') {
-        const hasNotes = cellType.alertNotes?.length > 0 || cellType.curatorNotes?.length > 0;
-        if (filterFacet === 'with notes') return hasNotes;
-        if (filterFacet === 'without notes') return !hasNotes;
-        return false;
-      }
-
-      return false;
-    },
-    getFilteredCellTypes: function (filters = this.activeFilters, searchInput = this.searchInput) {
-      const searchTerms = this.normalizeSearchTerms(searchInput);
-      const activeFilters = (filters || []).filter((filter) => {
-        return (
-          filter?.term && filter?.facet && this.normalizeFacetValue(filter.facet) !== 'show all'
-        );
-      });
-
-      const filtersByTerm = activeFilters.reduce((grouped, filter) => {
-        const termKey = this.normalizeFacetValue(filter.term);
-        if (!grouped[termKey]) {
-          grouped[termKey] = [];
-        }
-        grouped[termKey].push(filter);
-        return grouped;
-      }, {});
-
-      const filterGroups = Object.values(filtersByTerm);
-
-      return this.allCellTypes
-        .filter((cellType) => {
-          return filterGroups.every((termGroup) => {
-            return termGroup.some((filter) => this.matchFieldFilter(cellType, filter));
-          });
-        })
-        .filter((cellType) => this.matchSearchQuery(cellType, searchTerms));
-    },
-    applyFilters: function (filters) {
-      const filtered = this.getFilteredCellTypes(filters, this.searchInput);
-
-      this.totalFilteredCount = filtered.length;
-      this.cellTypes = filtered.slice(this.start, this.start + this.numberPerPage);
-
-      if (!this.cellTypes.some((cellType) => cellType.id === this.activeCardId)) {
-        this.activeCardId = null;
-      }
-
-      this.$emit('search-changed', {
-        query: this.searchInput,
-        filter: filters,
-        tabType: 'cellType',
-      });
-    },
-    onRelatedCellClick: function (relatedCell) {
-      const species = relatedCell.species;
-      const label = relatedCell.label;
-
-      // Normalize species (e.g., "human male" -> "human")
-      const normalizedSpecies = this.normalizeActiveSpeciesFilterTerm(species);
-
-      // Check if this species filter already exists
-      const speciesFilterExists = this.activeFilters.some(function (filter) {
-        return (
-          this.normalizeFacetValue(filter.term) === 'species' &&
-          this.normalizeFacetValue(filter.facet) === this.normalizeFacetValue(normalizedSpecies)
-        );
-      }, this);
-
-      // Add species filter if not already present
-      if (!speciesFilterExists && normalizedSpecies) {
-        this.activeFilters.push({
-          facetPropPath: 'species',
-          facet: capitalise(normalizedSpecies),
-          term: 'Species',
-          tagLabel: capitalise(normalizedSpecies),
-        });
-      }
-
-      // Clear search input to avoid text search interfering
-      this.searchInput = '';
-      this.page = 1;
-      this.start = 0;
-
-      // Apply filters and sync cascader UI
-      this.applyFilters(this.activeFilters);
-      this.syncCascaderFromActiveFilters();
-      this.emitSomaLocations(this.filterOptions);
-
-      // Find the matching cell type by preferredLabel and open its card
-      const matchingCellType = this.allCellTypes.find(function (ct) {
-        return (ct.preferredLabel || '').toLowerCase() === (label || '').toLowerCase();
-      });
-
-      if (matchingCellType) {
-        this.activeCardId = matchingCellType.id;
-      }
-
-      this.$nextTick(function () {
-        this.scrollToTop();
-      });
-    },
-    showSomaLocation: function (name) {
-      this.$emit('soma-location-hovered', name);
-    },
-    onDatasetSearch: function (query) {
-      this.$emit('dataset-search', query);
-    },
-    onConnectivitySearch: function (query) {
-      this.$emit('connectivity-search', query);
-    },
-    getSearch: function () {
-      return this.searchInput;
-    },
-    getFilters: function () {
-      const hasFilters = this.activeFilters.some((f) => f.facet.toLowerCase() !== 'show all');
-      return hasFilters ? this.activeFilters : [];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '../assets/searchPopover.scss';
-@use '../assets/pagination.scss';
-
-.content-card {
-  height: 100%;
-  flex-flow: column;
-  display: flex;
-  border: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.content-card :deep(.el-card__header) {
-  background-color: #292b66;
-  padding: 1rem;
-}
-
-.content-card :deep(.el-card__body) {
-  background-color: #f7faff;
-  overflow-y: hidden;
-  padding: 1rem;
-}
-
-.content {
-  // width: 515px;
-  flex: 1 1 auto;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-  background-color: #ffffff;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  border-radius: var(--el-border-radius-base);
-  position: relative;
-  max-height: 100%;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 12px;
-  right: -12px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  background-color: #979797;
-}
-
-.el-button-link {
-  color: white !important;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  border-color: transparent !important;
-  background-color: transparent !important;
-  padding: 2px !important;
-  height: auto !important;
-
-  &:hover {
-    text-decoration-color: transparent;
-    box-shadow: none !important;
-  }
-}
-</style>