[ENH] Implemented a component for uploading and previewing the data table

cypress/component/DataTablePreview.cy.tsx

@@ -0,0 +1,38 @@
+import DataTablePreview from '../../src/components/DataTablePreview';
+import { mockDataTable, mockInitialColumns } from '../../src/utils/mocks';
+
+const props = {
+  dataTable: mockDataTable,
+  columns: mockInitialColumns,
+};
+
+describe('DataTablePreview', () => {
+  it('should render the component correctly', () => {
+    cy.mount(<DataTablePreview dataTable={props.dataTable} columns={props.columns} />);
+    cy.get('[data-cy="data-table-preview"]').should('be.visible');
+  });
+  it('verifies the data table preview content', () => {
+    cy.mount(<DataTablePreview dataTable={props.dataTable} columns={props.columns} />);
+    cy.get('[data-cy="data-table-preview"] th:nth-child(2)').should('contain', 'age');
+
+    // Check the value of the 3rd column in the 3rd row
+    cy.get('[data-cy="data-table-preview"] tr:nth-child(3) td:nth-child(3)').should('contain', 'M');
+  });
+  it('should navigate to the 3rd page of the table and verify the content', () => {
+    cy.mount(<DataTablePreview dataTable={props.dataTable} columns={props.columns} />);
+
+    // Go the 3rd page of the table
+    cy.get('[data-cy="datatable-preview-pagination"]').within(() => {
+      cy.get('button[aria-label="Go to next page"]').click();
+      cy.get('button[aria-label="Go to next page"]').click();
+    });
+
+    cy.get('[data-cy="data-table-preview"] th:nth-child(3)').should('contain', 'sex');
+
+    // Check the value of the 2nd column in the 2nd row
+    cy.get('[data-cy="data-table-preview"] tr:nth-child(2) td:nth-child(2)').should(
+      'contain',
+      '65'
+    );
+  });
+});

cypress/component/FileUploader.cy.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import FileUploader from '../../src/components/FileUploader';
+
+const props = {
+  displayText: 'Upload your file (.csv)',
+  handleClickToUpload: () => {},
+  handleDrop: () => {},
+  handleDragOver: () => {},
+  handleFileUpload: () => {},
+  fileInputRef: React.createRef<HTMLInputElement>(),
+  allowedFileType: '.csv',
+};
+
+describe('FileUploader', () => {
+  it('should render the FileUploader component', () => {
+    cy.mount(
+      <FileUploader
+        displayText={props.displayText}
+        handleClickToUpload={props.handleClickToUpload}
+        handleDrop={props.handleDrop}
+        handleDragOver={props.handleDragOver}
+        handleFileUpload={props.handleFileUpload}
+        fileInputRef={props.fileInputRef}
+        allowedFileType={props.allowedFileType}
+      />
+    );
+    cy.get('[data-cy="upload-area"]').should('be.visible');
+    cy.get('[data-cy="upload-area"]').should('contain', 'Upload your file (.csv)');
+  });
+});

cypress/component/NavigationButton.cy.tsx

@@ -1,5 +1,5 @@
 import NavigationButton from '../../src/components/NavigationButton';
