PolicyTopology is a reusable React component for visualizing policy topologies using DOT strings.
To use the PolicyTopology component, you need to install the necessary dependencies.
First, make sure you have Node.js (>=20.19) installed. Then, in your project directory, run:
npm install react react-dom react-policy-topologyThis will install react-policy-topology along with its peer dependencies, react and react-dom.
To use the PolicyTopology component in your React application, follow these steps:
- Import the
PolicyTopologycomponent:
import React from 'react';
import PolicyTopology from 'react-policy-topology';- Use the component in your application:
const App = () => {
const dotString = `your DOT string here`;
return (
<div className="App">
<PolicyTopology initialDotString={dotString} />
</div>
);
};
export default App;initialDotString(string): The DOT string representing the graph to visualise.
This repo is a pnpm workspace: the npm package lives at the root, and the websocket runner app (built with Vite) in runner/. To install dependencies:
pnpm installTo start the development server:
pnpm startThis runs the runner app in development mode on http://localhost:3000. The app renders DOT strings received over a websocket at ws://$WEBSOCKET_HOST:$WEBSOCKET_PORT/ws (defaults: localhost:4000; the mock in runner/tests/topology.test.js shows how to feed it).
To build the app for production, run:
pnpm run buildThe build artifacts will be stored in the runner/build/ directory. To serve them:
pnpm run serverTo run the test suite (starts the dev server, a mock websocket feed, and browser tests):
pnpm run test:cidocker build -t react-policy-topology .
docker run -d -p 5000:5000 \
-e WEBSOCKET_HOST=your.websocket.host \
-e WEBSOCKET_PORT=1234 \
react-policy-topologyContributions are welcome! Please open an issue or submit a pull request.
This project is licensed under the Apache v2 License.
