@abi-software/map-side-bar 1.3.2 → 1.3.5

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

package/src/App.vue

@@ -7,6 +7,7 @@
     <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>
+    <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"/>
@@ -113,8 +114,11 @@ export default {
     multiFacets: function(){
       this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
     },
+    keywordSearch: function(){
+      this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
+    },
     neuronSearch: function(){
-      this.$refs.sideBar.openNeuronSearch('neuron-type-keast-10')
+      this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
     }
   }
 }

package/src/algolia/algolia.js

@@ -90,6 +90,28 @@ export class AlgoliaClient {
     }
     return newResults
   }
+
+  _processKeywords(hits){
+    let foundKeyWords = []
+    let uniqueKeywords = []
+    hits.forEach(hit=>{
+      if ( hit.item && hit.item.keywords) {
+        hit.item.keywords.forEach(keywordObj=>{
+          let keyword = keywordObj.keyword
+          if (keyword.includes('UBERON') || keyword.includes('ilxtr') || keyword.includes('ILX')) {
+            foundKeyWords.push(this._processUberonURL(keyword))
+            uniqueKeywords = [...new Set(foundKeyWords)]
+          }
+        })
+      }
+    })
+    return uniqueKeywords
+  }
+
+  _processUberonURL(url){
+    let ub = url.split('/').pop()
+    ub.replace('_',':')
+  }
   
   /**
    * Get Search results
@@ -124,4 +146,28 @@ export class AlgoliaClient {
       })
     })
   }
+
+    /**
+   * Get key words
+   * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
+   */
+    keywordsInSearch (filter, query='', hitsperPage=999999, page=1) {
+      return new Promise(resolve => {
+        this.index
+        .search(query, {
+          facets:['*'],
+          hitsPerPage: hitsperPage,
+          page: page-1,
+          filters: filter,
+          attributesToHighlight: [],
+          attributesToRetrieve: [
+            'item.keywords.keyword',
+          ],
+        })
+        .then(response => {
+          let keywords = this._processKeywords(response.hits)
+          resolve(keywords)
+        })
+      })
+    }
 }

package/src/algolia/utils.js

