21760645092

Committed 06 Feb 2026 06:00PM UTC coverage: 81.1% (+0.4%) from 80.722%

Build # 21760645092

Build Type

push

github

Committed by

web-flow

Commit Message

[change] Reduced size, provided 2 builds: full/echarts-only #392

**Two Build Variants Available:**
- **Full Bundle** (`yarn build:full`): Complete library with ECharts and Leaflet bundled
- **ECharts-Only Bundle** (`yarn build:echarts-only`): Library without Leaflet (~144 KiB smaller)

**For Projects with Existing Leaflet:**
Projects already using Leaflet (e.g., via django-leaflet in OpenWISP)
can now use the ECharts-only variant. Leaflet must be available as
a global `L` object before loading NetJSONGraph.

**Other changes:**
- Removed large GraphGL example data files (~40MB)
- Added compression plugin for `.gz` and `.br` file generation
- `package.json` `main` field now points to
  `dist/netjsongraph.min.js` instead of `src/js/netjsongraph.js`
- Webpack Bundle Analyzer Support:
  new stats commands to analyze bundle composition
- Dynamic Leaflet Loading: The echarts-only bundle can dynamically load Leaflet from CDN for development/demo purposes

**Breaking changes**
- Leaflet is now a **peer dependency** (optional),
  projects using the ECharts-only bundle must provide Leaflet themselves

Closes #392

Signed-off-by: Sankalp <sankalp.nex@gmail.com>
Co-authored-by: Federico Capoano <f.capoano@openwisp.io>

Coverage Stats

755 of 994 branches covered (75.96%)

Branch coverage included in aggregate %.

20 of 28 new or added lines in 5 files covered. (71.43%)

1176 of 1387 relevant lines covered (84.79%)

16.68 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

66.4

/src/js/netjsongraph.render.js

import {use} from "echarts/core";
import {install as LinesChart} from "echarts/lib/chart/lines/install";
import {install as GraphChart} from "echarts/lib/chart/graph/install";
import {install as ScatterChart} from "echarts/lib/chart/scatter/install";
import {install as TooltipComponent} from "echarts/lib/component/tooltip/install";
import {install as TitleComponent} from "echarts/lib/component/title/install";
import {install as ToolboxComponent} from "echarts/lib/component/toolbox/install";
import {install as LegendComponent} from "echarts/lib/component/legend/install";
import {install as GraphicComponent} from "echarts/lib/component/graphic/install";
import {install as SVGRenderer} from "echarts/lib/renderer/installSVGRenderer";
import {install as CanvasRenderer} from "echarts/lib/renderer/installCanvasRenderer";
import getLeaflet from "./leaflet-loader";
import {addPolygonOverlays} from "./netjsongraph.geojson";

use([
  GraphChart,
  LinesChart,
  TooltipComponent,
  TitleComponent,
  ToolboxComponent,
  LegendComponent,
  SVGRenderer,
  CanvasRenderer,
  ScatterChart,
  GraphicComponent,
]);

/**
 * @class
 * NetJSONGraphRender - Rendering utilities and visualization engine integration.
 *
 * Main Responsibilities:
 * - Provides mapRender() and graphRender() methods for different view modes
 * - Integrates ECharts and Leaflet for network topology visualization
 * - Handles interactive features like tooltips and legends
 * - Manages node clustering and styling
 */
