Lots of styling

Author: Thijss

src/power_grid_model_ds/_core/visualizer/layout/colors.py

@@ -1,13 +1,14 @@
-BACKGROUND_COLOR = "#707070"
 
+YELLOW = "#facc37"
 CYTO_COLORS = {
-    "line": "#facc37",
+    "line": YELLOW,
     "link": "green",
     "transformer": "#4290f5",
-    "node": "#facc37",
+    "node": YELLOW,
     "selected": "#e28743",
     "selected_transformer": "#0349a3",
     "substation_node": "purple",
     "open_branch": "#c9c9c9",
     "highlighted": "#a10000",
 }
+BACKGROUND_COLOR = "#555555"

src/power_grid_model_ds/_core/visualizer/layout/cytoscape.py

@@ -9,7 +9,7 @@
 LayoutOptions = Literal["", "random", "circle", "concentric", "grid", "cose", "breadthfirst", "preset"]
 
 _CYTO_INNER_STYLE = {"width": "100%", "height": "100%", "background-color": BACKGROUND_COLOR}
-_CYTO_OUTER_STYLE = {"height": "80vh", "border": "thin lightgrey solid", "margin": "0 5px 0 5px"}
+_CYTO_OUTER_STYLE = {"height": "75vh"}
 
 
 def get_cytoscape_html(layout: LayoutOptions, elements: list[dict[str, Any]]) -> html.Div:

src/power_grid_model_ds/_core/visualizer/layout/header.py

@@ -0,0 +1,25 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+from power_grid_model_ds._core.visualizer.layout.colors import BACKGROUND_COLOR
+from power_grid_model_ds._core.visualizer.layout.legenda import LEGENDA_HTML
+from power_grid_model_ds._core.visualizer.layout.search_form import SEARCH_FORM_HTML
+
+
+HEADER_HTML = dbc.Row(
+    [
+        dbc.Col(LEGENDA_HTML, className="d-flex align-items-center", style={"margin": "0 10px"}),
+        dbc.Col(
+            dbc.Card(SEARCH_FORM_HTML, style={"background-color": "#555555", "color": "white", "border": "none", "border-radius": 0}),
+            className="d-flex justify-content-center align-items-center"
+        ),
+        dbc.Col(
+            # Right column - empty or for future controls
+            html.Div(),
+            className="d-flex justify-content-end align-items-center"
+        ),
+    ],
+    style={"background-color": BACKGROUND_COLOR},
+
+
+)

src/power_grid_model_ds/_core/visualizer/layout/legenda.py

@@ -0,0 +1,25 @@
+from dash import html
+
+from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
+
+_TEST_SHADOW = "0 0 5px #000"
+
+_NODE_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["node"], "text-shadow": _TEST_SHADOW}
+_SUBSTATION_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["substation_node"], "text-shadow": _TEST_SHADOW}
+_LINE_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["line"], "text-shadow": _TEST_SHADOW}
+_LINK_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["link"], "text-shadow": _TEST_SHADOW}
+_TRANSFORMER_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["transformer"], "text-shadow": _TEST_SHADOW}
+_OPEN_BRANCH_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["open_branch"], "text-shadow": _TEST_SHADOW}
+LEGENDA_HTML = html.Div(
+            [
+                html.I(className="fas fa-circle", style=_NODE_ICON_STYLE),
+                html.I(className="fas fa-diamond", style=_SUBSTATION_ICON_STYLE),
+                html.I(className="fas fa-arrow-right-long", style=_LINE_ICON_STYLE),
+                html.I(className="fas fa-arrow-right-long", style=_LINK_ICON_STYLE),
+                html.I(className="fas fa-arrow-right-long", style=_TRANSFORMER_ICON_STYLE),
+                html.I(className="fas fas fa-ellipsis", style=_OPEN_BRANCH_ICON_STYLE),
+            ],
+)
+
+
+# <i class="fas fa-ellipsis"></i>

src/power_grid_model_ds/_core/visualizer/layout/search_form.py

@@ -1,8 +1,10 @@
 import dash_bootstrap_components as dbc
 from dash import html
 
