Add map-plot into app

Response to #2.

src/streamlit_app.py

@@ -157,7 +157,7 @@ def get_lon(geometry):
 # xaxis_title: x axis title
 # yaxis_title: x axis title
 config = {
-    "title" : "t-SNE Visualization of EO-FM-Bench Embeddings for Prithvi-EO-2.0",
+    "title" : "Visualization of EO-FM-Bench Embeddings",
     "xaxis_title" : "t-SNE Dimension 1",
     "yaxis_title" : "t-SNE Dimension 2",
 }
@@ -200,7 +200,7 @@ color_dict_label = {
     'Water': '#2c41e6',
     'Trees': '#04541b',
     'Crops': '#99e0ad',
-    'Built area': '#797b85',
+    'Built area': "#111112",
     'Bare ground': '#a68647',
     'Rangeland': '#f7980a'
 }
@@ -244,19 +244,12 @@ points_json = json.dumps(points)
 plot_html = f"""
 <script src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>
 <style>
-  html, body {{
-    margin:0; padding:0; height:100%;
-  }}
-  #container {{
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }}
+  html, body {{ margin:0; padding:0; height:100%; }}
+  #container {{ display:flex; width:100%; height:100%; }}
+  #map-plot, #scatter-plot {{ flex:1; padding:4px; box-sizing:border-box;margin-right:16px;}}
   #scatter-plot {{
-    flex: 1 1 auto;
-    min-width: 0;   
-    height: 100%;
-  }}
+  margin-right:6px;
+}}
   #image-container {{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -268,22 +261,70 @@ plot_html = f"""
     gap: 4px;
     overflow: hidden;
   }}
-  #image-container img {{
-    width: 100%;
-    height: auto;
-    max-height: 200px;
-  }}
+  #image-container img {{ width:100%; height:auto; max-height:200px; }}
 </style>
+
 <div id="container">
+  <div id="map-plot"></div>
   <div id="scatter-plot"></div>
   <div id="image-container"></div>
 </div>
+
 <script>
