From fe811df771cfd21a417b069dc5443f08acd2a5f7 Mon Sep 17 00:00:00 2001
From: Daniel <68309643+danielships@users.noreply.github.com>
Date: Thu, 24 Sep 2026 21:58:25 +0100
Subject: [PATCH] feat(analytics): radius explorer control and gist details
 popup component

---
 .../components/analytics/GistDetailsPopup.tsx | 37 +++++++++++++++++
 .../components/analytics/RadiusExplorer.tsx   | 41 +++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 Frontend/src/components/analytics/GistDetailsPopup.tsx
 create mode 100644 Frontend/src/components/analytics/RadiusExplorer.tsx

diff --git a/Frontend/src/components/analytics/GistDetailsPopup.tsx b/Frontend/src/components/analytics/GistDetailsPopup.tsx
new file mode 100644
index 00000000..5b8e14d9
--- /dev/null
+++ b/Frontend/src/components/analytics/GistDetailsPopup.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface GistPopupData {
+  id: string;
+  title: string;
+  author: string;
+  createdAt: string;
+  geohash: string;
+}
+
+export interface GistDetailsPopupProps {
+  gist?: GistPopupData | null;
+  onClose?: () => void;
+}
+
+export const GistDetailsPopup: React.FC<GistDetailsPopupProps> = ({
+  gist,
+  onClose,
+}) => {
+  if (!gist) return null;
+
+  return (
+    <div className="p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg max-w-sm">
+      <div className="flex justify-between items-start mb-2">
+        <h4 className="font-semibold text-gray-900 dark:text-gray-100 text-sm">{gist.title}</h4>
+        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xs">✕</button>
+      </div>
+      <div className="text-xs space-y-1 text-gray-600 dark:text-gray-300">
+        <p><strong>Author:</strong> {gist.author}</p>
+        <p><strong>Geohash:</strong> <code className="bg-gray-100 dark:bg-gray-700 px-1 rounded">{gist.geohash}</code></p>
+        <p><strong>Created:</strong> {gist.createdAt}</p>
+      </div>
+    </div>
+  );
+};
+
+export default GistDetailsPopup;
diff --git a/Frontend/src/components/analytics/RadiusExplorer.tsx b/Frontend/src/components/analytics/RadiusExplorer.tsx
new file mode 100644
index 00000000..a40e3bb6
--- /dev/null
+++ b/Frontend/src/components/analytics/RadiusExplorer.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+export interface RadiusExplorerProps {
+  initialRadiusKm?: number;
+  onRadiusChange?: (radiusKm: number) => void;
+}
+
+export const RadiusExplorer: React.FC<RadiusExplorerProps> = ({
+  initialRadiusKm = 5,
+  onRadiusChange,
+}) => {
+  const [radius, setRadius] = useState<number>(initialRadiusKm);
+
+  const handleChange = (val: number) => {
+    setRadius(val);
+    onRadiusChange?.(val);
+  };
+
+  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-2 text-gray-900 dark:text-gray-100">
+        Radius Spatial Explorer
+      </h4>
+      <div className="flex items-center gap-4 text-xs">
+        <input
+          type="range"
+          min="1"
+          max="50"
+          value={radius}
+          onChange={e => handleChange(Number(e.target.value))}
+          className="flex-1"
+        />
+        <span className="font-mono text-indigo-600 dark:text-indigo-400 font-bold w-12 text-right">
+          {radius} km
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default RadiusExplorer;