Merge remote-tracking branch 'origin/main' into explorer_nad_lazy_pro…

…cessing

Signed-off-by: Florian Dupuy <[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

esbuild.mjs

@@ -0,0 +1,14 @@
+import esbuild from "esbuild";
+
+esbuild.build({
+  entryPoints: ["js/*.ts", "js/*.jsx"],
+  bundle: true,
+  minify: true,
+  target: ["es2020"],
+  outdir: "src/pypowsybl_jupyter/static/",
+  format: "esm",
+  // Ref. https://github.com/powsybl/pypowsybl-jupyter/issues/30, https://github.com/manzt/anywidget/issues/506 and https://github.com/manzt/anywidget/issues/369#issuecomment-1792376003
+  define: {
+    "define.amd": "false",
+  },
+});

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);
@@ -108,6 +127,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());
@@ -235,15 +256,15 @@ const render = createRender(() => {
                 chooseVoltageLevelForSubstation
             }
             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',

package.json

@@ -19,7 +19,7 @@
 	},
 	"scripts": {
 		"dev": "npm run build -- --sourcemap=inline --watch",
-		"build": "esbuild js/*.ts js/*.jsx --minify --format=esm --bundle --outdir=src/pypowsybl_jupyter/static",
+		"build": "node ./esbuild.mjs",
 		"typecheck": "tsc --noEmit",
 		"lint": "eslint . --ext js,ts,jsx --max-warnings 0"
 	},

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:
@@ -62,9 +63,11 @@ class NetworkMapWidget(anywidget.AnyWidget):
     selected_vl = traitlets.Unicode().tag(sync=True)
 
     enable_callbacks = 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, **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)
@@ -81,6 +84,7 @@ def __init__(self, network:Network, sub_id:str = None, use_name:bool = True, dis
         self.subs_ids=subs_ids
         self.nvls=self.extract_nominal_voltage_list(network, nominal_voltages_top_tiers_filter)
         self.enable_callbacks=True
+        self.dark_mode=dark_mode
 
         self._on_selectvl_handlers = CallbackDispatcher()
         super().on_msg(self._handle_pw_msg)
@@ -113,6 +117,9 @@ def center_on_voltage_level(self, vl_id):
     def set_enable_callbacks(self, enabled=True):
         self.enable_callbacks = enabled
 
+    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']]