React Flow는 API나 Examples가 잘 설명되어 있어서 필요한 props를 가져다 사용할 수 있다.

TYPESCRIPT
1import ReactFlow, {
2  Node,
3  Edge,
4  isEdge,
5  isNode,
6  ConnectionLineType,
7  Panel,
8  Controls,
9} from "reactflow";
10import "reactflow/dist/style.css";
11
12<ReactFlow
13  nodes={nodes}
14  edges={edges}
15  nodeTypes={nodeTypes}
16  nodesDraggable={false}
17  fitView
18  minZoom={-Infinity}
19  maxZoom={Infinity}
20  connectionLineType={ConnectionLineType.SmoothStep}
21  elementsSelectable={true}
22  onSelectionChange={(selectedElements) => {
23    const node = selectedElements.nodes[0];
24    setSelectde(node);
25    typeof selectde !== "undefined" && highlightPath(node, nodes, edges, true);
26  }}
27  onPaneClick={() => {
28    resetNodeStyles();
29    setSelectedNode({});
30  }}
31>
32  <Panel position="top-right">
33    <Controls />
34  </Panel>
35</ReactFlow>;

nodeTypes는 custom타입으로 원하는 UI로 template를 만들 수 있다.

TYPESCRIPT
1const nodeTypes = {
2  custom: CustomLayout,
3};

TYPESCRIPT
1const CustomNode: React.FC<IProps> = ({ data }) => {
2  const { setSelectedNode } = useVisualizations();
3
4  const handleSelectedNode = () => {
5    setSelectedNode(data);
6  };
7
8  return (
9    <S.CustomNodeWrap>
10      <S.NodeViewWrap>
11        <img
12          src={`images/visualizationIcons/${data.label}.png`}
13          alt=""
14          onClick={handleSelectedNode}
15        />
16        <S.NodeTextBox>
17          <S.NodeName>{data.name}</S.NodeName>
18          <S.NodeSubName>{data.label}</S.NodeSubName>
19        </S.NodeTextBox>
20      </S.NodeViewWrap>
21
22      <Handle type="target" position={Position.Top} />
23      <Handle type="source" position={Position.Bottom} />
24    </S.CustomNodeWrap>
25  );
26};
27
28export const CustomLayout = memo(CustomNode);

node를 클릭하면 하이라이팅 되는 기능은 git에 공유된 코드를 참고했다.

Highlight path of selected node?

제일 어려웠던 부분은 Auto layout 부분이였는데 수시간의 삽질을 통해 많은 참고 자료를 얻을 수 있었었다.
확실히 d3.js로 구현한다면 더 다양한 효과와 기능을 추가 할 수 있을 것이다.

참고:
https://codesandbox.io/s/wf17n1?file=/App.js:251-286&utm_medium=sandpack
https://codesandbox.io/s/react-flow-elk-auto-layout-8sqdtu?file=/src/elements.js