[DT-789] Add Access Type Icons

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 (
     <List sx={{ margin: '-0.5em -0.5em' }}>
       {
@@ -32,7 +33,9 @@ export const FilterItemList = (props) => {
                 <ListItemIcon>
                   <Checkbox checked={isFiltered(filter, category)} />
                 </ListItemIcon>
-                <ListItemText primary={filterName} sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }} />
+                <ListItemText sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }}>
+                  {filterDisplayFn ? filterDisplayFn(filter) : filterName}
+                </ListItemText>
               </ListItemButton>
             </ListItem>
           );
@@ -67,8 +70,16 @@ export const DatasetFilterList = (props) => {
         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}

src/components/data_search/DatasetSearchTableConstants.tsx

@@ -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';
@@ -250,6 +250,22 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
   };
   const isSelectable = (dataset: DatasetTerm) => 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 <>
+      <div
+        data-tip='Full details'
+        data-for={`${accessType}-access-tooltip`}
+        style={{display: 'flex', justifyContent: 'center', marginRight: 20}}
+      >
+        <img src={src} alt={accessType}/>
+      </div>
+      <ReactTooltip
+        place={'bottom'}
+        effect={'solid'}
+        id={`${accessType}-access-tooltip`}><div style={tooltipStyle}>{tooltipText}</div></ReactTooltip>
+    </>;
+  };
+
   return [
     {
       label: <Checkbox checked={datasets.length === selected.length}
@@ -268,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)}
@@ -301,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,
@@ -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: <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(', '),
@@ -404,7 +424,8 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
           divClass: ['data-use-cell'],
           spanClass: [],
           cellWidth: cellWidths.dataUse,
-          tooltipPlace: 'top'});
+          tooltipPlace: 'top'
+        });
       }
     },
     {

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[];
 }