Add scaling, legenda and frontend layout

Thijss · Thijss · commit ff38bb2f7bc5 · 2025-03-21T09:23:13.000+01:00
diff --git a/src/power_grid_model_ds/_core/visualizer/callbacks/element_scaling.py b/src/power_grid_model_ds/_core/visualizer/callbacks/element_scaling.py
@@ -0,0 +1,33 @@
+from dash import Input, Output, callback
+from copy import deepcopy
+from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import DEFAULT_STYLESHEET, BRANCH_WIDTH, NODE_SIZE
+
+
+@callback(
+    Output('cytoscape-graph', 'stylesheet', allow_duplicate=True),
+    Input('node-scale-input', 'value'),
+    Input('edge-scale-input', 'value'),
+    prevent_initial_call=True
+)
+def scale_elements(node_scale, edge_scale):
+    for scale_factor in (node_scale, edge_scale):
+        if scale_factor is None or scale_factor <= 0:
+            scale_factor = 1
+
+    new_stylesheet = deepcopy(DEFAULT_STYLESHEET)
+    edge_style = {
+        "selector": "edge",
+        "style": {
+            "width": BRANCH_WIDTH * edge_scale,
+        },
+    }
+    new_stylesheet.append(edge_style)
+    node_style = {
+        "selector": "node",
+        "style": {
+            "height": NODE_SIZE * node_scale,
+            "width": NODE_SIZE * node_scale,
+        },
+    }
+    new_stylesheet.append(node_style)
+    return new_stylesheet
diff --git a/src/power_grid_model_ds/_core/visualizer/callbacks/element_selection.py b/src/power_grid_model_ds/_core/visualizer/callbacks/element_selection.py
@@ -9,7 +9,7 @@
 
 
 @callback(
-    Output("search-output", "children"),
+    Output("selection-output", "children"),
     Input("cytoscape-graph", "selectedNodeData"),
     Input("cytoscape-graph", "selectedEdgeData"),
 )
@@ -30,4 +30,4 @@ def _to_data_table(data: dict[str, Any]):
     data_table = dash_table.DataTable(
         data=[data], columns=[{"name": key, "id": key} for key in columns], editable=False
     )
-    return [header, data_table]
+    return data_table
diff --git a/src/power_grid_model_ds/_core/visualizer/callbacks/layout_dropdown.py b/src/power_grid_model_ds/_core/visualizer/callbacks/layout_dropdown.py
@@ -0,0 +1,7 @@
+from dash import callback, Output, Input
+
+
+@callback(Output('cytoscape-graph', 'layout'), Input('dropdown-update-layout', 'value'),
+          prevent_initial_call=True)
+def update_layout(layout):
+    return {'name': layout, 'animate': True}
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_config.py b/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_config.py
@@ -0,0 +1,48 @@
+from dash import html, dcc
+
+from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
+from power_grid_model_ds._core.visualizer.layout.cytoscape_html import LAYOUT_OPTIONS
+
+NODE_SCALE_HTML = [
+    html.I(className="fas fa-circle", style={"color": CYTO_COLORS["node"], "margin-right": "10px"}),
+    dcc.Input(
+        id="node-scale-input",
+        type="number",
+        value=1,
+        min=0.1,
+        step=0.03,
+        style={"width": "75px"},
+    ),
+    html.Span(style={"margin-right": "10px"}),
+
+]
+
+EDGE_SCALE_HTML = [
+    html.I(className="fas fa-arrow-right-long", style={"color": CYTO_COLORS["line"], "margin-right": "10px"}),
+    dcc.Input(
+        id="edge-scale-input",
+        type="number",
+        value=1,
+        min=0.1,
+        step=0.03,
+        style={"width": "75px"},
+    ),
+]
+
+SCALE_INPUTS = [
+    html.Div(
+        NODE_SCALE_HTML + EDGE_SCALE_HTML,
+        style={"margin": "0 20px 0 10px"},
+    ),
+]
+
+LAYOUT_DROPDOWN_HTML = [
+    html.Div(dcc.Dropdown(
+        id='dropdown-update-layout',
+        placeholder="Select layout",
+        value="",
+        clearable=False,
+        options=[{'label': name.capitalize(), 'value': name} for name in LAYOUT_OPTIONS],
+        style={"width": "200px"}),
+    style={"margin": "0 20px 0 10px"}
+    )]
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_html.py b/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_html.py
@@ -6,13 +6,13 @@
 from power_grid_model_ds._core.visualizer.layout.colors import BACKGROUND_COLOR
 from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import DEFAULT_STYLESHEET
 
-LayoutOptions = Literal["", "random", "circle", "concentric", "grid", "cose", "breadthfirst", "preset"]
+LAYOUT_OPTIONS = ["random", "circle", "concentric", "grid", "cose", "breadthfirst", "preset"]
 
 _CYTO_INNER_STYLE = {"width": "100%", "height": "100%", "background-color": BACKGROUND_COLOR}
