Merge pull request #154 from nih-sparc/add-devices-to-portal

Add devices to portal
nih-sparc · Jul 5, 2024 · 4ba2cdd · 4ba2cdd
2 parents e405e90 + c2f19b6
commit 4ba2cdd
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 51 deletions.
diff --git a/components/DatasetDetails/DatasetActionBox.vue b/components/DatasetDetails/DatasetActionBox.vue
@@ -24,6 +24,19 @@
           Cite Scaffold
         </el-button>
       </template>
+      <template v-else-if="datasetTypeName === 'device'">
+        <template v-if="hasFiles">
+          <el-button
+            class="dataset-button"
+            @click="actionButtonClicked('files')"
+          >
+            Get Device
+          </el-button>
+        </template>
+        <el-button class="secondary" @click="actionButtonClicked('cite')">
+          Cite Device
+        </el-button>
+      </template>
       <template v-else-if="datasetTypeName === 'computational model'">
         <el-button v-if="canViewSimulation" @click="openSimulationViewer()">
           View Simulation
@@ -68,15 +81,17 @@
           </sparc-tooltip>
         </a>
       </template>
-      <el-button
-        v-if="hasFiles"
-        @click="actionButtonClicked('files')"
-      >
-        Get Dataset
-      </el-button>
-      <el-button class="secondary" @click="actionButtonClicked('cite')">
-        Cite Dataset
-      </el-button>
+      <template v-else>
+        <el-button
+          v-if="hasFiles"
+          @click="actionButtonClicked('files')"
+        >
+          Get Dataset
+        </el-button>
+        <el-button class="secondary" @click="actionButtonClicked('cite')">
+          Cite Dataset
+        </el-button>
+      </template>
       <template v-if="sdsViewer">
         <a
           :href="sdsViewer"

diff --git a/components/DatasetDetails/DatasetDescriptionInfo.vue b/components/DatasetDetails/DatasetDescriptionInfo.vue
@@ -13,32 +13,42 @@
     <div class="heading2 mb-8">
       Metadata
     </div>
-    <p class="mb-8"><strong>Experimental Design: </strong></p>
+    <template v-if="isDevice">
+      <p class="mb-8"><strong>Intended Use: </strong>{{ intendedUseText }}</p>
+      <p class="mb-8"><strong>Current Use: </strong>{{ currentUse }}</p>
+      <p class="mb-8"><strong>Device Type: </strong>{{ deviceType }}</p>
+      <p class="mb-8"><strong>Application: </strong>{{ deviceApplication }}</p>
+      <p class="mb-8"><strong>Device Target (disease or disorder): </strong> {{ deviceTarget }}</p>
+      <p class="mb-8"><strong>Target Population: </strong></p>
+    </template>
+    <template v-else>
+      <p class="mb-8"><strong>Experimental Design: </strong></p>
+      <div class="experimental-design-container mb-8">
+        <span class="experimental-design-section-text-column"><strong>Protocol Links: </strong></span>
+        <span v-if="datasetRecords.length !== 0">
+          <div v-for="record in datasetRecords" :key="record.id">
+            <a
+              class="link2"
+              :href="record.url"
+              target="_blank"
+            >
+              {{ record.url }}
+            </a>
+          </div> 
+        </span>
+        <span
+          v-else
+        >
+          N/A
+        </span>
+      </div>
+      <div class="experimental-design-container mb-16">
+        <span><strong>Experimental Approach: </strong>{{experimentalApproachText}}</span>
+      </div>
+      <p class="mb-8"><strong>Subject Information: </strong></p>
+    </template>
     <div class="experimental-design-container mb-8">
-      <span class="experimental-design-section-text-column"><strong>Protocol Links: </strong></span>
-      <span v-if="datasetRecords.length !== 0">
-        <div v-for="record in datasetRecords" :key="record.id">
-          <a
-            class="link2"
-            :href="record.url"
-            target="_blank"
-          >
-            {{ record.url }}
-          </a>
-        </div> 
-      </span>
-      <span
-        v-else
-      >
-        n/a
-      </span>
-    </div>
-    <div class="experimental-design-container mb-16">
-      <span><strong>Experimental Approach: </strong>{{experimentalApproachText}}</span>
-    </div>
-    <p class="mb-8"><strong>Subject Information: </strong></p>
-    <div class="experimental-design-container mb-8">
-      <span><strong>Anatomical structure: </strong>{{anatomicalStructureText}}</span>
+      <span><strong>Anatomical Structure: </strong>{{anatomicalStructureText}}</span>
     </div>
     <div class="experimental-design-container mb-8">
       <span><strong>Species: </strong>{{speciesText}}</span>
