EDA and Map - values with < > don't display properly

The two values are Aedes <genus> and Aedes <subgenus>

It looks like we're stripping HTML-like tags too aggressively?

I haven't looked, but we are probably displaying the values as html, in which case values in angle brackets would be interpreted as html tags. I don't remember the background as to why we treat them as html, but it's probably not a great idea. I'll have to dig around commit messages.

If I recall correctly, we wanted to support italics for organism names, etc.

We could have an allow-list of html tags we support, and encode any angle brackets that are not used in conjunction with those tags.

I'm envisioning a function with this interface:

declare function sanitizeHtml(html: string, allowedTags: string[]): string

And used like this:

sanitizeHtml(source, ['i', 'b'])

Here's the safeHtml function we should probably improve

web-monorepo/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx

Line 256 in 8b5d70e

export function safeHtml<P>(

It's called from here

web-monorepo/packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.jsx

Line 508 in 8b5d70e

<div>{value == null ? UNKNOWN_ELEMENT : safeHtml(String(value))}</div>

Any tag that isn't "safe" should be escaped so <genus> becomes <genus;>

I was thinking we would pass the output of the sanitizeHtml function to safeHtml:

safeHtml(sanitizeHtml(value, ['i', 'b']))

Otherwise, we will need to a new parameter to safeHtml.