@workglow/task-graph 0.0.124 → 0.0.125

package/README.md

@@ -32,6 +32,10 @@ bun add @workglow/task-graph
 yarn add @workglow/task-graph
 ```
 
+### Browser debugging
+
+For Chrome DevTools custom formatters (`Workflow`, `TaskGraph`, `Task`, etc.), import `installDevToolsFormatters` from **`@workglow/task-graph`** (browser build only). See [`src/debug/README.md`](./src/debug/README.md).
+
 ## Quick Start
 
 Here's a simple example that demonstrates the core concepts:

package/dist/browser.d.ts

@@ -4,4 +4,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 export * from "./common";
+export * from "./debug/console/ConsoleFormatters";
 //# sourceMappingURL=browser.d.ts.map

package/dist/browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC"}
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC"}

package/dist/browser.js

@@ -6791,6 +6791,645 @@ class TaskOutputTabularRepository extends TaskOutputRepository {
     this.emit("output_pruned");
   }
 }
+// src/debug/console/ConsoleFormatters.ts
+init_Dataflow();
+init_TaskGraph();
+import { DirectedAcyclicGraph as DirectedAcyclicGraph2 } from "@workglow/util/graph";
+init_Task();
+init_TaskTypes();
+function formatDuration(ms) {
+  if (ms < 1)
+    return `${(ms * 1000).toFixed(0)}µs`;
+  if (ms < 1000)
+    return `${ms.toFixed(1)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+function getSchemaProperties(schema) {
+  if (typeof schema === "boolean") {
+    return null;
+  }
+  return schema.properties;
+}
+
+class ConsoleFormatter {
+}
+function isDarkMode() {
+  return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+class WorkflowConsoleFormatter extends ConsoleFormatter {
+  header(workflow, config) {
+    if (workflow instanceof Workflow || workflow instanceof TaskGraph) {
+      const graph = workflow instanceof TaskGraph ? workflow : workflow.graph;
+      const error = workflow instanceof Workflow ? workflow.error : "";
+      const title = workflow instanceof Workflow ? "Workflow" : "TaskGraph";
+      const header = new JsonMLElement("div");
+      header.sectionHeader(title);
+      header.styledText(`(${graph.getTasks().length} tasks)`, "color: green; margin-left: 10px;");
+      if (error) {
+        header.styledText(error, "color: red; margin-left: 10px;");
+      }
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return true;
+  }
+  body(obj, config) {
+    const body = new JsonMLElement("div");
+    const graph = obj instanceof TaskGraph ? obj : obj.graph;
+    const nodes = body.createStyledList();
+    const tasks = graph.getTasks();
+    if (tasks.length) {
+      nodes.createTextChild("Tasks:");
+      for (const node of tasks) {
+        const nodeTag = nodes.createListItem("", "list-style-type: none;");
+        if (obj instanceof Workflow) {
+          for (const df of graph.getSourceDataflows(node.config.id)) {
+            const edgeTag = nodeTag.createChild("li").setStyle("padding-left: 20px;");
+            if (df.sourceTaskPortId === df.targetTaskPortId)
+              continue;
+            const num = tasks.findIndex((t) => t.config.id === df.sourceTaskId) - tasks.findIndex((t) => t.config.id === node.config.id);
+            edgeTag.highlightText("rename");
+            edgeTag.functionCall((el) => {
+              el.greyText('"');
+              el.outputText(`${df.sourceTaskPortId}`);
+              el.greyText('", "');
+              el.inputText(`${df.targetTaskPortId}`);
+              el.greyText('"');
+              if (num !== -1)
+                el.greyText(`, ${num}`);
+            });
+          }
+        }
+        nodeTag.createObjectTag(node, { graph, workflow: obj });
+      }
+    }
+    if (obj instanceof TaskGraph) {
+      const dfList = nodes.createTextChild("Dataflows:");
+      for (const df of obj.getDataflows()) {
+        const dfTag = dfList.createListItem("", "list-style-type: none;");
+        dfTag.createObjectTag(df);
+      }
+    }
+    let earliestStart;
+    let latestEnd;
+    for (const t of tasks) {
+      if (t.startedAt && (!earliestStart || t.startedAt < earliestStart)) {
+        earliestStart = t.startedAt;
+      }
+      if (t.completedAt && (!latestEnd || t.completedAt > latestEnd)) {
+        latestEnd = t.completedAt;
+      }
+    }
+    if (earliestStart && latestEnd) {
+      const durationMs = latestEnd.getTime() - earliestStart.getTime();
+      const timing = nodes.createListItem("", "list-style-type: none;");
+      timing.highlightText("Total duration: ");
+      timing.createTextChild(formatDuration(durationMs));
+    }
+    const dag = obj._dag ?? obj.graph._dag;
+    if (dag && dag.getNodes().length > 0)
+      body.createObjectTag(dag);
+    return body.toJsonML();
+  }
+}
+
+class WorkflowAPIConsoleFormatter extends ConsoleFormatter {
+  header(obj, config) {
+    if (obj === Workflow.prototype || obj === Workflow) {
+      const header = new JsonMLElement("div");
+      header.sectionHeader("Workflow API");
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return true;
+  }
+  body() {
+    const body = new JsonMLElement("div");
+    const apiSection = body.createChild("div");
+    const apiList = apiSection.createStyledList();
+    const apiTag = apiList.createListItem("", "list-style-type: none;");
+    apiTag.createHighlightedListItem(".reset()");
+    apiTag.createHighlightedListItem(".rename(outputName, inputName)");
+    apiTag.createHighlightedListItem(".run()");
+    apiTag.createHighlightedListItem(".abort()");
+    apiTag.createHighlightedListItem(".toJSON()");
+    apiTag.createHighlightedListItem(".toDependencyJSON()");
+    for (const [key, value] of Object.entries(Workflow.prototype)) {
+      if (typeof value === "function" && key !== "constructor") {
+        const item = apiTag.createListItem("");
+        item.createChild("span").createObjectTag(value);
+      }
+    }
+    return body.toJsonML();
+  }
+}
+
+class CreateWorkflowConsoleFormatter extends ConsoleFormatter {
+  header(obj, config) {
+    const workflowObj = obj;
+    if (workflowObj.workflowCreate) {
+      const header = new JsonMLElement("div");
+      const name = workflowObj.constructor.runtype ?? workflowObj.constructor.type ?? workflowObj.type.replace(/Task$/, "");
+      const inputSchema = workflowObj.inputSchema();
+      const outputSchema = workflowObj.outputSchema();
+      const inputProperties = getSchemaProperties(inputSchema);
+      const outputProperties = getSchemaProperties(outputSchema);
+      const inputs = inputProperties ? Object.keys(inputProperties).map((key) => `${key}: …`) : typeof inputSchema === "boolean" ? inputSchema ? ["…"] : ["never"] : [];
+      const outputs = outputProperties ? Object.keys(outputProperties).map((key) => `${key}: …`) : typeof outputSchema === "boolean" ? outputSchema ? ["…"] : ["never"] : [];
+      header.methodSignature(name);
+      header.functionCall((el) => {
+        el.objectBraces((innerObj) => {
+          innerObj.inputText(`${inputs.join(", ")}`);
+        });
+      });
+      header.greyText("): ");
+      header.objectBraces((el) => {
+        el.outputText(`${outputs.join(", ")}`);
+      });
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return false;
+  }
+  body(obj, config) {
+    return null;
+  }
+}
+
+class TaskConsoleFormatter extends ConsoleFormatter {
+  header(task2, config) {
+    if (!task2)
+      return null;
+    if (task2 instanceof Task && task2.inputSchema && task2.outputSchema && task2.runInputData && task2.runOutputData) {
+      const header = new JsonMLElement("div");
+      let name = task2.type ?? task2.constructor.name;
+      if (config?.workflow)
+        name = name.replace(/Task$/, "");
+      const inputSchema = task2.inputSchema();
+      const outputSchema = task2.outputSchema();
+      const inputProperties = getSchemaProperties(inputSchema);
+      const outputProperties = getSchemaProperties(outputSchema);
+      const inputs = inputProperties ? Object.keys(inputProperties).filter((key) => task2.runInputData[key] !== undefined).map((key) => {
+        const value = task2.runInputData[key];
+        return { name: key, value };
+      }) : typeof inputSchema === "boolean" && inputSchema ? Object.keys(task2.runInputData || {}).filter((key) => task2.runInputData[key] !== undefined).map((key) => {
+        const value = task2.runInputData[key];
+        return { name: key, value };
+      }) : [];
+      const outputs = outputProperties ? Object.keys(outputProperties).filter((key) => task2.runOutputData[key] !== undefined && task2.runOutputData[key] !== "").filter((key) => !(Array.isArray(task2.runOutputData[key]) && task2.runOutputData[key].length === 0)).map((key) => {
+        return { name: key, value: task2.runOutputData[key] };
+      }) : typeof outputSchema === "boolean" && outputSchema ? Object.keys(task2.runOutputData || {}).filter((key) => task2.runOutputData[key] !== undefined && task2.runOutputData[key] !== "").filter((key) => !(Array.isArray(task2.runOutputData[key]) && task2.runOutputData[key].length === 0)).map((key) => {
+        return { name: key, value: task2.runOutputData[key] };
+      }) : [];
+      header.highlightText(name);
+      header.functionCall((el) => {
+        el.objectBraces((innerObj) => {
+          innerObj.parameterList(inputs);
+        });
+        el.greyText(", ");
+        el.objectBraces((innerObj) => {
+          innerObj.parameterList([{ name: "id", value: task2.config.id }]);
+        });
+      });
+      if (task2.status === TaskStatus.COMPLETED) {
+        header.greyText(": ");
+        header.objectBraces((el) => {
+          el.parameterList(outputs, true);
+        });
+      }
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(task2, config) {
+    return task2 instanceof Task;
+  }
+  body(task2, config) {
+    if (!task2)
+      return null;
+    if (!(task2 instanceof Task))
+      return null;
+    const body = new JsonMLElement("div").setStyle("padding-left: 10px;");
+    const inputs = body.createStyledList("Inputs:");
+    const allInboundDataflows = config?.graph?.getSourceDataflows(task2.config.id);
+    const inputSchema = task2.inputSchema();
+    const inputProperties = getSchemaProperties(inputSchema);
+    const schemaKeys = inputProperties !== null ? Object.keys(inputProperties) : inputSchema === true ? Object.keys(task2.runInputData || {}) : [];
+    for (const key of schemaKeys) {
+      const value = task2.runInputData[key];
+      const li = inputs.createListItem("", "padding-left: 20px;");
+      li.inputText(`${key}: `);
+      const inputInboundDataflows = allInboundDataflows?.filter((e) => e.targetTaskPortId === key);
+      if (inputInboundDataflows) {
+        const sources = [];
+        const sourceValues = [];
+        inputInboundDataflows.forEach((df) => {
+          const sourceTask = config?.graph?.getTask(df.sourceTaskId);
+          sources.push(`${sourceTask?.type}->Output{${df.sourceTaskPortId}}`);
+          if (df.status === TaskStatus.COMPLETED) {
+            sourceValues.push(df.value);
+          }
+        });
+        if (sources.length > 1) {
+          if (sourceValues.length > 0) {
+            li.createValueObject(sourceValues);
+            li.createTextChild(" ");
+          }
+          li.createTextChild(`from [${sources.join(", ")}]`);
+        } else if (sources.length === 1) {
+          if (sourceValues.length > 0) {
+            li.createValueObject(sourceValues[0]);
+            li.createTextChild(" ");
+          }
+          li.createTextChild("from " + sources[0]);
+        } else {
+          li.createValueObject(value);
+        }
+      } else {
+        li.createValueObject(value);
+      }
+    }
+    const outputsList = body.createStyledList("Outputs:");
+    const outputSchema = task2.outputSchema();
+    const outputProperties = getSchemaProperties(outputSchema);
+    const outputKeys = outputProperties !== null ? Object.keys(outputProperties) : outputSchema === true ? Object.keys(task2.runOutputData || {}) : [];
+    for (const key of outputKeys) {
+      const value = task2.runOutputData[key];
+      const li = outputsList.createListItem("", "padding-left: 20px;");
+      li.outputText(`${key}: `);
+      li.createValueObject(value);
+    }
+    const taskConfig = body.createStyledList("Config:");
+    for (const [key, value] of Object.entries(task2.config)) {
+      if (value === undefined)
+        continue;
+      const li = taskConfig.createListItem("", "padding-left: 20px;");
+      li.inputText(`${key}: `);
+      li.createValueObject(value);
+    }
+    body.createStatusListItem(task2.status);
+    if (task2.startedAt || task2.completedAt) {
+      const timing = body.createStyledList("Timing:");
+      if (task2.startedAt) {
+        const li = timing.createListItem("", "padding-left: 20px;");
+        li.inputText("startedAt: ");
+        li.createTextChild(task2.startedAt.toISOString());
+      }
+      if (task2.completedAt) {
+        const li = timing.createListItem("", "padding-left: 20px;");
+        li.inputText("completedAt: ");
+        li.createTextChild(task2.completedAt.toISOString());
+      }
+      if (task2.startedAt && task2.completedAt) {
+        const durationMs = task2.completedAt.getTime() - task2.startedAt.getTime();
+        const li = timing.createListItem("", "padding-left: 20px;");
+        li.highlightText("duration: ");
+        li.createTextChild(formatDuration(durationMs));
+      }
+    }
+    const dag = task2.subGraph?._dag;
+    if (dag && dag.getNodes().length > 0)
+      body.createObjectTag(dag);
+    return body.toJsonML();
+  }
+}
+
+class DAGConsoleFormatter extends ConsoleFormatter {
+  header(obj, config) {
+    if (obj instanceof DirectedAcyclicGraph2) {
+      const header = new JsonMLElement("div");
+      header.createTextChild("DAG");
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return true;
+  }
+  body(obj, config) {
+    const body = new JsonMLElement("div");
+    body.createStyledList();
+    const dag = obj;
+    if (dag.getNodes().length > 0) {
+      const { dataURL, height } = generateGraphImage(dag);
+      if (dataURL) {
+        const imageTag = body.createChild("div");
+        imageTag.addAttribute("style", `background-image: url(${dataURL}); background-size: cover; background-position: center; width: 800px; height: ${height}px;`);
+      }
+    }
+    return body.toJsonML();
+  }
+}
+
+class DataflowConsoleFormatter extends ConsoleFormatter {
+  header(obj, config) {
+    if (obj instanceof Dataflow) {
+      const header = new JsonMLElement("div");
+      header.highlightText("Dataflow ");
+      header.inputText(`${obj.sourceTaskId}.${obj.sourceTaskPortId}`);
+      header.createTextChild(" -> ");
+      header.outputText(`${obj.targetTaskId}.${obj.targetTaskPortId}`);
+      if (obj.status === TaskStatus.COMPLETED) {
+        header.greyText(" = ");
+        header.createValueObject(obj.value);
+      }
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return true;
+  }
+  body(obj, config) {
+    return null;
+  }
+}
+
+class ReactElementConsoleFormatter extends ConsoleFormatter {
+  header(obj, config) {
+    const reactEl = obj;
+    if (reactEl?.$$typeof?.toString() === "Symbol(react.transitional.element)" && !config?.parent) {
+      const header = new JsonMLElement("div");
+      const isMemo = reactEl.type?.$$typeof?.toString() === "Symbol(react.memo)";
+      const name = !isMemo ? reactEl.displayName || reactEl.type?.displayName || reactEl.type?.name : reactEl.type?.type?.displayName || reactEl.type?.type?.name;
+      header.greyText(`<`);
+      header.sectionHeader(`${name}`);
+      header.greyText(`/>`);
+      if (reactEl.key) {
+        header.createTextChild(" ");
+        header.inputText(`key={${reactEl.key}}`);
+      }
+      if (isMemo) {
+        header.createTextChild(" ");
+        header.pill(`Memo`);
+      }
+      return header.toJsonML();
+    }
+    return null;
+  }
+  hasBody(value, config) {
+    return true;
+  }
+  body(obj, config) {
+    const body = new JsonMLElement("div");
+    const props = body.createStyledList("Props:");
+    const reactEl = obj;
+    props.propertyBlock(reactEl.props ?? {});
+    return body.toJsonML();
+  }
+}
+
+class JsonMLElement {
+  _attributes;
+  _jsonML;
+  static getColors() {
+    const dark = isDarkMode();
+    return {
+      grey: dark ? "#aaa" : "#333",
+      inputColor: dark ? "#ada" : "#363",
+      outputColor: dark ? "#caa" : "#633",
+      yellow: dark ? "#f3ce49" : "#a68307",
+      undefined: "#888"
+    };
+  }
+  constructor(tagName) {
+    this._attributes = {};
+    this._jsonML = [tagName, this._attributes];
+  }
+  coloredText(text, color) {
+    this.createChild("span").setStyle(`color:${color};`).createTextChild(text);
+    return this;
+  }
+  styledText(text, style) {
+    this.createChild("span").setStyle(style).createTextChild(text);
+    return this;
+  }
+  inputText(text) {
+    const colors = JsonMLElement.getColors();
+    return this.coloredText(text, colors.inputColor);
+  }
+  outputText(text) {
+    const colors = JsonMLElement.getColors();
+    return this.coloredText(text, colors.outputColor);
+  }
+  greyText(text) {
+    const colors = JsonMLElement.getColors();
+    return this.coloredText(text, colors.grey);
+  }
+  highlightText(text) {
+    const colors = JsonMLElement.getColors();
+    return this.coloredText(text, colors.yellow);
+  }
+  sectionHeader(text) {
+    return this.styledText(text, "font-weight: bold;");
+  }
+  pill(text) {
+    return this.styledText(text, "color: #009; background-color: #ccf; padding: 2px 4px; border-radius: 4px; font-size: 0.7em;");
+  }
+  methodSignature(name, params = "") {
+    const colors = JsonMLElement.getColors();
+    this.styledText("." + name, `font-weight: bold;color:${colors.yellow}`);
+    if (params)
+      this.greyText(`(${params})`);
+    return this;
+  }
+  parameterList(params, isOutput = false) {
+    params.forEach((param, i) => {
+      if (i > 0)
+        this.greyText(`, `);
+      if (isOutput) {
+        this.outputText(param.name);
+      } else {
+        this.inputText(param.name);
+      }
+      this.greyText(`: `);
+      this.createValueObject(param.value);
+    });
+    return this;
+  }
+  propertyBlock(params) {
+    for (const [key, value] of Object.entries(params)) {
+      const item = this.createListItem("");
+      item.inputText(key);
+      item.greyText(`: `);
+      item.createValueObject(value);
+    }
+    return this;
+  }
+  createListItem(text, style) {
+    const li = this.createChild("li").setStyle(`padding-left: 10px;${style ? " " + style : ""}`);
+    if (text)
+      li.createTextChild(text);
+    return li;
+  }
+  createHighlightedListItem(text) {
+    const colors = JsonMLElement.getColors();
+    this.createChild("li").setStyle(`color:${colors.yellow}; padding-left: 10px;`).createTextChild(text);
+    return this;
+  }
+  createStatusListItem(text) {
+    this.createStyledList("Status: ");
+    let color = "grey";
+    switch (text) {
+      case TaskStatus.COMPLETED:
+        color = "green";
+        break;
+      case TaskStatus.ABORTING:
+      case TaskStatus.FAILED:
+        color = "red";
+        break;
+      default:
+        color = "grey";
+    }
+    return this.createListItem(text, `padding-left: 30px;color: ${color};`);
+  }
+  createStyledList(title) {
+    const list = this.createChild("ol").setStyle("list-style-type: none; padding-left: 10px;");
+    if (title)
+      list.createTextChild(title);
+    return list;
+  }
+  objectBraces(content) {
+    this.greyText("{ ");
+    content(this);
+    this.greyText(" }");
+    return this;
+  }
+  functionCall(content) {
+    this.greyText("(");
+    content(this);
+    this.greyText(")");
+    return this;
+  }
+  createChild(tagName) {
+    const c = new JsonMLElement(tagName);
+    this._jsonML.push(c.toJsonML());
+    return c;
+  }
+  createObjectTag(object, config) {
+    const tag = this.createChild("object");
+    tag.addAttribute("object", object);
+    if (config) {
+      tag.addAttribute("config", config);
+    }
+    return tag;
+  }
+  createValueObject(value, config) {
+    if (Array.isArray(value))
+      return this.createArrayChild(value, config);
+    if (typeof value === "undefined") {
+      const colors = JsonMLElement.getColors();
+      return this.createChild("span").setStyle(`color:${colors.undefined};`).createTextChild("undefined");
+    }
+    return this.createObjectTag(value, config);
+  }
+  setStyle(style) {
+    this._attributes["style"] = style;
+    return this;
+  }
+  addAttribute(key, value) {
+    this._attributes[key] = value;
+    return this;
+  }
+  createTextChild(text) {
+    this._jsonML.push(text + "");
+    return this;
+  }
+  createArrayChild(array, config) {
+    const j = new JsonMLElement("span");
+    j.createTextChild("[");
+    for (let i = 0;i < array.length; ++i) {
+      if (i != 0)
+        j.createTextChild(", ");
+      j.createValueObject(array[i], config);
+    }
+    j.createTextChild("]");
+    this._jsonML.push(j.toJsonML());
+    return j;
+  }
+  toJsonML() {
+    return this._jsonML;
+  }
+}
+function computeLayout(graph, canvasWidth) {
+  const positions = {};
+  const layers = new Map;
+  const depths = {};
+  for (const node of graph.topologicallySortedNodes()) {
+    const incomingEdges = graph.inEdges(node.config.id).map(([from]) => from);
+    const depth = incomingEdges.length > 0 ? Math.max(...incomingEdges.map((from) => depths[from])) + 1 : 0;
+    depths[node.config.id] = depth;
+    if (!layers.has(depth))
+      layers.set(depth, []);
+    layers.get(depth).push(node.config.id);
+  }
+  const totalLayers = layers.size;
+  const layerSpacing = totalLayers > 1 ? Math.max(canvasWidth / totalLayers, 150) : 150;
+  const maxNodesInLayer = Math.max(...Array.from(layers.values()).map((layer) => layer.length));
+  const nodeSpacing = 100;
+  const requiredHeight = maxNodesInLayer * nodeSpacing + 100;
+  layers.forEach((layerNodes, layerIndex) => {
+    const yStart = (requiredHeight - layerNodes.length * nodeSpacing) / 2;
+    layerNodes.forEach((nodeId, index) => {
+      positions[nodeId] = {
+        x: layerIndex * layerSpacing + layerSpacing / 2,
+        y: yStart + index * nodeSpacing
+      };
+    });
+  });
+  return { positions, requiredHeight };
+}
+function generateGraphImage(graph, width = 800) {
+  const ratio = window.devicePixelRatio || 1;
+  const { positions, requiredHeight } = computeLayout(graph, width);
+  const canvas = document.createElement("canvas");
+  canvas.width = width * ratio;
+  canvas.height = requiredHeight * ratio;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    console.error("Canvas context is not available.");
+    return { dataURL: "", height: requiredHeight };
+  }
+  ctx.scale(ratio, ratio);
+  ctx.clearRect(0, 0, width, requiredHeight);
+  ctx.strokeStyle = "#aaa";
+  ctx.lineWidth = 2;
+  for (const [source, target] of graph.getEdges()) {
+    const fromNode = positions[source];
+    const toNode = positions[target];
+    if (fromNode && toNode) {
+      ctx.beginPath();
+      ctx.moveTo(fromNode.x, fromNode.y);
+      ctx.lineTo(toNode.x, toNode.y);
+      ctx.stroke();
+    }
+  }
+  ctx.fillStyle = "#3498db";
+  for (const node of graph.getNodes()) {
+    const pos = positions[node.config.id];
+    ctx.beginPath();
+    ctx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = "black";
+    ctx.font = `12px Arial`;
+    ctx.textAlign = "center";
+    ctx.fillText(node.type ?? "", pos.x, pos.y - 15);
+    ctx.fillStyle = "#3498db";
+  }
+  const dataURL = canvas.toDataURL("image/png");
+  return { dataURL, height: requiredHeight };
+}
+function installDevToolsFormatters() {
+  window.devtoolsFormatters = window.devtoolsFormatters || [];
+  window.devtoolsFormatters.push(new WorkflowAPIConsoleFormatter, new CreateWorkflowConsoleFormatter, new WorkflowConsoleFormatter, new TaskConsoleFormatter, new ReactElementConsoleFormatter, new DataflowConsoleFormatter, new DAGConsoleFormatter);
+}
 export {
   wrapSchemaInArray,
   whileTaskConfigSchema,
@@ -6815,6 +7454,8 @@ export {
   isStrictArraySchema,
   isIterationProperty,
   isFlexibleSchema,
+  isDarkMode,
+  installDevToolsFormatters,
   hasVectorOutput,
   hasVectorLikeInput,
   hasStructuredOutput,
@@ -6916,4 +7557,4 @@ export {
   ConditionalTask
 };
 
-//# debugId=6A9C922AAED7B7DF64756E2164756E21
+//# debugId=794A622164E9E85664756E2164756E21