From 4b89115af6873605727a8184241a9b6e93089c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Fri, 14 Apr 2023 18:12:55 +0200
Subject: [PATCH] First plot test

---
 css/ds.css        |  3 +++
 js/ds.js          | 37 ++++++++++++++++++++++++++++++++-----
 js/plot.js        | 35 +++++++++++++++++++++++++++++++++++
 report/index.html |  1 +
 4 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 js/plot.js

diff --git a/css/ds.css b/css/ds.css
index efb6aed..13f5aeb 100644
--- a/css/ds.css
+++ b/css/ds.css
@@ -73,6 +73,9 @@ table.table td,
 table.table th {
     border: none;
 }
+.table-sample {
+    max-width: 65%;
+}
 #map {
     height: 500px;
 }
diff --git a/js/ds.js b/js/ds.js
index 7898bf2..c60d3e6 100644
--- a/js/ds.js
+++ b/js/ds.js
@@ -1,6 +1,7 @@
 'use strict';
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNsZmNiZGN0ZTJzbGgzdG8xYnZxOXRvd28ifQ.nvK1VYF6lwPpA094cL83KQ';
 import * as resmap from './resmap.js';
+import {plot} from './plot.js';
 /**
 * @namespace DataSpace
 */
@@ -10,7 +11,7 @@ DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
 DataSpace.FE_URL = `${DataSpace.BASE_URL}/custom-fe`;
 DataSpace.RES_ENDPOINT = '/resources/';
 DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`;
-// TODO maybe these assignments are non needed?
+// TODO maybe these assignments are not needed?
 DataSpace.RESOURCE_REPORT = {
     'Object' : resmap.OBJECT_REPORT,
     'Context' : resmap.CONTEXT_REPORT,
@@ -125,10 +126,17 @@ DataSpace.renderReport = async function (report,  archesJson, images)
             this.getRelatedAnalysisId(archesJson)
         );
 
+        console.log(this.getRelatedAnalysisId(archesJson));
+
         container.innerHTML += await this.renderAnalysisReport(
             report.resource,
             report.displayname
         );
+        const spectra = report.resource['Analysis Spectra'][0];
+        const rawData = await this.fetchFileUrl(spectra['Spectrum Raw Data']);
+
+        plot([[1, 2, 3, 4, 5], [1, 2, 4, 8, 16]], 'plot');
+
      }
 }
 /**
@@ -142,16 +150,17 @@ DataSpace.renderAnalysisReport = async function (resource, type)
 {
     const shape = this.createShape(resource, 'Analysis');
     let html = `
-        <hr>
         <div class="column col-12">
         <h3 class="p-2 text-center">${type.replace(/(\w+\s\w+).*$/,"$1")}</h3>
     `;
 
-    let table = '<table class="mt-2 table table-hover" style="max-width: 65%">';
+    let table = '<table class="mt-2 table table-hover table-sample">';
 
     for (const key in shape.get('before-gallery')) {
-        table += `<tr><td class="text-bold key">
-            ${key.replace('Analysis', '')}</td>
+        table += `<tr>
+            <td class="text-bold key">
+                ${key.replace('Analysis', '')}
+            </td>
             <td>${resource[key]}</td>
             </tr>`;
     }
@@ -180,6 +189,24 @@ DataSpace.renderAnalysisReport = async function (resource, type)
             `;
         }
     }
+
+    html += `
+        <div class="column col-12 mt-2">
+            <h4 class="pl-2">Spectrum - Raw Data</h4>
+        </div>
+    `;
+
+    html += `
+        <div id="plot" class="column col-12 mt-2">
+        </div>
+    `;
+
+    // TODO plots...
+    const spectra = resource['Analysis Spectra'][0];
+    const rawData = await this.fetchFileUrl(spectra['Spectrum Raw Data']);
+    const interpreted = await this.fetchFileUrl(spectra['Spectrum Interpreted Data']);
+    console.warn(rawData, interpreted);
+
     return html;
 }
 /**
diff --git a/js/plot.js b/js/plot.js
new file mode 100644
index 0000000..8be3753
--- /dev/null
+++ b/js/plot.js
@@ -0,0 +1,35 @@
+const spectra = {
+    'XRD' : processXRD,
+    'XRF' : processXRF,
+};
+/**
+ * @todo process rawData and check spectrum type?
+ * @param {string} rawData
+ * @param {HTMLDivElement} container
+ *
+ * @returns {void}
+ */
+export function plot(rawData, containerId)
+{
+    let container = document.querySelector(`#${containerId}`);
+
+    console.log(rawData[1]);
+
+    Plotly.newPlot(container, 
+        [{
+            x: rawData[0],
+            y: rawData[1],
+        }],
+        {
+            margin: {t: 0}
+        }
+    );
+}
+
+const processXRD = rawData => {
+    // Do stuff...
+};
+
+const processXRF = rawData => {
+    // Do stuff...
+};
diff --git a/report/index.html b/report/index.html
index 46436db..1a1fb11 100644
--- a/report/index.html
+++ b/report/index.html
@@ -9,6 +9,7 @@
         <link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
         <script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
         <script src="../vendor/leaflet/dist/leaflet.js"></script>
+        <script src="../vendor/plotly.js/dist/plotly.min.js"></script>
         <script src="../js/views/report.js" type="module"></script>
     </head>
     <body>