Update ui.py

ui.py

@@ -416,54 +416,27 @@ def render_multifile_summary(plotly_config=None):
                 for i, col in enumerate(allCategories)
             }
 
-            with st.container():
-                fig6_sort_options = {
-                    "File Name":       ("files", True),
-                    "% of Instructor": ("Instructor", False),
-                }
-                selected_fig6_sort = st.selectbox(
-                    "Sort by:",
-                    options=list(fig6_sort_options.keys()),
-                    key="multifile_role_sort",
-                )
-                fig6_sort_col, fig6_ascending = fig6_sort_options[selected_fig6_sort]
-                # Gracefully fall back to file name if Instructor column missing
-                if fig6_sort_col not in df6.columns:
-                    fig6_sort_col, fig6_ascending = "files", True
-                fig6 = px.bar(df6.sort_values(fig6_sort_col, ascending=fig6_ascending),
-                               x="files", y=allCategories,
-                               title="Percent of File Duration Spoken by Each Speaker/Role",
-                               labels={"files": "Files"},
-                               color_discrete_map=role_color_map,
-                               hover_data={"files": True})
-                fig6.update_layout(yaxis_title="% of File Duration")
-                fig6.update_xaxes(showticklabels=False)
-                st.plotly_chart(fig6, use_container_width=True, config=cfg)
-
-            with st.container():
-                sort_options = {
-                    "File Name":          ("files", True),
-                    "% of Single Voice":  ("Single Voice", False),
-                }
-                selected_sort = st.selectbox(
-                    "Sort cross-file voice categories by:",
-                    options=list(sort_options.keys()),
-                    key="multifile_voice_sort",
-                )
-                sort_col, ascending = sort_options[selected_sort]
-                fig7 = px.bar(
-                    df7.sort_values(by=sort_col, ascending=ascending),
-                    x="files", y=["Single Voice", "Multi Voice", "No Voice"],
-                    title=f"Cross-file Voice Categories sorted by {selected_sort}",
-                    labels={"files": "Files"},
-                    color_discrete_map=voice_color_map,
-                    hover_data={"files": True},
-                )
-                fig7.update_layout(yaxis_title="% of File Duration")
-                fig7.update_xaxes(showticklabels=False)
-                st.plotly_chart(fig7, use_container_width=True, config=cfg)
+            # All three sort selectors rendered FIRST (above their charts) so
+            # selectbox reruns don't cause the page to scroll downward.
+            fig6_sort_options = {
+                "File Name":       ("files", True),
+                "% of Instructor": ("Instructor", False),
+            }
+            selected_fig6_sort = st.selectbox(
+                "Sort Percent of File Duration by:",
+                options=list(fig6_sort_options.keys()),
+                key="multifile_role_sort",
+            )
 
-            st.divider()
+            sort_options = {
+                "File Name":         ("files", True),
+                "% of Single Voice": ("Single Voice", False),
+            }
+            selected_sort = st.selectbox(
+                "Sort Cross-file Voice Categories by:",
+                options=list(sort_options.keys()),
+                key="multifile_voice_sort",
+            )
 
             # New chart: Single Voice broken down by role, plus Multi Voice and No Voice
             df8, role_voice_cols = utils.build_multifile_role_voice_df(
@@ -479,25 +452,53 @@ def render_multifile_summary(plotly_config=None):
             }
             role_voice_color_map.update(voice_color_map)
 
-            with st.container():
-                role_sort_options = {
-                    "File Name":          ("files", True),
-                    "% of Multi Voice":   ("Multi Voice", False),
-                }
+            role_sort_options = {
+                "File Name":        ("files", True),
+                "% of Multi Voice": ("Multi Voice", True),   # least → most
+            }
+            selected_role_sort = st.selectbox(
+                "Sort Cross-file Role & Voice Breakdown by:",
+                options=list(role_sort_options.keys()),
+                key="multifile_role_voice_sort",
+            )
 
-                selected_role_sort = st.selectbox(
-                    "Sort cross-file role/voice breakdown by:",
-                    options=list(role_sort_options.keys()),
-                    key="multifile_role_voice_sort",
-                )
-                sort_col8, ascending8 = role_sort_options[selected_role_sort]
-                fig8 = px.bar(
-                    df8.sort_values(by=sort_col8, ascending=ascending8),
-                    x="files", y=role_voice_cols,
-                    color_discrete_map=role_voice_color_map,
-                    labels={"files": "Files"},
-                    hover_data={"files": True},
-                    title=f"Cross-file Role & Voice Breakdown sorted by {selected_role_sort}",
+            # ── Charts rendered below all selectors ──────────────────────────
+            fig6_sort_col, fig6_ascending = fig6_sort_options[selected_fig6_sort]
+            if fig6_sort_col not in df6.columns:
+                fig6_sort_col, fig6_ascending = "files", True
+            fig6 = px.bar(df6.sort_values(fig6_sort_col, ascending=fig6_ascending),
+                           x="files", y=allCategories,
+                           title="Percent of File Duration Spoken by Each Speaker/Role",
+                           labels={"files": "Files"},
+                           color_discrete_map=role_color_map,
+                           hover_data={"files": True})
+            fig6.update_layout(yaxis_title="% of File Duration")
+            fig6.update_xaxes(showticklabels=False)
+            st.plotly_chart(fig6, use_container_width=True, config=cfg)
+
+            sort_col, ascending = sort_options[selected_sort]
+            fig7 = px.bar(
+                df7.sort_values(by=sort_col, ascending=ascending),
+                x="files", y=["Single Voice", "Multi Voice", "No Voice"],
+                title=f"Cross-file Voice Categories sorted by {selected_sort}",
+                labels={"files": "Files"},
+                color_discrete_map=voice_color_map,
+                hover_data={"files": True},
+            )
+            fig7.update_layout(yaxis_title="% of File Duration")
+            fig7.update_xaxes(showticklabels=False)
+            st.plotly_chart(fig7, use_container_width=True, config=cfg)
+
+            st.divider()
+
+            sort_col8, ascending8 = role_sort_options[selected_role_sort]
+            fig8 = px.bar(
+                df8.sort_values(by=sort_col8, ascending=ascending8),
+                x="files", y=role_voice_cols,
+                color_discrete_map=role_voice_color_map,
+                labels={"files": "Files"},
+                hover_data={"files": True},
+                title=f"Cross-file Role & Voice Breakdown sorted by {selected_role_sort}",
                 )
                 fig8.update_layout(yaxis_title="% of File Duration")
                 fig8.update_xaxes(showticklabels=False)