-import useStore from '../../src/stores/store';
+import useStore from '../../src/stores/view';
 
 const props = {
   label: 'Next',

cypress/component/UploadCard.cy.tsx

@@ -0,0 +1,75 @@
+import UploadCard from '../../src/components/UploadCard';
+
+const exampleFileName = 'ds003653_participant.tsv';
+const exampleFilePath = `examples/${exampleFileName}`;
+function MockPreviewComponent() {
+  return <div data-cy="some title-datatable">Preview Component</div>;
+}
+
+const props = {
+  title: 'some title',
+  allowedFileType: '.tsv',
+  uploadedFileName: exampleFileName,
+  onFileUpload: () => {},
+  previewComponent: <MockPreviewComponent />,
+};
+
+describe('UploadCard', () => {
+  it('should render the component correctly', () => {
+    cy.mount(
+      <UploadCard
+        title={props.title}
+        allowedFileType={props.allowedFileType}
+        uploadedFileName={props.uploadedFileName}
+        onFileUpload={props.onFileUpload}
+        previewComponent={props.previewComponent}
+      />
+    );
+    cy.get('[data-cy="some title-upload-card"]').should('be.visible');
+    cy.get('[data-cy="some title-upload-card"]').should('contain', 'some title');
+  });
+  beforeEach(() => {
+    cy.mount(
+      <UploadCard
+        title={props.title}
+        allowedFileType={props.allowedFileType}
+        uploadedFileName={props.uploadedFileName}
+        onFileUpload={props.onFileUpload}
+        previewComponent={props.previewComponent}
+      />
+    );
+
+    // Load the file from the fixtures folder
+    cy.fixture(exampleFilePath, 'binary').then((fileContent) => {
+      // Convert the binary content to a Blob
+      const blob = Cypress.Blob.binaryStringToBlob(fileContent, 'text/tab-separated-values');
+
+      // Create a File object from the Blob
+      const testFile = new File([blob], exampleFileName, { type: 'text/tab-separated-values' });
+
+      // Simulate clicking the upload area
+      cy.get('[data-cy="upload-area"]').click();
+
+      // Trigger the file upload by selecting the file
+      cy.get('input[type="file"]').then((input) => {
+        // Cast input[0] to HTMLInputElement to access the files property
+        const fileInput = input[0] as HTMLInputElement;
+
+        // Create a DataTransfer object to simulate the file drop
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(testFile);
+        fileInput.files = dataTransfer.files;
+
+        // Trigger the change event manually
+        fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+      });
+    });
+  });
+  it('should open the preview, and verify the data table preview component is rendered', () => {
+    cy.get('[data-cy="some title-card-uploaded-file-name"]').should('contain', exampleFileName);
+
+    cy.get('[data-cy="toggle-some title-card-preview"]').click();
+
+    cy.get('[data-cy="toggle-some title-card-preview"]').should('be.visible');
+  });
+});

cypress/fixtures/examples/ds003653_participant.tsv

@@ -0,0 +1,88 @@
+participant_id	age	sex	group	group_dx	number_comorbid_dx	medload	iq	session
+sub-718211	28.4	M	UD	MDD	0	0	117.66	1
+sub-718213	24.6	F	UD	MDD	0	0	109.08	1
+sub-718216	43.6	M	UD	PDD	1	2	112.98	1
+sub-718217	19.1	F	UD	PDD	3	0	114.54	1
+sub-718220	38.9	F	UD	PDD	1	6	107.52	1
+sub-718221	32.5	F	UD	PDD	4	0	99.72	1
+sub-718315	19.7	F	HC	HC	0	0	104.4	1
+sub-718318	23	F	HC	HC	0	0	98.16	1
+sub-718320	25.9	M	HC	HC	0	0	111.42	1
+sub-718321	31.2	F	HC	HC	0	0	108.3	1
+sub-718322	38.2	F	HC	HC	0	0	109.86	1
+sub-718323	36.3	F	HC	HC	0	0	111.42	1
+sub-718518	33.8	F	UD	MDD	1	0	108.3	1
+sub-719211	28.3	M	UD	MDD	1	1	105.96	1
+sub-719215	29.1	F	UD	MDD	1	1	121.56	1
+sub-719222	25.6	F	UD	PDD	3	0	110.64	1
+sub-719224	43.2	F	UD	MDD	3	0	113.76	1
+sub-719225	24.4	F	UD	PDD	5	1	111.42	1
+sub-719226	36.1	F	UD	MDD	1	4	114.54	1
+sub-719231	21.8	F	UD	PDD	0	2	119.22	1
+sub-719232	26.5	F	UD	MDD	3	3	109.86	1
+sub-719238	20.1	F	UD	MDD	2	3	109.08	1
+sub-719241	32.2	F	UD	MDD	4	1	121.56	1
+sub-719245	44	M	UD	PDD	1	0	117.66	1
+sub-719247	24.1	F	UD	MDD	2	2	110.64	1
+sub-719311	26	M	HC	HC	0	0	104.4	1
+sub-719312	36.4	F	HC	HC	0	0	100.5	1
+sub-719313	25.5	M	HCconvertedMDD	HCconvertedMDD	0	0	111.42	1
+sub-719315	26.9	F	HC	HC	0	0	107.52	1
+sub-719316	36.8	F	HC	HC	0	0	111.42	1
+sub-719318	23.4	F	HC	HC	0	0	109.08	1
+sub-719319	30.4	M	HC	HC	0	0	107.52	1
+sub-719322	22.2	M	HC	HC	0	0	108.3	1
+sub-719326	27.6	F	HC	HC	0	0	113.76	1
+sub-719327	29.3	F	HC	HC	0	0	112.98	1
+sub-719329	19.3	F	HC	HC	0	0	93.48	1
+sub-719330	41.2	F	HC	HC	0	0	101.28	1
+sub-719331	21.4	F	HC	HC	0	0	96.6	1
+sub-719332	26.7	M	HC	HC	0	0	115.32	1
+sub-719334	22.9	F	HC	HC	0	0	103.62	1
+sub-719335	39.5	F	HC	HC	0	0	102.84	1
+sub-719337	21.3	F	HC	HC	0	0	95.82	1
+sub-719339	22.4	F	HC	HC	0	0	105.18	1
+sub-719341	34.1	F	HC	HC	0	0	102.06	1
+sub-719345	27.5	F	HC	HC	0	0	98.16	1
+sub-719348	33.6	F	HC	HC	0	0	102.06	1
+sub-719349	26.7	M	HC	HC	0	0	105.96	1
+sub-719350	27	F	HC	HC	0	0	91.92	1
+sub-719351	32.8	M	HC	HC	0	0	114.54	1
+sub-719354	26.9	F	HC	HC	0	0	105.96	1
+sub-719355	31.4	M	HC	HC	0	0	109.86	1
+sub-719356	36.8	F	HC	HC	0	0	103.62	1
+sub-719358	22.6	F	HC	HC	0	0	107.52	1
+sub-719360	28.2	F	HC	HC	0	0	102.84	1
+sub-719362	31.4	M	HC	HC	0	0	105.96	1
+sub-719364	19.6	F	HC	HC	0	0	111.42	1
+sub-719369	25.5	F	HC	HC	0	0	108.3	1
+sub-719370	44.3	F	HC	HC	0	0	108.3	1
+sub-719371	30	F	HC	HC	0	0	113.76	1
+sub-719511	31	F	UD	MDD	1	1	109.08	1
+sub-719515	31.1	F	UD	MDD	1	2	120.78	1
+sub-719518	27.7	F	UD	MDD	2	3	118.44	1
+sub-719522	32.1	F	UD	MDD	1	2	119.22	1
+sub-719523	21.1	F	UD	PDD	2	0	100.5	1
+sub-719524	22.7	M	UD	MDD	0	0	108.3	1
+sub-719525	23.6	F	UD	MDD	0	1	115.32	1
+sub-719526	24.4	F	UD	MDD	1	0	102.84	1
+sub-719527	38.9	F	UD	PDD	0	3	116.88	1
+sub-719528	21.6	M	UD	MDD	0	0	109.86	1
+sub-719530	33.6	F	UD	MDD	0	0	118.44	1
+sub-719531	34.8	F	UD	PDD	2	0	102.06	1
+sub-719535	29.1	M	UD	MDD	0	0	107.52	1
+sub-719536	23.7	M	UD	MDD	0	1	88.8	1
+sub-720219	28.4	M	UD	PDD	2	3	110.64	1
+sub-720220	22.3	F	UD	PDD	3	4	99.72	1
+sub-720311	25.1	F	HC	HC	0	0	114.54	1
+sub-720312	26.8	M	HC	HC	0	0	122.34	1
+sub-720314	20.4	F	HC	HC	0	0	112.98	1
+sub-720316	21.4	M	HC	HC	0	0	106.74	1
+sub-720317	33.1	F	HC	HC	0	0	102.06	1
+sub-720318	30.3	F	HC	HC	0	0	110.64	1
+sub-720319	28.8	F	HC	HC	0	0	105.96	1
+sub-720320	31.1	F	HC	HC	0	0	115.32	1
+sub-720511	21.9	M	UD	MDD	0	1	102.84	1
+sub-720515	22	F	UD	MDD	2	1	109.86	1
+sub-720516	38.8	F	UD	MDD	1	4	105.18	1
+sub-720517	29.8	F	UD	MDD	1	0	95.82	1

cypress/fixtures/examples/mock.tsv

@@ -0,0 +1,13 @@
+participant_id	age	sex
+sub-718211	28.4	M
+sub-718213	24.6	F
+sub-718216	43.6	M
+sub-718217	28.4	F
+sub-718218	72.1	M
+sub-718219	56.2	M
+sub-718220	23	M
+sub-718221	22	F
+sub-718222	21	M
+sub-718223	45	F
+sub-718224	34	M
+sub-718225	65	M

package.json

@@ -21,9 +21,11 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.1.1",
+    "@mui/icons-material": "^6.4.4",
     "@mui/material": "^6.1.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "uuid": "^11.0.5",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/App.tsx

@@ -1,16 +1,16 @@
-import useStore from './stores/store';
+import useViewStore from './stores/view';
 import Landing from './components/Landing';
 import Upload from './components/Upload';
 import ColumnAnnotation from './components/ColumnAnnotation';
 import ValueAnnotation from './components/ValueAnnotation';
 import Download from './components/Download';
 
 function App() {
-  const currentView = useStore((state) => state.currentView);
+  const currentView = useViewStore((state) => state.currentView);
 
   const renderView = () => {
     switch (currentView) {
-      case 'ladning':
+      case 'landing':
         return <Landing />;
       case 'upload':
         return <Upload />;