Skip to content

Commit

Permalink
Refactoring (and some linting)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cinyecai
cinyecai committed Nov 19, 2024
1 parent ea29b65 commit 6bb54b3
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 57 deletions.
54 changes: 15 additions & 39 deletions src/components/data_search/DatasetFilterList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,8 @@ import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import { Button, Typography } from '@mui/material';
import { Checkbox } from '@mui/material';
import { flatten, uniq, compact, capitalize, orderBy } from 'lodash';
import externalAccessIcon from '../../images/external_access.svg';
import openAccessIcon from '../../images/open_access.svg';
import controlledAccessIcon from '../../images/controlled_access.svg';
import {flatten, uniq, compact, orderBy} from 'lodash';
import {getAccessManagementSummary} from '../../types/model';

export const FilterItemHeader = (props) => {
const { title, headerStyle = { fontFamily: 'Montserrat', fontWeight: '600', marginTop: '1em' } } = props;
Expand All @@ -23,30 +21,7 @@ export const FilterItemHeader = (props) => {
};

export const FilterItemList = (props) => {
const { category, datasets, filter, filterHandler, isFiltered, filterNameFn } = props;
return (
<List sx={{ margin: '-0.5em -0.5em' }}>
{
filter.map((filter) => {
const filterName = filterNameFn(filter);
return (
<ListItem disablePadding key={filter}>
<ListItemButton sx={{ padding: '0' }} onClick={(event) => filterHandler(event, datasets, category, filter)}>
<ListItemIcon>
<Checkbox checked={isFiltered(filter, category)} />
</ListItemIcon>
<ListItemText primary={filterName} sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }} />
</ListItemButton>
</ListItem>
);
})
}
</List>
);
};

