Skip to content

Commit

Permalink
feat: updated table with feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicoalee
nicoalee committed Sep 19, 2024
1 parent b0f3394 commit 174645a
Show file tree
Hide file tree
Showing 12 changed files with 323 additions and 299 deletions.
51 changes: 22 additions & 29 deletions compose/neurosynth-frontend/cypress/e2e/workflows/Extraction/ExtractionTable.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,8 +205,7 @@ describe('ExtractionTable', () => {
});

it('should sort by year desc', () => {
cy.contains('Year').click();
cy.get('[data-testid="ArrowDownwardIcon"]').should('exist');
cy.get('[data-testid="ArrowDownwardIcon"]').eq(0).click();

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

it('should sort by year asc', () => {
cy.contains('Year').click();
cy.get('[data-testid="ArrowDownwardIcon"]').click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(0).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(0).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
Expand All @@ -250,8 +249,7 @@ describe('ExtractionTable', () => {
});

it('should sort by name asc', () => {
cy.contains('Name').click();
cy.get('[data-testid="ArrowDownwardIcon"]').should('exist');
cy.get('[data-testid="ArrowDownwardIcon"]').eq(1).click();

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

it('should sort by name desc', () => {
cy.contains('Name').click();
cy.get('[data-testid="ArrowDownwardIcon"]').click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(1).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(1).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
Expand All @@ -293,8 +291,7 @@ describe('ExtractionTable', () => {
});

it('should sort by authors desc', () => {
cy.contains('Authors').click();
cy.get('[data-testid="ArrowDownwardIcon"]').should('exist');
cy.get('[data-testid="ArrowDownwardIcon"]').eq(2).click();

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

it('should sort by authors asc', () => {
cy.contains('Authors').click();
cy.get('[data-testid="ArrowDownwardIcon"]').click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(2).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(2).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
Expand All @@ -334,8 +331,7 @@ describe('ExtractionTable', () => {
});

it('should sort by journal desc', () => {
cy.contains('Journal').click();
cy.get('[data-testid="ArrowDownwardIcon"]').should('exist');
cy.get('[data-testid="ArrowDownwardIcon"]').eq(3).click();

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

it('should sort by journal desc', () => {
cy.contains('Journal').click();
cy.get('[data-testid="ArrowDownwardIcon"]').click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(3).click();
cy.get('[data-testid="ArrowDownwardIcon"]').eq(3).click();
cy.get('[data-testid="ArrowUpwardIcon"]').should('exist');

cy.wait('@studysetFixture').then((studysetFixture) => {
Expand All @@ -375,8 +371,7 @@ describe('ExtractionTable', () => {
});

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

cy.wait('@studysetFixture').then((studysetFixture) => {
const studyset = studysetFixture.response?.body as StudysetReturn;
Expand All @@ -396,8 +391,8 @@ describe('ExtractionTable', () => {
});
});
it('should sort by doi asc', () => {
cy.contains('DOI').click();
cy.get('[data-testid="ArrowDownwardIcon"]').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 @@ -417,8 +412,7 @@ describe('ExtractionTable', () => {
});

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

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

it('should sort by pmid asc', () => {
cy.contains('PMID').click();
cy.get('[data-testid="ArrowDownwardIcon"]').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('@studysetFixture').then((studysetFixture) => {
Expand All @@ -468,8 +462,7 @@ describe('ExtractionTable', () => {
});

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

cy.wait('@projectFixture').then((projectFixture) => {
const project = projectFixture?.response?.body as INeurosynthProjectReturn;
Expand Down Expand Up @@ -525,8 +518,8 @@ describe('ExtractionTable', () => {
});

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

cy.wait('@projectFixture').then((projectFixture) => {
Expand Down Expand Up @@ -583,7 +576,7 @@ describe('ExtractionTable', () => {
});
});

describe.only('pagination', () => {
describe('pagination', () => {
beforeEach(() => {
cy.fixture('studyset').then((studyset) => {
// as we are artificially creating new studies below, the out of sync popup wil appear. That's expected and
Expand Down
5 changes: 2 additions & 3 deletions compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
.completed {
background-color: #e5ffe5;
background-color: #f8fff8;
}

.savedforlater {
background-color: #effbff;
background-color: #f1fbff;
}

.uncategorized {
/* background-color: #ffffeb; */
background-color: white;
}
68 changes: 31 additions & 37 deletions compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableAuthor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Box, IconButton, Link, Tooltip, Typography } from '@mui/material';
import { CellContext, HeaderContext } from '@tanstack/react-table';
import { IExtractionTableStudy } from './ExtractionTable';
import { ArrowDownward } from '@mui/icons-material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import { Box, IconButton, Tooltip, Typography } from '@mui/material';
import { CellContext, HeaderContext } from '@tanstack/react-table';
import { IExtractionTableStudy } from './ExtractionTable';

export const ExtractionTableAuthorCell: React.FC<CellContext<IExtractionTableStudy, string>> = (
props
Expand All @@ -18,41 +18,35 @@ export const ExtractionTableAuthorHeader: React.FC<

return (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="Sort by author" placement="top">
<Typography
sx={{ ':hover': { cursor: 'pointer' } }}
underline="hover"
variant="h6"
component={Link}
onClick={() => {
if (!!isSorted) {
table.resetSorting();
} else {
table.setSorting([{ id: 'authors', desc: true }]);
}
}}
<Typography sx={{ marginRight: '4px' }} variant="h6">
Authors
</Typography>
{!isSorted ? (
<Tooltip title="Sort by author" placement="top">
<IconButton
size="small"
onClick={() => {
if (!!isSorted) {
table.resetSorting();
} else {
table.setSorting([{ id: 'authors', desc: true }]);
}
}}
>
<ArrowDownward sx={{ color: 'lightgray' }} />
</IconButton>
</Tooltip>
) : isSorted === 'asc' ? (
<IconButton size="small" onClick={() => table.resetSorting()}>
<ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
</IconButton>
) : (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'authors', desc: false }])}
>
Authors
</Typography>
</Tooltip>
{!!isSorted && (
<>
{isSorted === 'asc' ? (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'authors', desc: true }])}
>
<ArrowUpwardIcon />
</IconButton>
) : (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'authors', desc: false }])}
>
<ArrowDownward />
</IconButton>
)}
</>
<ArrowDownward sx={{ color: 'secondary.main' }} />
</IconButton>
)}
</Box>
);
Expand Down
68 changes: 31 additions & 37 deletions compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableDOI.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Box, IconButton, Link, Tooltip, Typography } from '@mui/material';
import { CellContext, HeaderContext } from '@tanstack/react-table';
import { IExtractionTableStudy } from './ExtractionTable';
import { ArrowDownward } from '@mui/icons-material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import { Box, IconButton, Tooltip, Typography } from '@mui/material';
import { CellContext, HeaderContext } from '@tanstack/react-table';
import { IExtractionTableStudy } from './ExtractionTable';

export const ExtractionTableDOICell: React.FC<CellContext<IExtractionTableStudy, string>> = (
props
Expand All @@ -22,41 +22,35 @@ export const ExtractionTableDOIHeader: React.FC<HeaderContext<IExtractionTableSt
const isSorted = column.getIsSorted();
return (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="Sort by doi" placement="top">
<Typography
sx={{ ':hover': { cursor: 'pointer' } }}
underline="hover"
variant="h6"
component={Link}
onClick={() => {
if (!!isSorted) {
table.resetSorting();
} else {
table.setSorting([{ id: 'doi', desc: true }]);
}
}}
<Typography sx={{ marginRight: '4px' }} variant="h6">
DOI
</Typography>
{!isSorted ? (
<Tooltip title="Sort by DOI" placement="top">
<IconButton
size="small"
onClick={() => {
if (!!isSorted) {
table.resetSorting();
} else {
table.setSorting([{ id: 'doi', desc: true }]);
}
}}
>
<ArrowDownward sx={{ color: 'lightgray' }} />
</IconButton>
</Tooltip>
) : isSorted === 'asc' ? (
<IconButton size="small" onClick={() => table.resetSorting()}>
<ArrowUpwardIcon sx={{ color: 'secondary.main' }} />
</IconButton>
) : (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'doi', desc: false }])}
>
DOI
</Typography>
</Tooltip>
{!!isSorted && (
<>
{isSorted === 'asc' ? (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'doi', desc: true }])}
>
<ArrowUpwardIcon />
</IconButton>
) : (
<IconButton
size="small"
onClick={() => table.setSorting([{ id: 'doi', desc: false }])}
>
<ArrowDownward />
</IconButton>
)}
</>
<ArrowDownward sx={{ color: 'secondary.main' }} />
</IconButton>
)}
</Box>
);
Expand Down
Loading

0 comments on commit 174645a

Please sign in to comment.