css styling

app.py

@@ -26,6 +26,7 @@ from streamlit_vega_lite import altair_component
 
 # utils
 from random import sample
+from error_analysis import utils as ut
 # from PIL import Image
 
 
@@ -82,10 +83,10 @@ def data_comparison(df):
     ).interactive()
 
     legend = alt.Chart(df).mark_point().encode(
-        y=alt.Y('slice:N', axis=alt.Axis(orient='right'), title=""),
+        y=alt.Y('slice:N', axis=alt.Axis(orient='left'), title=""),
         x=alt.X("label"),
         shape=alt.Shape('label', scale=alt.Scale(
-            range=['circle', 'diamond']), legend=None),
+            range=['circle', 'diamond']), legend=['neg', 'pos']),
         color=color
     ).add_selection(
         selection
@@ -189,7 +190,7 @@ def topic_distribution(weights, smoothing=0.01):
 if __name__ == "__main__":
     ### STREAMLIT APP CONGFIG ###
     st.set_page_config(layout="wide", page_title="Error Slice Analysis")
-    lcol, rcol = st.columns([3, 2])
+    lcol, rcol = st.columns([2, 3])
     # ******* loading the mode and the data
     dataset = st.sidebar.selectbox(
         "Dataset",

error_analysis/utils/__init__.py

@@ -0,0 +1 @@
+from .style_hacks import *

error_analysis/utils/style_hacks.py

@@ -0,0 +1,67 @@
+"""
+ placeholder for all streamlit style hacks
+"""
+import streamlit as st
+
+
+def init_style():
+    return st.write(
+        """
+    <style>
+    /* Side Bar */
+    .css-1outpf7 {
+        background-color:rgb(254 244 219);
+        width:30rem;
+        padding:10px 10px 10px 10px;
+    }
+    /* Main Panel*/
+    .css-18e3th9 {
+        padding:10px 10px 10px 10px;
+    }
+    .css-1ubw6au:last-child{
+        background-color:lightblue;
+    }
+
+    /* Model Panels : element-container */
+    .element-container{
+            border-style:none
+    }
+
+    /* Radio Button Direction*/
+    div.row-widget.stRadio > div{flex-direction:row;}
+
+    /* Expander Boz*/
+    .streamlit-expander {
+        border-width: 0px;
+        border-bottom: 1px solid #A29C9B;
+        border-radius: 10px;
+    }
+
+    .streamlit-expanderHeader {
+        font-style: italic;
+        font-weight :600;
+        font-size:16px;
+        padding-top:0px;
+        padding-left: 0px;
+        color:#A29C9B
+
+    /* Section Headers */
+    .sectionHeader {
+        font-size:10px;
+    }
+
+    /* text input*/
+    .st-e5 {
+        background-color:lightblue;
+    }
+    /*line special*/
+    .line-one{
+        border-width: 0px;
+        border-bottom: 1px solid #A29C9B;
+        border-radius: 50px; 
+    }
+
+    </style>
+""",
+        unsafe_allow_html=True,
+    )