계보 시각화

# 1. 특정 컬럼을 포함하는 모든 테이블 찾기
SEARCH column:"email" AND classification:"PII"

# 2. 특정 팀이 소유한 중요 자산
SEARCH owner:"data-platform" AND tier:"1" AND type:"table"

# 3. 오래된 데이터를 사용하는 대시보드
SEARCH type:"dashboard" AND upstream.last_updated:">7d"

# 4. 순환 종속성이 있는 파이프라인
SEARCH has_circular_dependency:true

# 5. 특정 변환을 사용하는 모든 경로
SEARCH transformation:"JOIN ON customer_id"

# 6. 실패율이 높은 작업
SEARCH type:"job" AND failure_rate:">5%"

# 시각화 필터 조합
GET /api/v1/lineage?
    dataset=warehouse.customers
    &filter[type]=table,view
    &filter[owner]=analytics-team
    &filter[classification]=internal
    &depth=3
    &include_metrics=true

// D3.js로 상호작용 계보 그래프 생성
import * as d3 from 'd3';

class LineageViz {
    constructor(containerId, data) {
        this.container = d3.select(`#${containerId}`);
        this.data = data;
        this.width = 1200;
        this.height = 800;
    }

    render() {
        // SVG 캔버스 생성
        const svg = this.container.append('svg')
            .attr('width', this.width)
            .attr('height', this.height);

        // 줌 및 팬 활성화
        const g = svg.append('g');
        svg.call(d3.zoom()
            .scaleExtent([0.1, 4])
            .on('zoom', (event) => {
                g.attr('transform', event.transform);
            }));

        // Force 시뮬레이션 설정
        const simulation = d3.forceSimulation(this.data.nodes)
            .force('link', d3.forceLink(this.data.edges)
                .id(d => d.id)
                .distance(100))
            .force('charge', d3.forceManyBody().strength(-300))
            .force('center', d3.forceCenter(this.width / 2, this.height / 2));

        // 엣지 그리기
        const link = g.append('g')
            .selectAll('line')
            .data(this.data.edges)
            .enter().append('line')
            .attr('stroke', '#10B981')
            .attr('stroke-width', 2)
            .attr('marker-end', 'url(#arrowhead)');

        // 노드 그리기
        const node = g.append('g')
            .selectAll('circle')
            .data(this.data.nodes)
            .enter().append('circle')
            .attr('r', d => d.critical ? 12 : 8)
            .attr('fill', d => this.getNodeColor(d.type))
            .call(this.drag(simulation))
            .on('click', (event, d) => this.onNodeClick(d))
            .on('mouseover', (event, d) => this.showTooltip(event, d))
            .on('mouseout', () => this.hideTooltip());

        // 레이블 추가
        const label = g.append('g')
            .selectAll('text')
            .data(this.data.nodes)
            .enter().append('text')
            .text(d => d.name)
            .attr('font-size', 12)
            .attr('dx', 15)
            .attr('dy', 4);

        // 시뮬레이션 틱
        simulation.on('tick', () => {
            link
                .attr('x1', d => d.source.x)
                .attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x)
                .attr('y2', d => d.target.y);

            node
                .attr('cx', d => d.x)
                .attr('cy', d => d.y);

            label
                .attr('x', d => d.x)
                .attr('y', d => d.y);
        });
    }

    getNodeColor(type) {
        const colors = {
            'table': '#3B82F6',
            'view': '#8B5CF6',
            'report': '#F59E0B',
            'dashboard': '#EF4444',
            'api': '#10B981'
        };
        return colors[type] || '#6B7280';
    }

    showTooltip(event, d) {
        const tooltip = this.container.append('div')
            .attr('class', 'lineage-tooltip')
            .style('position', 'absolute')
            .style('left', `${event.pageX + 10}px`)
            .style('top', `${event.pageY - 10}px`)
            .html(`
                ${d.name}

                Type: ${d.type}

                Owner: ${d.owner}

                Last Updated: ${d.lastUpdated}

                Upstream: ${d.upstreamCount}

                Downstream: ${d.downstreamCount}
            `);
    }

    drag(simulation) {
        function dragstarted(event) {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            event.subject.fx = event.subject.x;
            event.subject.fy = event.subject.y;
        }

        function dragged(event) {
            event.subject.fx = event.x;
            event.subject.fy = event.y;
        }

        function dragended(event) {
            if (!event.active) simulation.alphaTarget(0);
            event.subject.fx = null;
            event.subject.fy = null;
        }

        return d3.drag()
            .on('start', dragstarted)
            .on('drag', dragged)
            .on('end', dragended);
    }
}

