Merge pull request #361 from DLR-SC/feature/fix-heatlegend-select

Fix heatlegend select
DLR-SC · May 31, 2024 · 35425c8 · 35425c8
2 parents da3052b + 6d94e99
commit 35425c8
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/frontend/docs/changelog/changelog-de.md b/frontend/docs/changelog/changelog-de.md
@@ -16,6 +16,7 @@ SPDX-License-Identifier: CC-BY-4.0
 ### Fehlerbehebungen
 
 - Fehlende Übersetzungen wurden ergänzt.
+- Die Auswahl der Farblegenden zeigt jetzt wieder eine Vorschau für alle Optionen.
 
 ---
 

diff --git a/frontend/docs/changelog/changelog-en.md b/frontend/docs/changelog/changelog-en.md
@@ -16,6 +16,7 @@ SPDX-License-Identifier: CC-BY-4.0
 ### Bug fixes
 
 - Missing translations were fixed.
+- The heat legend selection now shows a preview for all legends again.
 
 ---
 

diff --git a/frontend/src/components/Sidebar/HeatLegend.tsx b/frontend/src/components/Sidebar/HeatLegend.tsx
@@ -1,29 +1,31 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {useEffect} from 'react';
+import React, {useLayoutEffect} from 'react';
 import {useTheme} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import * as am5 from '@amcharts/amcharts5';
 import {useTranslation} from 'react-i18next';
 import {NumberFormatter} from 'util/hooks';
 import {HeatmapLegend} from '../../types/heatmapLegend';
 
-export default function HeatLegend(props: {
-  // add is_dynamic/absolute?
-  legend: HeatmapLegend;
-  exposeLegend: (legend: am5.HeatLegend | null) => void;
-  min: number;
-  max: number;
-  displayText: boolean;
-  id: string;
-}): JSX.Element {
+export default function HeatLegend(
+  props: Readonly<{
+    // add is_dynamic/absolute?
+    legend: HeatmapLegend;
+    exposeLegend: (legend: am5.HeatLegend | null) => void;
+    min: number;
+    max: number;
+    displayText: boolean;
+    id: string;
+  }>
+): JSX.Element {
   const id = props.id + String(Date.now() + Math.random()); // "guarantee" unique id
   const {i18n} = useTranslation();
   const {formatNumber} = NumberFormatter(i18n.language, 3, 8);
   const theme = useTheme();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const root = am5.Root.new(id);
     const heatLegend = root.container.children.push(
       am5.HeatLegend.new(root, {

diff --git a/frontend/src/components/Sidebar/HeatLegendEdit.tsx b/frontend/src/components/Sidebar/HeatLegendEdit.tsx
@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {useTheme} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -13,7 +13,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Select, {SelectChangeEvent} from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import HeatLegend from './HeatLegend';
 import EditIcon from '@mui/icons-material/Edit';
 import {useAppDispatch, useAppSelector} from '../../store/hooks';
 import {selectHeatmapLegend} from '../../store/UserPreferenceSlice';
@@ -143,25 +142,14 @@ export default function HeatLegendEdit(): JSX.Element {
             <Select id='heatmap-select' aria-label={t('heatlegend.select')} value={legend.name} onChange={handleChange}>
               {availablePresets.map((preset, i) => (
                 <MenuItem key={'legendPresetSelect' + i.toString()} value={preset.name}>
-                  <Grid container maxWidth='lg'>
-                    <Grid item xs={12}>
-                      <HeatLegend
-                        legend={preset}
-                        exposeLegend={() => {
-                          return;
-                        }}
-                        min={0}
-                        max={preset.steps[preset.steps.length - 1].value}
-                        displayText={!preset.isNormalized}
-                        id={preset.name}
-                      />
-                    </Grid>
-                    <Grid item xs={12}>
+                  <Box sx={{width: '100%'}}>
+                    <LegendGradient legend={preset} />
+                    <Box>
                       <Typography variant='h2' align='center'>
                         {preset.name}
                       </Typography>
-                    </Grid>
-                  </Grid>
+                    </Box>
+                  </Box>
                 </MenuItem>
               ))}
             </Select>
@@ -177,6 +165,32 @@ export default function HeatLegendEdit(): JSX.Element {
   );
 }
 
+function LegendGradient(props: Readonly<{legend: HeatmapLegend}>): JSX.Element {
+  const divRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!divRef.current) {
+      return;
+    }
+
+    const gradient = props.legend.steps
+      .map(({color, value}) => {
+        return `${color} ${Math.round(value * 100)}%`;
+      })
+      .join(', ');
+
+    divRef.current.style.background = `linear-gradient(90deg, ${gradient})`;
+  }, [props.legend]);
+
+  return (
+    <div
+      ref={divRef}
+      id={`legend-gradient-${props.legend.name}`}
+      style={{width: '100%', height: '50px', margin: '5px'}}
+    />
+  );
+}
+
 /**
  * This hook generates the heatmap legends for all scenarios using the current theme.
  */