Render protected circuit structure

src/frontend/utils/circuit-grid-projection.ts

@@ -1,8 +1,10 @@
 import type {
   CircuitTreeCircuitDto,
+  CircuitTreeComponentDto,
   CircuitTreeDeviceRowDto,
   CircuitTreeSectionDto,
 } from "../types.js";
+import { buildCircuitStructureProjection } from "./circuit-structure-projection";
 import {
   allColumns,
   circuitOnlyColumns,
@@ -42,6 +44,7 @@ export interface VisibleGridRow {
   sectionId: string;
   circuit?: CircuitTreeCircuitDto;
   device?: CircuitTreeDeviceRowDto;
+  component?: CircuitTreeComponentDto;
   cells: VisibleGridCell[];
 }
 
@@ -160,21 +163,64 @@ function makeVisibleGridRow(
 }
 
 export function buildVisibleGridRows(sections: readonly CircuitTreeSectionDto[]): VisibleGridRow[] {
-  const rows: VisibleGridRow[] = [];
-  for (const section of sections) {
-    rows.push({
-      rowKey: `section:${section.id}`,
-      rowType: "section",
-      sectionId: section.id,
-      cells: allColumns.map((column) => ({
-        cellKey: column.key,
-        editable: false,
-        kind: "readonly",
-        value: undefined,
-      })),
-    });
+  return buildVisibleGridRowsWithStructure(sections, {
+    headerComponents: [],
+    footerComponents: [],
+  });
+}
 
-    for (const circuit of section.circuits) {
+export function buildVisibleGridRowsWithStructure(
+  sections: readonly CircuitTreeSectionDto[],
+  structure: {
+    headerComponents: readonly CircuitTreeComponentDto[];
+    footerComponents: readonly CircuitTreeComponentDto[];
+  }
+): VisibleGridRow[] {
+  const rows: VisibleGridRow[] = [];
+  const projected = buildCircuitStructureProjection({
+    headerComponents: [...structure.headerComponents],
+    sections: [...sections],
+    footerComponents: [...structure.footerComponents],
+  });
+  for (const row of projected) {
+    if ("component" in row) {
+      const component = row.component;
+      rows.push({
+        rowKey: row.rowKey,
+        rowType: row.rowType,
+        sectionId: component.sectionId ?? `__${row.zone}__`,
+        component,
+        cells: allColumns.map((column) => ({
+          cellKey: column.key,
+          editable: false,
+          kind: "readonly",
+          value:
+            column.key === "equipmentIdentifier"
+              ? component.equipmentIdentifier
+              : column.key === "displayName"
+                ? component.name
+                : undefined,
+        })),
+      });
+      continue;
+    }
+    const section = row.section;
+    if (row.rowType === "groupHeader") {
+      rows.push({
+        rowKey: `section:${section.id}`,
+        rowType: "section",
+        sectionId: section.id,
+        cells: allColumns.map((column) => ({
+          cellKey: column.key,
+          editable: false,
+          kind: "readonly",
+          value: undefined,
+        })),
+      });
+      continue;
+    }
+    if (row.rowType === "circuitBlock") {
+      const circuit = row.circuit;
       if (circuit.deviceRows.length === 0) {
         rows.push(makeVisibleGridRow("reserveCircuit", section.id, circuit));
       } else if (circuit.deviceRows.length === 1) {
@@ -185,8 +231,8 @@ export function buildVisibleGridRows(sections: readonly CircuitTreeSectionDto[])
           rows.push(makeVisibleGridRow("deviceRow", section.id, circuit, device));
         }
       }
+      continue;
     }
-
     rows.push(makeVisibleGridRow("placeholder", section.id));
   }
   return rows;