@@ -8,13 +8,21 @@ export const facetPropPathMapping = {
   'item.modalities.keyword' : 'Experimental Approach',
   'attributes.subject.sex.value' : 'Sex',
   'attributes.subject.ageCategory.value' : 'Age Categories',
+  'item.keywords.keyword' : 'Keywords'
+}
+
+export const shownFilters = {
+  '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'

package/src/components/ContextCard.vue

@@ -9,20 +9,20 @@
         </div>
         <div class="card-right scrollbar">
           <div class="title">{{contextData.heading}}</div>
-          <div>{{contextData.description}}</div>
+          <div v-html="contextData.description"/>
           <br/>
           <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
           <template v-for="(view, i) in contextData.views">
-            <span v-bind:key="i+'_1'" @click="openViewFile(view)" class="context-card-item">
-              <img class="key-image" :src="getFileFromPath(view.thumbnail)"> 
-              {{view.description}}
-            </span>
-            <br v-bind:key="i"/>
+            <div v-bind:key="i+'_1'" @click="openViewFile(view)" class="context-card-view">
+              <img class="view-image" :src="getFileFromPath(view.thumbnail)"> 
+              <div class="view-description">{{view.description}}</div>
+            </div>
+            <div v-bind:key="i" class="padding"/>
           </template>
           <div style="margin-bottom: 16px;"/>
           <div v-if="contextData.samples && contextData.samples.length > 0" class="subtitle">Samples on Scaffold</div>
           <template v-for="(sample, i) in contextData.samples">
-              <span v-bind:key="i+'_3'" class="context-card-item" @click="toggleSampleDetails(i)">
+              <span v-bind:key="i+'_3'" class="context-card-item cursor-pointer" @click="toggleSampleDetails(i)">
                 <div v-bind:key="i+'_6'" style="display: flex">
                   <div v-if="sample.color" class="color-box" :style="'background-color:'+ sample.color"></div>
                   <img class="key-image" v-else-if="sample.thumbnail" :src="getFileFromPath(sample.thumbnail)">
@@ -30,11 +30,9 @@
                   <i class="el-icon-warning-outline info"></i>
                 </div>
               </span>
-              <div v-bind:key="i+'_4'" v-if="sampleDetails[i]">
-                {{sample.description}}
-                <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(sample.path)" target="_blank">View Source</a>
-              </div>
-              <br v-bind:key="i+'_2'"/>
+              <div v-bind:key="i+'_4'" v-if="sampleDetails[i]" v-html="sample.description"/>
+              <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(sample.path)" target="_blank">View Source</a>
+              <div v-bind:key="i+'_2'" class="padding"/>
           </template>
         </div>
       </el-card>
@@ -110,7 +108,6 @@ export default {
         })
         .then((data) => {
           this.contextData = data
-          console.log(data)
           this.loading = false
         })
         .catch(() => {
@@ -179,14 +176,20 @@ export default {
   max-height: 258px;
 }
 
-.context-card-item{
+.context-card-view{
   cursor: pointer;
   padding-bottom: 8px;
+  display: flex;
 }
 
-.key-image {
+.view-image {
   width: 25px;
   height: auto;
+  flex: 1;
+}
+
+.view-descriptions {
+  flex: 8;
 }
 
 .context-card >>> .el-card__body {
@@ -221,7 +224,6 @@ export default {
 
 .cursor-pointer {
   cursor: pointer;
-  height: 25px;
 }
 
 .info{
@@ -230,6 +232,10 @@ export default {
   margin-left: 8px;
 }
 
+.padding {
+  padding-bottom: 8px;
+}
+
 .title{
   font-weight: bold;
 }

package/src/components/SearchFilters.vue

@@ -72,7 +72,7 @@ import speciesMap from "./species-map";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 
 import {AlgoliaClient} from "../algolia/algolia.js";
-import { facetPropPathMapping } from "../algolia/utils.js";
+import { shownFilters } from "../algolia/utils.js";
 
 locale.use(lang);
 Vue.use(Option);
@@ -149,7 +149,7 @@ export default {
     populateCascader: function () {
       return new Promise((resolve) => {
         // Algolia facet serach
-        this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
+        this.algoliaClient.getAlgoliaFacets(shownFilters)
           .then((data) => {
             this.facets = data;
             this.options = data;

package/src/components/SideBar.vue

@@ -139,6 +139,12 @@ export default {
     EventBus.$on("PopoverActionClick", (payLoad) => {
       this.$emit("actionClick", payLoad);
     })
+    EventBus.$on('keywordsFound', (payLoad)=> {
+      this.$emit('search-changed', {
+        type: 'keyword-update',
+        value: payLoad
+      })
+    })
   }
 };
 </script>

package/src/components/SidebarContent.vue

@@ -61,6 +61,7 @@ import locale from "element-ui/lib/locale";
 import SearchFilters from "./SearchFilters";
 import DatasetCard from "./DatasetCard";
 import ContextCard from "./ContextCard.vue";
+import EventBus from "./EventBus"
 
 import {AlgoliaClient} from "../algolia/algolia.js";
 import {getFilters} from "../algolia/utils.js"
@@ -191,6 +192,9 @@ export default {
     searchAlgolia(filters, query=''){
       // Algolia search
       this.loadingCards = true
+      this.algoliaClient.keywordsInSearch(getFilters(filters), query).then(keywords => {
+        EventBus.$emit("keywordsFound", keywords) 
+      })
       this.algoliaClient.search(getFilters(filters), query, this.numberPerPage, this.page).then(searchData => {
         this.numberOfHits = searchData.total
         this.discoverIds = searchData.discoverIds