class NetJSONGraphRender {
  /**
   * @function
   * @name echartsSetOption
   *
   * set option in echarts and render.
   *
   * @param  {object}  customOption    custom option determined by different render.
   * @param  {object}  self          NetJSONGraph object
   *
   * @return {object}  graph object
   *
   */
  echartsSetOption(customOption, self) {
    const configs = self.config;
    const echartsLayer = self.echarts;
    const commonOption = self.utils.deepMergeObj(
      {
        // Show element's detail when hover

        tooltip: {
          confine: true,
          position: (pos, params, dom, rect, size) => {
            let position = "right";
            if (size.viewSize[0] - pos[0] < size.contentSize[0]) {
              position = "left";
            }
            if (params.componentSubType === "lines") {
              position = [
                pos[0] + size.contentSize[0] / 8,
                pos[1] - size.contentSize[1] / 2,
              ];

              if (size.viewSize[0] - position[0] < size.contentSize[0]) {
                position[0] -= 1.25 * size.contentSize[0];
              }
            }
            return position;
          },
          padding: [5, 12],
          textStyle: {
            lineHeight: 20,
          },
          renderMode: "html",
          className: "njg-tooltip",
          formatter: (params) => {
            if (params.componentSubType === "graph") {
              return params.dataType === "edge"
                ? self.utils.getLinkTooltipInfo(params.data)
                : self.utils.getNodeTooltipInfo(params.data);
            }
            return params.componentSubType === "lines"
              ? self.utils.getLinkTooltipInfo(params.data.link)
              : self.utils.getNodeTooltipInfo(params.data.node);
          },
        },
      },
      configs.echartsOption,
    );

    echartsLayer.setOption(self.utils.deepMergeObj(commonOption, customOption));
    echartsLayer.on(
      "click",
      (params) => {
        const clickElement = configs.onClickElement.bind(self);
        self.utils.addActionToUrl(self, params);
        if (params.componentSubType === "graph") {
          return clickElement(
            params.dataType === "edge" ? "link" : "node",
            params.data,
          );
        }
        return params.componentSubType === "lines"
          ? clickElement("link", params.data.link)
          : !params.data.cluster && clickElement("node", params.data.node);
      },
      {passive: true},
    );

    return echartsLayer;
  }

  /**
   * @function
   * @name generateGraphOption
   *
   * generate graph option in echarts by JSONData.
   *
   * @param  {object}  JSONData        Render data
   * @param  {object}  self          NetJSONGraph object
   *
   * @return {object}  graph option
   *
   */
  generateGraphOption(JSONData, self) {
    const categories = [];
    const configs = self.config;
    const nodes = JSONData.nodes.map((node) => {
      const nodeResult = self.utils.fastDeepCopy(node);
      const {nodeStyleConfig, nodeSizeConfig, nodeEmphasisConfig} =
        self.utils.getNodeStyle(node, configs, "graph");

      nodeResult.itemStyle = nodeStyleConfig;
      nodeResult.symbolSize = nodeSizeConfig;
      nodeResult.emphasis = {
        itemStyle: nodeEmphasisConfig.nodeStyle,
        symbolSize: nodeEmphasisConfig.nodeSize,
      };
      let resolvedName = "";
      if (typeof node.label === "string") {
        resolvedName = node.label;
      } else if (typeof node.name === "string") {
        resolvedName = node.name;
      } else if (node.id !== undefined && node.id !== null) {
        resolvedName = String(node.id);
      }
      nodeResult.name = resolvedName;
      // Preserve original NetJSON node for sidebar use
      /* eslint-disable no-underscore-dangle */
      nodeResult._source = self.utils.fastDeepCopy(node);
      return nodeResult;
    });
    const links = JSONData.links.map((link) => {
      const linkResult = self.utils.fastDeepCopy(link);
      const {linkStyleConfig, linkEmphasisConfig} = self.utils.getLinkStyle(
        link,
        configs,
        "graph",
      );
      linkResult.lineStyle = linkStyleConfig;
      linkResult.emphasis = {lineStyle: linkEmphasisConfig.linkStyle};
      return linkResult;
    });

    // Clone label config to avoid mutating defaults
    const baseGraphSeries = {...configs.graphConfig.series};
    const baseGraphLabel = {...(baseGraphSeries.label || {})};

    // Shared helper to get current graph zoom level
    const getGraphZoom = () => {
      try {
        const option = self.echarts.getOption();
        const series = Array.isArray(option.series) ? option.series : [];
        const graphSeries = series.find((s) => s && s.id === "network-graph");
        return graphSeries && typeof graphSeries.zoom === "number"
          ? graphSeries.zoom
          : 1;
      } catch (e) {
        return 1;
      }
    };

    // Set up dynamic label visibility based on zoom threshold
    if (
      typeof self.config.showGraphLabelsAtZoom === "number" &&
      self.config.showGraphLabelsAtZoom > 0
    ) {
      const threshold = self.config.showGraphLabelsAtZoom;
      baseGraphLabel.formatter = (params) =>
        getGraphZoom() >= threshold
          ? (params && params.data && params.data.name) || ""
          : "";
    }
    baseGraphSeries.label = baseGraphLabel;
    const series = [
      {
        ...baseGraphSeries,
        id: "network-graph",
        type: "graph",
        layout: configs.graphConfig.series.layout || "force",
        nodes,
        links,
      },
    ];
    const legend = categories.length
      ? {
          data: categories,
        }
      : undefined;

    return {
      legend,
      series,
      ...configs.graphConfig.baseOptions,
    };
  }

