Remove HTML parsing of item labels

neesjanvaneck · Jun 24, 2024 · 6d57848 · 6d57848
1 parent 8f1f04b
commit 6d57848
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/components/ui/ControlPanel/find.js b/src/components/ui/ControlPanel/find.js
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { TextField } from '@mui/material';
 import { useDebounce } from 'use-debounce';
-import HTMLReactParser from 'html-react-parser';
 import parse from 'autosuggest-highlight/parse';
 import _sortBy from 'lodash/sortBy';
 import _isUndefined from 'lodash/isUndefined';
@@ -41,14 +40,13 @@ const Find = observer(() => {
   const itemList = () => _sortBy(visualizationStore.items, ['label', 'id'])
     .filter(item => item.label.toLowerCase().indexOf(uiStore.itemFilterText.toLowerCase()) !== -1)
     .map((item, i) => {
-      const label = HTMLReactParser(item.label);
-      const matchPosition = label.toLowerCase().indexOf(uiStore.itemFilterText.toLowerCase());
-      const labelParts = parse(label, [[matchPosition, matchPosition + uiStore.itemFilterText.length]]);
+      const matchPosition = item.label.toLowerCase().indexOf(uiStore.itemFilterText.toLowerCase());
+      const labelParts = parse(item.label, [[matchPosition, matchPosition + uiStore.itemFilterText.length]]);
       return (
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
         <p
           className={s.listItem}
-          key={`${label}-${String(i)}`}
+          key={`${item.label}-${String(i)}`}
           onClick={() => changeClickedItem(item)}
         >
           {

diff --git a/src/store/visualization/index.js b/src/store/visualization/index.js
@@ -1,5 +1,4 @@
 /* eslint-disable no-bitwise */
-import HTMLReactParser from 'html-react-parser';
 import { makeAutoObservable } from 'mobx';
 import { scaleLinear, scaleOrdinal } from 'd3-scale';
 import { extent, sum } from 'd3-array';
@@ -568,8 +567,7 @@ export default class State {
       item._fontSize = this.pixelRatio * (scale * labelMinFontSize + labelFontSizeScalingConstant * item._normalizedWeight ** itemSizeVariation);
       if (this.labelCanvasContext) {
         this.labelCanvasContext.font = `${item._fontSize}px ${fontFamily}`;
-        const label = HTMLReactParser(item.label);
-        item._labelText = (label || '').slice(0, maxLabelLength) || '';
+        item._labelText = (item.label || '').slice(0, maxLabelLength) || '';
         item._labelTextWidth = this.labelCanvasContext.measureText(item._labelText).width;
       }
     });