set transparency for active, reactive power, values (#8)

* adds an optional invalid_lf parameter to the sld and nad widgets (when set, the visibility of active and reactive power data in the diagram is reduced)
* set the default invalid_lf parameter to the sld and nad widgets to False (so that p,q values are not transparent)

Signed-off-by: Christian Biasuzzi <[email protected]>

examples/demo_sld_features.ipynb

@@ -56,7 +56,7 @@
    "outputs": [],
    "source": [
     "#create an SLD widget for a network's VL and activate the callbacks on VL arrows, switches and feeders\n",
-    "sld_widget=display_sld(network.get_single_line_diagram(network.get_voltage_levels().index[1]), enable_callbacks=True)\n",
+    "sld_widget=display_sld(network.get_single_line_diagram(network.get_voltage_levels().index[1]), enable_callbacks=True, invalid_lf=False)\n",
     "sld_widget.on_nextvl(test_nextvl_callback)\n",
     "sld_widget.on_switch(test_switch_callback)\n",
     "sld_widget.on_feeder(test_feeder_callback)\n",
@@ -90,7 +90,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.2"
+   "version": "3.12.3"
   }
  },
  "nbformat": 4,

js/nadwidget.css

@@ -2,3 +2,7 @@
 	border: 2px solid lightgrey;
 	display: inline-block;
 }
+
+.invalid-lf .nad-edge-infos {
+	opacity: 0.2;
+}

js/nadwidget.ts

@@ -18,10 +18,13 @@ function render({ model, el }: RenderProps<NadWidgetModel>) {
     function render_diagram(model: any): any {
         const diagram_data = model.get('diagram_data');
         const svg_data = diagram_data['svg_data']; //svg content
+        const is_invalid_lf = diagram_data['invalid_lf'];
 
         const el_div = document.createElement('div');
         el_div.classList.add('svg-nad-viewer-widget');
 
+        el_div.classList.toggle('invalid-lf', is_invalid_lf);
+
         new NetworkAreaDiagramViewer(el_div, svg_data, 800, 600, 800, 600);
 
         return el_div;

js/sldwidget.css

@@ -2,3 +2,7 @@
 	border: 2px solid lightgrey;
 	display: inline-block;
 }
+
+.invalid-lf :is(.sld-active-power, .sld-reactive-power, .sld-voltage, .sld-angle) {
+	opacity: 0.2;
+}

js/sldwidget.ts

@@ -66,10 +66,13 @@ function render({ model, el }: RenderProps<SldWidgetModel>) {
         const diagram_data = model.get('diagram_data');
         const svg_data = diagram_data['value']; //svg content
         const metadata = diagram_data['value_meta']; //metadata
+        const is_invalid_lf = diagram_data['invalid_lf'];
 
         const el_div = document.createElement('div');
         el_div.classList.add('svg-sld-viewer-widget');
 
+        el_div.classList.toggle('invalid-lf', is_invalid_lf);
+
         new SingleLineDiagramViewer(
             el_div,
             svg_data,

src/pypowsybl_jupyter/nadwidget.py

@@ -31,12 +31,13 @@ def _get_svg_string(svg) -> str:
     else:
         raise ValueError('svg argument should be a string or provide a _repr_svg_ method.')
 
-def display_nad(svg) -> NadWidget:
+def display_nad(svg, invalid_lf: bool = False) -> NadWidget:
     """
     Displays a NAD's SVG with support for panning and zooming.
 
     Args:
         svg: the input SVG, as str or class providing an svg and metadata representation
+        invalid_lf: When True the opacity style for some of the displayed info's (e.g., active and reactive power) is decreased, making them barely visible in the diagram.
 
     Returns:
         A jupyter widget allowing to zoom and pan the SVG.
@@ -47,15 +48,16 @@ def display_nad(svg) -> NadWidget:
 
             display_nad(network.get_network_area_diagram())
     """    
-    return NadWidget(diagram_data= {"svg_data": _get_svg_string(svg)})
+    return NadWidget(diagram_data= {"svg_data": _get_svg_string(svg), "invalid_lf": invalid_lf})
 
-def update_nad(nadwidget, svg):
+def update_nad(nadwidget, svg, invalid_lf: bool = False):
     """
     Updates an existing NAD widget with a new SVG content
 
     Args:
         nadwidget: the existing widget to update
         svg: the input NAD's SVG
+        invalid_lf: When True the opacity style for some of the displayed info's (e.g., active and reactive power) is decreased, making them barely visible in the diagram.
 
     Examples:
 
@@ -65,4 +67,4 @@ def update_nad(nadwidget, svg):
     """    
 
     svg_value=_get_svg_string(svg)
-    nadwidget.diagram_data= {"svg_data": svg_value}
+    nadwidget.diagram_data= {"svg_data": svg_value, "invalid_lf": invalid_lf}

src/pypowsybl_jupyter/sldwidget.py

@@ -92,13 +92,14 @@ def _get_svg_metadata(svg) -> str:
     else:
         raise ValueError('svg argument provide a _metadata method.')
 
-def display_sld(svg, enable_callbacks: bool = False) -> SldWidget:
+def display_sld(svg, enable_callbacks: bool = False, invalid_lf: bool = False) -> SldWidget:
     """
     Displays an SLD's SVG with support for panning and zooming.
 
     Args:
         svg: the input SVG, as str or class providing an svg and metadata representation
         enable_callbacks: if true, enable the callbacks for navigation arrows, feeders and switches
+        invalid_lf: When True the opacity style for some of the displayed info's (e.g., active and reactive power) is decreased, making them barely visible in the diagram.
 
     Returns:
         A jupyter widget allowing to zoom and pan the SVG.
@@ -112,16 +113,17 @@ def display_sld(svg, enable_callbacks: bool = False) -> SldWidget:
 
     svg_metadata = "" if not enable_callbacks else _get_svg_metadata(svg)
     svg_value=_get_svg_string(svg)
-    return SldWidget(diagram_data= {"value": svg_value, "value_meta": svg_metadata})
+    return SldWidget(diagram_data= {"value": svg_value, "value_meta": svg_metadata, "invalid_lf": invalid_lf})
 
-def update_sld(sldwidget, svg, keep_viewbox: bool = False, enable_callbacks: bool = False):
+def update_sld(sldwidget, svg, keep_viewbox: bool = False, enable_callbacks: bool = False, invalid_lf: bool = False):
     """
     Updates an existing SLD widget with a new SVG content.
 
     Args:
         sldwidget: the existing widget to update
         svg: the input NAD's SVG
         enable_callbacks: if true, enable the callbacks for navigation arrows, feeders and switches
+        invalid_lf: When True the opacity style for some of the displayed info's (e.g., active and reactive power) is decreased, making them barely visible in the diagram.
 
     Examples:
 
@@ -132,4 +134,4 @@ def update_sld(sldwidget, svg, keep_viewbox: bool = False, enable_callbacks: boo
 
     svg_metadata = "" if not enable_callbacks else _get_svg_metadata(svg)
     svg_value=_get_svg_string(svg)
-    sldwidget.diagram_data= {"value": svg_value, "value_meta": svg_metadata, "keep_viewbox": keep_viewbox}
+    sldwidget.diagram_data= {"value": svg_value, "value_meta": svg_metadata, "keep_viewbox": keep_viewbox, "invalid_lf": invalid_lf}