Get Started

Clusters Page UI Refinements Design ​

Date: 2026-01-20 Status: Approved

Overview ​

Refining the clusters page to remove click-based selection from the visualization component while maintaining selection functionality via the table. Cluster circles will transition from solid filled colors to a glowing effect with transparent centers.

Problem Statement ​

Current cluster visualization has three issues:

  1. Clicking clusters to select them is redundant with table selection
  2. Hovering clusters highlights table rows, creating visual noise
  3. Solid color fills are heavy - a glow effect would be more modern

Design Changes ​

1. Remove Click Handlers from Visualization ​

File: app-ui/src/components/clusters/clusters-viz.tsx

  • Remove onClick handlers from cluster circle elements
  • Remove onClick from SVG background/container
  • Keep onMouseEnter and onMouseLeave for tooltip display
  • Remove onClusterSelect callback prop from component interface

Result: Visualization becomes display-only. Selection happens exclusively via table rows.

2. Replace Solid Fill with Glow Effect ​

Current behavior: Circles use fill="var(--cluster-N)" for solid colors.

New behavior:

  • Set fill="transparent" on circle elements
  • Add SVG <filter> definitions for glow using feGaussianBlur
  • Apply filter="url(#glow-N)" where N is cluster index (1-12)
  • Optional thin stroke: stroke="var(--cluster-N)" stroke-width="1.5"

Glow filter structure:

xml
<filter id="glow-1" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
  <feMerge>
    <feMergeNode in="coloredBlur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

One filter per cluster color (glow-1 through glow-12) using existing CSS variables.

3. Simplified Hover Interaction ​

Hover becomes the primary visualization interaction:

  • onMouseEnter shows tooltip (cluster label + failure count)
  • Optional: transform: scale(1.05) on hover for tactile feedback
  • No opacity changes on hover (keep subtle)
  • When cluster IS selected via table, non-selected clusters get opacity: 0.4 and grayscale(0.5)

Key: Hover no longer affects table highlighting.

4. Remove Table Highlighting from Cluster Hover ​

File: app-ui/src/app/clusters/clusters-table.tsx

  • Keep activeClusterId state for row selection (clicked from table)
  • Remove visual connection between visualization hover and table
  • Table rows highlight only when clicked: isActive = activeClusterId === row.original.id
  • bg-muted/60 applies only to clicked rows

5. Remove Active State Visuals from Visualization ​

Since clicking no longer happens:

  • Remove rotating dashed border animation from active clusters
  • Change cursor from pointer to default
  • Remove any visual feedback previously tied to id === activeClusterId

Component Interface Changes ​

ClustersVizProps (clusters-viz.tsx) ​

typescript
// BEFORE:
interface ClustersVizProps {
  clusters: Cluster[]
  activeClusterId: string | 'all' | null
  onClusterSelect: (id: string | 'all') => void
}

// AFTER:
interface ClustersVizProps {
  clusters: Cluster[]
  activeClusterId: string | 'all' | null  // Read-only, for dimming non-selected
}

State Flow ​

  • clusters.tsx manages activeClusterId state
  • Table clicks call onClusterSelect handler
  • Visualization receives activeClusterId for read-only visual purposes (dimming)
  • No selection initiated from visualization

Implementation Checklist ​

clusters-viz.tsx ​

  • [ ] Remove onClick handlers from circles and SVG background
  • [ ] Add SVG glow filter definitions (glow-1 through glow-12)
  • [ ] Change circle fill from solid color to transparent
  • [ ] Apply filter="url(#glow-N)" to each circle
  • [ ] Remove rotating dashed border for active clusters
  • [ ] Change cursor from pointer to default
  • [ ] Keep hover tooltip behavior intact

clusters-table.tsx ​

  • [ ] Verify table row clicking still sets activeClusterId
  • [ ] Confirm no hover-driven highlighting from visualization

clusters.tsx (page component) ​

  • [ ] Remove onClusterSelect prop when rendering ClustersViz
  • [ ] Keep activeClusterId prop for visual dimming

Files Modified ​

  1. app-ui/src/components/clusters/clusters-viz.tsx - Main changes
  2. app-ui/src/app/clusters/clusters-table.tsx - Verification only
  3. app-ui/src/app/clusters/clusters.tsx - Props update

Testing Considerations ​

  • Verify clusters still display with correct sizing based on failure count
  • Confirm tooltips show on hover
  • Verify table row clicking still selects clusters and highlights rows
  • Confirm non-selected clusters dim when a cluster is selected via table
  • Test merge/delete operations still work with table-based selection