@datasqrl/dag-visualization NPM

DAG Visualization

JS package for visualizing the DAG plan produced by SQRL

Usage

Plain JS

Load script and css styles to your file. Then use DAGVisualization.renderGraph method to initialize a graph in selected DOM node.

<head>
  <title>DataSQRL Deployment Graph Visualization</title>
  <script src="https://www.unpkg.com/@datasqrl/dag-visualization@latest/dist/umd/index.js"></script>
  <link
    rel="stylesheet"
    href="https://www.unpkg.com/@datasqrl/dag-visualization@latest/dist/index.css"
  />
</head>
<body>
  <div id="graph"></div>
  <script>
    const elements = [...];
    DAGVisualization.renderGraph(
      document.getElementById("graph"),
      elements
    );
  </script>
</body>

React

Install @datasqrl/dag-visualization package and render <Graph/> with nodes and edges passed as props.

You need to transform input elements array additionally if it has the same format as in Plain JS example.

import { Graph } from '@datasqrl/dag-visualization';

const elements = [...];
const nodes = elements.map(function (node) {
  return { data: node };
});

const edges = elements.flatMap((node) =>
  (node?.inputs || []).map((input) => ({
    data: { source: input, target: node?.id },
  })),
);
return <Graph elements={{ nodes, edges }} />;

Data format

The elements array presented in usage examples should contain a list of nodes with the following properties:

id: string - Unique identifier of the node.
inputs: string[] - List of node ID's that are connected to the current node.
name: string[] - Node's name (displayed on the graph).
type: string - Node's type. Defines node appearance and additional properties.
stage: string - Node's stage.
plan: string - Node's Physical plan.
schema: { name: string, type: string }[] - The list of fields in Node's Schema. Required for the following node types: stream, state, relation.
primary_key: string[] - The list of field names that are primary keys in schema.
timestamp: string - The name of a timestamp field in schema.