+
+
+
+ Mission Control
+
+
+
+ {[
+ { Icon: FaDatabase, label: 'Config Item' },
+ { Icon: FaHistory, label: 'Changes' },
+ { Icon: HiKey, label: 'Access Records' },
+ { Icon: HiUserGroup, label: 'Access Logs' },
+ { Icon: FaLightbulb, label: 'Insights' },
+ { Icon: HiShieldCheck, label: 'Users & Roles' },
+ ].map(({ Icon, label }) => (
+
+
+ {label}
+
+ ))}
+
+
+ );
+}
+
+function TransformPipeline({ id }: { id: string }) {
+ const steps = ['Exclude', 'Mask', 'Relationships', 'Changes'];
+ return (
+
+
+ {/* Col 1: Sources */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ viewTableSelector
+
+
+
+
+ {/* Col 2: Queries */}
+
+
+
+
+ $(var.key)
+ each → SQLite table
+
+
+
+
+
+ {/* Col 3: SQLite */}
+
+
+
+
+ optional merge SQL
+ join / aggregate
+
+
+
+
+
+ {/* Col 4: Outputs */}
+
+
+
+ pie · gauge · number
+
+
+
+
+ typed columns
+
+
+
+
+
+ {[
+ { Icon: FaFilePdf, label: 'PDF' },
+ { Icon: FaFileCsv, label: 'CSV' },
+ { Icon: VscJson, label: 'JSON' },
+ { Icon: FaFileCode, label: 'HTML' },
+ { Icon: FaMarkdown, label: 'MD' },
+ { Icon: Slack, label: 'Slack' },
+ ].map(({ Icon, label }) => (
+
+
+ {label}
+
+ ))}
+
+
+
+
+
+ {/* Arrows: Sources → Queries (fan-in) */}
+
+
+
+
+
+ {/* Arrow: Queries → SQLite */}
+
+
+ {/* Arrows: SQLite → Outputs (fan-out) */}
+
+
+
+
+ );
+}
+
+export default function ViewsDiagram(props: ViewsDiagramProps) {
+ return (
+
+
+ {/* Col 1: Data Sources */}
+
+
+ {/* Col 2: Named Queries */}
+
+
+
+ each → SQLite table
+
+
+
+
+ {/* Col 3: In-memory SQLite */}
+
+
+
+ optional merge SQL
+
+
+
+
+ {/* Col 4: PostgreSQL */}
+
+
+
+
+ view_<ns>_<name>
+
+
+
+
+
+ {/* Col 5: PostgREST API */}
+
+
+
+
+ Column Filters
+ → WHERE clauses
+
+
+
+
+
+ {/* Col 6: Outputs */}
+
+
+
+ visualizations
+
+
+
+
+ typed columns
+
+
+
+
+
+ {[
+ { Icon: FaFilePdf, label: 'PDF' },
+ { Icon: FaFileCsv, label: 'CSV' },
+ { Icon: VscJson, label: 'JSON' },
+ { Icon: FaFileCode, label: 'HTML' },
+ { Icon: FaMarkdown, label: 'MD' },
+ { Icon: Slack, label: 'Slack' },
+ ].map(({ Icon, label }) => (
+
+
+ {label}
+
+ ))}
+
+
+
+
+
+ {/* Arrow: Sources → Queries with $(var.key) label */}
+
+ $(var.key)
+
+ ),
+ }}
+ />
+
+ {/* Arrows: Queries → SQLite → PostgreSQL → API */}
+
+
+
+
+ {/* Arrows: API → Outputs (fan-out) */}
+
+
+
+
+ );
+}
+
+export default function ViewsVariablesDiagram(props: ViewsVariablesDiagramProps) {
+ return (
+