search form on one sentence

Author: Thijss

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

@@ -1,5 +1,6 @@
 from dash import Input, Output, State, callback
 
+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
 
 
@@ -15,17 +16,23 @@ def search_element(group, column, value):
         return DEFAULT_STYLESHEET
 
     # Determine if we're working with a node or an edge type
-    is_node = group == "node"
-    style_property = "background-color" if is_node else "line-color"
+    if group == "node":
+        style = {
+            "background-color": CYTO_COLORS["highlighted"],
+            "text-background-color": CYTO_COLORS["highlighted"],
+        }
+    else:
+        style = {"line-color": CYTO_COLORS["highlighted"]}
 
     # Create selectors that match both the group type and the specific value
     new_style = {
         "selector": f'[{column} = {str(value)}], [{column} = "{value}"]',
-        "style": {style_property: "red"},
+        "style": style,
     }
     return DEFAULT_STYLESHEET + [new_style]
 
 
+
 @callback(
     Output("search-form-column-input", "options"),
     Output("search-form-column-input", "value"),
@@ -42,15 +49,3 @@ def update_column_options(selected_group, store_data):
     default_value = columns[0] if columns else "id"
 
     return columns, default_value
-
-
-@callback(
-    Output("collapse", "is_open"),
-    [Input("collapse-button", "n_clicks")],
-    [State("collapse", "is_open")],
-)
-def toggle_collapse(n, is_open):
-    """Toggle the collapse button."""
-    if n:
-        return not is_open
-    return is_open

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

@@ -1,47 +1,50 @@
 import dash_bootstrap_components as dbc
-from dash import dcc, html
-
-_FORM_ELEMENT_STYLE = {
-    "display": "block",
-    "width": "200px",
-    # "margin": "0 20px 20px 20px",
-    "verticalAlign": "middle",
-    "justifyContent": "center",
-}
+from dash import html
 
+# Create your form components
+group_input = dbc.Select(
+    id="search-form-group-input",
+    options=[
+        {"label": "node", "value": "node"},
+        {"label": "line", "value": "line"},
+        {"label": "link", "value": "link"},
+        {"label": "transformer", "value": "transformer"},
+        {"label": "branch", "value": "branch"},
+    ],
+    value="node",  # Default value
+    style={"width": "150px", "display": "inline-block"}
+)
 
-SEARCH_FORM_HTML = html.Div(
-    [
-        html.Div(
-            dcc.RadioItems(["node", "line", "link", "transformer", "branch"], "node", id="search-form-group-input"),
-            style=_FORM_ELEMENT_STYLE,
-        ),
-        html.Div(dcc.Dropdown(["id"], "id", id="search-form-column-input"), style=_FORM_ELEMENT_STYLE),
-        html.Div(
-            dcc.Input(placeholder="Enter value to mark", id="search-form-value-input"),
-            style=_FORM_ELEMENT_STYLE,
-        ),
-    ]
+column_input = dbc.Select(
+    id="search-form-column-input",
+    options=[{"label": "id", "value": "id"}],
+    value="id",  # Default value
+    style={"width": "150px", "display": "inline-block"}
 )
 
-SEARCH_FORM_TOGGLE = html.Div(
-    dbc.Button(
-        "Search",
-        id="collapse-button",
-        className="mb-3",
-        color="primary",
-        n_clicks=0,
-    ),
-    style={"margin": "20px"},
+value_input = dbc.Input(
+    id="search-form-value-input",
+    placeholder="Enter value",
+    type="text",
+    style={"width": "150px", "display": "inline-block"}
 )
 
-HEADER_HTML = html.Div(
+# Arrange as a sentence
+SEARCH_FORM_HTML = html.Div(
     [
-        SEARCH_FORM_TOGGLE,
-        dbc.Collapse(
-            SEARCH_FORM_HTML,
-            id="collapse",
-            is_open=False,
-        ),
-    ]
+        html.Span("Search ", className="mr-2", style={"margin-right": "8px"}),
+        group_input,
+        html.Span(" with ", className="mx-2", style={"margin": "0 8px"}),
+        column_input,
+        html.Span(" == ", className="mx-2", style={"margin": "0 8px"}),
+        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
+    }
 )

src/power_grid_model_ds/_core/visualizer/main.py

@@ -7,7 +7,7 @@
     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 HEADER_HTML
+from power_grid_model_ds._core.visualizer.layout.search_form import SEARCH_FORM_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
@@ -43,7 +43,7 @@ def visualize(grid: Grid, layout: LayoutOptions = "", debug: bool = False):
     app.layout = html.Div(
         [
             columns_store,
-            HEADER_HTML,
+            SEARCH_FORM_HTML,
             cytoscape_html,
             SELECTION_OUTPUT_HTML,
         ]