@abi-software/map-side-bar 1.1.13 → 1.1.16

package/package-lock.json

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

package/package.json

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

package/src/App.vue

@@ -18,36 +18,50 @@
 // optionally import default styles
 import SideBar from './components/SideBar'
 
-let testContext = {
-    "version": "0.1.0",
-    "heading": "Generic mouse colon scaffold",
-    "description": "Annotated mouse colon scaffold available for registration of segmented neural anatomical-functional mapping of enteric neural circuits.",
-    "samples": [],
-    "views": [
-        {
-            "annotation": "UBERON:0008971",
-            "id": "View 1",
-            "path": "derivative/distalColon_view.json",
-            "sample": "--",
-            "thumbnail": "derivative/distalColon_thumbnail.jpeg"
-        },
-        {
-            "annotation": "UBERON:0008972",
-            "id": "View 2",
-            "path": "derivative/proximalColon_view.json",
-            "sample": "--",
-            "thumbnail": "derivative/proximalColon_thumbnail.jpeg"
-        },
-        {
-            "annotation": "UBERON:0001157",
-            "id": "View 3",
-            "path": "derivative/transverseColon_view.json",
-            "sample": "--",
-            "thumbnail": "derivative/transverseColon_thumbnail.jpeg"
-        }
-    ]
-}
-
+// 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",
+//   "id": "sparc.science.context_data",
+//   "samples": [
+//     {
+//       "annotation": "",
+//       "description": "Neuronal soma and fibers in a myenteric ganglion in this subject are annotated into the following groups to highlight their interactions:\n\nNeuron1,2,3 Connex: Connections between 3 neurons and cross-ganglionic fibers\n\nNeuron4_Connex: A small neuron contacts fibers passing the ganglion\n\nNeuron5: Multiple projections of a neuron in an myenteric ganglion\n\nNeuron5,3,7 Connex: Connections between 3 neurons, nerve fibers, IGNEx (complex type of intraganglionic nerve endings) and fibers in the circular muscles.\n\nNeuron8,9,10 Connex: Connections of 3 neurons with each other and with long passing fibers. \n\nIntraganglionic Nerve Ending (IGNE): Digital traces of neurites consist of complex intraganglionic nerve endings. The blue fiber has branched terminals, more likely the afferent nerve endings; the violet and cyan terminals also interweave into the fiber nest; the orange, pink and peach fibers and one process of the neuron cross the IGNE to make 1-2 conjunctions. \n",
+//       "doi": "",
+//       "heading": "Digital tracing for subject M11",
+//       "id": "Sample 1",
+//       "path": "files/derivative/sub-M11/sam-pCm11/digital-traces/pC PHPS XFP M11 20XZ 180425_180713_2_NL_20.xml",
+//       "view": "View 1"
+//     },
+//     {
+//       "annotation": "",
+//       "description": "This digital trace demonstrates some types of wiring. A long process of the green neuron terminates in the intraganglionic nerve endings (IGNE) while in contact with a nerve fiber (cyan),  soma of a neuron (peach) and processes of 3 neurons (magenta, yellow and red). Two neurons and one fiber are traced to an IGNE. ",
+//       "doi": "",
+//       "heading": "Digital tracing for subject M16",
+//       "id": "Sample 2",
+//       "path": "files/derivative/sub-M16/sam-pCm16/digital-traces/pC PHPS XFP M16 20XZ 180425_180524.xml",
+//       "view": "View 2"
+//     }
+//   ],
+//   "version": "0.1.0",
+//   "views": [
+//     {
+//       "annotation": "--",
+//       "description": "Digital tracing of neurons for subject M11.",
+//       "id": "View 1",
+//       "path": "files/derivative/Scaffolds/M11_view.json",
+//       "sample": "Sample 1",
+//       "thumbnail": "files/derivative/Scaffolds/M11_thumbnail.jpeg"
+//     },
+//     {
+//       "annotation": "--",
+//       "description": "Digital tracing of neurons for subject M16.",
+//       "id": "View 2",
+//       "path": "files/derivative/Scaffolds/M16_view.json",
+//       "sample": "Sample 2",
+//       "thumbnail": "files/derivative/Scaffolds/M16_thumbnail.jpeg"
+//     }
+//   ]
+// }
 export default {
   name: 'app',
   components: {
@@ -65,33 +79,7 @@ export default {
   data: function(){
     return {
       tabArray: [{title: 'Flatmap', id:1},{title: 'Heart Scaffold', id:2},{title: 'Stomach Scaffold', id:3}],
-      contextArray: [testContext,{
-        title: "Neural paths mapped to a heart scaffold",
-        description: "Points are mapped to their positions on a 3d heart that is mapped to the data.",
-        bannerImage: 'https://image.prntscr.com/image/aNIksBFARaKwlKhpnDCKbA.png',
-        keys: [{
-          image: "https://image.prntscr.com/image/VqNcZ8fSQJu5TJEf9ahwvA.png",
-          text: "Neural path"
-        }],
-      },{
-        title: "ICN fitted Scaffold",
-        description: "Points are mapped to their positions on a 3d heart that is mapped to the data.",
-        bannerImage: 'https://image.prntscr.com/image/BKgqmjSaQjK-B9hy_W7haQ.png',
-        keys: [{
-          image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png",
-          text: "Data type 1"
-        },{
-          image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png",
-          text: "Data type 2"
-        },{
-          image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png",
-          text: "Data type 3"
-        },{
-          image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png",
-          text: "Data type 4"
-        }
-        ]
-      }],
+      contextArray: [null,null,null],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: process.env.VUE_APP_API_LOCATION,
@@ -120,7 +108,7 @@ export default {
       this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'})
     },
     multiFacets: function(){
-      this.$refs.sideBar.openSearch('', [{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}])
+      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/components/ContextCard.vue

@@ -2,14 +2,14 @@
   <div class="context-card-container"  ref="container">
     <div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information<i class="el-icon-arrow-up"></i></div>
     <div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information<i class="el-icon-arrow-down"></i></div>
-    <el-card v-show="showDetails" class="context-card card" :body-style="{ padding: '0px', 'background-color': 'white', display: 'flex', width: '516px'}">
-      <img :src="entry.bannerImage" class="context-image card-left">
+    <el-card v-if="showDetails && Object.keys(contextData).length !== 0" class="context-card card" :body-style="{ padding: '0px', 'background-color': 'white', display: 'flex', width: '516px'}">
+      <img :src="entry.banner" class="context-image card-left">
       <div class="card-right">
-        <div class="title">{{entry.title}}</div>
-        <div>{{entry.description}}</div>
-        <template v-for="key in entry.keys">
-          <br v-bind:key="key.text"/>
-          <span v-bind:key="key.text + 1"><img :src="key.image" style="height: 20px;"> {{key.text}}</span>
+        <div class="title">{{contextData.heading}}</div>
+        <div>{{contextData.description}}</div>
+        <template v-for="(view, i) in contextData.views">
+          <br v-bind:key="i"/>
+          <span v-bind:key="i+'_1'" @click="openViewFile(view)" style="cursor:pointer;"><img :src="getFileFromPath(view.thumbnail)" style="height: 25px;"> {{view.description}}</span>
         </template>
       </div>
     </el-card>
@@ -23,6 +23,7 @@ import Vue from "vue";
 import { Link, Icon, Card, Button, Select, Input } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
+import EventBus from "./EventBus"
 
 locale.use(lang);
 Vue.use(Link);
@@ -45,14 +46,50 @@ export default {
   },
   data: function () {
     return {
+      contextData: {},
       showDetails: true
     };
   },
-  computed: {
-
+  watch: {
+    'entry.contextCardUrl'(val){
+      this.getContextFile(val)
+    }
   },
   methods: {
+    getContextFile: function (contextFileUrl) {
+      fetch(contextFileUrl)
+        .then((response) =>{
+          if (!response.ok){
+            throw Error(response.statusText)
+          } else {
+             return response.json()
+          }
+        })
+        .then((data) => {
+          this.contextData = data
+          console.log(this.contextData)
+        })
+        .catch(() => {
+          //set defaults if we hit an error
+          this.thumbnail = require('@/../assets/missing-image.svg')
+          this.discoverId = undefined
+        });
+    },
+    getFileFromPath: function(path){
+      return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
+    },
+    openViewFile: function(view){
+
+      // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
+      this.entry.viewUrl = view.path.split('/')[view.path.split('/').length-1]
+      this.entry.type = 'Scaffold View'
+      EventBus.$emit("PopoverActionClick", this.entry)
+    }
+    
   },
+  mounted: function(){
+    this.getContextFile(this.entry.contextCardUrl)
+  }
 };
 </script>
 

package/src/components/DatasetCard.vue

@@ -17,6 +17,9 @@
           <div>
             <el-button v-if="entry.scaffolds" @click="openScaffold" size="mini" class="button" icon="el-icon-view">View scaffold</el-button>
           </div>
+          <div>
+            <el-button v-if="entry.contextualInformation" @click="openContext" size="mini" class="button" icon="el-icon-view">View context data</el-button>
+          </div>
           <div>
             <el-button v-if="hasCSVFile"  @click="openPlot" size="mini" class="button" icon="el-icon-view">View plot</el-button>
           </div>
@@ -42,7 +45,6 @@ import { Button, Icon } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import EventBus from "./EventBus"
-import scaffoldMetaMap from './scaffold-meta-map';
 import speciesMap from "./species-map";
 
 locale.use(lang);
@@ -140,9 +142,26 @@ export default {
           title: "View 3D scaffold",
           type: "Scaffold",
           discoverId: this.discoverId,
-          contextCard: scaffoldMetaMap[this.discoverId] ? scaffoldMetaMap[this.discoverId].contextCard : undefined
+          apiLocation: this.envVars.API_LOCATION,
+          version: this.version,
+          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
+          banner: this.thumbnail
         }
-        EventBus.$emit("PopoverActionClick", action)
+        this.propogateCardAction(action)
+    },
+    openContext: function(){
+      let action = {
+          label: capitalise(this.label),
+          resource: 'not used',
+          title: "View 3D scaffold",
+          type: "Scaffold",
+          discoverId: this.discoverId,
+          apiLocation: this.envVars.API_LOCATION,
+          version: this.version,
+          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
+          banner: this.thumbnail
+        }
+        this.propogateCardAction(action)
     },
     openPlot: function(){
       let action = {
@@ -151,8 +170,12 @@ export default {
           title: "View plot",
           type: "Plot",
           discoverId: this.discoverId,
+          apiLocation: this.envVars.API_LOCATION,
+          version: this.version,
+          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
+          banner: this.thumbnail
         }
-        EventBus.$emit("PopoverActionClick", action)
+        this.propogateCardAction(action)
     },
     openDataset: function(){
       window.open(this.dataLocation,'_blank');
@@ -195,7 +218,10 @@ export default {
           label: undefined,
           resource: resource,
           dataset: this.dataLocation,
-          datasetId: this.discoverId,
+          apiLocation: this.envVars.API_LOCATION,
+          version: this.version,
+          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
+          banner: this.thumbnail,
           title: "View simulation",
           name: this.entry.name,
           description: this.entry.description,
@@ -203,6 +229,13 @@ export default {
         }
         EventBus.$emit("PopoverActionClick", action)
     },
+    propogateCardAction: function(action){
+      EventBus.$emit("PopoverActionClick", action)
+      if (action.contextCardUrl) {
+        this.$emit('contextUpdate', action)
+      }
+
+    },
     getScaffoldPath: function(discoverId, version, scaffoldPath){
       let id = discoverId
       let path = `${this.envVars.API_LOCATION}s3-resource/${id}/${version}/files/${scaffoldPath}`

package/src/components/SearchFilters.vue

@@ -18,9 +18,28 @@
           @tags-changed="tagsChangedCallback"
         ></custom-cascader>
         <div v-if="showFiltersText" class="filter-default-value">
-          <map-svg-icon icon="noun-filter" class="filter-icon-inside" />Apply
           Filters
         </div>
+        <el-popover
+          title="How do filters work?"
+          width="250"
+          trigger="click"
+          :append-to-body=false
+          popper-class="popover"
+          >
+          <map-svg-icon slot="reference" icon="help" class="help"/>
+          <div >
+            <strong>Within categories:</strong> OR 
+            <br/>
+            example: 'heart' OR 'colon'
+            <br/>
+            <br/>
+            <strong>Between categories:</strong> AND
+            <br/>
+            example: 'rat' AND 'lung'
+          </div>
+        </el-popover>
+        
       </span>
     </transition>
 
@@ -45,7 +64,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Option, Select } from "element-ui";
+import { Option, Select, Popover } from "element-ui";
 import CustomCascader from "./Cascader";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -58,6 +77,7 @@ import { facetPropPathMapping } from "../algolia/utils.js";
 locale.use(lang);
 Vue.use(Option);
 Vue.use(Select);
+Vue.use(Popover)
 
 const capitalise = function (txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1);
@@ -157,6 +177,7 @@ export default {
                   this.createCascaderItemValue(facet.label, facetItem.label);
               });
             });
+            this.createDataTypeFacet()
           })
           .finally(() => {
             resolve();
@@ -176,17 +197,28 @@ export default {
         // Check for show all in selected cascade options
         event = this.showAllEventModifier(event);
 
-        // Move results from arrays to object
-        let filters = event.filter( selection => selection !== undefined).map( fs => ({
+        // 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], 
         }))
 
+        // Move results from arrays to object for use on scicrunch (note that we remove 'duplicate' as that is only needed for filter keys)
+        let filters = event.filter( selection => selection !== undefined).map( fs => {
+          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], 
+          }
+        })
+
+
         this.$emit('loading', true) // let sidebarcontent wait for the requests
 
         this.$emit("filterResults", filters); // emit filters for apps above sidebar
-        this.setCascader(filters); //update our cascader v-model if we modified the event
+        this.setCascader(filterKeys); //update our cascader v-model if we modified the event
         this.makeCascadeLabelsClickable();
       }
     },
@@ -255,6 +287,28 @@ export default {
       }
       return event;
     },
