Data pipeline

A standalone Flow canvas driven by A2UI: nodes and edges bind to the data model, and node selection binds to /selected so clicking a stage highlights it. Pan, zoom and fit with the built-in controls.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "title",            "flow"          ],          "gap": "md"        },        {          "id": "title",          "component": "Text",          "text": "Data pipeline",          "variant": "title"        },        {          "id": "flow",          "component": "Flow",          "nodes": {            "path": "/nodes"          },          "edges": {            "path": "/edges"          },          "selectedId": {            "path": "/selected"          },          "ariaLabel": "ETL pipeline",          "height": 320,          "controls": true,          "fitOnMount": true        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "selected": "transform",        "nodes": [          {            "id": "source",            "title": "Source",            "subtitle": "Kafka",            "column": 0,            "row": 0,            "tone": "neutral",            "status": "Streaming"          },          {            "id": "transform",            "title": "Transform",            "subtitle": "Flink",            "column": 1,            "row": 0,            "tone": "info",            "status": "Running"          },          {            "id": "warehouse",            "title": "Warehouse",            "subtitle": "Snowflake",            "column": 2,            "row": 0,            "tone": "success",            "status": "Loaded"          },          {            "id": "dashboard",            "title": "Dashboard",            "subtitle": "Flab",            "column": 3,            "row": 0,            "tone": "neutral",            "status": "Live"          }        ],        "edges": [          {            "from": "source",            "to": "transform",            "label": "events"          },          {            "from": "transform",            "to": "warehouse",            "label": "rows",            "tone": "info"          },          {            "from": "warehouse",            "to": "dashboard",            "variant": "dashed"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "title",
            "flow"
          ],
          "gap": "md"
        },
        {
          "id": "title",
          "component": "Text",
          "text": "Data pipeline",
          "variant": "title"
        },
        {
          "id": "flow",
          "component": "Flow",
          "nodes": {
            "path": "/nodes"
          },
          "edges": {
            "path": "/edges"
          },
          "selectedId": {
            "path": "/selected"
          },
          "ariaLabel": "ETL pipeline",
          "height": 320,
          "controls": true,
          "fitOnMount": true
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "selected": "transform",
        "nodes": [
          {
            "id": "source",
            "title": "Source",
            "subtitle": "Kafka",
            "column": 0,
            "row": 0,
            "tone": "neutral",
            "status": "Streaming"
          },
          {
            "id": "transform",
            "title": "Transform",
            "subtitle": "Flink",
            "column": 1,
            "row": 0,
            "tone": "info",
            "status": "Running"
          },
          {
            "id": "warehouse",
            "title": "Warehouse",
            "subtitle": "Snowflake",
            "column": 2,
            "row": 0,
            "tone": "success",
            "status": "Loaded"
          },
          {
            "id": "dashboard",
            "title": "Dashboard",
            "subtitle": "Flab",
            "column": 3,
            "row": 0,
            "tone": "neutral",
            "status": "Live"
          }
        ],
        "edges": [
          {
            "from": "source",
            "to": "transform",
            "label": "events"
          },
          {
            "from": "transform",
            "to": "warehouse",
            "label": "rows",
            "tone": "info"
          },
          {
            "from": "warehouse",
            "to": "dashboard",
            "variant": "dashed"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Data pipeline

Source

Kafka

Transform

Flink

Warehouse

Snowflake

Dashboard

Flab

100%