From fe9e91a9f6c05ee6c093bedea9479bef3c223845 Mon Sep 17 00:00:00 2001
From: tholulomo <fatexjames@yahoo.com>
Date: Wed, 29 Mar 2023 13:39:18 -0400
Subject: [PATCH] fix(charts): Fix chart URI sharable link bug issue

---
 app/src/components/nanomine/ImageUpload.vue   |   2 +-
 app/src/modules/vega-chart.js                 |  76 ++++++-
 app/src/pages/explorer/chart/editor/Chart.vue | 209 ++++++++++++++++++
 .../explorer/chart/view/vega-view-script.js   |   5 +-
 .../pages/explorer/chart/view/vega-view.html  |   2 +-
 .../modules/explorer/curation/actions.js      |  53 +++++
 docker-compose.yml                            |   2 +-
 7 files changed, 339 insertions(+), 10 deletions(-)
 create mode 100644 app/src/pages/explorer/chart/editor/Chart.vue

diff --git a/app/src/components/nanomine/ImageUpload.vue b/app/src/components/nanomine/ImageUpload.vue
index aecdff7b..76ecfc46 100644
--- a/app/src/components/nanomine/ImageUpload.vue
+++ b/app/src/components/nanomine/ImageUpload.vue
@@ -321,7 +321,7 @@ export default {
         } else if (this.inputtedDimensions.units === 'millimeters') {
           ratio = ratio / 1000
         }
-        // console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
+
         this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: this.displayedFiles[0].size.width, height: this.displayedFiles[0].size.height, ratio: ratio }
       } else {
         this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: parseInt(this.inputtedDimensions.width), height: parseInt(this.inputtedDimensions.height), ratio: null }
diff --git a/app/src/modules/vega-chart.js b/app/src/modules/vega-chart.js
index 624f50e3..fd7e5748 100644
--- a/app/src/modules/vega-chart.js
+++ b/app/src/modules/vega-chart.js
@@ -36,6 +36,49 @@ const defaultChart = {
   depiction: null
 }
 
+const chartType = 'http://semanticscience.org/resource/Chart'
+// const lodPrefix = window.location.origin
+const chartUriPrefix = 'http://nanomine.org/viz/'
+const foafDepictionUri = 'http://xmlns.com/foaf/0.1/depiction'
+const hasContentUri = 'http://vocab.rpi.edu/whyis/hasContent'
+
+const chartFieldPredicates = {
+  baseSpec: 'http://semanticscience.org/resource/hasValue',
+  query: 'http://schema.org/query',
+  title: 'http://purl.org/dc/terms/title',
+  description: 'http://purl.org/dc/terms/description',
+  dataset: 'http://www.w3.org/ns/prov#used'
+}
+
+const chartIdLen = 16
+
+function generateChartId () {
+  const intArr = new Uint8Array(chartIdLen / 2)
+  window.crypto.getRandomValues(intArr)
+  const chartId = Array.from(intArr, (dec) => ('0' + dec.toString(16)).substr(-2)).join('')
+
+  return `${chartUriPrefix}${chartId}`
+}
+
+function buildChartLd (chart) {
+  chart = Object.assign({}, chart)
+  chart.baseSpec = JSON.stringify(chart.baseSpec)
+  const chartLd = {
+    '@id': chart.uri,
+    '@type': [chartType],
+    [foafDepictionUri]: {
+      '@id': `${chart.uri}_depiction`,
+      [hasContentUri]: chart.depiction
+    }
+  }
+  Object.entries(chart)
+    .filter(([field, value]) => chartFieldPredicates[field])
+    .forEach(([field, value]) => {
+      chartLd[chartFieldPredicates[field]] = [{ '@value': value }]
+    })
+  return chartLd
+}
+
 function getDefaultChart () {
   return Object.assign({}, defaultChart)
 }