  /**
   * @function
   * @name generateMapOption
   *
   * generate map option in echarts by JSONData.
   *
   * @param  {object}  JSONData        Render data
   * @param  {object}  self          NetJSONGraph object
   *
   * @return {object}  map option
   *
   */
  generateMapOption(JSONData, self, clusters = []) {
    const configs = self.config;
    const {nodes, links} = JSONData;
    const flatNodes = JSONData.flatNodes || {};
    const linesData = [];
    let nodesData = [];

    nodes.forEach((node) => {
      if (node.properties) {
        // Maintain flatNodes lookup regardless of whether the node is rendered as a marker
        if (!JSONData.flatNodes) {
          flatNodes[node.id] = self.utils.fastDeepCopy(node);
        }
      }

      // Non-Point geometries should not become scatter markers, but we still need them for lines
      if (
        node.properties &&
        // eslint-disable-next-line no-underscore-dangle
        node.properties._featureType &&
        // eslint-disable-next-line no-underscore-dangle
        node.properties._featureType !== "Point"
      ) {
        return; // skip marker push only
      }
      if (!node.properties) {
        console.error(`Node ${node.id} position is undefined!`);
      } else {
        const {location} = node.properties;

        if (!location || !location.lng || !location.lat) {
          console.error(`Node ${node.id} position is undefined!`);
        } else {
          const {nodeEmphasisConfig} = self.utils.getNodeStyle(node, configs, "map");

          let nodeName = "";
          if (typeof node.label === "string") {
            nodeName = node.label;
          } else if (typeof node.name === "string") {
            nodeName = node.name;
          } else if (node.id !== undefined && node.id !== null) {
            nodeName = String(node.id);
          }
          nodesData.push({
            name: nodeName,
            value: [location.lng, location.lat],
            emphasis: {
              itemStyle: nodeEmphasisConfig.nodeStyle,
              symbolSize: nodeEmphasisConfig.nodeSize,
            },
            node,
            _source: self.utils.fastDeepCopy(node),
          });
        }
      }
    });
    links.forEach((link) => {
      if (!flatNodes[link.source]) {
        console.warn(`Node ${link.source} does not exist!`);
      } else if (!flatNodes[link.target]) {
        console.warn(`Node ${link.target} does not exist!`);
      } else {
        const {linkStyleConfig, linkEmphasisConfig} = self.utils.getLinkStyle(
          link,
          configs,
          "map",
        );
        linesData.push({
          coords: [
            [
              flatNodes[link.source].properties.location.lng,
              flatNodes[link.source].properties.location.lat,
            ],
            [
              flatNodes[link.target].properties.location.lng,
              flatNodes[link.target].properties.location.lat,
            ],
          ],
          lineStyle: linkStyleConfig,
          emphasis: {lineStyle: linkEmphasisConfig.linkStyle},
          link,
        });
      }
    });

    nodesData = nodesData.concat(clusters);

    const series = [
      {
        id: "geo-map",
        type: "scatter",
        name: "nodes",
        coordinateSystem: "leaflet",
        data: nodesData,
        label: configs.mapOptions.nodeConfig.label,
        itemStyle: {
          color: (params) => {
            if (
              params.data &&
              params.data.cluster &&
              params.data.itemStyle &&
              params.data.itemStyle.color
            ) {
              return params.data.itemStyle.color;
            }
            if (params.data && params.data.node && params.data.node.category) {
              const category = configs.nodeCategories.find(
                (cat) => cat.name === params.data.node.category,
              );
              const nodeColor =
                (category && category.nodeStyle && category.nodeStyle.color) ||
                (configs.mapOptions.nodeConfig &&
                  configs.mapOptions.nodeConfig.nodeStyle &&
                  configs.mapOptions.nodeConfig.nodeStyle.color) ||
                "#6c757d";
              return nodeColor;
            }
            const defaultColor =
              (configs.mapOptions.nodeConfig &&
                configs.mapOptions.nodeConfig.nodeStyle &&
                configs.mapOptions.nodeConfig.nodeStyle.color) ||
              "#6c757d";
            return defaultColor;
          },
        },
        symbolSize: (value, params) => {
          if (params.data && params.data.cluster) {
            return (
              (configs.mapOptions.clusterConfig &&
                configs.mapOptions.clusterConfig.symbolSize) ||
              30
            );
          }
          if (params.data && params.data.node) {
            const {nodeSizeConfig} = self.utils.getNodeStyle(
              params.data.node,
              configs,
              "map",
            );
            return typeof nodeSizeConfig === "object"
              ? (configs.mapOptions.nodeConfig &&
                  configs.mapOptions.nodeConfig.nodeSize) ||
                  17
              : nodeSizeConfig;
          }
          return (
            (configs.mapOptions.nodeConfig && configs.mapOptions.nodeConfig.nodeSize) ||
            17
          );
        },
        emphasis: configs.mapOptions.nodeConfig.emphasis,
      },
      Object.assign(configs.mapOptions.linkConfig, {
        id: "map-links",
        type: "lines",
        coordinateSystem: "leaflet",
        data: linesData,
      }),
    ];

    return {
      leaflet: {
        tiles: configs.mapTileConfig,
        mapOptions: configs.mapOptions,
      },
      series,
      ...configs.mapOptions.baseOptions,
    };
  }

