Update app.py

app.py

@@ -36,10 +36,10 @@ def _(mo):
         upload_species,
         upload_decomp
     ], align="center")
-    
+
     # Place as the last statement to ensure Marimo renders it!
     upload_ui
-    return upload_decomp, upload_species, upload_ui, upload_yield
+    return upload_decomp, upload_species, upload_yield
 
 
 @app.cell
@@ -123,7 +123,7 @@ def _(ALL_SITES, mo, species_data):
 
 
 @app.cell
-def _(drop_comp1, drop_comp2, drop_single, mo, slider_count):
+def _(drop_comp1, drop_comp2, drop_single, mo):
     # CSS styling
     dropdown_styles = mo.Html("""
     <style>
@@ -174,19 +174,22 @@ def _(drop_comp1, drop_comp2, drop_single, mo, slider_count):
         "Individual Site": drop_single,
         "Compare Sites": mo.hstack([drop_comp1, drop_comp2], gap=4)
     })
+    return dropdown_styles, tabs
+
 
+@app.cell
+def _(dropdown_styles, mo, slider_count, tabs):
     # Build the final control panel
     controls = mo.vstack([
         dropdown_styles,
         tabs,
         mo.hstack([slider_count], justify="center")
     ], align="center", gap=4)
-
-    return controls, tabs
+    return (controls,)
 
 
 @app.cell
-def _(math):
+def _(math, tabs):
     # Sunburst chart: dimensions + position
     CX, CY = 500, 380
     MAX_RADIUS = 370
@@ -218,7 +221,7 @@ def _(math):
         large_arc = "0" if end_angle - start_angle <= 180 else "1"
         return f"M {p1[0]} {p1[1]} A {r_outer} {r_outer} 0 {large_arc} 1 {p2[0]} {p2[1]} L {p3[0]} {p3[1]} A {r_inner} {r_inner} 0 {large_arc} 0 {p4[0]} {p4[1]} Z"
 
-    def make_tooltip(index, tx, ty, group_name, species_name, avg_yield, num_sites):
+    def make_tooltip(unique_id, tx, ty, group_name, species_name, avg_yield, num_sites):
         # Bound the tooltip coordinates so it doesn't clip off the 1000x1000 SVG canvas
         tx = max(10, min(tx, 1000 - TW - 10))
         ty = max(10, min(ty, 1000 - TH - 10))
@@ -226,8 +229,9 @@ def _(math):
         safe_name  = species_name.strip()[:38]
         yield_str = f"Average yield: {avg_yield:.1f} kg ha\u207b\u00b9"
         sites_str = f"Occurs in: {num_sites} site(s)"
+        tip_id = unique_id.replace("seg", "tip")
         return f"""
-    <g id="tip-{index}" class="tip" transform="translate({tx},{ty})">
+    <g id="{tip_id}" class="tip" transform="translate({tx},{ty})">
       <rect width="{TW}" height="{TH}" rx="10" ry="10"
             fill="#1e1e2e" stroke="#45475a" stroke-width="1.5"
             filter="url(#tipshadow)"/>
@@ -241,7 +245,7 @@ def _(math):
       <text x="12" y="92" font-family="Inter,sans-serif" font-size="12"
             fill="#f9e2af">{sites_str}</text>
     </g>"""
-
+    _ = tabs
     return (
         CX,
         CY,
@@ -308,13 +312,14 @@ def _(
     tooltip_elements = []
     css_hover_rules = []
 
+    tab_id_prefix = active_tab.replace(" ", "_").lower() # unique tab prefix
     seg_index = 0 # unique id counter shared across all segments
 
     for group_idx, group_name in enumerate(GROUPS):
         group_items = grouped_data[group_name]
         if not group_items:
             continue
-        
+
         base_angle = group_idx * 120 # hardcoded 120 degree angle bcs only 3 groups
         tiers = {}
         for item in group_items:
@@ -322,7 +327,7 @@ def _(
             if sites not in tiers:
                 tiers[sites] = []
             tiers[sites].append(item)
-        
+
         sorted_tier_keys = sorted(tiers.keys(), reverse=True)
         num_tiers = len(sorted_tier_keys)
         ring_thickness = (MAX_RADIUS - MIN_RADIUS) / max(1, num_tiers)
@@ -336,11 +341,14 @@ def _(
             current_start_angle = base_angle
 
             for item in tier_items:
+                unique_seg_id = f"{tab_id_prefix}-seg-{seg_index}"
+                unique_tip_id = f"{tab_id_prefix}-tip-{seg_index}"
+            
                 if total_yield > 0:
                     sweep_angle = (item["yield"] / total_yield) * 120
                 else:
                     sweep_angle = 120 / len(tier_items)
-                
+
                 end_angle = current_start_angle + sweep_angle
                 opacity = 1.0
                 fill_color = ""
@@ -348,10 +356,10 @@ def _(
                 if active_tab == "Compare Sites": # coloring depends on which tab the user is viewing
                     in_s1 = drop_comp1.value in item["sites"]
                     in_s2 = drop_comp2.value in item["sites"]
-                    if in_s1 and in_s2:   fill_color = SITE_COLOR_BOTH
-                    elif in_s1:           fill_color = SITE_COLOR_S1_ONLY
-                    elif in_s2:           fill_color = SITE_COLOR_S2_ONLY
-                    else:                 fill_color = SITE_COLOR_NEITHER
+                    if in_s1 and in_s2: fill_color = SITE_COLOR_BOTH
+                    elif in_s1: fill_color = SITE_COLOR_S1_ONLY
+                    elif in_s2: fill_color = SITE_COLOR_S2_ONLY
+                    else: fill_color = SITE_COLOR_NEITHER
                 elif active_tab == "Individual Site":
                     hue = group_hues[group_name]
                     lightness = 85 - min(50, (item["yield"] / max(1, total_yield)) * 45)
@@ -367,7 +375,7 @@ def _(
                 angle_center = current_start_angle + sweep_angle / 2
 
                 core_paths.append(
-                    f'<path id="seg-{seg_index}" d="{path_d}" '
+                    f'<path id="seg-{unique_seg_id}" d="{path_d}" '
                     f'fill="{fill_color}" opacity="{opacity}" '
                     f'stroke="white" stroke-width="2" cursor="pointer"/>'
                 )
@@ -378,15 +386,15 @@ def _(
                 ty = tip_cy - TH / 2
 
                 tooltip_elements.append(
-                    make_tooltip(seg_index, tx, ty, group_name,
+                    make_tooltip(unique_seg_id, tx, ty, group_name,
                                  item["id"], item["yield"], item["num_sites"])
                 )
 
                 # add hovering effect
                 css_hover_rules.append(
-                    f"svg:has(#seg-{seg_index}:hover) #seg-{seg_index} "
+                    f"svg:has(#seg-{unique_seg_id}:hover) #seg-{unique_seg_id} "
                     f"{{ filter: brightness(1.35) drop-shadow(0 0 7px rgba(255,255,255,0.6)); }}\n"
-                    f"svg:has(#seg-{seg_index}:hover) #tip-{seg_index} "
+                    f"svg:has(#seg-{unique_seg_id}:hover) #tip-{unique_tip_id} "
                     f"{{ visibility: visible; }}"
                 )
 
@@ -427,10 +435,10 @@ def _(
             (SITE_COLOR_NEITHER, "In neither site"),
         ]
 
-        LX, LY = 0, 0    # top-left corner of the legend box
+        LX, LY = 0, 0 # top-left corner of the legend box
         LW, LH = 210, 150  # box dimensions
-        ROW_H = 26        # vertical spacing between rows
-        SWATCH_S = 14        # swatch square size
+        ROW_H = 26 # vertical spacing between rows
+        SWATCH_S = 14 # swatch square size
 
         annotation_elements.append(
             f'<g id="compare-legend" style="pointer-events:none;">'
@@ -481,6 +489,7 @@ def _(
     CX,
     CY,
     MIN_RADIUS,
+    active_tab,
     annotation_elements,
     controls,
     core_paths,
@@ -489,40 +498,37 @@ def _(
     tooltip_elements,
 ):
     # Combine everything + visualize
+    render_key = active_tab.replace(" ", "-").lower() # unique ID for each tab
+
     css = f"""
     <style>
-      .tip {{ visibility: hidden; pointer-events: none; }}
-      path[id^="seg-"] {{ transition: filter 0.15s; }}
-      {chr(10).join(css_hover_rules)}
+      #{render_key}-container .tip {{ visibility: hidden; pointer-events: none; }}
+      #{render_key}-container path[id^="seg-"] {{ transition: filter 0.15s; }}
+      {chr(10).join([f"#{render_key}-container {rule}" for rule in css_hover_rules])}
     </style>
     """
 
-    # core + annotions are merged here
     svg_markup = f"""
-    {css}
-    <svg width="1000" height="1000" viewBox="0 0 1000 1000"
-         xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <filter id="tipshadow" x="-5%" y="-5%" width="120%" height="130%">
-          <feDropShadow dx="0" dy="3" stdDeviation="5"
-                        flood-color="#000" flood-opacity="0.45"/>
-        </filter>
-      </defs>
-
-      <circle cx="{CX}" cy="{CY}" r="{MIN_RADIUS}" fill="#f4f4f4" stroke="none"/>
-  
-      {"".join(core_paths)}
-  
-      {"".join(annotation_elements)}
-  
-      {"".join(tooltip_elements)}
-    </svg>
+    <div id="{render_key}-container">
+        {css}
+        <svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="tipshadow" x="-5%" y="-5%" width="120%" height="130%">
+              <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#000" flood-opacity="0.45"/>
+            </filter>
+          </defs>
+          <circle cx="{CX}" cy="{CY}" r="{MIN_RADIUS}" fill="#f4f4f4" stroke="none"/>
+          {"".join(core_paths)}
+          {"".join(annotation_elements)}
+          {"".join(tooltip_elements)}
+        </svg>
+    </div>
     """
 
     final_dashboard = mo.vstack([controls, mo.Html(svg_markup)], align="center", gap=8)
     final_dashboard
-    return final_dashboard,
+    return
 
 
 if __name__ == "__main__":
-    app.run()
+    app.run()