Add hover path highlighting in 3D view

[Copilot]

Hovering over a node in 3D view now highlights the complete path from that node to the root (solved state).

Changes

• Path tracing: BFS from hovered node through incoming edges to root, with O(1) link lookups via preprocessed target-indexed map and index-based queue traversal
• Visual feedback:
  • Path edges: full opacity (1.0)
  • Non-path edges: 0.1 opacity
  • Non-path nodes: 0.15-0.2 opacity
• Color conversion: Handles hex (#RGB, #RRGGBB), rgb(), and rgba() formats with validation

Implementation

// Track hover state and path
const hoveredNode = ref<any>(null);
const pathNodeIds = ref<Set<string>>(new Set());
const pathLinkIds = ref<Set<string>>(new Set());

// Handler traces path on hover
const handleNodeHover = (node: any) => {
  hoveredNode.value = node;
  if (node) {
    const path = findPathToRoot(node.id);
    pathNodeIds.value = path.nodes;
    pathLinkIds.value = path.links;
  }
};

// Dynamic color functions check path membership
const linkColor = (link: any) => {
  const linkId = `${sourceId}-${targetId}`;
  if (pathLinkIds.value.has(linkId)) {
    return convertToRgba(baseColor, 1.0); // highlight
  }
  return convertToRgba(baseColor, 0.1); // dim
};

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Highlight path to node on hover in 3D view</issue_title>
<issue_description>When I hover over a twisty node in 3D view, it would be great if the edges and nodes that create the path to that node are highlighted or made more visible.

1. When a user hovers over a twisty node in 3d view, determine the edges and nodes that are involved in the path or paths to the node the user is hovering over. You can successively climb parent nodes up to the solved state (root node)
2. The edges included in the path should have their opacity increased to 1.
3. Ideally, the opacity of twisty nodes not in the path should be increased if possible so as to dim the unrelated nodes. </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Highlight path to node on hover in 3D view #25

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.