make dashboard pretty

SebChw · Apr 13, 2024 · 65523df · 65523df
1 parent db5a3e7
commit 65523df
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,14 @@
 <p align="center"><img src="docs/art.png" alt="image" width="200" height="auto"></p>
 
-# ART - Actually Robust Training Framework
-
-![Tests](https://github.com/SebChw/art/actions/workflows/tests.yml/badge.svg)
-![Docs](
-https://readthedocs.org/projects/actually-robust-training/badge/?version=latest&style=flat)
+<p align="center">
+    <b>ART - Actually Robust Training</b>
+    <br>
+    <em>Robust, explainable, and easy to debug deep learning experiments.</em>
+</p>
+<p align="center">
+<img src="https://github.com/SebChw/art/actions/workflows/tests.yml/badge.svg" alt="Tests">
+<img src="https://readthedocs.org/projects/actually-robust-training/badge/?version=latest&style=flat" alt="Docs">
+</p>
 
 ----
 
@@ -17,14 +21,13 @@ To get the most out of ART, you should have a basic knowledge of (or eagerness t
 - PyTorch Lightning: https://lightning.ai/docs/pytorch/stable/levels/core_skills.html
 
 **Table of contents:**
-- [ART - Actually Robust Training framework](#art---actually-robust-training-framework)
-  - [Installation](#installation)
-  - [Quickstart](#quickstart)
-  - [Project creation](#project-creation)
-  - [Dashboard](#dashboard)
-  - [Tutorials](#tutorials)
-  - [API Cheatsheet](#api-cheatsheet)
-  - [Contributing](#contributing)
+- [Installation](#installation)
+- [Quickstart](#quickstart)
+- [Project creation](#project-creation)
+- [Dashboard](#dashboard)
+- [Tutorials](#tutorials)
+- [API Cheatsheet](#api-cheatsheet)
+- [Contributing](#contributing)
 
 ## Installation
 To get started, install ART package using:

diff --git a/art/dashboard/app.py b/art/dashboard/app.py
@@ -54,13 +54,13 @@ def updateTable(
             "if": {
                 "filter_query": "{successful} = 1",
             },
-            "backgroundColor": "rgba(0,255,0,0.2)",
+            "backgroundColor": "rgba(210,235,222,1)",
         },
         {
             "if": {
                 "filter_query": "{successful} = 0",
             },
-            "backgroundColor": "rgba(255,0,0,0.2)",
+            "backgroundColor": "rgba(247,197,205,1)",
         },
     ]
 
@@ -70,8 +70,12 @@ def updateTable(
         + ["timestamp"]
     )
     columnDefs = [{"name": i, "id": i} for i in ordered_names]
+
+    formatted_df = step_runs_df.applymap(
+        lambda x: "{:.4f}".format(x) if isinstance(x, (int, float)) else x
+    )
     return (
-        step_runs_df.to_dict("records"),
+        formatted_df.to_dict("records"),
         columnDefs,
         conditional,
     )
@@ -153,7 +157,12 @@ def update_figure(
         y_attr = x_attr
 
     return px.scatter(
-        step_runs_df, x=x_attr, y=y_attr, size="size", hover_data=hover_parameters_names
+        step_runs_df,
+        x=x_attr,
+        y=y_attr,
+        size="size",
+        hover_data=hover_parameters_names,
+        template="ggplot2",
     )
 
 

diff --git a/art/dashboard/assets/art.png b/art/dashboard/assets/art.png
diff --git a/art/dashboard/assets/pallet.jpg b/art/dashboard/assets/pallet.jpg
diff --git a/art/dashboard/assets/timeline.css b/art/dashboard/assets/timeline.css
@@ -1,5 +1,11 @@
 .mantine-Timeline-itemBullet {
 
-    background-color: red;
-    border: 2px solid #7a1912;
+    background-color: #FF0000;
+    border: 2px solid #DC3230;
+}
+
+.mantine-Timeline-itemBullet[data-active="true"] {
+
+    background-color: #00B050;
+    border: 2px solid #009E73;
 }
diff --git a/art/dashboard/const.py b/art/dashboard/const.py
@@ -5,5 +5,5 @@
 DF = "df"
 
 
-RADIUS_AROUND_STYLE = {"border-radius": "25px", "border": "2px solid #a87332"}
+RADIUS_AROUND_STYLE = {"border-radius": "5px", "border": "2px solid #BBBBBB"}
 PAD_STYLE = {"padding": "15px"}
diff --git a/art/dashboard/layout.py b/art/dashboard/layout.py
@@ -53,16 +53,17 @@ def get_navbar():
                     dbc.Row(
                         [
                             dbc.Col(
-                                html.Img(
-                                    src=get_asset_url("pallet.jpg"), height="60ex"
-                                ),
+                                html.Img(src=get_asset_url("art.png"), height="60ex"),
                                 width=3,
                             ),
                             dbc.Col(
                                 html.Div(
                                     "Actually Robust Training",
                                     className="text-xl-center fs-5 fw-bold",
-                                    style={"color": "#a87332"},
+                                    style={
+                                        "color": "#000000",
+                                        "font-family": "Calibri",
+                                    },
                                 ),
                                 width=9,
                                 align="center",
@@ -72,7 +73,12 @@ def get_navbar():
                         align="left",
                     )
                 ),
-                dbc.Button("Help", id="open", n_clicks=0),
+                dbc.Button(
+                    "Help",
+                    id="open",
+                    n_clicks=0,
+                    style={"background-color": "#00B050", "border-color": "#009E73"},
+                ),
                 dbc.Modal(
                     [
                         dbc.ModalHeader(
@@ -119,6 +125,9 @@ def get_layout(ordered_steps: List[str], timeline: dmc.Timeline) -> dbc.Containe
                                 filter_action="native",
                                 sort_action="native",
                                 sort_mode="multi",
+                                style_cell={
+                                    "font-family": "Calibri",
+                                },
                             ),
                         ],
                         style=RADIUS_AROUND_STYLE | PAD_STYLE,

diff --git a/docs/dashboard.png b/docs/dashboard.png