viz

app.py

@@ -82,16 +82,16 @@ def data_comparison(df):
     ).interactive()
 
     legend = alt.Chart(df).mark_point().encode(
-        y=alt.Y('slice:N', axis=alt.Axis(orient='left'), title=""),
+        y=alt.Y('slice:N', axis=alt.Axis(orient='right'), title=""),
         x=alt.X("label"),
         shape=alt.Shape('label', scale=alt.Scale(
-            range=['circle', 'diamond']), legend=None),
+            range=['circle', 'diamond']), legend=None), 
         color=color
     ).add_selection(
         selection
     )
 
-    layered = scatter |legend
+    layered = legend | scatter
 
     layered = layered.configure_axis(
         grid=False
@@ -189,6 +189,9 @@ def topic_distribution(weights, smoothing=0.01):
 if __name__ == "__main__":
     ### STREAMLIT APP CONGFIG ###
     st.set_page_config(layout="wide", page_title="Error Slice Analysis")
+
+    ut.init_style()
+
     lcol, rcol = st.columns([2, 3])
     # ******* loading the mode and the data
     dataset = st.sidebar.selectbox(
@@ -231,18 +234,18 @@ if __name__ == "__main__":
             columns=['content', 'label', 'pred', 'loss'], max_rows=100)
         # table_html = table_html.replace("<th>", '<th align="left">')  # left-align the headers
         st.write(dataframe)
+        st.title('Word Distribution in Error Slice')
+        commontokens = frequent_tokens(data_df, tokenizer, loss_quantile=loss_quantile)
+        st.write(commontokens)
     # st_aggrid.AgGrid(dataframe)
     # table_html = dataframe.to_html(columns=['content', 'label', 'pred', 'loss'], max_rows=100)
     # table_html = table_html.replace("<th>", '<th align="left">')  # left-align the headers
     # st.write(table_html)
     
-    with rcol:
-        st.title('Word Distribution in Error Slice')
-        commontokens = frequent_tokens(data_df, tokenizer, loss_quantile=loss_quantile)
-        st.write(commontokens)
-    data_df['loss'] = data_df['loss'].astype(float)
-    losses = data_df['loss']
-    high_loss = losses.quantile(loss_quantile)
-    data_df['slice'] = 'high-loss'
-    data_df['slice'] = data_df['slice'].where(data_df['loss'] > high_loss, 'low-loss')
-    quant_panel(data_df)
+    with rcol:  
+        data_df['loss'] = data_df['loss'].astype(float)
+        losses = data_df['loss']
+        high_loss = losses.quantile(loss_quantile)
+        data_df['slice'] = 'high-loss'
+        data_df['slice'] = data_df['slice'].where(data_df['loss'] > high_loss, 'low-loss')
+        quant_panel(data_df)

error_analysis/utils/style_hacks.py

@@ -9,12 +9,22 @@ def init_style():
         """
     <style>
     /* Side Bar */
-    .sidebar .sidebar-content {
+    [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
+         width: 225px;
+       }
+       [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
+           width: 200px;
+           margin-left: -500px;
+    }
+    .css-1outpf7 {
         background-color:rgb(254 244 219);
         width:10rem;
-        padding:10px 10px 10px 10px;
+        padding:20px 20px 20px 20px;
     }
     /* Main Panel*/
+    .reportview-container .css-1lcbmhc .css-1outpf7 {
+                    padding-top: 35px;
+                }
     .css-18e3th9 {
         padding:10px 10px 10px 10px;
     }