Rewrite code and apply some suggestions from review

Signed-off-by: Thijs Baaijen <[email protected]>

Author: Thijss

src/power_grid_model_ds/_core/visualizer/callbacks/config.py

@@ -6,7 +6,8 @@
 from dash import Input, Output, State, callback
 from dash.exceptions import PreventUpdate
 
-from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import BRANCH_WIDTH, NODE_SIZE, STYLESHEET
+from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import BRANCH_WIDTH, NODE_SIZE
+from power_grid_model_ds._core.visualizer.typing import STYLESHEET
 
 
 @callback(

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

@@ -5,8 +5,7 @@
 import dash
 from dash import Input, Output, callback
 
-from power_grid_model_ds._core.visualizer.layout.header import CONFIG_DIV, SEARCH_DIV
-from power_grid_model_ds._core.visualizer.layout.legenda import LEGENDA_HTML
+from power_grid_model_ds._core.visualizer.layout.header import CONFIG_DIV, LEGENDA_DIV, SEARCH_DIV
 
 
 @callback(
@@ -21,10 +20,10 @@ def update_right_col(_btn1, _btn2, _btn3):
     """Update the right column content based on the button clicked."""
     ctx = dash.callback_context
     if not ctx.triggered:
-        return LEGENDA_HTML
+        return LEGENDA_DIV
     button_id = ctx.triggered[0]["prop_id"].split(".")[0]
     button_map = {
-        "btn-legend": LEGENDA_HTML,
+        "btn-legend": LEGENDA_DIV,
         "btn-search": SEARCH_DIV,
         "btn-config": CONFIG_DIV,
     }

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

@@ -6,7 +6,7 @@
 from dash.exceptions import PreventUpdate
 
 from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
-from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import STYLESHEET
+from power_grid_model_ds._core.visualizer.typing import STYLESHEET
 
 
 @callback(

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

@@ -4,13 +4,8 @@
 
 """Contains selectors for the Cytoscape stylesheet."""
 
-from typing import Any
-
 from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
 
-STYLESHEET = list[dict[str, Any]]
-
-
 NODE_SIZE = 100
 BRANCH_WIDTH = 10
 

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

@@ -5,23 +5,21 @@
 import dash_bootstrap_components as dbc
 from dash import html
 
-from power_grid_model_ds._core.visualizer.layout.cytoscape_config import LAYOUT_DROPDOWN_HTML, SCALE_INPUTS
-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
+from power_grid_model_ds._core.visualizer.layout.header_config import CONFIG_ELEMENTS
+from power_grid_model_ds._core.visualizer.layout.header_legenda import LEGENDA_ELEMENTS, LEGENDA_STYLE
+from power_grid_model_ds._core.visualizer.layout.header_search import SEARCH_ELEMENTS
+
+_CONTENT_COLUMN_STYLE = {
+    "display": "flex",
+    "align-items": "center",
+    "width": "100%",
+}
+
+
+CONFIG_DIV = html.Div(CONFIG_ELEMENTS, style=_CONTENT_COLUMN_STYLE | {"justify-content": "space-between"})
+SEARCH_DIV = html.Div(SEARCH_ELEMENTS, style=_CONTENT_COLUMN_STYLE | {"justify-content": "center"})
+LEGENDA_DIV = html.Div(LEGENDA_ELEMENTS, style=_CONTENT_COLUMN_STYLE | LEGENDA_STYLE)
 
-SHOW_ARROWS_CHECKBOX = dbc.Checkbox(
-    id="show-arrows",
-    label="Show arrows",
-    value=True,
-    className="me-2",
-    label_style={"color": "white"},
-    style={"margin-top": "10px"},
-)
-CONFIG_DIV = html.Div(
-    SCALE_INPUTS + LAYOUT_DROPDOWN_HTML + [SHOW_ARROWS_CHECKBOX],
-    className="d-flex justify-content-end align-items-center",
-)
-SEARCH_DIV = html.Div(SEARCH_FORM_HTML)
 
 HEADER_HTML = dbc.Row(
     [
@@ -40,12 +38,14 @@
             },
         ),
         dbc.Col(
-            html.Div([LEGENDA_HTML, SEARCH_DIV, CONFIG_DIV], id="right-col-content", className="text-end"),
+            [LEGENDA_DIV, SEARCH_DIV, CONFIG_DIV],
+            id="right-col-content",
             width=7,
             style={
                 "display": "flex",
                 "align-items": "center",
-                "justify-content": "center",
+                "justify-content": "space-between",
+                # "width": "100%",
             },
         ),
     ],
@@ -55,7 +55,7 @@
         "padding": "1rem 0",
         "margin": 0,
         "height": "90px",
+        "width": "100%",
     },
-    className="g-0",
     align="center",
 )

src/power_grid_model_ds/_core/visualizer/layout/cytoscape_config.py renamed to src/power_grid_model_ds/_core/visualizer/layout/header_config.py

@@ -2,6 +2,7 @@
 #
 # SPDX-License-Identifier: MPL-2.0
 
+import dash_bootstrap_components as dbc
 from dash import dcc, html
 
 from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
