nicolo/ds-front-test
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

First plot test

Browse Source
This commit is contained in:
Nicolò P 2023-04-14 18:12:55 +02:00
parent 6c1dfaec9d
commit 4b89115af6
4 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/ds.css
View File

@ -73,6 +73,9 @@ table.table td,
table.table th { table.table th {
border: none; border: none;
} }
.table-sample {
max-width: 65%;
}
#map { #map {
height: 500px; height: 500px;
} }

37
js/ds.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNsZmNiZGN0ZTJzbGgzdG8xYnZxOXRvd28ifQ.nvK1VYF6lwPpA094cL83KQ'; const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNsZmNiZGN0ZTJzbGgzdG8xYnZxOXRvd28ifQ.nvK1VYF6lwPpA094cL83KQ';
import * as resmap from './resmap.js'; import * as resmap from './resmap.js';
import {plot} from './plot.js';
/** /**
* @namespace DataSpace * @namespace DataSpace
*/ */
@ -10,7 +11,7 @@ DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
DataSpace.FE_URL = `${DataSpace.BASE_URL}/custom-fe`; DataSpace.FE_URL = `${DataSpace.BASE_URL}/custom-fe`;
DataSpace.RES_ENDPOINT = '/resources/'; DataSpace.RES_ENDPOINT = '/resources/';
DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`; 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 = { DataSpace.RESOURCE_REPORT = {
'Object' : resmap.OBJECT_REPORT, 'Object' : resmap.OBJECT_REPORT,
'Context' : resmap.CONTEXT_REPORT, 'Context' : resmap.CONTEXT_REPORT,
@ -125,10 +126,17 @@ DataSpace.renderReport = async function (report, archesJson, images)
this.getRelatedAnalysisId(archesJson) this.getRelatedAnalysisId(archesJson)
); );
console.log(this.getRelatedAnalysisId(archesJson));
container.innerHTML += await this.renderAnalysisReport( container.innerHTML += await this.renderAnalysisReport(
report.resource, report.resource,
report.displayname 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'); const shape = this.createShape(resource, 'Analysis');
let html = ` let html = `
<hr>
<div class="column col-12"> <div class="column col-12">
<h3 class="p-2 text-center">${type.replace(/(\w+\s\w+).*$/,"$1")}</h3> <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')) { for (const key in shape.get('before-gallery')) {
table += `<tr><td class="text-bold key"> table += `<tr>
${key.replace('Analysis', '')}</td> <td class="text-bold key">
${key.replace('Analysis', '')}
</td>
<td>${resource[key]}</td> <td>${resource[key]}</td>
</tr>`; </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; return html;
} }
/** /**

35
js/plot.js Normal file
View File

@ -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...
};

1
report/index.html
View File

@ -9,6 +9,7 @@
<link rel="shortcut icon" href="../img/favicon_dataspace.svg" /> <link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
<script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script> <script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
<script src="../vendor/leaflet/dist/leaflet.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> <script src="../js/views/report.js" type="module"></script>
</head> </head>
<body> <body>