From cb3b4fc0bf29197ff2066b8f6df5f0ce4d5c352f Mon Sep 17 00:00:00 2001
From: Rory Schadler <roryschadler@gmail.com>
Date: Fri, 18 Mar 2022 15:06:29 -0400
Subject: [PATCH 1/6] #24: Initial XML Uploader commit

Converted vuetify to vue-material, added references to the reference
store.
---
 .../nanomine/DatasetCreateOrSelect.vue        | 367 ++++++++++++++++++
 .../nanomine/xmlUploader/XmlUploader.vue      |   8 +
 .../nanomine/xmlUploader/xmlUploader.html     | 115 +++++-
 .../pages/nanomine/xmlUploader/xmlUploader.js | 157 +++++++-
 app/src/router/module/nanomine.js             |   2 +-
 .../nanomine/referenceContainer/index.js      |  12 +
 6 files changed, 656 insertions(+), 5 deletions(-)
 create mode 100644 app/src/components/nanomine/DatasetCreateOrSelect.vue

diff --git a/app/src/components/nanomine/DatasetCreateOrSelect.vue b/app/src/components/nanomine/DatasetCreateOrSelect.vue
new file mode 100644
index 00000000..b2d648ac
--- /dev/null
+++ b/app/src/components/nanomine/DatasetCreateOrSelect.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="datasets">
+    <md-card style="width:100%;">
+      <md-card-header class="dataset-header md-layout md-alignment-top-space-between">
+        <span class="md-layout-item">
+          <md-button class="md-primary md-raised md-icon-button" @click="toggleDatasetHide">
+            <md-icon v-if="!datasetHideSelector">expand_more</md-icon>
+            <md-icon v-else>expand_less</md-icon>
+          </md-button>
+          <md-button v-if="auth && auth.isLoggedIn()" class="md-primary md-raised md-icon-button"
+            @click="toggleDatasetCard">
+            <md-icon>library_add</md-icon>
+          </md-button>
+          <md-button v-if="datasetsHeaderInfoIcon" class="md-primary md-raised md-icon-button"
+            @click="datasetInfoDialog()">
+            <md-icon>info</md-icon>
+          </md-button>
+          {{datasetsHeaderTitle}}
+        </span>
+        <span class="md-layout-item" style="width:50%;" v-show="datasetSelected !== null">{{headerDOI}}</span>
+      </md-card-header>
+      <md-card v-if="addDatasetDialogActive">
+        <md-field>
+          <label>Enter a comment to describe this dataset as uniquely as possible</label>
+          <md-input v-model="addDatasetComment"></md-input>
+        </md-field>
+        <md-button @click="addDatasetDialogActive=false; addDatasetComment=''" small>Cancel</md-button>
+        <md-button @click="addDatasetSave()" small color="primary" class="white--text">Save</md-button>
+      </md-card>
+
+      <md-table v-model="displayDatasets" v-show="!datasetHideSelector" md-sort="seq" md-sort-order="asc" md-card
+        md-fixed-header md-model-id="seq">
+        <md-table-toolbar>
+          <div class="md-toolbar-section-start">
+            <h1 v-if="mineOnlyAlways" class="md-title">Datasets you've created</h1>
+          </div>
+          <div v-if="auth && auth.isLoggedIn() && !mineOnlyAlways">
+            <md-checkbox v-model="showMineOnly" class="md-primary">Show mine only</md-checkbox>
+          </div>
+          <md-field md-clearable class="md-toolbar-section-end">
+            <md-input placeholder="Filter datasets" v-model="datasetSearch"></md-input>
+          </md-field>
+        </md-table-toolbar>
+
+        <md-table-empty-state md-label="No data available"
+          :md-description="`Your search for '${datasetSearch}' returned no results.`"></md-table-empty-state>
+
+        <template #md-table-row="{ item }">
+          <md-table-row @click="datasetClick(item)">
+            <md-table-cell md-label="ID" md-sort-by="seq" md-numeric>{{ item.seq }}</md-table-cell>
+            <md-table-cell md-label="DOI" md-sort-by="doi">{{ item.doi }}</md-table-cell>
+            <md-table-cell md-label="Title" md-sort-by="title">{{ item.title }}</md-table-cell>
+            <md-table-cell md-label="Comment" md-sort-by="datasetComment">{{ item.datasetComment }}</md-table-cell>
+          </md-table-row>
+        </template>
+      </md-table>
+    </md-card>
+    <dialog-box :active="dialogBoxActive">
+      <template v-slot:title>{{ dialog.title }}</template>
+      <template v-slot:content>{{ dialog.content }}</template>
+      <template v-slot:actions>
+        <md-button @click.native.prevent="dialog.closeHandler">Close</md-button>
+      </template>
+    </dialog-box>
+    <!--
+
+    Dataset Info Dialog
+
+    -->
+    <dialog-box v-if="datasetInfoDialogActive">
+      <template v-slot:title>Dataset Information</template>
+      <template v-slot:content>
+        <md-list class="md-double-line">
+          <md-list-item v-for="(item, index) in datasetDialogInfo.items" :key="index">
+            <v-subheader v-if="item.header" :key="item.header">
+              {{ item.header }}
+            </v-subheader>
+
+            <md-divider v-else-if="item.divider" :key="index"></md-divider>
+
+            <div v-else :key="item.title" class="md-list-item-text">
+              <span v-html="item.title"></span>
+              <span v-html="item.subtitle"></span>
+            </div>
+          </md-list-item>
+        </md-list>
+      </template>
+      <template v-slot:actions>
+        <md-button @click="datasetInfoDialogActive=false">
+          <md-icon>close</md-icon>
+        </md-button>
+      </template>
+    </dialog-box>
+
+  </div>
+</template>
+
+<script>
+// import { Auth } from '@/modules/Auth.js'
+import Dialog from '@/components/Dialog.vue'
+import * as _ from 'lodash'
+
+export default {
+  name: 'DatasetCreateOrSelect',
+  components: {
+    dialogBox: Dialog
+  },
+  props: {
+    datasetOptions: { // Valid options: {mineOnly: 'true'|'false'|'always'}
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    selectHeader: {
+      type: String,
+      default: 'Choose a dataset'
+    },
+    selectedHandler: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      msg: 'Hi',
+      showMineOnly: true,
+      mineOnlyAlways: false,
+      addDatasetDialogActive: false,
+      addDatasetComment: '',
+      datasetsError: false,
+      datasetsErrorMsg: '',
+      datasetTransformed: {},
+      datasetHideSelector: true,
+      datasetList: [{ seq: 1, doi: '2', title: 'lol', datasetComment: 'hello', userID: '0' }],
+      datasetSearch: '',
+      displayDatasets: [],
+      // datasetHeaders: [
+      //   { text: 'ID', align: 'left', value: 'seq' },
+      //   { text: 'DOI', align: 'left', value: 'doi' },
+      //   { text: 'Title', align: 'left', value: 'title' },
+      //   { text: 'Comment', align: 'left', value: 'datasetComment' }
+      // ],
+
+      datasetSelected: null,
+      datasetInfoDialogActive: false,
+      datasetDialogInfo: {},
+      auth: {
+      // AUTH MOCKED because auth is not yet implemented
+        getUserID: () => '0',
+        getRunAsUser: () => false,
+        isLoggedIn: () => true
+      },
+      dialogBoxActive: false,
+      dialog: {}
+    }
+  },
+  watch: {
+    datasetOptions: function (options) {
+      if (options) {
+        this.overrideOptions(this.datasetOptions)
+      } else {
+        this.datasetOptions = {}
+      }
+    },
+    datasetSearch: function () {
+      this.displayDatasets = this.datasetsFiltered()
+    }
+  },
+  computed: {
+    datasetsHeaderTitle () {
+      if (this.datasetSelected) {
+        return 'Selected Dataset:'
+      } else {
+        return this.selectHeader
+      }
+    },
+    datasetsHeaderInfoIcon () {
+      return !!this.datasetSelected
+    },
+    headerDOI () {
+      if (this.datasetSelected) {
+        // TODO need a remote config call to get values like this from server
+        if (!this.datasetSelected.doi || this.datasetSelected.doi.length < 1 || this.datasetSelected.doi === 'unpublished-initial-create') {
+          return this.datasetSelected.datasetComment
+        } else {
+          return this.datasetSelected.doi
+        }
+      }
+      return null
+    }
+  },
+  beforeMount () {
+    const vm = this
+    // vm.auth = new Auth()
+    vm.getDatasets()
+    vm.overrideOptions(vm.datasetOptions)
+    this.displayDatasets = this.datasetsFiltered()
+  },
+  methods: {
+    overrideOptions (datasetOptions) {
+      this.mineOnlyAlways = false
+      if (datasetOptions.mineOnly === 'always') {
+        this.mineOnlyAlways = true
+        this.mineOnly = true
+      } else if (datasetOptions.mineOnly === 'true') {
+        this.mineOnly = true
+      } else {
+        this.mineOnly = false
+      }
+    },
+    datasetInfoDialog: function () {
+      this.datasetInfoDialogActive = true
+    },
+    toggleDatasetHide () {
+      const vm = this
+      vm.datasetHideSelector = !vm.datasetHideSelector
+      vm.datasetSelected = null
+      if (vm.selectedHandler && typeof vm.selectedHandler === 'function') {
+        vm.selectedHandler(vm.datasetSelected)
+      }
+    },
+    getDatasets () {
+      const vm = this
+      fetch('/nmr/dataset')
+        .then(function (resp) {
+          resp.data.data.forEach(function (v) {
+            vm.datasetList.push(v)
+          })
+          vm.resetLoading()
+        })
+        .catch(function (err) {
+          vm.datasetsError = true
+          vm.renderDialog('Datasets Error', `fetching datasets: ${err}`)
+          vm.resetLoading()
+        })
+    },
+    transformDataset (entry) {
+      const vm = this
+      const transformed = {}
+      _.keys(entry).forEach((k) => {
+        if (k !== 'filesets' && k !== '__v' && k !== 'dttm_created' && k !== 'dttm_updated') {
+          if (Array.isArray(entry[k])) {
+            if (entry[k].length > 0) {
+              transformed[k] = entry[k].join('; ')
+            } else {
+              transformed[k] = 'N/A'
+            }
+          } else {
+            transformed[k] = entry[k]
+          }
+          if (transformed[k] === null) {
+            transformed[k] = 'N/A'
+          }
+        }
+      })
+      this.datasetDialogInfo = {
+        items: [
+          { header: transformed.doi }
+        ]
+      }
+      _.keys(transformed).forEach((k) => {
+        vm.datasetDialogInfo.items.push({
+          title: k,
+          subtitle: transformed[k]
+        })
+        vm.datasetDialogInfo.items.push({
+          divider: true,
+          inset: true
+        })
+      })
+      return transformed
+    },
+    datasetClick (entry) {
+      this.datasetSelected = entry
+      this.datasetTransformed = this.transformDataset(entry)
+      this.datasetHideSelector = true
+      this.filesetsList = this.datasetSelected.filesets
+      this.Selected = null
+      this.datasetsError = false
+      this.datasetsErrorMsg = ''
+      if (this.selectedHandler && typeof this.selectedHandler === 'function') {
+        this.selectedHandler(this.datasetSelected)
+      }
+    },
+    toggleDatasetCard () {
+      this.addDatasetDialogActive = !this.addDatasetDialogActive
+    },
+    addDatasetSave () {
+      this.setLoading()
+      const vm = this
+      fetch('/nmr/dataset/create', {
+        method: 'POST',
+        body: JSON.stringify({
+          dsInfo: {
+            datasetComment: vm.addDatasetComment,
+            isPublic: false,
+            ispublished: false
+          }
+        })
+      })
+        .then(function (resp) {
+          vm.addDatasetComment = ''
+          vm.datasetsError = false
+          vm.datasetsErrorMsg = ''
+          vm.addDatasetDialogActive = false
+          vm.getDatasets()
+        })
+        .catch(function (err) {
+          vm.datasetsError = true
+          this.renderDialog('Dataset Error', err.message)
+          vm.resetLoading()
+        })
+    },
+    // utils
+    setLoading () {
+      this.$store.commit('isLoading')
+    },
+    resetLoading () {
+      this.$store.commit('notLoading')
+    },
+    toggleDialogBox () {
+      this.dialogBoxActive = !this.dialogBoxActive
+    },
+    renderDialog (title, content, closeHandler) {
+      this.dialog = {
+        title,
+        content,
+        closeHandler: closeHandler || this.toggleDialogBox
+      }
+      this.toggleDialogBox()
+    },
+    datasetsFiltered () {
+      const userID = this.auth.getUserID()
+      const runAsUser = this.auth.getRunAsUser()
+      const vm = this
+      const myDatasets = this.datasetList.filter((i) => {
+        if (vm.showMineOnly) {
+          return i.userID && (i.userID === userID || i.userID === runAsUser)
+        } else {
+          return true
+        }
+      })
+      if (this.datasetSearch) {
+        return myDatasets.filter((i) => {
+          return (`${i.seq || ''}${i.doi || ''}${i.title || ''}${i.datasetComment || ''}`.includes(this.datasetSearch))
+        })
+      } else {
+        return myDatasets
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .datasets {
+  }
+
+  .dataset-header {
+    background-color: #03A9F4;
+    color: #ffffff;
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+</style>
diff --git a/app/src/pages/nanomine/xmlUploader/XmlUploader.vue b/app/src/pages/nanomine/xmlUploader/XmlUploader.vue
index 060b1ef1..3ff8074c 100644
--- a/app/src/pages/nanomine/xmlUploader/XmlUploader.vue
+++ b/app/src/pages/nanomine/xmlUploader/XmlUploader.vue
@@ -1,2 +1,10 @@
 <template src="./xmlUploader.html"></template>
 <script src="./xmlUploader.js"></script>
+<style scoped>
+  img {
+    width: 240px;
+  }
+  h4 {
+    text-transform: uppercase;
+  }
+</style>
diff --git a/app/src/pages/nanomine/xmlUploader/xmlUploader.html b/app/src/pages/nanomine/xmlUploader/xmlUploader.html
index 0a7338a2..e3111f29 100644
--- a/app/src/pages/nanomine/xmlUploader/xmlUploader.html
+++ b/app/src/pages/nanomine/xmlUploader/xmlUploader.html
@@ -1,5 +1,114 @@
-<div>
-    <div class="xmluploader section_pages">
-        <h1>File Upload</h1>
+<div class="main xmluploader wrapper md-layout md-alignment-top-center">
+  <div class="md-layout-item md-size-80 md-layout md-alignment-top-left md-gutter">
+    <dialog-box :active="dialogBoxActive">
+      <template v-slot:title>{{ dialog.title }}</template>
+      <template v-slot:content>{{ dialog.content }}</template>
+      <template v-slot:actions>
+        <md-button @click.native.prevent="dialog.closeHandler">Close</md-button>
+      </template>
+    </dialog-box>
+    <div>
+      <h1 class="header-nm">File Upload</h1>
     </div>
+    <div>
+      <h3>Description</h3>
+      <p>The simplest method to curate your sample into the database is by uploading an MS Excel spreadsheet. For each
+        sample, select or create a dataset for your sample group, upload a completed Excel template file using the
+        first uploading box and other supplementary image and raw data files using the second uploading box. The
+        master Excel template contains all possible fields for nanocomposite sample data and therefore many fields
+        will remain blank for your sample. Fill in only the parameters applicable to your sample. Customized templates
+        are available upon request, please contact <router-link to="/mm/contact">the NanoMine team</router-link> if
+        customization is required.
+      </p>
+    </div>
+    <div>
+      <h3>Steps</h3>
+      <p>
+        NOTE: Filesets for samples are grouped into datasets. The files for a sample (images, auxiliary spreadsheet
+        data, completed Excel template, etc) are uploaded as a set called a fileset. Uploading multiple samples
+        requires multiple fileset uploads.
+      </p>
+      <ol>
+        <li>
+          Create a new dataset for the control sample and its related files, then when uploading each additional
+          sample be sure to select the same dataset that was used for the control sample of the sample group.
+        </li>
+        <li>
+          Click <a
+            href="https://github.com/Duke-MatSci/nanomine-schema/blob/master/xls-input-forms/master_template.xlsx?raw=true"
+            download>here</a> to download the blank MS Excel template (137 kB). (Click <a
+            href="/nmstatic/xmlconv/example.zip" download>here</a> to see an example, 263 kB)
+        </li>
+        <li>
+          Fill in the parameters for all applicable cells in the Excel template file. Prepare the supplementary
+          images and raw data files.
+        </li>
+        <li>
+          Select the completed Excel template file in the first uploading box.
+        </li>
+        <li>
+          Select the supplementary images and other raw data files in the second uploading box (press "Ctrl" or
+          "Command" when selecting multiple files), then click Submit to upload your data.
+        </li>
+        <li>
+          Wait for the feedback message. Please read the message and follow the instructions if an error message is
+          displayed.
+        </li>
+      </ol>
+    </div>
+    <div>
+      <h3>Note</h3>
+      <ol>
+        <li>
+          We recommend you to upload your control sample first and remember its sample ID.
+        </li>
+        <li>
+          Upload one sample data at a time (one template Excel file along with supplementary files).
+        </li>
+        <li>
+          Rows or sections followed by a "#" sign in the template Excel file can be duplicated. Copy them into
+          additional rows if needed.
+        </li>
+        <li>
+          Acceptable image file format: JPG, PNG, TIF(F). Indicate the full image file name including the extensions
+          in the corresponding cells in the Excel template file.
+        </li>
+      </ol>
+    </div>
+    <div class="md-layout-item md-size-100">
+      <h3>Inputs</h3>
+      <div>
+        <dataset-create-or-select selectHeader="Choose or create a dataset" :selectedHandler="datasetSelectedHandler"
+          :datasetOptions="datasetOptions"></dataset-create-or-select>
+      </div>
+      <div>
+        <p>Select a completed Excel Template File
+          <md-button class="md-primary md-raised" @click='pickTemplate'>Browse</md-button>
+          <input type="file" style="display: none" accept=".xlsx, .xls" ref="myTemplate" @change="onTemplatePicked">
+        </p>
+        <p v-if="templateUploaded">
+          <md-icon>check_circle_outline</md-icon> {{ templateName }}
+        </p>
+      </div>
+      <div>
+        <p>
+          Select Other Files (including raw data files and image files)
+          <md-button class="md-primary md-raised" @click='pickFile'>Browse</md-button>
+          <input type="file" style="display: none" :multiple="true" ref="myUpload" @change="onFilePicked">
+        </p>
+        <md-list>
+          <md-list-item v-for="file in filesDisplay" :key="file.fileName">
+            <md-icon>check_circle_outline</md-icon>
+            <span class="md-list-item-text">{{ file.fileName }}</span>
+          </md-list-item>
+        </md-list>
+      </div>
+      <md-button v-on:click="submit()" :disabled="templateName.length < 1 || !datasetSelected"
+        class="md-primary md-raised">Submit</md-button>
+      <md-button @click="goBack()" class="md-primary md-raised">Go Back</md-button>
+    </div>
+    <div class="md-layout-item md-size-80 md-layout md-alignment-top-center reference-container">
+      <reference-container :references="references" :openOnLoad="false"></reference-container>
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/src/pages/nanomine/xmlUploader/xmlUploader.js b/app/src/pages/nanomine/xmlUploader/xmlUploader.js
index a6ec5a6d..6601a7e1 100644
--- a/app/src/pages/nanomine/xmlUploader/xmlUploader.js
+++ b/app/src/pages/nanomine/xmlUploader/xmlUploader.js
@@ -1,5 +1,160 @@
+import { JobMgr } from '@/modules/JobMgr.js'
+// import { Auth } from '@/modules/Auth.js'
+import ReferenceContainer from '@/components/nanomine/ReferenceContainer.vue'
+import Dialog from '@/components/Dialog.vue'
+import DatasetCreateOrSelect from '@/components/nanomine/DatasetCreateOrSelect.vue'
+import { mapMutations, mapGetters } from 'vuex'
+
 export default {
-  name: 'XmlUploader',
+  name: 'XMLUploader',
+  components: {
+    ReferenceContainer,
+    dialogBox: Dialog,
+    DatasetCreateOrSelect
+  },
+  data: () => ({
+    title: 'File Upload',
+    dialog: false,
+    templateName: '',
+    templateUrl: '',
+    template: null,
+    files: [],
+    filesDisplay: [],
+    templateUploaded: false,
+    jobId: '',
+    datasetOptions: { mineOnly: 'always' },
+    datasetSelected: null,
+    references: [
+      '10.1063/1.4943679',
+      '10.1063/1.5046839'
+    ],
+    auth: {
+      // AUTH MOCKED because auth is not yet implemented
+      isLoggedIn: () => false,
+      isTestUser: () => false
+    }
+  }),
+  computed: {
+    ...mapGetters({
+      dialogBoxActive: 'dialogBox'
+    })
+  },
+  beforeMount: function () {
+    // this.auth = new Auth()
+    if (!this.auth.isLoggedIn()) {
+      this.renderDialog('Login Required', 'Login is required before uploading files.')
+    }
+  },
+  methods: {
+    goBack () {
+      return window.history.go(-1)
+    },
+    datasetSelectedHandler (dataset) {
+      this.datasetSelected = dataset
+    },
+    setLoading: function () {
+      this.$store.commit('isLoading')
+    },
+    resetLoading: function () {
+      this.$store.commit('notLoading')
+    },
+    pickFile () {
+      this.$refs.myUpload.click()
+    },
+    pickTemplate () {
+      this.$refs.myTemplate.click()
+    },
+    resetTemplate: function () {
+      this.templateName = ''
+      this.templateUrl = ''
+      this.template = null
+      this.templateUploaded = false
+    },
+    resetFiles: function () {
+      this.files = []
+      this.filesDisplay = []
+    },
+    onTemplatePicked (e) {
+      this.resetTemplate()
+      const files = e.target.files
+      const file = {}
+      const f = files[0]
+      if (f !== undefined) {
+        this.templateName = f.name
+        file.fileName = this.templateName
+        const fr = new FileReader()
+        fr.readAsDataURL(f)
+        fr.addEventListener('load', () => {
+          this.templateUrl = fr.result
+          file.fileUrl = this.templateUrl
+          this.template = file
+          this.templateUploaded = true
+        })
+      } else {
+        this.resetTemplate()
+      }
+    },
+    onFilePicked (e) {
+      this.resetFiles()
+      const files = e.target.files
+      for (let i = 0; i < files.length; i++) {
+        const file = {}
+        const f = files[i]
+        if (f !== undefined) {
+          file.fileName = f.name
+          if (file.fileName.lastIndexOf('.') <= 0) {
+            return
+          }
+          const fr = new FileReader()
+          fr.readAsDataURL(f)
+          fr.addEventListener('load', () => {
+            file.fileUrl = fr.result
+            this.files.push(file)
+            this.filesDisplay.push(file)
+          })
+        }
+      }
+    },
+    successDlgClicked: function () {
+      this.$router.go(-1) // go back to previous page
+    },
+    submit: function () {
+      if (this.template != null) {
+        this.files.unshift(this.template)
+      } else {
+        this.renderDialog('Upload Error', 'Missing Template File')
+        return
+      }
+      this.setLoading()
+      const jm = new JobMgr()
+      const vm = this
+      jm.setJobType('xmlconv')
+      jm.setJobParameters({ datasetId: this.datasetSelected._id, templateName: this.templateName })
+      this.files.forEach(function (v) {
+        jm.addInputFile(v.fileName, v.fileUrl)
+      })
+      return jm.submitJob(function (jobId) {
+        vm.jobId = jobId
+        vm.resetLoading()
+        vm.renderDialog('Uploader Job Submitted Successfully', `Your uploader job is: ${jobId}
+        You should receive an email with a link to the job output.`, vm.successDlgClicked)
+      }, function (errCode, errMsg) {
+        vm.renderDialog('Upload Error', `Error submitting files for upload: errCode: ${errCode} msg: ${errMsg}`)
+        vm.resetLoading()
+      })
+    },
+    ...mapMutations({
+      toggleDialogBox: 'setDialogBox'
+    }),
+    renderDialog (title, content, closeHandler) {
+      this.dialog = {
+        title,
+        content,
+        closeHandler: closeHandler || this.toggleDialogBox
+      }
+      this.toggleDialogBox()
+    }
+  },
   created () {
     this.$store.commit('setAppHeaderInfo', { icon: 'cloud_upload', name: 'Data Uploader' })
   }
diff --git a/app/src/router/module/nanomine.js b/app/src/router/module/nanomine.js
index ca54b26a..0807f412 100644
--- a/app/src/router/module/nanomine.js
+++ b/app/src/router/module/nanomine.js
@@ -6,7 +6,7 @@ const nanomineRoutes = [
     meta: { requiresAuth: false }
   },
   {
-    path: '/xml-uploader',
+    path: 'xml-uploader',
     name: 'XmlUploader',
     component: () => import(/* webpackChunkName: "xmlupload" */ '@/pages/nanomine/xmlUploader/XmlUploader.vue'),
     meta: { requiresAuth: false }
diff --git a/app/src/store/modules/nanomine/referenceContainer/index.js b/app/src/store/modules/nanomine/referenceContainer/index.js
index d1d5769d..3733c2a3 100644
--- a/app/src/store/modules/nanomine/referenceContainer/index.js
+++ b/app/src/store/modules/nanomine/referenceContainer/index.js
@@ -100,6 +100,18 @@ export default {
           title: 'Smilesdrawer: parsing and drawing SMILES-encoded molecular structures using client-side javascript.',
           venue: 'Journal of chemical information and modeling 58.1 (2018): 1-7.',
           date: '2018'
+        },
+        '10.1063/1.4943679': {
+          authors: 'Zhao, H., Li, X., Zhang, Y., Schadler, L. S., Chen, W., and Brinson, L. C.',
+          title: 'Perspective: NanoMine: A material genome approach for polymer nanocomposites analysis and design',
+          venue: 'APL Materials, 4(5), 053204',
+          date: '2016'
+        },
+        '10.1063/1.5046839': {
+          authors: 'Zhao, H., Wang, Y., Lin, A., Hu, B., Yan, R., McCusker, J., and Brinson, L. C.',
+          title: 'NanoMine schema: An extensible data representation for polymer nanocomposites',
+          venue: 'APL Materials, 6(11), 111108',
+          date: '2018'
         }
       }
     }

From 43fe5a0a10ec4244577a88b3601654e40d3e0709 Mon Sep 17 00:00:00 2001
From: Rory Schadler <roryschadler@gmail.com>
Date: Fri, 18 Mar 2022 15:39:46 -0400
Subject: [PATCH 2/6] #24: Fix old references to xml-uploader

---
 app/src/pages/nanomine/Home/Home.vue       | 2 +-
 app/tests/unit/pages/nanomine/home.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/pages/nanomine/Home/Home.vue b/app/src/pages/nanomine/Home/Home.vue
index b7f23dfd..3fe4d732 100644
--- a/app/src/pages/nanomine/Home/Home.vue
+++ b/app/src/pages/nanomine/Home/Home.vue
@@ -29,7 +29,7 @@
     <div class="section_quicklinks">
       <div class="wrapper">
           <div class="grid grid_col-3 grid_gap-smaller">
-              <div class="quicklinks" @click.prevent="navigateFunction('/xml-uploader')">
+              <div class="quicklinks" @click.prevent="navigateFunction('/nm/xml-uploader')">
                   <div class="quicklinks_content">
                       <h2>Upload your data</h2>
                       <i class="material-icons">vertical_align_top</i>
diff --git a/app/tests/unit/pages/nanomine/home.spec.js b/app/tests/unit/pages/nanomine/home.spec.js
index 6869ce52..ee0a1201 100644
--- a/app/tests/unit/pages/nanomine/home.spec.js
+++ b/app/tests/unit/pages/nanomine/home.spec.js
@@ -38,6 +38,6 @@ describe('Nanomine Homepage', () => {
     const wrapper = await factory()
     const link = wrapper.find('.quicklinks')
     await link.trigger('click')
-    expect(wrapper.vm.$route.path).toEqual('/xml-uploader')
+    expect(wrapper.vm.$route.path).toEqual('/nm/xml-uploader')
   })
 })

From a24b837d9df9164f3caf9f47f84a318f1c2446fd Mon Sep 17 00:00:00 2001
From: Rory Schadler <48921090+roryschadler@users.noreply.github.com>
Date: Mon, 21 Mar 2022 11:48:19 -0400
Subject: [PATCH 3/6] #24: Remove mock dataset from testing

---
 app/src/components/nanomine/DatasetCreateOrSelect.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/app/src/components/nanomine/DatasetCreateOrSelect.vue b/app/src/components/nanomine/DatasetCreateOrSelect.vue
index b2d648ac..b66143f7 100644
--- a/app/src/components/nanomine/DatasetCreateOrSelect.vue
+++ b/app/src/components/nanomine/DatasetCreateOrSelect.vue
@@ -132,16 +132,9 @@ export default {
       datasetsErrorMsg: '',
       datasetTransformed: {},
       datasetHideSelector: true,
-      datasetList: [{ seq: 1, doi: '2', title: 'lol', datasetComment: 'hello', userID: '0' }],
+      datasetList: [],
       datasetSearch: '',
       displayDatasets: [],
-      // datasetHeaders: [
-      //   { text: 'ID', align: 'left', value: 'seq' },
-      //   { text: 'DOI', align: 'left', value: 'doi' },
-      //   { text: 'Title', align: 'left', value: 'title' },
-      //   { text: 'Comment', align: 'left', value: 'datasetComment' }
-      // ],
-
       datasetSelected: null,
       datasetInfoDialogActive: false,
       datasetDialogInfo: {},

From 0fed0010fbb0338ddbdd051ff389879298ea099d Mon Sep 17 00:00:00 2001
From: Rory Schadler <48921090+roryschadler@users.noreply.github.com>
Date: Mon, 21 Mar 2022 14:15:48 -0400
Subject: [PATCH 4/6] #24: Write unit test for dataset viewer

---
 .../nanomine/DatasetCreateOrSelect.vue        | 30 ++++------
 .../nanomine/datasetcreateorselect.spec.js    | 58 +++++++++++++++++++
 2 files changed, 69 insertions(+), 19 deletions(-)
 create mode 100644 app/tests/unit/components/nanomine/datasetcreateorselect.spec.js

diff --git a/app/src/components/nanomine/DatasetCreateOrSelect.vue b/app/src/components/nanomine/DatasetCreateOrSelect.vue
index b66143f7..840ef129 100644
--- a/app/src/components/nanomine/DatasetCreateOrSelect.vue
+++ b/app/src/components/nanomine/DatasetCreateOrSelect.vue
@@ -29,7 +29,7 @@
       </md-card>
 
       <md-table v-model="displayDatasets" v-show="!datasetHideSelector" md-sort="seq" md-sort-order="asc" md-card
-        md-fixed-header md-model-id="seq">
+        md-fixed-header>
         <md-table-toolbar>
           <div class="md-toolbar-section-start">
             <h1 v-if="mineOnlyAlways" class="md-title">Datasets you've created</h1>
@@ -46,7 +46,7 @@
           :md-description="`Your search for '${datasetSearch}' returned no results.`"></md-table-empty-state>
 
         <template #md-table-row="{ item }">
-          <md-table-row @click="datasetClick(item)">
+          <md-table-row @click="datasetClick(item)" :key="item.seq">
             <md-table-cell md-label="ID" md-sort-by="seq" md-numeric>{{ item.seq }}</md-table-cell>
             <md-table-cell md-label="DOI" md-sort-by="doi">{{ item.doi }}</md-table-cell>
             <md-table-cell md-label="Title" md-sort-by="title">{{ item.title }}</md-table-cell>
@@ -157,7 +157,10 @@ export default {
       }
     },
     datasetSearch: function () {
-      this.displayDatasets = this.datasetsFiltered()
+      this.datasetsFiltered()
+    },
+    datasetList: function () {
+      this.datasetsFiltered()
     }
   },
   computed: {
@@ -188,7 +191,7 @@ export default {
     // vm.auth = new Auth()
     vm.getDatasets()
     vm.overrideOptions(vm.datasetOptions)
-    this.displayDatasets = this.datasetsFiltered()
+    this.datasetsFiltered()
   },
   methods: {
     overrideOptions (datasetOptions) {
@@ -220,12 +223,10 @@ export default {
           resp.data.data.forEach(function (v) {
             vm.datasetList.push(v)
           })
-          vm.resetLoading()
         })
         .catch(function (err) {
           vm.datasetsError = true
           vm.renderDialog('Datasets Error', `fetching datasets: ${err}`)
-          vm.resetLoading()
         })
     },
     transformDataset (entry) {
@@ -280,7 +281,6 @@ export default {
       this.addDatasetDialogActive = !this.addDatasetDialogActive
     },
     addDatasetSave () {
-      this.setLoading()
       const vm = this
       fetch('/nmr/dataset/create', {
         method: 'POST',
@@ -301,17 +301,9 @@ export default {
         })
         .catch(function (err) {
           vm.datasetsError = true
-          this.renderDialog('Dataset Error', err.message)
-          vm.resetLoading()
+          vm.renderDialog('Dataset Error', err.message)
         })
     },
-    // utils
-    setLoading () {
-      this.$store.commit('isLoading')
-    },
-    resetLoading () {
-      this.$store.commit('notLoading')
-    },
     toggleDialogBox () {
       this.dialogBoxActive = !this.dialogBoxActive
     },
@@ -327,7 +319,7 @@ export default {
       const userID = this.auth.getUserID()
       const runAsUser = this.auth.getRunAsUser()
       const vm = this
-      const myDatasets = this.datasetList.filter((i) => {
+      const filteredDatasets = this.datasetList.filter((i) => {
         if (vm.showMineOnly) {
           return i.userID && (i.userID === userID || i.userID === runAsUser)
         } else {
@@ -335,11 +327,11 @@ export default {
         }
       })
       if (this.datasetSearch) {
-        return myDatasets.filter((i) => {
+        this.displayDatasets = filteredDatasets.filter((i) => {
           return (`${i.seq || ''}${i.doi || ''}${i.title || ''}${i.datasetComment || ''}`.includes(this.datasetSearch))
         })
       } else {
-        return myDatasets
+        this.displayDatasets = filteredDatasets
       }
     }
   }
diff --git a/app/tests/unit/components/nanomine/datasetcreateorselect.spec.js b/app/tests/unit/components/nanomine/datasetcreateorselect.spec.js
new file mode 100644
index 00000000..69b04999
--- /dev/null
+++ b/app/tests/unit/components/nanomine/datasetcreateorselect.spec.js
@@ -0,0 +1,58 @@
+import createWrapper from '../../../jest/script/wrapper'
+import DatasetCreateOrSelect from '@/components/nanomine/DatasetCreateOrSelect.vue'
+
+var wrapper = null
+
+global.fetch = jest.fn()
+global.fetch.mockReturnValueOnce(
+  Promise.resolve({
+    data: {
+      data: [{ seq: 1, doi: 'testDOI1', title: 'testTitle1', datasetComment: 'testComment1', userID: '0' }]
+    }
+  }))
+  .mockReturnValueOnce(
+    Promise.resolve()
+  )
+  .mockReturnValueOnce(
+    Promise.resolve({
+      data: {
+        data: [{ seq: 1, doi: 'testDOI1', title: 'testTitle1', datasetComment: 'testComment1', userID: '0' },
+          { seq: 2, doi: 'testDOI2', title: 'testTitle2', datasetComment: 'testComment2', userID: '0' }]
+      }
+    })
+  )
+
+describe('DatasetCreateOrSelect.vue', () => {
+  beforeAll(() => {
+    wrapper = createWrapper(DatasetCreateOrSelect, {})
+  })
+
+  it('mounts properly', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('displays the provided dataset', () => {
+    expect(wrapper.text()).toContain('testDOI1')
+    expect(wrapper.text()).toContain('testTitle1')
+    expect(wrapper.text()).toContain('testComment1')
+  })
+
+  it('requests and displays a new dataset', async () => {
+    wrapper.vm.addDatasetSave()
+    await wrapper.vm.$nextTick() // one tick to get response, second to update list
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('testDOI1')
+    expect(wrapper.text()).toContain('testTitle1')
+    expect(wrapper.text()).toContain('testComment1')
+    expect(wrapper.text()).toContain('testDOI2')
+    expect(wrapper.text()).toContain('testTitle2')
+    expect(wrapper.text()).toContain('testComment2')
+  })
+
+  it('returns search results', async () => {
+    wrapper.setData({ datasetSearch: 'testDOI2' })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('testDOI2')
+    expect(wrapper.text()).not.toContain('testDOI1')
+  })
+})

From aafbc4947cf3d8d64495a8508c6b3afaaeab0371 Mon Sep 17 00:00:00 2001
From: Rory Schadler <48921090+roryschadler@users.noreply.github.com>
Date: Mon, 21 Mar 2022 14:18:49 -0400
Subject: [PATCH 5/6] #24: Rename DatasetCreateOrSelect to DatasetViewer

---
 .../nanomine/{DatasetCreateOrSelect.vue => DatasetViewer.vue} | 0
 app/src/pages/nanomine/xmlUploader/xmlUploader.html           | 4 ++--
 app/src/pages/nanomine/xmlUploader/xmlUploader.js             | 4 ++--
 .../{datasetcreateorselect.spec.js => datasetviewer.spec.js}  | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename app/src/components/nanomine/{DatasetCreateOrSelect.vue => DatasetViewer.vue} (100%)
 rename app/tests/unit/components/nanomine/{datasetcreateorselect.spec.js => datasetviewer.spec.js} (92%)

diff --git a/app/src/components/nanomine/DatasetCreateOrSelect.vue b/app/src/components/nanomine/DatasetViewer.vue
similarity index 100%
rename from app/src/components/nanomine/DatasetCreateOrSelect.vue
rename to app/src/components/nanomine/DatasetViewer.vue
diff --git a/app/src/pages/nanomine/xmlUploader/xmlUploader.html b/app/src/pages/nanomine/xmlUploader/xmlUploader.html
index e3111f29..dc67839e 100644
--- a/app/src/pages/nanomine/xmlUploader/xmlUploader.html
+++ b/app/src/pages/nanomine/xmlUploader/xmlUploader.html
@@ -78,8 +78,8 @@ <h3>Note</h3>
     <div class="md-layout-item md-size-100">
       <h3>Inputs</h3>
       <div>
-        <dataset-create-or-select selectHeader="Choose or create a dataset" :selectedHandler="datasetSelectedHandler"
-          :datasetOptions="datasetOptions"></dataset-create-or-select>
+        <dataset-viewer selectHeader="Choose or create a dataset" :selectedHandler="datasetSelectedHandler"
+          :datasetOptions="datasetOptions"></dataset-viewer>
       </div>
       <div>
         <p>Select a completed Excel Template File
diff --git a/app/src/pages/nanomine/xmlUploader/xmlUploader.js b/app/src/pages/nanomine/xmlUploader/xmlUploader.js
index 6601a7e1..68ec10b3 100644
--- a/app/src/pages/nanomine/xmlUploader/xmlUploader.js
+++ b/app/src/pages/nanomine/xmlUploader/xmlUploader.js
@@ -2,7 +2,7 @@ import { JobMgr } from '@/modules/JobMgr.js'
 // import { Auth } from '@/modules/Auth.js'
 import ReferenceContainer from '@/components/nanomine/ReferenceContainer.vue'
 import Dialog from '@/components/Dialog.vue'
-import DatasetCreateOrSelect from '@/components/nanomine/DatasetCreateOrSelect.vue'
+import DatasetViewer from '@/components/nanomine/DatasetViewer.vue'
 import { mapMutations, mapGetters } from 'vuex'
 
 export default {
@@ -10,7 +10,7 @@ export default {
   components: {
     ReferenceContainer,
     dialogBox: Dialog,
-    DatasetCreateOrSelect
+    DatasetViewer
   },
   data: () => ({
     title: 'File Upload',
diff --git a/app/tests/unit/components/nanomine/datasetcreateorselect.spec.js b/app/tests/unit/components/nanomine/datasetviewer.spec.js
similarity index 92%
rename from app/tests/unit/components/nanomine/datasetcreateorselect.spec.js
rename to app/tests/unit/components/nanomine/datasetviewer.spec.js
index 69b04999..6a2528e8 100644
--- a/app/tests/unit/components/nanomine/datasetcreateorselect.spec.js
+++ b/app/tests/unit/components/nanomine/datasetviewer.spec.js
@@ -1,5 +1,5 @@
 import createWrapper from '../../../jest/script/wrapper'
-import DatasetCreateOrSelect from '@/components/nanomine/DatasetCreateOrSelect.vue'
+import DatasetViewer from '@/components/nanomine/DatasetViewer.vue'
 
 var wrapper = null
 
@@ -24,7 +24,7 @@ global.fetch.mockReturnValueOnce(
 
 describe('DatasetCreateOrSelect.vue', () => {
   beforeAll(() => {
-    wrapper = createWrapper(DatasetCreateOrSelect, {})
+    wrapper = createWrapper(DatasetViewer, {})
   })
 
   it('mounts properly', () => {

From f5edbc4c5be106f09804137de5fb8c44eef5e57f Mon Sep 17 00:00:00 2001
From: Rory Schadler <48921090+roryschadler@users.noreply.github.com>
Date: Mon, 21 Mar 2022 14:32:37 -0400
Subject: [PATCH 6/6] #24: Updated dialog rendering, removed autologin

---
 app/src/components/nanomine/DatasetViewer.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/src/components/nanomine/DatasetViewer.vue b/app/src/components/nanomine/DatasetViewer.vue
index 840ef129..3e303884 100644
--- a/app/src/components/nanomine/DatasetViewer.vue
+++ b/app/src/components/nanomine/DatasetViewer.vue
@@ -59,7 +59,7 @@
       <template v-slot:title>{{ dialog.title }}</template>
       <template v-slot:content>{{ dialog.content }}</template>
       <template v-slot:actions>
-        <md-button @click.native.prevent="dialog.closeHandler">Close</md-button>
+        <md-button @click.native.prevent="toggleDialogBox">Close</md-button>
       </template>
     </dialog-box>
     <!--
@@ -142,7 +142,7 @@ export default {
       // AUTH MOCKED because auth is not yet implemented
         getUserID: () => '0',
         getRunAsUser: () => false,
-        isLoggedIn: () => true
+        isLoggedIn: () => false
       },
       dialogBoxActive: false,
       dialog: {}
@@ -225,8 +225,10 @@ export default {
           })
         })
         .catch(function (err) {
-          vm.datasetsError = true
-          vm.renderDialog('Datasets Error', `fetching datasets: ${err}`)
+          vm.datasetsError = err
+          if (vm.auth.isLoggedIn()) {
+            vm.renderDialog('Datasets Error', 'Please try again later.')
+          }
         })
     },
     transformDataset (entry) {
@@ -300,8 +302,8 @@ export default {
           vm.getDatasets()
         })
         .catch(function (err) {
-          vm.datasetsError = true
-          vm.renderDialog('Dataset Error', err.message)
+          vm.datasetsError = err
+          vm.renderDialog('Dataset Error', 'Please make sure you are logged in, or try again later.')
         })
     },
     toggleDialogBox () {
@@ -310,8 +312,7 @@ export default {
     renderDialog (title, content, closeHandler) {
       this.dialog = {
         title,
-        content,
-        closeHandler: closeHandler || this.toggleDialogBox
+        content
       }
       this.toggleDialogBox()
     },