Update src/streamlit_app.py

src/streamlit_app.py

@@ -76,39 +76,53 @@ def make_band(df, thickness=20):
 human_band = make_band(df_human)
 synth_band = make_band(df_synth)
 
+# --- REPLACEMENT STARTS HERE ---
+from plotly.subplots import make_subplots
+
 COMMON_LEN = 500
 t_common = np.linspace(0, 1, COMMON_LEN)
 
-human_interp = np.interp(
-    t_common,
-    df_human["t_norm"].values,
-    human_band[0]
+# Interpolate to smooth the data
+human_interp = np.interp(t_common, df_human["t_norm"].values, df_human["roll_var_norm"])
+synth_interp = np.interp(t_common, df_synth["t_norm"].values, df_synth["roll_var_norm"])
+
+# Create a subplot with 2 rows. 
+# "vertical_spacing" is the magic number for your gap! (0.1 = 10% gap)
+fig = make_subplots(
+    rows=2, cols=1, 
+    shared_xaxes=True, 
+    vertical_spacing=0.15,  # <--- ADJUST THIS to make the gap bigger/smaller
+    subplot_titles=("Human: Big Flame", f"Synthetic: {choice.title()}")
 )
 
-synth_interp = np.interp(
-    t_common,
-    df_synth["t_norm"].values,
-    synth_band[0]
-)
+# Helper to make the bands "thick" so they look like strips, not thin lines
+def make_thick_band(data_row, thickness=10):
+    return [data_row] * thickness
 
-Z = np.vstack([
-    human_interp,
-    synth_interp
-])
+# Add Human Trace (Top)
+fig.add_trace(go.Heatmap(
+    z=make_thick_band(human_interp),
+    colorscale="Plasma",
+    showscale=False,
+    zmin=0, zmax=1  # Lock colors so they are comparable
+), row=1, col=1)
 
-fig = go.Figure(go.Heatmap(
-    z=Z,
-    x=df_human["t_norm"],
-    y=["Human", "Synthetic"],
+# Add Synthetic Trace (Bottom)
+fig.add_trace(go.Heatmap(
+    z=make_thick_band(synth_interp),
     colorscale="Plasma",
-    showscale=False
-))
+    showscale=False,
+    zmin=0, zmax=1
+), row=2, col=1)
 
 fig.update_layout(
-    height=200,
-    margin=dict(l=10, r=10, t=30, b=10),
-    xaxis=dict(title="Normalized Interaction Time"),
-    yaxis=dict(showticklabels=False),
+    height=350,  # Made it slightly taller to accommodate the gap
+    margin=dict(l=10, r=10, t=50, b=10),
+    xaxis2_title="Normalized Interaction Time", # Label only the bottom axis
 )
 
-st.plotly_chart(fig, use_container_width=True)
+# Hide the y-axis ticks for a cleaner look
+fig.update_yaxes(showticklabels=False, showgrid=False, zeroline=False)
+fig.update_xaxes(showgrid=False, zeroline=False)
+
+st.plotly_chart(fig, use_container_width=True)