Skip to content

feat: Add zoom, scroll and hover values to the monitoring charts - #7090

Open
patelchaitany wants to merge 1 commit into
feast-dev:masterfrom
patelchaitany:feat/dqm-chart-zoom
Open

patelchaitany wants to merge 1 commit into
feast-dev:masterfrom
patelchaitany:feat/dqm-chart-zoom

Conversation

@patelchaitany

Copy link
Copy Markdown
Contributor

What this PR does / why we need it:

The data quality monitoring charts on the feature detail page are hand-drawn SVG with no interaction. You cannot read exact values, zoom into a crowded range, or look at small bars. The time series also draws every row the API returns as one line, so different window lengths (daily, weekly, monthly, quarterly) and the baseline are joined together. That creates spikes and drops that are not in the data.

This PR is UI only. The API and the stored metrics are unchanged.

Time series

  • Plots one window length at a time: the one picked in View, or daily when View is the baseline. The baseline row (all data, dated today) is no longer drawn as the newest point.
  • Hover shows the date and exact values, with a guide line across all charts.
  • Drag across a chart to zoom in. Zoom in/out/reset buttons; double-click resets.
  • When zoomed in, scroll sideways (trackpad, Shift+wheel or the scrollbar) to move through the rest of the data. The axes stay fixed, all charts on the panel move together, and scrolling stops at the first and last day.
  • Point markers are hidden when more than 45 points are on screen, so long ranges are not crowded.

Distribution (numeric histogram)

  • Hover shows the bin range and its count, plus the baseline count when a baseline is drawn.
  • Drag to zoom into a range of bars (snapped to whole bars); the height re-fits to the bars in view, so small tail bars become readable. Same buttons and sideways scrolling as the time series.
  • Leaves room above the plot so the top axis label is no longer cut off.
  • Axis labels sit on bar edges.

The zoom, scroll, hover and tooltip code is shared in ui/src/pages/monitoring/components/chartZoom.tsx.

Screenshots

Demo data: one feature view, hourly data for 20 drivers from 2026-07-01 to 2026-10-29, with daily, weekly and monthly metrics plus the baseline. conv_rate drifts upward and has a null spike on Oct 4–9.

Time series, All time

Before After
before after
Weekly, monthly and quarterly rows mixed into the daily line (spikes near 07-28), and the baseline drawn as the last point (drop at the right edge). Daily windows only.

Time series, Last 30 days

Before After
before after
A 9% null-rate blip on Oct 1 comes from the monthly row for October (daily is 0%). The drop at the end is the baseline row. Only real daily values.

Time series: zoom, hover and scroll

Drag-zoomed to Sep 30 – Oct 13, hovering Oct 4 Scrolled sideways to Sep 20 – Oct 7
zoom and hover scroll

Distribution

Before After: hover
before hover
Top axis label cut off; no way to read a bar's count. Bin range and exact count on hover.
After: zoomed into the left tail After: expanded view
zoomed tail expanded
Height re-fits, so a bar with 9 rows is readable. Top label (7,533) fully visible.

Which issue(s) this PR fixes:

Part of #7054: fixes case 3 (the time series mixes window lengths) and keeps the baseline off the time-series line. Cases 1, 2 and 4 are not changed here. #7056 and #7057 also edit FeatureMetricsDetail.tsx, so whichever merges second will need a small rebase.

Checks

  • I've made sure the tests are passing.
  • My commits are signed off (git commit -s)
  • My PR title follows conventional commits format

Testing Strategy

  • Unit tests
  • Integration tests
  • Manual tests
  • Testing is not required for this change

Unit test: ui/src/pages/monitoring/FeatureMetricsDetail.test.tsx checks that only the selected window length is plotted, drag-to-zoom, sideways scrolling, double-click reset, and the hover values on the time series and the distribution. All 21 UI tests, tsc, ESLint and Prettier pass.

Manual: built the UI and ran feast ui on the demo repo above; checked every time range, the View dropdown, numeric and categorical features, the expanded histogram, and the feature Monitoring tab.

Misc

The DQM time series and distribution charts were static SVG with no way
to read exact values, and the time series joined every window length
into one line.

- Time series: plot one window length at a time (the one picked in
  View, or daily when View is the baseline) and keep the baseline row
  off the line.
- Time series and distribution: hover shows exact values, drag to zoom,
  zoom in/out/reset buttons, and sideways scrolling through all the data
  while zoomed in.
- Distribution: leave room above the plot so the top axis label is not
  cut off.

Signed-off-by: Chaitany Patel <[email protected]>
@patelchaitany
patelchaitany requested a review from a team as a code owner October 29, 2026 18:51
@codecov-commenter

codecov-commenter commented Oct 29, 2026 •

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 50.99%. Comparing base (1e5e90c) to head (ee797ac).
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #7090      +/-   ##
==========================================
+ Coverage   50.97%   50.99%   +0.01%     
==========================================
  Files         455      455              
  Lines       56994    56994              
  Branches     8321     8321              
==========================================
+ Hits        29055    29063       +8     
+ Misses      25954    25946       -8     
  Partials     1985     1985              
Flag Coverage Δ
go-feature-server 30.58% <ø> (+0.20%) ⬆️
python-unit 52.45% <ø> (ø)
see 1 file with indirect coverage changes

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1e5e90c...ee797ac. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants