Styling data table home page (#437)

src/aki_prj23_transparenzregister/ui/assets/networkx_style.css

@@ -1,40 +1,80 @@
-.networkx_style {
+.home {
-    float: right;
+    float: left;
-    margin-top: 20px;
+    width: 100%;
-    margin-left: 10px;
+    min-height: 100vh;
-    margin-right: 20px;
+    background-color: var(--ash-gray);
-    border: 1px solid;
-    border-color: var(--raisin-black);
-    border-radius: 20px;
-    width: 57%;
-    height: 100%;
 }
 
-.top_company_table_style {
+.home .top_company_table_style {
-    float: left;
+    background-color:white;
     margin-top: 20px;
-    margin-left: 20px;
+    margin-bottom: 20px;
-    margin-right: 10px;
+    display: inline-block;
+    margin-left: 2%;
+    margin-right: 1%;
     border: 1px solid;
     border-color: var(--raisin-black);
     border-radius: 20px;
-    width: 37%;
+    width: 32%;
-    height: 100%;
+    min-width: 400px;
+    max-width: 500px;
+    overflow-x: auto;
+    vertical-align: top;
 }
-.networkx_style .filter-wrapper {
+
+.home .top_company_table_style .header {
+    text-align: center;
+    align-items: center;
+    align-content: center;
+    vertical-align: middle;
+    padding: 20px;
+    margin: 0px;
+    color: var(--raisin-black);
+}
+
+.home .top_company_table_style .filter-wrapper-item {
+    display: inline-block;
+    padding: 20px;
+    margin: 0px;
+    width: 70%;
+}
+
+.home .top_company_table_style .filter-description {
+    margin: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+
+.home .networkx_style {
+    background-color:white;
+    margin-top: 20px;
+    display: inline-block;
+    margin-left: 1%;
+    margin-right: 2%;
+    border: 1px solid;
+    border-color: var(--raisin-black);
+    border-radius: 20px;
+    vertical-align: top;
+    width: 62%;
+    min-width: 600px;
+    max-width: 1500px;
+}
+
+.home .networkx_style .filter-wrapper {
     float: left;
     width: 100%;
 
 }
 
-.networkx_style .filter-wrapper .filter-wrapper-item {
+.home .networkx_style .filter-wrapper .filter-wrapper-item {
     display: inline-block;
     padding: 10px;
     width: 31%;
     vertical-align: top;
 }
 
-.networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style {
+.home .networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style {
     padding-bottom: 10px;
     margin-top: 1px;
     padding-left: 10px;
@@ -57,7 +97,7 @@
 
 }
 
-.networkx_style .filter-wrapper .filter-wrapper-item .filter-description {
+.home .networkx_style .filter-wrapper .filter-wrapper-item .filter-description {
     padding: 5px;
     padding-left: 10px;
     margin: 0px;
@@ -67,7 +107,7 @@
 
 }
 
-.networkx_style .switch-style {
+.home .networkx_style .switch-style {
     align-self: left;
     float: none;
     padding-bottom: 10px;
@@ -79,7 +119,7 @@
 
 }
 
-.networkx_style .switch-style .jAjsxw {
+.home .networkx_style .switch-style .jAjsxw {
     align-self: left;
     float: none;
     display: inline-block;
@@ -90,20 +130,20 @@
 
 }
 
-.networkx_style .graph-style {
+.home .networkx_style .graph-style {
 
     margin-top: 10px;
     padding-bottom: 0px;
     display: inline-block;
     margin: 0px;
     width: 100%;
-    height: 100%;
+    margin-bottom: 15px;
     /* float: inline-end, */
     /* background-color: var(--raisin-black); */
 
 }
 
-.networkx_style .graph-style .canvas {
+.home .networkx_style .graph-style .canvas {
     padding: 0px;
     margin: 0px;
     width: 100%

src/aki_prj23_transparenzregister/ui/assets/typography.css

@@ -1,5 +1,9 @@
-body {
+html, body {
+    border: 0;
+    min-height: 100vh;
     margin: 0;
+    padding: 0;
+    width: 100%;
 }
 
 .about-content {

src/aki_prj23_transparenzregister/ui/pages/home.py

@@ -1,6 +1,7 @@
 """Content of home page."""
 import os
 from functools import lru_cache
+from typing import Final
 
 import dash
 import dash_daq as daq
@@ -29,6 +30,15 @@ from aki_prj23_transparenzregister.utils.networkx.networkx_data import (
 )
 from aki_prj23_transparenzregister.utils.sql import entities
 
+COLORS: Final[dict[str, str]] = {
+    "light": "#edefef",
+    "lavender-blush": "#f3e8ee",
+    "ash-gray": "#bacdb0",
+    "cambridge-blue": "#729b79",
+    "paynes-gray": "#475b63",
+    "raisin-black": "#2e2c2f",
+}
+
 dash.register_page(
     __name__,
     path="/",
@@ -62,6 +72,17 @@ def update_table(
     table_df[metric_dropdown_value] = (
         table_df[metric_dropdown_value].astype(float).round(6)
     )
+    # translate to german
+    table_df = table_df.rename(
+        columns={
+            "designation": "Unternehmen/Person",
+            "category": "Kategorie",
+            metric_dropdown_value: f"Maß: {metric_dropdown_value}",
+        }
+    )
+    table_df = table_df.replace(
+        {"Kategorie": {"company": "Unternehmen", "person": "Person"}}
+    )
     columns = [{"name": i, "id": i} for i in table_df.columns]
     return table_df.to_dict("records"), columns  # type: ignore
 
@@ -124,7 +145,7 @@ def _update_figure(  # noqa: PLR0913
     )
 
 
-def layout() -> list[html]:
+def layout() -> html:
     """Generates the Layout of the Homepage."""
     person_relation_types = person_relation_type_filter()
     company_relation_types = company_relation_type_filter()
@@ -144,21 +165,22 @@ def layout() -> list[html]:
         "degree",
     )
     return html.Div(
+        className="home",
         children=html.Div(
             children=[
                 html.Div(
                     className="top_company_table_style",
                     children=[
-                        html.H1(
+                        html.H2(
-                            title="Top Ten Nodes in Graph by Metric",
+                            className="header",
-                            style={"align": "mid"},
+                            children=["Top 10 Unternehmen/Personen"],
                         ),
                         html.Div(
                             className="filter-wrapper-item",
                             children=[
                                 html.H5(
                                     className="filter-description",
-                                    children=["Filter Metric:"],
+                                    children=["Wählen Sie ein Zentralitätsmaß:"],
                                 ),
                                 dcc.Dropdown(
                                     [
@@ -169,22 +191,65 @@ def layout() -> list[html]:
                                     ],
                                     "closeness",
                                     id="dropdown_table_metric",
-                                    className="dropdown_style",
+                                    className="dropdown-style",
                                     persistence=True,
                                 ),
                             ],
                         ),
+                        html.Div(
+                            className="table-wrapper",
+                            children=[
                                 dash_table.DataTable(
                                     top_companies_dict,
                                     top_companies_columns,
                                     id="metric_table",
+                                    style_table={
+                                        "width": "90%",
+                                        "word-wrap": "break-word",
+                                        "marginLeft": "auto",
+                                        "marginRight": "auto",
+                                        "padding": "20px",
+                                        "color": COLORS["raisin-black"],
+                                    },
+                                    style_header={
+                                        "backgroundColor": COLORS["raisin-black"],
+                                        "fontWeight": "bold",
+                                        "color": "white",
+                                        "fontSize": "16px",
+                                    },
+                                    style_cell={
+                                        "textAlign": "center",
+                                        "fontFamily": "Times",
+                                        "fontSize": "14px",
+                                        "padding": "10px",
+                                    },
+                                    style_data={
+                                        "whiteSpace": "normal",
+                                        "height": "auto",
+                                    },
+                                    style_data_conditional=[
+                                        {
+                                            "if": {
+                                                "state": "selected"
+                                            },  # 'active' | 'selected'
+                                            "backgroundColor": COLORS["light"],
+                                            "border": "1px solid "
+                                            + COLORS["paynes-gray"],
+                                        },
+                                    ],
+                                    style_filter={
+                                        "text-align": "center",
+                                        "backgroundColor": COLORS["light"],
+                                    },
+                                ),
+                            ],
                         ),
                     ],
                 ),
                 html.Div(
                     className="networkx_style",
                     children=[
-                        html.H1(className="header", children=["Social Graph"]),
+                        html.H2(className="header", children=["Social Graph"]),
                         html.Div(
                             className="filter-wrapper",
                             id="company_dropdown",
@@ -327,8 +392,8 @@ def layout() -> list[html]:
                         ),
                     ],
                 ),
-            ]
+            ],
-        )
+        ),
     )
 
 

tests/ui/home_page_test.py

@@ -65,20 +65,20 @@ def test_update_table() -> None:
 
     expected_result_df = [
         {
-            "designation": "Musterfrau, Martina",
+            "Unternehmen/Person": "Musterfrau, Martina",
-            "category": "Person",
+            "Kategorie": "Person",
-            "centrality": 42.0,
+            "Maß: centrality": 42.0,
         },
         {
-            "designation": "Mustermann, Max",
+            "Unternehmen/Person": "Mustermann, Max",
-            "category": "Person",
+            "Kategorie": "Person",
-            "centrality": 3.14,
+            "Maß: centrality": 3.14,
         },
     ]
     expected_result_columns = [
-        {"name": "designation", "id": "designation"},
+        {"name": "Unternehmen/Person", "id": "Unternehmen/Person"},
-        {"name": "category", "id": "category"},
+        {"name": "Kategorie", "id": "Kategorie"},
-        {"name": "centrality", "id": "centrality"},
+        {"name": "Maß: centrality", "id": "Maß: centrality"},
     ]
 
     result_df, result_columns = home.update_table(selected_metric, metrics)