@abi-software/map-side-bar 1.1.5-beta-0 → 1.1.5-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.1.5-beta-0",
+  "version": "1.1.5-beta-1",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@abi-software/svg-sprite": "^0.1.12",
+    "algoliasearch": "^4.10.5",
     "element-ui": "^2.13.0",
     "vue": "^2.6.10"
   },
@@ -32,6 +33,7 @@
     "file-loader": "^5.0.2",
     "raw-loader": "^0.5.1",
     "transform-loader": "^0.2.4",
+    "typescript": "^4.4.3",
     "vue-custom-element": "^3.3.0",
     "vue-template-compiler": "^2.6.10",
     "webpack-node-externals": "^2.5.2"

package/src/App.vue

@@ -3,11 +3,11 @@
     <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 'islet' from refs</el-button>
-    <el-button @click="singleFacets">single facets</el-button>
+    <el-button @click="openSearch">search 'heart' from refs</el-button>
+    <el-button @click="singleFacets">Add to Filter</el-button>
     <el-button @click="multiFacets">multiple facets</el-button>
     <el-button @click="neuronSearch">open neuron search</el-button>
-    <SideBar class="side-bar" ref="sideBar" :apiLocation="apiLocation" :visible="sideBarVisibility"
+    <SideBar :envVars="envVars" class="side-bar" ref="sideBar" :visible="sideBarVisibility"
       :tabs="tabArray" :activeId="activeId" @tabClicked="tabClicked"
       @search-changed="searchChanged($event)" @actionClick="action"/>
   </div>
@@ -63,7 +63,13 @@ export default {
         ]
       }],
       sideBarVisibility: true,
-      apiLocation: process.env.VUE_APP_API_LOCATION,
+      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
+      },
       activeId: 1,
     }
   },
@@ -78,16 +84,13 @@ export default {
       console.log("action fired: ", val)
     },
     openSearch: function(){
-      this.$refs.sideBar.openSearch('islet', [{facet: "show all", term:'organ'},
-        {facet: "show all", term:'species'},
-        {facet: "show all", term:'gender'},
-        {facet: "show all", term:'datasets'}] )
+      this.$refs.sideBar.openSearch('heart', [])
     },
     singleFacets: function(){
-      this.$refs.sideBar.openSearch('', [{facet: 'Heart', term:'organ'}])
+      this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'})
     },
     multiFacets: function(){
-      this.$refs.sideBar.openSearch('', [{facet: 'Rat', term:'species'}, {facet: 'Heart', term:'organ'}])
+      this.$refs.sideBar.openSearch('', [{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}])
     },
     neuronSearch: function(){
       this.$refs.sideBar.openNeuronSearch('neuron-type-keast-10')

package/src/algolia/algolia.js

@@ -0,0 +1,98 @@
+/* eslint-disable no-alert, no-console */
+import algoliasearch from 'algoliasearch'
+
+// export `createAlgoliaClient` to use it in page components
+export class AlgoliaClient {
+  constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    this.client = algoliasearch(
+      algoliaId,
+      algoliaKey
+    )
+    this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
+  }
+  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() );
+    let facetData = []
+    let facetId = 0
+    return this.index
+      .search('', {
+        sortFacetValuesBy: 'alpha',
+        facets: facetPropPaths
+      })
+      .then(response => {
+        facetPropPaths.map((facetPropPath) => {
+          var children = []
+          const responseFacets = response.facets
+          if (responseFacets === undefined) {return}
+          const responseFacetChildren =
+            responseFacets[facetPropPath] == undefined
+              ? {}
+              : responseFacets[facetPropPath]
+          Object.keys(responseFacetChildren).map(facet => {
+            children.push({
+              label: facet,
+              id: facetId++,
+              facetPropPath: facetPropPath
+            })
+          })
+          if (children.length > 0) {
+            facetData.push({
+              label: map.get(facetPropPath),
+              id: facetId++,
+              children: children,
+              key: facetPropPath
+            })
+          }
+        })
+        return facetData
+      })
+  }
+  
+  // Returns all DOIs of all versions for a given discover dataset
+  _discoverAllDois (discoverId, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    return new Promise(resolve => {
+      fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r=>r.json()).then(dataset => {
+        resolve(dataset.map(version => version.doi))
+      })
+    })
+  }
+  
+  // Get all dois given a list of discoverIds
+  _expandDois (discoverIds, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    return new Promise(resolve => {
+      let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
+      Promise.all(promiseList).then((values) => {
+        resolve(values.flat())
+      });
+    })
+  }
+  
+  /**
+   * Get Search results
+   * This is using fetch from the Algolia API
+   */
+  search (filter, query='', hitsperPage=10, page=1) {
+    return new Promise(resolve => {
+      this.index
+      .search(query, {
+        facets:['*'],
+        hitsPerPage: hitsperPage,
+        page: page-1,
+        filters: filter
+      })
+      .then(response => {
+        let searchData = {
+          items: response.hits,
+          total: response.nbHits,
+          discoverIds: response.hits.map(r=>r.pennsieve.identifier)
+        }
+        resolve(searchData)
+      })
+    })
+  }
+}

