diff --git a/frontend/src/components/ColorMapLegend.tsx b/frontend/src/components/ColorMapLegend.tsx index b5c615a..af97691 100644 --- a/frontend/src/components/ColorMapLegend.tsx +++ b/frontend/src/components/ColorMapLegend.tsx @@ -1,3 +1,5 @@ +import {useMemo} from "react"; + type ColorMap = [number, string][] import styles from './ColorMapLegend.module.less' @@ -6,24 +8,20 @@ export default function ColorMapLegend({map}: {map: ColorMap}) { const min = map[0][0] const max = map[map.length - 1][0] const normalizeValue = (v) => (v - min) / (max - min) - if( typeof ColorMapLegend.counter == 'undefined' ) { - ColorMapLegend.counter = 0; - } - ColorMapLegend.counter++; - ColorMapLegend.id="gradient"+ColorMapLegend.counter; - ColorMapLegend.url="url(#"+ColorMapLegend.id+")"; + const gradientId = useMemo(() => `gradient${Math.floor(Math.random() * 1000000)}`, []); + const gradientUrl = `url(#${gradientId})`; return (