  /**
   * @function
   * @name _propagateGraphZoom
   *
   * Enables wheel zoom outside graph canvas area.
   * @param  {object}  self          NetJSONGraph object
   *
   */
  _propagateGraphZoom(self) {
    const dom = self.echarts.getDom && self.echarts.getDom();
    if (!dom) {
      return;
    }
    const canvas = dom.querySelector("canvas");
    dom.addEventListener(
      "wheel",
      (e) => {
        if (!canvas) {
          return;
        }
        const rect = dom.getBoundingClientRect();
        // if coordinates of mouse are inside the canvas,
        // zoom will be handled normally
        if (
          e.clientX < rect.left ||
          e.clientX > rect.right ||
          e.clientY < rect.top ||
          e.clientY > rect.bottom
        ) {
          // during manual testing I couldn't trigger this
          // but let's leave it just in case the internals
          // of the library some day may change
          return;
        }
        // if we get here it's because the mouse is outside the canvas
        e.preventDefault();
        const r = canvas.getBoundingClientRect();
        // trigger wheel event in the canvas to propagate zoom
        canvas.dispatchEvent(
          new WheelEvent("wheel", {
            bubbles: true,
            cancelable: true,
            view: window,
            clientX: r.left + r.width / 2,
            clientY: r.top + r.height / 2,
            // invert deltaY to match expected zoom direction
            deltaY: -e.deltaY,
            deltaMode: e.deltaMode,
          }),
        );
      },
      {passive: false},
    );
  }

  /**
   * @function
   * @name graphRender
   *
   * Render the final graph result based on JSONData.
   * @param  {object}  JSONData        Render data
   * @param  {object}  self          NetJSONGraph object
   *
   */
  graphRender(JSONData, self) {
    self.utils.echartsSetOption(self.utils.generateGraphOption(JSONData, self), self);
    window.onresize = () => {
      self.echarts.resize();
    };
    // Handles zoom outside graph area
    self.utils._propagateGraphZoom(self);
    // Toggle labels on zoom threshold crossing
    if (self.config.showGraphLabelsAtZoom > 0) {
      self.echarts.on("graphRoam", (params) => {
        if (!params || !params.zoom) {
          return;
        }
        const option = self.echarts.getOption();
        const labelsVisible =
          option &&
          option.series &&
          option.series[0] &&
          option.series[0].zoom >= self.config.showGraphLabelsAtZoom;
        if (labelsVisible !== self._labelsVisible) {
          self.echarts.resize({animation: false, silent: true});
          self._labelsVisible = labelsVisible;
        }
      });
    }

    self.utils.setupHashChangeHandler(self);

    self.event.emit("onLoad");
    self.event.emit("onReady");
    self.event.emit("renderArray");
    self.event.emit("applyUrlFragmentState");
  }

