Add the date label under thumbnail at streamlit_app.py

src/streamlit_app.py

@@ -244,6 +244,9 @@ color_dict_label = {
 chips_df["thumbs"] = chips_df["urls"].apply(
     lambda urls: [create_thumbnail(p) for p in urls]
 )
+# create dates Python list
+chips_df["dates_list"] = chips_df["dates"].apply(ast.literal_eval)
+
 # build a list of points dictionary
 points = (
     chips_df
@@ -251,7 +254,7 @@ points = (
         "cls_dim1": "x",
         "cls_dim2": "y",
         "Land Cover": "category"
-    })[["x","y","category","thumbs"]]
+    })[["x","y","category","thumbs","dates_list"]]
     .assign(color=chips_df["Land Cover"].map(color_dict_label))
     .to_dict(orient="records")
 )
@@ -334,17 +337,40 @@ plot_html = f"""
   // click event
   Plotly.newPlot(gd, traces, layout, {{ responsive: true }}).then(() => {{
     gd.on('plotly_click', evt => {{
-      const thumbs = evt.points[0].customdata;
-      // grab thumbs for the clicked point
+      // 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');
-      // clear out old thumbs
       container.innerHTML = '';
-      // append each new thumbnail
-      thumbs.forEach(url => {{
+      
+      // 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;
-          container.appendChild(img);
+          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);
         }}
       }});
     }});
@@ -356,7 +382,6 @@ plot_html = f"""
 year = datetime.datetime.now().year
 footer_html = f"""
 <style>
-/* make the footer text a bit smaller and centered */
 #footer {{
     margin-top: 1rem;
     color: rgb(204,156,172);