feat: Migrate to React Flow and add Fixed + Dynamic category mode
Frontend: - Migrate MindmapDAG from D3.js to React Flow (@xyflow/react) - Add custom node components (QueryNode, CategoryHeaderNode, AttributeNode) - Add useDAGLayout hook for column-based layout - Add "AI" badge for LLM-suggested categories - Update CategorySelector with Fixed + Dynamic mode option - Improve dark/light theme support Backend: - Add FIXED_PLUS_DYNAMIC category mode - Filter duplicate category names in LLM suggestions - Update prompts to exclude fixed categories when suggesting new ones - Improve LLM service with better error handling and logging - Auto-remove /no_think prefix for non-Qwen models - Add smart JSON format detection for model compatibility - Improve JSON extraction with multiple parsing strategies 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
78
frontend/package-lock.json
generated
78
frontend/package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@xyflow/react": "^12.9.3",
|
||||
"antd": "^6.0.0",
|
||||
"d3": "^7.9.0",
|
||||
"react": "^19.2.0",
|
||||
@@ -2454,7 +2455,7 @@
|
||||
"version": "19.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
|
||||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
@@ -2763,6 +2764,38 @@
|
||||
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@xyflow/react": {
|
||||
"version": "12.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.9.3.tgz",
|
||||
"integrity": "sha512-PSWoJ8vHiEqSIkLIkge+0eiHWiw4C6dyFDA03VKWJkqbU4A13VlDIVwKqf/Znuysn2GQw/zA61zpHE4rGgax7Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@xyflow/system": "0.0.73",
|
||||
"classcat": "^5.0.3",
|
||||
"zustand": "^4.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=17",
|
||||
"react-dom": ">=17"
|
||||
}
|
||||
},
|
||||
"node_modules/@xyflow/system": {
|
||||
"version": "0.0.73",
|
||||
"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.73.tgz",
|
||||
"integrity": "sha512-C2ymH2V4mYDkdVSiRx0D7R0s3dvfXiupVBcko6tXP5K4tVdSBMo22/e3V9yRNdn+2HQFv44RFKzwOyCcUUDAVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-drag": "^3.0.7",
|
||||
"@types/d3-interpolate": "^3.0.4",
|
||||
"@types/d3-selection": "^3.0.10",
|
||||
"@types/d3-transition": "^3.0.8",
|
||||
"@types/d3-zoom": "^3.0.8",
|
||||
"d3-drag": "^3.0.0",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.15.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
@@ -3001,6 +3034,12 @@
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/classcat": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
|
||||
"integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
@@ -4809,6 +4848,15 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.6.tgz",
|
||||
@@ -4954,6 +5002,34 @@
|
||||
"peerDependencies": {
|
||||
"zod": "^3.25.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zustand": {
|
||||
"version": "4.5.7",
|
||||
"resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
|
||||
"integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"use-sync-external-store": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8",
|
||||
"immer": ">=9.0.6",
|
||||
"react": ">=16.8"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"immer": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@xyflow/react": "^12.9.3",
|
||||
"antd": "^6.0.0",
|
||||
"d3": "^7.9.0",
|
||||
"react": "^19.2.0",
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { ConfigProvider, Layout, theme, Typography } from 'antd';
|
||||
import { ConfigProvider, Layout, theme, Typography, Space } from 'antd';
|
||||
import { ApartmentOutlined } from '@ant-design/icons';
|
||||
import { ThemeToggle } from './components/ThemeToggle';
|
||||
import { InputPanel } from './components/InputPanel';
|
||||
import { MindmapPanel } from './components/MindmapPanel';
|
||||
import { useAttribute } from './hooks/useAttribute';
|
||||
import type { MindmapD3Ref } from './components/MindmapD3';
|
||||
import type { MindmapDAGRef } from './components/MindmapDAG';
|
||||
import type { CategoryMode } from './types';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
@@ -22,7 +23,7 @@ function App() {
|
||||
nodeSpacing: 32,
|
||||
fontSize: 14,
|
||||
});
|
||||
const mindmapRef = useRef<MindmapD3Ref>(null);
|
||||
const mindmapRef = useRef<MindmapDAGRef>(null);
|
||||
|
||||
const handleAnalyze = async (
|
||||
query: string,
|
||||
@@ -36,12 +37,8 @@ function App() {
|
||||
await analyze(query, model, temperature, chainCount, categoryMode, customCategories, suggestedCategoryCount);
|
||||
};
|
||||
|
||||
const handleExpandAll = useCallback(() => {
|
||||
mindmapRef.current?.expandAll();
|
||||
}, []);
|
||||
|
||||
const handleCollapseAll = useCallback(() => {
|
||||
mindmapRef.current?.collapseAll();
|
||||
const handleResetView = useCallback(() => {
|
||||
mindmapRef.current?.resetView();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -57,11 +54,37 @@ function App() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
background: isDark
|
||||
? 'linear-gradient(90deg, #141414 0%, #1f1f1f 50%, #141414 100%)'
|
||||
: 'linear-gradient(90deg, #fff 0%, #fafafa 50%, #fff 100%)',
|
||||
borderBottom: isDark ? '1px solid #303030' : '1px solid #f0f0f0',
|
||||
boxShadow: isDark
|
||||
? '0 2px 8px rgba(0, 0, 0, 0.3)'
|
||||
: '0 2px 8px rgba(0, 0, 0, 0.06)',
|
||||
}}
|
||||
>
|
||||
<Title level={4} style={{ margin: 0, color: isDark ? '#fff' : '#000' }}>
|
||||
Attribute Agent
|
||||
</Title>
|
||||
<Space align="center" size="middle">
|
||||
<ApartmentOutlined
|
||||
style={{
|
||||
fontSize: 24,
|
||||
color: isDark ? '#177ddc' : '#1890ff',
|
||||
}}
|
||||
/>
|
||||
<Title
|
||||
level={4}
|
||||
style={{
|
||||
margin: 0,
|
||||
background: isDark
|
||||
? 'linear-gradient(90deg, #177ddc 0%, #69c0ff 100%)'
|
||||
: 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
}}
|
||||
>
|
||||
Attribute Agent
|
||||
</Title>
|
||||
</Space>
|
||||
<ThemeToggle isDark={isDark} onToggle={setIsDark} />
|
||||
</Header>
|
||||
<Layout>
|
||||
@@ -96,8 +119,7 @@ function App() {
|
||||
currentResult={currentResult}
|
||||
onAnalyze={handleAnalyze}
|
||||
onLoadHistory={loadFromHistory}
|
||||
onExpandAll={handleExpandAll}
|
||||
onCollapseAll={handleCollapseAll}
|
||||
onResetView={handleResetView}
|
||||
visualSettings={visualSettings}
|
||||
onVisualSettingsChange={setVisualSettings}
|
||||
/>
|
||||
|
||||
@@ -42,28 +42,37 @@ export function CategorySelector({
|
||||
Fixed (材料、功能、用途、使用族群)
|
||||
</Radio>
|
||||
<Radio value="fixed_plus_custom">
|
||||
Fixed + Custom
|
||||
Fixed + Custom (手動新增)
|
||||
</Radio>
|
||||
<Radio value="fixed_plus_dynamic">
|
||||
Fixed + Dynamic (LLM 建議額外類別)
|
||||
</Radio>
|
||||
<Radio value="custom_only">
|
||||
Custom Only (LLM suggests)
|
||||
Custom Only (LLM 建議)
|
||||
</Radio>
|
||||
<Radio value="dynamic_auto">
|
||||
Dynamic (LLM suggests, editable)
|
||||
Dynamic (LLM 建議, 可編輯)
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
|
||||
{/* 動態模式：類別數量調整 */}
|
||||
{(mode === 'custom_only' || mode === 'dynamic_auto') && (
|
||||
{(mode === 'custom_only' || mode === 'dynamic_auto' || mode === 'fixed_plus_dynamic') && (
|
||||
<div>
|
||||
<Text>Suggested Category Count: {suggestedCount}</Text>
|
||||
<Text>
|
||||
{mode === 'fixed_plus_dynamic'
|
||||
? `額外建議類別數: ${suggestedCount}`
|
||||
: `Suggested Category Count: ${suggestedCount}`}
|
||||
</Text>
|
||||
<Slider
|
||||
min={2}
|
||||
max={8}
|
||||
min={1}
|
||||
max={mode === 'fixed_plus_dynamic' ? 4 : 8}
|
||||
step={1}
|
||||
value={suggestedCount}
|
||||
onChange={onSuggestedCountChange}
|
||||
marks={{ 2: '2', 3: '3', 5: '5', 8: '8' }}
|
||||
marks={mode === 'fixed_plus_dynamic'
|
||||
? { 1: '1', 2: '2', 3: '3', 4: '4' }
|
||||
: { 2: '2', 3: '3', 5: '5', 8: '8' }}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
@@ -120,7 +129,7 @@ export function CategorySelector({
|
||||
)}
|
||||
|
||||
{/* Step 0 結果顯示 */}
|
||||
{step0Result && (mode === 'custom_only' || mode === 'dynamic_auto') && (
|
||||
{step0Result && (mode === 'custom_only' || mode === 'dynamic_auto' || mode === 'fixed_plus_dynamic') && (
|
||||
<div style={{ marginTop: 8, padding: 12, background: 'rgba(0,0,0,0.04)', borderRadius: 4 }}>
|
||||
<Text strong>LLM Suggested:</Text>
|
||||
<div style={{ marginTop: 8 }}>
|
||||
|
||||
@@ -11,23 +11,36 @@ import {
|
||||
Divider,
|
||||
Collapse,
|
||||
Progress,
|
||||
Tag,
|
||||
Card,
|
||||
Alert,
|
||||
} from 'antd';
|
||||
import {
|
||||
SearchOutlined,
|
||||
HistoryOutlined,
|
||||
DownloadOutlined,
|
||||
ExpandAltOutlined,
|
||||
ShrinkOutlined,
|
||||
ReloadOutlined,
|
||||
LoadingOutlined,
|
||||
CheckCircleOutlined,
|
||||
FileImageOutlined,
|
||||
FileTextOutlined,
|
||||
CodeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { HistoryItem, AttributeNode, StreamProgress, CategoryMode, DynamicCausalChain, CausalChain } from '../types';
|
||||
import type { AttributeDAG, CategoryMode } from '../types';
|
||||
import { getModels } from '../services/api';
|
||||
import { CategorySelector } from './CategorySelector';
|
||||
|
||||
interface DAGProgress {
|
||||
step: 'idle' | 'step0' | 'step1' | 'relationships' | 'done' | 'error';
|
||||
message: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface DAGHistoryItem {
|
||||
query: string;
|
||||
result: AttributeDAG;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { Text } = Typography;
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
interface VisualSettings {
|
||||
nodeSpacing: number;
|
||||
@@ -36,9 +49,9 @@ interface VisualSettings {
|
||||
|
||||
interface InputPanelProps {
|
||||
loading: boolean;
|
||||
progress: StreamProgress;
|
||||
history: HistoryItem[];
|
||||
currentResult: AttributeNode | null;
|
||||
progress: DAGProgress;
|
||||
history: DAGHistoryItem[];
|
||||
currentResult: AttributeDAG | null;
|
||||
onAnalyze: (
|
||||
query: string,
|
||||
model?: string,
|
||||
@@ -48,9 +61,8 @@ interface InputPanelProps {
|
||||
customCategories?: string[],
|
||||
suggestedCategoryCount?: number
|
||||
) => Promise<void>;
|
||||
onLoadHistory: (item: HistoryItem) => void;
|
||||
onExpandAll?: () => void;
|
||||
onCollapseAll?: () => void;
|
||||
onLoadHistory: (item: DAGHistoryItem) => void;
|
||||
onResetView?: () => void;
|
||||
visualSettings: VisualSettings;
|
||||
onVisualSettingsChange: (settings: VisualSettings) => void;
|
||||
}
|
||||
@@ -62,8 +74,7 @@ export function InputPanel({
|
||||
currentResult,
|
||||
onAnalyze,
|
||||
onLoadHistory,
|
||||
onExpandAll,
|
||||
onCollapseAll,
|
||||
onResetView,
|
||||
visualSettings,
|
||||
onVisualSettingsChange,
|
||||
}: InputPanelProps) {
|
||||
@@ -137,7 +148,7 @@ export function InputPanel({
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${currentResult.name || 'mindmap'}.json`;
|
||||
a.download = `${currentResult.query || 'dag'}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
@@ -148,134 +159,131 @@ export function InputPanel({
|
||||
return;
|
||||
}
|
||||
|
||||
const nodeToMarkdown = (node: AttributeNode, level: number = 0): string => {
|
||||
const indent = ' '.repeat(level);
|
||||
let md = `${indent}- ${node.name}\n`;
|
||||
if (node.children) {
|
||||
node.children.forEach((child) => {
|
||||
md += nodeToMarkdown(child, level + 1);
|
||||
});
|
||||
// Group nodes by category
|
||||
const nodesByCategory: Record<string, string[]> = {};
|
||||
for (const node of currentResult.nodes) {
|
||||
if (!nodesByCategory[node.category]) {
|
||||
nodesByCategory[node.category] = [];
|
||||
}
|
||||
return md;
|
||||
};
|
||||
nodesByCategory[node.category].push(node.name);
|
||||
}
|
||||
|
||||
let markdown = `# ${currentResult.query}\n\n`;
|
||||
for (const cat of currentResult.categories) {
|
||||
const nodes = nodesByCategory[cat.name] || [];
|
||||
markdown += `## ${cat.name}\n`;
|
||||
for (const name of nodes) {
|
||||
markdown += `- ${name}\n`;
|
||||
}
|
||||
markdown += '\n';
|
||||
}
|
||||
|
||||
const markdown = `# ${currentResult.name}\n\n${currentResult.children?.map((c) => nodeToMarkdown(c, 0)).join('') || ''}`;
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${currentResult.name || 'mindmap'}.md`;
|
||||
a.download = `${currentResult.query || 'dag'}.md`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleExportSVG = () => {
|
||||
const svg = document.querySelector('.mindmap-svg');
|
||||
if (!svg) {
|
||||
const reactFlowWrapper = document.querySelector('.react-flow');
|
||||
if (!reactFlowWrapper) {
|
||||
message.warning('No mindmap to export');
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = reactFlowWrapper.querySelector('.react-flow__viewport');
|
||||
if (!viewport) {
|
||||
message.warning('No mindmap to export');
|
||||
return;
|
||||
}
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('width', String(reactFlowWrapper.clientWidth));
|
||||
svg.setAttribute('height', String(reactFlowWrapper.clientHeight));
|
||||
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
|
||||
const viewportClone = viewport.cloneNode(true) as SVGGElement;
|
||||
svg.appendChild(viewportClone);
|
||||
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${currentResult?.name || 'mindmap'}.svg`;
|
||||
a.download = `${currentResult?.query || 'dag'}.svg`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleExportPNG = () => {
|
||||
const svg = document.querySelector('.mindmap-svg') as SVGSVGElement;
|
||||
if (!svg) {
|
||||
const reactFlowWrapper = document.querySelector('.react-flow') as HTMLElement;
|
||||
if (!reactFlowWrapper) {
|
||||
message.warning('No mindmap to export');
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = reactFlowWrapper.querySelector('.react-flow__viewport');
|
||||
if (!viewport) {
|
||||
message.warning('No mindmap to export');
|
||||
return;
|
||||
}
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('width', String(reactFlowWrapper.clientWidth));
|
||||
svg.setAttribute('height', String(reactFlowWrapper.clientHeight));
|
||||
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
svg.appendChild(viewport.cloneNode(true));
|
||||
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
canvas.width = svg.clientWidth * 2;
|
||||
canvas.height = svg.clientHeight * 2;
|
||||
canvas.width = reactFlowWrapper.clientWidth * 2;
|
||||
canvas.height = reactFlowWrapper.clientHeight * 2;
|
||||
ctx?.scale(2, 2);
|
||||
ctx?.drawImage(img, 0, 0);
|
||||
const pngUrl = canvas.toDataURL('image/png');
|
||||
const a = document.createElement('a');
|
||||
a.href = pngUrl;
|
||||
a.download = `${currentResult?.name || 'mindmap'}.png`;
|
||||
a.download = `${currentResult?.query || 'dag'}.png`;
|
||||
a.click();
|
||||
};
|
||||
|
||||
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
|
||||
};
|
||||
|
||||
// Helper to format chain display (supports both fixed and dynamic chains)
|
||||
const formatChain = (chain: CausalChain | DynamicCausalChain): string => {
|
||||
if ('chain' in chain) {
|
||||
// Dynamic chain
|
||||
return Object.values(chain.chain).join(' → ');
|
||||
} else {
|
||||
// Fixed chain
|
||||
return `${chain.material} → ${chain.function} → ${chain.usage} → ${chain.user}`;
|
||||
}
|
||||
};
|
||||
|
||||
const renderProgressIndicator = () => {
|
||||
if (progress.step === 'idle' || progress.step === 'done') return null;
|
||||
|
||||
const percent = progress.step === 'step0'
|
||||
? 5
|
||||
? 15
|
||||
: progress.step === 'step1'
|
||||
? 10
|
||||
: progress.step === 'chains'
|
||||
? 10 + (progress.currentChainIndex / progress.totalChains) * 90
|
||||
? 50
|
||||
: progress.step === 'relationships'
|
||||
? 85
|
||||
: 100;
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 16, padding: 12, background: 'rgba(0,0,0,0.04)', borderRadius: 8 }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Space>
|
||||
{progress.step === 'error' ? (
|
||||
<Tag color="error">Error</Tag>
|
||||
) : (
|
||||
<LoadingOutlined spin />
|
||||
)}
|
||||
<Text>{progress.message}</Text>
|
||||
</Space>
|
||||
<Progress percent={Math.round(percent)} size="small" status={progress.step === 'error' ? 'exception' : 'active'} />
|
||||
|
||||
{/* Show categories used */}
|
||||
{progress.categoriesUsed && progress.categoriesUsed.length > 0 && (
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Categories:</Text>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{progress.categoriesUsed.map((cat, i) => (
|
||||
<Tag key={i} color={cat.is_fixed ? 'default' : 'blue'}>
|
||||
{cat.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{progress.completedChains.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Completed chains:</Text>
|
||||
<div style={{ maxHeight: 120, overflow: 'auto', marginTop: 4 }}>
|
||||
{progress.completedChains.map((chain, i) => (
|
||||
<div key={i} style={{ fontSize: 11, padding: '2px 0' }}>
|
||||
<CheckCircleOutlined style={{ color: '#52c41a', marginRight: 4 }} />
|
||||
{formatChain(chain)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
<Alert
|
||||
type={progress.step === 'error' ? 'error' : 'info'}
|
||||
icon={progress.step === 'error' ? undefined : <LoadingOutlined spin />}
|
||||
message={progress.message}
|
||||
description={
|
||||
<Progress
|
||||
percent={Math.round(percent)}
|
||||
size="small"
|
||||
status={progress.step === 'error' ? 'exception' : 'active'}
|
||||
strokeColor={{ from: '#108ee9', to: '#87d068' }}
|
||||
/>
|
||||
}
|
||||
style={{ marginBottom: 16 }}
|
||||
showIcon
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -291,7 +299,6 @@ export function InputPanel({
|
||||
onCustomCategoriesChange={setCustomCategories}
|
||||
suggestedCount={suggestedCategoryCount}
|
||||
onSuggestedCountChange={setSuggestedCategoryCount}
|
||||
step0Result={progress.step0Result}
|
||||
disabled={loading}
|
||||
/>
|
||||
),
|
||||
@@ -300,9 +307,9 @@ export function InputPanel({
|
||||
key: 'llm',
|
||||
label: 'LLM Parameters',
|
||||
children: (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
<div>
|
||||
<Text>Temperature: {temperature}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Temperature: {temperature}</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
@@ -313,7 +320,7 @@ export function InputPanel({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>Chain Count: {chainCount}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Chain Count: {chainCount}</Text>
|
||||
<Slider
|
||||
min={1}
|
||||
max={10}
|
||||
@@ -330,9 +337,9 @@ export function InputPanel({
|
||||
key: 'visual',
|
||||
label: 'Visual Settings',
|
||||
children: (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
<div>
|
||||
<Text>Node Spacing: {visualSettings.nodeSpacing}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Node Spacing: {visualSettings.nodeSpacing}px</Text>
|
||||
<Slider
|
||||
min={20}
|
||||
max={80}
|
||||
@@ -341,7 +348,7 @@ export function InputPanel({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>Font Size: {visualSettings.fontSize}px</Text>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>Font Size: {visualSettings.fontSize}px</Text>
|
||||
<Slider
|
||||
min={10}
|
||||
max={18}
|
||||
@@ -349,14 +356,14 @@ export function InputPanel({
|
||||
onChange={(v) => onVisualSettingsChange({ ...visualSettings, fontSize: v })}
|
||||
/>
|
||||
</div>
|
||||
<Space>
|
||||
<Button icon={<ExpandAltOutlined />} onClick={onExpandAll} disabled={!currentResult}>
|
||||
Expand All
|
||||
</Button>
|
||||
<Button icon={<ShrinkOutlined />} onClick={onCollapseAll} disabled={!currentResult}>
|
||||
Collapse All
|
||||
</Button>
|
||||
</Space>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={onResetView}
|
||||
disabled={!currentResult}
|
||||
block
|
||||
>
|
||||
Reset View
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
@@ -364,83 +371,135 @@ export function InputPanel({
|
||||
key: 'export',
|
||||
label: 'Export',
|
||||
children: (
|
||||
<Space wrap>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExportPNG} disabled={!currentResult}>
|
||||
PNG
|
||||
</Button>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExportSVG} disabled={!currentResult}>
|
||||
SVG
|
||||
</Button>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExportJSON} disabled={!currentResult}>
|
||||
JSON
|
||||
</Button>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExportMarkdown} disabled={!currentResult}>
|
||||
Markdown
|
||||
</Button>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="small">
|
||||
<Button.Group style={{ width: '100%' }}>
|
||||
<Button
|
||||
icon={<FileImageOutlined />}
|
||||
onClick={handleExportPNG}
|
||||
disabled={!currentResult}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
PNG
|
||||
</Button>
|
||||
<Button
|
||||
icon={<FileImageOutlined />}
|
||||
onClick={handleExportSVG}
|
||||
disabled={!currentResult}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
SVG
|
||||
</Button>
|
||||
</Button.Group>
|
||||
<Button.Group style={{ width: '100%' }}>
|
||||
<Button
|
||||
icon={<CodeOutlined />}
|
||||
onClick={handleExportJSON}
|
||||
disabled={!currentResult}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
JSON
|
||||
</Button>
|
||||
<Button
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={handleExportMarkdown}
|
||||
disabled={!currentResult}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
MD
|
||||
</Button>
|
||||
</Button.Group>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 16 }}>
|
||||
<Space direction="vertical" style={{ width: '100%', marginBottom: 16 }}>
|
||||
<Text strong>Model</Text>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
value={selectedModel}
|
||||
onChange={setSelectedModel}
|
||||
loading={loadingModels}
|
||||
placeholder="Select a model"
|
||||
options={models.map((m) => ({ label: m, value: m }))}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
<Space direction="vertical" style={{ width: '100%', marginBottom: 16 }}>
|
||||
<Text strong>Input</Text>
|
||||
<TextArea
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Enter an object to analyze (e.g., umbrella)"
|
||||
autoSize={{ minRows: 3, maxRows: 6 }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
onClick={handleAnalyze}
|
||||
loading={loading}
|
||||
block
|
||||
>
|
||||
Analyze
|
||||
</Button>
|
||||
</Space>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
padding: 16,
|
||||
gap: 16
|
||||
}}>
|
||||
{/* Main Input Card */}
|
||||
<Card
|
||||
size="small"
|
||||
title={<Text strong>Analyze Object</Text>}
|
||||
styles={{ body: { padding: 12 } }}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
value={selectedModel}
|
||||
onChange={setSelectedModel}
|
||||
loading={loadingModels}
|
||||
placeholder="Select a model"
|
||||
options={models.map((m) => ({ label: m, value: m }))}
|
||||
size="middle"
|
||||
/>
|
||||
<TextArea
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Enter an object to analyze (e.g., umbrella, smartphone)"
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
onClick={handleAnalyze}
|
||||
loading={loading}
|
||||
block
|
||||
size="large"
|
||||
>
|
||||
Analyze
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
{renderProgressIndicator()}
|
||||
|
||||
<Collapse items={collapseItems} defaultActiveKey={['llm']} size="small" style={{ marginBottom: 16 }} />
|
||||
{/* Settings Collapse */}
|
||||
<Collapse
|
||||
items={collapseItems}
|
||||
defaultActiveKey={[]}
|
||||
size="small"
|
||||
style={{ background: 'transparent' }}
|
||||
/>
|
||||
|
||||
<Divider style={{ margin: '8px 0' }} />
|
||||
<Divider style={{ margin: '4px 0' }} />
|
||||
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||||
<Text strong>
|
||||
<HistoryOutlined /> History
|
||||
</Text>
|
||||
{/* History Section */}
|
||||
<div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
|
||||
<Title level={5} style={{ marginBottom: 8 }}>
|
||||
<HistoryOutlined style={{ marginRight: 8 }} />
|
||||
History
|
||||
</Title>
|
||||
<List
|
||||
size="small"
|
||||
dataSource={history}
|
||||
locale={{ emptyText: 'No history yet' }}
|
||||
renderItem={(item) => (
|
||||
<List.Item
|
||||
style={{ cursor: 'pointer', padding: '8px 0' }}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 6,
|
||||
marginBottom: 4,
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onClick={() => onLoadHistory(item)}
|
||||
className="history-item"
|
||||
>
|
||||
<Text ellipsis style={{ maxWidth: '100%' }}>
|
||||
{item.query}
|
||||
</Text>
|
||||
<Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
|
||||
{item.timestamp.toLocaleTimeString()}
|
||||
</Text>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text ellipsis style={{ display: 'block' }}>
|
||||
{item.query}
|
||||
</Text>
|
||||
<Text type="secondary" style={{ fontSize: 11 }}>
|
||||
{item.timestamp.toLocaleTimeString()}
|
||||
</Text>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
||||
104
frontend/src/components/MindmapDAG.tsx
Normal file
104
frontend/src/components/MindmapDAG.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { forwardRef, useImperativeHandle, useMemo } from 'react';
|
||||
import {
|
||||
ReactFlow,
|
||||
useReactFlow,
|
||||
ReactFlowProvider,
|
||||
Background,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
|
||||
import type { AttributeDAG } from '../types';
|
||||
import { nodeTypes, useDAGLayout } from './dag';
|
||||
import '../styles/mindmap.css';
|
||||
|
||||
interface VisualSettings {
|
||||
nodeSpacing: number;
|
||||
fontSize: number;
|
||||
}
|
||||
|
||||
interface MindmapDAGProps {
|
||||
data: AttributeDAG;
|
||||
isDark: boolean;
|
||||
visualSettings: VisualSettings;
|
||||
}
|
||||
|
||||
export interface MindmapDAGRef {
|
||||
resetView: () => void;
|
||||
}
|
||||
|
||||
// Inner component that uses useReactFlow
|
||||
const MindmapDAGInner = forwardRef<MindmapDAGRef, MindmapDAGProps>(
|
||||
({ data, isDark, visualSettings }, ref) => {
|
||||
const { setViewport } = useReactFlow();
|
||||
|
||||
// Layout configuration
|
||||
const layoutConfig = useMemo(
|
||||
() => ({
|
||||
nodeHeight: 32,
|
||||
headerGap: 12,
|
||||
headerHeight: 28,
|
||||
nodeSpacing: Math.max(visualSettings.nodeSpacing, 40),
|
||||
fontSize: visualSettings.fontSize,
|
||||
isDark,
|
||||
}),
|
||||
[visualSettings.nodeSpacing, visualSettings.fontSize, isDark]
|
||||
);
|
||||
|
||||
// Generate nodes with layout
|
||||
const nodes = useDAGLayout(data, layoutConfig);
|
||||
|
||||
// Expose resetView via ref
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
resetView: () => {
|
||||
setViewport({ x: 50, y: 50, zoom: 1 }, { duration: 300 });
|
||||
},
|
||||
}),
|
||||
[setViewport]
|
||||
);
|
||||
|
||||
return (
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={[]}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
minZoom={0.3}
|
||||
maxZoom={3}
|
||||
defaultViewport={{ x: 50, y: 50, zoom: 1 }}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
panOnDrag
|
||||
zoomOnScroll
|
||||
zoomOnPinch
|
||||
>
|
||||
<Background
|
||||
color={isDark ? '#333' : '#e0e0e0'}
|
||||
gap={20}
|
||||
size={1}
|
||||
/>
|
||||
</ReactFlow>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
MindmapDAGInner.displayName = 'MindmapDAGInner';
|
||||
|
||||
// Wrapper with ReactFlowProvider
|
||||
export const MindmapDAG = forwardRef<MindmapDAGRef, MindmapDAGProps>(
|
||||
(props, ref) => (
|
||||
<div
|
||||
className={`mindmap-container ${props.isDark ? 'mindmap-dark' : 'mindmap-light'}`}
|
||||
>
|
||||
<ReactFlowProvider>
|
||||
<MindmapDAGInner {...props} ref={ref} />
|
||||
</ReactFlowProvider>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
MindmapDAG.displayName = 'MindmapDAG';
|
||||
@@ -1,8 +1,8 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { Empty, Spin } from 'antd';
|
||||
import type { AttributeNode } from '../types';
|
||||
import { MindmapD3 } from './MindmapD3';
|
||||
import type { MindmapD3Ref } from './MindmapD3';
|
||||
import type { AttributeDAG } from '../types';
|
||||
import { MindmapDAG } from './MindmapDAG';
|
||||
import type { MindmapDAGRef } from './MindmapDAG';
|
||||
|
||||
interface VisualSettings {
|
||||
nodeSpacing: number;
|
||||
@@ -10,14 +10,14 @@ interface VisualSettings {
|
||||
}
|
||||
|
||||
interface MindmapPanelProps {
|
||||
data: AttributeNode | null;
|
||||
data: AttributeDAG | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
isDark: boolean;
|
||||
visualSettings: VisualSettings;
|
||||
}
|
||||
|
||||
export const MindmapPanel = forwardRef<MindmapD3Ref, MindmapPanelProps>(
|
||||
export const MindmapPanel = forwardRef<MindmapDAGRef, MindmapPanelProps>(
|
||||
({ data, loading, error, isDark, visualSettings }, ref) => {
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -64,7 +64,7 @@ export const MindmapPanel = forwardRef<MindmapD3Ref, MindmapPanelProps>(
|
||||
);
|
||||
}
|
||||
|
||||
return <MindmapD3 ref={ref} data={data} isDark={isDark} visualSettings={visualSettings} />;
|
||||
return <MindmapDAG ref={ref} data={data} isDark={isDark} visualSettings={visualSettings} />;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
12
frontend/src/components/dag/index.ts
Normal file
12
frontend/src/components/dag/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { QueryNode } from './nodes/QueryNode';
|
||||
import { CategoryHeaderNode } from './nodes/CategoryHeaderNode';
|
||||
import { AttributeNode } from './nodes/AttributeNode';
|
||||
|
||||
export const nodeTypes = {
|
||||
query: QueryNode,
|
||||
categoryHeader: CategoryHeaderNode,
|
||||
attribute: AttributeNode,
|
||||
};
|
||||
|
||||
export { QueryNode, CategoryHeaderNode, AttributeNode };
|
||||
export { useDAGLayout } from './useDAGLayout';
|
||||
41
frontend/src/components/dag/nodes/AttributeNode.tsx
Normal file
41
frontend/src/components/dag/nodes/AttributeNode.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { memo, useState } from 'react';
|
||||
|
||||
interface AttributeNodeProps {
|
||||
data: {
|
||||
label: string;
|
||||
fillColor: string;
|
||||
strokeColor: string;
|
||||
fontSize: number;
|
||||
};
|
||||
}
|
||||
|
||||
export const AttributeNode = memo(({ data }: AttributeNodeProps) => {
|
||||
const { label, fillColor, strokeColor, fontSize } = data;
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
borderRadius: 6,
|
||||
background: fillColor,
|
||||
border: `${isHovered ? 3 : 2}px solid ${strokeColor}`,
|
||||
color: '#fff',
|
||||
fontSize: `${fontSize}px`,
|
||||
fontWeight: 500,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-width 0.2s ease, filter 0.2s ease',
|
||||
filter: isHovered ? 'brightness(1.12)' : 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
AttributeNode.displayName = 'AttributeNode';
|
||||
51
frontend/src/components/dag/nodes/CategoryHeaderNode.tsx
Normal file
51
frontend/src/components/dag/nodes/CategoryHeaderNode.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { memo } from 'react';
|
||||
|
||||
interface CategoryHeaderNodeProps {
|
||||
data: {
|
||||
label: string;
|
||||
color: string;
|
||||
isFixed: boolean;
|
||||
isDark: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export const CategoryHeaderNode = memo(({ data }: CategoryHeaderNodeProps) => {
|
||||
const { label, color, isFixed, isDark } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
padding: '4px 10px',
|
||||
borderRadius: 4,
|
||||
background: color,
|
||||
border: isFixed ? 'none' : `2px dashed ${isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.3)'}`,
|
||||
color: '#fff',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
{!isFixed && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
padding: '1px 4px',
|
||||
borderRadius: 3,
|
||||
background: isDark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)',
|
||||
marginLeft: 2,
|
||||
}}
|
||||
>
|
||||
AI
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
CategoryHeaderNode.displayName = 'CategoryHeaderNode';
|
||||
34
frontend/src/components/dag/nodes/QueryNode.tsx
Normal file
34
frontend/src/components/dag/nodes/QueryNode.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { memo } from 'react';
|
||||
|
||||
interface QueryNodeProps {
|
||||
data: {
|
||||
label: string;
|
||||
isDark: boolean;
|
||||
fontSize: number;
|
||||
};
|
||||
}
|
||||
|
||||
export const QueryNode = memo(({ data }: QueryNodeProps) => {
|
||||
const { label, isDark, fontSize } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
borderRadius: 6,
|
||||
background: isDark ? '#177ddc' : '#1890ff',
|
||||
border: `2px solid ${isDark ? '#1890ff' : '#096dd9'}`,
|
||||
color: '#fff',
|
||||
fontSize: `${fontSize}px`,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
QueryNode.displayName = 'QueryNode';
|
||||
155
frontend/src/components/dag/useDAGLayout.ts
Normal file
155
frontend/src/components/dag/useDAGLayout.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { Node } from '@xyflow/react';
|
||||
import type { AttributeDAG, DAGNode } from '../../types';
|
||||
|
||||
interface LayoutConfig {
|
||||
nodeHeight: number;
|
||||
headerGap: number;
|
||||
headerHeight: number;
|
||||
nodeSpacing: number;
|
||||
fontSize: number;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
const COLOR_PALETTE = [
|
||||
{ dark: '#177ddc', light: '#1890ff' }, // blue
|
||||
{ dark: '#854eca', light: '#722ed1' }, // purple
|
||||
{ dark: '#13a8a8', light: '#13c2c2' }, // cyan
|
||||
{ dark: '#d87a16', light: '#fa8c16' }, // orange
|
||||
{ dark: '#49aa19', light: '#52c41a' }, // green
|
||||
{ dark: '#1677ff', light: '#1890ff' }, // blue
|
||||
{ dark: '#eb2f96', light: '#f759ab' }, // magenta
|
||||
{ dark: '#faad14', light: '#ffc53d' }, // gold
|
||||
{ dark: '#a0d911', light: '#bae637' }, // lime
|
||||
];
|
||||
|
||||
function darken(hex: string, amount: number): string {
|
||||
const num = parseInt(hex.slice(1), 16);
|
||||
const r = Math.max(0, ((num >> 16) & 0xff) - Math.floor(255 * amount));
|
||||
const g = Math.max(0, ((num >> 8) & 0xff) - Math.floor(255 * amount));
|
||||
const b = Math.max(0, (num & 0xff) - Math.floor(255 * amount));
|
||||
return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
|
||||
}
|
||||
|
||||
export function useDAGLayout(
|
||||
data: AttributeDAG | null,
|
||||
config: LayoutConfig
|
||||
): Node[] {
|
||||
return useMemo(() => {
|
||||
if (!data) return [];
|
||||
|
||||
const {
|
||||
nodeHeight,
|
||||
headerGap,
|
||||
headerHeight,
|
||||
nodeSpacing,
|
||||
fontSize,
|
||||
isDark,
|
||||
} = config;
|
||||
|
||||
const nodes: Node[] = [];
|
||||
const sortedCategories = [...data.categories].sort((a, b) => a.order - b.order);
|
||||
|
||||
// Unified column spacing
|
||||
const columnGap = 60; // Consistent gap between ALL adjacent elements
|
||||
|
||||
// Build category color map
|
||||
const categoryColors: Record<string, { fill: string; stroke: string }> = {};
|
||||
sortedCategories.forEach((cat, index) => {
|
||||
const paletteIndex = index % COLOR_PALETTE.length;
|
||||
const color = isDark
|
||||
? COLOR_PALETTE[paletteIndex].dark
|
||||
: COLOR_PALETTE[paletteIndex].light;
|
||||
categoryColors[cat.name] = {
|
||||
fill: color,
|
||||
stroke: darken(color, 0.15),
|
||||
};
|
||||
});
|
||||
|
||||
// Group nodes by category
|
||||
const nodesByCategory: Record<string, DAGNode[]> = {};
|
||||
for (const node of data.nodes) {
|
||||
if (!nodesByCategory[node.category]) {
|
||||
nodesByCategory[node.category] = [];
|
||||
}
|
||||
nodesByCategory[node.category].push(node);
|
||||
}
|
||||
|
||||
// Sort nodes within each category by order, then re-index locally
|
||||
for (const cat of Object.keys(nodesByCategory)) {
|
||||
nodesByCategory[cat].sort((a, b) => a.order - b.order);
|
||||
}
|
||||
|
||||
// Calculate max column height for centering
|
||||
const maxNodesInColumn = Math.max(
|
||||
...sortedCategories.map((cat) => (nodesByCategory[cat.name] || []).length),
|
||||
1
|
||||
);
|
||||
const maxTotalHeight = maxNodesInColumn * (nodeHeight + nodeSpacing) - nodeSpacing;
|
||||
const contentStartY = headerHeight + headerGap;
|
||||
|
||||
// Layout constants - UNIFORM spacing for all columns
|
||||
const colStep = 160; // Distance between column left edges (uniform for all)
|
||||
|
||||
// Helper function for column X position
|
||||
const getColumnX = (colIndex: number) => colIndex * colStep;
|
||||
|
||||
// 1. Add Query Node (column 0, centered vertically)
|
||||
const queryY = contentStartY + (maxTotalHeight - nodeHeight) / 2;
|
||||
nodes.push({
|
||||
id: 'query-node',
|
||||
type: 'query',
|
||||
position: { x: getColumnX(0), y: queryY },
|
||||
data: {
|
||||
label: data.query,
|
||||
isDark,
|
||||
fontSize,
|
||||
},
|
||||
draggable: false,
|
||||
selectable: false,
|
||||
});
|
||||
|
||||
// 2. Add Category Headers (starting from column 1)
|
||||
sortedCategories.forEach((cat, colIndex) => {
|
||||
const columnX = getColumnX(colIndex + 1); // +1 because column 0 is query
|
||||
nodes.push({
|
||||
id: `header-${cat.name}`,
|
||||
type: 'categoryHeader',
|
||||
position: { x: columnX, y: 0 },
|
||||
data: {
|
||||
label: cat.name,
|
||||
color: categoryColors[cat.name]?.fill || '#666',
|
||||
isFixed: cat.is_fixed,
|
||||
isDark,
|
||||
},
|
||||
draggable: false,
|
||||
selectable: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Add Attribute Nodes
|
||||
sortedCategories.forEach((cat, colIndex) => {
|
||||
const categoryNodes = nodesByCategory[cat.name] || [];
|
||||
const columnX = getColumnX(colIndex + 1); // +1 because column 0 is query
|
||||
|
||||
categoryNodes.forEach((node, rowIndex) => {
|
||||
const y = contentStartY + rowIndex * (nodeHeight + nodeSpacing);
|
||||
nodes.push({
|
||||
id: node.id,
|
||||
type: 'attribute',
|
||||
position: { x: columnX, y },
|
||||
data: {
|
||||
label: node.name,
|
||||
fillColor: categoryColors[node.category]?.fill || '#666',
|
||||
strokeColor: categoryColors[node.category]?.stroke || '#444',
|
||||
fontSize,
|
||||
},
|
||||
draggable: false,
|
||||
selectable: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}, [data, config]);
|
||||
}
|
||||
@@ -1,24 +1,31 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import type {
|
||||
AttributeNode,
|
||||
HistoryItem,
|
||||
StreamProgress,
|
||||
StreamAnalyzeResponse
|
||||
AttributeDAG,
|
||||
DAGStreamAnalyzeResponse
|
||||
} from '../types';
|
||||
import { CategoryMode } from '../types';
|
||||
import { analyzeAttributesStream } from '../services/api';
|
||||
|
||||
interface DAGProgress {
|
||||
step: 'idle' | 'step0' | 'step1' | 'relationships' | 'done' | 'error';
|
||||
message: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface DAGHistoryItem {
|
||||
query: string;
|
||||
result: AttributeDAG;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
export function useAttribute() {
|
||||
const [progress, setProgress] = useState<StreamProgress>({
|
||||
const [progress, setProgress] = useState<DAGProgress>({
|
||||
step: 'idle',
|
||||
currentChainIndex: 0,
|
||||
totalChains: 0,
|
||||
completedChains: [],
|
||||
message: '',
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [currentResult, setCurrentResult] = useState<AttributeNode | null>(null);
|
||||
const [history, setHistory] = useState<HistoryItem[]>([]);
|
||||
const [currentResult, setCurrentResult] = useState<AttributeDAG | null>(null);
|
||||
const [history, setHistory] = useState<DAGHistoryItem[]>([]);
|
||||
|
||||
const analyze = useCallback(async (
|
||||
query: string,
|
||||
@@ -32,9 +39,6 @@ export function useAttribute() {
|
||||
// 重置狀態
|
||||
setProgress({
|
||||
step: 'idle',
|
||||
currentChainIndex: 0,
|
||||
totalChains: chainCount,
|
||||
completedChains: [],
|
||||
message: '準備開始分析...',
|
||||
});
|
||||
setError(null);
|
||||
@@ -53,17 +57,15 @@ export function useAttribute() {
|
||||
},
|
||||
{
|
||||
onStep0Start: () => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
setProgress({
|
||||
step: 'step0',
|
||||
message: '正在分析類別...',
|
||||
}));
|
||||
});
|
||||
},
|
||||
|
||||
onStep0Complete: (result) => {
|
||||
onStep0Complete: () => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
step0Result: result,
|
||||
message: '類別分析完成',
|
||||
}));
|
||||
},
|
||||
@@ -71,64 +73,49 @@ export function useAttribute() {
|
||||
onCategoriesResolved: (categories) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
categoriesUsed: categories,
|
||||
message: `使用 ${categories.length} 個類別`,
|
||||
}));
|
||||
},
|
||||
|
||||
onStep1Start: () => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
setProgress({
|
||||
step: 'step1',
|
||||
message: '正在分析物件屬性列表...',
|
||||
});
|
||||
},
|
||||
|
||||
onStep1Complete: () => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
message: '屬性列表分析完成',
|
||||
}));
|
||||
},
|
||||
|
||||
onStep1Complete: (step1Result) => {
|
||||
onRelationshipsStart: () => {
|
||||
setProgress({
|
||||
step: 'relationships',
|
||||
message: '正在生成關係...',
|
||||
});
|
||||
},
|
||||
|
||||
onRelationshipsComplete: (count) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
step1Result,
|
||||
message: '屬性列表分析完成，開始生成因果鏈...',
|
||||
message: `生成 ${count} 個關係`,
|
||||
}));
|
||||
},
|
||||
|
||||
onChainStart: (index, total) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
step: 'chains',
|
||||
currentChainIndex: index,
|
||||
totalChains: total,
|
||||
message: `正在生成第 ${index}/${total} 條因果鏈...`,
|
||||
}));
|
||||
},
|
||||
|
||||
onChainComplete: (index, chain) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
completedChains: [...prev.completedChains, chain],
|
||||
message: `第 ${index} 條因果鏈生成完成`,
|
||||
}));
|
||||
},
|
||||
|
||||
onChainError: (index, errorMsg) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
message: `第 ${index} 條因果鏈生成失敗: ${errorMsg}`,
|
||||
}));
|
||||
},
|
||||
|
||||
onDone: (response: StreamAnalyzeResponse) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
onDone: (response: DAGStreamAnalyzeResponse) => {
|
||||
setProgress({
|
||||
step: 'done',
|
||||
message: '分析完成！',
|
||||
}));
|
||||
setCurrentResult(response.attributes);
|
||||
});
|
||||
setCurrentResult(response.dag);
|
||||
|
||||
setHistory((prev) => [
|
||||
{
|
||||
query,
|
||||
result: response.attributes,
|
||||
result: response.dag,
|
||||
timestamp: new Date(),
|
||||
},
|
||||
...prev,
|
||||
@@ -136,37 +123,32 @@ export function useAttribute() {
|
||||
},
|
||||
|
||||
onError: (errorMsg) => {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
setProgress({
|
||||
step: 'error',
|
||||
error: errorMsg,
|
||||
message: `錯誤: ${errorMsg}`,
|
||||
}));
|
||||
});
|
||||
setError(errorMsg);
|
||||
},
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error';
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
setProgress({
|
||||
step: 'error',
|
||||
error: errorMessage,
|
||||
message: `錯誤: ${errorMessage}`,
|
||||
}));
|
||||
});
|
||||
setError(errorMessage);
|
||||
throw err;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadFromHistory = useCallback((item: HistoryItem) => {
|
||||
const loadFromHistory = useCallback((item: DAGHistoryItem) => {
|
||||
setCurrentResult(item.result);
|
||||
setError(null);
|
||||
setProgress({
|
||||
step: 'done',
|
||||
currentChainIndex: 0,
|
||||
totalChains: 0,
|
||||
completedChains: [],
|
||||
message: '從歷史記錄載入',
|
||||
});
|
||||
}, []);
|
||||
@@ -176,14 +158,11 @@ export function useAttribute() {
|
||||
setError(null);
|
||||
setProgress({
|
||||
step: 'idle',
|
||||
currentChainIndex: 0,
|
||||
totalChains: 0,
|
||||
completedChains: [],
|
||||
message: '',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const isLoading = progress.step === 'step0' || progress.step === 'step1' || progress.step === 'chains';
|
||||
const isLoading = progress.step === 'step0' || progress.step === 'step1' || progress.step === 'relationships';
|
||||
|
||||
return {
|
||||
loading: isLoading,
|
||||
|
||||
@@ -8,9 +8,102 @@ body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Global transitions for smooth theme switching */
|
||||
.ant-layout,
|
||||
.ant-layout-header,
|
||||
.ant-layout-sider,
|
||||
.ant-layout-content,
|
||||
.ant-card,
|
||||
.ant-collapse,
|
||||
.ant-btn {
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(128, 128, 128, 0.6);
|
||||
}
|
||||
|
||||
/* History item hover effect */
|
||||
.history-item {
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background-color: rgba(24, 144, 255, 0.08) !important;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Button hover enhancement */
|
||||
.ant-btn {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ant-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ant-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Card subtle shadow */
|
||||
.ant-card {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.ant-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Collapse panel enhancement */
|
||||
.ant-collapse {
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-collapse-item {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Slider enhancement */
|
||||
.ant-slider-handle {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.ant-slider-handle:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Select dropdown enhancement */
|
||||
.ant-select-dropdown {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* Alert enhancement */
|
||||
.ant-alert {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import type {
|
||||
ModelListResponse,
|
||||
StreamAnalyzeRequest,
|
||||
StreamAnalyzeResponse,
|
||||
Step1Result,
|
||||
CausalChain,
|
||||
Step0Result,
|
||||
CategoryDefinition,
|
||||
DynamicStep1Result,
|
||||
DynamicCausalChain
|
||||
DAGStreamAnalyzeResponse
|
||||
} from '../types';
|
||||
|
||||
// 自動使用當前瀏覽器的 hostname，支援遠端存取
|
||||
@@ -19,10 +17,9 @@ export interface SSECallbacks {
|
||||
onCategoriesResolved?: (categories: CategoryDefinition[]) => void;
|
||||
onStep1Start?: () => void;
|
||||
onStep1Complete?: (result: Step1Result | DynamicStep1Result) => void;
|
||||
onChainStart?: (index: number, total: number) => void;
|
||||
onChainComplete?: (index: number, chain: CausalChain | DynamicCausalChain) => void;
|
||||
onChainError?: (index: number, error: string) => void;
|
||||
onDone?: (response: StreamAnalyzeResponse) => void;
|
||||
onRelationshipsStart?: () => void;
|
||||
onRelationshipsComplete?: (count: number) => void;
|
||||
onDone?: (response: DAGStreamAnalyzeResponse) => void;
|
||||
onError?: (error: string) => void;
|
||||
}
|
||||
|
||||
@@ -87,14 +84,11 @@ export async function analyzeAttributesStream(
|
||||
case 'step1_complete':
|
||||
callbacks.onStep1Complete?.(eventData.result);
|
||||
break;
|
||||
case 'chain_start':
|
||||
callbacks.onChainStart?.(eventData.index, eventData.total);
|
||||
case 'relationships_start':
|
||||
callbacks.onRelationshipsStart?.();
|
||||
break;
|
||||
case 'chain_complete':
|
||||
callbacks.onChainComplete?.(eventData.index, eventData.chain);
|
||||
break;
|
||||
case 'chain_error':
|
||||
callbacks.onChainError?.(eventData.index, eventData.error);
|
||||
case 'relationships_complete':
|
||||
callbacks.onRelationshipsComplete?.(eventData.count);
|
||||
break;
|
||||
case 'done':
|
||||
callbacks.onDone?.(eventData);
|
||||
|
||||
@@ -2,289 +2,29 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mindmap-svg {
|
||||
/* React Flow overrides */
|
||||
.react-flow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.node {
|
||||
cursor: pointer;
|
||||
.mindmap-dark .react-flow {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.node rect {
|
||||
stroke-width: 2px;
|
||||
transition: all 0.3s ease;
|
||||
.mindmap-light .react-flow {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.node rect:hover {
|
||||
stroke-width: 3px;
|
||||
filter: brightness(1.1);
|
||||
/* Hide React Flow attribution */
|
||||
.react-flow__attribution {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
transition: stroke 0.3s ease;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
.mindmap-light .node-rect {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.collapsed {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
/* Light theme - Category colors */
|
||||
.mindmap-light .node-rect.category-root {
|
||||
fill: #1890ff;
|
||||
stroke: #096dd9;
|
||||
}
|
||||
.mindmap-light .node-text.category-root {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.category-材料 {
|
||||
fill: #722ed1;
|
||||
stroke: #531dab;
|
||||
}
|
||||
.mindmap-light .node-text.category-材料 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.category-功能 {
|
||||
fill: #13c2c2;
|
||||
stroke: #08979c;
|
||||
}
|
||||
.mindmap-light .node-text.category-功能 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.category-用途 {
|
||||
fill: #fa8c16;
|
||||
stroke: #d46b08;
|
||||
}
|
||||
.mindmap-light .node-text.category-用途 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.category-使用族群 {
|
||||
fill: #52c41a;
|
||||
stroke: #389e0d;
|
||||
}
|
||||
.mindmap-light .node-text.category-使用族群 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/* Light theme - Fallback depth colors */
|
||||
.mindmap-light .node-rect.depth-0 {
|
||||
fill: #1890ff;
|
||||
stroke: #096dd9;
|
||||
}
|
||||
.mindmap-light .node-text.depth-0 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-1 {
|
||||
fill: #722ed1;
|
||||
stroke: #531dab;
|
||||
}
|
||||
.mindmap-light .node-text.depth-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-2 {
|
||||
fill: #13c2c2;
|
||||
stroke: #08979c;
|
||||
}
|
||||
.mindmap-light .node-text.depth-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-3 {
|
||||
fill: #fa8c16;
|
||||
stroke: #d46b08;
|
||||
}
|
||||
.mindmap-light .node-text.depth-3 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-4 {
|
||||
fill: #52c41a;
|
||||
stroke: #389e0d;
|
||||
}
|
||||
.mindmap-light .node-text.depth-4 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-5 {
|
||||
fill: #1890ff;
|
||||
stroke: #096dd9;
|
||||
}
|
||||
.mindmap-light .node-text.depth-5 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-6 {
|
||||
fill: #f759ab;
|
||||
stroke: #eb2f96;
|
||||
}
|
||||
.mindmap-light .node-text.depth-6 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-7 {
|
||||
fill: #ffc53d;
|
||||
stroke: #faad14;
|
||||
}
|
||||
.mindmap-light .node-text.depth-7 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .node-rect.depth-8 {
|
||||
fill: #bae637;
|
||||
stroke: #a0d911;
|
||||
}
|
||||
.mindmap-light .node-text.depth-8 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-light .link {
|
||||
stroke: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
.mindmap-dark .node-rect {
|
||||
stroke: #444;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.collapsed {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
/* Dark theme - Category colors */
|
||||
.mindmap-dark .node-rect.category-root {
|
||||
fill: #177ddc;
|
||||
stroke: #1890ff;
|
||||
}
|
||||
.mindmap-dark .node-text.category-root {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.category-材料 {
|
||||
fill: #854eca;
|
||||
stroke: #9254de;
|
||||
}
|
||||
.mindmap-dark .node-text.category-材料 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.category-功能 {
|
||||
fill: #13a8a8;
|
||||
stroke: #36cfc9;
|
||||
}
|
||||
.mindmap-dark .node-text.category-功能 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.category-用途 {
|
||||
fill: #d87a16;
|
||||
stroke: #ffa940;
|
||||
}
|
||||
.mindmap-dark .node-text.category-用途 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.category-使用族群 {
|
||||
fill: #49aa19;
|
||||
stroke: #73d13d;
|
||||
}
|
||||
.mindmap-dark .node-text.category-使用族群 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/* Dark theme - Fallback depth colors */
|
||||
.mindmap-dark .node-rect.depth-0 {
|
||||
fill: #177ddc;
|
||||
stroke: #1890ff;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-0 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-1 {
|
||||
fill: #854eca;
|
||||
stroke: #9254de;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-2 {
|
||||
fill: #13a8a8;
|
||||
stroke: #36cfc9;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-3 {
|
||||
fill: #d87a16;
|
||||
stroke: #ffa940;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-3 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-4 {
|
||||
fill: #49aa19;
|
||||
stroke: #73d13d;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-4 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-5 {
|
||||
fill: #1677ff;
|
||||
stroke: #4096ff;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-5 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-6 {
|
||||
fill: #eb2f96;
|
||||
stroke: #f759ab;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-6 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-7 {
|
||||
fill: #faad14;
|
||||
stroke: #ffc53d;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-7 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .node-rect.depth-8 {
|
||||
fill: #a0d911;
|
||||
stroke: #bae637;
|
||||
}
|
||||
.mindmap-dark .node-text.depth-8 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.mindmap-dark .link {
|
||||
stroke: #434343;
|
||||
/* Background pattern */
|
||||
.react-flow__background {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -76,6 +76,7 @@ export interface DynamicCausalChain {
|
||||
export const CategoryMode = {
|
||||
FIXED_ONLY: 'fixed_only',
|
||||
FIXED_PLUS_CUSTOM: 'fixed_plus_custom',
|
||||
FIXED_PLUS_DYNAMIC: 'fixed_plus_dynamic',
|
||||
CUSTOM_ONLY: 'custom_only',
|
||||
DYNAMIC_AUTO: 'dynamic_auto',
|
||||
} as const;
|
||||
@@ -113,3 +114,40 @@ export interface StreamAnalyzeResponse {
|
||||
causal_chains: (CausalChain | DynamicCausalChain)[];
|
||||
attributes: AttributeNode;
|
||||
}
|
||||
|
||||
// ===== DAG (Directed Acyclic Graph) types =====
|
||||
|
||||
export interface DAGNode {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
order: number;
|
||||
}
|
||||
|
||||
export interface DAGEdge {
|
||||
source_id: string;
|
||||
target_id: string;
|
||||
}
|
||||
|
||||
export interface AttributeDAG {
|
||||
query: string;
|
||||
categories: CategoryDefinition[];
|
||||
nodes: DAGNode[];
|
||||
edges: DAGEdge[];
|
||||
}
|
||||
|
||||
export interface DAGRelationship {
|
||||
source_category: string;
|
||||
source: string;
|
||||
target_category: string;
|
||||
target: string;
|
||||
}
|
||||
|
||||
export interface DAGStreamAnalyzeResponse {
|
||||
query: string;
|
||||
step0_result?: Step0Result;
|
||||
categories_used: CategoryDefinition[];
|
||||
step1_result: DynamicStep1Result;
|
||||
relationships: DAGRelationship[];
|
||||
dag: AttributeDAG;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user