Reorganize visualizer menu and add show-arrows option (#83)

* Reorganize visualizer menu and add show-arrows option

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

* Add test

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

* Rewrite code and apply some suggestions from review

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

* switch to enum

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

* more fixes

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

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

Co-authored-by: Vincent Koppen <[email protected]>
Signed-off-by: Thijs Baaijen <[email protected]>

* use constant

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

* use constant for bootstrap class

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

---------

Signed-off-by: Thijs Baaijen <[email protected]>
Co-authored-by: Vincent Koppen <[email protected]>

Author: Thijss

pyproject.toml

@@ -46,7 +46,7 @@ dev = [
   "pre-commit>=4",
   # Visualization (make sure these stay equalivalent to the 'visualizer' group)
   "dash>=3.0.0",
-  "dash-bootstrap-components>=2.0.0",
+  "dash-bootstrap-components>=2.0.3",
   "dash-cytoscape>=1.0.2",
 ]
 

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,66 @@
+# 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
+from power_grid_model_ds._core.visualizer.typing import 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"]
+
+    edge_style["target-arrow-shape"] = "triangle" if show_arrows else "none"
+    return current_stylesheet

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

@@ -0,0 +1,30 @@
+# 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, LEGENDA_DIV, SEARCH_DIV
+
+
+@callback(
+    Output("header-right-col", "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_DIV
+    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
+    button_map = {
+        "btn-legend": LEGENDA_DIV,
+        "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.typing 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

@@ -10,8 +10,6 @@
 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
 
-LAYOUT_OPTIONS = ["random", "circle", "concentric", "grid", "cose", "breadthfirst"]
-
 _CYTO_INNER_STYLE = {"width": "100%", "height": "100%", "background-color": BACKGROUND_COLOR}
 _CYTO_OUTER_STYLE = {"height": "80vh"}
 

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

@@ -3,29 +3,60 @@
 # 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,
+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
+
+_MENU_BUTTON_STYLE_CLASS = "me-2 btn-outline-primary"
+
+_LEFT_COLUMN_HTML = dbc.Col(
+    [
+        dbc.Button("Legend", id="btn-legend", className=_MENU_BUTTON_STYLE_CLASS),
+        dbc.Button("Search", id="btn-search", className=_MENU_BUTTON_STYLE_CLASS),
+        dbc.Button("Config", id="btn-config", className=_MENU_BUTTON_STYLE_CLASS),
+    ],
+    id="header-left-col",
+    width=5,
+    style={
+        "display": "flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "border-right": "1px solid white",
+    },
+)
+
+
+_RIGHT_COLUMN_STYLE = {
+    "display": "flex",
+    "align-items": "center",
+    "width": "100%",
 }
 
 
+CONFIG_DIV = html.Div(CONFIG_ELEMENTS, style=_RIGHT_COLUMN_STYLE | {"justify-content": "space-between"})
+SEARCH_DIV = html.Div(SEARCH_ELEMENTS, style=_RIGHT_COLUMN_STYLE | {"justify-content": "center"})
+LEGENDA_DIV = html.Div(LEGENDA_ELEMENTS, style=_RIGHT_COLUMN_STYLE | LEGENDA_STYLE)
+
+_RIGHT_COLUMN_HTML = dbc.Col(
+    [LEGENDA_DIV, SEARCH_DIV, CONFIG_DIV],
+    id="header-right-col",
+    width=7,
+)
+
 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.Col(SCALE_INPUTS + LAYOUT_DROPDOWN_HTML, className="d-flex justify-content-end align-items-center"),
+        _LEFT_COLUMN_HTML,
+        _RIGHT_COLUMN_HTML,
     ],
-    style={"background-color": BACKGROUND_COLOR},
+    style={
+        "background-color": "#343a40",
+        "color": "white",
+        "padding": "1rem 0",
+        "margin": 0,
+        "height": "90px",
+        "width": "100%",
+    },
+    align="center",
 )