diff --git a/packages/data-portal-explore/src/components/AtlasTable.tsx b/packages/data-portal-explore/src/components/AtlasTable.tsx index 9b8330a1..3d2066a1 100644 --- a/packages/data-portal-explore/src/components/AtlasTable.tsx +++ b/packages/data-portal-explore/src/components/AtlasTable.tsx @@ -8,7 +8,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBook, faDownload } from '@fortawesome/free-solid-svg-icons'; import { Button, Modal } from 'react-bootstrap'; -import { ISelectedFiltersByAttrName } from '@htan/data-portal-filter'; +import { + ISelectedFiltersByAttrName, + urlEncodeSelectedFilters, +} from '@htan/data-portal-filter'; import { EnhancedDataTable, getDefaultDataTableStyle, @@ -18,6 +21,8 @@ import { AtlasDescription, AtlasMetaData, Entity, + FileViewerName, + filterFiles, getCiteFromPublicationManifest, getPublicationUid, PublicationManifest, @@ -48,6 +53,17 @@ interface IAtlasMetadataLinkModalProps { cloudBaseUrl: string; } +interface IAtlasViewerCountProps { + atlas: AtlasTableData; + fileViewerName: FileViewerName; + tooltipContent: string | JSX.Element; + hrefOverride?: { [atlasName: string]: string }; +} + +type ViewerCountByAtlas = { + [atlasId: string]: { [name in FileViewerName]: number }; +}; + const MetaDataLink = (props: { id: string; baseUrl: string }) => ( {props.id} @@ -126,9 +142,36 @@ const AtlasMetadataLinkModal: React.FunctionComponent = ( + props +) => { + const count = props.atlas.viewerCounts[props.fileViewerName]; + const filterString = urlEncodeSelectedFilters([ + { group: 'viewers', value: props.fileViewerName }, + { group: 'AtlasName', value: props.atlas.htan_name }, + ]); + const defaultHref = `/explore?selectedFilters=${filterString}&tab=file`; + const hrefOverride = props.hrefOverride?.[props.atlas.htan_name]; + + return ( + <> + + + {count > 0 && ( + + {count} + + )} + + + + ); +}; + type AtlasTableData = Atlas & { isSelected: boolean; publicationManifests: PublicationManifest[]; + viewerCounts: { [name in FileViewerName]: number }; }; function filteredCount( @@ -170,6 +213,10 @@ export class AtlasTable extends React.Component { ); }; + getViewerCounts = (atlas: Atlas) => { + return this.viewerCountByAtlas[atlas.htan_id]; + }; + // we need to update data every time the selection changes to rerender the table // see selectableRowSelected property at https://www.npmjs.com/package/react-data-table-component#row-selection @computed get data(): AtlasTableData[] { @@ -179,6 +226,7 @@ export class AtlasTable extends React.Component { ...a, isSelected: this.isRowSelected(a), publicationManifests: this.getPublicationManifests(a), + viewerCounts: this.getViewerCounts(a), } as AtlasTableData) ); } @@ -196,6 +244,16 @@ export class AtlasTable extends React.Component { ); } + @computed get viewerCountByAtlas(): ViewerCountByAtlas { + return _.mapValues(this.filesByAtlas, (files: Entity[]) => + _.mapValues( + FileViewerName, + (value) => + filterFiles({ viewers: new Set([value]) }, files).length + ) + ); + } + @computed get filteredAssaysByAtlas() { return _.mapValues(this.filteredFilesByAtlas, (files) => _(files) @@ -421,85 +479,12 @@ export class AtlasTable extends React.Component { grow: 0.5, right: true, minWidth: '50', - cell: (atlas: Atlas) => ( - <> - - - {(atlas.htan_name === 'HTAN HTAPP' && ( - - 127 - - )) || - (atlas.htan_name === 'HTAN Duke' && ( - - 1023 - - )) || - (atlas.htan_name === 'HTAN HMS' && ( - - 659 - - )) || - (atlas.htan_name === 'HTAN MSK' && ( - - 58 - - )) || - (atlas.htan_name === 'HTAN OHSU' && ( - - 149 - - )) || - (atlas.htan_name === 'HTAN TNP - TMA' && ( - - 1293 - - )) || - (atlas.htan_name === 'HTAN TNP SARDANA' && ( - - 276 - - )) || - (atlas.htan_name === 'HTAN Vanderbilt' && ( - - 123 - - )) || - (atlas.htan_name === 'HTAN WUSTL' && ( - - 150 - - ))} - - - + cell: (atlas: AtlasTableData) => ( + ), }, { @@ -522,21 +507,16 @@ export class AtlasTable extends React.Component { grow: 0.1, right: true, minWidth: '5', - cell: (atlas: Atlas) => ( - <> - - - {atlas.htan_name === 'HTAN OHSU' && ( - - 1 - - )} - - - + cell: (atlas: AtlasTableData) => ( + ), }, { @@ -559,51 +539,20 @@ export class AtlasTable extends React.Component { grow: 0.1, right: true, minWidth: '10', - cell: (atlas: Atlas) => ( - <> - - - {(atlas.htan_name === 'HTAN MSK' && ( - - 12 - - )) || - (atlas.htan_name === 'HTAN Vanderbilt' && ( - - 3 - - )) || - (atlas.htan_name === 'HTAN BU' && ( - - 1 - - )) || - (atlas.htan_name === 'HTAN CHOP' && ( - - 1 - - ))} - - - + cell: (atlas: AtlasTableData) => ( + ), }, - { name: ( <> @@ -624,37 +573,12 @@ export class AtlasTable extends React.Component { grow: 0.1, right: true, minWidth: '10', - cell: (atlas: Atlas) => ( - <> - - - {(atlas.htan_name === 'HTAN CHOP' && ( - - 3 - - )) || - (atlas.htan_name === 'HTAN MSK' && ( - - 11 - - )) || - (atlas.htan_name === 'HTAN Vanderbilt' && ( - - 4 - - ))} - - - + cell: (atlas: AtlasTableData) => ( + ), }, { @@ -677,29 +601,18 @@ export class AtlasTable extends React.Component { grow: 0.1, right: true, minWidth: '10', - cell: (atlas: Atlas) => ( - <> - - - {(atlas.htan_name === 'HTAN HMS' && ( - - 11 - - )) || - (atlas.htan_name === 'HTAN MSK' && ( - - 3 - - ))} - - - + cell: (atlas: AtlasTableData) => ( + ), }, { @@ -724,26 +637,26 @@ export class AtlasTable extends React.Component { grow: 0.1, right: true, minWidth: '10', - cell: (atlas: Atlas) => ( + cell: (atlas: AtlasTableData) => ( <> - {(atlas.htan_name === 'HTAN OHSU' && ( + {atlas.htan_name === 'HTAN OHSU' && ( 1 - )) || - (atlas.htan_name === 'HTAN Vanderbilt' && ( - - 1 - - ))} + )} + {atlas.htan_name === 'HTAN Vanderbilt' && ( + + 1 + + )}