+    createDataTypeFacet: function(){
+      let dataFacet = {...this.facets[2]} // copy the 'Experiemental approach' facet
+      let count = this.facets.at(-1).id // get the last id count
+
+      // Step through the children that are valid data types, switch thier values 
+      let newChildren = dataFacet.children.filter( el=> {
+        if (el.label === 'Scaffold' || el.label === 'Simulation' || el.label === 'Show all'){
+          el.key = el.label
+          el.id = count
+          el.value = el.value.replace('Experimental approach', 'Data type')
+          count++
+          return el
+        }
+      })
+      dataFacet.id = count
+      dataFacet.key = 'Data type'
+      // Add 'duplicate' so that the key is unique. This is removed in the cascade event for filtering
+      dataFacet.value += 'duplicate' 
+      dataFacet.children = newChildren
+      dataFacet.label = 'Data type'
+      this.facets.push(dataFacet)
+    },
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event;
@@ -358,6 +412,20 @@ export default {
   padding-left: 16px;
 }
 
+.help {
+  width: 24px !important;
+  height: 24px;
+  transform: scale(1.1);
+  color: #8300bf;
+  cursor: pointer;
+}
+
+.popover {
+  color: rgb(48, 49, 51);
+  font-family: Asap;
+  margin: 12px;
+}
+
 .filter-icon-inside {
   width: 12px !important;
   height: 12px !important;
@@ -439,4 +507,51 @@ export default {
 .cascader >>> .el-cascader-node__label {
   text-align: left;
 }
+
+.filters >>> .el-popover {
+    background: #f3ecf6 !important;
+    border: 1px solid #8300BF;
+    border-radius: 4px;
+    color: #303133 !important;
+    font-size: 12px;
+    line-height: 18px;
+  
+  
+}
+
+.filters >>> .el-popover[x-placement^="top"] .popper__arrow {
+  border-top-color: #8300BF;
+  border-bottom-width: 0;
+}
+.filters >>> .el-popover[x-placement^="top"] .popper__arrow::after {
+  border-top-color: #f3ecf6;
+  border-bottom-width: 0;
+}
+
+.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow {
+  border-top-width: 0;
+  border-bottom-color: #8300BF;
+}
+.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow::after {
+  border-top-width: 0;
+  border-bottom-color: #f3ecf6;
+}
+
+.filters >>> .el-popover[x-placement^="right"] .popper__arrow {
+  border-right-color: #8300BF;
+  border-left-width: 0;
+}
+.filters >>> .el-popover[x-placement^="right"] .popper__arrow::after {
+  border-right-color: #f3ecf6;
+  border-left-width: 0;
+}
+
+.filters >>> .el-popover[x-placement^="left"] .popper__arrow {
+  border-right-width: 0;
+  border-left-color: #8300BF;
+}
+.filters >>> .el-popover[x-placement^="left"] .popper__arrow::after {
+  border-right-width: 0;
+  border-left-color: #f3ecf6;
+}
 </style>

package/src/components/SidebarContent.vue

@@ -28,7 +28,7 @@
       >No results found - Please change your search / filter criteria.</div>
       <div class="error-feedback" v-if="sciCrunchError">{{sciCrunchError}}</div>
       <div v-for="o in results" :key="o.id" class="step-item">
-        <DatasetCard :entry="o" :envVars="envVars"></DatasetCard>
+        <DatasetCard :entry="o" :envVars="envVars" @contextUpdate="contextCardUpdate"></DatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -101,7 +101,8 @@ var initial_state = {
   pageModel: 1,
   start: 0,
   hasSearched: false,
-  sciCrunchError: false
+  sciCrunchError: false,
+  contextCardEntry: undefined
 };
 
 export default {
@@ -120,10 +121,6 @@ export default {
       type: Object,
       default: () => initial_state
     },
-    contextCardEntry: {
-      type: Object,
-      default: undefined
-    },
     envVars: {
       type: Object,
       default: () => {}
@@ -153,6 +150,9 @@ export default {
     }
   },
   methods: {
+    contextCardUpdate: function(val){
+      this.contextCardEntry = val
+    },
     openSearch: function(filter, search='') {
       this.searchInput = search;
       this.resetPageNavigation();
@@ -277,6 +277,7 @@ export default {
           doi: element.doi,
           publishDate: element.publishDate,
           scaffolds: element['abi-scaffold-metadata-file'] ? element['abi-scaffold-metadata-file'] : undefined,
+          contextualInformation: element['abi-contextual-information'].length > 0 ? element['abi-contextual-information'] : undefined,
           additionalLinks: element.additionalLinks,
           simulation: element.additionalLinks
             ? element.additionalLinks[0].description == 'Repository'