From 8cb73dfe9d8e9e7b590100b0a8f58e5458c7c6b1 Mon Sep 17 00:00:00 2001
From: Floke <floke.com@gmail.com>
Date: Wed, 4 Feb 2026 13:16:35 +0000
Subject: [PATCH] feat([2fd88f42]): add adjustable marker radius and collapse
 filters by default

---
 heatmap-tool/frontend/src/App.tsx             | 37 +++++++++++++------
 .../frontend/src/components/FilterPanel.tsx   |  2 +-
 .../frontend/src/components/MapDisplay.tsx    | 17 +++++----
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/heatmap-tool/frontend/src/App.tsx b/heatmap-tool/frontend/src/App.tsx
index 45b3258d..8b8b6678 100644
--- a/heatmap-tool/frontend/src/App.tsx
+++ b/heatmap-tool/frontend/src/App.tsx
@@ -23,6 +23,7 @@ function App() {
   const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [radiusMultiplier, setRadiusMultiplier] = useState(1);
 
   const handleUploadSuccess = (newFilters: FilterOptions) => {
     setFilters(newFilters);
@@ -60,21 +61,35 @@ function App() {
         </header>
         <main className="App-main">
             <div className="control-panel">
-            <FileUpload
-                onUploadSuccess={handleUploadSuccess}
-                setIsLoading={setIsLoading}
-                setError={setError}
-            />
-            <FilterPanel
-                filters={filters}
-                onFilterChange={handleFilterChange}
-                isLoading={isLoading}
-            />
+              <FileUpload
+                  onUploadSuccess={handleUploadSuccess}
+                  setIsLoading={setIsLoading}
+                  setError={setError}
+              />
+              <FilterPanel
+                  filters={filters}
+                  onFilterChange={handleFilterChange}
+                  isLoading={isLoading}
+              />
+              <div className="map-controls" style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #555' }}>
+                <h3>Map Settings</h3>
+                <label htmlFor="radius-slider">Marker Size: {radiusMultiplier.toFixed(1)}x</label>
+                <input
+                  type="range"
+                  id="radius-slider"
+                  min="0.1"
+                  max="5"
+                  step="0.1"
+                  value={radiusMultiplier}
+                  onChange={(e) => setRadiusMultiplier(parseFloat(e.target.value))}
+                  style={{ width: '100%' }}
+                />
+              </div>
             </div>
             <div className="map-container">
             {isLoading && <p>Loading map data...</p>}
             {error && <p className="error">{error}</p>}
-            <MapDisplay heatmapData={heatmapData} />
+            <MapDisplay heatmapData={heatmapData} radiusMultiplier={radiusMultiplier} />
             </div>
         </main>
         </div>
diff --git a/heatmap-tool/frontend/src/components/FilterPanel.tsx b/heatmap-tool/frontend/src/components/FilterPanel.tsx
index 9198ae2b..56b489ef 100644
--- a/heatmap-tool/frontend/src/components/FilterPanel.tsx
+++ b/heatmap-tool/frontend/src/components/FilterPanel.tsx
@@ -60,7 +60,7 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ filters, onFilterChange, isLo
       <div className="filter-panel">
         <h3>Filters</h3>
         {Object.entries(filters).map(([category, options]) => (
-          <details key={category} className="filter-group" open>
+          <details key={category} className="filter-group">
             <summary>{category}</summary>
             <div className="filter-options">
               {options.map(option => (
diff --git a/heatmap-tool/frontend/src/components/MapDisplay.tsx b/heatmap-tool/frontend/src/components/MapDisplay.tsx
index fd0bea80..2f0e74ba 100644
--- a/heatmap-tool/frontend/src/components/MapDisplay.tsx
+++ b/heatmap-tool/frontend/src/components/MapDisplay.tsx
@@ -6,23 +6,26 @@ import type { HeatmapPoint } from '../App';
 
 interface MapDisplayProps {
   heatmapData: HeatmapPoint[];
+  radiusMultiplier: number;
 }
 
-const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData }) => {
+const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier }) => {
   const germanyCenter: [number, number] = [51.1657, 10.4515];
 
-  // Simple scaling function for marker radius
+  // Simple scaling function for marker radius, now with a multiplier
   const calculateRadius = (count: number) => {
-    return 5 + Math.log(count + 1) * 5;
+    // Ensure a base radius so even single points are visible
+    // The multiplier is applied to the dynamic part of the radius
+    return 3 + Math.log(count + 1) * 5 * radiusMultiplier;
   };
   
   // Simple color scaling function
   const getColor = (count: number, maxCount: number) => {
     const ratio = count / maxCount;
-    if (ratio > 0.8) return 'red';
-    if (ratio > 0.5) return 'orange';
-    if (ratio > 0.2) return 'yellow';
-    return 'green';
+    if (ratio > 0.8) return '#d73027'; // Red
+    if (ratio > 0.5) return '#fdae61'; // Orange
+    if (ratio > 0.2) return '#fee08b'; // Yellow
+    return '#66bd63'; // Green
   }
 
   const maxCount = Math.max(...heatmapData.map(p => p.count), 1);