Add hover infos into plot

src/streamlit_app.py

@@ -254,8 +254,12 @@ points = (
         "cls_dim1": "x",
         "cls_dim2": "y",
         "Land Cover": "category"
-    })[["x","y","category","thumbs","dates_list"]]
-    .assign(color=chips_df["Land Cover"].map(color_dict_label))
+    })[["x","y","chip_id", "latitude", "longitude","category","thumbs","dates_list"]]
+    .assign(
+        id = chips_df["chip_id"], 
+        lat = chips_df["latitude"],
+        lon = chips_df["longitude"],
+        color=chips_df["Land Cover"].map(color_dict_label))
     .to_dict(orient="records")
 )
 
@@ -311,55 +315,77 @@ plot_html = f"""
   const traces    = cats.map(cat => {{
     const pts = points.filter(p=>p.category===cat);
     return {{
-      x:         pts.map(p=>p.x),
-      y:         pts.map(p=>p.y),
-      customdata:pts.map(p=>p.thumbs),
-      mode:      'markers',
-      type:      'scatter',
-      name:      cat,
-      marker:    {{ color: pts.map(p=>p.color), size:5 }}
+        x:         pts.map(p=>p.x),
+        y:         pts.map(p=>p.y),
+        id:        pts.map(p=>p.id),
+        lat:       pts.map(p=>p.lat),
+        lon:       pts.map(p=>p.lon),
+        customdata:pts.map(p=>[
+                            p.id,        
+                            p.lat,       
+                            p.lon,      
+                            p.thumbs     
+                            ]),
+        mode:      'markers',
+        type:      'scatter',
+        name:      cat,
+        marker:    {{ color: pts.map(p=>p.color), size:5 }},
+        hovertemplate:
+        `<b>ID:</b> %{{customdata[0]}}<br>` +
+        `<b>x:</b> %{{x:.2f}}<br>` +
+        `<b>y:</b> %{{y:.2f}}<br>` +
+        `<b>lat:</b> %{{customdata[1]:.4f}}<br>` +
+        `<b>lon:</b> %{{customdata[2]:.4f}}<extra></extra>`
     }};
   }});
 
   // plotly layout
   const layout = {{
-    paper_bgcolor: "rgb(255,255,255)", 
-    plot_bgcolor: "rgb(234, 234, 242)", 
+    hovermode: 'closest',
     title:    {title_js},
-    xaxis:    {{ title: {xaxis_js}, 
-                range:[-110,110], 
-                gridcolor: "rgb(255,255,255)",
-                showgrid: true, 
-                showline: false, 
-                showticklabels: true, 
-                tickcolor: "rgb(127,127,127)", 
-                ticks: "outside", 
-                zeroline: false, 
-                gridwidth: 1}},
-    yaxis:    {{ title: {yaxis_js}, 
-                range:[-110,110],
-                gridcolor: "rgb(255,255,255)",
-                showgrid: true, 
-                showline: false, 
-                showticklabels: true, 
-                tickcolor: "rgb(127,127,127)", 
-                ticks: "outside", 
-                zeroline: false,
-                gridwidth: 1}},
+    xaxis:    {{
+      title: {xaxis_js},
+      range: [-110, 110],
+      showgrid: true,
+      gridcolor: 'rgb(255,255,255)',
+      gridwidth: 1,
+      showline: false,
+      zeroline: false,
+      showticklabels: true,
+      ticks: 'outside',
+      tickcolor: 'rgb(127,127,127)'
+    }},
+    yaxis:    {{
+      title: {yaxis_js},
+      range: [-110, 110],
+      showgrid: true,
+      gridcolor: 'rgb(255,255,255)',
+      gridwidth: 1,
+      showline: false,
+      zeroline: false,
+      showticklabels: true,
+      ticks: 'outside',
+      tickcolor: 'rgb(127,127,127)'
+    }},
+    paper_bgcolor: 'rgb(255,255,255)',
+    plot_bgcolor:  'rgb(234,234,242)',
     autosize: true,
     margin:   {{ l:40, r:40, t:40, b:40 }},
     clickmode:'event+select',
-    legend:   {{ font:{{ size:12 }}, x:1.01, y:0.5 }}
-  }}; 
+    legend: {{ font:{{ size:12 }}, x:1.01, y:0.5 }}
+  }};
 
   // select the scatter-plot div to render the chart into
   const gd = document.getElementById('scatter-plot');
-  // click event
+
   Plotly.newPlot(gd, traces, layout, {{ responsive: true }}).then(() => {{
+    
+    //click handler
     gd.on('plotly_click', evt => {{
       // grab thumbs and dates through point index
-      const idx    = evt.points[0].pointIndex;
-      const thumbs = points[idx].thumbs;
+      const idx = evt.points[0].pointIndex;
+      const cds   = evt.points[0].customdata;
+      const thumbs = cds[3];
       const dates  = points[idx].dates_list;
 
       // grab image container and clear out old thumbs