@abi-software/map-side-bar 2.0.0-response.1 → 2.0.0

package/src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
+    <link
+      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>
@@ -10,20 +12,27 @@
     <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>
-    <SideBar :envVars="envVars" class="side-bar" ref="sideBar" :visible="sideBarVisibility"
-      :tabs="tabs" :activeId="activeId" @tabClicked="tabClicked"
-      @search-changed="searchChanged($event)" @actionClick="action"
-      :alternate-search="mySearch"/>
+    <el-button @click="getFacets">Get facets</el-button>
+    <SideBar
+      :envVars="envVars"
+      class="side-bar"
+      ref="sideBar"
+      :visible="sideBarVisibility"
+      :tabs="tabs"
+      :activeId="activeId"
+      @tabClicked="tabClicked"
+      @search-changed="searchChanged($event)"
+      @actionClick="action"
+    />
   </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
-import SideBar from './components/SideBar'
-import { mySearch } from './demo/AlternateResponse.js'
+import SideBar from './components/SideBar.vue'
+import EventBus from './components/EventBus.js'
 
-console.log(mySearch)
 // 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.",
 //   "heading": "Digital tracings of enteric plexus",
@@ -71,88 +80,145 @@ console.log(mySearch)
 export default {
   name: 'app',
   components: {
-    SideBar
+    SideBar,
   },
   computed: {
-    tabs: function(){
+    tabs: function () {
       let temp = [...this.tabArray]
-      for(let i in this.tabArray){
+      for (let i in this.tabArray) {
         temp[i].contextCard = this.contextArray[i]
       }
       return temp
-    }
+    },
   },
-  data: function(){
+  data: function () {
     return {
-      tabArray: [{title: 'Flatmap', id:1}],
-      contextArray: [null,null,null],
+      tabArray: [{ title: 'Flatmap', id: 1 }],
+      contextArray: [null, null, null],
       sideBarVisibility: true,
       envVars: {
-        API_LOCATION: process.env.VUE_APP_API_LOCATION,
-        ALGOLIA_KEY: process.env.VUE_APP_ALGOLIA_KEY,
-        ALGOLIA_ID: process.env.VUE_APP_ALGOLIA_ID,
-        ALGOLIA_INDEX: process.env.VUE_APP_ALGOLIA_INDEX,
-        PENNSIEVE_API_LOCATION: process.env.VUE_APP_PENNSIEVE_API_LOCATION,
-        BL_SERVER_URL: process.env.VUE_APP_BL_SERVER_URL,
-        NL_LINK_PREFIX: process.env.VUE_APP_NL_LINK_PREFIX,
-        ROOT_URL: process.env.VUE_APP_ROOT_URL,
+        API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
+        ALGOLIA_KEY: import.meta.env.VITE_APP_ALGOLIA_KEY,
+        ALGOLIA_ID: import.meta.env.VITE_APP_ALGOLIA_ID,
+        ALGOLIA_INDEX: import.meta.env.VITE_APP_ALGOLIA_INDEX,
+        PENNSIEVE_API_LOCATION: import.meta.env.VITE_APP_PENNSIEVE_API_LOCATION,
+        BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
+        NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
+        ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       activeId: 1,
-      mySearch: mySearch,
-      //mySearch: undefined,
     }
   },
-  methods:{
-    searchChanged: function(data){
-      console.log(data);
+  methods: {
+    searchChanged: function (data) {
+      console.log(data)
     },
-    tabClicked: function(id){
+    tabClicked: function (id) {
       this.activeId = id
     },
-    action: function(val){
-      console.log("action fired: ", val)
+    action: function (val) {
+      console.log('action fired: ', val)
     },
-    openSearch: function(){
-      this.$refs.sideBar.openSearch([], 'http://purl.obolibrary.org/obo/UBERON_0001103')
+    openSearch: function () {
+      this.$refs.sideBar.openSearch(
+        [],
+        'http://purl.obolibrary.org/obo/UBERON_0001103'
+      )
     },
-    singleFacets: function(){
-      this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
+    singleFacets: function () {
+      this.$refs.sideBar.addFilter({
+        facet: 'Cardiovascular system',
+        facet2: 'Heart',
+        term: 'Anatomical structure',
+        facetPropPath: 'anatomy.organ.category.name',
+        AND: true,
+      })
     },
-    addStomach: function(){
-      this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: false})
+    addStomach: function () {
+      this.$refs.sideBar.addFilter({
+        facet: 'Stomach',
+        term: 'Anatomical structure',
+        facetPropPath: 'anatomy.organ.category.name',
+        AND: true,
+      })
     },
-    addInvalidTerm: function(){
-      this.$refs.sideBar.addFilter({facet: 'Invalid', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
+    addInvalidTerm: function () {
+      this.$refs.sideBar.addFilter({
+        facet: 'Invalid',
+        term: 'Anatomical structure',
+        facetPropPath: 'anatomy.organ.name',
+        AND: true,
+      })
     },
-    multiFacets: function(){
-      this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'},
-        {facet: 'Not correct', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
+    multiFacets: function () {
+      this.$refs.sideBar.openSearch(
+        [
+          {
+            facet: 'Male',
+            term: 'Sex',
+            facetPropPath: 'attributes.subject.sex.value',
+          },
+          {
+            facet: 'Cardiovascular system',
+            facet2: 'Heart',
+            term: 'Anatomical structure',
+            facetPropPath: 'anatomy.organ.category.name',
+            AND: true,
+          },
+          {
+            facet: 'Not correct',
+            term: 'Anatomical structure',
+            facetPropPath: 'anatomy.organ.name',
+          },
+        ],
+        ''
+      )
     },
-    keywordSearch: function(){
-      this.$refs.sideBar.addFilter({type: 'Facet', label: undefined, facet: '3d model', facetPropPath: 'item.keywords.keyword', term: 'Keywords', AND: true})
+    keywordSearch: function () {
+      this.$refs.sideBar.addFilter({
+        type: 'Facet',
+        label: undefined,
+        facet: '3d model',
+        facetPropPath: 'item.keywords.keyword',
+        term: 'Keywords',
+        AND: true,
+      })
     },
-    markerFromFlatmap: function(){
-      this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
+    markerFromFlatmap: function () {
+      this.$refs.sideBar.openSearch([
+        {
+          facet: 'http://purl.obolibrary.org/obo/UBERON_0001103',
+          term: 'Keywords',
+          facetPropPath: 'item.keywords.keyword',
+        },
+      ])
     },
-    neuronSearch: function(){
+    neuronSearch: function () {
       this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
-    }
+    },
+    getFacets: async function () {
+      let facets = await this.$refs.sideBar.getAlgoliaFacets()
+      console.log('Algolia facets:', facets)
+    },
   },
-  mounted: function() {
-    console.log("mounted app")
+  mounted: function () {
+    console.log('mounted app')
+    EventBus.on('contextUpdate', (payLoad) => {
+      console.log('contextUpdate', payLoad)
+    })
   },
 }
 </script>
 
 <style lang="scss">
 #app {
-  height:100%;
+  height: 100%;
   width: 100%;
-  position:absolute;
-  font-family: "Asap",sans-serif;
+  position: absolute;
+  font-family: 'Asap', sans-serif;
 }
 body {
-  margin:0px;
+  margin: 0px;
 }
 .map-icon {
   color: $app-primary-color;

package/src/algolia/algolia.js

@@ -9,40 +9,62 @@ export class AlgoliaClient {
       algoliaKey
     )
     this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
+    this.anatomyFacetLabels = []
   }
   initIndex(ALGOLIA_INDEX) {
     this.index = this.client.initIndex(ALGOLIA_INDEX);
   }
 
   getAlgoliaFacets(propPathMapping) {
-    const map = new Map(Object.entries(propPathMapping));
-    const facetPropPaths = Array.from(map.keys());
+    const facetPropPaths = propPathMapping.map(facet => facet.facetPropPath)
+    const facetSubpropPaths = propPathMapping.map(item => item.facetSubpropPath)
     let facetData = []
     let facetId = 0
     return this.index
       .search('', {
         sortFacetValuesBy: 'alpha',
-        facets: facetPropPaths
+        facets: facetPropPaths.concat(facetSubpropPaths),
       })
       .then(response => {
         facetPropPaths.map((facetPropPath) => {
+          const parentFacet = propPathMapping.find(item => item.facetPropPath == facetPropPath)
           var children = []
           const responseFacets = response.facets
-          if (responseFacets === undefined) { return }
+          if (responseFacets === undefined) {return}
           const responseFacetChildren =
-            responseFacets[facetPropPath] == undefined
+            responseFacets[facetPropPath] == undefined // if no facets, return empty object
               ? {}
               : responseFacets[facetPropPath]
+          const allPossibleChildrenSubfacets = parentFacet && responseFacets[parentFacet.facetSubpropPath] ? Object.keys(responseFacets[parentFacet.facetSubpropPath]) : []
+          // Loop through all subfacets and find the ones that are children of the current facet
           Object.keys(responseFacetChildren).map(facet => {
-            children.push({
+            const childrenSubfacets = allPossibleChildrenSubfacets.reduce((filtered, childFacetInfo) => {
+              const info = childFacetInfo.split('.');
+              if (info.length !== 2) {
+                return filtered;
+              }
+              if (facet === info[0]) {
+                filtered.push({
+                  label: info[1], 
+                  id: facetId++,
+                  facetPropPath: `${parentFacet ? parentFacet.facetSubpropPath : undefined}`
+                });
+              }
+              return filtered;
+            }, []); // Provide an empty array as the initial value
+            let newChild = {
               label: facet,
               id: facetId++,
               facetPropPath: facetPropPath
-            })
+            }
+            if (childrenSubfacets.length > 0) {
+              newChild.children = childrenSubfacets
+            }
+            children.push(newChild)
           })
           if (children.length > 0) {
             facetData.push({
-              label: map.get(facetPropPath),
+              label: parentFacet ? parentFacet.label : '',
               id: facetId++,
               children: children,
               key: facetPropPath
@@ -93,6 +115,8 @@ export class AlgoliaClient {
 
   _processAnatomy(hits) {
     let foundKeyWords = []
+    let foundLabels = []
+    let uniqueLabels = []
     let uniqueKeywords = []
     hits.forEach(hit => {
       if (hit.item && hit.item.keywords) {
@@ -107,11 +131,14 @@ export class AlgoliaClient {
         hit.anatomy.organ.forEach(anatomy => {
           if (anatomy.curie) {
             foundKeyWords.push(anatomy.curie)
+            foundLabels.push(anatomy.name)
           }
         })
       }
     })
-    uniqueKeywords = [...new Set(foundKeyWords)]
+    uniqueKeywords = [...new Set(foundKeyWords) ]
+    uniqueLabels = [...new Set(foundLabels) ]
+    this.anatomyFacetLabels = uniqueLabels
     return uniqueKeywords
   }
 

package/src/algolia/utils.js

@@ -2,14 +2,45 @@
 
 // Mapping between display categories and their Algolia index property path
 // Used for populating the Dataset Search Results facet menu dynamically
-export const facetPropPathMapping = {
-  'anatomy.organ.name' : 'Anatomical Structure',
-  'organisms.primary.species.name' : 'Species',
-  'item.modalities.keyword' : 'Experimental Approach',
-  'attributes.subject.sex.value' : 'Sex',
-  'attributes.subject.ageCategory.value' : 'Age Categories',
-  'item.types.name' : 'Data type',
-}
+export const facetPropPathMapping = [
+  {
+    label: 'Data Type',
+    id: 'item.types',
+    facetPropPath: 'item.types.name',
+    facetSubpropPath: 'item.types.subcategory.name'
+  },
+  {
+    label: 'Anatomical Structure',
+    id: 'anatomy.organ.category',
+    facetPropPath: 'anatomy.organ.category.name',
+    facetSubpropPath: 'anatomy.organ.subcategory.name',
+    facetFilterPath: 'anatomy.organ.name'
+  },
+  {
+    label: 'Species',
+    id: 'organisms.primary.species',
+    facetPropPath: 'organisms.primary.species.name',
+    facetSubpropPath: 'organisms.primary.species.subcategory.name'
+  },
+  {
+    label: 'Experimental Approach',
+    id: 'item.modalities',
+    facetPropPath: 'item.modalities.keyword',
+    facetSubpropPath: 'item.modalities.subcategory.name'
+  },
+  {
+    label: 'Sex',
+    id: 'attributes.subject.sex',
+    facetPropPath: 'attributes.subject.sex.value',
+    facetSubpropPath: 'attributes.subject.sex.subcategory.name'
+  },
+  {
+    label: 'Age Categories',
+    id: 'attributes.subject.ageCategory',
+    facetPropPath: 'attributes.subject.ageCategory.value',
+    facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
+  },
+]
 
 // Same as above, but these show on the sidebar filters
 export const shownFilters = {
@@ -37,19 +68,19 @@ export function getFilters(selectedFacetArray=undefined) {
 
   let filters = "NOT item.published.status:embargo";
   filters = `(${filters}) AND `;
-
-  const facetPropPaths = Object.keys(facetPropPathMapping);
+  const facetPropPaths = facetPropPathMapping.map((f) => f.facetPropPath);
   facetPropPaths.map((facetPropPath) => {
-    const facetsToBool = facets.filter(
+    let facetsToBool = facets.filter(
       (facet) => facet.facetPropPath == facetPropPath
     );
     let orFilters = "";
     let andFilters = "";
     facetsToBool.map((facet) => {
+      let facetPropPathToUse = facet.facetSubPropPath ? facet.facetSubPropPath : facetPropPath // Check if we have a subpath
       if (facet.AND){
-        andFilters += `AND "${facetPropPath}":"${facet.label}"`;
+        andFilters += `AND "${facetPropPathToUse}":"${facet.label}"`;
       } else {
-        orFilters += `"${facetPropPath}":"${facet.label}" OR `;
+        orFilters += `"${facetPropPathToUse}":"${facet.label}" OR `;
       }
     });
     if (orFilters == "" && andFilters =="") {
@@ -62,6 +93,7 @@ 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/assets/styles.scss

@@ -4,4 +4,3 @@
 
 /* icon font path, required */
 $--color-primary: $app-primary-color !default;
-$--font-path: '~element-ui/lib/theme-chalk/fonts';

package/src/components/BadgesGroup.vue

@@ -1,32 +1,26 @@
 <template>
-  <div v-if="categories['All'].size > 1" class="container"  ref="container">
-    <div>
-      View data types:
-    </div>
-    <template v-for="(item, key) in categories" >
+  <div v-if="categories['All'].size > 1" class="container" ref="container">
+    <div>View data types:</div>
+    <template v-for="(item, key) in categories">
       <el-button
         v-if="item.size > 0"
-        :class="[{ 'active': key == active},'tag-button']"
+        :class="[{ active: key == active }, 'tag-button']"
         @click="categoryClicked(key)"
-        size="small" :key="key">{{ key + " (" + item.size + ")" }}
+        size="small"
+        :key="key"
+        >{{ key + ' (' + item.size + ')' }}
       </el-button>
     </template>
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Button } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Button);
+import { ElButton as Button } from 'element-plus'
 
 export default {
-  name: "BadgesGroup",
+  name: 'BadgesGroup',
+  components: { Button },
   props: {
     /**
      * Object containing information for
@@ -35,49 +29,46 @@ export default {
     additionalLinks: {
       type: Array,
       default: () => {
-        return [];
+        return []
       },
     },
     datasetBiolucida: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
     },
-    entry:  {
+    entry: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
     },
   },
   data: function () {
     return {
       //Always start with 1 image - the dataset thumbnail itself
-      categories: { "All": {size: 1}, "Dataset": {size: 1} },
-      active: "All"
-    };
+      categories: { All: { size: 1 }, Dataset: { size: 1 } },
+      active: 'All',
+    }
   },
   methods: {
     addToCategories: function (array, name) {
       if (array && array.length > 0) {
-        this.categories[name] = { size: array.length };
-        this.categories["All"].size += array.length;
+        this.categories[name] = { size: array.length }
+        this.categories['All'].size += array.length
       }
     },
     addSimulationsToCategories: function (array) {
       if (array && array.length > 0) {
-        const size = 1;
-        this.categories["Simulations"] = { size };
-        this.categories["All"].size += size;
+        const size = 1
+        this.categories['Simulations'] = { size }
+        this.categories['All'].size += size
       }
     },
-    categoryClicked: function(name) {
-      this.active = name;
-      this.$emit("categoryChanged", name);
-    },
-    resetCategory: function() {
-      this.categories = { All: { size: 1 }, Dataset: { size: 1 } };
+    categoryClicked: function (name) {
+      this.active = name
+      this.$emit('categoryChanged', name)
     },
   },
   watch: {
@@ -85,64 +76,49 @@ export default {
       deep: true,
       immediate: true,
       handler: function (biolucidaData) {
-        if ("dataset_images" in biolucidaData) {
-          this.addToCategories(biolucidaData["dataset_images"], "Images");
+        if ('dataset_images' in biolucidaData) {
+          this.addToCategories(biolucidaData['dataset_images'], 'Images')
         }
-      }
+      },
     },
     entry: {
       deep: true,
       immediate: true,
       handler: function () {
-        this.resetCategory();
-        this.addToCategories(this.entry.scaffolds, 'Scaffolds');
-        this.addToCategories(this.entry.segmentation, 'Segmentations');
-        this.addToCategories(this.entry.plots, 'Plots');
-        this.addSimulationsToCategories(this.entry.simulation);
+        this.addToCategories(this.entry.scaffolds, 'Scaffolds')
+        this.addToCategories(this.entry.segmentation, 'Segmentations')
+        this.addToCategories(this.entry.plots, 'Plots')
+        this.addSimulationsToCategories(this.entry.simulation)
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');
         this.addToCategories(this.entry.videos, 'Videos');
         **/
-      }
-    }
+      },
+    },
   },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/button";
-
-.tag-button,
-.tag-button:hover,
-.tag-button:focus,
-.tag-button.active
-{
-  border-radius: 4px;
-  font-size: 0.75rem;
-  padding: 0.2rem 0.2rem;
-  margin: 0.5rem 0 0 0;
-  margin-right: 0.75rem!important;
-}
-
-.tag-button,
-.tag-button:hover,
-.tag-button:focus
-{
-  background: #f9f2fc;
-  border: 1px solid $app-primary-color;
-  color: $app-primary-color;
-}
-
-.tag-button.active
-{
-  background: $app-primary-color;
-  border: 1px solid $app-primary-color;
-  color: #fff;
 }
+</script>
 
-.tag-button+.tag-button
-{
-  margin-left:0;
+<style lang="scss" scoped>
+.container {
+  .tag-button.el-button {
+    border-radius: 4px!important;
+    font-size: 0.75rem!important;
+    padding: 0.2rem 0.2rem!important;
+    margin: 0.5rem 0 0 0!important;
+    margin-right: 0.75rem !important;
+    background: #f9f2fc!important;
+    border: 1px solid $app-primary-color!important;
+    color: $app-primary-color!important;
+    &.active {
+      background: $app-primary-color!important;
+      border: 1px solid $app-primary-color!important;
+      color: #fff!important;
+    }
+  }
+  
+  .tag-button + .tag-button {
+    margin-left: 0!important;
+  }
 }
 </style>