viz

app.py

@@ -236,14 +236,14 @@ if __name__ == "__main__":
         st.session_state["embedding"] = embedding_umap
 
     with lcol:
-        st.title('Error Slices')
+        st.markdown('<h3>Error Slices</h3>',unsafe_allow_html=True)
         dataframe = data_df[['content', 'label', 'pred', 'loss']].sort_values(
             by=['loss'], ascending=False)
         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(dataframe)
-        st.title('Word Distribution in Error Slice')
+        st.markdown('<h3>Word Distribution in Error Slice</h3>', unsafe_allow_html=True)
         commontokens = frequent_tokens(data_df, tokenizer, loss_quantile=loss_quantile)
         st.write(commontokens)
     # st_aggrid.AgGrid(dataframe)

error_analysis/utils/style_hacks.py

@@ -11,20 +11,25 @@ def init_style():
     /* Side Bar */
     [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
          width: 225px;
+         margin-left: -500px;
        }
     [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
-        width: 500px;
+        width: 225px;
         margin-left: -500px;
     }
+    [data-testid="stSidebar"]{
+        flex-basis: unset;
+    }
     .css-1outpf7 {
         background-color:rgb(254 244 219);
         width:10rem;
         padding:10px 10px 10px 10px;
     }
-    /* Main Panel*/
-    .css-gvhdpn.e1tzin5v0 {
+    /* Main Panel*/ 
+    [data-testid="stVerticalBlock"]{
         margin-left: -200px;
-    }
+        padding:10px 10px 10px -200px;
+    }  
     .css-18e3th9 {
         padding:10px 10px 10px -200px;
     }
@@ -59,10 +64,10 @@ def init_style():
     .sectionHeader {
         font-size:10px;
     }
-    h1 {
+    [data-testid="stMarkdownContainer]{
         font-family: sans-serif;
         font-weight: 500;
-        font-size: 1.5 rem;
+        font-size: 1.5 rem !important;
         color: rgb(250, 250, 250);
         padding: 1.25rem 0px 1rem;
         margin: 0px;