revert([2fd88f42]): remove zoom-adaptive legend due to critical errors

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

@@ -0,0 +1,68 @@
+// 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;