From 61da2cb2ce215637f9d05f21debd3d0c6c0aaf98 Mon Sep 17 00:00:00 2001
From: Abdulrahman Oyawoye <ibinolamichael1+43@gmail.com>
Date: Thu, 24 Sep 2026 21:58:17 +0100
Subject: [PATCH 1/2] feat(analytics): heatmap legend scale controls and
 multi-area comparison component

---
 .../analytics/HeatmapLegendControls.tsx       | 68 +++++++++++++++++++
 .../analytics/MultiAreaComparison.tsx         | 48 +++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 Frontend/src/components/analytics/HeatmapLegendControls.tsx
 create mode 100644 Frontend/src/components/analytics/MultiAreaComparison.tsx

diff --git a/Frontend/src/components/analytics/HeatmapLegendControls.tsx b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
new file mode 100644
index 00000000..2cc2b050
--- /dev/null
+++ b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+export interface HeatmapScaleConfig {
+  minThreshold: number;
+  maxThreshold: number;
+  colorScheme: 'indigo' | 'emerald' | 'amber' | 'rose';
+}
+
+export interface HeatmapLegendControlsProps {
+  initialConfig?: HeatmapScaleConfig;
+  onChange?: (config: HeatmapScaleConfig) => void;
+}
+
+export const HeatmapLegendControls: React.FC<HeatmapLegendControlsProps> = ({
+  initialConfig = { minThreshold: 0, maxThreshold: 100, colorScheme: 'indigo' },
+  onChange,
+}) => {
+  const [config, setConfig] = useState<HeatmapScaleConfig>(initialConfig);
+
+  const handleUpdate = (updated: Partial<HeatmapScaleConfig>) => {
+    const next = { ...config, ...updated };
+    setConfig(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">
+        Heatmap Scale Controls
+      </h4>
+      <div className="flex flex-wrap items-center gap-4 text-xs">
+        <label className="flex items-center gap-2">
+          <span>Min:</span>
+          <input
+            type="number"
+            value={config.minThreshold}
+            onChange={e => handleUpdate({ minThreshold: Number(e.target.value) })}
+            className="w-16 px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          />
+        </label>
+        <label className="flex items-center gap-2">
+          <span>Max:</span>
+          <input
+            type="number"
+            value={config.maxThreshold}
+            onChange={e => handleUpdate({ maxThreshold: Number(e.target.value) })}
+            className="w-16 px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          />
+        </label>
+        <label className="flex items-center gap-2">
+          <span>Palette:</span>
+          <select
+            value={config.colorScheme}
+            onChange={e => handleUpdate({ colorScheme: e.target.value as any })}
+            className="px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          >
+            <option value="indigo">Indigo</option>
+            <option value="emerald">Emerald</option>
+            <option value="amber">Amber</option>
+            <option value="rose">Rose</option>
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default HeatmapLegendControls;
diff --git a/Frontend/src/components/analytics/MultiAreaComparison.tsx b/Frontend/src/components/analytics/MultiAreaComparison.tsx
new file mode 100644
index 00000000..36543f8d
--- /dev/null
+++ b/Frontend/src/components/analytics/MultiAreaComparison.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+export interface AreaStats {
+  areaId: string;
+  name: string;
+  gistCount: number;
+  activeUsers: number;
+  densityScore: number;
+}
+
+export interface MultiAreaComparisonProps {
+  areas?: AreaStats[];
+}
+
+export const MultiAreaComparison: React.FC<MultiAreaComparisonProps> = ({
+  areas = [],
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+        Multi-Area Spatial Comparison
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {areas.map(area => (
+          <div key={area.areaId} className="p-3 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
+            <h4 className="font-medium text-indigo-600 dark:text-indigo-400 mb-2">{area.name}</h4>
+            <div className="space-y-1 text-xs text-gray-600 dark:text-gray-300">
+              <div className="flex justify-between">
+                <span>Gist Count:</span>
+                <span className="font-semibold">{area.gistCount}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Active Users:</span>
+                <span className="font-semibold">{area.activeUsers}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Density Score:</span>
+                <span className="font-semibold">{area.densityScore}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiAreaComparison;

From 97d06725dda2e073e649e11bdd13e501aba0b910 Mon Sep 17 00:00:00 2001
From: Abdulrahman Oyawoye <ibinolamichael1+43@gmail.com>
Date: Thu, 24 Sep 2026 22:01:14 +0100
Subject: [PATCH 2/2] fix(analytics): replace explicit any with
 HeatmapScaleConfig colorScheme type

---
 .../src/components/analytics/HeatmapLegendControls.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/analytics/HeatmapLegendControls.tsx b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
index 2cc2b050..4e24338c 100644
--- a/Frontend/src/components/analytics/HeatmapLegendControls.tsx
+++ b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 export interface HeatmapScaleConfig {
   minThreshold: number;
   maxThreshold: number;
-  colorScheme: 'indigo' | 'emerald' | 'amber' | 'rose';
+  colorScheme: "indigo" | "emerald" | "amber" | "rose";
 }
 
 export interface HeatmapLegendControlsProps {
@@ -12,7 +12,7 @@ export interface HeatmapLegendControlsProps {
 }
 
 export const HeatmapLegendControls: React.FC<HeatmapLegendControlsProps> = ({
-  initialConfig = { minThreshold: 0, maxThreshold: 100, colorScheme: 'indigo' },
+  initialConfig = { minThreshold: 0, maxThreshold: 100, colorScheme: "indigo" },
   onChange,
 }) => {
   const [config, setConfig] = useState<HeatmapScaleConfig>(initialConfig);
@@ -51,7 +51,7 @@ export const HeatmapLegendControls: React.FC<HeatmapLegendControlsProps> = ({
           <span>Palette:</span>
           <select
             value={config.colorScheme}
-            onChange={e => handleUpdate({ colorScheme: e.target.value as any })}
+            onChange={e => handleUpdate({ colorScheme: e.target.value as HeatmapScaleConfig["colorScheme"] })}
             className="px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
           >
             <option value="indigo">Indigo</option>