improvement(dashboard): cleanup execution dashboard UI, fix logs trace, and improve performance

[waleedlatif1]

Summary

• cleanup execution dashboard UI,
• fix logs trace
• Improve performance of dashboard

Type of Change

• Other: Improvement

Testing

Tested manually.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Oct 16, 2025 5:59am

[greptile-apps]

Greptile Overview

Summary

This PR improves the execution dashboard's performance and UI by implementing dynamic segment counts based on viewport width, removing tooltip component overhead by using custom hover states, and refactoring filter components to use Command UI pattern with search functionality.

Key changes include:

• Implemented ResizeObserver to dynamically calculate segment counts (36-96) based on available width, replacing the fixed 120-segment approach
• Refactored StatusBar component to replace TooltipProvider/Tooltip with lightweight hover state using useMemo for better performance
• Extracted shared filter styling constants to new shared.ts file (following custom instruction 49f7e332-4733-48c6-834e-ec03d4abbeb7)
• Updated all filter components (workflow, folder, trigger, timeline) to use Command component with search capabilities
• Improved trace span visualization by moving crosshair rendering from parent to per-row child components
• Adjusted chart dimensions, padding, and overflow behavior for cleaner UI
• Removed extensive code comments throughout for cleaner codebase

Confidence Score: 4/5

• This PR is safe to merge with good confidence, though manual testing is recommended
• The changes are well-structured refactoring focused on performance and UX improvements. The dynamic segment calculation logic is sound, shared constants follow best practices, and the transition from Tooltip to custom hover is a valid optimization. However, the score is 4 rather than 5 because: (1) the ResizeObserver logic adds segmentCount to the dependency array which triggers API refetches on resize - this could cause excessive API calls during window resizing, and (2) several UI behavior changes (overflow, dimensions, hover interactions) should be manually tested to ensure no visual regressions
• Pay close attention to executions-dashboard.tsx for potential resize-triggered refetch behavior

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/logs/executions-dashboard.tsx	4/5	Refactored to use dynamic segment counts based on viewport width (using ResizeObserver), removed numerous code comments, and improved performance by adjusting overflow behavior
apps/sim/app/workspace/[workspaceId]/logs/components/filters/components/shared.ts	5/5	New file that extracts shared filter styling constants and dropdown styles, following the custom instruction to separate configuration from components
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/status-bar.tsx	4/5	Replaced Tooltip components with custom hover state using useMemo for performance, removed TooltipProvider dependency for lighter implementation
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/line-chart.tsx	4/5	Adjusted chart dimensions, padding, font sizes, and added special handling for millisecond units; changed overflow from visible to hidden
apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/trace-spans.tsx	5/5	Removed global crosshair line rendering from parent, kept only the time label tooltip, delegating per-row crosshair rendering to child components

Sequence Diagram

sequenceDiagram
    participant User
    participant Dashboard as ExecutionsDashboard
    participant ResizeObs as ResizeObserver
    participant API as /api/logs/executions
    participant StatusBar as StatusBar Component
    participant Filters as Filter Components
    participant TraceSpans as TraceSpans/TraceSpanItem

    User->>Dashboard: Load dashboard
    Dashboard->>ResizeObs: Observe barsAreaRef width
    ResizeObs->>Dashboard: Calculate segmentCount (36-96)
    Dashboard->>Filters: Render filters (workflow, folder, trigger, timeline)
    Filters-->>Dashboard: Return filter selections
    
    Dashboard->>API: Fetch executions with segments, filters, time range
    API-->>Dashboard: Return workflow executions & aggregates
    Dashboard->>StatusBar: Render status bars with segments
    
    User->>StatusBar: Hover over segment
    StatusBar->>StatusBar: Show custom tooltip (useMemo labels)
    
    User->>StatusBar: Click segment
    StatusBar->>Dashboard: Trigger onSegmentClick
    Dashboard->>API: Fetch workflow details
    API-->>Dashboard: Return detailed logs
    Dashboard->>TraceSpans: Render trace visualization
    
    User->>TraceSpans: Hover over timeline
    TraceSpans->>TraceSpanItem: Forward hover state
    TraceSpanItem->>TraceSpanItem: Render per-row crosshair
    TraceSpans->>TraceSpans: Show time label at top
    
    User->>Filters: Change filter selection
    Filters->>Dashboard: Update filter state
    Dashboard->>API: Refetch with new filters
    API-->>Dashboard: Return filtered results
    Dashboard->>StatusBar: Re-render with new data

Loading

_{No files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}