graph_viewer.html 28 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识图谱可视化 - BettaFish</title>
    <!-- Vis.js -->
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style>
        :root {
            --primary-color: #4F46E5;
            --primary-light: #818CF8;
            --bg-color: #0F172A;
            --card-bg: #1E293B;
            --text-color: #F1F5F9;
            --text-muted: #94A3B8;
            --border-color: #334155;
            --success-color: #10B981;
            --warning-color: #F59E0B;
            --error-color: #EF4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
        }

        /* 顶部工具栏 */
        .toolbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap: 16px;
            z-index: 1000;
        }

        .toolbar h1 {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toolbar h1 svg {
            width: 24px;
            height: 24px;
            color: var(--primary-color);
        }

        .toolbar-divider {
            width: 1px;
            height: 30px;
            background: var(--border-color);
        }

        .btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: transparent;
            color: var(--text-color);
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s;
        }

        .btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn svg {
            width: 16px;
            height: 16px;
        }

        .search-box {
            flex: 1;
            max-width: 400px;
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 8px 16px 8px 40px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-color);
            color: var(--text-color);
            font-size: 0.875rem;
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .search-box svg {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--text-muted);
        }

        /* 统计信息 */
        .stats {
            display: flex;
            gap: 16px;
            margin-left: auto;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.875rem;
        }

        .stat-item .label {
            color: var(--text-muted);
        }

        .stat-item .value {
            font-weight: 600;
            color: var(--primary-light);
        }

        /* 左侧面板 */
        .sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            width: 300px;
            bottom: 0;
            background: var(--card-bg);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            padding: 16px;
            transition: transform 0.3s;
            z-index: 100;
        }

        .sidebar.collapsed {
            transform: translateX(-100%);
        }

        .sidebar h3 {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
        }

        .filter-group {
            margin-bottom: 20px;
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            cursor: pointer;
        }

        .filter-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary-color);
        }

        .filter-item .color-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .filter-item .count {
            margin-left: auto;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* 节点详情 */
        .node-detail {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .node-detail .detail-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--primary-light);
        }

        .node-detail .detail-type {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .node-detail .detail-props {
            font-size: 0.875rem;
        }

        .node-detail .prop-item {
            padding: 6px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .node-detail .prop-key {
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .node-detail .prop-value {
            margin-top: 2px;
            word-break: break-all;
        }

        /* 图谱容器 */
        .graph-container {
            position: fixed;
            top: 60px;
            left: 300px;
            right: 0;
            bottom: 0;
            transition: left 0.3s;
        }

        .graph-container.fullwidth {
            left: 0;
        }

        #network {
            width: 100%;
            height: 100%;
            background: var(--bg-color);
        }

        /* 加载状态 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-color);
            z-index: 500;
        }

        .loading-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            margin-top: 16px;
            color: var(--text-muted);
        }

        /* 空状态 */
        .empty-state {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--text-muted);
        }

        .empty-state svg {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 20px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            display: none;
            animation: slideIn 0.3s;
            z-index: 2000;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        /* 图例 */
        .legend {
            position: fixed;
            bottom: 20px;
            left: 320px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            gap: 16px;
            z-index: 100;
            transition: left 0.3s;
        }

        .legend.fullwidth {
            left: 20px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
        }

        .legend-item .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        /* 全屏模式 */
        .fullscreen-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
        }

        /* 节点类型颜色 */
        .color-topic { background-color: #EF4444; }
        .color-engine { background-color: #F59E0B; }
        .color-section { background-color: #10B981; }
        .color-search_query { background-color: #3B82F6; }
        .color-source { background-color: #8B5CF6; }
    </style>
</head>
<body>
    <!-- 顶部工具栏 -->
    <div class="toolbar">
        <h1>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="5" r="3"/>
                <circle cx="5" cy="19" r="3"/>
                <circle cx="19" cy="19" r="3"/>
                <line x1="12" y1="8" x2="5" y2="16"/>
                <line x1="12" y1="8" x2="19" y2="16"/>
            </svg>
            知识图谱
        </h1>

        <div class="toolbar-divider"></div>

        <button class="btn" id="toggleSidebar" title="切换侧边栏">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2"/>
                <line x1="9" y1="3" x2="9" y2="21"/>
            </svg>
        </button>

        <button class="btn" id="fitBtn" title="适应视图">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
            </svg>
            适应
        </button>

        <button class="btn" id="zoomInBtn" title="放大">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                <line x1="11" y1="8" x2="11" y2="14"/>
                <line x1="8" y1="11" x2="14" y2="11"/>
            </svg>
        </button>

        <button class="btn" id="zoomOutBtn" title="缩小">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                <line x1="8" y1="11" x2="14" y2="11"/>
            </svg>
        </button>

        <div class="search-box">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
            <input type="text" id="searchInput" placeholder="搜索节点...">
        </div>

        <div class="stats" id="statsContainer">
            <div class="stat-item">
                <span class="label">节点</span>
                <span class="value" id="nodeCount">0</span>
            </div>
            <div class="stat-item">
                <span class="label">关系</span>
                <span class="value" id="edgeCount">0</span>
            </div>
        </div>
    </div>

    <!-- 左侧面板 -->
    <div class="sidebar" id="sidebar">
        <div class="filter-group">
            <h3>节点类型</h3>
            <label class="filter-item">
                <input type="checkbox" checked data-type="topic">
                <span class="color-dot color-topic"></span>
                <span>主题</span>
                <span class="count" id="count-topic">0</span>
            </label>
            <label class="filter-item">
                <input type="checkbox" checked data-type="engine">
                <span class="color-dot color-engine"></span>
                <span>分析引擎</span>
                <span class="count" id="count-engine">0</span>
            </label>
            <label class="filter-item">
                <input type="checkbox" checked data-type="section">
                <span class="color-dot color-section"></span>
                <span>报告段落</span>
                <span class="count" id="count-section">0</span>
            </label>
            <label class="filter-item">
                <input type="checkbox" checked data-type="search_query">
                <span class="color-dot color-search_query"></span>
                <span>搜索关键词</span>
                <span class="count" id="count-search_query">0</span>
            </label>
            <label class="filter-item">
                <input type="checkbox" checked data-type="source">
                <span class="color-dot color-source"></span>
                <span>数据来源</span>
                <span class="count" id="count-source">0</span>
            </label>
        </div>

        <div class="node-detail" id="nodeDetail" style="display: none;">
            <h3>节点详情</h3>
            <div class="detail-title" id="detailTitle"></div>
            <div class="detail-type" id="detailType"></div>
            <div class="detail-props" id="detailProps"></div>
        </div>
    </div>

    <!-- 图谱容器 -->
    <div class="graph-container" id="graphContainer">
        <div id="network"></div>

        <!-- 加载状态 -->
        <div class="loading-overlay" id="loadingOverlay">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载知识图谱...</div>
        </div>

        <!-- 空状态 -->
        <div class="empty-state" id="emptyState" style="display: none;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                <circle cx="12" cy="12" r="10"/>
                <path d="M8 15h8"/>
                <path d="M9 9h.01"/>
                <path d="M15 9h.01"/>
            </svg>
            <h3>暂无图谱数据</h3>
            <p>请先生成报告以创建知识图谱</p>
        </div>
    </div>

    <!-- 图例 -->
    <div class="legend" id="legend">
        <div class="legend-item">
            <span class="dot color-topic"></span>
            <span>主题</span>
        </div>
        <div class="legend-item">
            <span class="dot color-engine"></span>
            <span>引擎</span>
        </div>
        <div class="legend-item">
            <span class="dot color-section"></span>
            <span>段落</span>
        </div>
        <div class="legend-item">
            <span class="dot color-search_query"></span>
            <span>搜索词</span>
        </div>
        <div class="legend-item">
            <span class="dot color-source"></span>
            <span>来源</span>
        </div>
    </div>

    <!-- 全屏按钮 -->
    <button class="btn fullscreen-btn" id="fullscreenBtn" title="全屏">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
        </svg>
    </button>

    <!-- 提示 -->
    <div class="toast" id="toast"></div>

    <script>
        // 配置
        const NODE_COLORS = {
            topic: '#EF4444',
            engine: '#F59E0B',
            section: '#10B981',
            search_query: '#3B82F6',
            source: '#8B5CF6'
        };

        const NODE_SHAPES = {
            topic: 'star',
            engine: 'diamond',
            section: 'dot',
            search_query: 'triangle',
            source: 'square'
        };

        // 全局变量
        let network = null;
        let allNodes = [];
        let allEdges = [];
        let reportId = {{ report_id | tojson if report_id else 'null' }};

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadGraphData();
            setupEventListeners();
        });

        // 加载图谱数据
        async function loadGraphData() {
            showLoading(true);

            try {
                const url = reportId
                    ? `/api/graph/${reportId}`
                    : '/api/graph/latest';

                const response = await fetch(url);
                const data = await response.json();

                if (data.success && data.graph) {
                    allNodes = data.graph.nodes;
                    allEdges = data.graph.edges;

                    updateStats(data.graph.stats);
                    renderGraph();
                    showLoading(false);
                } else {
                    showEmpty(true);
                    showLoading(false);
                }
            } catch (error) {
                console.error('加载图谱失败:', error);
                showToast('加载图谱失败: ' + error.message);
                showEmpty(true);
                showLoading(false);
            }
        }

        // 渲染图谱
        function renderGraph() {
            const container = document.getElementById('network');

            // 处理节点
            const visibleTypes = getVisibleTypes();
            const filteredNodes = allNodes.filter(n => visibleTypes.includes(n.group));
            const filteredNodeIds = new Set(filteredNodes.map(n => n.id));

            const nodes = new vis.DataSet(filteredNodes.map(node => ({
                id: node.id,
                label: truncateLabel(node.label, 20),
                title: node.title,
                group: node.group,
                color: {
                    background: NODE_COLORS[node.group] || '#6B7280',
                    border: NODE_COLORS[node.group] || '#6B7280',
                    highlight: {
                        background: lightenColor(NODE_COLORS[node.group] || '#6B7280'),
                        border: NODE_COLORS[node.group] || '#6B7280'
                    }
                },
                shape: NODE_SHAPES[node.group] || 'dot',
                size: node.group === 'topic' ? 30 : (node.group === 'engine' ? 25 : 15),
                font: {
                    color: '#F1F5F9',
                    size: 12
                },
                // 保存原始数据
                _data: node
            })));

            // 处理边
            const edges = new vis.DataSet(allEdges
                .filter(e => filteredNodeIds.has(e.from) && filteredNodeIds.has(e.to))
                .map(edge => ({
                    from: edge.from,
                    to: edge.to,
                    label: edge.label,
                    arrows: edge.arrows || 'to',
                    color: {
                        color: '#475569',
                        highlight: '#818CF8'
                    },
                    font: {
                        color: '#94A3B8',
                        size: 10,
                        strokeWidth: 0
                    },
                    smooth: {
                        type: 'continuous'
                    }
                }))
            );

            // 图谱配置
            const options = {
                nodes: {
                    borderWidth: 2,
                    shadow: true
                },
                edges: {
                    width: 1,
                    shadow: true
                },
                physics: {
                    enabled: true,
                    solver: 'forceAtlas2Based',
                    forceAtlas2Based: {
                        gravitationalConstant: -100,
                        centralGravity: 0.01,
                        springLength: 150,
                        springConstant: 0.08,
                        damping: 0.5
                    },
                    stabilization: {
                        enabled: true,
                        iterations: 200
                    }
                },
                interaction: {
                    hover: true,
                    tooltipDelay: 100,
                    zoomView: true,
                    dragView: true
                }
            };

            // 创建网络
            network = new vis.Network(container, { nodes, edges }, options);

            // 节点点击事件
            network.on('click', (params) => {
                if (params.nodes.length > 0) {
                    const nodeId = params.nodes[0];
                    const node = allNodes.find(n => n.id === nodeId);
                    if (node) {
                        showNodeDetail(node);
                    }
                } else {
                    hideNodeDetail();
                }
            });

            // 稳定后适应视图
            network.once('stabilizationIterationsDone', () => {
                network.fit({ animation: true });
            });
        }

        // 显示节点详情
        function showNodeDetail(node) {
            const detailPanel = document.getElementById('nodeDetail');
            const titleEl = document.getElementById('detailTitle');
            const typeEl = document.getElementById('detailType');
            const propsEl = document.getElementById('detailProps');

            titleEl.textContent = node.label;

            const typeLabels = {
                topic: '主题',
                engine: '分析引擎',
                section: '报告段落',
                search_query: '搜索关键词',
                source: '数据来源'
            };
            typeEl.textContent = typeLabels[node.group] || node.group;

            // 显示属性
            let propsHtml = '';
            const props = node.properties || {};
            for (const [key, value] of Object.entries(props)) {
                if (value) {
                    propsHtml += `
                        <div class="prop-item">
                            <div class="prop-key">${key}</div>
                            <div class="prop-value">${truncateText(String(value), 200)}</div>
                        </div>
                    `;
                }
            }
            propsEl.innerHTML = propsHtml || '<div class="prop-item">无附加属性</div>';

            detailPanel.style.display = 'block';
        }

        // 隐藏节点详情
        function hideNodeDetail() {
            document.getElementById('nodeDetail').style.display = 'none';
        }

        // 更新统计
        function updateStats(stats) {
            document.getElementById('nodeCount').textContent = stats.total_nodes || 0;
            document.getElementById('edgeCount').textContent = stats.total_edges || 0;

            // 更新各类型计数
            document.getElementById('count-topic').textContent = stats.topic || 0;
            document.getElementById('count-engine').textContent = stats.engine || 0;
            document.getElementById('count-section').textContent = stats.section || 0;
            document.getElementById('count-search_query').textContent = stats.search_query || 0;
            document.getElementById('count-source').textContent = stats.source || 0;
        }

        // 获取可见类型
        function getVisibleTypes() {
            const types = [];
            document.querySelectorAll('.filter-item input[type="checkbox"]').forEach(cb => {
                if (cb.checked) {
                    types.push(cb.dataset.type);
                }
            });
            return types;
        }

        // 设置事件监听
        function setupEventListeners() {
            // 侧边栏切换
            document.getElementById('toggleSidebar').addEventListener('click', () => {
                const sidebar = document.getElementById('sidebar');
                const container = document.getElementById('graphContainer');
                const legend = document.getElementById('legend');

                sidebar.classList.toggle('collapsed');
                container.classList.toggle('fullwidth');
                legend.classList.toggle('fullwidth');
            });

            // 适应视图
            document.getElementById('fitBtn').addEventListener('click', () => {
                if (network) network.fit({ animation: true });
            });

            // 放大
            document.getElementById('zoomInBtn').addEventListener('click', () => {
                if (network) {
                    const scale = network.getScale() * 1.2;
                    network.moveTo({ scale, animation: true });
                }
            });

            // 缩小
            document.getElementById('zoomOutBtn').addEventListener('click', () => {
                if (network) {
                    const scale = network.getScale() / 1.2;
                    network.moveTo({ scale, animation: true });
                }
            });

            // 全屏
            document.getElementById('fullscreenBtn').addEventListener('click', () => {
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen();
                } else {
                    document.exitFullscreen();
                }
            });

            // 搜索
            document.getElementById('searchInput').addEventListener('input', (e) => {
                const query = e.target.value.toLowerCase();
                if (!query) {
                    if (network) network.selectNodes([]);
                    return;
                }

                const matchedIds = allNodes
                    .filter(n => n.label.toLowerCase().includes(query))
                    .map(n => n.id);

                if (network && matchedIds.length > 0) {
                    network.selectNodes(matchedIds);
                    network.focus(matchedIds[0], { animation: true, scale: 1.5 });
                }
            });

            // 筛选
            document.querySelectorAll('.filter-item input[type="checkbox"]').forEach(cb => {
                cb.addEventListener('change', () => {
                    renderGraph();
                });
            });
        }

        // 辅助函数
        function showLoading(show) {
            document.getElementById('loadingOverlay').style.display = show ? 'flex' : 'none';
        }

        function showEmpty(show) {
            document.getElementById('emptyState').style.display = show ? 'block' : 'none';
        }

        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 3000);
        }

        function truncateLabel(text, maxLen) {
            if (!text) return '';
            return text.length > maxLen ? text.slice(0, maxLen) + '...' : text;
        }

        function truncateText(text, maxLen) {
            if (!text) return '';
            return text.length > maxLen ? text.slice(0, maxLen) + '...' : text;
        }

        function lightenColor(color) {
            // 简单的颜色变亮
            const hex = color.replace('#', '');
            const r = Math.min(255, parseInt(hex.slice(0, 2), 16) + 40);
            const g = Math.min(255, parseInt(hex.slice(2, 4), 16) + 40);
            const b = Math.min(255, parseInt(hex.slice(4, 6), 16) + 40);
            return `rgb(${r}, ${g}, ${b})`;
        }
    </script>
</body>
</html>