Update my_pages/information_loss.py

my_pages/information_loss.py

@@ -1,8 +1,8 @@
 import streamlit as st
 from utils import go_to
 import random
+import pandas as pd
 
-# Sample list of possible features
 ALL_FEATURES = [
     "Credit Score", "Annual Income", "Loan Amount Requested",
     "Number of Previous Loans", "Debt-to-Income Ratio",
@@ -13,53 +13,78 @@ ALL_FEATURES = [
 def render():
     st.title("Information Loss Demo")
 
-    # Session state setup
+    # --- SESSION STATE ---
     if "available_features" not in st.session_state:
         st.session_state.available_features = ALL_FEATURES.copy()
     if "selected_features" not in st.session_state:
         st.session_state.selected_features = []
+    if "cloud_positions" not in st.session_state:
+        # Pre-generate random positions for each feature
+        st.session_state.cloud_positions = {
+            feature: (random.randint(0, 80), random.randint(0, 80))
+            for feature in ALL_FEATURES
+        }
 
-    # --- TOP HALF ---
-    col1, col2 = st.columns([1, 1])
+    # --- LAYOUT ---
+    col1, col2 = st.columns([1, 2])
 
-    # Top left: loan applicant icon/image
+    # TOP LEFT: Loan applicant icon
     with col1:
         st.image(
-            "https://cdn-icons-png.flaticon.com/512/1048/1048949.png", 
-            caption="Loan Applicant", 
+            "https://cdn-icons-png.flaticon.com/512/1048/1048949.png",
+            caption="Loan Applicant",
             width=200
         )
 
-    # Top right: clickable "feature cloud"
+    # TOP RIGHT: Feature cloud
     with col2:
-        st.markdown("### Available Features (click to add approximation)")
-        random.shuffle(st.session_state.available_features)  # scatter order each run
+        st.markdown("### Available Features")
+
+        # Create a fixed-height area for the cloud
+        cloud_html = "<div style='position: relative; height: 300px; border: 1px dashed #ccc;'>"
 
         for feature in st.session_state.available_features:
-            if st.button(feature, key=feature):
-                # Show popup / message
-                with st.spinner(f"Adding approximation for '{feature}'..."):
-                    st.session_state.selected_features.append(feature + " (approx)")
-                    st.session_state.available_features.remove(feature)
-                    st.session_state.show_message = f"Sorry, '{feature}' cannot be precisely collected. Adding approximation instead."
+            top, left = st.session_state.cloud_positions[feature]
+            # Button styled as text link in random position
+            button_html = f"""
+            <form action="" method="get" style="position: absolute; top: {top}%; left: {left}%; transform: translate(-50%, -50%);">
+                <button name="feature_click" value="{feature}" style="background:none; border:none; color:blue; text-decoration:underline; cursor:pointer;">
+                    {feature}
+                </button>
+            </form>
+            """
+            cloud_html += button_html
+
+        cloud_html += "</div>"
+        st.markdown(cloud_html, unsafe_allow_html=True)
+
+    # --- CLICK HANDLING ---
+    clicked_feature = st.query_params.get("feature_click")
+    if clicked_feature and clicked_feature in st.session_state.available_features:
+        st.session_state.selected_features.append(clicked_feature + " (approx)")
+        st.session_state.available_features.remove(clicked_feature)
+        st.session_state.show_message = (
+            f"Sorry, '{clicked_feature}' cannot be precisely collected. Adding approximation instead."
+        )
+        # Clear the query param to avoid re-adding on refresh
+        st.query_params.clear()
+        st.experimental_rerun()
 
-    # Show popup message in center if exists
+    # --- MESSAGE ---
     if "show_message" in st.session_state:
         st.markdown(
-            f"<div style='text-align:center; color:red; font-weight:bold;'>{st.session_state.show_message}</div>",
+            f"<div style='text-align:center; color:red; font-weight:bold; margin:20px 0;'>{st.session_state.show_message}</div>",
             unsafe_allow_html=True
         )
-        del st.session_state.show_message  # remove after showing
+        del st.session_state.show_message
 
     st.markdown("---")
 
     # --- BOTTOM HALF: Dataset table ---
     st.markdown("### Current Dataset")
     if st.session_state.selected_features:
-        # Create table with placeholder values
-        import pandas as pd
         cols = st.session_state.selected_features + ["Target Label"]
         df = pd.DataFrame(columns=cols)
         st.dataframe(df, use_container_width=True)
     else:
-        st.info("No features added yet. Click a feature above to add it to the dataset.")
+        st.info("No features added yet. Click a feature above to add it to the dataset.")