  /**
   * @function
   * @name mapRender
   *
   * Render the final map result based on JSONData.
   * @param  {object}  JSONData       Render data
   * @param  {object}  self         NetJSONGraph object
   *
   */
  mapRender(JSONData, self) {
    const L = getLeaflet();
    if (!L) {
      throw new Error("Leaflet api is not loaded");
    }
    const {circleMarker, latLngBounds} = L;

    if (!self.config.mapTileConfig[0]) {
      throw new Error(`You must add the tiles via the "mapTileConfig" param!`);
    }

    // Accept both NetJSON and GeoJSON inputs. If GeoJSON is detected,
    // deep-copy it for polygon overlays and convert the working copy to
    // NetJSON so the rest of the pipeline can operate uniformly.
    if (self.utils.isGeoJSON(JSONData)) {
      self.originalGeoJSON = self.utils.fastDeepCopy(JSONData);
      JSONData = self.utils.geojsonToNetjson(JSONData);
      // From this point forward we treat the data as NetJSON internally,
      // but keep the public-facing `type` value unchanged ("geojson").
    }

    const initialMapOptions = self.utils.generateMapOption(JSONData, self);
    self.utils.echartsSetOption(initialMapOptions, self);
    self.bboxData = {
      nodes: [],
      links: [],
    };

    // eslint-disable-next-line no-underscore-dangle
    self.leaflet = self.echarts._api.getCoordinateSystems()[0].getLeaflet();
    // eslint-disable-next-line no-underscore-dangle
    self.leaflet._zoomAnimated = false;

    self.config.geoOptions = self.utils.deepMergeObj(
      {
        pointToLayer: (feature, latlng) =>
          circleMarker(latlng, self.config.geoOptions.style),
        onEachFeature: (feature, layer) => {
          layer.on("click", () => {
            const properties = {
              ...feature.properties,
            };
            self.config.onClickElement.call(self, "Feature", properties);
          });
        },
      },
      self.config.geoOptions,
    );

    // Render Polygon and MultiPolygon features from the original GeoJSON data.
    // While nodes (Points) and links (LineStrings) are handled by ECharts,
    // polygon features are rendered directly onto the Leaflet map using
    // a separate L.geoJSON layer. This allows for displaying geographical
    // areas like parks or districts alongside the network topology.
    if (self.originalGeoJSON) {
      addPolygonOverlays(self);
      // Auto-fit view to encompass ALL geometries (polygons + nodes)
      let bounds = null;

      // 1. Polygon overlays (if any)
      if (
        self.leaflet.polygonGeoJSON &&
        typeof self.leaflet.polygonGeoJSON.getBounds === "function"
      ) {
        bounds = self.leaflet.polygonGeoJSON.getBounds();
      }

      // 2. Nodes (Points)
      if (JSONData.nodes && JSONData.nodes.length) {
        const latlngs = JSONData.nodes
          .map((n) => n.properties.location)
          .map((loc) => [loc.lat, loc.lng]);
        if (bounds) {
          latlngs.forEach((ll) => bounds.extend(ll));
        } else {
          bounds = latLngBounds(latlngs);
        }
      }

      if (bounds && bounds.isValid()) {
        self.leaflet.fitBounds(bounds, {padding: [20, 20]});
      }
    }

    if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
      self.echarts.setOption({
        series: [
          {
            id: "geo-map",
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
          },
        ],
      });
    }

