From 0e3eea7de9d3a18affcc3e4e54c1f07a6d05b6bf Mon Sep 17 00:00:00 2001
From: Zahar <anthonymuncher@gmail.com>
Date: Fri, 26 Sep 2025 20:31:22 +0800
Subject: [PATCH] Enhance dashboard interactivity and update dependencies

- Added a new function to navigate to specific locations on the map with animation and detail display.
- Made the item title clickable to trigger the navigation function.
- Updated CSS to style the clickable item title for better user experience.
- Added `pydantic[email]` to backend requirements for enhanced validation capabilities.
---
 backend/requirements.txt |  3 ++-
 dashboard/app.js         | 27 ++++++++++++++++++++++++++-
 dashboard/styles.css     | 13 +++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/backend/requirements.txt b/backend/requirements.txt
index 8f02d27..3c16605 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -13,4 +13,5 @@ black
 isort
 huggingface_hub
 datasets
-transformers
\ No newline at end of file
+transformers
+pydantic[email]
\ No newline at end of file
diff --git a/dashboard/app.js b/dashboard/app.js
index 1669f72..797992e 100644
--- a/dashboard/app.js
+++ b/dashboard/app.js
@@ -320,6 +320,25 @@ function App(){
     window.open(`https://www.google.com/maps/search/?api=1&query=${lat},${lng}`, '_blank');
   };
 
+  const navigateToLocation = (r) => {
+    const map = mapRef.current;
+    if (!map || !r.location) return;
+
+    const { lat, lng } = r.location;
+    const currentZoom = map.getZoom();
+    const targetZoom = 20; // Maximum zoom level for focusing on a specific location
+
+    // First zoom out a bit for animation effect, then zoom to target
+    map.flyTo([lat, lng], targetZoom, {
+      animate: true,
+      duration: 1.5,
+      easeLinearity: 0.25
+    });
+
+    // Also set the selected item to show details
+    setSelected(r);
+  };
+
   return (
     <div className="app-root">
       <header className="header">
@@ -411,7 +430,13 @@ function App(){
                 <div key={r.id} className="queue-item" role="listitem">
                   <div className="thumb">{t(`category.${r.category}`) || r.category}</div>
                   <div className="item-main">
-                    <div className="item-title">{t(`category.${r.category}`) || r.category}</div>
+                    <div
+                      className="item-title clickable"
+                      onClick={() => navigateToLocation(r)}
+                      title="Click to view on map"
+                    >
+                      {t(`category.${r.category}`) || r.category}
+                    </div>
                     <div className="item-meta">
                       <span className={`chip severity-${r.severity}`}>{t(`severity.${r.severity}`) || r.severity}</span>
                       <span className={`chip status-${r.status}`}>{t(`status.${r.status}`) || r.status}</span>
diff --git a/dashboard/styles.css b/dashboard/styles.css
index 9b8673b..4019d6a 100644
--- a/dashboard/styles.css
+++ b/dashboard/styles.css
@@ -120,6 +120,19 @@ button.chip[aria-pressed="false"]{opacity:0.55;filter:grayscale(0.15)}
 .thumb{width:56px;height:56px;border-radius:6px;background:linear-gradient(180deg,#eef2ff,#fff);display:flex;align-items:center;justify-content:center;color:#0f172a;font-weight:700}
 .item-main{flex:1;min-width:0}
 .item-title{font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
+.item-title.clickable{
+  cursor:pointer;
+  transition:all 0.2s ease;
+  border-radius:4px;
+  padding:2px 4px;
+  margin:-2px -4px;
+}
+.item-title.clickable:hover{
+  background-color:rgba(14,165,164,0.1);
+  color:var(--accent);
+  transform:translateY(-1px);
+  box-shadow:0 2px 8px rgba(14,165,164,0.15);
+}
 .item-meta{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}
 .item-actions{display:flex;align-items:center}