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;