@abi-software/map-side-bar 2.2.1-beta.2 → 2.2.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.2",
+  "version": "2.2.1-beta.4",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -4,22 +4,25 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
     />
-    Click arrow to open sidebar
-    <el-button @click="openSearch">search Uberon from refs</el-button>
-    <el-button @click="singleFacets">Add heart to Filter</el-button>
-    <el-button @click="addStomach">Add stomach to Filter</el-button>
-    <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
-    <el-button @click="multiFacets">multiple facets</el-button>
-    <el-button @click="neuronSearch">open neuron search</el-button>
-    <el-button @click="keywordSearch">keyword search</el-button>
-    <el-button @click="getFacets">Get facets</el-button>
+    <div class="options-container">
+      <div>Click arrow to open sidebar</div>
+      <el-button @click="openSearch">search Uberon from refs</el-button>
+      <el-button @click="singleFacets">Add heart to Filter</el-button>
+      <el-button @click="addStomach">Add stomach to Filter</el-button>
+      <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
+      <el-button @click="multiFacets">multiple facets</el-button>
+      <el-button @click="neuronSearch">open neuron search</el-button>
+      <el-button @click="keywordSearch">keyword search</el-button>
+      <el-button @click="getFacets">Get facets</el-button>
+    </div>
     <SideBar
       :envVars="envVars"
       class="side-bar"
       ref="sideBar"
       :visible="sideBarVisibility"
       :tabs="tabs"
-      :activeId="activeId"
+      :activeTabId="activeId"
+      :connectivityInfo="connectivityInput"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
@@ -33,6 +36,9 @@
 // optionally import default styles
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
+import exampleConnectivityInput from './exampleConnectivityInput.js'
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 // let testContext = {
 //   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
@@ -94,8 +100,8 @@ export default {
   },
   data: function () {
     return {
-      tabArray: [{ title: 'Flatmap', id: 1 }],
-      contextArray: [null, null, null],
+      contextArray: [null, null],
+      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -107,6 +113,7 @@ export default {
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
+      connectivityInput: exampleConnectivityInput,
       activeId: 1,
     }
   },
@@ -117,11 +124,24 @@ export default {
     searchChanged: function (data) {
       console.log(data)
     },
-    tabClicked: function (id) {
-      this.activeId = id
+    tabClicked: function (tab) {
+      this.activeId = tab.id
     },
-    action: function (val) {
-      console.log('action fired: ', val)
+    // For connectivity input actions
+    action: function (action) {
+      console.log('action fired: ', action)
+      let facets = [];
+      facets.push(
+        ...action.labels.map(val => ({
+          facet: capitalise(val),
+          term: "Anatomical structure",
+          facetPropPath: "anatomy.organ.category.name",
+        }))
+      );
+      if (this.$refs.sideBar) {
+        console.log('openSearch', facets)
+        this.$refs.sideBar.openSearch(facets, "");
+      }
     },
     openSearch: function () {
       this.$refs.sideBar.openSearch(
@@ -230,4 +250,16 @@ body {
 .map-icon {
   color: $app-primary-color;
 }
+.options-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 600px);
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
 </style>

package/src/algolia/utils.js

@@ -93,7 +93,6 @@ export function getFilters(selectedFacetArray=undefined) {
 
     filters = filters.split('()AND ').join(''); // Handle case where there where no OR facets
   });
-  console.log('filters about to be applied:', filters)
   return filters.substring(0, filters.lastIndexOf(" AND "));
 }
 

package/src/components/ConnectivityInfo.vue

@@ -68,7 +68,8 @@
         </div>
         <el-button
           v-show="
-            entry.originsWithDatasets && entry.originsWithDatasets.length > 0
+            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.originsWithDatasets)
           "
           class="button"
           id="open-dendrites-button"
@@ -132,7 +133,8 @@
         <el-button
           v-show="
             entry.destinationsWithDatasets &&
-            entry.destinationsWithDatasets.length > 0
+            entry.destinationsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.destinationsWithDatasets)
           "
           class="button"
           @click="openAxons"
@@ -144,7 +146,8 @@
       <el-button
         v-show="
           entry.componentsWithDatasets &&
-          entry.componentsWithDatasets.length > 0
+          entry.componentsWithDatasets.length > 0 &&
+          shouldShowExploreButton(entry.componentsWithDatasets)
         "
         class="button"
         @click="openAll"
@@ -168,7 +171,7 @@ import {
   ElIcon as Icon,
 } from 'element-plus'
 import ExternalResourceCard from './ExternalResourceCard.vue'
-import EventBus from './EventBus'
+import EventBus from './EventBus.js'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -205,6 +208,10 @@ export default {
         resource: undefined,
       }),
     },
