From 724e48f73853f4e70bf28575f36bb1031f2c1fde Mon Sep 17 00:00:00 2001
From: gluap <github@pgoergen.de>
Date: Sun, 19 Dec 2021 17:01:13 +0100
Subject: [PATCH] Implement requested change to native react idiom

---
 frontend/src/components/ColorMapLegend.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

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 (
     <div className={styles.colorMapLegend}>
       <svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
         <defs>
-          <linearGradient id={ColorMapLegend.id} x1="0" x2="1" y1="0" y2="0">
+          <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
             {map.map(([value, color]) => (
               <stop key={value} offset={normalizeValue(value) * 100 + '%'} stopColor={color} />
             ))}
           </linearGradient>
         </defs>
 
-        <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={ColorMapLegend.url} />
+        <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={gradientUrl} />
       </svg>
       {map.map(([value]) => (
         <span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}>