From cdcee6e29ce3abfccd7d6f2e45f37118c73cc71f Mon Sep 17 00:00:00 2001
From: gluap <github@pgoergen.de>
Date: Sun, 19 Dec 2021 13:28:02 +0100
Subject: [PATCH] Add incrementing ID to gradient svg. So we do not overwrite
 it when the other button is enabled.

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

diff --git a/frontend/src/components/ColorMapLegend.tsx b/frontend/src/components/ColorMapLegend.tsx
index 62047fb..b5c615a 100644
--- a/frontend/src/components/ColorMapLegend.tsx
+++ b/frontend/src/components/ColorMapLegend.tsx
@@ -6,19 +6,24 @@ 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+")";
   return (
     <div className={styles.colorMapLegend}>
       <svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
         <defs>
-          <linearGradient id="gradient" x1="0" x2="1" y1="0" y2="0">
+          <linearGradient id={ColorMapLegend.id} 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="url(#gradient)" />
+        <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={ColorMapLegend.url} />
       </svg>
       {map.map(([value]) => (
         <span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}>