-_CYTO_OUTER_STYLE = {"height": "75vh"}
+_CYTO_OUTER_STYLE = {"height": "100vh"}
 
 
-def get_cytoscape_html(layout: LayoutOptions, elements: list[dict[str, Any]]) -> html.Div:
+def get_cytoscape_html(layout: str, elements: list[dict[str, Any]]) -> html.Div:
     """Get the Cytoscape HTML element"""
     return html.Div(
         cyto.Cytoscape(
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_styling.py b/src/power_grid_model_ds/_core/visualizer/layout/cytoscape_styling.py
@@ -2,14 +2,17 @@
 
 from power_grid_model_ds._core.visualizer.layout.colors import CYTO_COLORS
 
+NODE_SIZE = 100
+BRANCH_WIDTH = 10
+
 _BRANCH_STYLE = {
     "selector": "edge",
     "style": {
         "line-color": CYTO_COLORS["line"],
         "target-arrow-color": CYTO_COLORS["line"],
         "curve-style": "bezier",
         "target-arrow-shape": "triangle",
-        "width": 7,
+        "width": BRANCH_WIDTH,
     },
 }
 _NODE_STYLE = {
@@ -51,8 +54,8 @@
         "shape": "diamond",
         "background-color": CYTO_COLORS["substation_node"],
         "text-background-color": CYTO_COLORS["substation_node"],
-        "width": 100,
-        "height": 100,
+        "width": NODE_SIZE * 1.2,
+        "height": NODE_SIZE * 1.2,
         "color": "white",
     },
 }
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/header.py b/src/power_grid_model_ds/_core/visualizer/layout/header.py
@@ -1,25 +1,25 @@
 import dash_bootstrap_components as dbc
-from dash import html
+from dash import html, dcc
 
 from power_grid_model_ds._core.visualizer.layout.colors import BACKGROUND_COLOR
+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
 
+_SEARCH_FORM_CARD_STYLE={"background-color": "#555555", "color": "white", "border-left": "1px solid white",
+                    "border-right": "1px solid white", "border-radius": 0}
+
 
 HEADER_HTML = dbc.Row(
     [
-        dbc.Col(LEGENDA_HTML, className="d-flex align-items-center", style={"margin": "0 10px"}),
+        dbc.Col(LEGENDA_HTML, className="d-flex align-items-center"),
         dbc.Col(
-            dbc.Card(SEARCH_FORM_HTML, style={"background-color": "#555555", "color": "white", "border": "none", "border-radius": 0}),
+            dbc.Card(SEARCH_FORM_HTML, style=_SEARCH_FORM_CARD_STYLE),
             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"
-        ),
+            SCALE_INPUTS + LAYOUT_DROPDOWN_HTML
+            , className="d-flex justify-content-end align-items-center"),
     ],
     style={"background-color": BACKGROUND_COLOR},
-
-
 )
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/legenda.py b/src/power_grid_model_ds/_core/visualizer/layout/legenda.py
@@ -1,25 +1,34 @@
 from dash import html
+import dash_bootstrap_components as dbc
 
 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}
+NODE_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["node"]}
+_SUBSTATION_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["substation_node"]}
+_LINE_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["line"]}
+_LINK_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["link"]}
+_TRANSFORMER_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["transformer"]}
+_OPEN_BRANCH_ICON_STYLE = {"font-size": "2.5em", "margin": "0 10px", "color": CYTO_COLORS["open_branch"]}
 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),
-            ],
+    [
+        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"),
+    ],
+    style={
+        "display": "flex",
+        "align-items": "center",
+        "margin": "0 10px",
+        "width": "100%",
+        "text-shadow": "0 0 5px #000"
+    }
 )
-
-
-# <i class="fas fa-ellipsis"></i>
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/search_form.py b/src/power_grid_model_ds/_core/visualizer/layout/search_form.py
@@ -1,7 +1,7 @@
 import dash_bootstrap_components as dbc
 from dash import html
 
