feat: more UI-displayable file types for drop box + experiment results

package.json

@@ -16,21 +16,26 @@
     "jose": "^4.14.6",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "mammoth": "^1.6.0",
+    "papaparse": "^5.4.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.7",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-dropzone": "^14.2.3",
     "react-json-view": "^1.21.3",
+    "react-markdown": "^8.0.7",
     "react-pdf": "^6.2.2",
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.4",
     "react-router-prop-types": "^1.0.5",
     "react-syntax-highlighter": "^13.5.3",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.2",
+    "remark-gfm": "^3.0.1",
     "socket.io-client": "^4.7.2",
-    "victory": "^35.3.1"
+    "victory": "^35.3.1",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
   },
   "devDependencies": {
     "@babel/core": "^7.23.0",

src/components/DownloadButton.js

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { Button } from "antd";
 import PropTypes from "prop-types";
 
-const DownloadButton = ({ disabled, uri, children, type }) => {
+const DownloadButton = ({ disabled, uri, children, size, type }) => {
     const { accessToken } = useSelector((state) => state.auth);
 
     const onClick = useCallback(() => {
@@ -23,21 +23,23 @@ const DownloadButton = ({ disabled, uri, children, type }) => {
     }, [uri, accessToken]);
 
     return (
-        <Button key="download" icon="download" type={type} disabled={disabled} onClick={onClick}>
+        <Button key="download" icon="download" size={size} type={type} disabled={disabled} onClick={onClick}>
             {children === undefined ? "Download" : children}
         </Button>
     );
 };
 
 DownloadButton.defaultProps = {
     disabled: false,
+    size: "default",
     type: "default",
 };
 
 DownloadButton.propTypes = {
     disabled: PropTypes.bool,
     uri: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    size: PropTypes.oneOf(["small", "default", "large"]),
     type: PropTypes.oneOf(["primary", "ghost", "dashed", "danger", "link", "default"]),
 };
 

src/components/display/AudioDisplay.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+
+const AudioDisplay = ({blob}) => {
+    const audioRef = useRef(null);
+
+    useEffect(() => {
+        if (audioRef.current && blob) {
+            audioRef.current.src = URL.createObjectURL(blob);
+        }
+    }, [audioRef, blob]);
+
+    return <audio style={{ width: "100%" }} ref={audioRef} controls={true} />;
+};
+AudioDisplay.propTypes = {
+    blob: PropTypes.instanceOf(Blob),
+};
+
+export default AudioDisplay;

src/components/display/CsvDisplay.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import Papa from "papaparse";
+import { Alert, Table } from "antd";
+
+const TABLE_PAGINATION = { pageSize: 25 };
+const TABLE_SCROLL = { x: true };
+const DEFAULT_COLUMN = { key: "col" };
+
+const rowKey = (_, i) => `row${i}`;
+
+const CsvDisplay = ({ contents, loading }) => {
+    const [parsedData, setParsedData] = useState([]);
+    const [parseError, setParseError] = useState("");
+    const [isParsing, setIsParsing] = useState(true);  // Start in parsing state
+    const [columns, setColumns] = useState([DEFAULT_COLUMN]);
+
+    useEffect(() => {
+        if (contents === undefined || contents === null) return;
+
+        setIsParsing(true);
+        const rows = [];
+        Papa.parse(contents, {
+            worker: true,
+            step: (res) => {
+                if (res.errors?.length) {
+                    setParseError(res.errors[0].message);
+                }
+                rows.push(Object.fromEntries(res.data.map((v, i) => [`col${i}`, v])));
+            },
+            complete() {
+                setIsParsing(false);
+                if (!parseError) {
+                    setColumns(rows[0] ? Object.entries(rows[0]).map((_, i) => ({
+                        dataIndex: `col${i}`,
+                    })) : [DEFAULT_COLUMN]);
+                    setParsedData(rows);
+                }
+            },
+        });
+    }, [contents]);
+
+    if (parseError) {
+        return <Alert message="Parsing error" description={parseError} type="error" showIcon={true} />;
+    }
+
+    return (
+        <Table
+            size="small"
+            bordered={true}
+            showHeader={false}
+            pagination={TABLE_PAGINATION}
+            scroll={TABLE_SCROLL}
+            loading={loading || isParsing}
+            columns={columns}
+            dataSource={parsedData}
+            rowKey={rowKey}
+        />
+    );
+};
+CsvDisplay.propTypes = {
+    contents: PropTypes.string,
+    loading: PropTypes.bool,
+};
+
+export default CsvDisplay;

src/components/display/DocxDisplay.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useState } from "react";
+import mammoth from "mammoth/mammoth.browser";
+import { Alert, Skeleton, Spin } from "antd";
+import PropTypes from "prop-types";
+
+const MAMMOTH_OPTIONS = {
+    convertImage: mammoth.images.imgElement((image) =>
+        image.read("base64").then((buffer) => ({
+            src: `data:${image.contentType};base64,${buffer}`,
+            style: "max-width: 90%; height: auto; margin: 0.5em 5%;",
+        })),
+    ),
+};
+
+const DocxDisplay = ({ contents, loading }) => {
+    const [parsing, setParsing] = useState(false);
+    const [error, setError] = useState(null);
+    const [docHTML, setDocHTML] = useState(null);
+
+    useEffect(() => {
+        if (!contents) return;
+
+        (async () => {
+            setDocHTML(null);  // reset HTML contents if array buffer contents changes
+            setError(null);  // reset error if array buffer contents changes
+            setParsing(true);
+
+            try {
+                const res = await mammoth.convertToHtml({ arrayBuffer: contents }, MAMMOTH_OPTIONS);
+                res.messages.forEach((msg) => console.info("Received message while parsing .docx:", msg));
+                setDocHTML(res.value);
+            } catch (err) {
+                console.error("Received error while parsing .docx:", err);
+                setError(err);
+            } finally {
+                setParsing(false);
+            }
+        })();
+    }, [contents]);
+
+    const innerHTML = useMemo(() => ({ __html: docHTML ?? "<div />" }), [docHTML]);
+
+    const waiting = loading || parsing;
+
+    // noinspection JSValidateTypes
+    return <Spin spinning={waiting}>
+        {waiting && <Skeleton loading={true} />}
+        {error && (
+            <Alert showIcon={true} message="Parsing error" description={error} />
+        )}
+        <div dangerouslySetInnerHTML={innerHTML} />
+    </Spin>;
+};
+DocxDisplay.propTypes = {
+    contents: PropTypes.instanceOf(ArrayBuffer),
+    loading: PropTypes.bool,
+};
+
+export default DocxDisplay;