package/src/algolia/utils.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-alert, no-console */
+
+// 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',
+}
+
+/* Returns filter for searching algolia. All facets of the same category are joined with OR,
+  * and each of those results is then joined with an AND.
+  * i.e. (color:blue OR color:red) AND (shape:circle OR shape:red) */
+export function getFilters(selectedFacetArray=undefined) {
+  
+  // return all datasets if no filter
+  if (selectedFacetArray === undefined) {
+    return 'NOT item.published.status:embargo'
+  }
+
+  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  selectedFacetArray.forEach(f=>f.label=f.facet)
+  
+
+  let facets = removeShowAllFacets(selectedFacetArray)
+
+  let filters = "NOT item.published.status:embargo";
+  filters = `(${filters}) AND `;
+
+  const facetPropPaths = Object.keys(facetPropPathMapping);
+  facetPropPaths.map((facetPropPath) => {
+    const facetsToOr = facets.filter(
+      (facet) => facet.facetPropPath == facetPropPath
+    );
+    var filter = "";
+    facetsToOr.map((facet) => {
+      filter += `"${facetPropPath}":"${facet.label}" OR `;
+    });
+    if (filter == "") {
+      return;
+    }
+    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
+    filters += `${filter} AND `;
+  });
+  return filters.substring(0, filters.lastIndexOf(" AND "));
+}
+
+function removeShowAllFacets(facetArray){
+  return facetArray.filter( f => f.label !== 'Show all')
+}

package/src/components/DatasetCard.vue

@@ -68,9 +68,9 @@ export default {
      * the required viewing.
      */
     entry: Object,
-    apiLocation: {
-      type: String,
-      default: ""
+    envVars: {
+      type: Object,
+      default: () => {}
     },
   },
   data: function () {
@@ -102,18 +102,28 @@ export default {
     },
     samples: function() {
       let text = "";
-      if (this.entry.numberSamples === 1) {
-        text = this.entry.numberSamples + " sample";
-      } else if (this.entry.numberSamples > 1) {
-        text = this.entry.numberSamples + " samples";
-      }
       if (this.entry.species) {
         if (speciesMap[this.entry.species[0].toLowerCase()]){
-          text += ` (${speciesMap[this.entry.species[0].toLowerCase()]})`
+          text = `${speciesMap[this.entry.species[0].toLowerCase()]}`;
         } else {
-          text += ` (${this.entry.species})`
+          text = `${this.entry.species}`;
         }
       }
+      if (this.entry.numberSamples > 0) {
+        text += " (";
+        if (this.entry.numberSamples === 1) {
+          text += `${this.entry.numberSamples} sample`;
+        } else if (this.entry.numberSamples > 1) {
+          text += `${this.entry.numberSamples} samples`;
+        }
+        if (this.entry.numberSubjects === 1) {
+          text += ` from ${this.entry.numberSubjects} subject`;
+        } else if (this.entry.numberSamples > 1) {
+          text += ` from ${this.entry.numberSubjects} subjects`;
+        }
+        text += ")";
+      }
+
       return text;
     },
     label: function(){
@@ -156,7 +166,7 @@ export default {
       window.open(this.dataLocation,'_blank');
     },
     openRepository: function() {
-      let apiLocation = this.apiLocation;
+      let apiLocation = this.envVars.API_LOCATION;
       this.entry.additionalLinks.forEach(function(el) {
         if (el.description == "Repository") {
           let xmlhttp = new XMLHttpRequest();
@@ -250,11 +260,11 @@ export default {
     },
     getScaffoldPath: function(discoverId, version, scaffoldPath){
       let id = discoverId
-      let path = `${this.apiLocation}s3-resource/${id}/${version}/files/${scaffoldPath}`
+      let path = `${this.envVars.API_LOCATION}s3-resource/${id}/${version}/files/${scaffoldPath}`
       return path
     },
     getFileFromPath: function(discoverId, version, path){
-      return  `${this.apiLocation}s3-resource/${discoverId}/${version}/files/${path}`
+      return  `${this.envVars.API_LOCATION}s3-resource/${discoverId}/${version}/files/${path}`
     },
     isOverflown: function(el){
       return el.clientHeight < el.scrollHeight
@@ -292,7 +302,8 @@ export default {
       return fullName.split(',')[0]
     },
     getBiolucidaInfo: function(id) {
-      let endpoint = this.apiLocation + "image_search/" + id;
+      let apiLocation = this.envVars.API_LOCATION;
+      let endpoint = apiLocation + "image_search/" + id;
       // Add parameters if we are sent them
       fetch(endpoint)
         .then(response => response.json())