@datasqrl/dag-visualization
v2.4.3
Published
This package is part of the datasqrl website. It is responsible for displaying the deployment graph.
Readme
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.