Implemented Dark Mode and Pop Up notification

src/css/netjsongraph-theme.css

@@ -76,6 +76,58 @@
   color: #000;
 }
 
+/* Dark mode (applied by JS via .njg-dark-mode) */
+.njg-container.njg-dark-mode {
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .njg-sideBar {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .njg-metaData,
+.njg-container.njg-dark-mode .njg-infoContainer {
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .njg-tooltip {
+  background: #1e1e1e !important;
+}
+
+.njg-container.njg-dark-mode .njg-tooltip-key,
+.njg-container.njg-dark-mode .njg-tooltip-value {
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .leaflet-popup-content-wrapper,
+.njg-container.njg-dark-mode .leaflet-popup-tip {
+  background: #1e1e1e;
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .leaflet-control-attribution {
+  background: rgba(30, 30, 30, 0.8);
+  color: #e0e0e0;
+}
+
+.njg-container.njg-dark-mode .leaflet-control-attribution a {
+  color: #e0e0e0;
+}
+
+/* Node click popup */
+.njg-container .leaflet-popup.njg-node-popup .leaflet-popup-content-wrapper,
+.njg-container .leaflet-popup.njg-node-popup .leaflet-popup-tip {
+  background: #fff;
+  color: #000;
+}
+
+.njg-container.njg-dark-mode .leaflet-popup.njg-node-popup .leaflet-popup-content-wrapper,
+.njg-container.njg-dark-mode .leaflet-popup.njg-node-popup .leaflet-popup-tip {
+  background: #1e1e1e;
+  color: #e0e0e0;
+}
+
 .njg-container .marker-cluster div {
   color: #fff;
   background-color: rgba(21, 102, 169, 0.8) !important;

src/js/netjsongraph.config.js

@@ -44,6 +44,11 @@ const NetJSONGraphDefaultConfig = {
   showLabelsAtZoomLevel: 13,
   showGraphLabelsAtZoom: null,
   crs: L.CRS.EPSG3857,
+  // Dark mode behavior:
+  // - true: always dark
+  // - false: always light
+  // - "auto": follow document theme (html[data-theme="dark"] or html.dark-mode) or OS preference
+  darkMode: "auto",
   echartsOption: {
     aria: {
       show: true,
@@ -255,6 +260,16 @@ const NetJSONGraphDefaultConfig = {
         attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
          tiles offered by <a href="https://www.mapbox.com">Mapbox</a>`,
       },
+      // Optional dark tile layer (used when dark mode is active).
+      // Can be overridden by providing darkUrlTemplate/darkOptions in user config.
+      darkUrlTemplate:
+        process.env.MAPBOX_DARK_URL_TEMPLATE ||
+        "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+      darkOptions: {
+        attribution:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, '
+          + 'tiles by <a href="https://carto.com/">CARTO</a>',
+      },
     },
   ],
   geoOptions: {
@@ -287,6 +302,19 @@ const NetJSONGraphDefaultConfig = {
   ],
   linkCategories: [],
 
+  // Optional popup on node click (mainly for map / indoor map).
+  // Disabled by default to preserve existing behavior.
+  nodePopupOnClick: false,
+  // Function (node, nodeInfo, instance) => string|HTMLElement
+  nodePopupContent: null,
+  // Leaflet popup options passed to L.popup(options)
+  nodePopupOptions: {
+    closeButton: true,
+    autoClose: true,
+    closeOnClick: true,
+    className: "njg-node-popup",
+  },
+
   /**
    * @function
    * @name prepareData
@@ -344,6 +372,17 @@ const NetJSONGraphDefaultConfig = {
 
     this.gui.getNodeLinkInfo(type, nodeLinkData);
     this.gui.sideBar.classList.remove("hidden");
+
+    // Optional Leaflet popup on node click (works for geo map and CRS.Simple indoor map).
+    if (
+      type === "node" &&
+      this.config.nodePopupOnClick &&
+      this.leaflet &&
+      this.utils &&
+      typeof this.utils.showNodePopup === "function"
+    ) {
+      this.utils.showNodePopup.call(this, data, nodeLinkData);
+    }
   },
 
   /**

src/js/netjsongraph.js

@@ -153,6 +153,41 @@ class NetJSONGraph {
     }
     this.utils.hideLoading.call(this);
 
+    // Theme support (dark mode): keep map tiles + info UI consistent.
+    // Applies once on load, and (when darkMode is "auto") tracks document theme changes.
+    if (this.utils && typeof this.utils.applyTheme === "function") {
+      this.utils.applyTheme.call(this);
+
+      if (this.config && this.config.darkMode === "auto" && !this._njgThemeObserver) {
+        const apply = () => this.utils.applyTheme.call(this);
+
+        // Track html class / data-theme changes (common theme toggles)
+        try {
+          const docEl = document.documentElement;
+          const observer = new MutationObserver(() => apply());
+          observer.observe(docEl, {attributes: true, attributeFilter: ["class", "data-theme"]});
+          this._njgThemeObserver = observer;
+        } catch (e) {
+          // ignore
+        }
+
+        // Track OS theme changes
+        try {
+          const mql = window.matchMedia("(prefers-color-scheme: dark)");
+          const handler = () => apply();
+          if (mql && typeof mql.addEventListener === "function") {
+            mql.addEventListener("change", handler);
+            this._njgThemeMql = {mql, handler};
+          } else if (mql && typeof mql.addListener === "function") {
+            mql.addListener(handler);
+            this._njgThemeMql = {mql, handler};
+          }
+        } catch (e) {
+          // ignore
+        }
+      }
+    }
+
     // Expose helper to attach clients overlay for examples or apps
     // Not enabled by default to avoid side effects.
     this.attachClientsOverlay = (opts) => attachClientsOverlay(this, opts);

src/js/netjsongraph.render.js

@@ -26,6 +26,181 @@ echarts.use([
 ]);
 
 class NetJSONGraphRender {
+  /**
+   * Determine whether dark mode is currently active.
+   *
+   * Priority:
+   * 1) config.darkMode boolean (force)
+   * 2) document theme markers (html.dark-mode or html[data-theme="dark"])
+   * 3) OS preference (prefers-color-scheme)
+   */
+  isDarkModeActive() {
+    if (typeof this.config.darkMode === "boolean") {
+      return this.config.darkMode;
+    }
+
+    const docEl = document && document.documentElement;
+    if (docEl) {
+      if (docEl.classList.contains("dark-mode")) {
+        return true;
+      }
+      const dataTheme = docEl.getAttribute("data-theme");
+      if (typeof dataTheme === "string" && dataTheme.toLowerCase() === "dark") {
+        return true;
+      }
+    }
+
+    try {
+      return !!(
+        window &&
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      );
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Swap Leaflet tile layers based on the active theme.
+   * This only touches base TileLayer instances; overlays (geojson, markers, etc) remain.
+   */
+  updateLeafletTilesForTheme(isDark) {
+    if (!this.leaflet) {
+      return;
+    }
+
+    const tiles = Array.isArray(this.config.mapTileConfig)
+      ? this.config.mapTileConfig
+      : [];
+    if (!tiles.length) {
+      return;
+    }
+
+    // Remove existing tile layers
+    Object.keys(this.leaflet._layers || {}).forEach((k) => {
+      const layer = this.leaflet._layers[k];
+      if (layer && layer instanceof L.TileLayer) {
+        this.leaflet.removeLayer(layer);
+      }
+    });
+
+    // Remove existing layer control created by us (if any)
+    if (this.leaflet._njgBaseLayerControl) {
+      try {
+        this.leaflet._njgBaseLayerControl.remove();
+      } catch (e) {
+        // ignore
+      }
+      this.leaflet._njgBaseLayerControl = null;
+    }
+
+    const baseLayers = {};
+    let baseLayerAdded = false;
+
+    tiles.forEach((tile) => {
+      const urlTemplate =
+        isDark && tile.darkUrlTemplate ? tile.darkUrlTemplate : tile.urlTemplate;
+      const options =
+        isDark && tile.darkOptions ? tile.darkOptions : tile.options;
+
+      const tileLayer = L.tileLayer(urlTemplate, options);
+      if (tile.label) {
+        if (!baseLayerAdded) {
+          tileLayer.addTo(this.leaflet);
+          baseLayerAdded = true;
+        }
+        baseLayers[tile.label] = tileLayer;
+      } else {
+        tileLayer.addTo(this.leaflet);
+      }
+    });
+
+    if (tiles.length > 1) {
+      const layerControlOpts = this.config.layerControl || {};
+      this.leaflet._njgBaseLayerControl = L.control
+        .layers(baseLayers, {}, layerControlOpts)
+        .addTo(this.leaflet);
+    }
+  }
+
+  /**
+   * Apply theme to DOM and map tiles.
+   */
+  applyTheme() {
+    const isDark = this.utils.isDarkModeActive.call(this);
+    if (this.el) {
+      this.el.classList.toggle("njg-dark-mode", !!isDark);
+    }
+    // Only maps need tile swapping
+    if (this.config && this.config.render === this.utils.mapRender) {
+      this.utils.updateLeafletTilesForTheme.call(this, !!isDark);
+    }
+  }
+
+  /**
+   * Resolve popup coordinates from a node-like object.
+   * Supports:
+   * - NetJSONGraph nodes: node.properties.location or node.location
+   * - GeoJSON point array: node.coordinates [lng, lat]
+   * - GeoJSON feature geometry: node.geometry.coordinates [lng, lat]
+   */
+  getPopupLatLng(node) {
+    const loc = node?.properties?.location || node?.location;
+    if (loc && typeof loc.lat === "number" && typeof loc.lng === "number") {
+      return [loc.lat, loc.lng];
+    }
+
+    if (Array.isArray(node?.coordinates) && node.coordinates.length >= 2) {
+      return [node.coordinates[1], node.coordinates[0]];
+    }
+
+    if (Array.isArray(node?.geometry?.coordinates) && node.geometry.coordinates.length >= 2) {
+      return [node.geometry.coordinates[1], node.geometry.coordinates[0]];
+    }
+
+    return null;
+  }
+
+  /**
+   * Show a Leaflet popup for a node (map & indoor map).
+   *
+   * @param {object} node Raw node object passed from click handler
+   * @param {object} nodeInfo Optional processed info object (from utils.nodeInfo)
+   */
+  showNodePopup(node, nodeInfo = null) {
+    if (!this.leaflet) {
+      return;
+    }
+
+    const latLng = this.utils.getPopupLatLng.call(this, node);
+    if (!latLng || Number.isNaN(latLng[0]) || Number.isNaN(latLng[1])) {
+      // No coordinates: nothing to anchor the popup to.
+      return;
+    }
+
+    // Determine popup content
+    let content = null;
+    if (typeof this.config.nodePopupContent === "function") {
+      content = this.config.nodePopupContent.call(this, node, nodeInfo, this);
+    }
+
+    if (content === undefined || content === null || content === "") {
+      const title =
+        node?.label ||
+        node?.name ||
+        node?.properties?.name ||
+        (node?.id !== undefined && node?.id !== null ? String(node.id) : "Node");
+      content = `<div class="njg-node-popup-content"><strong>${title}</strong></div>`;
+    }
+
+    const popupOpts = this.config.nodePopupOptions || {};
+    const popup = L.popup(popupOpts).setLatLng(latLng).setContent(content);
+    popup.openOn(this.leaflet);
+
+    this._njgCurrentNodePopup = popup;
+  }
+
   /**
    * @function
    * @name echartsSetOption