agent/Understand-Anything
2
0
Fork 0
mirror of https://github.com/Egonex-AI/Understand-Anything.git synced 2026-06-22 10:58:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): add tour highlight to graph nodes

Browse Source 
Wire tourHighlightedNodeIds from the store into GraphView and CustomNode
so that nodes referenced by the current tour step get a pulsing blue ring,
visually distinct from the white selection ring and yellow search rings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lum1104
2026-03-14 20:56:38 +08:00
Unverified
parent 3b298c1a7a
commit 4452fe8e7b
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/dashboard/src/components/CustomNode.tsx
+3
View File
@@ -44,6 +44,7 @@ export interface CustomNodeData extends Record<string, unknown> {
isHighlighted: boolean;
searchScore?: number;
isSelected: boolean;
isTourHighlighted: boolean;
}
export type CustomFlowNode = Node<CustomNodeData, "custom">;
@@ -58,6 +59,8 @@ export default function CustomNode({
let ringClass = "";
if (data.isSelected) {
ringClass = "ring-2 ring-white";
} else if (data.isTourHighlighted) {
ringClass = "ring-2 ring-blue-400 animate-pulse";
} else if (data.isHighlighted) {
const score = data.searchScore ?? 1;
if (score <= 0.1) {
packages/dashboard/src/components/GraphView.tsx
+3 -1
View File
@@ -26,6 +26,7 @@ export default function GraphView() {
const searchResults = useDashboardStore((s) => s.searchResults);
const selectNode = useDashboardStore((s) => s.selectNode);
const showLayers = useDashboardStore((s) => s.showLayers);
const tourHighlightedNodeIds = useDashboardStore((s) => s.tourHighlightedNodeIds);
const { initialNodes, initialEdges } = useMemo(() => {
if (!graph)
@@ -48,6 +49,7 @@ export default function GraphView() {
isHighlighted: !!matchResult,
searchScore: matchResult?.score,
isSelected: selectedNodeId === node.id,
isTourHighlighted: tourHighlightedNodeIds.includes(node.id),
},
};
});
@@ -162,7 +164,7 @@ export default function GraphView() {
];
return { initialNodes: allNodes, initialEdges: laid.edges };
}, [graph, searchResults, selectedNodeId, showLayers]);
}, [graph, searchResults, selectedNodeId, showLayers, tourHighlightedNodeIds]);
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);