About Page, CSV Rendering, Graph Plots saving as PNG and SVG

luox-app · Sep 4, 2023 · d596ecb · d596ecb
1 parent 9962d09
commit d596ecb
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 39 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,5 +26,6 @@ module.exports = {
  plugins: ["react", "jest"],
  rules: {
  "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+ "no-param-reassign": 0,
  },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,8 @@
  "chart.js": "^2.9.4",
  "copy-webpack-plugin": "^5.1.2",
  "file-loader": "^6.2.0",
+ "file-saver": "^2.0.5",
+ "html-to-image": "^1.11.11",
  "jquery": "3.5.0",
  "mathjs": "^9.5.2",
  "mini-css-extract-plugin": "^1.6.2",

diff --git a/src/javascript/components/About.jsx b/src/javascript/components/About.jsx
@@ -1454,7 +1454,8 @@ const About = () => {
  <a href="https://github.com/luox-app/luox/">
  https://github.com/luox-app/luox/
  </a>
- ) under an MIT License.
+ ) under the GNU General Public License
+ v3.0.
  </p>
  </div>
  </li>

diff --git a/src/javascript/components/CVGPlot.jsx b/src/javascript/components/CVGPlot.jsx
@@ -18,6 +18,9 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Plot from "react-plotly.js";
 import Pagination from "react-js-pagination";
+import { saveAs } from "file-saver";
+import * as htmlToImage from "html-to-image";
+import { Button } from "react-bootstrap";
 import hueBG from "../../images/hueBG.png";
 
 /**
@@ -59,6 +62,22 @@ if (windowWidth < 500) {
  styleHeight = windowWidth;
 }
 
+const downloadChart = (downloadType) => {
+ if (downloadType === "png") {
+ htmlToImage
+ .toBlob(document.getElementById("colorVectorGraphics"))
+ .then(function (blob) {
+ saveAs(blob, "colorVectorGraphics.png");
+ });
+ } else if (downloadType === "svg") {
+ htmlToImage
+ .toSvg(document.getElementById("colorVectorGraphics"))
+ .then(function (blob) {
+ saveAs(blob, "colorVectorGraphics.svg");
+ });
+ }
+};
+
 const CVGPlot = ({ measurementLabels, refHAB }) => {
  const [activePage, setCurrentPage] = useState(1);
  const handlePageChange = (pageNumber) => {
@@ -268,37 +287,54 @@ const CVGPlot = ({ measurementLabels, refHAB }) => {
  }
 
  return (
- <section className="cvg">
+ <section className="cvg col-md-12">
  <Pagination
  activePage={activePage}
  itemsCountPerPage={1}
  totalItemsCount={totalItemsCount}
  pageRangeDisplayed={10}
  onChange={handlePageChange}
  />
-
- <Plot
- data={data}
- style={{ width: styleWidth, height: styleHeight }}
- layout={layout}
- config={{
- toImageButtonOptions: { width: styleWidth, height: styleHeight },
- displayModeBar: true,
- showLink: false,
- modeBarButtonsToRemove: [
- "zoom2d",
- "pan",
- "pan2d",
- "sendDataToCloud",
- "hoverClosestCartesian",
- "hoverCompareCartesian",
- "autoScale2d",
- "toggleSpikelines",
- "toggleHover",
- ],
- displaylogo: false,
- }}
- />
+ <div id="colorVectorGraphics" className="col-md-8 md-offset-2 col-xs-12">
+ <Plot
+ data={data}
+ style={{ width: styleWidth, height: styleHeight }}
+ layout={layout}
+ config={{
+ toImageButtonOptions: { width: styleWidth, height: styleHeight },
+ displayModeBar: true,
+ showLink: false,
+ modeBarButtonsToRemove: [
+ "zoom2d",
+ "pan",
+ "pan2d",
+ "sendDataToCloud",
+ "hoverClosestCartesian",
+ "hoverCompareCartesian",
+ "autoScale2d",
+ "toggleSpikelines",
+ "toggleHover",
+ ],
+ displaylogo: false,
+ }}
+ />
+ </div>
+ <div className="col-md-12 my-1">
+ <Button
+ variant="primary"
+ onClick={() => downloadChart("png")}
+ className="btn-sm my-1"
+ >
+ Download Chart as PNG
+ </Button>
+ <Button
+ variant="success"
+ onClick={() => downloadChart("svg")}
+ className="btn-sm mx-3 my-1"
+ >
+ Download Chart as SVG
+ </Button>
+ </div>
  </section>
  );
 };

diff --git a/src/javascript/components/Chart.jsx b/src/javascript/components/Chart.jsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
+import { saveAs } from "file-saver";
+import * as htmlToImage from "html-to-image";
+import { Button } from "react-bootstrap";
 import createChart from "../chart";
 import { referenceSpectraNames } from "../referenceSpectra";
 
@@ -21,6 +24,22 @@ const Chart = ({
  setDisplayedReference(value);
  };
 
+ const downloadChart = (downloadType) => {
+ if (downloadType === "png") {
+ htmlToImage
+ .toBlob(document.getElementById("canvasChart"))
+ .then(function (blob) {
+ saveAs(blob, "canvasChart.png");
+ });
+ } else if (downloadType === "svg") {
+ htmlToImage
+ .toSvg(document.getElementById("canvasChart"))
+ .then(function (blob) {
+ saveAs(blob, "canvasChart.svg");
+ });
+ }
+ };
+
  useEffect(() => {
  let chart;
  if (chartRef.current) {
@@ -133,10 +152,36 @@ const Chart = ({
  </div>
  <div className="col-md-8 col-xs-12">
  {windowWidth < 500 ? (
- <canvas width="800" height="800" ref={chartRef} />
+ <canvas
+ width="800"
+ height="800"
+ ref={chartRef}
+ id="canvasChart"
+ />
  ) : (
- <canvas width="400" height="200" ref={chartRef} />
+ <canvas
+ width="400"
+ height="200"
+ ref={chartRef}
+ id="canvasChart"
+ />
  )}
+ <div className="col-md-12">
+ <Button
+ variant="primary"
+ onClick={() => downloadChart("png")}
+ className="btn-sm my-1"
+ >
+ Download Chart as PNG
+ </Button>
+ <Button
+ variant="success"
+ onClick={() => downloadChart("svg")}
+ className="btn-sm mx-3 my-1"
+ >
+ Download Chart as SVG
+ </Button>
+ </div>
  </div>
  </div>
  </div>

diff --git a/src/javascript/components/ManageCSV.jsx b/src/javascript/components/ManageCSV.jsx
@@ -11,9 +11,10 @@ const ManageCSV = ({
  setSelectedRowsSampleCount,
  measurementLabels,
  setMeasurementLabels,
+ modalView,
+ setModalView,
 }) => {
  const [error, setError] = useState(false);
- const [show, setShow] = useState(true);
  let selectedRowsArray = [];
  const selectedRowsColumnsArray = [];
  const selectedColumnsArray = [];
@@ -43,7 +44,7 @@ const ManageCSV = ({
  setError(false);
  setSelectedRows(selectedRowsArray);
  setSelectedRowsSampleCount(sampleCount);
- setShow(false);
+ setModalView(false);
  } else {
  setError(true);
  }
@@ -54,7 +55,7 @@ const ManageCSV = ({
  setError(false);
  setSelectedRows(selectedRowsArray);
  setSelectedRowsSampleCount(sampleCount);
- setShow(false);
+ setModalView(false);
  } else {
  for (let i = 0; i < selectedRowsArray.length; i += 1) {
  const rowArray = [];
@@ -72,7 +73,7 @@ const ManageCSV = ({
  setSelectedRows(selectedRowsColumnsArray);
  setSelectedRowsSampleCount(selectedColumnsArray.length);
  setMeasurementLabels({ ...selectedColumnsArray });
- setShow(false);
+ setModalView(false);
  }
  } else {
  setError(true);
@@ -81,14 +82,14 @@ const ManageCSV = ({
  const useAllRowsColumns = () => {
  setSelectedRows(rows);
  setSelectedRowsSampleCount(sampleCount);
- setShow(false);
+ setModalView(false);
  };
  const useAllRowsSelectedColumns = () => {
  if (selectedColumnsArray.length > 0) {
  if (measurementLabels.length === selectedColumnsArray.length) {
  setSelectedRows(rows);
  setSelectedRowsSampleCount(sampleCount);
- setShow(false);
+ setModalView(false);
  } else {
  selectedRowsArray = [];
  for (let i = 0; i < rows.length; i += 1) {
@@ -106,7 +107,7 @@ const ManageCSV = ({
  setSelectedRows(selectedRowsArray);
  setSelectedRowsSampleCount(selectedColumnsArray.length);
  setMeasurementLabels({ ...selectedColumnsArray });
- setShow(false);
+ setModalView(false);
  }
  } else {
  setError(true);
@@ -135,7 +136,7 @@ const ManageCSV = ({
 
  return (
  <>
- <Modal size="lg" show={show}>
+ <Modal size="lg" show={modalView}>
  <Modal.Header>
  <Modal.Title>Manage Rows</Modal.Title>
  </Modal.Header>
@@ -152,14 +153,14 @@ const ManageCSV = ({
  <Button
  variant="success"
  onClick={useAllRowsColumns}
- className="mx-2"
+ className="mx-2 my-1"
  >
  Use all Rows and Columns
  </Button>
  <Button
  variant="primary"
  onClick={useAllRowsSelectedColumns}
- className="mx-2"
+ className="mx-2 my-1"
  >
  Use all Rows and Selected Columns
  </Button>
@@ -170,13 +171,14 @@ const ManageCSV = ({
  <Button
  variant="success"
  onClick={useSelectedRowsAllColumns}
- className="mx-2"
+ className="mx-2 my-1"
  >
  Use Selected Rows and all Columns
  </Button>
  <Button
  variant="primary"
  onClick={useSelectedRowsSelectedColumns}
+ className="my-1"
  >
  Use Selected Rows and Selected Columns
  </Button>
@@ -256,5 +258,7 @@ ManageCSV.propTypes = {
  setSelectedRowsSampleCount: PropTypes.func.isRequired,
  measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired,
  setMeasurementLabels: PropTypes.func.isRequired,
+ modalView: PropTypes.bool.isRequired,
+ setModalView: PropTypes.func.isRequired,
 };
 export default ManageCSV;
diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx
@@ -18,6 +18,7 @@ const Upload = () => {
  const [powerMode, setPowerMode] = useState(false);
  const [isLoaded, setLoaded] = useState(false);
  const [refHAB, setRefHAB] = useState(null);
+ const [modalView, setModalView] = useState(false);
  const fileInput = useRef();
 
  const userModeChange = () => {
@@ -98,6 +99,7 @@ const Upload = () => {
  setRefHAB={setRefHAB}
  isLoaded={isLoaded}
  setLoaded={setLoaded}
+ setModalView={setModalView}
  />
 
  <ManageCSV
@@ -107,6 +109,8 @@ const Upload = () => {
  setSelectedRowsSampleCount={setSelectedRowsSampleCount}
  measurementLabels={measurementLabels}
  setMeasurementLabels={setMeasurementLabels}
+ modalView={modalView}
+ setModalView={setModalView}
  />
 
  <Results