diff --git a/src/components/data_search/DatasetFilterList.jsx b/src/components/data_search/DatasetFilterList.jsx index 82167f443..4b6825579 100644 --- a/src/components/data_search/DatasetFilterList.jsx +++ b/src/components/data_search/DatasetFilterList.jsx @@ -8,7 +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 {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; @@ -20,7 +21,7 @@ export const FilterItemHeader = (props) => { }; export const FilterItemList = (props) => { - const { category, datasets, filter, filterHandler, isFiltered, filterNameFn } = props; + const { category, datasets, filter, filterHandler, isFiltered, filterNameFn, filterDisplayFn } = props; return ( { @@ -32,7 +33,9 @@ export const FilterItemList = (props) => { - + + {filterDisplayFn ? filterDisplayFn(filter) : filterName} + ); @@ -68,8 +71,16 @@ export const DatasetFilterList = (props) => { filter={accessManagementFilters} filterHandler={filterHandler} isFiltered={isFiltered} - filterNameFn={capitalize} /> - + filterNameFn={(filter) => getAccessManagementSummary(filter).name} + filterDisplayFn={(filter) => { + const accessManagementSummary = getAccessManagementSummary(filter); + return ( +
+ {accessManagementSummary.name} + {accessManagementSummary.name} +
);} + }/> + dataset.accessManagement != 'open' && dataset.accessManagement != 'external'; const selectableDatasetIds = datasets.filter(isSelectable).map(dataset => dataset.datasetId); + const tooltipIconDisplay = (src: string | undefined, accessType: string, tooltipText: string) => { + return <> +
+ {accessType}/ +
+
{tooltipText}
 + ; + }; + return [ { label:
{tooltipText}
+ id={checkboxId}> +
{tooltipText}
+
({ - data: + data: {trimNewlineCharacters(dataset.study.studyName)} , value: dataset.study.studyName, @@ -328,10 +347,10 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number sortable: true, cellStyle: makeHeaderStyle(cellWidths.accessType), cellDataFn: (dataset: DatasetTerm) => ({ - data: dataset.accessManagement === 'external' ? - 'External to DUOS' : - dataset.accessManagement === 'open' ? - 'Open Access' : dataset.dac?.dacName, + 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), @@ -343,7 +362,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number sortable: true, cellStyle: makeHeaderStyle(cellWidths.dataType), cellDataFn: (dataset: DatasetTerm) => ({ - data: + data: {dataset.study.dataTypes?.join(', ')} , value: dataset.study.dataTypes?.join(', '), @@ -404,7 +424,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number divClass: ['data-use-cell'], spanClass: [], cellWidth: cellWidths.dataUse, - tooltipPlace: 'top'}); + tooltipPlace: 'top' + }); } }, { diff --git a/src/images/controlled_access.svg b/src/images/controlled_access.svg new file mode 100644 index 000000000..3d5ff75f3 --- /dev/null +++ b/src/images/controlled_access.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/external_access.svg b/src/images/external_access.svg new file mode 100644 index 000000000..05fe33af9 --- /dev/null +++ b/src/images/external_access.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/open_access.svg b/src/images/open_access.svg new file mode 100644 index 000000000..5232f47dd --- /dev/null +++ b/src/images/open_access.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/types/model.ts b/src/types/model.ts index 4dfecc1a1..ddf671425 100644 --- a/src/types/model.ts +++ b/src/types/model.ts @@ -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' @@ -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[]; }