Skip to content

Commit 1aa444c

Browse files
cinyecaicinyecai
authored
[DT-789] Add Access Type Icons (#2728)
1 parent 5ebff63 commit 1aa444c

File tree

6 files changed

+117
-14
lines changed

6 files changed

+117
-14
lines changed

‎src/components/data_search/DatasetFilterList.jsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import ListItemText from '@mui/material/ListItemText';
88
import Divider from '@mui/material/Divider';
99
import { Button, Typography } from '@mui/material';
1010
import { Checkbox } from '@mui/material';
11-
import { flatten, uniq, compact, capitalize, orderBy } from 'lodash';
11+
import {flatten, uniq, compact, orderBy} from 'lodash';
12+
import {getAccessManagementSummary} from '../../types/model';
1213

1314
export const FilterItemHeader = (props) => {
1415
const { title, headerStyle = { fontFamily: 'Montserrat', fontWeight: '600', marginTop: '1em' } } = props;
@@ -20,7 +21,7 @@ export const FilterItemHeader = (props) => {
2021
};
2122

2223
export const FilterItemList = (props) => {
23-
const { category, datasets, filter, filterHandler, isFiltered, filterNameFn } = props;
24+
const { category, datasets, filter, filterHandler, isFiltered, filterNameFn, filterDisplayFn } = props;
2425
return (
2526
<List sx={{ margin: '-0.5em -0.5em' }}>
2627
{
@@ -32,7 +33,9 @@ export const FilterItemList = (props) => {
3233
<ListItemIcon>
3334
<Checkbox checked={isFiltered(filter, category)} />
3435
</ListItemIcon>
35-
<ListItemText primary={filterName} sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }} />
36+
<ListItemText sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }}>
37+
{filterDisplayFn ? filterDisplayFn(filter) : filterName}
38+
</ListItemText>
3639
</ListItemButton>
3740
</ListItem>
3841
);
@@ -68,8 +71,16 @@ export const DatasetFilterList = (props) => {
6871
filter={accessManagementFilters}
6972
filterHandler={filterHandler}
7073
isFiltered={isFiltered}
71-
filterNameFn={capitalize} />
72-
<FilterItemHeader title='Data Use' />
74+
filterNameFn={(filter) => getAccessManagementSummary(filter).name}
75+
filterDisplayFn={(filter) => {
76+
const accessManagementSummary = getAccessManagementSummary(filter);
77+
return (
78+
<div style={{display: 'flex', alignItems: 'center'}}>
79+
<img src={accessManagementSummary.icon} alt={accessManagementSummary.name} style={{width: '10px', marginRight: 6}}/>
80+
{accessManagementSummary.name}
81+
</div>);}
82+
}/>
83+
<FilterItemHeader title='Data Use'/>
7384
<FilterItemList
7485
category='dataUse'
7586
datasets={datasets}

‎src/components/data_search/DatasetSearchTableConstants.tsx‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {DatasetTerm} from 'src/types/model';
1+
import {DatasetTerm, getAccessManagementSummary} from '../../types/model';
22
import _, {groupBy} from 'lodash';
33
import {Checkbox, Link} from '@mui/material';
44
import * as React from 'react';
@@ -250,6 +250,22 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
250250
};
251251
const isSelectable = (dataset: DatasetTerm) => dataset.accessManagement != 'open' && dataset.accessManagement != 'external';
252252
const selectableDatasetIds = datasets.filter(isSelectable).map(dataset => dataset.datasetId);
253+
const tooltipIconDisplay = (src: string | undefined, accessType: string, tooltipText: string) => {
254+
return <>
255+
<div
256+
data-tip='Full details'
257+
data-for={`${accessType}-access-tooltip`}
258+
style={{display: 'flex', justifyContent: 'center', marginRight: 20}}
259+
>
260+
<img src={src} alt={accessType}/>
261+
</div>
262+
<ReactTooltip
263+
place={'bottom'}
264+
effect={'solid'}
265+
id={`${accessType}-access-tooltip`}><div style={tooltipStyle}>{tooltipText}</div></ReactTooltip>
266+
</>;
267+
};
268+
253269
return [
254270
{
255271
label: <Checkbox checked={datasets.length === selected.length}
@@ -268,7 +284,9 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
268284
disable={isSelectable(dataset)}
269285
effect={'solid'}
270286
scrollHide={true}
271-
id={checkboxId}><div style={tooltipStyle}>{tooltipText}</div></ReactTooltip>
287+
id={checkboxId}>
288+
<div style={tooltipStyle}>{tooltipText}</div>
289+
</ReactTooltip>
272290
<div data-for={checkboxId} data-tip={true}>
273291
<Checkbox checked={isSelected}
274292
disabled={!isSelectable(dataset)}
@@ -301,7 +319,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
301319
sortable: true,
302320
cellStyle: makeHeaderStyle(cellWidths.studyName),
303321
cellDataFn: (dataset: DatasetTerm) => ({
304-
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.studyName} id={`${dataset.datasetId}-study-name`}>
322+
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.studyName}
323+
id={`${dataset.datasetId}-study-name`}>
305324
{trimNewlineCharacters(dataset.study.studyName)}
306325
</OverflowTooltip>,
307326
value: dataset.study.studyName,
@@ -328,10 +347,10 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
328347
sortable: true,
329348
cellStyle: makeHeaderStyle(cellWidths.accessType),
330349
cellDataFn: (dataset: DatasetTerm) => ({
331-
data: dataset.accessManagement === 'external' ?
332-
'External to DUOS' :
333-
dataset.accessManagement === 'open' ?
334-
'Open Access' : dataset.dac?.dacName,
350+
data:
351+
tooltipIconDisplay(getAccessManagementSummary(dataset.accessManagement).icon,
352+
getAccessManagementSummary(dataset.accessManagement).name,
353+
getAccessManagementSummary(dataset.accessManagement).description),
335354
value: dataset.accessManagement,
336355
id: `${dataset.datasetId}-participant-count`,
337356
style: makeRowStyle(cellWidths.accessType),
@@ -343,7 +362,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
343362
sortable: true,
344363
cellStyle: makeHeaderStyle(cellWidths.dataType),
345364
cellDataFn: (dataset: DatasetTerm) => ({
346-
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.dataTypes?.join(', ')} id={`${dataset.datasetId}-dataset-data-types`}>
365+
data: <OverflowTooltip place={'top'} tooltipText={dataset.study.dataTypes?.join(', ')}
366+
id={`${dataset.datasetId}-dataset-data-types`}>
347367
{dataset.study.dataTypes?.join(', ')}
348368
</OverflowTooltip>,
349369
value: dataset.study.dataTypes?.join(', '),
@@ -404,7 +424,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
404424
divClass: ['data-use-cell'],
405425
spanClass: [],
406426
cellWidth: cellWidths.dataUse,
407-
tooltipPlace: 'top'});
427+
tooltipPlace: 'top'
428+
});
408429
}
409430
},
410431
{

‎src/images/controlled_access.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/images/external_access.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/images/open_access.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/types/model.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { DuosUserResponse } from './responseTypes';
2+
import externalAccessIcon from '../images/external_access.svg';
3+
import openAccessIcon from '../images/open_access.svg';
4+
import controlledAccessIcon from '../images/controlled_access.svg';
25

36
export type UserRoleName =
47
| 'Admin'
@@ -176,6 +179,41 @@ export interface DatasetTerm {
176179
dac: DacTerm;
177180
}
178181

182+
export interface AccessManagementSummary {
183+
name: string;
184+
icon: any;
185+
description: string;
186+
}
187+
188+
export const getAccessManagementSummary = (accessManagement: string): AccessManagementSummary => {
189+
switch (accessManagement) {
190+
case 'external':
191+
return {
192+
name: 'External',
193+
icon: externalAccessIcon,
194+
description: 'External access request required'
195+
};
196+
case 'open':
197+
return {
198+
name: 'Open',
199+
icon: openAccessIcon,
200+
description: 'Open access'
201+
};
202+
case 'controlled':
203+
return {
204+
name: 'Controlled',
205+
icon: controlledAccessIcon,
206+
description: 'Controlled access'
207+
};
208+
default:
209+
return {
210+
name: '',
211+
icon: '',
212+
description: 'Unknown access management'
213+
};
214+
}
215+
};
216+
179217
interface DataUseRequirements {
180218
required: string[];
181219
}

0 commit comments

Comments
 (0)