@@ -62,7 +105,17 @@ const chartQuery = `
   `
 
 async function loadChart (chartUri) {
-  const singleChartQuery = chartQuery + `\n  VALUES (?uri) { (<${chartUri}>) }`
+  // Check the chart uri before running query
+  let chartUrl = chartUri
+  if (chartUrl.includes('view/')) {
+    // We should not get in this if logic. The issue with chart URI using a different
+    // lodPrefix is now fixed (e.g. http://nanomine.org/viz/chartId instead of http://purl.org/chart/view/chartId)
+    // Todo (ticket-xx): Remove this if logic if response is consistent
+    chartUrl = decodeURIComponent(chartUri.split('view/')[1])
+  }
+
+  const valuesBlock = `\n  VALUES (?uri) { (<${chartUri}>) }`
+  const singleChartQuery = chartQuery.replace(/(where\s*{)/i, '$1' + valuesBlock)
   const { results } = await querySparql(singleChartQuery)
   const rows = results.bindings
   if (rows.length < 1) {
@@ -102,17 +155,28 @@ function buildCsvSpec (baseSpec, csvResults) {
   return spec
 }
 
-const chartUriPrefix = 'http://nanomine.org/viz/'
-
 function toChartId (chartUri) {
-  if (!chartUri.startsWith(chartUriPrefix)) {
-    throw new Error(`Unexpected chart uri "${chartUri}". Was expecting prefix "${chartUriPrefix}"`)
+  if (chartUri && !chartUri.startsWith(chartUriPrefix)) {
+    // We should not get in this if logic. The issue with chart URI using a different
+    // lodPrefix is now fixed (e.g. http://nanomine.org/viz/chartId instead of http://purl.org/chart/view/chartId)
+    // Todo (ticket-xx): Remove this if logic if response is consistent
+    return chartUri
   }
+  if (!chartUri) return
+
   return chartUri.substring(chartUriPrefix.length)
 }
 
 function toChartUri (chartId) {
+  if (chartId.includes('viz')) {
+    return `${window.location.origin}/explorer/chart/view/${encodeURIComponent(chartId)}`
+  }
+  
   return chartUriPrefix + chartId
 }
 
-export { getDefaultChart, loadChart, buildSparqlSpec, buildCsvSpec, toChartId, toChartUri, chartUriPrefix }
+function shareChartUri (chartId) {
+  return `${window.location.origin}/explorer/chart/view/${chartId}`
+}
+
+export { getDefaultChart, saveChart, loadChart, copyChart, buildSparqlSpec, buildCsvSpec, toChartId, toChartUri, shareChartUri, chartUriPrefix }
diff --git a/app/src/pages/explorer/chart/editor/Chart.vue b/app/src/pages/explorer/chart/editor/Chart.vue
new file mode 100644
index 00000000..a4c0294f
--- /dev/null
+++ b/app/src/pages/explorer/chart/editor/Chart.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="chart_editor">
+    <div class="u--layout-width viz-sample u--layout-flex utility_flex_mobile" >
+      <div v-if="loading" class="editImage_modal" style="z-index:4">
+        <spinner :loading="loading"/>
+      </div>
+     <!-- Left element -->
+    <div class="chart_editor__left-view" style="flex: 1 1 50%;">
+      <div class="u--layout-width u--layout-flex u--layout-flex-justify-fs u_margin-bottom-small">
+        <a @click.prevent="leftTab = 1" :class="[leftTab === 1 ? 'active u--color-primary' : '']" class="viz-tab__button">Sparql</a>
+        <a @click.prevent="leftTab = 2" :class="[leftTab === 2 ? 'active u--color-primary' : '']" class="viz-tab__button">Vega</a>
+        <a @click.prevent="leftTab = 3" :class="[leftTab === 3 ? 'active u--color-primary' : '']" class="viz-tab__button">Save Chart</a>
+      </div>
+
+      <div class="chart_editor__left-content">
+        <yasqe
+          v-if="chart.query"
+          v-model="chart.query"
+          v-on:query-success="onQuerySuccess"
+          v-show="leftTab === 1" :showBtns='true'>
+        </yasqe>
+        <v-jsoneditor v-show="leftTab === 2"
+          v-model="chart.baseSpec"
+          :options="specJsonEditorOpts"
+          v-if="chart.baseSpec"
+        > </v-jsoneditor>
+        <form v-show="leftTab === 3">
+          <md-field>
+            <label>Title</label>
+            <md-input v-model="chart.title"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Description</label>
+            <md-textarea v-model="chart.description"></md-textarea>
+          </md-field>
+
+          <button class="btn btn--primary" @click.prevent="saveChart"> {{ actionType }}  <md-icon class="u--color-success">check</md-icon> </button>
+        </form>
+      </div>
+
+    </div>
+
+    <!-- The resizer -->
+    <div class="u_height--max u--bg-grey u_pointer--ew md-xsmall-hide chart_editor-divider"  id="dragMe"></div>
+
+    <!-- Right element -->
+    <div class="chart_editor__right-view" style="flex: 1 1 50%;">
+      <h4 class="u--margin-pos">Preview</h4>
+      <div class="u--layout-width u--layout-flex u--layout-flex-justify-end u_margin-bottom-small">
+        <a @click.prevent="rightTab = 1" :class="[rightTab === 1 ? 'active u--color-primary' : '']" class="viz-tab__button">Chart</a>
+        <a @click.prevent="rightTab = 2" :class="[rightTab === 2 ? 'active u--color-primary' : '']" class="viz-tab__button">Table</a>
+      </div>
+
+      <div class="chart_editor__right-content">
+        <div  v-show="rightTab === 1" class="loading-dialog" style="margin: auto">
+          <vega-lite :spec="spec" @new-vega-view="onNewVegaView" class="btn--animated vega-embed-chartview"/>
+        </div>
+
+        <div v-show="rightTab === 2"  class="viz-intro-query" style="min-height: 40rem !important">
+            <yasr :results="results"></yasr>
+        </div>
+      </div>
+    </div>
+
+    </div>
+    <md-button @click="goToExplorer" class="md-fab md-fixed md-fab-bottom-right md-primary btn--primary">
+        <md-icon>arrow_back</md-icon>
+    </md-button>
+  </div>
+</template>
+
+<script>
+import { querySparql } from '@/modules/sparql'
+import { saveChart, getDefaultChart, buildSparqlSpec } from '@/modules/vega-chart'
+import VJsoneditor from 'v-jsoneditor'
+import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
+import yasqe from '@/components/explorer/yasqe'
+import yasr from '@/components/explorer/yasr'
+import spinner from '@/components/Spinner'
+export default {
+  name: 'ChartCreate',
+  components: {
+    VJsoneditor,
+    VegaLite,
+    yasqe,
+    yasr,
+    spinner
+  },
+  data () {
+    return {
+      loading: true,
+      mouseIsDown: false,
+      x: 0,
+      y: 0,
+      leftTab: 1,
+      rightTab: 1,
+      results: null,
+      specJsonEditorOpts: {
+        mode: 'code',
+        mainMenuBar: false
+      },
+      chart: {
+        baseSpec: null,
+        query: null,
+        title: null,
+        description: null
+      },
+      actionType: 'Save Chart',
+      sumbmittedIdentifier: undefined
+    }
+  },
+  computed: {
+    spec () {
+      const spec = buildSparqlSpec(this.chart.baseSpec, this.results) ?? {}
+      return spec
+    }
+  },
+  methods: {
+    getSparqlData () {
+      const vm = this
+      querySparql(vm.chart.query)
+        .then(this.onQuerySuccess)
+        .then(this.loading = false)
+    },
+    onQuerySuccess (results) {
+      this.results = results
+    },
+    onSpecJsonError () {
+      console.log('bad', arguments)
+    },
+    async onNewVegaView (view) {
+      const blob = await view.toImageURL('png')
+        .then(url => fetch(url))
+        .then(resp => resp.blob())
+      const fr = new FileReader()
+      fr.addEventListener('load', () => {
+        this.chart.depiction = fr.result
+      })
+      fr.readAsDataURL(blob)
+    },
+    async loadChart () {
+      // this.types = 'new, edit, restore & delete'
+      let getChartPromise
+      if (this.$route.params.type === 'new') {
+        this.actionType = 'Save Chart'
+        getChartPromise = Promise.resolve(getDefaultChart())
+      } else if (this.$route.params.type === 'edit') {
+        // fetch chart from knowledge graph
+        this.actionType = 'Edit Chart'
+      } else {
+        // Get chart from mongo backup
+        this.actionType = 'Restore Chart'
+        this.reloadRestored()
+      }
+      getChartPromise
+        .then(chart => {
+          this.chart = chart
+          return this.getSparqlData()
+        })
+    },
+    async reloadRestored () {
+      // 1. Fetch backup from mongo
+      // 2. Post each chart (schema + sparql) to knowledge graph
+      // 3. Toggle restore flag in mongo
+
+    },
+    async saveChart () {
+      // Todo (ticket xx): Move this into vuex
+      try {
+        const chartNanopub = await saveChart(this.chart)
+
+        const resp = await this.$store.dispatch('explorer/curation/cacheNewChartResponse', {
+          identifier: this.sumbmittedIdentifier,
+          chartNanopub
+        })
+
+        if (resp.identifier) {
+          this.sumbmittedIdentifier = resp.identifier
+        }
+
+        if (this.$route.params.type === 'new') {
+          // Save chart to MongoDB - async operation
+        } else {
+          // Find in mongo and update - async operation
+        }
+        this.$store.commit('explorer/curation/setNewChartExist', true)
+
+        // Change button name after submission
+        this.actionType = 'Edit Chart'
+        this.$store.commit('setSnackbar', {
+          message: 'Chart saved successfully!',
+          duration: 5000
+        })
+      } catch (err) {
+        // TODO (Ticket xxx): USE THE APP DIALOGUE BOX INSTEAD OF ALERT BOX
+        return alert(err)
+      }
+    },
+    goToExplorer () {
+      this.$router.push('/explorer/chart')
+    }
+  },
+  created () {
+    this.loading = true
+    this.loadChart()
+  }
+}
+</script>
diff --git a/app/src/pages/explorer/chart/view/vega-view-script.js b/app/src/pages/explorer/chart/view/vega-view-script.js
index 73a70c3f..6e46a97f 100644
--- a/app/src/pages/explorer/chart/view/vega-view-script.js
+++ b/app/src/pages/explorer/chart/view/vega-view-script.js
@@ -1,6 +1,6 @@
 import VJsoneditor from 'v-jsoneditor'
 import Dialog from '@/components/Dialog.vue'
-import { loadChart, buildSparqlSpec, toChartUri } from '@/modules/vega-chart'
+import { loadChart, buildSparqlSpec, toChartUri, shareChartUri } from '@/modules/vega-chart'
 import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
 import yasqe from '@/components/explorer/yasqe'
 import yasr from '@/components/explorer/yasr'
@@ -56,6 +56,9 @@ export default {
     },
     fullChartUri () {
       return toChartUri(this.chartId)
+    },
+    shareChartUri () {
+      return shareChartUri(this.chartId)
     }
   },
   methods: {
diff --git a/app/src/pages/explorer/chart/view/vega-view.html b/app/src/pages/explorer/chart/view/vega-view.html
index d28f1ff3..235015d8 100644
--- a/app/src/pages/explorer/chart/view/vega-view.html
+++ b/app/src/pages/explorer/chart/view/vega-view.html
@@ -92,7 +92,7 @@
     <template v-slot:content>
         <div v-if="dialog.type=='share'">
             <md-field> <label>Chart Link</label>
-                <md-textarea disabled v-model="fullChartUri"></md-textarea>
+                <md-textarea disabled v-model="shareChartUri"></md-textarea>
             </md-field>
             <div>Copy the link above to share this chart</div>
         </div>
diff --git a/app/src/store/modules/explorer/curation/actions.js b/app/src/store/modules/explorer/curation/actions.js
index af094e73..998e840d 100644
--- a/app/src/store/modules/explorer/curation/actions.js
+++ b/app/src/store/modules/explorer/curation/actions.js
@@ -23,5 +23,58 @@ export default {
         }, { root: true })
       }
     })
