{"id":13659162,"url":"https://github.com/esnet/react-network-diagrams","last_synced_at":"2025-04-05T17:09:36.561Z","repository":{"id":23460930,"uuid":"26824966","full_name":"esnet/react-network-diagrams","owner":"esnet","description":"Contains ESnet network mapping and circuit rendering code, as used in the ESnet portal.","archived":false,"fork":false,"pushed_at":"2023-01-27T14:12:23.000Z","size":19959,"stargazers_count":183,"open_issues_count":22,"forks_count":38,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-04-09T20:04:03.029Z","etag":null,"topics":["circuits","map","network-map","patch-panel","react","topology"],"latest_commit_sha":null,"homepage":"http://software.es.net/react-network-diagrams","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/esnet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-18T19:00:23.000Z","updated_at":"2024-03-11T11:37:07.000Z","dependencies_parsed_at":"2023-02-15T10:01:29.217Z","dependency_job_id":null,"html_url":"https://github.com/esnet/react-network-diagrams","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-network-diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-network-diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-network-diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-network-diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esnet","download_url":"https://codeload.github.com/esnet/react-network-diagrams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circuits","map","network-map","patch-panel","react","topology"],"created_at":"2024-08-02T05:01:05.794Z","updated_at":"2025-04-05T17:09:36.535Z","avatar_url":"https://github.com/esnet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Network Diagrams \n\n[![Build Status](https://travis-ci.org/esnet/react-network-diagrams.svg)](https://travis-ci.org/esnet/react-network-diagrams) [![npm version](https://badge.fury.io/js/react-network-diagrams.svg)](https://badge.fury.io/js/react-network-diagrams)\n\nThis repository contains an initial set of React circuit drawing and network mapping components which are used within the ESnet Portal, but are not tied to ESnet, or even to network visualization.\n\nThe mapping portion of this library is used in the public facing [ESnet Portal](http://my.es.net). The circuit diagrams code us used internally to track ESnet circuits in the ESDB.\n\nCurrent features of the library include:\n\n * Circuit diagrams:\n     - Basic\n     - Concatenated\n     - Parallel\n * Circuit couplers\n * Patch panel diagrams\n * Topology mapping\n     - Higher level network traffic visualization\n     - Linear, arc, bidirectional traffic and square edge types\n * Route rendering\n\nPlease browse the examples for a feel for the library, or read on to get started.\n\nGetting started\n---------------\n\nThe charts library is intended to be used with npm and the built into your project with something like webpack.\n\n    npm install react-network-diagrams --save\n\nOnce installed, you can import the necessary components from the library:\n\n    import { TrafficMap } from \"react-network-diagrams\";\n\nYou can then `render()` the traffic map in your component:\n\n    \u003cTrafficMap width={980} height={500} margin={50}\n                topology={topo}\n                traffic={traffic}\n                edgeColorMap={edgeColorMap}\n                edgeDrawingMethod=\"bidirectionalArrow\"\n                edgeThicknessMap={edgeThicknessMap}\n                edgeShapeMap={edgeShapeMap}\n                nodeSizeMap={nodeSizeMap}\n                nodeShapeMap={nodeShapeMap}\n                stylesMap={stylesMap}\n                selection={mapSelection}\n                onSelectionChange={this.handleSelectionChanged} /\u003e\n\n\nSee the examples for more information.\n\nExamples\n--------\n\nTo run the examples yourself, from the main directory, you first need to run these commands in the specific order:\n\n    npm install lerna\n    lerna exec npm install\n    lerna bootstrap\n\nThis will bootstrap the packages in the current Lerna repo and install the development dependencies into your node_modules directory.\n\nYou can then start up the test server, as well as automatic source building, by doing:\n\n    npm run start\n\nAnd now, for the magic, point your browser to:\n\n    http://localhost:3000/\n\nFrom now on, if you change the source code for the `examples` section, the examples bundle will be rebuilt and the browser will refresh itself. Errors will also be reported in the browser window.\n\nIf you want to change the `react-network-diagrams` code, you will need to run `npm run build` after working on your changes and then, the browser running the examples should reflect the changes.\n\nFor changes within the main library, run the following commands before committing the code:\n\n    npm run build\n    npm run docs (if there's changes to the API documentation)\n\nIf there are changes to the website, run `npm run build` from the `packages/website` directory before merging to master.\n\nOnce this is done, you can make a pull request to merge this code into the master branch\n\nRelease Process\n--------\n\n### Deploying a new version\n\nMerge all the changes you want to deploy into the master branch.\n\nMake sure to add release notes in [CHANGELOG.md](https://github.com/esnet/react-network-diagrams/blob/master/CHANGELOG.md)\n\nThen, from the top level directory, run\n\n    lerna publish\n\nAs part of this command, it will ask you the version number you want to pick. \n\nOnce that is selected, it will update the relevant package.json files and push code to github as well as deploy a new release to npm.\n\n### Deploying the website\n\nCurrently, the website that hosts the examples and documentation can be found here - http://software.es.net/react-network-diagrams\n\nThis is being served via github pages, from the branch `gh-pages-latest`. Make sure to merge the latest code from master into this branch and it should automatically deploy the latest website.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Freact-network-diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesnet%2Freact-network-diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Freact-network-diagrams/lists"}