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

cypress/component/DataTable.cy.tsx

@@ -0,0 +1,70 @@
+import DataTable from '../../src/components/DataTable';
+
+const exampleFileName = 'ds003653_participant.tsv';
+const exampleFilePath = `examples/${exampleFileName}`;
+
+describe('DataTable', () => {
+  it('should render the component correctly', () => {
+    cy.mount(<DataTable />);
+    cy.get('[data-cy="data-table-card"]').should('be.visible');
+    cy.get('[data-cy="data-table-card"]').should(
+      'contain',
+      'Upload your tabular phenotypic file (.tsv format)'
+    );
+  });
+  beforeEach(() => {
+    cy.mount(<DataTable />);
+
+    // 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 table content', () => {
+    cy.get('[data-cy="uploaded-datatable-file-name"]').should('contain', exampleFileName);
+
+    cy.get('[data-cy="toggle-datatable-preview"]').click();
+
+    cy.get('[data-cy="data-table"]').should('be.visible');
+
+    cy.get('[data-cy="data-table"] th:nth-child(9)').should('contain', 'session');
+
+    // Check the value of the 5th column in the 2nd row
+    cy.get('[data-cy="data-table"] tr:nth-child(2) td:nth-child(5)').should('contain', 'MDD');
+  });
+  it('should navigate to the 3rd page of the table and verify the content', () => {
+    cy.get('[data-cy="toggle-datatable-preview"]').click();
+
+    // 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"] th:nth-child(2)').should('contain', 'age');
+
+    // Check the value of the 5th column in the 2nd row
+    cy.get('[data-cy="data-table"] tr:nth-child(2) td:nth-child(5)').should('contain', 'HC');
+  });
+});

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

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": {