Formated overview and drifting tabs

squaredev-io · momegas · Feb 23, 2023 · Feb 8, 2023 · Feb 10, 2023 · Feb 11, 2023
commit fd9badc8d1f9220ee54dfd606869ecb4bfe25538
diff --git a/whitebox/streamlit/cards.py b/whitebox/streamlit/cards.py
@@ -1,12 +1,28 @@
 import streamlit as st
 
 
-def card(text):
+def card1(text1, text2):
     st.markdown(
         f"""
     <div class="card text-white bg-dark mb-3" style="max-width: 280rem;">
         <div class="card-body">
-            <p class="card-text">{text}</p>
+            <p class="card-text"><b>{text1}</b></p>
+            <p class="card-text">{text2}</p>
+        </div>
+    </div>
+    """,
+        unsafe_allow_html=True,
+    )
+
+
+def card(text1, text2, text3):
+    st.markdown(
+        f"""
+    <div class="card text-white bg-dark mb-3" style="width: 44rem;">
+        <div class="card-body">
+            <h5 class="card-title"><b>{text1}</b></h5>
+            <h6 class="card-subtitle mb-2 text-muted">type: {text2}</h6>
+            <p class="card-text">{text3}</p>
         </div>
     </div>
     """,

diff --git a/whitebox/streamlit/mock/performance.json b/whitebox/streamlit/mock/performance.json
@@ -0,0 +1,131 @@
+[
+    {
+        "id": "b4bff1cd-76bd-47e6-8446-4ce690096dac",
+        "created_at": "2023-02-09T14:33:00.473312",
+        "updated_at": "2023-02-09T14:33:00.473312",
+        "accuracy": 0.6,
+        "precision": {
+            "micro": 0.6,
+            "macro": 0.7333333333333334,
+            "weighted": 0.9199999999999999
+        },
+        "recall": {
+            "micro": 0.6,
+            "macro": 0.7000000000000001,
+            "weighted": 0.6
+        },
+        "f1": {
+            "micro": 0.6,
+            "macro": 0.5833333333333334,
+            "weighted": 0.675
+        },
+        "confusion_matrix": {
+            "class0": {
+                "true_negative": 5,
+                "false_positive": 4,
+                "false_negative": 0,
+                "true_positive": 1
+            },
+            "class1": {
+                "true_negative": 5,
+                "false_positive": 0,
+                "false_negative": 2,
+                "true_positive": 3
+            },
+            "class2": {
+                "true_negative": 6,
+                "false_positive": 0,
+                "false_negative": 2,
+                "true_positive": 2
+            }
+        },
+        "model_id": "83539c2b-579f-4a2c-b7ba-02d31c9408d8",
+        "timestamp": "2022-12-22T00:00:00"
+    },
+    {
+        "id": "0ffa0e1d-8e8a-4658-8443-7405a9cd6fd5",
+        "created_at": "2023-02-09T14:36:00.522083",
+        "updated_at": "2023-02-09T14:36:00.522083",
+        "accuracy": 0.45,
+        "precision": {
+            "micro": 0.45,
+            "macro": 0.48611111111111116,
+            "weighted": 0.6125
+        },
+        "recall": {
+            "micro": 0.45,
+            "macro": 0.46296296296296297,
+            "weighted": 0.45
+        },
+        "f1": {
+            "micro": 0.45,
+            "macro": 0.4222222222222222,
+            "weighted": 0.5000000000000001
+        },
+        "confusion_matrix": {
+            "class0": {
+                "true_negative": 11,
+                "false_positive": 7,
+                "false_negative": 1,
+                "true_positive": 1
+            },
+            "class1": {
+                "true_negative": 10,
+                "false_positive": 1,
+                "false_negative": 4,
+                "true_positive": 5
+            },
+            "class2": {
+                "true_negative": 8,
+                "false_positive": 3,
+                "false_negative": 6,
+                "true_positive": 3
+            }
+        },
+        "model_id": "83539c2b-579f-4a2c-b7ba-02d31c9408d8",
+        "timestamp": "2022-12-23T00:00:00"
+    },
+    {
+        "id": "ca19193b-5c9b-478b-93a7-48c7b08af306",
+        "created_at": "2023-02-09T14:39:00.618561",
+        "updated_at": "2023-02-09T14:39:00.618561",
+        "accuracy": 0.43333333333333335,
+        "precision": {
+            "micro": 0.43333333333333335,
+            "macro": 0.48860398860398857,
+            "weighted": 0.6921652421652421
+        },
+        "recall": {
+            "micro": 0.43333333333333335,
+            "macro": 0.4447415329768271,
+            "weighted": 0.43333333333333335
+        },
+        "f1": {
+            "micro": 0.43333333333333335,
+            "macro": 0.389923526765632,
+            "weighted": 0.5119928025191183
+        },
+        "confusion_matrix": {
+            "class0": {
+                "true_negative": 16,
+                "false_positive": 12,
+                "false_negative": 1,
+                "true_positive": 1
+            },
+            "class1": {
+                "true_negative": 12,
+                "false_positive": 1,
+                "false_negative": 9,
+                "true_positive": 8
+            },
+            "class2": {
+                "true_negative": 15,
+                "false_positive": 4,
+                "false_negative": 7,
+                "true_positive": 4
+            }
+        },
+        "model_id": "83539c2b-579f-4a2c-b7ba-02d31c9408d8",
+        "timestamp": "2022-12-24T00:00:00"
+    }
+]
diff --git a/whitebox/streamlit/tabs/drifting.py b/whitebox/streamlit/tabs/drifting.py
@@ -9,6 +9,7 @@ def create_drift_tab(drift):
     It created 2 tabs of graphs, one with the combined drifts of variables
     and one tab with graphs for each one variable.
     """
+    st.title("Drifting")
     # Isolate timeseties parts from the drift object
     value_df, drift_df = export_drift_timeseries_from_dict(drift)
     # Keep the columns except the time/index

diff --git a/whitebox/streamlit/tabs/overview.py b/whitebox/streamlit/tabs/overview.py
@@ -12,10 +12,30 @@ def create_overview_tab(model, confusion_matrix, base_evaluation_metrics):
         unsafe_allow_html=True,
     )
 
-    st.header("Model: " + model["name"])
-    st.write(card(model["description"]))
+    st.title("Overview")
+    st.write(card(model["name"], model["type"], model["description"]))
     st.header("Performance")
-    st.table(base_evaluation_metrics)
+
+    col1, col2, col3, col4 = st.columns(4)
+    col1.metric(
+        label="Accuracy",
+        value=base_evaluation_metrics["accuracy"].iloc[0],
+    )
+
+    col2.metric(
+        label="Precision",
+        value=base_evaluation_metrics["precision"].iloc[0],
+    )
+
+    col3.metric(
+        label="Recall",
+        value=base_evaluation_metrics["recall"].iloc[0],
+    )
+
+    col4.metric(
+        label="F1",
+        value=base_evaluation_metrics["f1"].iloc[0],
+    )
 
     st.header("Confusion matrix")
     disp = ConfusionMatrixDisplay(