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

package/src/components/SideBar.vue

@@ -29,7 +29,7 @@
             @tabClosed="tabClosed"
             @trackEvent="trackEvent"
           />
-          <template v-for="tab in tabs" key="tab.id">
+          <template v-for="tab in tabs" :key="tab.id">
             <template v-if="tab.type === 'annotation'">
               <AnnotationTool
                 :ref="'annotationTab_' + tab.id"
@@ -65,6 +65,20 @@
                 @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"
@@ -87,15 +101,14 @@
 import {
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
-} from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
-import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
-import DatasetExplorer from './DatasetExplorer.vue'
-import EventBus from './EventBus.js'
-import Tabs from './Tabs.vue'
-import AnnotationTool from './AnnotationTool.vue'
-import ConnectivityExplorer from './ConnectivityExplorer.vue'
-import { removeShowAllFacets } from '../algolia/utils.js'
+} from '@element-plus/icons-vue';
+import DatasetExplorer from './DatasetExplorer.vue';
+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';
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -106,19 +119,19 @@ export default {
     Tabs,
     ElIconArrowLeft,
     ElIconArrowRight,
-    Drawer,
-    Icon,
     AnnotationTool,
     ConnectivityExplorer,
+    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
     tabs: {
       type: Array,
-      default: [
+      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 },
       ],
     },
     /**
@@ -149,32 +162,32 @@ export default {
      */
     connectivityEntry: {
       type: Array,
-      default: [],
+      default: () => [],
     },
     /**
      * The annotation data to show in sidebar.
      */
     annotationEntry: {
       type: Array,
-      default: [],
+      default: () => [],
     },
     createData: {
       type: Object,
-      default: {
+      default: () => ({
         toBeConfirmed: false,
         points: [],
-        shape: "",
+        shape: '',
         x: 0,
         y: 0,
-      },
+      }),
     },
     connectivityKnowledge: {
       type: Array,
-      default: [],
+      default: () => [],
     },
     filterOptions: {
       type: Array,
-      default: [],
+      default: () => [],
     },
     showVisibilityFilter: {
       type: Boolean,
@@ -184,20 +197,29 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCellCards: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
       drawerOpen: false,
       availableAnatomyFacets: [],
       activeTabId: 1,
-      activeAnnotationData: { tabType: "annotation" },
-      activeConnectivityData: { tabType: "connectivity" },
+      activeAnnotationData: { tabType: 'annotation' },
+      activeConnectivityData: { tabType: 'connectivity' },
+      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
           filters: [],
         },
