Update my_pages/ica.py

my_pages/ica.py

@@ -1,62 +1,156 @@
-# pages/ica.py
-import streamlit as st
-import matplotlib.pyplot as plt
 import numpy as np
+import plotly.graph_objects as go
+from streamlit_plotly_events import plotly_events
+import streamlit as st
 
 def render():
-    st.title("Intentional - Conventional - Arbitrary Triangle")
+    st.title("ICA Triangle (Intentional · Conventional · Arbitrary)")
 
-    # Vertices of the triangle
-    vertices = {
-        "Intentional": (0.0, 0.0),
+    # --------------------------
+    # Geometry: equilateral triangle in 2D
+    # --------------------------
+    V = {
+        "Intentional":  (0.0, 0.0),
         "Conventional": (1.0, 0.0),
-        "Arbitrary": (0.5, np.sqrt(3)/2)
+        "Arbitrary":    (0.5, np.sqrt(3) / 2),
     }
 
-    # Explanations
-    explanations = {
-        "Intentional": "An intentional choice is deliberate and goal-oriented.",
-        "Conventional": "A conventional choice follows established norms.",
-        "Arbitrary": "Random seeds — a purely arbitrary choice."
+    # Explanations for each corner
+    corner_examples = {
+        "Arbitrary": (
+            "Arbitrary",
+            "Examples: random seeds, shuffling order, tie-breaking by index, default RNG states."
+        ),
+        "Conventional": (
+            "Conventional",
+            "Examples: using default hyperparams because 'that’s what everyone does', standard scalers, popular benchmarks."
+        ),
+        "Intentional": (
+            "Intentional",
+            "Examples: constraint-aware objectives, domain rules, fairness constraints, targeted regularization."
+        ),
     }
 
-    if "clicked_vertex" not in st.session_state:
-        st.session_state.clicked_vertex = None
+    # Keep selected point in session
+    if "ica_click" not in st.session_state:
+        st.session_state.ica_click = None
+    if "ica_nearest" not in st.session_state:
+        st.session_state.ica_nearest = None
 
-    # Function to handle clicks
-    def onclick(event):
-        if event.xdata is None or event.ydata is None:
-            return  # Clicked outside plot
+    # --------------------------
+    # Build base figure
+    # --------------------------
+    def base_figure(selected=None):
+        fig = go.Figure()
 
-        click_point = np.array([event.xdata, event.ydata])
-        closest_vertex = min(
-            vertices.keys(),
-            key=lambda v: np.linalg.norm(click_point - np.array(vertices[v]))
-        )
-        st.session_state.clicked_vertex = closest_vertex
-        st.experimental_rerun()
+        # Triangle outline
+        tri_x = [V["Intentional"][0], V["Conventional"][0], V["Arbitrary"][0], V["Intentional"][0]]
+        tri_y = [V["Intentional"][1], V["Conventional"][1], V["Arbitrary"][1], V["Intentional"][1]]
+        fig.add_trace(go.Scatter(
+            x=tri_x, y=tri_y, mode="lines",
+            line=dict(color="black", width=2), hoverinfo="skip", showlegend=False
+        ))
 
-    # Draw triangle
-    fig, ax = plt.subplots()
-    triangle_coords = np.array(list(vertices.values()) + [vertices["Intentional"]])
-    ax.plot(triangle_coords[:, 0], triangle_coords[:, 1], 'k-', lw=2)
+        # Vertex markers + labels
+        for name, (x, y) in V.items():
+            fig.add_trace(go.Scatter(
+                x=[x], y=[y], mode="markers+text",
+                marker=dict(size=10, color="black"),
+                text=[name], textposition="top center",
+                hoverinfo="skip", showlegend=False
+            ))
 
-    # Label vertices
-    for label, (x, y) in vertices.items():
-        ax.text(x, y + 0.05, label, ha='center', fontsize=12, fontweight='bold')
-        ax.plot(x, y, 'o', markersize=10)
+        # A dense transparent clickable grid within triangle
+        grid = np.linspace(0.0, 1.0, 41)
+        gx, gy = np.meshgrid(grid, grid)
+        pts = np.vstack([gx.ravel(), gy.ravel()]).T  # (N,2)
 
-    ax.set_aspect('equal')
-    ax.axis('off')
+        def inside_triangle(p):
+            # Barycentric method for triangle ABC
+            A = np.array(V["Intentional"])
+            B = np.array(V["Conventional"])
+            C = np.array(V["Arbitrary"])
+            v0 = C - A
+            v1 = B - A
+            v2 = p - A
+            den = v0[0]*v1[1] - v1[0]*v0[1]
+            if abs(den) < 1e-9:
+                return False
+            a = (v2[0]*v1[1] - v1[0]*v2[1]) / den
+            b = (v0[0]*v2[1] - v2[0]*v0[1]) / den
+            c = 1 - a - b
+            return (a >= 0) and (b >= 0) and (c >= 0)
 
-    # Connect click event
-    cid = fig.canvas.mpl_connect("button_press_event", onclick)
+        in_tri = np.array([inside_triangle(p) for p in pts])
+        tri_pts = pts[in_tri]
 
-    st.pyplot(fig)
+        # Invisible markers to capture click events anywhere inside the triangle
+        fig.add_trace(go.Scatter(
+            x=tri_pts[:, 0], y=tri_pts[:, 1], mode="markers",
+            marker=dict(size=24, opacity=0.0),  # invisible, but clickable
+            hoverinfo="skip", showlegend=False, name="click-capture"
+        ))
 
-    # Show explanation if a vertex was clicked
-    if st.session_state.clicked_vertex:
-        st.markdown(
-            f"### You clicked near **{st.session_state.clicked_vertex}**\n"
-            f"{explanations[st.session_state.clicked_vertex]}"
+        # Highlight the selected point (if any)
+        if selected is not None:
+            fig.add_trace(go.Scatter(
+                x=[selected[0]], y=[selected[1]], mode="markers",
+                marker=dict(size=16, color="#1f77b4", line=dict(width=2, color="black")),
+                hoverinfo="skip", showlegend=False, name="selected"
+            ))
+
+        fig.update_layout(
+            margin=dict(l=10, r=10, t=20, b=10),
+            xaxis=dict(visible=False, range=[-0.05, 1.05], scaleanchor="y", scaleratio=1),
+            yaxis=dict(visible=False, range=[-0.05, 0.95]),
+            clickmode="event+select",
+            dragmode=False,
+            height=420,
         )
+        return fig
+
+    fig = base_figure(selected=st.session_state.ica_click)
+
+    # Render and capture click
+    events = plotly_events(
+        fig,
+        click_event=True,
+        hover_event=False,
+        select_event=False,
+        override_height=420,
+        override_width="100%",
+        key="ica_triangle"
+    )
+
+    # Process click
+    if events:
+        # The click snaps to the nearest invisible grid point:
+        x = float(events[0]["x"])
+        y = float(events[0]["y"])
+        st.session_state.ica_click = (x, y)
+
+        # Determine nearest vertex
+        def dist(p, q):
+            return np.linalg.norm(np.array(p) - np.array(q))
+        nearest = min(V.keys(), key=lambda k: dist((x, y), V[k]))
+        st.session_state.ica_nearest = nearest
+
+    # --------------------------
+    # Output text based on nearest vertex
+    # --------------------------
+    st.markdown("---")
+    if st.session_state.ica_nearest:
+        title, details = corner_examples[st.session_state.ica_nearest]
+        st.subheader(f"Closest to: {title}")
+        # If it's very close, emphasize "pure" examples
+        # (distance threshold ~ 0.12 in this normalized triangle space)
+        d = np.linalg.norm(np.array(st.session_state.ica_click) - np.array(V[st.session_state.ica_nearest]))
+        if st.session_state.ica_nearest == "Arbitrary" and d < 0.12:
+            st.write("**Example spotlight:** Random seeds (purely arbitrary choice).")
+        elif st.session_state.ica_nearest == "Conventional" and d < 0.12:
+            st.write("**Example spotlight:** Using library defaults just because it's common.")
+        elif st.session_state.ica_nearest == "Intentional" and d < 0.12:
+            st.write("**Example spotlight:** Encoding a fairness/robustness constraint explicitly.")
+        st.write(details)
+    else:
+        st.info("Click anywhere inside the triangle to indicate where your decision sits on the ICA spectrum.")