You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
NetJSON NetworkGraph visualizer: A JavaScript library for visualizing network data using NetJSON format, built with echarts, leaflet, and related dependencies.
6
+
7
+
## Development Setup
8
+
9
+
- Install dependencies: `yarn install`.
10
+
- Set up Python environment for QA tools: `pip install "openwisp-utils[qa]~=1.2.0"` (required for openwisp-qa-format and openwisp-qa-check).
11
+
- For browser tests, ensure Chrome and ChromeDriver are available (CI handles this automatically).
12
+
13
+
## Code Formatting
14
+
15
+
To format code, run:
16
+
17
+
```bash
18
+
openwisp-qa-format # python virtualenv needs to be enabled for this command to work, if not, install openwisp-utils as done in .github/workflows/ci.yml
19
+
yarn lint:fix # runs eslint --fix and prettier via lint-staged
20
+
```
21
+
22
+
## QA Checks
23
+
24
+
Run QA checks with:
25
+
26
+
```bash
27
+
./run-qa-checks
28
+
```
29
+
30
+
This runs yarn lint, openwisp-qa-check (with CSS/JS linting, skipping Python checks), and fails if issues are found.
31
+
32
+
## Testing
33
+
34
+
- Unit tests (Jest with jsdom): `yarn test`.
35
+
- Browser tests (requires dev server): Start server with `yarn start &`, then run `yarn test test/netjsongraph.browser.test.js` (uses Chrome/ChromeDriver).
36
+
- Coverage: `yarn coverage` (excludes browser test file).
37
+
- CI runs unit tests with coverage, then browser tests separately (see `.github/workflows/ci.yml`, ignore "build-and-deploy" job).
38
+
39
+
## Building and Running
40
+
41
+
- Development server: `yarn dev` (opens browser at localhost:8080).
42
+
- Production build: `yarn build`.
43
+
- Pre-commit hooks: husky runs lint-staged (prettier on `src/\*_/_.js`).
44
+
45
+
## General Guidelines
46
+
47
+
- Avoid other arbitrary formatting changes.
48
+
- Check for dependency vulnerabilities: `npm audit` or `yarn audit`.
49
+
50
+
## Code Review Checklist
51
+
52
+
When reviewing changes, always watch out for:
53
+
54
+
- Missing tests (especially browser tests for UI‑intensive features).
55
+
- Performance penalties.
56
+
- Inconsistencies and duplication which can lead to maintenance overhead.
57
+
- Security issues (e.g., no secrets in code, safe dep usage).
Copy file name to clipboardExpand all lines: README.md
+39Lines changed: 39 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,6 +32,12 @@ Plot nodes by geographic coordinates on a Leaflet basemap; pan/zoom with markers
32
32
Use a 2D floorplan (Leaflet CRS.Simple) to place and connect indoor nodes.
33
33
This example demonstrates the visualization of a mesh network topology graph on a 2D floorplan image.
34
34
35
+
### Indoor map as overlay of Geographic Map
36
+
37
+
[](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap-indoormap-overlay.html)
38
+
39
+
Overlay an indoor map on top of a geographic map. Click on a node to open the indoor map as a modal overlay.
40
+
35
41
### Network Graph with custom attributes and legend
@@ -465,6 +471,39 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
465
471
466
472
You can customize the style of GeoJSON features using `style` property. The list of all available properties can be found in the [Leaflet documentation](https://leafletjs.com/reference.html#geojson).
467
473
474
+
-`bookmarkableActions`
475
+
476
+
Configuration for adding url fragments when a node/link is clicked.
477
+
478
+
```javascript
479
+
bookmarkableActions: {
480
+
enabled: boolean,
481
+
id: string,
482
+
zoomOnRestore: boolean,
483
+
zoomLevel: number,
484
+
}
485
+
```
486
+
487
+
**Note: This feature is disabled by default.**
488
+
489
+
You can see this feature in action in the following example: [Indoor Map as Overlay of Geographic Map](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap-indoormap-overlay.html).
490
+
491
+
You can enable or disable adding url fragments by setting enabled to true or false. When enabled, the following parameters are added to the URL:
492
+
1. id – A prefix used to uniquely identify the map.
493
+
2. nodeId – The ID of the selected node, or sourceNodeId~targetNodeId in case of a link.
494
+
495
+
The `zoomOnRestore` option determines whether the map should automatically adjust its zoom level when the state is applied, and `zoomLevel` specifies the zoom level to use when this behavior is enabled. These options are relevant for Leaflet-based maps and allow finer control over how the map view is restored from a bookmarked URL.
496
+
497
+
This feature allows you to create shareable and restorable map or graph states using URL fragments. When this feature is enabled, the URL updates automatically whenever you click a node or a link in your NetJSONGraph visualization. This makes it easy to share a specific view, restore it later, or navigate between different states using the browser’s back and forward buttons.
498
+
499
+
This feature works across all ECharts graphs, as well as Leaflet-based maps including geographic and indoor floorplan maps and it supports multiple maps or graphs on the same page. The id parameter is used to uniquely identify which visualization the URL fragment belongs to (for example: `#id=map1&nodeId=device-1;id=map2&nodeId=device-2`).
500
+
501
+
For nodes, the behavior depends on the type of visualization. In Leaflet maps, clicking a node updates the URL, and when applying the state from the URL, it automatically centers the map on that node in addition to triggering its click event. In ECharts graphs, it only triggers the click event for the node.
502
+
503
+
For links, the URL fragment uses the format `source~target` as the `nodeId`. Opening such a URL restores the initial map or graph view and triggers the corresponding link click event.
504
+
505
+
If you need to manually remove the URL fragment, you can call the built-in utility method: `netjsongraphInstance.utils.removeUrlFragment(bookmarkableActions.id);` where you pass the value of your `bookmarkableActions.id` configuration.
506
+
468
507
-`onInit`
469
508
470
509
The callback function executed on initialization of `NetJSONGraph` instance.
0 commit comments