This project aims to solve Issue #13 of Project Data, a CLI for supply-chain modeling. The goal is to visualize fulfillment plans, which defines the how and what in creating a thing. There are prototypes of these fulfillment plans written in python, it's now useful to visualize them with something more user-friendly than ascii art, as it's currently intended to be demo-able.
First build the JS that renders the graph using cytoscape.js:
yarn
# Set MIN=1 if you want a minified JS output
MIN=1 yarn buildThis will compile the TS code to ./bin/project-data-visualizations.js. This is then imported by the ipynb, and you're then free to go wild with python for computing the graphs, and rendering them with the full capability of cytoscape.js.
The python code interacts with javascript code using the notebookjs python package. The execute_js function interfaces with the JS code. It allows for passing data from python to JS, and it sends JS code the div ID of the HTML element inside the Jupyter notebook where the graph will render.
The python code sends JS code a dictionary containing three essential ingredients to make a cytoscape graph. These are: Elements, Layouts and Style. You can either modify the static JSON files directly that define these things, or create them purely in python.
Install the Jupyter VS Code extensions. Also you'll need poetry.
- Install poetry deps:
poetry shell
poetry install- Open the
.ipynbin VS Code. The Jupyter extension should render something similar to Google Colab. - Select the python interpreter from poetry:
.venv/bin/python. There should be an option at the top right to select the python interpreter. - Run the notebook.
Before starting, make sure you've first built the JS code. To run the .ipynb file in Google Colab, import the src/py/project-data-visualizations.ipynb file to Colab then copy over all of these files to the project:
./bin/project-data-visualizations.js./src/py/elements.json./src/py/layout.json./src/py/style.css./src/py/style.json