@@ -47,10 +57,10 @@
       <span><strong>Sex: </strong>{{sexText}}</span>
     </div>
     <div class="experimental-design-container mb-8">
-      <span><strong>Age range: </strong>{{ageRangeText}}</span>
+      <span><strong>Age Range: </strong>{{ageRangeText}}</span>
     </div>
-    <div class="experimental-design-container mb-16">
-      <span><strong>Number of samples: </strong>{{samplesMetadataText}}</span>
+    <div v-if="!isDevice" class="experimental-design-container mb-16">
+      <span><strong>Number of Samples: </strong>{{samplesMetadataText}}</span>
     </div>
     <div class="mb-16">
       <sparc-tooltip
@@ -101,7 +111,7 @@
       </span>
     </span>
     <span v-else>
-      <p>n/a</p>
+      <p>N/A</p>
     </span>
   </div>
 </template>
@@ -146,7 +156,7 @@ export default {
   },
 
   computed: {
-    ...mapState(useMainStore, ['datasetFacetsData','datasetInfo', 'userToken']),
+    ...mapState(useMainStore, ['datasetFacetsData', 'datasetTypeName', 'datasetInfo', 'userToken']),
     EMBARGO_ACCESS() {
       return EMBARGO_ACCESS
     },
@@ -182,7 +192,37 @@ export default {
       {
         return `${this.numberSamples} samples from ${this.numberSubjects} subjects`
       }
-      return 'n/a'
+      return 'N/A'
+    },
+    intendedUseText() {
+      let intendedUse = _.get(this.datasetMetadataInfo, 'device.intendedUse[0].name', 'N/A')
+      if (intendedUse.length > 0)
+        intendedUse = intendedUse.charAt(0).toUpperCase() + intendedUse.slice(1)
+      return intendedUse
+    },
+    currentUse() {
+      let currentUse = _.get(this.datasetMetadataInfo, 'device.currentUse[0].name', 'N/A')
+      if (currentUse.length > 0)
+        currentUse = currentUse.charAt(0).toUpperCase() + currentUse.slice(1)
+      return currentUse
+    },
+    deviceType() {
+      let deviceType = _.get(this.datasetMetadataInfo, 'device.type[0].name', 'N/A')
+      if (deviceType.length > 0)
+        deviceType = deviceType.charAt(0).toUpperCase() + deviceType.slice(1)
+      return deviceType
+    },
+    deviceApplication() {
+      let deviceApplication = _.get(this.datasetMetadataInfo, 'device.application[0].description', 'N/A')
+      if (deviceApplication.length > 0)
+        deviceApplication = deviceApplication.charAt(0).toUpperCase() + deviceApplication.slice(1)
+      return deviceApplication
+    },
+    deviceTarget() {
+      let deviceTarget = _.get(this.datasetMetadataInfo, 'device.target[0].name', 'N/A')
+      if (deviceTarget.length > 0)
+        deviceTarget = deviceTarget.charAt(0).toUpperCase() + deviceTarget.slice(1)
+      return deviceTarget
     },
     /**
      * Gets dataset id
@@ -208,6 +248,9 @@ export default {
         url += `?api_key=${this.userToken}`
       }
       return url
+    },
+    isDevice() {
+      return this.datasetTypeName == 'device'
     }
   },
 
@@ -228,7 +271,7 @@ export default {
       const facet = this.datasetFacetsData.find(item => item.key === facetKey)
       if (facet === undefined || !facet.children)
       {
-        return 'n/a'
+        return 'N/A'
       }
       facet.children.forEach(child => {
         let childLabel = child.label.charAt(0).toUpperCase() + child.label.slice(1)

diff --git a/components/DatasetDetails/DatasetHeader.vue b/components/DatasetDetails/DatasetHeader.vue
@@ -187,10 +187,10 @@ export default {
       return !this.embargoed && this.numCitations !== 0
     },
     numCitationsText: function() {
-      return this.showCitations ? `${this.numCitations}` : 'n/a'
+      return this.showCitations ? `${this.numCitations}` : 'N/A'
     },
     numDownloadsText: function() {
-      return this.embargoed ? 'n/a' : `${this.numDownloads}`
+      return this.embargoed ? 'N/A' : `${this.numDownloads}`
     }
   },
 

diff --git a/components/SearchResults/DatasetSearchResults.vue b/components/SearchResults/DatasetSearchResults.vue
@@ -176,7 +176,9 @@ export default {
     },
     getSearchResultsType(item) {
       return item !== undefined ? 
-        (item.types[0].name === 'computational model' ? 'simulation' : 'dataset') :
+        (item.types[0].name === 'computational model' ? 'simulation'
+          : item.types[0].name === 'device' ? 'device'
+          : 'dataset') :
         ''
     }
   }

diff --git a/pages/data/index.vue b/pages/data/index.vue
@@ -133,7 +133,8 @@ import SortMenu from '@/components/SortMenu/SortMenu.vue'
 const searchResultsComponents = {
   dataset: DatasetSearchResults,
   simulation: DatasetSearchResults,
-  model: DatasetSearchResults
+  model: DatasetSearchResults,
+  device: DatasetSearchResults
 }
 
 const searchTypes = [
@@ -148,6 +149,10 @@ const searchTypes = [
   {
     label: 'Computational Models',
     type: 'simulation',
+  },
+  {
+    label: 'Devices',
+    type: 'device'
   }
 ]
 
@@ -220,11 +225,12 @@ export default {
         total: 0
       },
       facets: [],
-      dataTypes: ['dataset', 'simulation', 'model'],
+      dataTypes: ['dataset', 'simulation', 'model', 'device'],
       humanReadableDataTypesLookup: {
         dataset: 'Datasets',
         model: 'Anatomical Models',
         simulation: 'Computational Models',
+        device: 'Devices'
       },
       resultCounts: {
         model: 0,
@@ -395,6 +401,7 @@ export default {
       const datasetsFilter =
         searchType === 'simulation' ? '(NOT item.types.name:Dataset AND NOT item.types.name:Scaffold)'
           : searchType === 'model' ? '(NOT item.types.name:Dataset AND item.types.name:Scaffold)'
+          : searchType === 'device' ? 'item.types.name:Device'
           : "item.types.name:Dataset"
 
       /* First we need to find only those facets that are relevant to the search query.
@@ -476,7 +483,8 @@ export default {
       const datasetsFilter =
         searchType === 'simulation' ? '(NOT item.types.name:Dataset AND NOT item.types.name:Scaffold)'
           : searchType === 'model' ? '(NOT item.types.name:Dataset AND item.types.name:Scaffold)'
-            : "item.types.name:Dataset"
+          : searchType === 'device' ? 'item.types.name:Device'
+          : "item.types.name:Dataset"
 
       var filters = this.$refs.datasetFacetMenu?.getFilters()
       filters = filters === undefined ?

diff --git a/tests/cypress/e2e/datasets.cy.js b/tests/cypress/e2e/datasets.cy.js
@@ -124,13 +124,13 @@ datasetIds.forEach(datasetId => {
       cy.get('.active.style1.tab2.tab-link.p-16').should('contain', 'Versions');
       cy.get('[style=""] > .heading2.mb-8').should('contain', 'Versions for this Dataset').and('be.visible')
 
-      //Check 'Get Dataset' directs to files tab
-      cy.contains('.button-container span', 'Get Dataset').click()
+      //Check 'Get {dataset type}' directs to files tab (It could say either Get Dataset, Model, Scaffold, or Device based off the type of dataset)
+      cy.contains('.button-container span', 'Get').click()
       cy.get('.active.style1.tab2.tab-link.p-16').should('contain', 'Files');
       cy.get('[style=""] > .heading2.mb-8').should('contain', 'Download Dataset').and('be.visible')
 
-      //Check 'Cite Dataset' directs to Cite tab
-      cy.contains('.button-container span', 'Cite Dataset').click()
+      //Check 'Cite {dataset type}' directs to Cite tab (It could say either Cite Dataset, Model, Scaffold, or Device based off the type of dataset)
+      cy.contains('.button-container span', 'Cite').click()
       cy.get('.active.style1.tab2.tab-link.p-16').should('contain', 'Cite');
       cy.get('.citation-details > .heading2').should('contain', 'Dataset Citation').and('be.visible')
     });