feat(#358): Chart creation service - WIP

Duke-MatSci · Mar 21, 2023 · 8b7d299 · 8b7d299
1 parent 533027e
commit 8b7d299
Show file tree

Hide file tree

Showing 21 changed files with 624 additions and 115 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -49,7 +49,6 @@
     "vue-mathjax": "^0.0.11",
     "vue-router": "^3.2.0",
     "vue-socket.io": "^3.0.10",
-    "vue-splitpane": "^1.0.6",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

diff --git a/app/src/assets/css/modules/_button.scss b/app/src/assets/css/modules/_button.scss
@@ -160,6 +160,6 @@ a.btn-text,
         text-decoration: none !important;
     }
     &.active{
-        border-bottom: 0.2rem solid $secondary-grey;
+        border-bottom: 0.2rem solid $primary;
     }
 }
diff --git a/app/src/assets/css/modules/_misc.scss b/app/src/assets/css/modules/_misc.scss
@@ -593,4 +593,8 @@
             text-align: left;
         }
     }
+}
+
+.is-dragging {
+    cursor: col-resize;
 }
diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
@@ -500,38 +500,88 @@
 }
 
 .image-detail-page {
-    padding: 2rem 12rem;
-    overflow: hidden;
+  padding: 2rem 12rem;
+  overflow: hidden;
 
-    @include respond(tab-land) {
-        padding: 0;
+  @include respond(tab-land) {
+    padding: 0;
+  }
+  @include respond(tab-port) {
+    padding: 0 !important;
+  }
+
+  &-details {
+    &-flex-item-col {
+
+      @include respond(phone) {
+        flex-direction: column;
+      }
     }
-    @include respond(tab-port) {
-        padding: 0 !important;
+  }
+  &-tab {
+    border-bottom: 0.1px solid $secondary-grey;
+  }
+
+  &__relatedImg {
+    flex-direction: row;
+    @include respond(phone){
+      flex-direction: row !important;
     }
-    &-details {
-        &-flex-item-col {
 
-            @include respond(phone) {
-                flex-direction: column;
-            }
-        }
+  }
+}
+
+.spreadsheet_list_form {
+  .md-chip.md-theme-default .md-icon.md-icon-image svg{
+    fill: $primary;
+  }
+}
+
+.chart_editor {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 75vh;
+    min-height: 450px;
+    box-sizing: content-box;
+    padding: 36px 16px 12px;
+
+    &__left-view, &__right-view{
+      padding: 16px 12px;
+      max-height: 100%;
     }
-    &-tab {
-        border-bottom: 0.1px solid $secondary-grey;
+
+    &__right-view {
+      padding-top: unset;
+      padding-left: unset;
     }
 
-    &__relatedImg {
-        flex-direction: row;
-        @include respond(phone){
-            flex-direction: row !important;
-        }
+    &-divider {
+      width: 1px;
+      opacity: 0.2;
+    }
 
+    &-tabs {
+      &:active {
+        border-color: $primary;
+      }
     }
 }
 
-.spreadsheet_list_form {
-    .md-chip.md-theme-default .md-icon.md-icon-image svg{
-        fill: $primary;
+.chart_editor__left-content, .chart_editor__right-content {
+    height: calc(100% - 40px);
+
+    >.jsoneditor-container.min-box{
+        height: 94%;
     }
-}
+
+    > #YASQE {
+        height: 95%;
+        > .yasqe {
+          height: 100%;
+          > .CodeMirror{
+            height: 100% !important;
+          }
+        }
+    }
+}
diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss
@@ -36,7 +36,7 @@
         background-color: $primary !important;
         color: $primary-white !important;
 
-        &--grey {
+        &-grey {
             background-color: $secondary-grey
         }
     }
@@ -171,6 +171,12 @@
         &-width {
             width: 99% !important;
         }
+        &-flex{
+            display: flex;
+            &-column{
+                flex-direction: column;
+            }
+        }
         &-flex-justify-se {
             justify-content: space-evenly;
         }

diff --git a/app/src/components/explorer/VegaLiteWrapper.vue b/app/src/components/explorer/VegaLiteWrapper.vue
@@ -52,7 +52,7 @@ export default {
   },
   computed: {
     hasDataObject () {
-      return !!this.spec.data
+      return !!this.spec?.data
     }
   },
   props: {

diff --git a/app/src/components/explorer/yasgui.vue b/app/src/components/explorer/yasgui.vue
@@ -13,11 +13,16 @@ export default {
       default: () => 'YASGUI'
     }
   },
-  mounted () {
+  async mounted () {
+    const token = await this.$store.getters['auth/token']
+    console.log('token:', token)
     this.yasgui = new YASGUI(this.$el, {
 
       requestConfig: {
-        endpoint: '/api/knowledge/sparql'
+        endpoint: '/api/knowledge/sparql',
+        headers: () => ({
+          'authorization': 'Bearer ' + token,
+        })
       },
       copyEndpointOnNewTab: false
     })

diff --git a/app/src/modules/sparql.js b/app/src/modules/sparql.js
@@ -1,34 +1,47 @@
 import { literal, namedNode } from '@rdfjs/data-model'
 import { fromRdf } from 'rdf-literal'
+import store from '@/store';
 
 const SPARQL_ENDPOINT = '/api/knowledge/sparql'
-
-async function querySparql (query, { endpoint = SPARQL_ENDPOINT, headers = {} } = {}) {
-  const urlEncodedQuery = `${endpoint}?query=${encodeURIComponent(
+const formData = new FormData()
+// Todo (ticket xx): Remove endpoint from function arg and update refactor code everywhere
+async function querySparql (query, {
+  endpoint = SPARQL_ENDPOINT,
+  headers = {  },
+  body = null,
+  method = 'GET',
+  whyisPath = undefined
+} = {}) {
+  let urlEncodedQuery = `${endpoint}?query=${encodeURIComponent(
     query
   )}&output=json`
+
+  // Get user Token
+  const token = await store.getters['auth/token']
   const requestOptions = {
+    method,
     headers: {
+      Authorization: 'Bearer ' + token,
       accept: 'application/sparql-results+json',
       ...headers
-    }
+    },
+  }
+
+  if (whyisPath) {
+    urlEncodedQuery = `${urlEncodedQuery}&whyisPath=${encodeURIComponent(whyisPath)}`
+  }
+
+  if (body) {
+    formData.append('payload', JSON.stringify(body))
+    requestOptions.body = formData
   }
 
-  try { // eslint-disable-line
+  try {
     const res = await fetch(urlEncodedQuery, requestOptions)
-    /**
-     * Test will fail without this if block. It is irrelevant.
-     * This will ensure we don't hit the error.
-     */
     if (!res) {
       return []
     }
 
-    if (!res || !res.ok) {
-      const error = new Error(res.statusText || 'An error occured, cannot access whyis servers')
-      throw (error)
-    }
-
     const results = await res.json()
     return results
   } catch (err) {
@@ -38,28 +51,19 @@ async function querySparql (query, { endpoint = SPARQL_ENDPOINT, headers = {} }
 
 function parseSparql (response) {
   const queryResults = []
-  /**
-   * This if block is irrelevant, it's job is to ensure
-   * that test cases relying on this output doesn't fail
-   */
-  if (!response.results || !response.results.bindings || !response.results.bindings.length) {
-    return
-  }
 
-  try { // eslint-disable-line
-    for (const row of response.results.bindings) {
-      const rowData = {}
-      queryResults.push(rowData)
-      Object.entries(row).forEach(([field, result, t]) => {
-        let value = result.value
-        if (result.type === 'literal' && result.datatype) {
-          value = fromRdf(literal(value, namedNode(result.datatype)))
-        }
-        rowData[field] = value
-      })
-    }
-  } catch (err) {
-    throw new Error(err)
+  if (!response || !response.results || !response.results.bindings) return queryResults
+
+  for (const row of response.results.bindings) {
+    const rowData = {}
+    queryResults.push(rowData)
+    Object.entries(row).forEach(([field, result, t]) => {
+      let value = result.value
+      if (result.type === 'literal' && result.datatype) {
+        value = fromRdf(literal(value, namedNode(result.datatype)))
+      }
+      rowData[field] = value
+    })
   }
   return queryResults
 }