feat: initial commit (#62)

src/ui/.gitignore

@@ -0,0 +1,8 @@
+
+.DS_Store
+
+*.swp
+
+node_modules/
+bin/
+.venv/

src/ui/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+	"useTabs": true,
+	"tabWidth": 2
+}

src/ui/README.md

@@ -0,0 +1,45 @@
+# Project Data Visualizations
+
+This project aims to solve [Issue #13](https://github.com/helpfulengineering/project-data-platform/issues/13) of [Project Data](https://github.com/helpfulengineering/project-data-platform/tree/main), 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.
+
+## Building the code
+
+First build the JS that renders the graph using [cytoscape.js](https://js.cytoscape.org/):
+
+```bash
+yarn
+
+# Set MIN=1 if you want a minified JS output
+MIN=1 yarn build
+```
+
+This 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](https://github.com/jorgehpo/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](https://js.cytoscape.org/#notation/elements-json), [Layouts](https://js.cytoscape.org/#layouts) and [Style](https://js.cytoscape.org/#style). You can either modify the static JSON files directly that define these things, or create them purely in python.
+
+## VS Code `.ipynb` Setup
+
+Install the [Jupyter VS Code extensions](https://code.visualstudio.com/docs/datascience/jupyter-notebooks). Also you'll need [poetry](https://python-poetry.org/docs/).
+
+1. Install poetry deps:
+
+```bash
+poetry shell
+poetry install
+```
+
+2. Open the [`.ipynb`](src/py/project-data-visualizations.ipynb) in VS Code. The Jupyter extension should render something similar to Google Colab.
+3. Select the python interpreter from poetry: `.venv/bin/python`. There should be an option at the top right to select the python interpreter.
+4. Run the notebook.
+
+## Google Colab Setup
+
+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/style.css`
+- `./static/james-kitchen.json`
+- `./static/roberts-dessert-kitchen.json`
+- `./static/tims-tasty-treats-kitchen.json`

src/ui/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "project-data-visualizations",
+	"version": "1.0.0",
+	"description": "Visualizations for Helpful Engineering's Project Data",
+	"main": "src/app.ts",
+	"repository": "[email protected]:timr11/project-data-visualizations",
+	"author": "Tim Romanski",
+	"license": "MIT",
+	"dependencies": {
+		"cytoscape": "^3.25.0",
+		"cytoscape-dagre": "^2.5.0",
+		"cytoscape-klay": "^3.1.4",
+		"cytoscape-popper": "^2.0.0",
+		"tippy.js": "^6.3.7",
+		"ts-md5": "^1.3.1"
+	},
+	"devDependencies": {
+		"@types/cytoscape-dagre": "^2.3.0",
+		"@types/cytoscape-klay": "^3.1.1",
+		"@types/cytoscape-popper": "^2.0.0",
+		"@types/jest": "^29.5.3",
+		"jest": "^29.6.1",
+		"ts-jest": "^29.1.1",
+		"ts-loader": "^9.4.4",
+		"typescript": "^5.1.6",
+		"webpack": "^5.88.2",
+		"webpack-cli": "^5.1.4",
+		"webpack-dev-server": "^3.11.0"
+	},
+	"scripts": {
+		"build": "npx webpack --config webpack.config.js",
+		"start": "python3 -m http.server"
+	}
+}

src/ui/poetry.toml

@@ -0,0 +1,2 @@
+[virtualenvs]
+in-project = true

src/ui/pyproject.toml

@@ -0,0 +1,19 @@
+[tool.poetry]
+name = "project-data-visualizations"
+version = "0.1.0"
+description = ""
+authors = ["timr11 <[email protected]>"]
+readme = "README.md"
+packages = [{include = "project_data_visualizations"}]
+
+[tool.poetry.dependencies]
+python = "^3.11"
+notebookjs = "^0.1.4"
+
+
+[tool.poetry.group.dev.dependencies]
+watchdog = "^3.0.0"
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

src/ui/src/py/input-data.json

@@ -0,0 +1,107 @@
+{
+	"product": {
+		"id": "Q15026",
+		"desc": "chair"
+	},
+	"type": "made",
+	"party": "Devhawk Engineering",
+	"design": "Funky Chair Design",
+	"bom": [
+		{
+			"product": {
+				"id": "QH100",
+				"desc": "chair leg"
+			},
+			"type": "supplied",
+			"party": "Robert's Chair Parts"
+		},
+		{
+			"product": {
+				"id": "QH108",
+				"desc": "nails"
+			},
+			"type": "supplied",
+			"party": "raw supplies"
+		},
+		{
+			"product": {
+				"id": "QH102",
+				"desc": "chair back"
+			},
+			"type": "supplied",
+			"party": "Robert's Chair Parts"
+		},
+		{
+			"product": {
+				"id": "QH100",
+				"desc": "chair leg"
+			},
+			"type": "made",
+			"party": "Devhawk Engineering",
+			"design": "Leg Design",
+			"bom": [
+				{
+					"product": {
+						"id": "QH104",
+						"desc": "wood"
+					},
+					"type": "supplied",
+					"party": "raw supplies"
+				}
+			]
+		},
+		{
+			"product": {
+				"id": "QH101",
+				"desc": "chair seat"
+			},
+			"type": "made",
+			"party": "James Maker Space",
+			"design": "Seat Design 2",
+			"bom": [
+				{
+					"product": {
+						"id": "QH107",
+						"desc": "frame"
+					},
+					"type": "supplied",
+					"party": "raw supplies"
+				},
+				{
+					"product": {
+						"id": "QH106",
+						"desc": "upholstery"
+					},
+					"type": "supplied",
+					"party": "raw supplies"
+				},
+				{
+					"product": {
+						"id": "QH105",
+						"desc": "stuffing"
+					},
+					"type": "missing"
+				}
+			]
+		},
+		{
+			"product": {
+				"id": "QH101",
+				"desc": "chair seat"
+			},
+			"type": "made",
+			"party": "Devhawk Engineering",
+			"design": "Seat Design 1",
+			"bom": [
+				{
+					"product": {
+						"id": "QH103",
+						"desc": "fabric"
+					},
+					"type": "supplied",
+					"party": "raw supplies"
+				}
+			]
+		}
+	]
+}