export const AccessManagementFilterItemList = (props) => {
const { category, datasets, filter, filterHandler, isFiltered, filterNameFn } = props;
const { category, datasets, filter, filterHandler, isFiltered, filterNameFn, filterDisplayFn } = props;
return (
<List sx={{ margin: '-0.5em -0.5em' }}>
{
Expand All @@ -59,14 +34,7 @@ export const AccessManagementFilterItemList = (props) => {
<Checkbox checked={isFiltered(filter, category)} />
</ListItemIcon>
<ListItemText sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }}>
{ filterName === 'Open' ? <div style={{display: 'flex', alignItems: 'center'}}>
<img src={openAccessIcon} style={{width: '10px', marginRight: 6}} /> {filterName} </div> :
filterName === 'Controlled' ? <div style={{display: 'flex', alignItems: 'center'}}>
<img src={controlledAccessIcon} style={{width: '10px', marginRight: 6}} /> {filterName} </div> :
filterName === 'External' ? <div style={{display: 'flex', alignItems: 'center'}}>
<img src={externalAccessIcon} style={{width: '10px', marginRight: 6}} /> {filterName} </div> :
filterName
}
{filterDisplayFn ? filterDisplayFn(filter) : filterName}
</ListItemText>
</ListItemButton>
</ListItem>
Expand Down Expand Up @@ -96,14 +64,22 @@ export const DatasetFilterList = (props) => {
</Box>
<Divider />
<FilterItemHeader title='Access Type' />
<AccessManagementFilterItemList
<FilterItemList
category='accessManagement'
datasets={datasets}
filter={accessManagementFilters}
filterHandler={filterHandler}
isFiltered={isFiltered}
filterNameFn={capitalize} />
<FilterItemHeader title='Data Use' />
filterNameFn={(filter) => getAccessManagementSummary(filter).name}
filterDisplayFn={(filter) => {
const accessManagementSummary = getAccessManagementSummary(filter);
return (
<div style={{display: 'flex', alignItems: 'center'}}>
<img src={accessManagementSummary.icon} alt={accessManagementSummary.name} style={{width: '10px', marginRight: 6}}/>
{accessManagementSummary.name}
</div>);}
}/>
<FilterItemHeader title='Data Use'/>
<FilterItemList
category='dataUse'
datasets={datasets}
Expand Down
33 changes: 15 additions & 18 deletions src/components/data_search/DatasetSearchTableConstants.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {DatasetTerm} from 'src/types/model';
import {DatasetTerm, getAccessManagementSummary} from '../../types/model';
import _, {groupBy} from 'lodash';
import {Checkbox, Link} from '@mui/material';
import * as React from 'react';
Expand All @@ -8,9 +8,6 @@ import DatasetExportButton from './DatasetExportButton';
import ReactTooltip from 'react-tooltip';
import {dataUseCellData} from '../dac_dataset_table/DACDatasetTableCellData';
import './DatasetSearch.css';
import externalAccessIcon from '../../images/external_access.svg';
import openAccessIcon from '../../images/open_access.svg';
import controlledAccessIcon from '../../images/controlled_access.svg';

export interface DatasetSearchTableTab<T> {
key: string;
Expand Down Expand Up @@ -260,13 +257,11 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
data-for={`${accessType}-access-tooltip`}
style={{display: 'flex', justifyContent: 'center', marginRight: 20}}
>
<img src={src}/>
<img src={src} alt={accessType}/>
</div>
<ReactTooltip
place={'bottom'}
effect={'solid'}
disable={false}
scrollHide={true}
id={`${accessType}-access-tooltip`}><div style={tooltipStyle}>{tooltipText}</div></ReactTooltip>
</>;
};
Expand All @@ -289,7 +284,9 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
disable={isSelectable(dataset)}
effect={'solid'}
scrollHide={true}
id={checkboxId}><div style={tooltipStyle}>{tooltipText}</div></ReactTooltip>
id={checkboxId}>
<div style={tooltipStyle}>{tooltipText}</div>
</ReactTooltip>
<div data-for={checkboxId} data-tip={true}>
<Checkbox checked={isSelected}
disabled={!isSelectable(dataset)}
Expand Down Expand Up @@ -322,7 +319,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
sortable: true,
cellStyle: makeHeaderStyle(cellWidths.studyName),
cellDataFn: (dataset: DatasetTerm) => ({
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.studyName} id={`${dataset.datasetId}-study-name`}>
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.studyName}
id={`${dataset.datasetId}-study-name`}>
{trimNewlineCharacters(dataset.study.studyName)}
</OverflowTooltip>,
value: dataset.study.studyName,
Expand All @@ -349,13 +347,10 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
sortable: true,
cellStyle: makeHeaderStyle(cellWidths.accessType),
cellDataFn: (dataset: DatasetTerm) => ({
data: dataset.accessManagement === 'external' ?
tooltipIconDisplay(externalAccessIcon, 'external', 'External access request required') :
dataset.accessManagement === 'open' ?
tooltipIconDisplay(openAccessIcon, 'open', 'Open access') :
dataset.accessManagement === 'controlled' ?
tooltipIconDisplay(controlledAccessIcon, 'controlled', 'Controlled access') :
'',
data:
tooltipIconDisplay(getAccessManagementSummary(dataset.accessManagement).icon,
getAccessManagementSummary(dataset.accessManagement).name,
getAccessManagementSummary(dataset.accessManagement).description),
value: dataset.accessManagement,
id: `${dataset.datasetId}-participant-count`,
style: makeRowStyle(cellWidths.accessType),
Expand All @@ -367,7 +362,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
sortable: true,
cellStyle: makeHeaderStyle(cellWidths.dataType),
cellDataFn: (dataset: DatasetTerm) => ({
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.dataTypes?.join(', ')} id={`${dataset.datasetId}-dataset-data-types`}>
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.dataTypes?.join(', ')}
id={`${dataset.datasetId}-dataset-data-types`}>
{dataset.study.dataTypes?.join(', ')}
</OverflowTooltip>,
value: dataset.study.dataTypes?.join(', '),
Expand Down Expand Up @@ -428,7 +424,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
divClass: ['data-use-cell'],
spanClass: [],
cellWidth: cellWidths.dataUse,
tooltipPlace: 'top'});
tooltipPlace: 'top'
});
}
},
{
Expand Down
38 changes: 38 additions & 0 deletions src/types/model.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { DuosUserResponse } from './responseTypes';
import externalAccessIcon from '../images/external_access.svg';
import openAccessIcon from '../images/open_access.svg';
import controlledAccessIcon from '../images/controlled_access.svg';

export type UserRoleName =
| 'Admin'
Expand Down Expand Up @@ -176,6 +179,41 @@ export interface DatasetTerm {
dac: DacTerm;
}

export interface AccessManagementSummary {
name: string;
icon: any;
description: string;
}

export const getAccessManagementSummary = (accessManagement: string): AccessManagementSummary => {
switch (accessManagement) {
case 'external':
return {
name: 'External',
icon: externalAccessIcon,
description: 'External access request required'
};
case 'open':
return {
name: 'Open',
icon: openAccessIcon,
description: 'Open access'
};
case 'controlled':
return {
name: 'Controlled',
icon: controlledAccessIcon,
description: 'Controlled access'
};
default:
return {
name: '',
icon: '',
description: 'Unknown access management'
};
}
};

interface DataUseRequirements {
required: string[];
}
Expand Down

0 comments on commit 6bb54b3

Please sign in to comment.