class ProgressiveLineageLoader {
    constructor(apiClient) {
        this.api = apiClient;
        this.loadedNodes = new Set();
        this.graph = { nodes: [], edges: [] };
    }

    async loadInitial(rootDataset, initialDepth = 2) {
        // 초기 계보 로드 (얕은 깊이)
        const lineage = await this.api.getLineage(rootDataset, {
            depth: initialDepth,
            include_metadata: false  // 빠른 로딩
        });

        this.graph = lineage;
        this.loadedNodes = new Set(lineage.nodes.map(n => n.id));

        // 시각화 렌더링
        this.renderGraph();
    }

    async expandNode(nodeId) {
        // 노드 클릭 시 추가 계보 로드
        if (this.loadedNodes.has(nodeId)) {
            // 이미 로드됨
            return;
        }

        // 해당 노드의 추가 업스트림/다운스트림 가져오기
        const additionalLineage = await this.api.getLineage(nodeId, {
            depth: 1,
            direction: 'both'
        });

        // 그래프에 병합
        this.mergeLineage(additionalLineage);
        this.loadedNodes.add(nodeId);

        // 증분 업데이트
        this.updateGraph(additionalLineage);
    }

    mergeLineage(newLineage) {
        // 중복 제거하면서 병합
        const existingIds = new Set(this.graph.nodes.map(n => n.id));

        newLineage.nodes.forEach(node => {
            if (!existingIds.has(node.id)) {
                this.graph.nodes.push(node);
            }
        });

        newLineage.edges.forEach(edge => {
            this.graph.edges.push(edge);
        });
    }

    updateGraph(newData) {
        // 애니메이션과 함께 새 노드 추가
        // 기존 시각화 유지하면서 업데이트
    }
}

class RealtimeLineageViz {
    constructor(containerId, apiEndpoint) {
        this.viz = new LineageViz(containerId, { nodes: [], edges: [] });
        this.ws = new WebSocket(`ws://${apiEndpoint}/lineage/live`);

        this.setupWebSocket();
    }

    setupWebSocket() {
        this.ws.onmessage = (event) => {
            const update = JSON.parse(event.data);

            switch (update.type) {
                case 'JOB_STARTED':
                    this.highlightActiveJob(update.jobId);
                    break;

                case 'JOB_COMPLETED':
                    this.markJobComplete(update.jobId);
                    this.updateDatasetTimestamp(update.outputDataset);
                    break;

                case 'JOB_FAILED':
                    this.markJobFailed(update.jobId, update.error);
                    break;

                case 'SCHEMA_CHANGED':
                    this.showSchemaChangeAlert(update.dataset, update.changes);
                    this.refreshLineage(update.dataset);
                    break;

                case 'NEW_DEPENDENCY':
                    this.addEdge(update.source, update.target);
                    break;
            }
        };

        this.ws.onerror = (error) => {
            console.error('WebSocket error:', error);
            this.showReconnectNotification();
        };
    }

    highlightActiveJob(jobId) {
        // 실행 중인 작업을 시각적으로 강조
        d3.select(`#job-${jobId}`)
            .transition()
            .duration(300)
            .attr('stroke', '#F59E0B')
            .attr('stroke-width', 4)
            .style('opacity', 1);

        // 펄스 애니메이션 추가
        this.addPulseAnimation(jobId);
    }

    addPulseAnimation(nodeId) {
        // CSS 애니메이션 또는 D3 transition 사용
        const node = d3.select(`#${nodeId}`);

        function pulse() {
            node.transition()
                .duration(1000)
                .attr('r', 15)
                .transition()
                .duration(1000)
                .attr('r', 10)
                .on('end', pulse);
        }

        pulse();
    }
}

// 1. 컨텍스트 메뉴
노드 우클릭 →
  ├─ 스키마 보기
  ├─ 샘플 데이터
  ├─ 영향 분석 실행
  ├─ 데이터 품질 리포트
  ├─ 소유자에게 연락
  └─ 문서 보기

// 2. 브레드크럼 탐색
Home > Warehouse > Customers > [현재 뷰]

// 3. 미니맵
┌────────────────┐
│    [전체 그래프] │  ← 현재 위치 표시
│  [□ 현재 뷰]    │  ← 클릭하여 이동
└────────────────┘

// 4. 빠른 통계
선택된 노드: warehouse.customers
  - 직접 업스트림: 3개
  - 직접 다운스트림: 12개
  - 총 종속성: 47개
  - 마지막 업데이트: 2시간 전
  - 데이터 신선도: 🟢 정상

// 5. 저장된 뷰
  ⭐ 내가 소유한 자산
  ⭐ 중요 파이프라인
  ⭐ PII 데이터 흐름
  ⭐ 실패한 작업 추적