diff --git a/understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx new file mode 100644 index 0000000..317cbfc --- /dev/null +++ b/understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx @@ -0,0 +1,66 @@ +import { memo } from "react"; +import { Handle, Position } from "@xyflow/react"; +import type { Node, NodeProps } from "@xyflow/react"; +import { useDashboardStore } from "../store"; + +export interface DomainClusterData extends Record { + label: string; + summary: string; + entities?: string[]; + flowCount: number; + businessRules?: string[]; + domainId: string; +} + +export type DomainClusterFlowNode = Node; + +function DomainClusterNode({ data }: NodeProps) { + const navigateToDomain = useDashboardStore((s) => s.navigateToDomain); + const selectedNodeId = useDashboardStore((s) => s.selectedNodeId); + const selectNode = useDashboardStore((s) => s.selectNode); + const isSelected = selectedNodeId === data.domainId; + + return ( +
selectNode(data.domainId)} + onDoubleClick={() => navigateToDomain(data.domainId)} + > + + + +
+ {data.label} +
+
+ {data.summary} +
+ + {data.entities && data.entities.length > 0 && ( +
+
Entities
+
+ {data.entities.slice(0, 5).map((e) => ( + + {e} + + ))} + {data.entities.length > 5 && ( + +{data.entities.length - 5} + )} +
+
+ )} + +
+ {data.flowCount} flow{data.flowCount !== 1 ? "s" : ""} +
+
+ ); +} + +export default memo(DomainClusterNode);