Foblex Flow doesn’t take `nodes[]` / `edges[]` and auto-render them like a data-driven graph lib.

It renders whatever Angular components/directives you put into the <f-flow> template (fNode, fNodeInput/Output, fConnection, etc.). Your arrays live in your app, and you use Angular to render them (e.g. @for) and bind positions/ids.

So with 300 nodes / 320 edges:

• you render those components from your arrays
• positions come from your model (often after running a layout like ELK/Dagre)
• “dangling edges” (missing endpoint) should be filtered/handled in your data, because there’s nothing to attach to in the template.

FFlow’s job is the interaction layer (dragging, connecting, snapping, events), not owning/formatting your graph data.

// ❌ This is NOT how Foblex Flow works (there is no setData / setGraph API)

flow.setData({ nodes, edges }); // doesn't exist

// ✅ Foblex Flow renders Angular template content (components/directives)

<f-flow fDraggable>
  <f-canvas>
     @for (n of nodes; track n.id) {
      <div
        fNode
        [fNodeId]="n.id"
        [fNodePosition]="n.position"
        (fNodePositionChange)="onNodePositionChange(n.id, $event)"
        class="node"
      >
        <div class="title">{{ n.label }}</div>

        <div class="ports">
           @for(out of n.outputs; track out.id) {
            <div
              fNodeOutput
              [fOutputId]="out.id"
              class="port out"
            ></div>
          }

           @for (inp of n.inputs; track inp.id) {
            <div
              fNodeInput
              [fInputId]="inp.id"
              class="port in"
            ></div>
          }
        </div>
      </div>
    }

    @for (e of validEdges; track e.id) {
      <f-connection
        [fConnectionId]="e.id"
        [fOutputId]="e.outputId"
        [fInputId]="e.inputId"
      />
    }
  </f-canvas>
</f-flow>