refactor([2fd88f42]): remove legend component

heatmap-tool/frontend/src/components/Legend.tsx

@@ -1,68 +0,0 @@
-// src/components/Legend.tsx
-import React from 'react';
-
-interface LegendProps {
-  getColor: (count: number) => string;
-  maxCount: number;
-}
-
-const Legend: React.FC<LegendProps> = ({ getColor, maxCount }) => {
-  // Dynamically generate grades based on the maxCount of the current dataset
-  const grades = [
-    1,
-    Math.round(maxCount / 5),
-    Math.round(maxCount / 2.5),
-    Math.round(maxCount / 1.5),
-    maxCount
-  ];
-  
-  // Remove duplicates and filter out zero or invalid numbers, then sort
-  const uniqueGrades = [...new Set(grades)].filter(g => g > 0).sort((a,b) => a-b);
-  if (uniqueGrades.length > 1 && uniqueGrades[1] <= 1) {
-      uniqueGrades.shift(); // remove the '1' if the next step is too close
-  }
-
-  return (
-    <>
-      <style>{`
-        .legend {
-          position: absolute;
-          bottom: 20px;
-          right: 20px;
-          padding: 10px;
-          background: rgba(255, 255, 255, 0.8);
-          color: #333;
-          border-radius: 5px;
-          box-shadow: 0 0 15px rgba(0,0,0,0.2);
-          z-index: 1000; /* Ensure it's on top of the map */
-        }
-        .legend h4 {
-          margin: 0 0 5px 0;
-          text-align: center;
-        }
-        .legend i {
-          width: 18px;
-          height: 18px;
-          float: left;
-          margin-right: 8px;
-          opacity: 0.7;
-        }
-      `}</style>
-      <div className="legend">
-        <h4>Count</h4>
-        {uniqueGrades.map((grade, index) => {
-          const from = grade;
-          const to = uniqueGrades[index + 1];
-          return (
-            <div key={from}>
-              <i style={{ background: getColor(from) }}></i>
-              {from}{to ? `–${to - 1}` : '+'}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-export default Legend;

heatmap-tool/frontend/src/components/MapDisplay.tsx

@@ -6,7 +6,6 @@ import 'leaflet/dist/leaflet.css';
 import 'leaflet.heat';
 import type { HeatmapPoint, MapMode } from '../App';
 import MarkerClusterGroup from 'react-leaflet-cluster';
-import Legend from './Legend';
 
 interface MapDisplayProps {
   heatmapData: HeatmapPoint[];
@@ -85,7 +84,6 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       />
       {viewMode === 'points' ? renderPoints() : renderHeatmap()}
-      {viewMode === 'points' && <Legend getColor={getColor} maxCount={maxCount} />}
     </MapContainer>
   );
 };