+_SPAN_TEXT_STYLE = {"margin": "8px", "font-weight": "bold"}
+_INPUT_STYLE = {"width": "150px", "display": "inline-block"}
 # Create your form components
-group_input = dbc.Select(
+GROUP_INPUT = dbc.Select(
     id="search-form-group-input",
     options=[
         {"label": "node", "value": "node"},
@@ -12,24 +14,24 @@
         {"label": "branch", "value": "branch"},
     ],
     value="node",  # Default value
-    style={"width": "150px", "display": "inline-block"}
+    style=_INPUT_STYLE
 )
 
-column_input = dbc.Select(
+COLUMN_INPUT = dbc.Select(
     id="search-form-column-input",
     options=[{"label": "id", "value": "id"}],
     value="id",  # Default value
-    style={"width": "150px", "display": "inline-block"}
+    style=_INPUT_STYLE
 )
 
-value_input = dbc.Input(
+VALUE_INPUT = dbc.Input(
     id="search-form-value-input",
     placeholder="Enter value",
     type="text",
-    style={"width": "150px", "display": "inline-block"}
+    style=_INPUT_STYLE
 )
 
-operator_input = dbc.Select(
+OPERATOR_INPUT = dbc.Select(
     id="search-form-operator-input",
     options=[
         {"label": "=", "value": "="},
@@ -45,12 +47,12 @@
 # Arrange as a sentence
 SEARCH_FORM_HTML = html.Div(
     [
-        html.Span("Search ", className="mr-2", style={"margin-right": "8px"}),
-        group_input,
-        html.Span(" with ", className="mx-2", style={"margin": "0 8px"}),
-        column_input,
-        operator_input,
-        value_input,
+        html.Span("Search ", className="mr-2", style=_SPAN_TEXT_STYLE),
+        GROUP_INPUT,
+        html.Span(" with ", className="mx-2", style=_SPAN_TEXT_STYLE),
+        COLUMN_INPUT,
+        OPERATOR_INPUT,
+        VALUE_INPUT,
     ],
 style={
         "display": "flex",
@@ -61,3 +63,4 @@
         "width": "100%"  # Ensures the container takes full width
     }
 )
+

src/power_grid_model_ds/_core/visualizer/main.py

@@ -1,17 +1,21 @@
 import dash_bootstrap_components as dbc
 from dash import Dash, dcc, html
+from dash_bootstrap_components.icons import FONT_AWESOME
 
 from power_grid_model_ds import Grid
 from power_grid_model_ds._core.visualizer.callbacks import (  # noqa: F401  # pylint: disable=unused-import
     element_selection,
     search_form,
 )
 from power_grid_model_ds._core.visualizer.layout.cytoscape import LayoutOptions, get_cytoscape_html
-from power_grid_model_ds._core.visualizer.layout.search_form import SEARCH_FORM_HTML
+from power_grid_model_ds._core.visualizer.layout.header import HEADER_HTML
 from power_grid_model_ds._core.visualizer.layout.selection_output import SELECTION_OUTPUT_HTML
 from power_grid_model_ds._core.visualizer.parsers import parse_branches, parse_node_array
 from power_grid_model_ds.arrays import NodeArray
 
+GOOGLE_FONTS = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+MDBOOTSTRAP = "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/8.2.0/mdb.min.css"
+
 
 def visualize(grid: Grid, layout: LayoutOptions = "", debug: bool = False):
     """Visualize the Grid.
@@ -39,14 +43,15 @@ def visualize(grid: Grid, layout: LayoutOptions = "", debug: bool = False):
     elements = parse_node_array(grid.node) + parse_branches(grid)
     cytoscape_html = get_cytoscape_html(layout, elements)
 
-    app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
+    app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP, MDBOOTSTRAP, FONT_AWESOME, GOOGLE_FONTS])
     app.layout = html.Div(
         [
             columns_store,
-            SEARCH_FORM_HTML,
+            HEADER_HTML,
             cytoscape_html,
             SELECTION_OUTPUT_HTML,
-        ]
+        ],
+
     )
     app.run(debug=debug)