+  },
+
+  async createChartInstanceObject (_context, nanopubPayload) {
+    const chartObject = nanopubPayload?.['@graph']?.['np:hasAssertion']?.['@graph'][0]
+
+    // Return if not able to retrieve chart object
+    if (!chartObject) return new Error('Caching error. Chart object is missing')
+
+    // Build chart instance object
+    return {
+      description: chartObject['http://purl.org/dc/terms/description']?.[0]?.['@value'],
+      identifier: chartObject['@id'],
+      label: chartObject['http://purl.org/dc/terms/title']?.[0]?.['@value'],
+      thumbnail: chartObject['http://xmlns.com/foaf/0.1/depiction']?.['@id']
+      // depiction: chartObject['http://xmlns.com/foaf/0.1/depiction']?.['http://vocab.rpi.edu/whyis/hasContent']
+    }
+  },
+
+  async cacheNewChartResponse ({ commit, dispatch, rootGetters }, payload) {
+    const { identifier, chartNanopub } = payload
+    const url = '/api/admin/es'
+    const chartInstanceObject = await dispatch('createChartInstanceObject', chartNanopub)
+    const token = rootGetters['auth/token']
+
+    // 1. Check if a chart with same identifier exist in ES and delete
+    if (identifier) {
+      await fetch(url, {
+        method: 'DELETE',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + token
+        },
+        body: JSON.stringify({ doc: identifier, type: 'charts' })
+      })
+    }
+
+    const fetchResponse = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + token
+      },
+      body: JSON.stringify({ doc: chartInstanceObject, type: 'charts' })
+    })
+
+    if (fetchResponse.status !== 200) {
+      return new Error(fetchResponse.statusText || 'Server error, cannot cache chart')
+    }
+
+    const response = await fetchResponse.json()
+    return { response, identifier: chartInstanceObject.identifier }
   }
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 63ddd53f..fdc99b08 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -160,7 +160,7 @@ services:
     environment:
 #      - ADMIN_USER=admin
 #      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
-      - JVM_ARGS=-Xmx10g
+      - JVM_ARGS=-Xmx4g
       - FUSEKI_BASE=/fuseki
     ports:
       - '3030:3030'