From 37d8e36221a0f50c60d520605b6fd2275720c06b Mon Sep 17 00:00:00 2001 From: Christian Biasuzzi Date: Fri, 24 May 2024 18:03:24 +0200 Subject: [PATCH] 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 --- examples/demo_sld_features.ipynb | 4 ++-- js/nadwidget.css | 4 ++++ js/nadwidget.ts | 3 +++ js/sldwidget.css | 4 ++++ js/sldwidget.ts | 3 +++ src/pypowsybl_jupyter/nadwidget.py | 10 ++++++---- src/pypowsybl_jupyter/sldwidget.py | 10 ++++++---- 7 files changed, 28 insertions(+), 10 deletions(-) diff --git a/examples/demo_sld_features.ipynb b/examples/demo_sld_features.ipynb index aa34a53..e962ff1 100644 --- a/examples/demo_sld_features.ipynb +++ b/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, diff --git a/js/nadwidget.css b/js/nadwidget.css index fe7ef45..49247b4 100644 --- a/js/nadwidget.css +++ b/js/nadwidget.css @@ -2,3 +2,7 @@ border: 2px solid lightgrey; display: inline-block; } + +.invalid-lf .nad-edge-infos { + opacity: 0.2; +} diff --git a/js/nadwidget.ts b/js/nadwidget.ts index 5db50aa..387ef11 100644 --- a/js/nadwidget.ts +++ b/js/nadwidget.ts @@ -18,10 +18,13 @@ function render({ model, el }: RenderProps) { 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; diff --git a/js/sldwidget.css b/js/sldwidget.css index b7bf233..e3d236f 100644 --- a/js/sldwidget.css +++ b/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; +} diff --git a/js/sldwidget.ts b/js/sldwidget.ts index 021c879..4dd90e3 100644 --- a/js/sldwidget.ts +++ b/js/sldwidget.ts @@ -66,10 +66,13 @@ function render({ model, el }: RenderProps) { 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, diff --git a/src/pypowsybl_jupyter/nadwidget.py b/src/pypowsybl_jupyter/nadwidget.py index 9d93b07..2da8f6a 100644 --- a/src/pypowsybl_jupyter/nadwidget.py +++ b/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} diff --git a/src/pypowsybl_jupyter/sldwidget.py b/src/pypowsybl_jupyter/sldwidget.py index d6eb985..fe4913a 100644 --- a/src/pypowsybl_jupyter/sldwidget.py +++ b/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,9 +113,9 @@ 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. @@ -122,6 +123,7 @@ def update_sld(sldwidget, svg, keep_viewbox: bool = False, enable_callbacks: boo 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}