diff --git a/website/package-lock.json b/website/package-lock.json index 5a031b815..e7c7e058e 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -38,6 +38,7 @@ "rsuite": "^5.75.0", "unplugin-icons": "^0.21.0", "winston": "^3.17.0", + "xlsx": "^0.18.5", "zod": "^3.23.6" }, "devDependencies": { @@ -3877,6 +3878,15 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/agent-base": { "version": "7.1.1", "dev": true, @@ -4901,6 +4911,19 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chai": { "version": "5.1.2", "dev": true, @@ -5134,6 +5157,15 @@ "node": ">=6" } }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/collapse-white-space": { "version": "2.1.0", "license": "MIT", @@ -5278,6 +5310,18 @@ } } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "license": "Apache-2.0", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/cross-env": { "version": "7.0.3", "dev": true, @@ -7321,6 +7365,15 @@ "node": ">= 6" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "dev": true, @@ -12299,6 +12352,18 @@ "version": "1.0.3", "license": "BSD-3-Clause" }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "license": "Apache-2.0", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/stack-trace": { "version": "0.0.10", "license": "MIT", @@ -14004,6 +14069,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/word-wrap": { "version": "1.2.5", "dev": true, @@ -14148,6 +14231,27 @@ } } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml-name-validator": { "version": "5.0.0", "dev": true, diff --git a/website/package.json b/website/package.json index 5ab7623c6..0413f3cc2 100644 --- a/website/package.json +++ b/website/package.json @@ -21,9 +21,9 @@ "e2e:headed": "npx playwright test --headed" }, "dependencies": { - "@emotion/react": "^11.14.0", "@astrojs/mdx": "^4.0.1", "@astrojs/node": "^9.0.0", + "@emotion/react": "^11.14.0", "@headlessui/react": "^2.2.0", "@mui/material": "~5.14.20", "@svgr/core": "^8.1.0", @@ -51,6 +51,7 @@ "rsuite": "^5.75.0", "unplugin-icons": "^0.21.0", "winston": "^3.17.0", + "xlsx": "^0.18.5", "zod": "^3.23.6" }, "devDependencies": { diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx index daabfa1f5..049fdb9ea 100644 --- a/website/src/components/Submission/DataUploadForm.tsx +++ b/website/src/components/Submission/DataUploadForm.tsx @@ -2,6 +2,7 @@ import { isErrorFromAlias } from '@zodios/core'; import type { AxiosError } from 'axios'; import { DateTime } from 'luxon'; import { type ElementType, type FormEvent, useCallback, useEffect, useRef, useState } from 'react'; +import * as XLSX from 'xlsx'; import { dataUploadDocsUrl } from './dataUploadDocsUrl.ts'; import { getClientLogger } from '../../clientLogger.ts'; @@ -114,6 +115,28 @@ const DevExampleData = ({ ); }; +async function processFile(file: File): Promise { + switch (file.type) { + case 'application/vnd.ms-excel': + case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': + const arrayBuffer = await file.arrayBuffer(); + const workbook = XLSX.read(arrayBuffer, { type: 'array' }); + + // To consider: we're reading the whole file, maybe an issue if the file is huge? + + const firstSheetName = workbook.SheetNames[0]; + const sheet = workbook.Sheets[firstSheetName]; + const tsvContent = XLSX.utils.sheet_to_csv(sheet, { FS: '\t' }); + + const tsvBlob = new Blob([tsvContent], { type: 'text/tab-separated-values' }); + // TODO -> now if the underlying data changes, the converted file won't update + const tsvFile = new File([tsvBlob], 'converted.tsv', { type: 'text/tab-separated-values' }); + return tsvFile; + default: + return file; + } +} + const UploadComponent = ({ setFile, name, @@ -133,7 +156,10 @@ const UploadComponent = ({ const isClient = useClientFlag(); const setMyFile = useCallback( - (file: File | null) => { + async (file: File | null) => { + if (file !== null) { + file = await processFile(file); + } setFile(file); rawSetMyFile(file); }, @@ -158,7 +184,7 @@ const UploadComponent = ({ e.preventDefault(); setIsDragOver(false); const file = e.dataTransfer.files[0]; - setMyFile(file); + void setMyFile(file); }; useEffect(() => { @@ -169,7 +195,7 @@ const UploadComponent = ({ ?.slice(0, 1) .arrayBuffer() .catch(() => { - setMyFile(null); + void setMyFile(null); if (fileInputRef.current) { fileInputRef.current.value = ''; } @@ -223,7 +249,7 @@ const UploadComponent = ({ data-testid={name} onChange={(event) => { const file = event.target.files?.[0] || null; - setMyFile(file); + void setMyFile(file); }} ref={fileInputRef} />