run-llama · marcusschiesser · Apr 22, 2025 · Apr 22, 2025 · May 20, 2025 · May 21, 2025
diff --git a/demo/visualization/.gitignore b/demo/visualization/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demo/visualization/index.html b/demo/visualization/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/llamaindex.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Sigma.JS + TS + Llamaindex</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demo/visualization/package.json b/demo/visualization/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "browser",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@llama-flow/core": "latest",
+    "@llama-flow/viz": "workspace:*",
+    "graphology": "^0.26.0",
+    "graphology-layout-force": "^0.2.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sigma": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.2"
+  }
+}
diff --git a/demo/visualization/public/llamaindex.svg b/demo/visualization/public/llamaindex.svg
diff --git a/demo/visualization/src/main.ts b/demo/visualization/src/main.ts
@@ -0,0 +1,24 @@
+import "./style.css";
+import Sigma from "sigma";
+import { workflow } from "./workflow";
+import { toSigma } from "@llama-flow/viz";
+import ForceSupervisor from "graphology-layout-force/worker";
+
+const container = document.getElementById("app") as HTMLElement;
+
+// const graph = new Graph();
+// graph.addNode("John", { x: 0, y: 10, size: 5, label: "John", color: "blue" });
+// graph.addNode("Mary", { x: 10, y: 0, size: 3, label: "Mary", color: "red" });
+// graph.addEdge("John", "Mary");
+const graph = toSigma(workflow.getGraph());
+
+graph.nodes().forEach((node, i) => {
+  const angle = (i * 2 * Math.PI) / graph.order;
+  graph.setNodeAttribute(node, "x", 100 * Math.cos(angle));
+  graph.setNodeAttribute(node, "y", 100 * Math.sin(angle));
+});
+
+const layout = new ForceSupervisor(graph);
+layout.start();
+
+new Sigma(graph, container);
diff --git a/demo/visualization/src/style.css b/demo/visualization/src/style.css
@@ -0,0 +1,9 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Prevents scrollbars if graph is larger than viewport */
+}
diff --git a/demo/visualization/src/vite-env.d.ts b/demo/visualization/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demo/visualization/src/workflow.ts b/demo/visualization/src/workflow.ts
@@ -0,0 +1,58 @@
+import { createWorkflow, workflowEvent, getContext } from "@llama-flow/core";
+import { withGraph } from "@llama-flow/viz";
+
+//#region define workflow events
+const startEvent = workflowEvent<string>({
+  debugLabel: "start",
+});
+const branchAEvent = workflowEvent<string>({
+  debugLabel: "branchA",
+});
+const branchBEvent = workflowEvent<string>({
+  debugLabel: "branchB",
+});
+const branchCEvent = workflowEvent<string>({
+  debugLabel: "branchC",
+});
+const branchCompleteEvent = workflowEvent<string>({
+  debugLabel: "branchComplete",
+});
+const allCompleteEvent = workflowEvent<string>({
+  debugLabel: "allComplete",
+});
+const stopEvent = workflowEvent<string>({
+  debugLabel: "stop",
+});
+//#endregion
+
+//#region defines workflow
+const workflow = withGraph(createWorkflow());
+workflow.handle([startEvent], async () => {
+  // emit 3 different events, handled separately
+  const { sendEvent, stream } = getContext();
+  sendEvent(branchAEvent.with("Branch A"));
+  sendEvent(branchBEvent.with("Branch B"));
+  sendEvent(branchCEvent.with("Branch C"));
+
+  const results = await stream.filter(branchCompleteEvent).take(3).toArray();
+
+  return allCompleteEvent.with(results.map((e) => e.data).join(", "));
+});
+
+workflow.handle([branchAEvent], (branchA) => {
+  return branchCompleteEvent.with(branchA.data);
+});
+
+workflow.handle([branchBEvent], (branchB) => {
+  return branchCompleteEvent.with(branchB.data);
+});
+
+workflow.handle([branchCEvent], (branchC) => {
+  return branchCompleteEvent.with(branchC.data);
+});
+
+workflow.handle([allCompleteEvent], (allComplete) => {
+  return stopEvent.with(allComplete.data);
+});
+
+export { workflow };
diff --git a/demo/visualization/tsconfig.app.json b/demo/visualization/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/demo/visualization/tsconfig.json b/demo/visualization/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "tsBuildInfoFile": "./lib/.tsbuildinfo"
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/demo/visualization/tsconfig.node.json b/demo/visualization/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/demo/visualization/vite.config.ts b/demo/visualization/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/packages/viz/examples/basic.ts b/packages/viz/examples/basic.ts
@@ -0,0 +1,72 @@
+import { createWorkflow, workflowEvent, getContext } from "@llama-flow/core";
+import { withGraph } from "@llama-flow/viz";
+
+//#region define workflow events
+const startEvent = workflowEvent<string>({
+  debugLabel: "start",
+});
+const branchAEvent = workflowEvent<string>({
+  debugLabel: "branchA",
+});
+const branchBEvent = workflowEvent<string>({
+  debugLabel: "branchB",
+});
+const branchCEvent = workflowEvent<string>({
+  debugLabel: "branchC",
+});
+const branchCompleteEvent = workflowEvent<string>({
+  debugLabel: "branchComplete",
+});
+const allCompleteEvent = workflowEvent<string>({
+  debugLabel: "allComplete",
+});
+const stopEvent = workflowEvent<string>({
+  debugLabel: "stop",
+});
+//#endregion
+
+//#region defines workflow
+const workflow = withGraph(createWorkflow());
+workflow.handle([startEvent], async () => {
+  // emit 3 different events, handled separately
+  const { sendEvent, stream } = getContext();
+  sendEvent(branchAEvent.with("Branch A"));
+  sendEvent(branchBEvent.with("Branch B"));
+  sendEvent(branchCEvent.with("Branch C"));
+
+  const results = await stream.filter(branchCompleteEvent).take(3).toArray();
+
+  return allCompleteEvent.with(results.map((e) => e.data).join(", "));
+});
+
+workflow.handle([branchAEvent], (branchA) => {
+  return branchCompleteEvent.with(branchA.data);
+});
+
+workflow.handle([branchBEvent], (branchB) => {
+  return branchCompleteEvent.with(branchB.data);
+});
+
+workflow.handle([branchCEvent], (branchC) => {
+  return branchCompleteEvent.with(branchC.data);
+});
+
+workflow.handle([allCompleteEvent], (allComplete) => {
+  return stopEvent.with(allComplete.data);
+});
+
+//#endregion
+
+const graph = workflow.getGraph();
+console.log("--- Graph Nodes ---");
+graph.forEachNode((node, attributes) => {
+  console.log(`Node: ${node}, Attributes: ${JSON.stringify(attributes)}`);
+});
+
+console.log("\n--- Graph Edges ---");
+graph.forEachEdge((edge, attributes, source, target) => {
+  console.log(
+    `Edge from ${source} to ${target} (ID: ${edge}), Attributes: ${JSON.stringify(attributes)}`,
+  );
+});
+console.log("--- End of Graph Details ---");
diff --git a/packages/viz/package.json b/packages/viz/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@llama-flow/viz",
+  "version": "0.1.0",
+  "description": "Visualization components for LlamaFlow",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bunchee",
+    "dev": "bunchee --watch"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.27.1",
+    "@llama-flow/core": "workspace:*",
+    "@types/node": "^22.15.19",
+    "bunchee": "^6.5.1"
+  },
+  "peerDependencies": {
+    "@llama-flow/core": "workspace:*"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/run-llama/llama-flow.git",
+    "directory": "packages/viz"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.27.2",
+    "graphology": "^0.26.0"
+  }
+}