Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

518 extraction phase can we make the list of studies more spreadsheet like #825

Merged
merged 17 commits into from
Sep 23, 2024
Merged

518 extraction phase can we make the list of studies more spreadsheet like #825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
a2cbc04
feat: added wireframes for extraction
nicoalee Sep 7, 2024
c5ccc42
Merge branch 'master' into 518-extraction-phase-can-we-make-the-list-…
nicoalee Sep 10, 2024
2e5aac8
feat: added table
nicoalee Sep 10, 2024
574bdbe
feat: implemented table and table ordering during study edit
nicoalee Sep 17, 2024
0d73686
feat: preserve table state in session storage and fix unit tests
nicoalee Sep 18, 2024
7e07a12
Merge branch 'master' into 518-extraction-phase-can-we-make-the-list-…
nicoalee Sep 18, 2024
a4b693f
feat: finished integration tests
nicoalee Sep 18, 2024
21103b4
Merge branch 'master' into 518-extraction-phase-can-we-make-the-list-…
nicoalee Sep 19, 2024
b0f3394
fix: table pagination resets on data update
nicoalee Sep 19, 2024
ca57bb3
Merge branch '518-extraction-phase-can-we-make-the-list-of-studies-mo…
nicoalee Sep 19, 2024
174645a
feat: updated table with feedback
nicoalee Sep 19, 2024
19ad12f
Merge branch '518-extraction-phase-can-we-make-the-list-of-studies-mo…
nicoalee Sep 19, 2024
e148f63
fix: integration test
nicoalee Sep 20, 2024
b373fae
fix: address feedback
nicoalee Sep 23, 2024
0ff3f4a
fix: extraction tests
nicoalee Sep 23, 2024
706ac08
fix: merge conflicts
nicoalee Sep 23, 2024
fc22816
fix: tests
nicoalee Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 58 additions & 60 deletions compose/neurosynth-frontend/cypress/e2e/workflows/Extraction/ExtractionTable.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,26 +95,26 @@ describe('ExtractionTable', () => {
cy.get('tbody > tr').should('have.length', 1);
});

it('should filter the table by doi', () => {
cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture?.response?.body as StudysetReturn;
const studysetStudies = studyset.studies as StudyReturn[];
cy.get('input').eq(4).click();
cy.get(`input`)
.eq(4)
.type(studysetStudies[0].doi || '');
});

cy.get('tbody > tr').should('have.length', 1);
});
// it('should filter the table by doi', () => {
// cy.wait('@studysetFixture').then((studysetFixture) => {
// const studyset = studysetFixture?.response?.body as StudysetReturn;
// const studysetStudies = studyset.studies as StudyReturn[];
// cy.get('input').eq(4).click();
// cy.get(`input`)
// .eq(4)
// .type(studysetStudies[0].doi || '');
// });

// cy.get('tbody > tr').should('have.length', 1);
// });

it('should filter the table by pmid', () => {
cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture?.response?.body as StudysetReturn;
const studysetStudies = studyset.studies as StudyReturn[];
cy.get('input').eq(5).click();
cy.get('input').eq(4).click();
cy.get(`input`)
.eq(5)
.eq(4)
.type(studysetStudies[0].pmid || '');
});

Expand Down Expand Up @@ -181,7 +181,7 @@ describe('ExtractionTable', () => {

it('should change the study status', () => {
// ARRANGE
cy.get('tbody > tr').eq(0).get('td').eq(6).as('getFirstRowStudyStatusCol');
cy.get('tbody > tr').eq(0).get('td').eq(5).as('getFirstRowStudyStatusCol');
cy.get('@getFirstRowStudyStatusCol').within(() => {
cy.get('button').eq(0).should('have.class', 'MuiButton-contained');
});
Expand Down Expand Up @@ -370,49 +370,49 @@ describe('ExtractionTable', () => {
});
});

it('should sort by doi desc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
// it('should sort by doi desc', () => {
// cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();

cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture.response?.body as StudysetReturn;
const studies = [...(studyset.studies || [])] as StudyReturn[];
// cy.wait('@studysetFixture').then((studysetFixture) => {
// const studyset = studysetFixture.response?.body as StudysetReturn;
// const studies = [...(studyset.studies || [])] as StudyReturn[];

const sortedStudies = studies.sort((a, b) =>
(b.doi as string).localeCompare(a.doi as string)
);
// const sortedStudies = studies.sort((a, b) =>
// (b.doi as string).localeCompare(a.doi as string)
// );

console.log(sortedStudies);
// console.log(sortedStudies);

cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td').eq(4).should('have.text', sortedStudies[index].doi);
});
});
});
});
it('should sort by doi asc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');
// cy.get('tbody > tr').each((tr, index) => {
// cy.wrap(tr).within(() => {
// cy.get('td').eq(4).should('have.text', sortedStudies[index].doi);
// });
// });
// });
// });
// it('should sort by doi asc', () => {
// cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
// cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
// cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture.response?.body as StudysetReturn;
const studies = [...(studyset.studies || [])] as StudyReturn[];
// cy.wait('@studysetFixture').then((studysetFixture) => {
// const studyset = studysetFixture.response?.body as StudysetReturn;
// const studies = [...(studyset.studies || [])] as StudyReturn[];

