From 4cda7d7a90bb815338172262e68dfbaca13717ab Mon Sep 17 00:00:00 2001 From: PintoGideon Date: Wed, 27 Nov 2024 14:49:52 -0500 Subject: [PATCH] feat: Update csv rendering --- package.json | 1 + pnpm-lock.yaml | 18 ++- src/components/FeedTree/FeedTree.tsx | 2 +- .../Preview/displays/TextDisplay.tsx | 126 ++++++++++++------ src/types/index.d.ts | 1 + 5 files changed, 104 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 94385127a..2a7711374 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "micromark-extension-gfm": "^3.0.0", "niivue-react": "github:niivue/niivue-react", "pako": "^1.0.11", + "papaparse": "^5.4.1", "preval.macro": "^5.0.0", "query-string": "^9.1.0", "rc-tree": "^5.8.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4678904ea..a12e8e2a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -113,6 +113,9 @@ importers: pako: specifier: ^1.0.11 version: 1.0.11 + papaparse: + specifier: ^5.4.1 + version: 5.4.1 preval.macro: specifier: ^5.0.0 version: 5.0.0 @@ -3118,6 +3121,9 @@ packages: pako@2.1.0: resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==} + papaparse@5.4.1: + resolution: {integrity: sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==} + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -5103,7 +5109,7 @@ snapshots: dependencies: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.25.9 - '@babel/types': 7.25.4 + '@babel/types': 7.26.0 esutils: 2.0.3 '@babel/runtime-corejs3@7.25.9': @@ -6202,8 +6208,8 @@ snapshots: autoprefixer@10.4.20(postcss@8.4.47): dependencies: - browserslist: 4.23.3 - caniuse-lite: 1.0.30001653 + browserslist: 4.24.2 + caniuse-lite: 1.0.30001669 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.0 @@ -6389,7 +6395,7 @@ snapshots: core-js-compat@3.38.1: dependencies: - browserslist: 4.23.3 + browserslist: 4.24.2 core-js-pure@3.38.1: {} @@ -7507,6 +7513,8 @@ snapshots: pako@2.1.0: {} + papaparse@5.4.1: {} + parent-module@1.0.1: dependencies: callsites: 3.1.0 @@ -8801,7 +8809,7 @@ snapshots: '@webassemblyjs/wasm-parser': 1.12.1 acorn: 8.12.1 acorn-import-attributes: 1.9.5(acorn@8.12.1) - browserslist: 4.23.3 + browserslist: 4.24.2 chrome-trace-event: 1.0.4 enhanced-resolve: 5.17.1 es-module-lexer: 1.5.4 diff --git a/src/components/FeedTree/FeedTree.tsx b/src/components/FeedTree/FeedTree.tsx index dab940c6e..f46e1e598 100644 --- a/src/components/FeedTree/FeedTree.tsx +++ b/src/components/FeedTree/FeedTree.tsx @@ -26,7 +26,7 @@ const SCALE_EXTENT = { min: 0.1, max: 1.5 }; const INITIAL_SCALE = 1; const SEPARATION = { siblings: 0.75, - nonSiblings: 2.0, + nonSiblings: 0.75, }; const SVG_CLASS_NAME = "feed-tree__svg"; const GRAPH_CLASS_NAME = "feed-tree__graph"; diff --git a/src/components/Preview/displays/TextDisplay.tsx b/src/components/Preview/displays/TextDisplay.tsx index 8c498db9d..97753a73b 100644 --- a/src/components/Preview/displays/TextDisplay.tsx +++ b/src/components/Preview/displays/TextDisplay.tsx @@ -1,4 +1,5 @@ -import React, { Fragment } from "react"; +import Papa from "papaparse"; // Import PapaParse for CSV parsing +import React from "react"; import type { IFileBlob } from "../../../api/model"; import useSize from "../../FeedTree/useSize"; @@ -6,53 +7,102 @@ type AllProps = { selectedFile?: IFileBlob; }; -const TextDisplay: React.FunctionComponent = (props: AllProps) => { - const divRef = React.useRef(null); - const { selectedFile } = props; +const TextDisplay: React.FunctionComponent = ({ selectedFile }) => { + const divRef = React.useRef(null); useSize(divRef); + const [content, setContent] = React.useState(null); + const [csvData, setCsvData] = React.useState(null); + React.useEffect(() => { - const textDisplay = document.getElementById("text-display"); - - if (textDisplay) { - const displayContent = async () => { - if (selectedFile) { - const reader = new FileReader(); - reader.addEventListener( - "load", - () => { - textDisplay.innerText = reader.result as string; - }, - false, - ); - const blob = await selectedFile.getFileBlob(); - reader.readAsText(blob); - } - }; - - displayContent(); - } + const displayContent = async () => { + if (selectedFile) { + const blob = await selectedFile.getFileBlob(); + const reader = new FileReader(); + + reader.addEventListener( + "load", + () => { + const result = reader.result as string; + const fileName = selectedFile.data?.fname || ""; + const isCSVFile = fileName.endsWith(".csv"); + + if (isCSVFile) { + // Parse CSV + const parsed = Papa.parse(result, { header: false }); + setCsvData(parsed.data); + setContent(null); + } else { + setContent(result); + setCsvData(null); + } + }, + false, + ); + + reader.readAsText(blob); + } + }; + + displayContent(); }, [selectedFile]); return ( - -
- + {csvData ? ( + // Wrap table in a div to manage overflow +
+ + + {csvData.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + ))} + + ))} + +
+ {cell} +
+
+ ) : ( + // Render text content + 
-
- + > + {content} + + )} + ); }; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 4922ca99e..877b9814e 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -7,3 +7,4 @@ declare module "hammerjs"; declare module "preval.macro"; declare module "@cornerstonejs/dicom-image-loader"; declare module "dcmjs"; +declare module "papaparse";