-        connectivity:  {
+        connectivity: {
+          search: '',
+          filters: [],
+        },
+        cellCards: {
           search: '',
           filters: [],
         },
@@ -205,11 +227,11 @@ export default {
         annotationEntries: [],
         activeTabId: this.activeTabId,
       },
-    }
+    };
   },
   methods: {
     onConnectivityCollapseChange: function (data) {
-      this.$emit('connectivity-collapse-change', data)
+      this.$emit('connectivity-collapse-change', data);
     },
     /**
      * This event is emitted when
@@ -224,7 +246,7 @@ export default {
      * @arg data
      */
     hoverChanged: function (id, data) {
-      this.$emit('hover-changed', {...data,  tabId: id })
+      this.$emit('hover-changed', { ...data, tabId: id });
 
       const activeTabType = this.getActiveTabTypeById(id);
       // save the last highlighted data for connectivity and annotation tabs
@@ -235,6 +257,16 @@ 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
@@ -261,21 +293,21 @@ export default {
      * @arg `obj` {data, id}
      */
     searchChanged: function (id, data) {
-      this.$emit('search-changed', { ...data, tabId: id })
+      this.$emit('search-changed', { ...data, tabId: id });
     },
     /**
      * The function to close sidebar.
      * @public
      */
     close: function () {
-      this.drawerOpen = false
+      this.drawerOpen = false;
     },
     /**
      * The function to toggle (open and close) sidebar.
      * @public
      */
     toggleDrawer: function () {
-      this.drawerOpen = !this.drawerOpen
+      this.drawerOpen = !this.drawerOpen;
     },
     openConnectivitySearch: function (facets, query) {
       this.drawerOpen = true;
@@ -283,29 +315,66 @@ export default {
       this.$nextTick(() => {
         const connectivityExplorerTabRef = this.getTabRef(undefined, 'connectivityExplorer', true);
         connectivityExplorerTabRef.openSearch(facets, query);
-      })
+      });
     },
     resetConnectivitySearch: function () {
       this.$nextTick(() => {
         const connectivityExplorerTabRef = this.getTabRef(undefined, 'connectivityExplorer', false);
         connectivityExplorerTabRef.resetSearchIfNoActiveSearch();
-      })
+      });
     },
     openSearch: function (facets, query) {
-      this.drawerOpen = true
+      this.drawerOpen = true;
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
         const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
         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.
      */
     getTabRef: function (id, type, switchTab = false) {
       const matchedTab = this.tabEntries.filter((tabEntry) => {
-        return (id === undefined || tabEntry.id === id) &&
-          (type === undefined || tabEntry.type === type);
+        return (
+          (id === undefined || tabEntry.id === id) && (type === undefined || tabEntry.type === type)
+        );
       });
       const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
       const tabRef = tabInfo[0].type + 'Tab_' + tabInfo[0].id;
@@ -323,40 +392,38 @@ export default {
      */
     addFilter: function (filter) {
       if (filter) {
-        this.drawerOpen = true
+        this.drawerOpen = true;
         let filterToAdd = filter;
         if (Array.isArray(filter)) {
-          filterToAdd.forEach(item => item.AND = true);
+          filterToAdd.forEach((item) => (item.AND = true));
         } else {
-          filter.AND = true // When we add a filter external, it is currently only with an AND boolean
-          filterToAdd = [filter]
+          filter.AND = true; // When we add a filter external, it is currently only with an AND boolean
+          filterToAdd = [filter];
         }
         // Because refs are in v-for, nextTick is needed here
         this.$nextTick(() => {
           const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
-          datasetExplorerTabRef.addFilter(filterToAdd)
-        })
+          datasetExplorerTabRef.addFilter(filterToAdd);
+        });
       }
     },
     openNeuronSearch: function (neuron) {
-      this.drawerOpen = true
+      this.drawerOpen = true;
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
         const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
-        datasetExplorerTabRef.openSearch(
-          '',
-          undefined,
-          'scicrunch-query-string/',
-          { field: '*organ.curie', curie: neuron }
-        )
-      })
+        datasetExplorerTabRef.openSearch('', undefined, 'scicrunch-query-string/', {
+          field: '*organ.curie',
+          curie: neuron,
+        });
+      });
     },
     getAlgoliaFacets: async function () {
       const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer');
-      return await datasetExplorerTabRef.getAlgoliaFacets()
+      return await datasetExplorerTabRef.getAlgoliaFacets();
     },
     setDrawerOpen: function (value = true) {
-      this.drawerOpen = value
+      this.drawerOpen = value;
     },
     setActiveTab: function (tab) {
       const matchedTab = this.tabs.filter((tabEntry) => {
@@ -382,10 +449,10 @@ export default {
         if (connectivityExplorerTabRef && !connectivityExplorerTabRef.expanded) {
           data = { tabType: 'connectivity' };
         } else {
-          data = {...this.activeConnectivityData};
+          data = { ...this.activeConnectivityData };
         }
       } else if (tab.type === 'annotation') {
-        data = {...this.activeAnnotationData};
+        data = { ...this.activeAnnotationData };
       } else {
         // switching to dataset explorer tab will not highlight
         // the highlight is from the last tab
@@ -393,7 +460,7 @@ export default {
       }
 
       if (data) {
-        this.$emit('hover-changed', {...data,  tabId: tab.id })
+        this.$emit('hover-changed', { ...data, tabId: tab.id });
       }
     },
     tabClicked: function (tab) {
@@ -415,7 +482,7 @@ export default {
      * Store available anatomy facets data for connectivity list component
      */
     storeAvailableAnatomyFacets: function (availableAnatomyFacets) {
-      localStorage.setItem('available-anatomy-facets', JSON.stringify(availableAnatomyFacets))
+      localStorage.setItem('available-anatomy-facets', JSON.stringify(availableAnatomyFacets));
     },
     closeConnectivity: function () {
       EventBus.emit('close-connectivity');
@@ -437,6 +504,13 @@ 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);
@@ -466,11 +540,15 @@ export default {
     setState: function (state) {
       // if state is not provided or formatted incorrectly, do nothing
       if (!state || !state.dataset || !state.connectivity) return;
-      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;
+      // 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 || '';
 
       if (datasetFilters.length || datasetSearch) {
         this.openSearch(datasetFilters, datasetSearch);
@@ -480,6 +558,10 @@ 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);
@@ -496,29 +578,37 @@ export default {
      */
     trackEvent: function (data) {
       const taggingData = {
-        'event': 'interaction_event',
-        'location': 'map_sidebar',
+        event: 'interaction_event',
+        location: 'map_sidebar',
         ...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
     tabEntries: function () {
-      return this.tabs.filter((tab) =>
-        tab.type === "datasetExplorer" ||
-        tab.type === "connectivityExplorer" ||
-        (
-          tab.type === "annotation" &&
-          this.annotationEntry &&
-          this.annotationEntry.length > 0
-        )
+      return this.tabs.filter(
+        (tab) =>
+          tab.type === 'datasetExplorer' ||
+          tab.type === 'connectivityExplorer' ||
+          (tab.type === 'annotation' && this.annotationEntry && this.annotationEntry.length > 0) ||
+          (tab.type === 'cellCardExplorer' && this.showCellCards),
       );
     },
   },
   created: function () {
-    this.drawerOpen = this.openAtStart
+    this.drawerOpen = this.openAtStart;
   },
   mounted: function () {
     EventBus.on('PopoverActionClick', (payLoad) => {
@@ -526,22 +616,22 @@ export default {
        * This event is emitted when the image is clicked on or the button below the image is clicked on.
        * @arg payLoad
        */
-      this.$emit('actionClick', payLoad)
-    })
+      this.$emit('actionClick', payLoad);
+    });
     EventBus.on('number-of-datasets-for-anatomies', (payLoad) => {
       /**
        * This emits a object with keys as anatomy and values as number of datasets for that anatomy.
        * @arg payload
        */
-      this.$emit('number-of-datasets-for-anatomies', payLoad)
-    })
+      this.$emit('number-of-datasets-for-anatomies', payLoad);
+    });
     EventBus.on('anatomy-in-datasets', (payLoad) => {
-       /**
+      /**
        * This emits a lis of datasets, with the anatomy for each one. Used by flatmap for markers
        * @arg payload
        */
-      this.$emit('anatomy-in-datasets', payLoad)
-    })
+      this.$emit('anatomy-in-datasets', payLoad);
+    });
 
     EventBus.on('contextUpdate', (payLoad) => {
       /**
@@ -549,8 +639,8 @@ export default {
        * Example, context card update on first load.
        * @arg payload
        */
-      this.$emit('contextUpdate', payLoad)
-    })
+      this.$emit('contextUpdate', payLoad);
+    });
     EventBus.on('datalink-clicked', (payLoad) => {
       /**
        * This event is emitted
@@ -559,31 +649,33 @@ export default {
        * @arg payload
        */
       this.$emit('datalink-clicked', payLoad);
-    })
+    });
     EventBus.on('onConnectivityActionClick', (payLoad) => {
       // switch to search tab with tab id: 1
-      this.tabClicked({id: 1, type: 'datasetExplorer'});
+      this.tabClicked({ id: 1, type: 'datasetExplorer' });
       this.$emit('actionClick', payLoad);
-    })
+    });
     EventBus.on('connectivity-source-change', (payLoad) => {
       this.$emit('connectivity-source-change', payLoad);
-    })
+    });
     EventBus.on('show-connectivity-graph', (payLoad) => {
       this.$emit('show-connectivity-graph', payLoad);
-    })
+    });
 
     // Get available anatomy facets for the connectivity info
     EventBus.on('available-facets', (payLoad) => {
-        this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
-        this.storeAvailableAnatomyFacets(this.availableAnatomyFacets);
-    })
+      this.availableAnatomyFacets = payLoad.find(
+        (facet) => facet.label === 'Anatomical Structure',
+      ).children;
+      this.storeAvailableAnatomyFacets(this.availableAnatomyFacets);
+    });
 
     // Event tracking
     EventBus.on('trackEvent', (data) => {
       this.trackEvent(data);
     });
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -598,7 +690,7 @@ export default {
   position: relative;
   height: 100%;
   pointer-events: none;
-  width:600px;
+  width: 600px;
   float: right;
 }
 
