Skip to content

Commit

Permalink
Adjusting CSV before uploading
Browse files Browse the repository at this point in the history
  • Loading branch information
zain55337 committed Aug 8, 2023
1 parent 6ea942a commit d9539d5
Show file tree
Hide file tree
Showing 8 changed files with 198 additions and 43 deletions.
15 changes: 8 additions & 7 deletions src/javascript/components/CalculationTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ CalculationTableRow.propTypes = {
* */
const CalculationTable = ({
radianceOrIrradiance,
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
measurementLabels,
isLoaded,
setLoaded,
Expand Down Expand Up @@ -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
Expand All @@ -242,8 +242,8 @@ const CalculationTable = ({
return () => {};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
exponentialNotation,
measurementLabels,
radianceOrIrradiance,
Expand Down Expand Up @@ -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,
Expand Down
17 changes: 9 additions & 8 deletions src/javascript/components/Chart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { referenceSpectraNames } from "../referenceSpectra";

const Chart = ({
radianceOrIrradiance,
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
measurementLabels,
}) => {
const windowWidth = window.innerWidth;
Expand All @@ -28,8 +28,8 @@ const Chart = ({
chart = createChart(
chartRef.current,
radianceOrIrradiance,
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
measurementLabels,
yAxisScaling,
displayedReference
Expand All @@ -43,8 +43,8 @@ const Chart = ({
};
}, [
radianceOrIrradiance,
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
measurementLabels,
yAxisScaling,
displayedReference,
Expand Down Expand Up @@ -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,
};

Expand Down
128 changes: 128 additions & 0 deletions src/javascript/components/ManageCSV.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { Button, Modal } from "react-bootstrap";

Check failure on line 3 in src/javascript/components/ManageCSV.jsx

View workflow job for this annotation

GitHub Actions / build

Unable to resolve path to module '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 (
<>
<Modal size="lg" show={show}>
<Modal.Header>
<Modal.Title>Manage Rows</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="row mt-3 row-div table-row">
<div className="col-md-12">
<table className="table table-striped table-bordered table-hover generate-csv-table mb-1">
<thead>
<tr>
<th> </th>
<th>Wavelength</th>
{Object.entries(measurementLabels).map(([key, value]) => (
<th key={key}>{value}</th>
))}
</tr>
</thead>
<tbody>
{rows && rows.length > 0 ? (
rows.map((row) => (
<tr key={row[0]}>
<td>
<input
type="checkbox"
name="rowCheckbox"
className="selectedRowCheckbox"
onChange={(event) =>
addSelectedRow(row, event.target.checked)
}
/>
</td>
{Object.entries(row).map(([key, value]) => (
<td key={key}>{value}</td>
))}
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
<div className="px-2 text-center">
<div className="my-auto text-center text-bold">
No Record found
</div>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</Modal.Body>
<Modal.Footer>
{error ? (
<p className="colorRed">Please select atleast one row.</p>
) : (
""
)}
<Button variant="success" onClick={useAllRows}>
Use all rows
</Button>
<Button variant="primary" onClick={useSelectedRows}>
Use Selected Rows
</Button>
</Modal.Footer>
</Modal>
</>
);
};

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;
29 changes: 17 additions & 12 deletions src/javascript/components/Results.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { rowsToURL } from "../sharing";
// export const t0 = performance.now();

const Results = ({
rows,
sampleCount,
selectedRows,
selectedRowsSampleCount,
radianceOrIrradiance,
measurementLabels,
powerMode,
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -63,8 +67,8 @@ const Results = ({
{!powerMode && (
<Chart
radianceOrIrradiance={radianceOrIrradiance}
rows={rows}
sampleCount={sampleCount}
selectedRows={selectedRows}
selectedRowsSampleCount={selectedRowsSampleCount}
measurementLabels={measurementLabels}
/>
)}
Expand All @@ -79,8 +83,8 @@ const Results = ({
</p>

<CalculationTable
rows={rows}
sampleCount={sampleCount}
selectedRows={selectedRows}
selectedRowsSampleCount={selectedRowsSampleCount}
radianceOrIrradiance={radianceOrIrradiance}
measurementLabels={measurementLabels}
isLoaded={isLoaded}
Expand All @@ -104,8 +108,8 @@ const Results = ({
</p>

<SpectraTable
rows={rows}
sampleCount={sampleCount}
selectedRows={selectedRows}
selectedRowsSampleCount={selectedRowsSampleCount}
radianceOrIrradiance={radianceOrIrradiance}
measurementLabels={measurementLabels}
/>
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/javascript/components/SpectraCSV.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import Papa from "papaparse";
import { radianceOrIrradianceSIUnit } from "../helpers";

const SpectraCSV = ({ rows, radianceOrIrradiance }) => {
const SpectraCSV = ({ selectedRows, radianceOrIrradiance }) => {
const csv = Papa.unparse([
[
"Wavelength [nm]",
`Spectral ${radianceOrIrradiance} [${radianceOrIrradianceSIUnit(
radianceOrIrradiance
)}]`,
],
...rows,
...selectedRows,
]);

return window.URL.createObjectURL(
Expand Down
27 changes: 14 additions & 13 deletions src/javascript/components/SpectraTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ SpectraTableEllipsisRow.propTypes = {
};

const SpectraTableHeader = ({
sampleCount,
selectedRowsSampleCount,
measurementLabels,
radianceOrIrradiance,
}) => {
Expand All @@ -47,7 +47,7 @@ const SpectraTableHeader = ({
return (
<thead>
<tr>
<th colSpan={sampleCount + 1} className="text-center">
<th colSpan={selectedRowsSampleCount + 1} className="text-center">
Spectral {radianceOrIrradiance} [
{radianceOrIrradianceSIUnit(radianceOrIrradiance)}]
</th>
Expand All @@ -63,23 +63,23 @@ 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,
}) => {
const [exponentialNotation, setExponentialNotation] = useState(true);
const [displayAllRows, setDisplayAllRows] = useState(false);

const spectraDownloadUrl = useMemo(
() => SpectraCSV({ radianceOrIrradiance, rows }),
[radianceOrIrradiance, rows]
() => SpectraCSV({ radianceOrIrradiance, selectedRows }),
[radianceOrIrradiance, selectedRows]
);

const handleExponentialNotation = () => {
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -142,7 +142,7 @@ const SpectraTable = ({
<div className="row table-row">
<table className="table table-sm table-striped table-bordered table-hover generate-csv-table mt-5 result-table">
<SpectraTableHeader
sampleCount={sampleCount}
selectedRowsSampleCount={selectedRowsSampleCount}
measurementLabels={measurementLabels}
radianceOrIrradiance={radianceOrIrradiance}
/>
Expand All @@ -156,7 +156,7 @@ const SpectraTable = ({
/>
))}
{displayEllipsisRow() && (
<SpectraTableEllipsisRow exampleRow={rows[0]} />
<SpectraTableEllipsisRow exampleRow={selectedRows[0]} />
)}
</tbody>
</table>
Expand All @@ -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,
};
Expand Down
Loading

0 comments on commit d9539d5

Please sign in to comment.