Merge pull request #334 from Duke-MatSci/#333_XLS_VALIDATION_LIST

feat(core): #333 Valid Curation List Item Page
Duke-MatSci · Mar 12, 2023 · 1037d43 · 1037d43
2 parents 29ef39e + 41f04ec
commit 1037d43
Show file tree

Hide file tree

Showing 42 changed files with 1,268 additions and 184 deletions.
diff --git a/README.md b/README.md
@@ -53,9 +53,11 @@ npm install
 | :open_file_folder: app | Frontend Application | [Link](https://github.com/Duke-MatSci/materialsmine/tree/main/app) |
 | :open_file_folder: nginx | A proxy server | [Link](https://github.com/Duke-MatSci/materialsmine/tree/main/router) |
 | :open_file_folder: restfulservice | Backend Server Application | [Link](https://github.com/Duke-MatSci/materialsmine/tree/main/resfulservice) |
+| :open_file_folder: services | Managed Services | WIP |
 | :open_file_folder: whyis | Whyis Application | [Link](https://github.com/Duke-MatSci/materialsmine/tree/main/whyis) |
 
 ## :high_brightness: Access services via:
-- Frontend: http://localhost:80
-- Resful API: http://localhost:80/api
-- Whyis: http://localhost:80/whyis
+- Frontend: http://localhost
+- Resful API: http://localhost/api
+- Managed Services: http://localhost:5050
+- Whyis: http://localhost:8000
diff --git a/app/src/App.vue b/app/src/App.vue
@@ -10,6 +10,9 @@ import Snackbar from '@/components/Snackbar.vue'
 export default {
   components: {
     Snackbar
+  },
+  async created () {
+    await this.$store.dispatch('auth/tryLogin')
   }
 }
 </script>

diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
@@ -530,3 +530,9 @@
 
     }
 }
+
+.spreadsheet_list_form {
+    .md-chip.md-theme-default .md-icon.md-icon-image svg{
+        fill: $primary;
+    }
+}
diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss
@@ -67,7 +67,7 @@
 
     &--padding {
         &-zero {
-            padding: 0;
+            padding: 0 !important;
         }
         &-zero-mobile {
             @include respond(phone) {
@@ -171,20 +171,33 @@
 
     &--color{
         &-grey {
-            color: $primary-grey;
+            color: $primary-grey !important;
         }
         &-grey-sec {
-            color: $secondary-grey;
+            color: $secondary-grey !important;
         }
         &-primary {
-            color: $primary;
+            color: $primary !important;
         }
         &-secondary {
-            color: $secondary;
+            color: $secondary !important;
         }
         &-black {
             color: $primary-black;
         }
+        &-tertiary {
+            color: $tertiary !important;
+            & > *,
+            & .md-button-content {
+                color: $tertiary !important;
+            }
+        }
+        &-success {
+            color: green !important;
+        }
+        &-error {
+            color: $error !important;
+        }
     }
     &--font-emph {
         &-xl {
@@ -201,7 +214,7 @@
         }
         &-smm {
             font-size: 1.3rem;
-            font-size: 500;
+            font-weight: 500;
         }
 
     }
@@ -402,7 +415,10 @@
         color: $primary !important;
 
         &_white {
-            color: $primary-white !important
+            color: $primary-white !important;
+            & .md-button-content {
+                color: $primary-white !important;
+            }
         }
     }
     &_gridbg {

diff --git a/app/src/components/Drawer.vue b/app/src/components/Drawer.vue
@@ -47,21 +47,27 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item md-expand>
+      <md-list-item md-expand v-if="isAuth">
         <md-icon class="utility-navfonticon">upload</md-icon>
         <span class="md-list-item-text utility-navfont">Curate</span>
         <md-list slot="md-expand">
-          <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
+          <!-- <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
             Upload a Spreadsheet
-          </md-list-item>
+          </md-list-item> -->
+          <router-link :to="'/explorer/curate/spreadsheet'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Upload a Spreadsheet</md-list-item>
+          </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate"  class="md-inset">Fill a Form</md-list-item>
           </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate"  class="md-inset">Submit SDD</md-list-item>
           </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Create new chart</md-list-item>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Create New Chart</md-list-item>
+          </router-link>
+          <router-link :to="'/explorer/curate/validlist'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Add Xlsx List Entry</md-list-item>
           </router-link>
         </md-list>
       </md-list-item>
@@ -81,15 +87,18 @@
           <router-link :to="'/nm/tools/plot-curation'" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate"  class="md-inset">Easy CSV Plotter</md-list-item>
           </router-link>
+          <router-link :to="'/explorer/sparql'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Sparql Query Tool</md-list-item>
+          </router-link>
         </md-list>
       </md-list-item>
       <md-list-item v-if="isAuth" @click="$store.dispatch('auth/logout')">
         <md-icon class="utility-navfonticon">logout</md-icon>
         <span class="md-list-item-text utility-navfont">Log out</span>
       </md-list-item>
-      <md-list-item v-if="!isAuth">
+      <md-list-item v-if="!isAuth" @click="login">
         <md-icon class="utility-navfonticon">login</md-icon>
-        <span class="md-list-item-text utility-navfont"><a href="/secure">Login</a></span>
+        <span class="md-list-item-text utility-navfont">Login</span>
       </md-list-item>
     </md-list>
   </div>
@@ -103,6 +112,11 @@ export default {
       isAuth: 'auth/isAuthenticated',
       name: 'auth/displayName'
     })
+  },
+  methods: {
+    login () {
+      window.location.href = '/secure'
+    }
   }
 }
 </script>
diff --git a/app/src/components/accordion.vue b/app/src/components/accordion.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="accordion">
   <div @click="toggleOpen">
-    <md-toolbar :class="dense ? 'md-dense' :'md-toolbar_adjust'">
+    <md-toolbar :class="dense ? 'md-dense' :'md-toolbar_adjust u--padding-zero'">
       <div class="accordion-toolbar-row viz-sample__header">
         <h4 v-if="dense" class="md-subheader">{{title}}</h4>
         <h3 v-else class="md-title">{{title}}</h3>
@@ -55,7 +55,6 @@ export default Vue.component('accordion', {
 
 <style scoped>
 .accordion-content {
-  max-height: 40vh;
   overflow: auto
 }
 .accordion-toolbar-row {

diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
@@ -12,12 +12,12 @@
 
         <div class="md-toolbar-section-end">
           <md-badge v-if="isAuth && showBadge" id="header-badge" class="md-primary" md-content="12">
-            <md-button class="md-icon-button">
+            <md-button class="md-icon-button u_color_white u--font-emph-m">
               Hi {{ displayName }}
             </md-button>
           </md-badge>
-          <md-button v-if="isAuth"> Hi {{ displayName }}</md-button>
-          <a v-if="!isAuth" class="md-icon-button large" href="/secure">
+          <md-button v-if="isAuth" class="u_color_white u--font-emph-m"> Hi {{ displayName }}</md-button>
+          <a v-if="!isAuth" class="md-icon-button large u_color_white u--font-emph-m" href="/secure">
             Login
           </a>
         </div>
@@ -27,8 +27,8 @@
         <md-tabs class="md-primary" id="reset_tab_bg" md-sync-route>
           <!-- Add _ to _menutabs as this is just a class selector for testing purposes only -->
           <md-tab class="_menutabs" to="/explorer" id="tab-home" md-label="Search" exact> </md-tab>
-          <md-tab class="_menutabs" to="/explorer/visualization" id="tab-visualization" md-label="Visualization" exact> </md-tab>
-          <md-tab class="_menutabs" to="/explorer/curate" id="tab-curate" md-label="Curate" exact> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/visualization" id="tab-visualization" md-label="Visualization"> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/curate" id="tab-curate" md-label="Curate"> </md-tab>
           <md-tab class="_menutabs" to="/explorer/parameterized_query" id="tab-query" md-label="Parameterized Query" exact> </md-tab>
           <md-tab class="_menutabs" to="/explorer/sparql" id="tab-sparql" md-label="SPARQL Query" exact> </md-tab>
         </md-tabs>

diff --git a/app/src/components/explorer/SearchResultsTable.vue b/app/src/components/explorer/SearchResultsTable.vue
@@ -38,9 +38,9 @@
           <md-card-header style="padding:0px">
             <md-avatar v-if="result.thumbnail">
               <img
-                :src="getThumbnailUrl(result)"
+                :src="baseUrl + '/api/files/' + result.thumbnail.split('=')[1]"
                 :alt="result.label"
-                v-if="result.thumbnail"
+                v-if="result.thumbnail "
               >
             </md-avatar>
 
@@ -85,7 +85,7 @@
           <md-card-media-cover md-solid>
             <md-card-media md-ratio="4:3"  v-if="result.thumbnail">
               <img
-                :src="getThumbnailUrl(result)"
+                :src="baseUrl + '/api/files/' + result.thumbnail.split('=')[1]"
                 :alt="result.label"
                 v-if="result.thumbnail"
               >
@@ -221,8 +221,6 @@
 <script>
 import spinner from '@/components/Spinner'
 import reducer from '@/mixins/reduce'
-// import pagination from '@/components/explorer/Pagination'
-import { getViewUrl } from '@/modules/whyis-view'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -237,7 +235,6 @@ export default {
     }
   },
   components: {
-    // pagination,
     spinner
   },
   computed: {
@@ -269,9 +266,6 @@ export default {
           return this.$router.push(`/explorer/images/${address}/${encodeURIComponent(prefix)}`)
         }
       }
-    },
-    getThumbnailUrl (item) {
-      return getViewUrl({ uri: item.thumbnail })
     }
   }
 }

diff --git a/app/src/components/explorer/yasgui.vue b/app/src/components/explorer/yasgui.vue
@@ -28,10 +28,20 @@ export default {
 <style css src='@triply/yasgui/build/yasgui.min.css'></style>
 
 <style css>
-.yasgui .endpointText {
+  .yasgui .endpointText {
     display: none !important;
-}
-/* .yasgui .autocompleteWrapper {
+  }
+  .yasgui .autocompleteWrapper,
+  .yasgui .controlbar {
+    visibility: hidden !important;
     display: none !important;
-  } */
+  }
+  .yasqe .CodeMirror {
+    border: 1px solid #afe3f1 !important;
+  }
+  .CodeMirror-gutters {
+    border-right: 1px solid #afe3f1 !important;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+  }
 </style>
diff --git a/app/src/components/nanomine/PageHeader.vue b/app/src/components/nanomine/PageHeader.vue
@@ -72,7 +72,7 @@
                             <div class="nav_menu--container">
                                 <a class="u--default-size nav_menu--handler" href="#">Upload</a>
                                 <div class="nav_menu--siblings">
-                                    <a href="https://materialsmine.org/nm#/XMLCONV" class="nav_menu--siblings-lists"><a>XML-Based Upload</a></a>
+                                    <a href="/explorer/curate" class="nav_menu--siblings-lists"><a>XML-Based Upload</a></a>
                                     <router-link to="/explorer/dataset-entry-form" class="nav_menu--siblings-lists"><a>Direct Dataset Entry Form</a></router-link>
                                 </div>
                             </div>
@@ -81,6 +81,7 @@
                             <div class="nav_menu--container">
                                 <a class="u--default-size nav_menu--handler" href="#">Tools</a>
                                 <div class="nav_menu--siblings">
+                                    <router-link to="/explorer/sparql" class="nav_menu--siblings-lists"><a>Sparql Query</a></router-link>
                                     <router-link to="/nm/tools/module_homepage" class="nav_menu--siblings-lists"><a>Module Tools</a></router-link>
                                     <router-link to="/nm/tools/simtools" class="nav_menu--siblings-lists"><a>Simulation Tools</a></router-link>
                                     <router-link to="/nm/tools/chemprops" class="nav_menu--siblings-lists"><a>ChemProps</a></router-link>

diff --git a/app/src/modules/gql/material-gql.js b/app/src/modules/gql/material-gql.js
@@ -0,0 +1,38 @@
+import gql from 'graphql-tag'
+
+export const CREATEMATERIAL_QUERY = gql`
+mutation CreateXlsxCurationList($input: materialsInput) {
+  createXlsxCurationList(input: $input) {
+    columns {
+      field
+      values
+      user
+    }
+  }
+}`
+
+export const SEARCH_SPREADSHEETLIST_QUERY = gql`
+query GetXlsxCurationList($input: materialQueryInput) {
+  getXlsxCurationList(input: $input) {
+    totalItems
+    pageSize
+    pageNumber
+    totalPages
+    hasPreviousPage
+    hasNextPage
+    columns {
+      field
+      values
+      user
+    }
+  }
+}`
+
+export const UPDATE_SPREADSHEETLIST = gql`
+mutation UpdateXlsxCurationList($input: columnsInput) {
+  updateXlsxCurationList(input: $input) {
+    field
+    values
+    user
+  }
+}`
diff --git a/app/src/modules/sparql.js b/app/src/modules/sparql.js
@@ -1,7 +1,7 @@
 import { literal, namedNode } from '@rdfjs/data-model'
 import { fromRdf } from 'rdf-literal'
 
-const SPARQL_ENDPOINT = 'https://materialsmine.org/wi/sparql'
+const SPARQL_ENDPOINT = '/api/knowledge/sparql'
 
 async function querySparql (query, { endpoint = SPARQL_ENDPOINT, headers = {} } = {}) {
   const urlEncodedQuery = `${endpoint}?query=${encodeURIComponent(