From 589de0c5ac56a2f19ddf64e8cc3c9a0059358cad Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Tue, 5 May 2026 22:12:01 +0100
Subject: [PATCH] Add state reset

---
 frontend/src/components/map/MapLegend.tsx | 70 ++++++++++++++++++++---
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/map/MapLegend.tsx b/frontend/src/components/map/MapLegend.tsx
index e037e44..186c9d9 100644
--- a/frontend/src/components/map/MapLegend.tsx
+++ b/frontend/src/components/map/MapLegend.tsx
@@ -11,6 +11,23 @@ import { gradientToCss } from '../../lib/utils';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import { TickerValue } from '../ui/TickerValue';
 
+function ResetScaleIcon({ className = 'w-4 h-4' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 12a9 9 0 0115.13-6.36L21 8" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 3v5h-5" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 01-15.13 6.36L3 16" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 21v-5h5" />
+    </svg>
+  );
+}
+
 function EnumSwatches({
   values,
   palette,
@@ -76,6 +93,8 @@ export default function MapLegend({
   suffix,
   raw,
   totalCount,
+  onResetScale,
+  resetScaleDisabled = false,
 }: {
   featureLabel: string;
   range: [number, number];
@@ -89,9 +108,12 @@ export default function MapLegend({
   suffix?: string;
   raw?: boolean;
   totalCount?: number;
+  onResetScale?: () => void;
+  resetScaleDisabled?: boolean;
 }) {
   const { t } = useTranslation();
   const isEnum = enumValues && enumValues.length > 0;
+  const showResetScale = Boolean(onResetScale) && !isEnum;
   const enumPalette = getEnumPaletteForFeature(featureName ?? null, enumValues);
   const densityGradient = theme === 'dark' ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
   const gradientStyle =
@@ -121,11 +143,23 @@ export default function MapLegend({
         <span className="font-semibold text-xs text-warm-800 dark:text-warm-200 truncate">
           {featureLabel}
         </span>
+        {showResetScale && (
+          <button
+            onClick={onResetScale}
+            disabled={resetScaleDisabled}
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 disabled:opacity-40 disabled:hover:text-warm-400 dark:disabled:hover:text-warm-400 shrink-0"
+            title={t('mapLegend.resetColourScale')}
+            aria-label={t('mapLegend.resetColourScale')}
+          >
+            <ResetScaleIcon className="w-3.5 h-3.5" />
+          </button>
+        )}
         {showCancel && (
           <button
             onClick={onCancel}
             className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
             title={t('mapLegend.clearColourView')}
+            aria-label={t('mapLegend.clearColourView')}
           >
             <CloseIcon className="w-3.5 h-3.5" />
           </button>
@@ -149,15 +183,33 @@ export default function MapLegend({
   return (
     <div className="bg-white dark:bg-navy-800 dark:text-white rounded shadow-lg p-3 text-xs min-w-[300px] pointer-events-auto">
       <div className="flex items-center justify-between mb-2">
-        <span className="font-semibold text-sm dark:text-white">{featureLabel}</span>
-        {showCancel && (
-          <button
-            onClick={onCancel}
-            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 ml-2"
-            title={t('mapLegend.clearColourView')}
-          >
-            <CloseIcon className="w-4 h-4" />
-          </button>
+        <span className="font-semibold text-sm dark:text-white min-w-0 truncate">
+          {featureLabel}
+        </span>
+        {(showResetScale || showCancel) && (
+          <div className="flex items-center gap-1.5 ml-2 shrink-0">
+            {showResetScale && (
+              <button
+                onClick={onResetScale}
+                disabled={resetScaleDisabled}
+                className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 disabled:opacity-40 disabled:hover:text-warm-400 dark:disabled:hover:text-warm-400"
+                title={t('mapLegend.resetColourScale')}
+                aria-label={t('mapLegend.resetColourScale')}
+              >
+                <ResetScaleIcon className="w-4 h-4" />
+              </button>
+            )}
+            {showCancel && (
+              <button
+                onClick={onCancel}
+                className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
+                title={t('mapLegend.clearColourView')}
+                aria-label={t('mapLegend.clearColourView')}
+              >
+                <CloseIcon className="w-4 h-4" />
+              </button>
+            )}
+          </div>
         )}
       </div>
       {isEnum ? (