const sortedStudies = studies.sort((a, b) =>
(a.doi as string).localeCompare(b.doi as string)
);
// const sortedStudies = studies.sort((a, b) =>
// (a.doi as string).localeCompare(b.doi as string)
// );

cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td').eq(4).should('have.text', sortedStudies[index].doi);
});
});
});
});
// cy.get('tbody > tr').each((tr, index) => {
// cy.wrap(tr).within(() => {
// cy.get('td').eq(4).should('have.text', sortedStudies[index].doi);
// });
// });
// });
// });

it('should sort by pmid desc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();

cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture.response?.body as StudysetReturn;
Expand All @@ -424,21 +424,19 @@ describe('ExtractionTable', () => {
})
);

console.log(sortedStudies);

cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td')
.eq(5)
.eq(4)
.should('have.text', sortedStudies[index].pmid ?? '');
});
});
});
});

it('should sort by pmid asc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(4).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
Expand All @@ -454,15 +452,15 @@ describe('ExtractionTable', () => {
cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td')
.eq(5)
.eq(4)
.should('have.text', sortedStudies[index].pmid ?? '');
});
});
});
});

it('should sort by status desc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(6).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();

cy.wait('@projectFixture').then((projectFixture) => {
const project = projectFixture?.response?.body as INeurosynthProjectReturn;
Expand All @@ -487,7 +485,7 @@ describe('ExtractionTable', () => {
cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td')
.eq(6)
.eq(5)
.within(() => {
const studyStatus = sortedStudies[index].status;
const buttonIndex =
Expand Down Expand Up @@ -518,8 +516,8 @@ describe('ExtractionTable', () => {
});

it('should sort by status asc', () => {
cy.get('[data-testid="ArrowDownwardIcon"]').eq(6).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(6).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(5).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@projectFixture').then((projectFixture) => {
Expand All @@ -545,7 +543,7 @@ describe('ExtractionTable', () => {
cy.get('tbody > tr').each((tr, index) => {
cy.wrap(tr).within(() => {
cy.get('td')
.eq(6)
.eq(5)
.within(() => {
const studyStatus = sortedStudies[index].status;
const buttonIndex =
Expand Down
87 changes: 49 additions & 38 deletions compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import { useNavigate } from 'react-router-dom';
import { EExtractionStatus } from '../ExtractionPage';
import styles from './ExtractionTable.module.css';
import { ExtractionTableAuthorCell, ExtractionTableAuthorHeader } from './ExtractionTableAuthor';
import { ExtractionTableDOICell, ExtractionTableDOIHeader } from './ExtractionTableDOI';
import ExtractionTableFilterInput from './ExtractionTableFilterInput';
import { ExtractionTableJournalCell, ExtractionTableJournalHeader } from './ExtractionTableJournal';
import { ExtractionTableNameCell, ExtractionTableNameHeader } from './ExtractionTableName';
Expand Down Expand Up @@ -106,9 +105,9 @@ const ExtractionTable: React.FC = () => {
return [
columnHelper.accessor(({ year }) => (year ? String(year) : ''), {
id: 'year',
size: 5,
minSize: 5,
maxSize: 5,
size: 70,
minSize: 70,
maxSize: 70,
cell: ExtractionTableYearCell,
header: ExtractionTableYearHeader,
enableSorting: true,
Expand All @@ -121,9 +120,9 @@ const ExtractionTable: React.FC = () => {
columnHelper.accessor('name', {
id: 'name',
cell: ExtractionTableNameCell,
size: 25,
minSize: 25,
maxSize: 25,
size: 500,
minSize: 500,
maxSize: 500,
header: ExtractionTableNameHeader,
enableSorting: true,
sortingFn: 'text',
Expand All @@ -134,9 +133,9 @@ const ExtractionTable: React.FC = () => {
}),
columnHelper.accessor('authors', {
id: 'authors',
size: 20,
minSize: 20,
maxSize: 20,
size: 300,
minSize: 300,
maxSize: 300,
enableSorting: true,
enableColumnFilter: true,
sortingFn: 'text',
Expand All @@ -149,9 +148,9 @@ const ExtractionTable: React.FC = () => {
}),
columnHelper.accessor('publication', {
id: 'journal',
size: 15,
minSize: 15,
maxSize: 15,
size: 100,
minSize: 100,
maxSize: 100,
enableSorting: true,
enableColumnFilter: true,
cell: ExtractionTableJournalCell,
Expand All @@ -160,26 +159,26 @@ const ExtractionTable: React.FC = () => {
filterVariant: 'journal-autocomplete',
},
}),
columnHelper.accessor('doi', {
id: 'doi',
size: 15,
minSize: 15,
maxSize: 15,
sortingFn: 'alphanumeric',
enableSorting: true,
enableColumnFilter: true,
filterFn: 'includesString',
cell: ExtractionTableDOICell,
header: ExtractionTableDOIHeader,
meta: {
filterVariant: 'text',
},
}),
// columnHelper.accessor('doi', {
// id: 'doi',
// size: 10,
// minSize: 10,
// maxSize: 10,
// sortingFn: 'alphanumeric',
// enableSorting: true,
// enableColumnFilter: true,
// filterFn: 'includesString',
// cell: ExtractionTableDOICell,
// header: ExtractionTableDOIHeader,
// meta: {
// filterVariant: 'text',
// },
// }),
columnHelper.accessor('pmid', {
id: 'pmid',
size: 10,
minSize: 10,
maxSize: 10,
size: 100,
minSize: 100,
maxSize: 100,
enableColumnFilter: true,
filterFn: 'includesString',
cell: ExtractionTablePMIDCell,
Expand All @@ -192,9 +191,9 @@ const ExtractionTable: React.FC = () => {
}),
columnHelper.accessor('status', {
id: 'status',
size: 10,
minSize: 10,
maxSize: 10,
size: 120,
minSize: 120,
maxSize: 120,
enableSorting: true,
cell: ExtractionTableStatusCell,
filterFn: (row, columnId, filterValue: EExtractionStatus | null) => {
Expand Down Expand Up @@ -270,20 +269,25 @@ const ExtractionTable: React.FC = () => {
onChange={handlePaginationChangeMuiPaginator}
page={pagination.pageIndex + 1}
/>
<Typography variant="h5">Total: {data.length} studies</Typography>
</Box>
<TableContainer sx={{ marginBottom: '2rem' }}>
<Table
size="small"
sx={{ tableLayout: 'fixed', width: '100%', minWidth: '1300px' }}
sx={{ tableLayout: 'fixed', width: 'fit-content', minWidth: '1200px' }}
>
<TableHead>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableCell
key={header.id}
sx={{ width: `${header.column.getSize()}%` }}
sx={{
width:
header.column.id === 'name'
? '100%'
: `${header.column.getSize()}px`,
verticalAlign: 'bottom',
}}
>
<Box>
{flexRender(
Expand Down Expand Up @@ -416,7 +420,14 @@ const ExtractionTable: React.FC = () => {
</Box>
<Box>
<Typography sx={{ whiteSpace: 'nowrap' }}>
Viewing {table.getFilteredRowModel().rows.length} / {data.length}
{columnFilters.length > 0 ? (
<Typography>
Viewing {table.getFilteredRowModel().rows.length} /{' '}
{data.length}
</Typography>
) : (
<Typography>Total: {data.length} studies</Typography>
)}
</Typography>
</Box>
</Box>
Expand Down
12 changes: 9 additions & 3 deletions compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,25 @@ export const ExtractionTableAuthorHeader: React.FC<
}
}}
>
<ArrowDownward sx={{ color: 'lightgray' }} />
<ArrowDownward
sx={{ width: '0.9em', height: '0.9em', color: 'lightgray' }}
/>
</IconButton>
</Tooltip>
) : isSorted === 'asc' ? (
<IconButton size="small" onClick={() => table.resetSorting()}>
<ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
<ArrowUpwardIcon
sx={{ width: '0.9em', height: '0.9em', color: 'secondary.main' }}
/>
</IconButton>
) : (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'authors', desc: false }])}
>
<ArrowDownward sx={{ color: 'secondary.main' }} />
<ArrowDownward
sx={{ width: '0.9em', height: '0.9em', color: 'secondary.main' }}
/>
</IconButton>
)}
</Box>
Expand Down
Loading
Loading