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() {