@abi-software/map-side-bar 2.14.8-demo.2 → 2.14.8-demo.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.8-demo.2",
+  "version": "2.14.8-demo.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/CellCard.vue

@@ -152,8 +152,16 @@
         </div>
         <div v-if="cellType.relatedCells?.length" class="card-section">
           <div class="card-section-title">Related Species Variants</div>
-          <ul v-for="relatedCell in cellType.relatedCells" :key="relatedCell">
-            <li>{{ relatedCell.label }}</li>
+          <ul class="related-cell-list">
+            <li v-for="relatedCell in cellType.relatedCells" :key="relatedCell">
+              <button
+                class="related-cell-item"
+                @click.stop="$emit('related-cell-click', relatedCell)"
+                title="Click to view this cell type"
+              >
+                {{ relatedCell.label }}
+              </button>
+            </li>
           </ul>
         </div>
         <div v-if="cellType.sourceNomenclature" class="card-section source-publication-section">
@@ -236,7 +244,7 @@ export default {
       default: false,
     },
   },
-  emits: ['open', 'close', 'soma-location-hovered', 'dataset-search', 'connectivity-search'],
+  emits: ['open', 'close', 'soma-location-hovered', 'dataset-search', 'connectivity-search', 'related-cell-click'],
   data() {
     return {
       cardElement: null,
@@ -741,6 +749,11 @@ export default {
     margin: 0;
     padding-left: 1rem;
 
+    &.related-cell-list {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
     li {
       color: #606266;
     }
@@ -955,4 +968,27 @@ export default {
     }
   }
 }
+
+.related-cell-list {
+  li + li {
+    margin-top: 0.5rem;
+  }
+}
+
+.related-cell-item {
+  cursor: pointer;
+  color: $app-primary-color;
+  background: none;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  transition: background-color 0.2s ease, border-color 0.2s ease, text-decoration-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.08);
+  }
+}
 </style>

package/src/components/CellCardExplorer.vue

@@ -92,6 +92,7 @@
         @dataset-search="onDatasetSearch"
         @connectivity-search="onConnectivitySearch"
         @soma-location-hovered="showSomaLocation"
+        @related-cell-click="onRelatedCellClick"
       />
       <el-pagination
         class="pagination"
@@ -739,6 +740,52 @@ export default {
         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);
     },