    self.leaflet.on("zoomend", () => {
      const currentZoom = self.leaflet.getZoom();
      const showLabel = currentZoom >= self.config.showLabelsAtZoomLevel;
      self.echarts.setOption({
        series: [
          {
            id: "geo-map",
            label: {
              show: showLabel,
            },
            emphasis: {
              label: {
                show: showLabel,
              },
            },
          },
        ],
      });

      // Zoom in/out buttons disabled only when it is equal to min/max zoomlevel
      // Manually handle zoom control state to ensure correct behavior with float zoom levels
      const minZoom = self.leaflet.getMinZoom();
      const maxZoom = self.leaflet.getMaxZoom();
      const zoomIn = document.querySelector(".leaflet-control-zoom-in");
      const zoomOut = document.querySelector(".leaflet-control-zoom-out");

      if (zoomIn && zoomOut) {
        if (Math.round(currentZoom) >= maxZoom) {
          zoomIn.classList.add("leaflet-disabled");
        } else {
          zoomIn.classList.remove("leaflet-disabled");
        }

        if (Math.round(currentZoom) <= minZoom) {
          zoomOut.classList.add("leaflet-disabled");
        } else {
          zoomOut.classList.remove("leaflet-disabled");
        }
      }
    });

    self.leaflet.on("moveend", async () => {
      const bounds = self.leaflet.getBounds();
      const removeBBoxData = () => {
        const removeNodes = new Set(self.bboxData.nodes);
        const removeLinks = new Set(self.bboxData.links);

        JSONData = {
          ...JSONData,
          nodes: JSONData.nodes.filter((node) => !removeNodes.has(node)),
          links: JSONData.links.filter((link) => !removeLinks.has(link)),
        };

        self.data = JSONData;
        self.echarts.setOption(self.utils.generateMapOption(JSONData, self));
        self.bboxData.nodes = [];
        self.bboxData.links = [];
      };
      if (
        self.leaflet.getZoom() >= self.config.loadMoreAtZoomLevel &&
        self.hasMoreData
      ) {
        const data = await self.utils.getBBoxData.call(self, self.JSONParam, bounds);
        self.config.prepareData.call(self, data);
        const dataNodeSet = new Set(self.data.nodes.map((n) => n.id));
        const sourceLinkSet = new Set(self.data.links.map((l) => l.source));
        const targetLinkSet = new Set(self.data.links.map((l) => l.target));
        const nodes = data.nodes.filter((node) => !dataNodeSet.has(node.id));
        const links = data.links.filter(
          (link) => !sourceLinkSet.has(link.source) && !targetLinkSet.has(link.target),
        );
        const boundsDataSet = new Set(data.nodes.map((n) => n.id));
        const nonCommonNodes = self.bboxData.nodes.filter(
          (node) => !boundsDataSet.has(node.id),
        );
        const removableNodes = new Set(nonCommonNodes.map((n) => n.id));

        JSONData.nodes = JSONData.nodes.filter((node) => !removableNodes.has(node.id));
        self.bboxData.nodes = self.bboxData.nodes.concat(nodes);
        self.bboxData.links = self.bboxData.links.concat(links);
        JSONData = {
          ...JSONData,
          nodes: JSONData.nodes.concat(nodes),
          links: JSONData.links.concat(links),
        };
        self.echarts.setOption(self.utils.generateMapOption(JSONData, self));
        self.data = JSONData;
      } else if (self.hasMoreData && self.bboxData.nodes.length > 0) {
        removeBBoxData();
      }
    });
    if (
      self.config.clustering &&
      self.config.clusteringThreshold < JSONData.nodes.length
    ) {
      let {clusters, nonClusterNodes, nonClusterLinks} = self.utils.makeCluster(self);

      // Only show clusters if we're below the disableClusteringAtLevel
      if (self.leaflet.getZoom() > self.config.disableClusteringAtLevel) {
        clusters = [];
        nonClusterNodes = JSONData.nodes;
        nonClusterLinks = JSONData.links;
      }

      self.echarts.setOption(
        self.utils.generateMapOption(
          {
            ...JSONData,
            nodes: nonClusterNodes,
            links: nonClusterLinks,
          },
          self,
          clusters,
        ),
      );

      self.echarts.on("click", (params) => {
        if (params.componentSubType === "scatter" && params.data.cluster) {
          // Zoom into the clicked cluster instead of expanding it
          const currentZoom = self.leaflet.getZoom();
          const targetZoom = Math.min(currentZoom + 2, self.leaflet.getMaxZoom());
          self.leaflet.setView(
            [params.data.value[1], params.data.value[0]],
            targetZoom,
          );
        }
      });

      // Ensure zoom handler consistently applies the same clustering logic
      self.leaflet.on("zoomend", () => {
        if (self.leaflet.getZoom() < self.config.disableClusteringAtLevel) {
          const nodeData = self.utils.makeCluster(self);
          clusters = nodeData.clusters;
          nonClusterNodes = nodeData.nonClusterNodes;
          nonClusterLinks = nodeData.nonClusterLinks;
          self.echarts.setOption(
            self.utils.generateMapOption(
              {
                ...JSONData,
                nodes: nonClusterNodes,
                links: nonClusterLinks,
              },
              self,
              clusters,
            ),
          );
        } else {
          // When above the threshold, show all nodes without clustering
          self.echarts.setOption(self.utils.generateMapOption(JSONData, self));
        }
      });
    }

