From 7a8a77a8c444eabf3d22d93f9f33478aa0d4b6d3 Mon Sep 17 00:00:00 2001
From: Christian Biasuzzi <christian.biasuzzi@soft.it>
Date: Mon, 28 Oct 2024 14:57:54 +0100
Subject: [PATCH 1/2] Map widget: default to light theme, add optional
 parameter to enable the dark theme (#32)

Signed-off-by: Christian Biasuzzi <christian.biasuzzi@soft.it>
---
 docs/user_guide/network_map_widget.md     |  3 ++-
 js/networkmapwidget.jsx                   | 25 +++++++++++++++++++++--
 src/pypowsybl_jupyter/networkmapwidget.py | 11 ++++++++--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/docs/user_guide/network_map_widget.md b/docs/user_guide/network_map_widget.md
index f520d12..6dd0157 100644
--- a/docs/user_guide/network_map_widget.md
+++ b/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
diff --git a/js/networkmapwidget.jsx b/js/networkmapwidget.jsx
index 0dd4fe8..d9b7f6f 100644
--- a/js/networkmapwidget.jsx
+++ b/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,7 +300,7 @@ const render = createRender(() => {
                 );
             }}
             mapLibrary={'cartonolabel'}
-            mapTheme={'dark'}
+            mapTheme={dark_mode ? 'dark' : 'light'}
             filteredNominalVoltages={filteredNominalVoltages}
         />
     );
@@ -287,7 +308,7 @@ const render = createRender(() => {
     return (
         <div ref={networkMapRef} className="network-map-viewer-widget">
             <StyledEngineProvider injectFirst>
-                <ThemeProvider theme={darkTheme}>
+                <ThemeProvider theme={dark_mode ? darkTheme : lightTheme}>
                     <div
                         style={{
                             position: 'relative',
diff --git a/src/pypowsybl_jupyter/networkmapwidget.py b/src/pypowsybl_jupyter/networkmapwidget.py
index d639c9f..97f7057 100644
--- a/src/pypowsybl_jupyter/networkmapwidget.py
+++ b/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']]

From 24483ab3293dd216aab1bd6c9c7b45465904eaad Mon Sep 17 00:00:00 2001
From: Christian Biasuzzi <christian.biasuzzi@soft.it>
Date: Mon, 28 Oct 2024 15:31:00 +0100
Subject: [PATCH 2/2] Fix JS dependencies bundler's settings (widgets work in
 other notebook frontends) (#31)

Signed-off-by: Christian Biasuzzi <christian.biasuzzi@soft.it>
---
 esbuild.mjs  | 14 ++++++++++++++
 package.json |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 esbuild.mjs

diff --git a/esbuild.mjs b/esbuild.mjs
new file mode 100644
index 0000000..3b9f681
--- /dev/null
+++ b/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",
+  },
+});
diff --git a/package.json b/package.json
index fb8e783..f68ef2e 100644
--- a/package.json
+++ b/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"
 	},