Improve search form

Author: Thijss

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

@@ -8,9 +8,10 @@
     Output("cytoscape-graph", "stylesheet"),
     Input("search-form-group-input", "value"),
     Input("search-form-column-input", "value"),
+    Input("search-form-operator-input", "value"),
     Input("search-form-value-input", "value"),
 )
-def search_element(group, column, value):
+def search_element(group, column, operator, value):
     """Color the specified element red based on the input values."""
     if not group or not column or not value:
         return DEFAULT_STYLESHEET
@@ -22,11 +23,15 @@ def search_element(group, column, value):
             "text-background-color": CYTO_COLORS["highlighted"],
         }
     else:
-        style = {"line-color": CYTO_COLORS["highlighted"]}
+        style = {"line-color": CYTO_COLORS["highlighted"], "target-arrow-color": CYTO_COLORS["highlighted"]}
+
+    if column == "id":
+        selector = f'[{column} {operator} "{value}"]'
+    else:
+        selector = f'[{column} {operator} {value}]'
 
-    # Create selectors that match both the group type and the specific value
     new_style = {
-        "selector": f'[{column} = {str(value)}], [{column} = "{value}"]',
+        "selector": selector,
         "style": style,
     }
     return DEFAULT_STYLESHEET + [new_style]

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

@@ -29,14 +29,27 @@
     style={"width": "150px", "display": "inline-block"}
 )
 
+operator_input = dbc.Select(
+    id="search-form-operator-input",
+    options=[
+        {"label": "=", "value": "="},
+        {"label": "<", "value": "<"},
+        {"label": ">", "value": ">"},
+        {"label": "!=", "value": "!="},
+    ],
+    value="=",  # Default value
+    style={"width": "60px", "display": "inline-block", "margin": "0 8px"}
+)
+
+
 # Arrange as a sentence
 SEARCH_FORM_HTML = html.Div(
     [
         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"}),
+        operator_input,
         value_input,
     ],
 style={