diff --git a/src/components/SpatialViewer/ImageDatasetList.js b/src/components/SpatialViewer/ImageDatasetList.js index 90f6537..67e147c 100755 --- a/src/components/SpatialViewer/ImageDatasetList.js +++ b/src/components/SpatialViewer/ImageDatasetList.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { DndProvider } from 'react-dnd' import { HTML5Backend } from 'react-dnd-html5-backend' -import {Col, Container, Row, Spinner} from "reactstrap"; +import {Col, Container, Row, Spinner, UncontrolledTooltip} from "reactstrap"; import { resultConverter } from "../../helpers/dataHelper"; import { getImageTypeTooltipCopy } from "./viewConfigHelper"; import { faXmark, faAnglesRight, faAnglesLeft, faTrashCan } from "@fortawesome/free-solid-svg-icons"; @@ -215,25 +215,56 @@ class ImageDatasetList extends Component { }; getFilterPills = (filters) => { - return filters.map( - filter => { - return filter.values.map(value => { - return ( -
- {value} - { - this.props.removeFilter(filter.field, value) - }} - className="close-button fas fa-xmark ms-2" - icon={faXmark} /> - -
) - }) - }) + const filterDisplayNames = { + sex: "Sex", + age: "Age", + redcapid: "Participant ID", + enrollmentcategory: "Enrollment Category", + imagetype: "Image Type", + datatype: "Data Type", + configtype: "Config Type", + level: "Level", + releaseversion: "Release Version", + race: "Race", + proteinuria: "Proteinuria", + hypertensionhistory: "Hypertension History", + hypertensionduration: "Hypertension Duration", + onraasblockade: "RAAS Blockade", + diabetesduration: "Diabetes Duration", + diabeteshistory: "Diabetes History", + kdigostage: "KDIGO Stage", + a1c: "A1c", + albuminuria: "Albuminuria", + baselineegfr: "Baseline eGFR", + primaryadjudicatedcategory: "Primary Adjudicated Category" + }; + + return filters.map(filter => { + return filter.values.map(value => { + const sanitizedId = `${filter.field.toString()}-${value.toString()}`.replace(/[^a-zA-Z0-9-_]/g, '_'); + return ( +
+ {value} + + {filterDisplayNames[filter.field] || filter.field} + + { + this.props.removeFilter(filter.field, value); + }} + className="close-button fas fa-xmark ms-2" + icon={faXmark} + /> + +
+ ); + }); + }); }; render() {