@@ -32,23 +33,28 @@
     ),
 ]
 
-SCALE_INPUTS = [
-    html.Div(
-        NODE_SCALE_HTML + EDGE_SCALE_HTML,
-        style={"margin": "0 20px 0 10px"},
+_SCALING_DIV = html.Div(NODE_SCALE_HTML + EDGE_SCALE_HTML, style={"margin": "0 20px 0 10px"})
+
+
+_LAYOUT_DROPDOWN = html.Div(
+    dcc.Dropdown(
+        id="dropdown-update-layout",
+        placeholder="Select layout",
+        value="breadthfirst",
+        clearable=False,
+        options=[{"label": name.capitalize(), "value": name} for name in LAYOUT_OPTIONS],
+        style={"width": "200px"},
     ),
-]
+    style={"margin": "0 20px 0 10px", "color": "black"},
+)
 
-LAYOUT_DROPDOWN_HTML = [
-    html.Div(
-        dcc.Dropdown(
-            id="dropdown-update-layout",
-            placeholder="Select layout",
-            value="breadthfirst",
-            clearable=False,
-            options=[{"label": name.capitalize(), "value": name} for name in LAYOUT_OPTIONS],
-            style={"width": "200px"},
-        ),
-        style={"margin": "0 20px 0 10px", "color": "black"},
-    )
-]
+
+_ARROWS_CHECKBOX = dbc.Checkbox(
+    id="show-arrows",
+    label="Show arrows",
+    value=True,
+    label_style={"color": "white"},
+    style={"margin-top": "10px"},
+)
+
+CONFIG_ELEMENTS = [_LAYOUT_DROPDOWN, _ARROWS_CHECKBOX, _SCALING_DIV]

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

@@ -0,0 +1,35 @@
+# SPDX-FileCopyrightText: Contributors to the Power Grid Model project <[email protected]>
+#
+# SPDX-License-Identifier: MPL-2.0
+
+import dash_bootstrap_components as dbc
+from dash import html
+
+from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
+
+_MARGIN = "0 10px"
+
+LEGENDA_STYLE = {"margin": _MARGIN, "text-shadow": "0 0 5px #000", "justify-content": "center"}
+
+_FONT_SIZE = "2.5em"
+
+NODE_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["node"]}
+_SUBSTATION_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["substation_node"]}
+_LINE_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["line"]}
+_LINK_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["link"]}
+_TRANSFORMER_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["transformer"]}
+_OPEN_BRANCH_ICON_STYLE = {"font-size": _FONT_SIZE, "margin": _MARGIN, "color": CYTO_COLORS["open_branch"]}
+LEGENDA_ELEMENTS = [
+    html.I(className="fas fa-circle", id="node-icon", style=NODE_ICON_STYLE),
+    dbc.Tooltip("Node", target="node-icon", placement="bottom"),
+    html.I(className="fas fa-diamond", id="substation-icon", style=_SUBSTATION_ICON_STYLE),
+    dbc.Tooltip("Substation", target="substation-icon", placement="bottom"),
+    html.I(className="fas fa-arrow-right-long", id="line-icon", style=_LINE_ICON_STYLE),
+    dbc.Tooltip("Line", target="line-icon", placement="bottom"),
+    html.I(className="fas fa-arrow-right-long", id="transformer-icon", style=_TRANSFORMER_ICON_STYLE),
+    dbc.Tooltip("Transformer", target="transformer-icon", placement="bottom"),
+    html.I(className="fas fa-arrow-right-long", id="link-icon", style=_LINK_ICON_STYLE),
+    dbc.Tooltip("Link", target="link-icon", placement="bottom"),
+    html.I(className="fas fa-ellipsis", id="open-branch-icon", style=_OPEN_BRANCH_ICON_STYLE),
+    dbc.Tooltip("Open Branch", target="open-branch-icon", placement="bottom"),
+]

src/power_grid_model_ds/_core/visualizer/layout/search_form.py renamed to src/power_grid_model_ds/_core/visualizer/layout/header_search.py

@@ -44,21 +44,15 @@
 
 
 # Arrange as a sentence
-SEARCH_FORM_HTML = html.Div(
-    [
-        html.Span("Search ", 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",
-        "align-items": "center",
-        "justify-content": "center",  # Centers items horizontally
-        "padding": "10px",
-        "margin": "0 auto",  # Centers the container itself
-        "width": "100%",  # Ensures the container takes full width
-    },
-)
+SEARCH_ELEMENTS = [
+    html.Div(
+        [
+            html.Span("Search ", style=SPAN_TEXT_STYLE),
+            GROUP_INPUT,
+            html.Span(" with ", style=SPAN_TEXT_STYLE),
+            COLUMN_INPUT,
+            OPERATOR_INPUT,
+            VALUE_INPUT,
+        ]
+    )
+]

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

@@ -0,0 +1,7 @@
+# SPDX-FileCopyrightText: Contributors to the Power Grid Model project <[email protected]>
+#
+# SPDX-License-Identifier: MPL-2.0
+
+from typing import Any
+
+STYLESHEET = list[dict[str, Any]]