[agent-pipeline] pipe-20260315121506-3c5c round-1

frontend/components/screen/ScreenRelationFlow.tsx

@@ -47,6 +47,9 @@ const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight:
   join: { stroke: 'hsl(var(--warning))', strokeLight: 'hsl(var(--warning) / 0.4)', label: '엔티티 조인' },
 };
 
+// 엣지 필터 카테고리 (UI 토글용)
+type EdgeCategory = 'main' | 'filter' | 'join' | 'lookup' | 'flow';
+
 // 노드 타입 등록
 const nodeTypes = {
   screenNode: ScreenNode,
@@ -96,6 +99,15 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   // 그룹 내 포커스된 화면 ID (그룹 모드에서만 사용)
   const [focusedScreenId, setFocusedScreenId] = useState<number | null>(null);
   
+  // 엣지 필터 상태 (유형별 표시/숨김)
+  const [edgeFilterState, setEdgeFilterState] = useState<Record<EdgeCategory, boolean>>({
+    main: true,
+    filter: true,
+    join: true,
+    lookup: false,
+    flow: true,
+  });
+  
   // 노드 설정 모달 상태
   const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
   const [settingModalNode, setSettingModalNode] = useState<{
@@ -702,6 +714,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               markerEnd: { type: MarkerType.ArrowClosed, color: "hsl(var(--info))" },
             animated: true,
               style: { stroke: "hsl(var(--info))", strokeWidth: 2 },
+              data: { edgeCategory: 'flow' as EdgeCategory },
             });
           }
         }
@@ -722,6 +735,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 stroke: "hsl(var(--primary))", 
                 strokeWidth: 2,
               },
+              data: { edgeCategory: 'main' as EdgeCategory },
             });
           }
         });
@@ -764,6 +778,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 },
                 data: {
                   sourceScreenId,
+                  edgeCategory: 'filter' as EdgeCategory,
                 },
               });
               
@@ -816,6 +831,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                       sourceScreenId, 
                       isFilterJoin: true,
                       visualRelationType: 'join',
+                      edgeCategory: 'join' as EdgeCategory,
                     },
                   });
                 });
@@ -926,6 +942,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                     referrerTable, 
                     referencedTable,
                     visualRelationType,  // 관계 유형 저장
+                    edgeCategory: (visualRelationType === 'lookup' ? 'lookup' : 'join') as EdgeCategory,
                   },
                 });
               }
@@ -966,6 +983,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               data: { 
                 sourceScreenId,
                 visualRelationType,
+                edgeCategory: (visualRelationType === 'lookup' ? 'lookup' : 'join') as EdgeCategory,
               },
             });
           });
@@ -992,7 +1010,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 strokeDasharray: "8,4",
                 opacity: 0.5,
               },
-              data: { visualRelationType: 'join' },
+              data: { visualRelationType: 'join', edgeCategory: 'join' as EdgeCategory },
             });
           }
         });
@@ -1018,6 +1036,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
                 labelBgPadding: [3, 2] as [number, number],
               style: { stroke: "hsl(var(--success))", strokeWidth: 1.5 },
+                data: { edgeCategory: (rel.relation_type === 'lookup' ? 'lookup' : 'join') as EdgeCategory },
             });
           }
           }
@@ -1042,6 +1061,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 labelBgPadding: [4, 2] as [number, number],
                 markerEnd: { type: MarkerType.ArrowClosed, color: "hsl(var(--primary))" },
                 style: { stroke: "hsl(var(--primary))", strokeWidth: 2 },
+                data: { edgeCategory: 'flow' as EdgeCategory },
             });
           }
         });