feat: Update csv rendering

FNNDSC · Nov 27, 2024 · 4cda7d7 · 4cda7d7
1 parent e9e65af
commit 4cda7d7
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 44 deletions.
diff --git 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
diff --git 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
@@ -1,58 +1,108 @@
-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";
 
 type AllProps = {
   selectedFile?: IFileBlob;
 };
 
-const TextDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
-  const divRef = React.useRef(null);
-  const { selectedFile } = props;
+const TextDisplay: React.FunctionComponent<AllProps> = ({ selectedFile }) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
   useSize(divRef);
 
+  const [content, setContent] = React.useState<string | null>(null);
+  const [csvData, setCsvData] = React.useState<string[][] | null>(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 (
-    <Fragment>
-      <div
-        ref={divRef}
-        style={{
-          display: "block",
-          overflowY: "scroll",
-          width: "100%",
-        }}
-      >
-        <span
-          id="text-display"
+    <div
+      ref={divRef}
+      style={{
+        display: "block",
+        overflow: "hidden", // Hide scrollbars on the outer container
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      {csvData ? (
+        // Wrap table in a div to manage overflow
+        <div
+          style={{
+            overflow: "auto", // Enable vertical and horizontal scrolling
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <table
+            style={{
+              borderCollapse: "collapse",
+              width: "max-content", // Allow table to take natural width
+              minWidth: "100%", // Ensure table fills the container width initially
+            }}
+          >
+            <tbody>
+              {csvData.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((cell, cellIndex) => (
+                    <td
+                      key={cellIndex}
+                      style={{ border: "1px solid #ccc", padding: "4px" }}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        // Render text content
+        <pre
           style={{
             fontFamily: "monospace",
             color: "white",
+            whiteSpace: "pre-wrap",
+            margin: 0,
           }}
-        />
-      </div>
-    </Fragment>
+        >
+          {content}
+        </pre>
+      )}
+    </div>
   );
 };
 

diff --git 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";