@abi-software/map-side-bar 2.14.8-demo.6 → 2.15.0

package/src/components/SideBar.vue

@@ -65,20 +65,6 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
-            <template v-else-if="tab.type === 'cellCardExplorer' && showCellCards">
-              <CellCardExplorer
-                :ref="'cellCardExplorerTab_' + tab.id"
-                class="sidebar-content-container"
-                v-show="tab.id === activeTabId"
-                :envVars="envVars"
-                :activeSpecies="activeSpeciesForEntries"
-                @search-changed="searchChanged(tab.id, $event)"
-                @dataset-search="openDatasetSearchFromCellCard($event)"
-                @connectivity-search="openConnectivitySearch($event.facets, $event.query)"
-                @soma-location-hovered="showSomaLocation"
-                @soma-locations-ready="onSomaLocationsReady"
-              />
-            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -109,7 +95,6 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityExplorer from './ConnectivityExplorer.vue'
-import CellCardExplorer from './CellCardExplorer.vue'
 import { removeShowAllFacets } from '../algolia/utils.js'
 
 /**
@@ -125,7 +110,6 @@ export default {
     Icon,
     AnnotationTool,
     ConnectivityExplorer,
-    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
@@ -135,7 +119,6 @@ export default {
         { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
         { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
         { title: 'Annotation', id: 3, type: 'annotation', closable: true },
-        { title: 'Cell Card Explorer', id: 4, type: 'cellCardExplorer', closable: false },
       ],
     },
     /**
@@ -201,10 +184,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showCellCards: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: function () {
     return {
@@ -213,17 +192,12 @@ export default {
       activeTabId: 1,
       activeAnnotationData: { tabType: "annotation" },
       activeConnectivityData: { tabType: "connectivity" },
-      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
           filters: [],
         },
-        connectivity: {
-          search: '',
-          filters: [],
-        },
-        cellCards: {
+        connectivity:  {
           search: '',
           filters: [],
         },
@@ -261,16 +235,6 @@ export default {
         this.activeAnnotationData = data;
       }
     },
-    /**
-     * This event is emitted when the mouse hover on or off a soma location in cell card explorer.
-     * @param name Soma location
-     */
-    showSomaLocation: function (name) {
-      this.$emit('soma-location-hovered', name);
-    },
-    onSomaLocationsReady: function (somaLocations) {
-      this.$emit('soma-locations-ready', somaLocations);
-    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds
@@ -335,42 +299,6 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
-    openCellCardExplorerSearch: function (filters, query) {
-      this.drawerOpen = true
-      // Because refs are in v-for, nextTick is needed here
-      this.$nextTick(() => {
-        const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer', true);
-        if (cellCardExplorerTabRef && typeof cellCardExplorerTabRef.openSearch === 'function') {
-          cellCardExplorerTabRef.openSearch(filters, query);
-        }
-      })
-    },
-    openDatasetSearchFromCellCard: function (payload) {
-      if (!payload || typeof payload !== 'object') {
-        this.openSearch([], payload);
-        return;
-      }
-
-      const facets = [];
-      if (payload.species) {
-        facets.push({
-          facet: payload.species,
-          term: 'Species',
-          facetPropPath: 'organisms.primary.species.name',
-        });
-      }
-
-      if (payload.location) {
-        facets.push({
-          facet: payload.location,
-          term: 'Anatomical structure',
-          facetPropPath: 'anatomy.organ.category.name',
-          AND: true,
-        });
-      }
-
-      this.openSearch(facets, '');
-    },
     /**
      * Get the ref id of the tab by id and type.
      */
@@ -509,13 +437,6 @@ export default {
         this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
       }
 
-      // Update cell card explorer state if available
-      const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer');
-      if (cellCardExplorerTabRef) {
-        this.state.cellCards.search = cellCardExplorerTabRef.getSearch();
-        this.state.cellCards.filters = cellCardExplorerTabRef.getFilters();
-      }
-
       // Update connectivity entries if available
       if (this.connectivityEntry && this.connectivityEntry.length > 0) {
         this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
@@ -545,15 +466,11 @@ export default {
     setState: function (state) {
       // if state is not provided or formatted incorrectly, do nothing
       if (!state || !state.dataset || !state.connectivity) return;
-      // Create a deep copy while preserving the original state structure for future extensibility
-      const newState = JSON.parse(JSON.stringify(state));
-      this.state = { ...this.state, ...newState };
-      const datasetFilters = this.state.dataset.filters;
-      const connectivityFilters = this.state.connectivity.filters;
-      const datasetSearch = this.state.dataset.search;
-      const connectivitySearch = this.state.connectivity.search;
-      const cellCardFilters = this.state.cellCards.filters || [];
-      const cellCardSearch = this.state.cellCards.search || '';
+      this.state = JSON.parse(JSON.stringify(state)); // deep copy to avoid reference issues
+      const datasetFilters = state.dataset.filters;
+      const connectivityFilters = state.connectivity.filters;
+      const datasetSearch = state.dataset.search;
+      const connectivitySearch = state.connectivity.search;
 
       if (datasetFilters.length || datasetSearch) {
         this.openSearch(datasetFilters, datasetSearch);
@@ -563,10 +480,6 @@ export default {
         this.openConnectivitySearch(connectivityFilters, connectivitySearch);
       }
 
-      if (cellCardFilters.length || cellCardSearch) {
-        this.openCellCardExplorerSearch(cellCardFilters, cellCardSearch);
-      }
-
       if (state.activeTabId) {
         this.$nextTick(() => {
           const hasTab = this.tabEntries.find((t) => t.id === state.activeTabId);
@@ -588,17 +501,7 @@ export default {
         ...data,
       };
       this.$emit('trackEvent', taggingData);
-    },
-    /**
-     * @public
-     * Update the active species to use in filters.
-     * Used by SplitFlow component.
-     * @param activeSpecies
-     */
-    updateActiveSpeciesForEntries: function (activeSpecies) {
-      const speciesEntries = Array.isArray(activeSpecies) ? activeSpecies : [activeSpecies];
-      this.activeSpeciesForEntries = [...new Set(speciesEntries.filter(Boolean))];
-    },
+    }
   },
   computed: {
     // This should respect the information provided by the property
@@ -610,10 +513,6 @@ export default {
           tab.type === "annotation" &&
           this.annotationEntry &&
           this.annotationEntry.length > 0
-        ) ||
-        (
-          tab.type === "cellCardExplorer" &&
-          this.showCellCards
         )
       );
     },

package/src/components/Tabs.vue

@@ -4,7 +4,7 @@
       class="tab"
       v-for="tab in tabs"
       :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId, 'closable-tab': tab.closable }"
+      :class="{ 'active-tab': tab.id == activeId }"
       @click="tabClicked(tab)"
     >
       <span class="tab-title">{{ tab.title }} </span>
@@ -103,23 +103,14 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 0.75rem;
-
-  .closable-tab & {
-    padding-right: 0.25rem;
-  }
+  padding: 0 1rem;
 }
 
 .tab-close-icon {
-  width: 18px !important;
-  height: 18px !important;
-  font-size: 18px !important;
-  margin-right: 4px !important;
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  padding-right: 4px !important;
   color: $app-primary-color !important;
-  border-radius: 2px;
-
-  &:hover {
-    background-color: rgba($app-primary-color, 0.15) !important;
-  }
 }
 </style>

package/src/components.d.ts

@@ -9,8 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
-    CellCard: typeof import('./components/CellCard.vue')['default']
-    CellCardExplorer: typeof import('./components/CellCardExplorer.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
@@ -46,7 +44,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
-    IconOpenExternal: typeof import('./components/icons/IconOpenExternal.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']