-_SPAN_TEXT_STYLE = {"margin": "8px", "font-weight": "bold"}
+SPAN_TEXT_STYLE = {"color": "white", "margin-right": "8px", "font-weight": "bold", "text-shadow": "0 0 5px #000"}
 _INPUT_STYLE = {"width": "150px", "display": "inline-block"}
 # Create your form components
 GROUP_INPUT = dbc.Select(
@@ -47,9 +47,9 @@
 # Arrange as a sentence
 SEARCH_FORM_HTML = html.Div(
     [
-        html.Span("Search ", className="mr-2", style=_SPAN_TEXT_STYLE),
+        html.Span("Search ", style=SPAN_TEXT_STYLE),
         GROUP_INPUT,
-        html.Span(" with ", className="mx-2", style=_SPAN_TEXT_STYLE),
+        html.Span(" with ", className="mx-2", style=SPAN_TEXT_STYLE),
         COLUMN_INPUT,
         OPERATOR_INPUT,
         VALUE_INPUT,
diff --git a/src/power_grid_model_ds/_core/visualizer/layout/selection_output.py b/src/power_grid_model_ds/_core/visualizer/layout/selection_output.py
@@ -1,10 +1,10 @@
 from dash import dcc, html
 
 SELECTION_OUTPUT_HEADER_STYLE = {"margin": "20px 0 10px 0"}
-_SELECTION_OUTPUT_STYLE = {"overflowX": "scroll", "textAlign": "center", "margin": "0 20px 20px 20px"}
+_SELECTION_OUTPUT_STYLE = {"overflowX": "scroll", "textAlign": "center", "margin": "10px"}
 
 SELECTION_OUTPUT_HTML = html.Div(
     dcc.Markdown("Click on a **node** or **edge** to display its attributes.", style=SELECTION_OUTPUT_HEADER_STYLE),
-    id="search-output",
+    id="selection-output",
     style=_SELECTION_OUTPUT_STYLE,
 )
diff --git a/src/power_grid_model_ds/_core/visualizer/main.py b/src/power_grid_model_ds/_core/visualizer/main.py
@@ -6,8 +6,9 @@
 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
+    layout_dropdown,
+    element_scaling)
+from power_grid_model_ds._core.visualizer.layout.cytoscape_html import get_cytoscape_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
@@ -17,7 +18,7 @@
 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):
+def visualize(grid: Grid, debug: bool = False):
     """Visualize the Grid.
 
     grid: Grid
@@ -39,7 +40,7 @@ def visualize(grid: Grid, layout: LayoutOptions = "", debug: bool = False):
             - "cose": A layout that uses the CompoundSpring Embedder algorithm (force-directed layout)
     """
     columns_store = _get_columns_store(grid)
-    layout = _get_layout(layout, grid.node)
+    layout = _get_layout(grid.node)
     elements = parse_node_array(grid.node) + parse_branches(grid)
     cytoscape_html = get_cytoscape_html(layout, elements)
 
@@ -48,6 +49,7 @@ def visualize(grid: Grid, layout: LayoutOptions = "", debug: bool = False):
         [
             columns_store,
             HEADER_HTML,
+            html.Hr(style={"border-color": "white", "margin": "0"}),
             cytoscape_html,
             SELECTION_OUTPUT_HTML,
         ],
@@ -69,10 +71,8 @@ def _get_columns_store(grid: Grid) -> dcc.Store:
     )
 
 
-def _get_layout(layout: LayoutOptions, nodes: NodeArray) -> LayoutOptions:
+def _get_layout(nodes: NodeArray) -> str:
     """Determine the layout"""
-    if layout:
-        return layout
     if "x" in nodes.columns and "y" in nodes.columns:
         return "preset"
     return "breadthfirst"
diff --git a/src/power_grid_model_ds/_core/visualizer/parsers.py b/src/power_grid_model_ds/_core/visualizer/parsers.py
@@ -17,7 +17,7 @@ def parse_node_array(nodes: NodeArray) -> list[dict[str, Any]]:
         cyto_elements["data"]["id"] = str(node.id.item())
         cyto_elements["data"]["group"] = "node"
         if with_coords:
-            cyto_elements["position"] = {"x": node.x.item(), "y": node.y.item()}
+            cyto_elements["position"] = {"x": node.x.item(), "y": -node.y.item()}
         parsed_nodes.append(cyto_elements)
     return parsed_nodes
 
diff --git a/tests/integration/visualizer_tests.py b/tests/integration/visualizer_tests.py
@@ -37,9 +37,9 @@ def visualize_grid():
 
 
 def visualize_topo_grid():
-    visualize(grid=get_topo_grid(), debug=True)
+    visualize(grid=get_topo_grid(), debug=True, )
 
 
 if __name__ == "__main__":
-    # visualize_grid()
-    visualize_topo_grid()
+    visualize_grid()
+    # visualize_topo_grid()

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`
`10`	`10`
`11`	`11`	`@callback(`
`12`		`- Output("search-output", "children"),`
	`12`	`+ Output("selection-output", "children"),`
`13`	`13`	`Input("cytoscape-graph", "selectedNodeData"),`
`14`	`14`	`Input("cytoscape-graph", "selectedEdgeData"),`
`15`	`15`	`)`
`@@ -30,4 +30,4 @@ def _to_data_table(data: dict[str, Any]):`
`30`	`30`	`data_table = dash_table.DataTable(`
`31`	`31`	`data=[data], columns=[{"name": key, "id": key} for key in columns], editable=False`
`32`	`32`	`)`
`33`		`- return [header, data_table]`
	`33`	`+ return data_table`