public updateGraphData()

in web/src/app/pages/graph/architecture-graph/graph/renderer.ts [63:204]
139 lines of code
18 McCabe index (conditional complexity)

  public updateGraphData(graphData: GraphData): void {
    this._rootElement.clearChildren();
    this._rootElement
      .withDefs({
        ...this.generatePatternDefs(),
      })
      .withChildren([
        this.generateBackground(),
        $alignedGroup(Direction.Vertical)
          .withId('element-root')
          .withGap(20)
          .withChildren([
            ...this.generateTopMessages(graphData),
            generatePodOwnerRow(graphData, graphData.podOwnerOwners),
            $pathPipe(Direction.Horizontal, `pod-owner-owner-pipe`),
            generatePodOwnerRow(graphData, graphData.podOwners),
            $pathPipe(Direction.Horizontal, `pod-owner-pipe`),
            $alignedGroup(Direction.Horizontal)
              .withGap(5)
              .withChildren(graphData.nodes.map((n) => generateNodeBox(n))),
            $pathPipe(Direction.Horizontal, `node-service-pipe`),
            $empty().withChildren([
              $empty()
                .withAnchor(AnchorPoints.CENTER)
                .withPivot(AnchorPoints.CENTER)
                .withChildren([
                  $alignedGroup(Direction.Horizontal)
                    .withMargin(50, 0, 0, 0)
                    .withGap(5)
                    .withChildren(
                      graphData.services.map((s) => generateServiceBox(s)),
                    ),
                ]),
            ]),
          ]),
      ])
      .registerLayoutStep(0, () => {
        const nodeServicePipe = this.root.find(`node-service-pipe`) as PathPipe;
        const podOwnerPipe = this.root.find(`pod-owner-pipe`) as PathPipe;
        const podOwnerOwnerPipe = this.root.find(
          `pod-owner-owner-pipe`,
        ) as PathPipe;
        for (const node of graphData.nodes) {
          const nodeLeftPipe = this.root.find(
            `node_${node.name}_l`,
          )! as PathPipe;
          const nodeRightPipe = this.root.find(
            `node_${node.name}_r`,
          )! as PathPipe;
          nodeServicePipe.connectPipe(nodeLeftPipe);
          podOwnerPipe.connectPipe(nodeRightPipe);
          for (const pod of node.pods) {
            const podRect = this.root.find(`pod_${pod.namespace}_${pod.name}`)!;
            nodeLeftPipe.connectPoint(podRect, AnchorPoints.CENTER_LEFT);
            nodeRightPipe.connectPoint(podRect, AnchorPoints.TOP_RIGHT);
          }
        }
        for (const service of graphData.services) {
          const serviceRect = this.root.find(
            `service_${service.namespace}_${service.name}`,
          )!;
          nodeServicePipe.connectPoint(serviceRect, AnchorPoints.TOP);
        }
        for (const kind in graphData.podOwners) {
          for (const podOwner of graphData.podOwners[kind as PodOwnerKinds]) {
            const podOwnerId = `${kind}_${podOwner.namespace}_${podOwner.name}`;
            const podOwnerGraphObject = this.root.find(podOwnerId)!;
            podOwnerOwnerPipe.connectPoint(
              podOwnerGraphObject,
              AnchorPoints.TOP,
            );
          }
        }
        for (const kind in graphData.podOwnerOwners) {
          for (const podOwnerOwner of graphData.podOwnerOwners[
            kind as PodOwnerOwnerKinds
          ]) {
            const podOwnerOwnerId = `${kind}_${podOwnerOwner.namespace}_${podOwnerOwner.name}`;
            const podOwnerOwnerGraphObject = this.root.find(podOwnerOwnerId)!;
            podOwnerOwnerPipe.connectPoint(
              podOwnerOwnerGraphObject,
              AnchorPoints.BOTTOM,
            );
          }
        }
        for (const service of graphData.services) {
          for (const connection of service.connectedPods) {
            const serviceId = `service_${service.namespace}_${service.name}`;
            const nodeId = `node_${connection.node.name}_l`;
            const podId = `pod_${connection.pod.namespace}_${connection.pod.name}`;
            const path = `${serviceId}/node-service-pipe/${nodeId}/${podId}`;
            nodeServicePipe.registerPath(path, 'arrow', 15, 90);
          }
        }

        for (const kind in graphData.podOwners) {
          for (const owner of graphData.podOwners[kind as PodOwnerKinds]) {
            const ownerName = `${kind}_${owner.namespace}_${owner.name}`;
            const ownerBox = this.root.find(ownerName)!;
            podOwnerPipe.connectPoint(ownerBox, AnchorPoints.BOTTOM);
          }
        }

        for (const kind in graphData.podOwners) {
          for (const owner of graphData.podOwners[kind as PodOwnerKinds]) {
            const ownerId = `${kind}_${owner.namespace}_${owner.name}`;
            for (const connection of owner.connectedPods) {
              const nodeId = `node_${connection.node.name}_r`;
              const podId = `pod_${connection.pod.namespace}_${connection.pod.name}`;
              const path = `${ownerId}/pod-owner-pipe/${nodeId}/${podId}`;
              podOwnerPipe.registerPath(path, 'circle', 8, 90, {
                'stroke-dasharray': '3 3',
              });
            }
          }
        }

        const expectedConnectedKind: {
          [kind in PodOwnerOwnerKinds]: PodOwnerKinds;
        } = {
          cronjob: 'job',
          deployment: 'replicaset',
        };
        for (const kind in graphData.podOwnerOwners) {
          for (const podOwnerOwner of graphData.podOwnerOwners[
            kind as PodOwnerOwnerKinds
          ]) {
            const podOwnerOwnerId = `${kind}_${podOwnerOwner.namespace}_${podOwnerOwner.name}`;
            for (const podOwner of podOwnerOwner.connectedPodOwners) {
              const podOwnerId = `${
                expectedConnectedKind[kind as PodOwnerOwnerKinds]
              }_${podOwner.podOwner.namespace}_${podOwner.podOwner.name}`;
              const path = `${podOwnerOwnerId}/pod-owner-owner-pipe/${podOwnerId}`;
              podOwnerOwnerPipe.registerPath(path, 'circle', 8, 0, {
                'stroke-dasharray': '3 3',
              });
            }
          }
        }
      })
      .render();
  }