feat: add diagram in domain search page

assets/components/search/DomainDiagram.tsx

@@ -0,0 +1,47 @@
+import React, {useEffect} from "react";
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from "@xyflow/react";
+import {Flex} from "antd";
+import {Domain} from "../../utils/api";
+import {getLayoutedElements} from "../tracking/watchlist/diagram/getLayoutedElements";
+import {domainEntitiesToNode, domainToNode, nsToNode, tldToNode} from "../tracking/watchlist/diagram/watchlistToNodes";
+import {domainEntitiesToEdges, domainNSToEdges, tldToEdge} from "../tracking/watchlist/diagram/watchlistToEdges";
+
+export function DomainDiagram({domain}: { domain: Domain }) {
+    const [nodes, setNodes, onNodesChange] = useNodesState([])
+    const [edges, setEdges, onEdgesChange] = useEdgesState([])
+
+
+    useEffect(() => {
+        const e = getLayoutedElements([
+            domainToNode(domain),
+            ...domainEntitiesToNode(domain),
+            tldToNode(domain.tld),
+            ...domain.nameservers.map(nsToNode)
+        ].flat(), [
+            domainEntitiesToEdges(domain),
+            tldToEdge(domain),
+            ...domainNSToEdges(domain)
+        ].flat())
+
+        setNodes(e.nodes)
+        setEdges(e.edges)
+    }, [])
+
+    return <Flex style={{width: '80vw', height: '80vh'}}>
+        <ReactFlow
+            fitView
+            colorMode='system'
+            nodesConnectable={false}
+            edgesReconnectable={false}
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            style={{width: '100%', height: '100%'}}
+        >
+            <MiniMap/>
+            <Controls/>
+            <Background/>
+        </ReactFlow>
+    </Flex>
+}