+    availableAnatomyFacets: {
+      type: Array,
+      default: () => [],
+    },
   },
   // inject: ['getFeaturesAlert'],
   data: function () {
@@ -213,6 +220,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      facetList: [],
       showToolip: false,
       showDetails: false,
       originDescriptions: {
@@ -223,6 +231,15 @@ export default {
       uberons: [{ id: undefined, name: undefined }],
     }
   },
+  watch: {
+    availableAnatomyFacets: {
+      handler: function (val) {
+        this.convertFacetsToList(val)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   computed: {
     resources: function () {
       let resources = [];
@@ -268,19 +285,38 @@ export default {
     openAll: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.componentsWithDatasets.map((a) => a.name),
+        labels: this.entry.componentsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
     openAxons: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.destinationsWithDatasets.map((a) => a.name),
+        labels: this.entry.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
+    shouldShowExploreButton: function (features) {
+      for (let i = 0; i < features.length; i++) {
+        if (this.facetList.includes(features[i].name.toLowerCase())) {
+          return true
+        }
+      }
+      return false
+    },
+    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
+    convertFacetsToList: function (facets) {
+      facets.forEach((facet) => {
+        if(facet.children) {
+          this.convertFacetsToList(facet.children)
+        } else {
+          this.facetList.push(facet.label.toLowerCase())
+        }
       })
     },
     openDendrites: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.originsWithDatasets.map((a) => a.name),
+        labels: this.entry.originsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
     pubmedSearchUrlUpdate: function (val) {
@@ -508,6 +544,10 @@ export default {
 
   .block {
     padding-top: 0.5em;
+
+    + .block {
+      margin-top: 1rem;
+    }
   }
 
   .connectivity-info-title ~ & {

package/src/components/DatasetCard.vue

@@ -264,7 +264,8 @@ export default {
 
 <style lang="scss" scoped>
 .dataset-card {
-  padding-left: 15px;
+  padding-left: 5px;
+  padding-right: 5px;
   position: relative;
   min-height: 17rem;
 }

package/src/components/SearchFilters.vue

@@ -118,6 +118,7 @@ import '@abi-software/svg-sprite/dist/style.css'
 
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { facetPropPathMapping } from '../algolia/utils.js'
+import EventBus from './EventBus.js'
 
 const capitalise = function (txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1)
@@ -217,6 +218,7 @@ export default {
           .getAlgoliaFacets(facetPropPathMapping)
           .then((data) => {
             this.facets = data
+            EventBus.emit('available-facets', data)
             this.options = data
 
             // create top level of options in cascader

package/src/components/SideBar.vue

@@ -24,26 +24,27 @@
           <Tabs
             v-if="tabs.length > 1 && connectivityInfo"
             :tabTitles="tabs"
-            :activeId="activeId"
+            :activeId="activeTabId"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
             <!-- Connectivity Info -->
-            <template v-if="tab.id === 2">
+            <template v-if="tab.type === 'connectivity'">
               <connectivity-info
                 :entry="connectivityInfo"
-                v-show="tab.id === activeId"
-                :ref="tab.id"
+                :availableAnatomyFacets="availableAnatomyFacets"
+                v-show="tab.id === activeTabId"
+                :ref="'connectivityTab_' + tab.id"
               />
             </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
-              v-show="tab.id === activeId"
+              v-show="tab.id === activeTabId"
               :contextCardEntry="tab.contextCard"
               :envVars="envVars"
-              :ref="tab.id"
+              :ref="'searchTab_' + tab.id"
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
@@ -105,14 +106,14 @@ export default {
     tabs: {
       type: Array,
       default: () => [
-        { title: 'Search', id: 1 },
-        { title: 'Connectivity', id: 2 }
+        { id: 1, title: 'Search', type: 'search' },
+        { id: 2, title: 'Connectivity', type: 'connectivity' }
       ],
     },
     /**
      * The active tab id for default tab.
      */
-    activeId: {
+    activeTabId: {
       type: Number,
       default: 1,
     },
@@ -134,6 +135,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
+
     }
   },
   methods: {
@@ -169,10 +171,38 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        // TODO: refs[1] is for `search` which should be renamed
-        this.$refs[1][0].openSearch(facets, query)
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.openSearch(facets, query);
       })
     },
+    /**
+     * Get the tab object by tab id and type.
+     * If not found, return the first available tab.
+     */
+    getTabByIdAndType: function (id, type) {
+      const tabId = id || this.activeTabId;
+      const tabType = type || 'search'; // default to search tab
+      const tabObj = this.tabs.find((tab) => tab.id === tabId && tab.type === tabType);
+      const firstAvailableTab = this.tabs[0];
+      return tabObj || firstAvailableTab;
+    },
+    /**
+     * Get the ref id of the tab by id and type.
+     */
+    getTabRefId: function (id, type) {
+      let refIdPrefix = 'searchTab_'; // default to search tab
+      if (type === 'connectivity') {
+        refIdPrefix = 'connectivityTab_';
+      }
+      const tabObj = this.getTabByIdAndType(id, type);
+      const tabRefId = refIdPrefix + tabObj.id;
+      return tabRefId;
+    },
+    getSearchTabRefById: function (id) {
+      const searchTabId = id || 1; // to use id when there are multiple search tabs
+      const searchTabRefId = this.getTabRefId(searchTabId, 'search');
+      return this.$refs[searchTabRefId][0];
+    },
     /**
      * @vuese
      * The function to add filters to sidebar search.
@@ -184,14 +214,16 @@ export default {
 
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        this.$refs[this.activeId][0].addFilter(filter)
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.addFilter(filter)
       })
     },
     openNeuronSearch: function (neuron) {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        this.$refs[this.activeId][0].openSearch(
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.openSearch(
           '',
           undefined,
           'scicrunch-query-string/',
@@ -200,22 +232,24 @@ export default {
       })
     },
     getAlgoliaFacets: async function () {
-      return await this.$refs[this.activeId][0].getAlgoliaFacets()
+      const searchTabRef = this.getSearchTabRefById(1);
+      return await searchTabRef.getAlgoliaFacets()
     },
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
     /**
      * @vuese
-     * The function to emit 'tabClicked' event with tab's `id` when user clicks the sidebar tab.
-     * @arg id
+     * The function to emit 'tabClicked' event with tab's `id` and tab's `type`
+     * when user clicks the sidebar tab.
+     * @arg {id, type}
      */
-    tabClicked: function (id) {
+    tabClicked: function ({id, type}) {
       /**
        * This event is emitted when user click sidebar's tab.
-       * @arg id
+       * @arg {id, type}
        */
-      this.$emit('tabClicked', id)
+      this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
       this.$emit('connectivity-info-close');
@@ -265,9 +299,16 @@ export default {
       this.$emit('datalink-clicked', payLoad);
     })
     EventBus.on('onConnectivityActionClick', (payLoad) => {
-      this.tabClicked(1);
+      // switch to search tab with tab id: 1
+      this.tabClicked({id: 1, type: 'search'});
       this.$emit('actionClick', payLoad);
     })
+
+    // Get available anatomy facets for the connectivity info
+    EventBus.on('available-facets', (payLoad) => {
+        this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
+    })
+    
   },
 }
 </script>

package/src/components/SidebarContent.vue

@@ -458,10 +458,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dataset-card:hover {
-  border-style: solid;
-  border-color: var(--el-color-primary);
-  border-radius: 5px;
+.dataset-card {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: calc(100% - 15px);
+    height: 100%;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    border-style: solid;
+    border-radius: 5px;
+    border-color: transparent;
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--el-color-primary);
+    }
+  }
 }
 
 .content-card {

package/src/components/Tabs.vue

@@ -9,7 +9,7 @@
       <div
         class="title-text-table"
         v-bind:class="{ highlightText: title.id == activeId }"
-        v-on:click="titleClicked(title.id)"
+        v-on:click="titleClicked(title.id, title.type)"
       >
         <div class="title-text">
           {{ title.title }}
@@ -44,8 +44,8 @@ export default {
     },
   },
   methods: {
-    titleClicked: function (id) {
-      this.$emit('titleClicked', id)
+    titleClicked: function (id, type) {
+      this.$emit('titleClicked', {id, type})
     },
     tabClose: function (id) {
       this.$emit('tab-close', id);