feat(#442): create dataset gallery, configure elasticsearch for datasets

app/src/components/Drawer.vue

@@ -54,6 +54,9 @@
           <router-link to="/explorer/images" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate" class="md-inset">Image Gallery</md-list-item>
           </router-link>
+          <router-link to="/explorer/dataset" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate" class="md-inset">Dataset Gallery</md-list-item>
+          </router-link>
           <router-link to="/explorer/xmls" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate" class="md-inset">View Xmls</md-list-item>
           </router-link>

app/src/components/nanomine/PageHeader.vue

@@ -65,6 +65,7 @@
                                     <router-link to="/explorer" class="nav_menu--siblings-lists"><a>Browse Data</a></router-link>
                                     <router-link to="/explorer/chart" class="nav_menu--siblings-lists"><a>Chart Gallery</a></router-link>
                                     <router-link to="/explorer/images" class="nav_menu--siblings-lists"><a>Image Gallery</a></router-link>
+                                    <router-link to="/explorer/dataset" class="nav_menu--siblings-lists"><a>Dataset Gallery</a></router-link>
                                     <router-link to="/explorer/xmls" class="nav_menu--siblings-lists"><a>View XMLs</a></router-link>
                                 </div>
                             </div>

app/src/pages/explorer/Gallery.vue

@@ -180,8 +180,12 @@ export default {
     async deleteChart (chart) {
       if (!this.isAdmin) return // temporary safeguard
       this.dialogLoading = true
-      await this.$store.dispatch('explorer/curation/deleteChartNanopub', chart.identifier)
-      await this.$store.dispatch('explorer/curation/deleteChartES', chart.identifier)
+      await this.$store.dispatch('explorer/curation/deleteEntityNanopub', chart.identifier)
+      await this.$store.dispatch('explorer/curation/deleteEntityES',
+        {
+          identifier: chart.identifier,
+          type: 'charts'
+        })
       this.toggleDialogBox()
       this.dialogLoading = false
       await this.loadItems()

app/src/pages/explorer/Visualization.vue

@@ -19,8 +19,8 @@
           <div class="md-layout-item md-layout-item_card">
             <router-link to="/explorer/images" v-slot="{navigate, href}" custom>
               <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">
-                <md-icon class="explorer_page-nav-card_icon">grid_view</md-icon>
-                <span class="explorer_page-nav-card_text">Image</span>
+                <md-icon class="explorer_page-nav-card_icon">collections</md-icon>
+                <span class="explorer_page-nav-card_text">Images</span>
                 <p class="md-layout-item_para">Visit our Image Gallery to view microstructural images for nanocomposite systems stored
                   in the MaterialsMine knowledge graph, and filter by material constituents, nanoparticle geometry, and more.
                 </p>
@@ -32,7 +32,19 @@
               <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">
                 <md-icon class="explorer_page-nav-card_icon">dynamic_feed</md-icon>
                 <span class="explorer_page-nav-card_text">XMLs</span>
-                <p class="md-layout-item_para">Browse a catalog of sample XMLs that have been curated into the MaterialsMine knowledge graph
+                <p class="md-layout-item_para">Browse a catalog of sample XMLs that have been curated into the
+                  MaterialsMine knowledge graph.
+                </p>
+              </div>
+            </router-link>
+          </div>
+          <div class="md-layout-item md-layout-item_card">
+            <router-link to="/explorer/dataset" v-slot="{navigate, href}" custom>
+              <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">
+                <md-icon class="explorer_page-nav-card_icon">dataset</md-icon>
+                <span class="explorer_page-nav-card_text">Datasets</span>
+                <p class="md-layout-item_para">
+                  Browse a catalog of datasets that have been curated into the MaterialsMine knowledge graph.
                 </p>
               </div>
             </router-link>

app/src/pages/explorer/chart/editor/Chart.vue

@@ -177,13 +177,18 @@ export default {
         if (this.$route.params.type === 'new') {
           // Save chart to MongoDB - async operation
         } else {
-          await this.$store.dispatch('explorer/curation/deleteChartES', `http://nanomine.org/viz/${this.chartId}`)
+          await this.$store.dispatch('explorer/curation/deleteEntityES', {
+            // TODO: Can we change these to a materialsmine.org uri or will that break things?
+            identifier: `http://nanomine.org/viz/${this.chartId}`,
+            type: 'charts'
+          })
           // Find in mongo and update - async operation
         }
 
-        const resp = await this.$store.dispatch('explorer/curation/cacheNewChartResponse', {
+        const resp = await this.$store.dispatch('explorer/curation/cacheNewEntityResponse', {
           identifier: this.submittedIdentifier,
-          chartNanopub
+          resourceNanopub: chartNanopub,
+          type: 'charts'
         })
 
         if (resp.identifier) {

app/src/pages/explorer/chart/view/vega-view-script.js

@@ -90,8 +90,11 @@ export default {
     async deleteChart () {
       if (!this.isAdmin) return // temporary safeguard
       this.dialogLoading = true
-      await this.$store.dispatch('explorer/curation/deleteChartNanopub', this.chart.uri)
-      await this.$store.dispatch('explorer/curation/deleteChartES', this.chart.uri)
+      await this.$store.dispatch('explorer/curation/deleteEntityNanopub', this.chart.uri)
+      await this.$store.dispatch('explorer/curation/deleteEntityES', {
+        identifier: this.chart.uri,
+        type: 'charts'
+      })
       this.toggleDialogBox()
       this.dialogLoading = false
       this.$router.push('/explorer/chart')

app/src/pages/explorer/curate/sdd/SddForm.vue

@@ -206,7 +206,7 @@
               <div>
                 <label>Associated Organization (e.g., name of university)</label>
                 <div>
-                  <md-chip md-deletable class="u_margin-bottom-small" v-for="(element, i) in dataset.organization" 
+                  <md-chip md-deletable class="u_margin-bottom-small" v-for="(element, i) in dataset.organization"
                     @md-delete="deleteOrg(dataset.organization, i)" :key="`org_${i}`">{{ element.name }}
                   </md-chip>
                 </div>
@@ -233,7 +233,7 @@
                         {{ item.name }}
                         <span v-if="(optionalChaining(() => item.addresses[0].city))
                           || (optionalChaining(() => item.country.country_code))">
-                          ({{ (optionalChaining(() => item.addresses[0].city)) }}, 
+                          ({{ (optionalChaining(() => item.addresses[0].city)) }},
                           {{ (optionalChaining(() => item.country.country_code)) }})
                         </span>
                       </span>
@@ -384,7 +384,7 @@
                 <h3>Associated Organization(s):</h3>
                 <span v-for="(org, index) in dataset.organization" :key="`org_${index}`">
                   <span v-if="index==0">{{ org.name }}</span>
-                  <span v-else="index==0">, {{ org.name }}</span>
+                  <span v-else>, {{ org.name }}</span>
                 </span>
               </div>
               <div v-if="dataset.datePub['@value']" class="u_margin-bottom-small">
@@ -517,7 +517,7 @@ export default {
           '@type': 'date',
           '@value': ''
         },
-        organization: [],
+        organization: []
       },
       // For editing existing datasets
       oldDistributions: [],
@@ -547,8 +547,8 @@ export default {
     userInfo () {
       return {
         '@id': `https://materialsmine.org/api/user/${this.$store.getters['auth/userId']}`,
-        'firstName':  this.$store.getters['auth/user'].givenName,
-        'lastName': this.$store.getters['auth/user'].surName
+        firstName: this.$store.getters['auth/user'].givenName,
+        lastName: this.$store.getters['auth/user'].surName
       }
     }
   },
@@ -566,7 +566,7 @@ export default {
     },
     searchKeywordOrg (newVal) {
       if (newVal) {
-        this.lookupOrganization({query: newVal})
+        this.lookupOrganization({ query: newVal })
       }
       this.showDropdown = true
     }
@@ -604,15 +604,15 @@ export default {
         this.orcidId = response?.[0]?.contactPoint?.['@id']?.split('http://orcid.org/')[1]
         this.lookupOrcid(this.orcidId)
         if (this.dataset?.organization?.length) {
-          const orgs = this.dataset.organization.map( async (org) => {
+          const orgs = this.dataset.organization.map(async (org) => {
             const rorId = org['@id'].split('https://ror.org/')[1]
-            let rorOrg = await this.$store.dispatch('explorer/curation/searchRor', {id: rorId})
+            const rorOrg = await this.$store.dispatch('explorer/curation/searchRor', { id: rorId })
             return {
               '@id': org['@id'],
               '@type': 'organization',
-              'name': rorOrg[0].name
+              name: rorOrg[0].name
             }
-          });
+          })
           this.dataset.organization = await Promise.all(orgs)
         }
       } catch (e) {
@@ -660,11 +660,11 @@ export default {
     lookupOrganization: _.debounce(function (payload) {
       this.$store.dispatch('explorer/curation/searchRor', payload)
     }, 300),
-    selectOrg(item) {
+    selectOrg (item) {
       const formatOrg = {
         '@id': item.id,
         '@type': 'organization',
-        'name': item.name
+        name: item.name
       }
       if (!this.dataset.organization.includes(formatOrg)) {
         this.dataset.organization.push(formatOrg)
@@ -778,7 +778,12 @@ export default {
         const processedFiles = this.processFiles()
         const processedImg = this.processDepictions()
         try {
-          await saveDataset(this.dataset, processedFiles, processedImg, this.generatedUUID)
+          const datasetNanopub = await saveDataset(this.dataset, processedFiles, processedImg, this.generatedUUID)
+          await this.$store.dispatch('explorer/curation/cacheNewEntityResponse', {
+            identifier: this.dataset.uri,
+            resourceNanopub: datasetNanopub,
+            type: 'datasets'
+          })
           this.dialog.title = 'Upload successful'
           this.dialog.type = 'success'
         } catch (err) {

app/src/pages/explorer/dataset/Dataset.vue

@@ -27,7 +27,7 @@
           <md-card-header class="section_md-header ">
             <md-card-header-text class="section_text-col flex-item">
               <div v-if="dataset[datasetFields['title']]" class="md-title u--margin-header">
-                {{ dataset[datasetFields['title']]?.[0]?.['@value'] || "Curated Dataset"}}
+                {{ (optionalChaining(() => dataset[datasetFields['title']][0]['@value'])) || "Curated Dataset"}}
               </div>
               <div v-if="dataset[datasetFields['doi']]">
                 DOI: <a class=" u--b-rad" @click="nav_to_doi(doi)">{{ doi }}</a>
@@ -37,8 +37,8 @@
               </div>
             </md-card-header-text>
             <div v-if="dataset[datasetFields['depiction']]" class="quicklinks_content flex-item u--padding-zero" style="max-width:20rem;">
-              <img v-if="thumbnail" :src="thumbnail?.[0]?.['@value']"
-                :alt="`${dataset[datasetFields['title']]?.[0]?.['@value']} image` || 'Dataset Thumbnail'"
+              <img v-if="thumbnail" :src="(optionalChaining(() => thumbnail[0]['@value']))"
+                :alt="`${(optionalChaining(() => dataset[datasetFields['title']][0]['@value']))} image` || 'Dataset Thumbnail'"
                 class="facet_viewport img">
             </div>
           </md-card-header>
@@ -65,7 +65,7 @@
                   :class="`charts-${index+1} charts-${index+1}-narrow`"
                   :key="`card_${index}`"
                 >
-                <a :href="(optionalChaining(() => item?.downloadLink))">
+                <a :href="(optionalChaining(() => item.downloadLink))">
                   <md-card-media-cover md-solid>
                     <md-card-media md-ratio="4:3">
                       <md-icon class="explorer_page-nav-card_icon u_margin-top-small">description</md-icon>
@@ -74,7 +74,7 @@
                     <md-card-area class="u_gridbg">
                       <md-card-header class="u_show_hide">
                         <span class="md-subheading">
-                          <strong>{{ item?.label || 'Dataset File'}}</strong>
+                          <strong>{{ (optionalChaining(() => item.label)) || 'Dataset File'}}</strong>
                         </span>
                         <span class="md-body-1">Click to download</span>
                       </md-card-header>
@@ -91,16 +91,31 @@
             </div>
           </div>
 
-          <div v-if="dataset" id="metadata" :class="{search_box_form: true, 'u--layout-flex-justify-se': true, explorer_page_header: true, 'u--layout-flex-switch': tabbed_content.md_active, metadata:true}">
+          <div v-if="dataset" id="metadata" :class="{search_box_form: false, 'u--layout-flex-justify-se': true, explorer_page_header: true, 'u--layout-flex-switch': tabbed_content.md_active, metadata:true}">
+            <div class="u--margin-pos" v-if="!!organizations.length">
+              <span class="u--font-emph-xl u--color-black">
+                Associated Organizations/Institutions:
+              </span>
+              <span v-for="(org, index) in organizations"
+                :key="`org_${index}`"
+                class="u--color-grey-sec">
+                <a v-if="index==0" :href="(optionalChaining(() => org[0].id))" target="_blank">
+                  {{ (optionalChaining(() => org[0].name)) }}
+                </a>
+                <a v-else :href="(optionalChaining(() => org[0].id))" target="_blank">
+                  , {{ (optionalChaining(() => org[0].name))  }}
+                </a>
+              </span>
+            </div>
             <div class="u--margin-pos" v-if="dataset[datasetFields['datePub']]">
               <span class="u--font-emph-xl u--color-black">
                 Date Published:
               </span>
               <span class="u--font-emph-xl u--color-grey-sec">
-                {{ dataset[datasetFields['datePub']]?.[0]?.['@value'] || 'N/A' }}
+                {{ (optionalChaining(() => dataset[datasetFields['datePub']][0]['@value'])) || 'N/A' }}
               </span>
             </div>
-            <div v-else>
+            <div v-else-if="!organizations.length">
               <span class="u--font-emph-xl u--color-grey-sec">
                 N/A
               </span>
@@ -113,12 +128,17 @@
                 Contact Point:
               </span>
               <span id="microscropy" class="u--font-emph-xl u--color-grey-sec">
-                {{ orcidData['http://schema.org/givenName']?.[0]?.['@value'] || '' }} {{ orcidData['http://schema.org/familyName']?.[0]?.['@value'] || ''}}
+                {{ (optionalChaining(() => orcidData['http://schema.org/givenName'][0]['@value'])) || '' }}
+                {{ (optionalChaining(() => orcidData['http://schema.org/familyName'][0]['@value'])) || ''}}
               </span>
-              <div>ORCiD: <a class=" u--b-rad" :href="(optionalChaining(() => orcidData?.['@id']))" target="_blank">
-                {{orcidData?.['@id'] || dataset[datasetFields.cp]?.[0]?.['@id'] || 'N/A'}}
+              <div>ORCiD: <a class=" u--b-rad" :href="(optionalChaining(() => orcidData['@id']))" target="_blank">
+                {{ (optionalChaining(() => orcidData['@id'])) ||
+                  (optionalChaining(() => dataset[datasetFields.cp][0]['@id'])) ||
+                  'N/A'}}
               </a></div>
-              <div v-if="orcidData['http://www.w3.org/2006/vcard/ns#email']">Contact Email: {{orcidData['http://www.w3.org/2006/vcard/ns#email']?.[0]?.['@value']|| 'N/A'}}</div>
+              <div v-if="orcidData['http://www.w3.org/2006/vcard/ns#email']">
+                Contact Email: {{(optionalChaining(() => orcidData['http://www.w3.org/2006/vcard/ns#email'][0]['@value'])) || 'N/A'}}
+              </div>
             </div>
             <div class="u--margin-pos" v-else>
               <span class="u--font-emph-xl u--color-grey-sec">
@@ -162,9 +182,11 @@ export default {
         title: 'http://purl.org/dc/terms/title',
         cp: 'http://w3.org/ns/dcat#contactpoint',
         distribution: 'http://w3.org/ns/dcat#distribution',
-        depiction: 'http://xmlns.com/foaf/0.1/depiction'
+        depiction: 'http://xmlns.com/foaf/0.1/depiction',
+        organization: 'http://xmlns.com/foaf/0.1/Organization'
       },
       distributions: {},
+      organizations: [],
       loading: true
     }
   },
@@ -180,6 +202,10 @@ export default {
           .replace(`${window.location.origin}/`, '')
         this.lookupOrcid(trimmedId)
       }
+      if (newValues?.[this.datasetFields.organization]) {
+        const rorList = this.dataset[this.datasetFields.organization]
+        this.parseRorList(rorList)
+      }
       if (newValues?.[this.datasetFields.depiction]) {
         const thumbnailUri = this.dataset[this.datasetFields.depiction][0]['@id']
         this.$store.dispatch('explorer/fetchDatasetThumbnail', thumbnailUri)
@@ -202,7 +228,8 @@ export default {
       isAdmin: 'auth/isAdmin',
       dataset: 'explorer/getCurrentDataset',
       thumbnail: 'explorer/getDatasetThumbnail',
-      orcidData: 'explorer/curation/getOrcidData'
+      orcidData: 'explorer/curation/getOrcidData',
+      rorData: 'explorer/curation/getRorData'
     }),
     doi () {
       if (this.dataset?.[this.datasetFields.doi]) {
@@ -226,6 +253,15 @@ export default {
     lookupOrcid (id) {
       this.$store.dispatch('explorer/curation/lookupOrcid', id)
     },
+    lookupRor (id) {
+      return this.$store.dispatch('explorer/curation/searchRor', { id })
+    },
+    parseRorList (rorList) {
+      Promise.all(rorList.map((org) => {
+        const id = org?.['@id'].replace('https://ror.org/', '')
+        return this.$store.dispatch('explorer/curation/searchRor', { id })
+      })).then((results) => { this.organizations = results })
+    },
     navBack () {
       this.$router.back()
     },