@datasqrl/dag-visualization
v2.5.8
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 }} />;TableSchemaCard (Query tables grid)
For a grid of "Query tables" (e.g. input tables of all type=query nodes), use TableSchemaCard. It shows name, optional documentation, and schema only (no close button, SQL, or physical plan). Load the same CSS as for the graph.
import { TableSchemaCard } from '@datasqrl/dag-visualization';
import '@datasqrl/dag-visualization/dist/index.css';
<TableSchemaCard
name={node.name}
documentation={node.documentation}
schema={node.schema}
primary_key={node.primary_key}
timestamp={node.timestamp}
stage={node.stage}
/>Voyager (Data model visualization)
Renders an interactive GraphQL Voyager view of a
SQRL project's API schema from SDL text (e.g. the contents of build/inferred_schema.graphqls).
React
Render the Voyager component with the schema as SDL text.
import { Voyager } from "@datasqrl/dag-visualization";
import "@datasqrl/dag-visualization/dist/data-model-theme.css";
<Voyager schema={sdlString} />;Plain JS (standalone HTML page)
Load the package script and data-model-theme.css, then use DAGVisualization.renderVoyager.
<head>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<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/data-model-theme.css"
/>
</head>
<body>
<div id="voyager"></div>
<script>
const schema = `type Query { ... }`; // GraphQL SDL
DAGVisualization.renderVoyager(document.getElementById("voyager"), schema);
</script>
</body>See examples/Voyager.html for a runnable example. The SQRL compiler emits
an equivalent data_model_visual.html with the schema inlined.
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.row_count: string | null- Optional. Expected number of rows in scientific notation (e.g.3e5exact,~3e5estimated). Omitted for older data. Shown in the Physical Plan side panel; used to scale outgoing edge line width in the graph.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.connectors: Record<string, string>- Connector configuration map. Displayed forimport(sources) andexport(sinks) node types.documentation: string- Optional documentation text. When non-empty, displayed in the right-side popup below the table name, above the schema.