Network visualization (#14)

Closes #6 (except for "nice to haves", which we can revisit later)

- fix playwright install action
- add some nice options to flex component
- network viz
  - settle on cytoscape library
  - customizable colors/sizes/etc
  - legend and key
  - selectable nodes/edges
  - max nodes slider
  - expand button
  - download options
- add all available built-in and plugin layout algorithms, except ones
with only a few dozen stars on github and ones that crash. explicitly
set some key options for each algo to make them look sensible.
- add network viz to top of testbed page, with fake generated data
- util func to pick key colors
- download util funcs

.github/actions/install-playwright/action.yaml

@@ -7,6 +7,9 @@ inputs:
   working-directory:
     description: Where to install Playwright
     default: ./
+  browsers:
+    description: Browsers to install
+    default: chromium webkit firefox
 
 outputs:
   version:
@@ -53,7 +56,7 @@ runs:
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
       working-directory: ${{ inputs.working-directory }}
-      run: npx playwright install chromium --with-deps
+      run: npx playwright install ${{ inputs.browsers }} --with-deps
 
     - name: Install just Playwright's dependencies
       shell: bash

frontend/.vscode/extensions.json

@@ -5,6 +5,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "yoavbls.pretty-ts-errors",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "AntiAntiSepticeye.vscode-color-picker"
   ]
 }

frontend/package.json

@@ -25,6 +25,14 @@
     "clsx": "^2.1.1",
     "csv-parse": "^5.5.6",
     "csv-stringify": "^6.5.1",
+    "cytoscape": "^3.30.2",
+    "cytoscape-avsdf": "^1.0.0",
+    "cytoscape-cola": "^2.5.1",
+    "cytoscape-d3-force": "^1.1.4",
+    "cytoscape-dagre": "^2.5.0",
+    "cytoscape-fcose": "^2.2.0",
+    "cytoscape-klay": "^3.1.4",
+    "cytoscape-spread": "^3.0.0",
     "d3": "^7.9.0",
     "javascript-time-ago": "^2.5.10",
     "jotai": "^2.9.3",
@@ -44,6 +52,7 @@
     "@eslint/js": "^9.9.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@playwright/test": "^1.46.1",
+    "@types/cytoscape": "^3.21.8",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.5.0",

frontend/src/components/Flex.tsx

@@ -17,8 +17,12 @@ type Props<TagName extends TagNames = "div"> = {
   direction?: "row" | "column";
   /** amount of space between items */
   gap?: "md" | "none" | "xs" | "sm" | "lg" | "xl";
+  /** vertical gap fraction of horizontal gap */
+  gapRatio?: 1 | 0.5;
   /** whether to wrap items */
   wrap?: true | false;
+  /** whether to make full width */
+  full?: true | false;
   /** horizontal alignment */
   hAlign?: "center" | "left" | "right" | "stretch" | "space";
   /** vertical alignment */
@@ -56,7 +60,9 @@ const Flex = forwardRef(
       display = "block",
       direction = "row",
       gap = "md",
+      gapRatio = 1,
       wrap = true,
+      full = false,
       hAlign = "center",
       vAlign = "center",
       breakpoint = 0,
@@ -75,7 +81,8 @@ const Flex = forwardRef(
         direction === "column" ? alignMap[vAlign] : alignMap[hAlign],
       alignItems: direction === "column" ? alignMap[hAlign] : alignMap[vAlign],
       flexWrap: wrap && direction === "row" ? "wrap" : "nowrap",
-      gap: gapMap[gap],
+      gap: `${gapMap[gap] * gapRatio}px ${gapMap[gap]}px`,
+      width: full ? "100%" : undefined,
       ...style,
     };
 

frontend/src/components/Network.module.css

@@ -0,0 +1,45 @@
+.network {
+  display: grid;
+  grid-template-columns: max-content auto;
+  width: 100%;
+  box-shadow: var(--shadow);
+}
+
+.expanded {
+  aspect-ratio: unset !important;
+  width: calc(100vw - 100px);
+  height: calc(100vh - 200px);
+}
+
+.legend {
+  max-width: 220px;
+  height: 0;
+  min-height: 100%;
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--white);
+  box-shadow: inset -5px 0 5px -5px #00000020;
+  overflow-wrap: anywhere;
+}
+
+.node-symbol {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+}
+
+.edge-symbol {
+  width: 20px;
+  height: 3px;
+  rotate: -30deg;
+}
+
+.container {
+  background: var(--white);
+}
+
+.container > * {
+  width: 100% !important;
+  height: 100% !important;
+}