@abi-software/map-side-bar 1.3.12 → 1.3.16

package/package.json

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

package/src/App.vue

@@ -107,7 +107,7 @@ export default {
       console.log("action fired: ", val)
     },
     openSearch: function(){
-      this.$refs.sideBar.openSearch([], 'heart')
+      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})
@@ -119,7 +119,7 @@ export default {
       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'}])
+      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'}])

package/src/algolia/algolia.js

@@ -98,8 +98,8 @@ export class AlgoliaClient {
     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')) {
+          let keyword = keywordObj.keyword.toUpperCase()
+          if (keyword.includes('UBERON') || keyword.includes('ILX')) {
             foundKeyWords.push(this._processUberonURL(keyword))
           }
         })

package/src/components/ContextCard.vue

@@ -11,28 +11,49 @@
           <div class="title">{{contextData.heading}}</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">
-            <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"/>
+
+          <!-- Show sampeles and views seperately if they do not match -->
+          <template v-if="!samplesUnderViews">
+            <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
+            <template v-for="(view, i) in contextData.views">
+              <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 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)">
+                    {{sample.heading}}
+                    <i class="el-icon-warning-outline info"></i>
+                  </div>
+                </span>
+                <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>
           </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 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)">
-                  {{sample.heading}}
-                  <i class="el-icon-warning-outline info"></i>
-                </div>
+
+          <!-- Show samples under views if the ids match -->
+          <template v-else>
+            <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
+            <template v-for="(view, i) in contextData.views">
+              <span :key="i+'_1'" @click="viewClicked(view, i)" class="context-card-view">
+                <img class="view-image" :src="getFileFromPath(view.thumbnail)"/> 
+                <div class="view-description">{{view.description}}<i class="el-icon-warning-outline info"></i> </div>
               </span>
-              <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"/>
+              <div v-if="sampleDetails[i]" v-html="samplesMatching(view.id).description" :key="i+'_2'"/>
+              <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(samplesMatching(view.id).path)" target="_blank">View Source</a>
+              <div :key="i" class="padding"/>
+
+              <!-- Extra padding if sample details is open -->
+              <div :key="i+'_6'" v-if="sampleDetails[i]" class="padding"/>
+            </template>
           </template>
         </div>
       </el-card>
@@ -95,7 +116,39 @@ export default {
       immediate: true
     }
   },
+  computed: {
+    samplesUnderViews: function(){
+      if (this.contextData){
+        if (this.contextData.samplesUnderViews){
+          return true
+        } else {
+          let viewId = this.contextData.views.map(v=>v.id)
+          let samplesView = this.contextData.samples.map(s=>s.view)
+
+          // get matching values
+          let matching = viewId.filter(v=>samplesView.includes(v))
+
+          // check all arrays have the same length (which means all values are in all three)
+          if ( viewId.length === matching.length && matching.length === samplesView.length){
+            return true
+          }
+          return false
+        }
+      }
+      else return false
+    },
+  },
   methods: {
+    samplesMatching: function(viewId){
+      if (this.contextData && this.contextData.samples){
+        return this.contextData.samples.filter(s=>s.view == viewId)[0]
+      }
+      else return []
+    },
+    viewClicked: function(view, i){
+      this.openViewFile(view) 
+      this.toggleSampleDetails(i)
+    },
     getContextFile: function (contextFileUrl) {
       this.loading = true
       fetch(contextFileUrl)
@@ -183,9 +236,10 @@ export default {
 }
 
 .view-image {
-  width: 25px;
+  width: 34px;
   height: auto;
   flex: 1;
+  margin-right: 4px;
 }
 
 .view-descriptions {

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 { shownFilters } from "../algolia/utils.js";
+import {facetPropPathMapping} from "../algolia/utils.js";
 
 locale.use(lang);
 Vue.use(Option);
@@ -144,13 +144,13 @@ export default {
   },
   methods: {
     createCascaderItemValue: function (term, facet) {
-      if (facet) return term + "/" + facet;
+      if (facet) return term + ">" + facet;
       else return term;
     },
     populateCascader: function () {
       return new Promise((resolve) => {
         // Algolia facet serach
-        this.algoliaClient.getAlgoliaFacets(shownFilters)
+        this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
           .then((data) => {
             this.facets = data;
             this.options = data;
@@ -201,8 +201,8 @@ export default {
         // Create results for the filter update 
         let filterKeys = event.filter( selection => selection !== undefined).map( fs => ({
           facetPropPath: fs[0], 
-          facet: fs[1].split("/")[1],
-          term: fs[1].split("/")[0], 
+          facet: fs[1].split(">")[1],
+          term: fs[1].split(">")[0], 
           AND: fs[2] // for setting the boolean
         }))
 
@@ -211,8 +211,8 @@ export default {
           let propPath = fs[0].includes('duplicate') ? fs[0].split('duplicate')[0] : fs[0]
           return {
             facetPropPath: propPath, 
-            facet: fs[1].split("/")[1],
-            term: fs[1].split("/")[0], 
+            facet: fs[1].split(">")[1],
+            term: fs[1].split(">")[0], 
             AND: fs[2] // for setting the boolean
           }
         })