@abi-software/map-side-bar 1.2.0 → 1.2.3-hardcoded-1

package/package-lock.json

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

package/package.json

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

package/scaffold_context_info.json

@@ -11,6 +11,7 @@
             "id": "Sample 1",
             "path": "",
             "view": "View 1",
+            "color": "#FFFF00",
             "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/orange.png"
         },
         {
@@ -21,8 +22,9 @@
             "id": "Sample 2",
             "path": "",
             "view": "View 2",
+            "color": "#FFA500",
             "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/teal.png"
         }
     ],
-    "version": "0.1.0",
+    "version": "0.1.0"
 }

package/src/algolia/algolia.js

@@ -75,6 +75,7 @@ export class AlgoliaClient {
   _processResultsForCards(results) {
     let newResults = []
     let newResult = {}
+    let id = 0
     for (let res of results) {
       newResult = {...res}
       newResult = {
@@ -83,7 +84,9 @@ export class AlgoliaClient {
         description: res.item.description,
         updated: res.pennsieve.updatedAt,
         publishDate: res.pennsieve.publishDate,
-      } 
+        id: id
+      }
+      id++
       newResults.push(newResult)
     }
     return newResults

package/src/components/ContextCard.vue

@@ -11,7 +11,7 @@
           <div class="title">{{contextData.heading}}</div>
           <div>{{contextData.description}}</div>
           <br/>
-          <div v-if="contextData.views" class="subtitle">Scaffold Views</div>
+          <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)"> 
@@ -84,7 +84,7 @@ export default {
       handler(val){
         if (val) {
           // used for hardcoding data
-          if (val === true){
+          if ( Number.isFinite(val) ){
             this.contextData = hardcoded_info[this.entry.discoverId]
           } else {
             this.getContextFile(val)
@@ -110,7 +110,6 @@ export default {
         })
         .then((data) => {
           this.contextData = data
-          console.log(data)
           this.loading = false
         })
         .catch(() => {
@@ -136,7 +135,7 @@ export default {
     },
     getFileFromPath: function(path){
       // for hardcoded data
-      if(this.entry.contextCardUrl === true){
+      if(this.entry.contextCardUrl && 1 > this.entry.contextCardUrl > 0){
         return path
       }
       path = this.removeDoubleFilesPath(path)
@@ -186,10 +185,13 @@ export default {
   padding: 0px;
   display: flex;
   width: 516px;   
+  max-height: 480px;
+  overflow-y: scroll !important;
+  scrollbar-width: thin;
 }
 
 .context-image{
-  width: 250px;
+  width: 230px;
   height: auto;
 }
 
@@ -207,7 +209,6 @@ export default {
   border: solid 1px #e4e7ed;
   display: flex;
   width: 500px;
-  max-height: 480px;
 }
 
 .card-left{
@@ -237,4 +238,22 @@ export default {
 .subtitle{
   font-weight: bold;
 }
+
+/* Custom scroll bar */
+.context-card >>> .el-card__body::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.context-card >>> .el-card__body::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.context-card >>> .el-card__body::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
 </style>

package/src/components/DatasetCard.vue

@@ -152,7 +152,7 @@ export default {
           banner: this.thumbnail
         }
         if (hardcoded_info[this.discoverId]){
-          action.contextCardUrl = true
+          action.contextCardUrl = Math.random()
         }
         this.propogateCardAction(action)
     },
@@ -290,6 +290,7 @@ export default {
       this.cardOverflow = false
       this.expanded = false
       this.cardOverflow = this.isOverflown(this.$refs.card)
+      this.getBanner()
     }
   },
 };

package/src/components/SidebarContent.vue

@@ -22,12 +22,12 @@
       @loading="filtersLoading"
     ></SearchFilters>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
-      <div v-if="loadingScicrunch" class="loading-icon" v-loading="loadingScicrunch"></div>
       <div
         class="error-feedback"
         v-if="results.length === 0 && !loadingCards && !sciCrunchError"
       >No results found - Please change your search / filter criteria.</div>
       <div class="error-feedback" v-if="sciCrunchError">{{sciCrunchError}}</div>
+      <div v-if="loadingScicrunch" class="loading-icon" v-loading="loadingScicrunch"></div>
       <div v-for="result in results" :key="result.id" class="step-item">
         <DatasetCard :entry="result" :envVars="envVars" @contextUpdate="contextCardUpdate"></DatasetCard>
       </div>
@@ -156,13 +156,15 @@ export default {
     contextCardUpdate: function(val){
         this.contextCardEntry = val
     },
-    openSearch: function(filter, search='') {
+    openSearch: function(filters, search='') {
       this.searchInput = search;
       this.resetPageNavigation();
-      this.searchAlgolia(filter, search);
-      if (filter) {
-        this.filter = [...filter];
-        this.$refs.filtersRef.setCascader(this.filter);
+      this.searchAlgolia(filters, search);
+      if(filters) {
+        filters.forEach(filter=>{
+          this.filter = [...filter];
+          this.$refs.filtersRef.setCascader(this.filter);
+        })
       }
     },
     addFilter: function(filter) {
@@ -249,7 +251,6 @@ export default {
     resultsProcessing: function(data) {
       this.lastSearch = this.searchInput;
 
-      let id = 0;
       if (data.results.length === 0) {
         return;
       }
@@ -276,19 +277,15 @@ export default {
           organs: (element.organs && element.organs.length > 0)
               ? [...new Set(element.organs.map(v => v.name))]
               : undefined,
-          species: element.organisms 
+          species: element.organisms
             ? element.organisms[0].species
               ? [...new Set(element.organisms.map((v) =>v.species ? v.species.name : null))]
               : undefined
             : undefined, // This processing only includes each gender once into 'sexes'
-          id: id,
           scaffolds: element['abi-scaffold-metadata-file'] ? element['abi-scaffold-metadata-file'] : undefined,
           contextualInformation: element['abi-contextual-information'].length > 0 ? element['abi-contextual-information'] : undefined,
-          simulation: element.additionalLinks
-            ? element.additionalLinks[0].description == 'Repository'
-            : false,
+          simulation: element['abi-simulation-file'],
         });
-        id++;
 
         Vue.set(this.results, i, this.results[i])
       });
@@ -384,15 +381,19 @@ export default {
 }
 
 .loading-icon {
-  position: relative;
+  position: absolute;
   display: flex;
   float: right;
-  top: 0;
+  right: 40px;
   z-index: 20;
   width: 40px;
   height: 40px;
 }
 
+.loading-icon >>> .el-loading-mask {
+  background-color: rgba(117, 190, 218, 0.0) !important;
+}
+
 .pagination >>> button {
   background-color: white !important;
 }

package/src/components/hardcoded-context-info.js

@@ -1,4 +1,213 @@
 export default {
+    221: {
+        "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M134, 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.",
+            "doi": "",
+            "heading": "Digital tracing for subject M11 ",
+            "id": "Sample 1",
+            "path": "derivative/sub-M11/sam-pCm11/digital-traces/pC PHPS XFP M11 20XZ 180425_180713_2_NL_20.xml",
+            "view": "View 1"
+          },
+          {
+            "annotation": "",
+            "description": "Digital traces demonstrate 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": "derivative/sub-M16/sam-pCm16/digital-traces/pC PHPS XFP M16 20XZ 180425_180524.xml",
+            "view": "View 2"
+          },
+          {
+            "annotation": "",
+            "description": "Digital traces demonstrate how the nerve fibers (dark green and orange) contact several neurons and/or run together with other fibers.",
+            "doi": "",
+            "heading": "Digital tracing for subject M134",
+            "id": "Sample 3",
+            "path": "derivative/sub-M134/sam-pCm134/digital-traces/pC XFP M134 20XZ 190806_191012_200130D_lx.xml",
+            "view": "View 3"
+          },
+          {
+            "annotation": "",
+            "description": "Various types of labeled neurons located in one large ganglion. Long nerve fibers from different directions cross the ganglion, and two fibers (magenta and green) run closely apposed in segments with axons of neurons (white and red). Two axons (aqua and peach on the top) are adjacent to each other, as well as two somas (red and yellow). One neuron (cyan) displays complex wiring with neurons nearby via the axon-soma, axon-dendritic and axon-axon contacts. Vertically projecting fibers in the left side are the fibers innervating the circular muscle. ",
+            "doi": "",
+            "heading": "Digital tracing for subject M162",
+            "id": "Sample 4",
+            "path": "derivative/sub-M162/sam-pCm162/digital-traces/pCm162_AAV_Z_20x_20200204_S1D_lx_li_z-flip.xml",
+            "view": "View 4"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracings from subject M163 are annotated into the following groups to highlight their interactions:\n\nF peach connex: A nerve fiber (peach) displays close appositions with a few neuronal processes. \n\nInterganglionic strand joined by Ns Fs:Axons (with contacts) and a long crossing fiber (dark green) join an interganglionic strand.\n\nN12 Connex: One neuron (green) is in contact with four others via axon-soma, axon-dendrites and axon-axon connections, as well as one passing fiber.\n",
+            "doi": "",
+            "heading": "Digital tracing for subject M163",
+            "id": "Sample 5",
+            "path": "derivative/sub-M163/sam-pCm163/digital-traces/pCm163_AAV_Z_20x_20200206_S3-ab.xml",
+            "view": "View 5"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracings for subject M164 demonstrates wiring of neuronal clusters.",
+            "doi": "",
+            "heading": "Digital tracing for subject M164",
+            "id": "Sample 6",
+            "path": "derivative/sub-M164/sam-pCm164/digital-traces/pCm164_AAV_Z_20x_20200211_S2A.xml",
+            "view": "View 6"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracings from subject M168 are annotated into the following groups to highlight their interactions:\n\nF Beige connex:  Connections of one ganglion-crossing fiber (beige) with neurons and ganglion-crossing nerve fibers. \n\nF Green connex : Interganglionic connections.\n\nInterganglionic connex: Connections of one ganglion-crossing fiber (green) with neurons in two ganglia and ganglion-crossing nerve fibers. A nerve fiber (red) runs a long distance together with another fiber (green). \n\nIntraganglionic strand: Ganglia crossing fibers and axons of neurons join an interganglionic strand.",
+            "doi": "",
+            "heading": "Digital tracing for subject M168",
+            "id": "Sample 7",
+            "path": "derivative/sub-M168/digital-traces/pCm168_AAV_Z_20x_191211_S3B_lx.xml",
+            "view": "View 7"
+          }
+        ],
+        "version": "0.1.0",
+        "views": [
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M16.",
+            "id": "View 2",
+            "path": "derivative/Scaffolds/AAV_M16_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M16_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M134.",
+            "id": "View 3",
+            "path": "derivative/Scaffolds/AAV_M134_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M134_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M162.",
+            "id": "View 4",
+            "path": "derivative/Scaffolds/AAV_M162_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M162_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M163.",
+            "id": "View 5",
+            "path": "derivative/Scaffolds/AAV_M163_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M163_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M164.",
+            "id": "View 6",
+            "path": "derivative/Scaffolds/AAV_M164_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M164_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M168.",
+            "id": "View 7",
+            "path": "derivative/Scaffolds/AAV_M168_view.json",
+            "sample": "Sample 7",
+            "thumbnail": "derivative/Scaffolds/AAV_M168_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Digital tracing of neurons for subject M11.",
+            "id": "View 1",
+            "path": "derivative/Scaffolds/AAV_M11_view.json",
+            "sample": "Sample 1",
+            "thumbnail": "derivative/Scaffolds/AAV_M11_thumbnail.jpeg"
+          }
+        ]
+      },
+    125: {
+        "description": "Cumulative distributions of retrogradely labeled motor neurons from 8 inter-tenial longitudinal muscle preparations and 7 preparations from the tenial region are mapped onto the human colon scaffold. \n\nNote that the distributions are mapped to the descending colon but consistent pattern were observed along the entire length of the colon.",
+        "heading": "Mapped LMMN projections",
+        "id": "sparc.science.context_data",
+        "samples": [
+          {
+            "annotation": "",
+            "description": "Excitatory motor neurons (ChAT+) are predominantly located aboral to the DiI application site, whereas inhibitory motor neurons (NOS+) are scattered across the distribution.",
+            "doi": "",
+            "heading": "Distribution of LMMN in inter-tenial region",
+            "id": "Sample 2",
+            "path": "",
+            "view": "View 2"
+          },
+          {
+            "annotation": "",
+            "description": "Excitatory motor neuron cell bodies (ChAT+) are clustered anal to the DiI application site and thus mostly had ascending projections while inhibitory motor neurons (NOS+) are located on both sides of the application site.",
+            "doi": "",
+            "heading": "Distribution of LMMN in tenial region",
+            "id": "Sample 1",
+            "path": "",
+            "view": "View 1"
+          }
+        ],
+        "version": "0.1.0",
+        "views": [
+          {
+            "annotation": "",
+            "description": "Distribution of LMMN in tenial region",
+            "id": "View 1",
+            "path": "derivative/Scaffolds/scaffoldMap_tenial_view.json",
+            "sample": "Sample 1",
+            "thumbnail": "derivative/Scaffolds/scaffoldMap_tenial_thumbnail.jpeg"
+          },
+          {
+            "annotation": "",
+            "description": "Distribution of LMMN in inter-tenial region",
+            "id": "View 2",
+            "path": "derivative/Scaffolds/scaffoldMap_intertenial_view.json",
+            "sample": "Sample 2",
+            "thumbnail": "derivative/Scaffolds/scaffoldMap_intertenial_thumbnail.jpeg"
+          }
+        ]
+      },
+     34: {
+        "description": "Relative contraction and mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) are mapped on the proximal, transverse and distal sections of the pig colon scaffold. Only sections monitored with manometry probes are displayed here and these sections are not contiguous. \n\nBaseline data was collected for 30min, followed by 15min of stimulation and 30min of post-stimulation.\n\nDuring stimulation, the distal colon was also observed to display longitudinal contraction which is not captured on the scaffold due to the lack of measurements. \n\n",
+        "heading": "Direct distal colon stimulation",
+        "id": "sparc.science.context_data",
+        "samples": [
+          {
+            "annotation": "",
+            "description": "",
+            "doi": "",
+            "heading": "Direct distal colon stimulation",
+            "id": "Sample 1",
+            "path": "derivative/sub-all_direct-stim_manometry_distal-colon.xlsx",
+            "view": ""
+          }
+        ],
+        "version": "0.1.0",
+        "views": []
+    },
+    150: {
+        "description": "Relative contraction and mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) are mapped on the proximal, transverse and distal sections of the pig colon scaffold. Only sections monitored with manometry probes are displayed here and these sections are not contiguous. \n\nBaseline data was collected for 15min, followed by 10min of stimulation and 30min of post-stimulation.",
+        "heading": "Acute CBVN 300us pulse-train without block",
+        "id": "sparc.science.context_data",
+        "samples": [
+            {
+            "annotation": "",
+            "description": "",
+            "doi": "",
+            "heading": "Acute CBVN 300us pulse-train without block",
+            "id": "Sample 1",
+            "path": "derivative/perf-CBVN-stim_300us_5mA_PT/sub-all_CBVN-stim_300us_5_mA_PT_woB_manometry.xlsx",
+            "view": ""
+            }
+        ],
+        "version": "0.1.0",
+        "views": []
+    }
 
 }
 // //Uncomment the code below to add in hardcoded data
@@ -60,7 +269,7 @@ export default {
 //     "version": "0.1.0",
 //     "views": [
 //       {
-//         "annotation": "--",
+//         "annotation": "",
 //         "description": "Digital tracing of neurons for subject M11.",
 //         "id": "View 1",
 //         "path": "files/derivative/Scaffolds/M11_view.json",
@@ -68,7 +277,7 @@ export default {
 //         "thumbnail": "https://api.sparc.science/s3-resource/221/2/files/derivative/Scaffolds/M11_thumbnail.jpeg"
 //       },
 //       {
-//         "annotation": "--",
+//         "annotation": "",
 //         "description": "Digital tracing of neurons for subject M16.",
 //         "id": "View 2",
 //         "path": "files/derivative/Scaffolds/M16_view.json",