map widget: changes the default to a light theme, and adds an optiona…

…l parameter to enable the dark theme

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

docs/user_guide/network_map_widget.md

@@ -26,7 +26,7 @@ A click on a substation pops up a list of its VL.
 
 ## Widget API
 ```python
-NetworkMapWidget(network:Network, sub_id:str = None, use_name:bool = True, display_lines:bool = True, use_line_geodata:bool = False, nominal_voltages_top_tiers_filter = -1) -> NetworkMapWidget
+NetworkMapWidget(network:Network, sub_id:str = None, use_name:bool = True, display_lines:bool = True, use_line_geodata:bool = False, nominal_voltages_top_tiers_filter = -1, dark_mode:bool = False) -> NetworkMapWidget
 ```
 
 - network: the input network.
@@ -35,6 +35,7 @@ NetworkMapWidget(network:Network, sub_id:str = None, use_name:bool = True, displ
 - display_lines: When True (default) the network lines are displayed on the map. When false, the widget displays only the substations.
 - use_line_geodata: When False (default) the widget does not use the network's line geodata extensions; Each line is drawn as a straight line connecting two substations.
 - nominal_voltages_top_tiers_filter: filters the elements in the map based on the network's top nominal voltages. N displays the top n nominal voltages; -1 (default) displays all.
+- dark_mode: When True, sets the widget's display theme to dark (default is False).
 
 
 ## Customize widget's interactions

js/networkmapwidget.jsx

@@ -63,6 +63,25 @@ const darkTheme = createTheme({
     aggrid: 'ag-theme-alpine-dark',
 });
 
+const lightTheme = createTheme({
+    palette: {
+        mode: 'light',
+    },
+    link: {
+        color: 'blue',
+    },
+    node: {
+        background: '#1976d2',
+        hover: '#84adce',
+        border: '#0f3d68',
+    },
+    selectedRow: {
+        background: '#8E9C9B',
+    },
+    mapboxStyle: 'mapbox://styles/mapbox/light-v9',
+    aggrid: 'ag-theme-alpine',
+});
+
 class WidgetMapEquipments extends MapEquipments {
     initEquipments(smapdata, lmapdata, tlmapdata, hlmapdata) {
         this.updateSubstations(smapdata, true);
@@ -116,6 +135,8 @@ const render = createRender(() => {
         edata: new WidgetMapEquipments([], [], [], []),
     });
 
+    const [dark_mode] = useModelState('dark_mode');
+
     useEffect(() => {
         let initDataTask = new Promise((resolve, reject) => {
             const geoData = new GeoData(new Map(), new Map());
@@ -279,15 +300,15 @@ const render = createRender(() => {
                 );
             }}
             mapLibrary={'cartonolabel'}
-            mapTheme={'dark'}
+            mapTheme={dark_mode ? 'dark' : 'light'}
             filteredNominalVoltages={filteredNominalVoltages}
         />
     );
 
     return (
         <div ref={networkMapRef} className="network-map-viewer-widget">
             <StyledEngineProvider injectFirst>
-                <ThemeProvider theme={darkTheme}>
+                <ThemeProvider theme={dark_mode ? darkTheme : lightTheme}>
                     <div
                         style={{
                             position: 'relative',

src/pypowsybl_jupyter/networkmapwidget.py

@@ -31,6 +31,7 @@ class NetworkMapWidget(anywidget.AnyWidget):
         display_lines: When True (default) the network lines are displayed on the map. When false, the widget displays only the substations.
         use_line_geodata: When False (default) the widget does not use the network's line geodata extensions; Each line is drawn as a straight line connecting two substations.
         nominal_voltages_top_tiers_filter: filters the elements in the map based on the network's top nominal voltages. N displays the top n nominal voltages; -1 (default) displays all.
+        dark_mode: When True, sets the widget's display theme to dark (default is False).
 
 
     Returns:
@@ -60,9 +61,11 @@ class NetworkMapWidget(anywidget.AnyWidget):
     params  = traitlets.Dict().tag(sync=True)
 
     selected_vl = traitlets.Unicode().tag(sync=True)
-
 
-    def __init__(self, network:Network, sub_id:str = None, use_name:bool = True, display_lines:bool = True, use_line_geodata:bool = False, nominal_voltages_top_tiers_filter = -1, **kwargs):
+    dark_mode = traitlets.Bool().tag(sync=True)
+
+    def __init__(self, network:Network, sub_id:str = None, use_name:bool = True, display_lines:bool = True, use_line_geodata:bool = False, nominal_voltages_top_tiers_filter = -1, 
+                 dark_mode:bool = False, **kwargs):
         super().__init__(**kwargs)
 
         (lmap, lpos, smap, spos, vl_subs, sub_vls, subs_ids, tlmap, hlmap) = self.extract_map_data(network, display_lines, use_line_geodata)
@@ -78,6 +81,7 @@ def __init__(self, network:Network, sub_id:str = None, use_name:bool = True, dis
         self.sub_vls=sub_vls
         self.subs_ids=subs_ids
         self.nvls=self.extract_nominal_voltage_list(network, nominal_voltages_top_tiers_filter)
+        self.dark_mode=dark_mode
 
         self._on_selectvl_handlers = CallbackDispatcher()
         super().on_msg(self._handle_pw_msg)
@@ -107,6 +111,9 @@ def center_on_voltage_level(self, vl_id):
         if sub_id is not None:
             self.params = {"subId":  sub_id}
 
+    def set_dark_mode(self, dark_mode=False):
+        self.dark_mode = dark_mode
+
     def get_tie_lines_info(self, network, vls_with_coords):
         ties_df=network.get_tie_lines().reset_index()[['id', 'name', 'dangling_line1_id', 'dangling_line2_id']]
         danglings_df=network.get_dangling_lines().reset_index()[['id', 'name', 'p', 'i', 'voltage_level_id', 'connected']]