https://github.com/cqcl/tierkreis-viz
Interactive Tierkreis graph vizualizer that runs in your browser.
https://github.com/cqcl/tierkreis-viz
Last synced: about 1 year ago
JSON representation
Interactive Tierkreis graph vizualizer that runs in your browser.
- Host: GitHub
- URL: https://github.com/cqcl/tierkreis-viz
- Owner: CQCL
- Created: 2023-07-19T12:10:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-01T10:24:34.000Z (almost 3 years ago)
- Last Synced: 2025-02-06T21:46:25.707Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 223 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tierkreis Graph Visualizer
## Running the visualizer
### 🐋 Docker
```bash
docker build -t tierkreis-viz .
docker run -it -p 3000:3000 --rm tierkreis-viz # Runs on port 3000.
```
### ⬣ Node
Make sure you are using [node](https://nodejs.org/en) v16.8 or higher.
```bash
npm i
npm run build
npm run start
```
## Using the vizualizer
`tierkreis/examples/viz_demo.ipynb` and `tierkreis/examples/variational-viz.ipynb` contain a few example notebooks to get started. Connecting to the vizualiser requires instrumenting tierkreis with the VizRuntime plugin.
```python
from tierkreis.pyruntime.python_runtime import VizRuntime
...
cl = VizRuntime("http://localhost:3000", [test_worker.main.root, ...])
...
```
The visualizer responds to 3 different commands.
```python
cl.viz_graph(graph) # Renders the graph in the vizualizer.
cl.type_check_graph(graph) # Highlights nodes which have type errors.
cl.run_graph(graph) # Shows the runtime state of the graph.
```
Example of a tierkreis graph being run with the visualizer:
> **⚠️ Note:**
> Runtime updates are not currently supported for nested graphs (box types). We recommend unboxing nested graphs if you would like accurate visual runtime updates.
## Development
This visualizer is built with [React](https://react.dev/), [NextJS 13](https://nextjs.org/) and [Typescript](https://www.typescriptlang.org/).
```bash
npm run dev # Runs vizualizer in development mode.
```
See [NextJS docs](https://nextjs.org/docs) for more information.
#### Updating grpc client code
`generateTSDecoders.sh` generates grpc client code in `src/grpcjs/proto/v1alpha` based on the proto definitions in `tierkreis/protos/v1alpha`. The grpc client code is used to deserialize incoming tierkreis `Graph`, `TypeErrors` and `OutputStream` binaries.