Node Visibility Toggles Cause Edge Consistency Issues

[jhellerstein]

Problem Description

There used to be eyeball icons in the hierarchy tree that allowed hiding/showing individual nodes and containers are causing edge consistency issues. When nodes are hidden via the eyeball icons, aggregated edges that reference those hidden nodes are not properly cleaned up, leading to ELK layout errors.

Error Symptoms

Console errors like:

[ELKBridge] ❌ INVALID EDGE: agg-502-bt_47 references non-existent nodes - source=502 (exists: false), target=bt_47 (exists: true)
[ELKBridge] ❌ INVALID EDGE: agg-484-bt_48 references non-existent nodes - source=484 (exists: false), target=bt_48 (exists: true)

Root Cause

1. When nodes are hidden via toggleNodeVisibility(), the recalculateEdgeVisibility() method only handles regular edges (this._edges), not aggregated edges (this._aggregatedEdges)
2. Aggregated edges that reference hidden nodes remain in the graph, causing ELK to fail when trying to layout non-existent nodes
3. The edge aggregation system needs to be updated to properly handle node visibility changes

Temporary Solution

• Eyeball icons have been disabled in the UI by commenting out the functionality in:
  • hydroscope/src/components/HierarchyTree.tsx (line ~249)
  • hydroscope/src/components/panels/InfoPanel.tsx (line ~18, ~652)

Proper Fix Required

1. Extend recalculateEdgeVisibility() to also handle aggregated edges:

   recalculateEdgeVisibility(): void {
     // Handle regular edges (existing code)
     for (const edge of this._edges.values()) { ... }
     
     // MISSING: Handle aggregated edges
     for (const aggEdge of this._aggregatedEdges.values()) {
       const sourceNode = this._nodes.get(aggEdge.source);
       const targetNode = this._nodes.get(aggEdge.target);
       const sourceContainer = this._containers.get(aggEdge.source);
       const targetContainer = this._containers.get(aggEdge.target);
       
       const sourceHidden = sourceNode?.hidden === true || sourceContainer?.hidden === true;
       const targetHidden = targetNode?.hidden === true || targetContainer?.hidden === true;
       
       aggEdge.hidden = sourceHidden || targetHidden;
     }
   }

2. Alternative approach: Create a dedicated method to clean up aggregated edges when nodes are hidden, similar to _cleanupAggregatedEdgesForHiddenContainer() but for individual nodes.

3. Re-enable eyeball functionality once the edge consistency is fixed.

Files Affected

• hydroscope/src/core/VisualizationState.ts - recalculateEdgeVisibility() method
• hydroscope/src/components/HierarchyTree.tsx - Eye icon rendering
• hydroscope/src/components/panels/InfoPanel.tsx - Eye icon imports

Priority

Medium - The core functionality works without eyeball icons, but this is a useful feature for users to selectively hide elements.