Simplified components

[sean-zlai]

Summary

• Switch from outdated shadcn-svelte / bits-ui / melt-ui components to Svelte UX
  • More components
  • Typically simpler usage
  • Typical more interactivity (ex. ToggleGroup highlight/transitions)
  • Removes Svelte <5 dependency (warning on npm install)
  • Ownership of shadcn-svelte components are project level which can become stagnant
• Additional improvements

Checklist

• Added Unit Tests
• Covered by existing CI
• Integration tested
• Documentation update

Summary by CodeRabbit

• New Features

  • Introduced new offline and online navigation layouts with toggle-based navigation, supporting views for data, cost, jobs, and observability.
  • Added detailed offline job tracking and timeline visualization, including interactive charts, brushing, and drilldown drawers for job tasks.
  • Implemented grouped and interactive visualizations for offline and online data distributions and drift metrics, with collapsible sections, brushing, and tooltip locking.
  • Added placeholder pages for upcoming features such as cost, streaming jobs, upload jobs, and consistency view.
  • Provided utilities for generating and inspecting synthetic demo data for offline visualizations.

• Refactor

  • Replaced custom navigation, table, and UI components with standardized components from svelte-ux for improved consistency and maintainability.
  • Streamlined layout and breadcrumb navigation to use theme-based and dynamic components.
  • Simplified and modularized chart rendering, annotations, and data transformation utilities.
  • Updated job status and label rendering for improved clarity and appearance.

• Bug Fixes

  • Improved search term handling and filtering robustness in entity tables.
  • Corrected comment casing and improved internal logic for navigation and conditional rendering.

• Chores

  • Upgraded and reorganized dependencies for frontend libraries and tools.
  • Removed a large number of unused or redundant UI component files to reduce codebase complexity.
  • Updated and expanded ESLint configuration and dependency versions for better code quality and compatibility.

• Documentation

  • Enhanced inline comments and clarified placeholder usage in new and refactored components.

• Tests

  • Removed outdated or redundant test files as part of codebase cleanup.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This update is a comprehensive frontend refactor and feature expansion. It upgrades numerous dependencies, removes many custom and legacy UI components in favor of new or third-party alternatives, and restructures the navigation, theming, and charting systems. The job tracking, observability, and offline/online data views are overhauled with new layouts, chart components, and demo data generation utilities. Several new Svelte components and pages are introduced for offline/online workflows, while obsolete or redundant files are deleted. The codebase now uses more modular, declarative, and maintainable patterns, with improved demo data handling and enhanced charting and navigation.

Changes

Files/Paths (Grouped)	Summary
frontend/package.json, frontend/eslint.config.js	Dependency upgrades, ESLint config updates, and new/removed packages.
frontend/src/app.css	Comments out primary color variables.
frontend/src/app.d.ts	Updates chart component type reference.
frontend/src/lib/api/api.ts, frontend/src/lib/api/utils.ts	Refactors lineage and job tracker methods, adds static data, async/await, and new lineage job tracker method.
frontend/src/lib/components/charts/CustomLineChart.svelte, HistogramLineChart.svelte, ...	Adds new chart components, refactors or removes old ones, updates chart utils and color configs.
frontend/src/lib/components/NavigationMenu.svelte, BreadcrumbNav.svelte, ...	Adds new navigation and breadcrumb components, removes legacy navigation and related UI.
frontend/src/lib/components/CollapsibleSection.svelte, PropertyList.svelte, ...	Refactors or adds collapsible and property list components, removes legacy UI.
frontend/src/lib/components/ui/ (many files)	Removes most custom UI primitives: alerts, avatars, badges, breadcrumbs, calendar, checkbox, dialog, dropdown, ...
frontend/src/lib/types/Entity.ts	Adds getEntityLabel utility.
frontend/src/lib/constants/common.ts	Adds demo date range constants.
frontend/src/lib/job/tree-builder/	Removes job tree builder and related tests.
frontend/src/lib/util/ (many files)	Removes legacy color, event, series, heatmap, and test data utilities; adds new test data generators.
frontend/src/lib/params/	Adds offset param module, updates sort/metric param types and imports.
frontend/src/routes/+layout.svelte, [conf]/+page.svelte, ...	Refactors layout to use new navigation, theming, and table components.
frontend/src/routes/[conf]/[name]/offline/, /online/, /observability/, ...	Adds new offline/online layouts, pages, and chart drilldowns; redirects and placeholders for unimplemented views.
frontend/src/routes/[conf]/[name]/offline/data/, /drift/, /distributions/, ...	Adds new job tracking, timeline, and data quality visualizations with demo data and interactive charts.
frontend/src/routes/[conf]/[name]/overview/+page.svelte	Refactors DAG overview, updates chart rendering, tooltip, and node details UI.
Deleted: Many legacy Svelte components and UI modules	Removes obsolete, redundant, or replaced components, utilities, and styles.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI
    participant API
    participant DemoData

    User->>UI: Navigates to Offline Data page
    UI->>API: Fetches lineage and job tracker data
    API->>DemoData: Generates synthetic job/task data
    DemoData-->>API: Returns demo data
    API-->>UI: Returns lineage and job tracker data
    UI->>UI: Renders timeline, charts, and details
    User->>UI: Interacts (zoom, select, drilldown)
    UI->>UI: Updates charts, opens drawers, shows tooltips

Loading

Possibly related PRs

• #251: Migrates ECharts to LayerChart, removes old chart components, adds new LayerChart-based components—directly related to chart refactoring here.
• #252: Refactors lineage API and utilities, adds new lineage methods—overlaps with lineage and job tracker changes.
• #505: Upgrades Tailwind CSS, updates dependencies, replaces cn with cls, and removes legacy UI—strongly related to the UI and styling refactor.

Suggested reviewers

• ken-zlai

Poem

In the garden of code, the weeds are all gone,
New charts bloom brightly, old UI withdrawn.
Navigation’s fresh, with breadcrumbs anew,
Demo data flows where the job trees grew.
Charts sing in color, toggles in line,
Refactored and tidy—oh, isn’t it fine?

🌱✨🖥️

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.