@@ -685,12 +777,12 @@ export default {
 
 <style lang="scss">
 .side-bar {
-  --el-color-primary: #8300BF;
-  --el-color-primary-light-7: #DAB3EC;
+  --el-color-primary: #8300bf;
+  --el-color-primary-light-7: #dab3ec;
   --el-color-primary-light-8: #e6ccf2;
   --el-color-primary-light-9: #f3e6f9;
   --el-color-primary-light-3: #f3e6f9;
-  --el-color-primary-dark-2: #7600AC;
+  --el-color-primary-dark-2: #7600ac;
 }
 .el-button--primary {
   --el-button-hover-text-color: var(--el-color-primary);

package/src/components/Tabs.vue

@@ -4,15 +4,11 @@
       class="tab"
       v-for="tab in tabs"
       :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId }"
+      :class="{ 'active-tab': tab.id == activeId, 'closable-tab': tab.closable }"
       @click="tabClicked(tab)"
     >
-      <span class="tab-title">{{ tab.title }} </span>
-      <el-icon
-        v-if="tab.closable"
-        @click.stop="tabClosed(tab)"
-        class="tab-close-icon"
-      >
+      <span class="tab-title">{{ tab.title }}</span>
+      <el-icon v-if="tab.closable" @click.stop="tabClosed(tab)" class="tab-close-icon">
         <el-icon-close />
       </el-icon>
     </div>
@@ -20,11 +16,10 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import { Close as ElIconClose } from "@element-plus/icons-vue";
+import { Close as ElIconClose } from '@element-plus/icons-vue';
 
 export default {
-  name: "Tabs",
+  name: 'Tabs',
   components: {
     ElIconClose,
   },
@@ -58,18 +53,18 @@ export default {
   },
   methods: {
     tabClicked: function (tab) {
-      this.$emit("tabClicked", { id: tab.id, type: tab.type });
+      this.$emit('tabClicked', { id: tab.id, type: tab.type });
 
       // To track only direct tab click events
       this.$emit('trackEvent', {
-        'event': 'interaction_event',
-        'event_name': 'portal_maps_sidebar_open_tab',
-        'category': tab.type,
-        'location': 'map_sidebar_tabs',
+        event: 'interaction_event',
+        event_name: 'portal_maps_sidebar_open_tab',
+        category: tab.type,
+        location: 'map_sidebar_tabs',
       });
     },
     tabClosed: function (tab) {
-      this.$emit("tabClosed", { id: tab.id, type: tab.type });
+      this.$emit('tabClosed', { id: tab.id, type: tab.type });
     },
   },
 };
@@ -103,14 +98,23 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 1rem;
+  padding: 0 0.75rem;
+
+  .closable-tab & {
+    padding-right: 0.25rem;
+  }
 }
 
 .tab-close-icon {
-  width: 20px !important;
-  height: 20px !important;
-  font-size: 20px !important;
-  padding-right: 4px !important;
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 18px !important;
+  margin-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/icons/IconOpenExternal.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        transform="translate(15.500000, 8.878680) rotate(225.000000) translate(-15.500000, -8.878680)"
+        points="16.25 4.12867966 16.25 13.6286797 14.75 13.6286797 14.75 4.12867966"
+      />
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        transform="translate(17.500000, 6.918996) rotate(225.000000) translate(-17.500000, -6.918996)"
+        points="20.9294459 3.82036868 22.058311 4.80812559 17.5 10.0176239 12.941689 4.80812559 14.0705541 3.82036868 17.5 7.739"
+      />
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        points="11.6570511 7.25 11.6570511 8.75 5.75 8.75 5.75 16.25 15.25 16.25 15.25 11.2267933 16.75 11.2267933 16.75 17.75 4.25 17.75 4.25 7.25"
+      />
+    </g>
+  </svg>
+</template>