Reorganize visualizer menu and add show-arrows option

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

Author: Thijss

src/power_grid_model_ds/_core/visualizer/app.py

@@ -8,12 +8,13 @@
 
 from power_grid_model_ds._core.model.grids.base import Grid
 from power_grid_model_ds._core.visualizer.callbacks import (  # noqa: F401  # pylint: disable=unused-import
-    element_scaling,
+    config,
     element_selection,
-    layout_dropdown,
+    header,
     search_form,
 )
 from power_grid_model_ds._core.visualizer.layout.cytoscape_html import get_cytoscape_html
+from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import DEFAULT_STYLESHEET
 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
@@ -76,6 +77,7 @@ def get_app_layout(grid: Grid) -> html.Div:
     return html.Div(
         [
             columns_store,
+            dcc.Store(id="stylesheet-store", data=DEFAULT_STYLESHEET),
             HEADER_HTML,
             html.Hr(style={"border-color": "white", "margin": "0"}),
             cytoscape_html,

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

@@ -0,0 +1,68 @@
+# SPDX-FileCopyrightText: Contributors to the Power Grid Model project <[email protected]>
+#
+# SPDX-License-Identifier: MPL-2.0
+
+
+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
+
+
+@callback(
+    Output("stylesheet-store", "data", allow_duplicate=True),
+    Output("cytoscape-graph", "stylesheet", allow_duplicate=True),
+    Input("node-scale-input", "value"),
+    Input("edge-scale-input", "value"),
+    State("stylesheet-store", "data"),
+    prevent_initial_call=True,
+)
+def scale_elements(node_scale: float, edge_scale: float, stylesheet: STYLESHEET) -> tuple[STYLESHEET, STYLESHEET]:
+    """Callback to scale the elements of the graph."""
+    if stylesheet is None:
+        raise PreventUpdate
+    if node_scale == 1 and edge_scale == 1:
+        raise PreventUpdate
+    new_stylesheet = stylesheet.copy()
+    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, new_stylesheet
+
+
+@callback(Output("cytoscape-graph", "layout"), Input("dropdown-update-layout", "value"), prevent_initial_call=True)
+def update_layout(layout):
+    """Callback to update the layout of the graph."""
+    return {"name": layout, "animate": True}
+
+
+@callback(
+    Output("cytoscape-graph", "stylesheet", allow_duplicate=True),
+    Input("show-arrows", "value"),
+    State("cytoscape-graph", "stylesheet"),
+    prevent_initial_call=True,
+)
+def update_arrows(show_arrows, current_stylesheet):
+    """Callback to update the arrow style of edges in the graph."""
+    selectors = [rule["selector"] for rule in current_stylesheet]
+    index = selectors.index("edge")
+    edge_style = current_stylesheet[index]["style"]
+
+    if show_arrows:
+        edge_style["target-arrow-shape"] = "triangle"
+    else:
+        edge_style["target-arrow-shape"] = "none"
+    return current_stylesheet

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

@@ -0,0 +1,31 @@
+# SPDX-FileCopyrightText: Contributors to the Power Grid Model project <[email protected]>
+#
+# SPDX-License-Identifier: MPL-2.0
+
+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
+
+
+@callback(
+    Output("right-col-content", "children"),
+    [
+        Input("btn-legend", "n_clicks"),
+        Input("btn-search", "n_clicks"),
+        Input("btn-config", "n_clicks"),
+    ],
+)
+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
+    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
+    button_map = {
+        "btn-legend": LEGENDA_HTML,
+        "btn-search": SEARCH_DIV,
+        "btn-config": CONFIG_DIV,
+    }
+    return button_map.get(button_id, "Right Column")

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

@@ -1,12 +1,12 @@
 # SPDX-FileCopyrightText: Contributors to the Power Grid Model project <[email protected]>
 #
 # SPDX-License-Identifier: MPL-2.0
-from typing import Any
 
-from dash import Input, Output, callback
+from dash import Input, Output, State, callback
+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 DEFAULT_STYLESHEET
+from power_grid_model_ds._core.visualizer.layout.cytoscape_styling import STYLESHEET
 
 
 @callback(
@@ -15,11 +15,12 @@
     Input("search-form-column-input", "value"),
     Input("search-form-operator-input", "value"),
     Input("search-form-value-input", "value"),
+    State("stylesheet-store", "data"),
 )
-def search_element(group: str, column: str, operator: str, value: str) -> list[dict[str, Any]]:
+def search_element(group: str, column: str, operator: str, value: str, stylesheet: STYLESHEET) -> STYLESHEET:
     """Color the specified element red based on the input values."""
     if not group or not column or not value:
-        return DEFAULT_STYLESHEET
+        raise PreventUpdate
 
     # Determine if we're working with a node or an edge type
     if group == "node":
@@ -39,7 +40,8 @@ def search_element(group: str, column: str, operator: str, value: str) -> list[d
         "selector": selector,
         "style": style,
     }
-    return DEFAULT_STYLESHEET + [new_style]
+    updated_stylesheet = stylesheet + [new_style]
+    return updated_stylesheet
 
 
 @callback(

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

@@ -44,11 +44,11 @@
         dcc.Dropdown(
             id="dropdown-update-layout",
             placeholder="Select layout",
-            value="",
+            value="breadthfirst",
             clearable=False,
             options=[{"label": name.capitalize(), "value": name} for name in LAYOUT_OPTIONS],
             style={"width": "200px"},
         ),
-        style={"margin": "0 20px 0 10px"},
+        style={"margin": "0 20px 0 10px", "color": "black"},
     )
 ]

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

@@ -4,8 +4,13 @@
 
 """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/cytoscape_config.py

@@ -3,29 +3,59 @@
 # 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 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,
-}
-
+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(
     [
-        dbc.Col(LEGENDA_HTML, className="d-flex align-items-center"),
         dbc.Col(
-            dbc.Card(SEARCH_FORM_HTML, style=_SEARCH_FORM_CARD_STYLE),
-            className="d-flex justify-content-center align-items-center",
+            [
+                dbc.Button("Legend", id="btn-legend", color="primary", className="me-2"),
+                dbc.Button("Search", id="btn-search", color="secondary", className="me-2"),
+                dbc.Button("Config", id="btn-config", color="success", className="me-2"),
+            ],
+            width=5,
+            style={
+                "display": "flex",
+                "align-items": "center",
+                "justify-content": "center",
+                "border-right": "1px solid white",
+            },
+        ),
+        dbc.Col(
+            html.Div([LEGENDA_HTML, SEARCH_DIV, CONFIG_DIV], id="right-col-content", className="text-end"),
+            width=7,
+            style={
+                "display": "flex",
+                "align-items": "center",
+                "justify-content": "center",
+            },
         ),
-        dbc.Col(SCALE_INPUTS + LAYOUT_DROPDOWN_HTML, className="d-flex justify-content-end align-items-center"),
     ],
-    style={"background-color": BACKGROUND_COLOR},
+    style={
+        "background-color": "#343a40",
+        "color": "white",
+        "padding": "1rem 0",
+        "margin": 0,
+        "height": "90px",
+    },
+    className="g-0",
+    align="center",
 )

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

@@ -37,5 +37,6 @@
         "margin": _MARGIN,
         "width": "100%",
         "text-shadow": "0 0 5px #000",
+        # "display": "none",
     },
 )