    self.utils.setupHashChangeHandler(self);
    self.event.emit("onLoad");
    self.event.emit("onReady");
    self.event.emit("renderArray");
    self.event.emit("applyUrlFragmentState");
  }

  /**
   * @function
   * @name appendData
   * Append new data. Can only be used for `map` render!
   *
   * @param  {object}         JSONData   Data
   * @param  {object}         self     NetJSONGraph object
   *
   */
  appendData(JSONData, self) {
    if (self.config.render !== self.utils.mapRender) {
      throw new Error("AppendData function can only be used for map render!");
    }

    if (self.config.render === self.utils.mapRender) {
      const opts = self.utils.generateMapOption(JSONData, self);
      opts.series.forEach((obj, index) => {
        self.echarts.appendData({seriesIndex: index, data: obj.data});
      });
      // modify this.data
      self.utils.mergeData(JSONData, self);
    }

    self.config.afterUpdate.call(self);
  }

  /**
   * @function
   * @name addData
   * Add new data. Mainly used for `graph` render.
   *
   * @param  {object}         JSONData      Data
   * @param  {object}         self        NetJSONGraph object
   */
  addData(JSONData, self) {
    // modify this.data
    self.utils.mergeData(JSONData, self);

    // Ensure nodes are unique by ID using the utility function
    if (self.data.nodes && self.data.nodes.length > 0) {
      self.data.nodes = self.utils.deduplicateNodesById(self.data.nodes);
    }

    // `graph` render can't append data. So we have to merge the data and re-render.
    self.utils.render();

    self.config.afterUpdate.call(self);
  }

  /**
   * @function
   * @name mergeData
   * Merge new data. Modify this.data.
   *
   * @param  {object}         JSONData      Data
   * @param  {object}         self        NetJSONGraph object
   */
  mergeData(JSONData, self) {
    // Ensure incoming nodes array exists
    if (!JSONData.nodes) {
      JSONData.nodes = [];
    }

    // Create a set of existing node IDs for efficient lookup
    const existingNodeIds = new Set();
    self.data.nodes.forEach((node) => {
      if (node.id) {
        existingNodeIds.add(node.id);
      }
    });

    // Filter incoming nodes: keep nodes without IDs or with new IDs
    const newNodes = JSONData.nodes.filter((node) => {
      if (!node.id) {
        return true;
      }
      if (existingNodeIds.has(node.id)) {
        console.warn(`Duplicate node ID ${node.id} detected during merge and skipped.`);
        return false;
      }
      return true;
    });

    const nodes = self.data.nodes.concat(newNodes);
    // Ensure incoming links array exists
    const incomingLinks = JSONData.links || [];
    const links = self.data.links.concat(incomingLinks);

    Object.assign(self.data, JSONData, {
      nodes,
      links,
    });
  }
}

export default NetJSONGraphRender;

openwisp / netjsongraph.js / 21760645092

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous