From d9539d531fe706d5701e41b5a6be43f4c98197cc Mon Sep 17 00:00:00 2001 From: Zain Ali Date: Wed, 9 Aug 2023 00:30:16 +0200 Subject: [PATCH] Adjusting CSV before uploading --- .../components/CalculationTable.jsx | 15 +- src/javascript/components/Chart.jsx | 17 +-- src/javascript/components/ManageCSV.jsx | 128 ++++++++++++++++++ src/javascript/components/Results.jsx | 29 ++-- src/javascript/components/SpectraCSV.js | 4 +- src/javascript/components/SpectraTable.jsx | 27 ++-- src/javascript/components/Upload.jsx | 13 +- src/stylesheets/custom.css | 8 ++ 8 files changed, 198 insertions(+), 43 deletions(-) create mode 100644 src/javascript/components/ManageCSV.jsx diff --git a/src/javascript/components/CalculationTable.jsx b/src/javascript/components/CalculationTable.jsx index be729e1..429ff2b 100644 --- a/src/javascript/components/CalculationTable.jsx +++ b/src/javascript/components/CalculationTable.jsx @@ -77,8 +77,8 @@ CalculationTableRow.propTypes = { * */ const CalculationTable = ({ radianceOrIrradiance, - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, measurementLabels, isLoaded, setLoaded, @@ -217,7 +217,7 @@ const CalculationTable = ({ if (isLoaded) { const worker = new Worker(); - worker.postMessage([rows, sampleCount]); + worker.postMessage([selectedRows, selectedRowsSampleCount]); worker.onmessage = (event) => { setCalculation(event.data); // run this in global scope of window or worker. Since window.self = window, we're ok @@ -242,8 +242,8 @@ const CalculationTable = ({ return () => {}; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, exponentialNotation, measurementLabels, radianceOrIrradiance, @@ -455,8 +455,9 @@ const CalculationTable = ({ }; CalculationTable.propTypes = { - rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, - sampleCount: PropTypes.number.isRequired, + selectedRows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) + .isRequired, + selectedRowsSampleCount: PropTypes.number.isRequired, radianceOrIrradiance: PropTypes.oneOf(["radiance", "irradiance"]).isRequired, measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, isLoaded: PropTypes.bool.isRequired, diff --git a/src/javascript/components/Chart.jsx b/src/javascript/components/Chart.jsx index 6bf78f1..6bc4068 100644 --- a/src/javascript/components/Chart.jsx +++ b/src/javascript/components/Chart.jsx @@ -5,8 +5,8 @@ import { referenceSpectraNames } from "../referenceSpectra"; const Chart = ({ radianceOrIrradiance, - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, measurementLabels, }) => { const windowWidth = window.innerWidth; @@ -28,8 +28,8 @@ const Chart = ({ chart = createChart( chartRef.current, radianceOrIrradiance, - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, measurementLabels, yAxisScaling, displayedReference @@ -43,8 +43,8 @@ const Chart = ({ }; }, [ radianceOrIrradiance, - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, measurementLabels, yAxisScaling, displayedReference, @@ -147,8 +147,9 @@ const Chart = ({ Chart.propTypes = { radianceOrIrradiance: PropTypes.oneOf(["radiance", "irradiance"]).isRequired, - rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, - sampleCount: PropTypes.number.isRequired, + selectedRows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) + .isRequired, + selectedRowsSampleCount: PropTypes.number.isRequired, measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, }; diff --git a/src/javascript/components/ManageCSV.jsx b/src/javascript/components/ManageCSV.jsx new file mode 100644 index 0000000..59097dc --- /dev/null +++ b/src/javascript/components/ManageCSV.jsx @@ -0,0 +1,128 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import { Button, Modal } from "react-bootstrap"; + +// export const t0 = performance.now(); + +const ManageCSV = ({ + rows, + sampleCount, + setSelectedRows, + setSelectedRowsSampleCount, + measurementLabels, +}) => { + const [error, setError] = useState(false); + const [show, setShow] = useState(true); + const selectedRowsArray = []; + let selectedRowsLength = 0; + + if (rows.length === 0) { + return null; + } + + const addSelectedRow = (row, isChecked) => { + if (isChecked) { + selectedRowsLength += 1; + selectedRowsArray.push(row); + } else { + selectedRowsArray.pop(row); + selectedRowsLength -= 1; + } + }; + + const useSelectedRows = () => { + if (selectedRowsLength > 0) { + setError(false); + setSelectedRows(selectedRowsArray); + setSelectedRowsSampleCount(selectedRowsLength); + setShow(false); + } else { + setError(true); + } + }; + const useAllRows = () => { + setSelectedRows(rows); + setSelectedRowsSampleCount(sampleCount); + setShow(false); + }; + + return ( + <> + + + Manage Rows + + +
+
+ + + + + + {Object.entries(measurementLabels).map(([key, value]) => ( + + ))} + + + + {rows && rows.length > 0 ? ( + rows.map((row) => ( + + + {Object.entries(row).map(([key, value]) => ( + + ))} + + )) + ) : ( + + + + )} + +
Wavelength{value}
+ + addSelectedRow(row, event.target.checked) + } + /> + {value}
+
+
+ No Record found +
+
+
+
+
+ + + {error ? ( +

Please select atleast one row.

+ ) : ( + "" + )} + + + + + + ); +}; + +ManageCSV.propTypes = { + rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, + sampleCount: PropTypes.number.isRequired, + setSelectedRows: PropTypes.func.isRequired, + setSelectedRowsSampleCount: PropTypes.func.isRequired, + measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, +}; +export default ManageCSV; diff --git a/src/javascript/components/Results.jsx b/src/javascript/components/Results.jsx index fa99b02..f533211 100644 --- a/src/javascript/components/Results.jsx +++ b/src/javascript/components/Results.jsx @@ -9,8 +9,8 @@ import { rowsToURL } from "../sharing"; // export const t0 = performance.now(); const Results = ({ - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, radianceOrIrradiance, measurementLabels, powerMode, @@ -22,11 +22,15 @@ const Results = ({ const originalButtonText = "Copy to clipboard"; const [buttonText, setButtonText] = useState(originalButtonText); - if (rows.length === 0) { + if (selectedRows.length === 0) { return null; } - const sharingID = rowsToURL(rows, radianceOrIrradiance, measurementLabels); + const sharingID = rowsToURL( + selectedRows, + radianceOrIrradiance, + measurementLabels + ); const sharingURL = `${window.location.origin}/u/${sharingID}`; const buttonDisabled = () => { @@ -63,8 +67,8 @@ const Results = ({ {!powerMode && ( )} @@ -79,8 +83,8 @@ const Results = ({

@@ -158,8 +162,9 @@ const Results = ({ }; Results.propTypes = { - rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, - sampleCount: PropTypes.number.isRequired, + selectedRows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) + .isRequired, + selectedRowsSampleCount: PropTypes.number.isRequired, radianceOrIrradiance: PropTypes.oneOf(["radiance", "irradiance"]).isRequired, measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, powerMode: PropTypes.bool.isRequired, diff --git a/src/javascript/components/SpectraCSV.js b/src/javascript/components/SpectraCSV.js index d0364f6..d13f624 100644 --- a/src/javascript/components/SpectraCSV.js +++ b/src/javascript/components/SpectraCSV.js @@ -1,7 +1,7 @@ import Papa from "papaparse"; import { radianceOrIrradianceSIUnit } from "../helpers"; -const SpectraCSV = ({ rows, radianceOrIrradiance }) => { +const SpectraCSV = ({ selectedRows, radianceOrIrradiance }) => { const csv = Papa.unparse([ [ "Wavelength [nm]", @@ -9,7 +9,7 @@ const SpectraCSV = ({ rows, radianceOrIrradiance }) => { radianceOrIrradiance )}]`, ], - ...rows, + ...selectedRows, ]); return window.URL.createObjectURL( diff --git a/src/javascript/components/SpectraTable.jsx b/src/javascript/components/SpectraTable.jsx index 2332ad2..311b49f 100644 --- a/src/javascript/components/SpectraTable.jsx +++ b/src/javascript/components/SpectraTable.jsx @@ -38,7 +38,7 @@ SpectraTableEllipsisRow.propTypes = { }; const SpectraTableHeader = ({ - sampleCount, + selectedRowsSampleCount, measurementLabels, radianceOrIrradiance, }) => { @@ -47,7 +47,7 @@ const SpectraTableHeader = ({ return ( - + Spectral {radianceOrIrradiance} [ {radianceOrIrradianceSIUnit(radianceOrIrradiance)}] @@ -63,14 +63,14 @@ const SpectraTableHeader = ({ }; SpectraTableHeader.propTypes = { - sampleCount: PropTypes.number.isRequired, + selectedRowsSampleCount: PropTypes.number.isRequired, measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, radianceOrIrradiance: PropTypes.oneOf(["radiance", "irradiance"]).isRequired, }; const SpectraTable = ({ - rows, - sampleCount, + selectedRows, + selectedRowsSampleCount, radianceOrIrradiance, measurementLabels, }) => { @@ -78,8 +78,8 @@ const SpectraTable = ({ const [displayAllRows, setDisplayAllRows] = useState(false); const spectraDownloadUrl = useMemo( - () => SpectraCSV({ radianceOrIrradiance, rows }), - [radianceOrIrradiance, rows] + () => SpectraCSV({ radianceOrIrradiance, selectedRows }), + [radianceOrIrradiance, selectedRows] ); const handleExponentialNotation = () => { @@ -91,11 +91,11 @@ const SpectraTable = ({ }; const truncateTable = () => { - return rows.length > 5; + return selectedRows.length > 5; }; const rowsToDisplay = () => { - return displayAllRows ? rows : rows.slice(0, 5); + return displayAllRows ? selectedRows : selectedRows.slice(0, 5); }; const displayEllipsisRow = () => { @@ -142,7 +142,7 @@ const SpectraTable = ({
@@ -156,7 +156,7 @@ const SpectraTable = ({ /> ))} {displayEllipsisRow() && ( - + )}
@@ -166,8 +166,9 @@ const SpectraTable = ({ }; SpectraTable.propTypes = { - rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, - sampleCount: PropTypes.number.isRequired, + selectedRows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) + .isRequired, + selectedRowsSampleCount: PropTypes.number.isRequired, radianceOrIrradiance: PropTypes.oneOf(["radiance", "irradiance"]).isRequired, measurementLabels: PropTypes.objectOf(PropTypes.string).isRequired, }; diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx index d2bbd17..3742eee 100644 --- a/src/javascript/components/Upload.jsx +++ b/src/javascript/components/Upload.jsx @@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react"; import UploadForm from "./UploadForm"; import Results from "./Results"; import MultiStepProgressBar from "./MultiStepProgressBar"; +import ManageCSV from "./ManageCSV"; const Upload = () => { const [radianceOrIrradiance, setRadianceOrIrradiance] = useState( @@ -9,6 +10,8 @@ const Upload = () => { ); const [rows, setRows] = useState([]); const [sampleCount, setSampleCount] = useState(0); + const [selectedRows, setSelectedRows] = useState([]); + const [selectedRowsSampleCount, setSelectedRowsSampleCount] = useState(0); const [measurementLabels, setMeasurementLabels] = useState({}); const [csv, setCSV] = useState([]); const [relativePowers, setRelativePowers] = useState({}); @@ -97,9 +100,17 @@ const Upload = () => { setLoaded={setLoaded} /> - + +