Update my_pages/information_loss.py

my_pages/information_loss.py

@@ -1,7 +1,5 @@
-import streamlit as st
-from utils import go_to
-import random
 import pandas as pd
+import streamlit as st
 
 ALL_FEATURES = [
     "Credit Score", "Annual Income", "Loan Amount Requested",
@@ -11,76 +9,48 @@ ALL_FEATURES = [
 ]
 
 def render():
-    st.title("Information Loss Demo")
+    st.title("Information Loss")
 
-    # --- SESSION STATE ---
+    # Session state init
     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
-        }
 
-    # --- LAYOUT ---
-    col1, col2 = st.columns([1, 2])
+    # Top left: applicant image
+    top_left, top_right = st.columns([1, 1])
 
-    # TOP LEFT: Loan applicant icon
-    with col1:
+    with top_left:
         st.image(
             "https://cdn-icons-png.flaticon.com/512/1048/1048949.png",
             caption="Loan Applicant",
-            width=200
-        )
-
-    # TOP RIGHT: Feature cloud
-    with col2:
-        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:
-            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."
+            width=260,
         )
-        # Clear the query param to avoid re-adding on refresh
-        st.query_params.clear()
-        st.experimental_rerun()
 
-    # --- MESSAGE ---
+    # Top right: simple clickable list of features
+    with top_right:
+        st.markdown("**Available Features**")
+        for feature in st.session_state.available_features.copy():
+            if st.button(feature, key=feature):
+                st.session_state.selected_features.append(f"{feature} (approx)")
+                st.session_state.available_features.remove(feature)
+                st.session_state.show_message = (
+                    f"Sorry, '{feature}' cannot be precisely collected. Adding approximation instead."
+                )
+                st.rerun()
+
+    # Centered message
     if "show_message" in st.session_state:
         st.markdown(
-            f"<div style='text-align:center; color:red; font-weight:bold; margin:20px 0;'>{st.session_state.show_message}</div>",
-            unsafe_allow_html=True
+            f"<div style='text-align:center; color:#c0392b; font-weight:600; margin:14px 0;'>{st.session_state.show_message}</div>",
+            unsafe_allow_html=True,
         )
         del st.session_state.show_message
 
     st.markdown("---")
 
-    # --- BOTTOM HALF: Dataset table ---
+    # Bottom half: dataset table
     st.markdown("### Current Dataset")
     if st.session_state.selected_features:
         cols = st.session_state.selected_features + ["Target Label"]