@abi-software/map-side-bar 2.17.1-demo.1 → 2.19.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,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"
@@ -101,16 +87,13 @@
 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 CellCardExplorer from './CellCardExplorer.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 { removeShowAllFacets } from '../algolia/utils.js';
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -121,21 +104,17 @@ 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 },
       ],
     },
     /**
@@ -166,32 +145,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,
@@ -201,19 +180,14 @@ 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" },
-      activeSpeciesForEntries: [],
+      activeAnnotationData: { tabType: 'annotation' },
+      activeConnectivityData: { tabType: 'connectivity' },
       state: {
         dataset: {
           search: '',
@@ -223,19 +197,15 @@ export default {
           search: '',
           filters: [],
         },
-        cellCards: {
-          search: '',
-          filters: [],
-        },
         connectivityEntries: [],
         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
@@ -250,7 +220,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
@@ -261,16 +231,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
@@ -297,21 +257,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;
@@ -319,65 +279,30 @@ 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;
@@ -395,40 +320,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) => {
@@ -454,10 +377,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
@@ -465,7 +388,7 @@ export default {
       }
 
       if (data) {
-        this.$emit('hover-changed', {...data,  tabId: tab.id })
+        this.$emit('hover-changed', { ...data, tabId: tab.id });
       }
     },
     tabClicked: function (tab) {
@@ -487,7 +410,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');
@@ -509,13 +432,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 +461,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 +475,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);
@@ -583,43 +491,26 @@ 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
-        ) ||
-        (
-          tab.type === "cellCardExplorer" &&
-          this.showCellCards
-        )
+      return this.tabs.filter(
+        (tab) =>
+          tab.type === 'datasetExplorer' ||
+          tab.type === 'connectivityExplorer' ||
+          (tab.type === 'annotation' && this.annotationEntry && this.annotationEntry.length > 0),
       );
     },
   },
   created: function () {
-    this.drawerOpen = this.openAtStart
+    this.drawerOpen = this.openAtStart;
   },
   mounted: function () {
     EventBus.on('PopoverActionClick', (payLoad) => {
@@ -627,22 +518,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) => {
       /**
@@ -650,8 +541,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
@@ -660,31 +551,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>
@@ -699,7 +592,7 @@ export default {
   position: relative;
   height: 100%;
   pointer-events: none;
-  width:600px;
+  width: 600px;
   float: right;
 }
 
@@ -786,12 +679,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, 'closable-tab': tab.closable }"
+      :class="{ 'active-tab': tab.id == activeId }"
       @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,23 +98,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/index.js

@@ -1,6 +1,4 @@
-import SideBar from "./SideBar.vue"
-import "../assets/fonts.scss";
+import SideBar from './SideBar.vue';
+import '../assets/fonts.scss';
 
-export {
-  SideBar
-};
+export { SideBar };

package/src/components/species-map.js

@@ -1,8 +1,8 @@
 export default {
-    'homo sapiens': 'Human',
-    'rattus norvegicus': 'Rat',
-    'mus musculus': 'Mouse',
-    'sus scrofa domesticus': 'Pig',
-    'sus scrofa': 'Boar',
-    'felis catus': 'Cat'
-}
+  'homo sapiens': 'Human',
+  'rattus norvegicus': 'Rat',
+  'mus musculus': 'Mouse',
+  'sus scrofa domesticus': 'Pig',
+  'sus scrofa': 'Boar',
+  'felis catus': 'Cat',
+};