-  const points    = {points_json};
-  const cats      = Array.from(new Set(points.map(p=>p.category)));
-  
-  // build one trace per category
-  const traces    = cats.map(cat => {{
+  const points = {points_json};
+  const cats   = Array.from(new Set(points.map(p=>p.category)));
+
+  // 1) map traces
+  const mapTraces = cats.map(cat => {{
+    const pts = points.filter(p=>p.category===cat);
+    return {{
+      type: 'scattermapbox',
+      mode: 'markers',
+      name: cat,
+        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.x,       
+                            p.y   
+                            ]),
+      marker: {{
+        color: pts.map(p=>p.color),
+        symbol: 'circle',
+        size: 8,
+        line: {{ color:'red', width:2 }}
+      }},
+      hovertemplate:
+        `<b>ID:</b> %{{customdata[0]}}<br>` +
+        `<b>x:</b> %{{customdata[1]:.4f}}<br>` +
+        `<b>y:</b> %{{customdata[2]:.4f}}<br>` +
+        `<b>lat:</b> %{{lat:.2f}}<br>` +
+        `<b>lon:</b> %{{lon:.2f}}<extra></extra>`,
+      selectedpoints: [],
+      selected:   {{ marker: {{ color:'lightblue', size: 10 }} }},
+      unselected: {{ marker: {{ opacity:0.2 }} }}
+    }};
+  }});
+
+  const mapLayout = {{
+    mapbox: {{
+      style: 'mapbox://styles/mapbox/satellite-streets-v11',  
+      center: {{ lon: 0, lat: 0 }},
+      zoom: 0,
+      accesstoken: 'pk.eyJ1IjoiY2xhcmtjZ2EteWF5YW8iLCJhIjoiY21jdDl0MDZoMDM3cjJscHBmcWpjbnhkaiJ9.YkEYejNsY5-r3DtESJ46kQ'
+    }},
+    clickmode: 'event+select',
+    margin: {{ l:0,r:0,t:0,b:0 }},
+  }};
+
+  Plotly.newPlot('map-plot', mapTraces, mapLayout, {{responsive:true}});
+
+
+  // 2) scatter traces: build one trace per category
+  const scatterTraces = cats.map(cat => {{
     const pts = points.filter(p=>p.category===cat);
     return {{
         x:         pts.map(p=>p.x),
@@ -299,17 +340,24 @@ plot_html = f"""
         mode:      'markers',
         type:      'scatter',
         name:      cat,
-        marker:    {{ color: pts.map(p=>p.color), size:5 }},
+        marker: {{
+        color: pts.map(p=>p.color),
+        size: 5,
+        line: {{ color:'black', width:1 }}
+      }},
         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>`
+        `<b>lon:</b> %{{customdata[2]:.4f}}<extra></extra>`,
+      selectedpoints: [],
+      selected:   {{ marker: {{ color:'lightblue', size: 10}} }},
+      unselected: {{ marker: {{ opacity:0.2 }} }}
     }};
   }});
-  // plotly layout
-  const layout = {{
+
+  const scatterLayout = {{
     hovermode: 'closest',
     title:    {title_js},
     xaxis:    {{
@@ -343,50 +391,66 @@ plot_html = f"""
     clickmode:'event+select',
     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');
-  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 dates  = points[idx].dates_list;
-      // grab image container and clear out old thumbs
-      const container = document.getElementById('image-container');
-      container.innerHTML = '';
-      
-      // append each thumbnail and date
-      thumbs.forEach((url, i) => {{
-        if (url) {{
-          // create card to bundle image and label content
-          const card = document.createElement('div');
-          card.style.textAlign    = 'center';
-          card.style.marginBottom = '8px';
-          //image
-          const img = document.createElement('img');
-          img.src = url;
-          img.style.width  = '100%';
-          img.style.maxHeight = '180px';
-          
-          //label 
-          const label = document.createElement('p');
-          label.textContent = dates[i];
-          label.style.color     = 'white';
-          label.style.margin    = '4px 0 0 0';
-          label.style.fontSize  = '0.9em';
-          
-          //append
-          card.appendChild(img);
-          card.appendChild(label);
-          container.appendChild(card);
-        }}
-      }});
+
+  Plotly.newPlot('scatter-plot', scatterTraces, scatterLayout, {{responsive:true}});
+
+
+  // 3) click handler
+  function onPointClick(evt) {{
+    const pt      = evt.points[0];
+    const idx     = pt.pointIndex;
+    const traceNo = pt.curveNumber;
+
+    // highlight in both
+    Plotly.restyle('map-plot',     {{ selectedpoints:[[idx]] }}, [traceNo]);
+    Plotly.restyle('scatter-plot', {{ selectedpoints:[[idx]] }}, [traceNo]);
+
+    // pull id from array
+    const clickedId = Array.isArray(pt.customdata) 
+    // if 
+    ? pt.customdata[0]   
+    //else
+    : pt.customdata;
+
+    // find the record 
+    const record = points.find(p=>p.id===clickedId);
+    if(!record) return;
+
+    // show thumbnails
+    const thumbs = record.thumbs;
+    const dates  = record.dates_list;
+    const cont   = document.getElementById('image-container');
+    cont.innerHTML = '';
+
+    thumbs.forEach((url,i) => {{
+      if (!url) return;
+      const card  = document.createElement('div');
+      card.style.textAlign    = 'center';
+      card.style.marginBottom = '8px';
+
+      const img   = document.createElement('img');
+      img.src     = url;
+      img.style.width     = '100%';
+      img.style.maxHeight = '180px';
+
+      const lbl   = document.createElement('p');
+      lbl.textContent    = dates[i];
+      lbl.style.color    = 'white';
+      lbl.style.margin   = '4px 0 0';
+      lbl.style.fontSize = '0.9em';
+
+      card.appendChild(img);
+      card.appendChild(lbl);
+      cont.appendChild(card);
     }});
-  }});
+  }}
+
+  document.getElementById('map-plot').on('plotly_click',     onPointClick);
+  document.getElementById('scatter-plot').on('plotly_click', onPointClick);
 </script>
 """
+# embed into Streamlit 
+st_html(plot_html, height=500, width=2000, scrolling=False)
 
 # build up footer html
 year = datetime.datetime.now().year
@@ -410,5 +474,5 @@ footer_html = f"""
 # embed into Streamlit 
 col1, col2, col3 = st.columns([1, 5, 1])
 with col2:
-    st_html(plot_html, height=500, width=1000, scrolling=True)
+    
     st.markdown(footer_html, unsafe_allow_html=True)