GeezerVison is showing github.com — feat: Add zoom, scroll and hover values to the monitoring charts by patelchaitany · Pull Request #7090 · feast-dev/feast
feat: Add zoom, scroll and hover values to the monitoring charts
#7090
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement . We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
Uh oh!
There was an error while loading. Please reload this page.
Show file tree
Hide file tree
Changes from all commits
Commits
File filter
Filter by extension
.tsx
(5)
All 1 file type selected
Viewed files
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Hide whitespace
Diff view
Hide whitespace
There are no files selected for viewing
Original file line number
Diff line number
Diff line change
@@ -0,0 +1,142 @@
import React from "react";
import { EuiProvider } from "@elastic/eui";
import { QueryClient, QueryClientProvider } from "react-query";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { http, HttpResponse } from "msw";
import { setupServer } from "msw/node";
import { fireEvent, render, screen } from "@testing-library/react";
import DataModeContext from "../../contexts/DataModeContext";
import FeatureMetricsDetail from "./FeatureMetricsDetail";
import type { FeatureMetric } from "../../queries/useMonitoringApi";
const row = (
metric_date: string,
granularity: string,
mean: number,
): FeatureMetric => ({
project_id: "demo",
feature_view_name: "driver_stats",
feature_name: "conv_rate",
metric_date,
granularity,
data_source_type: "batch",
computed_at: "2026-10-31T00:00:00Z",
max_event_timestamp: null,
is_baseline: granularity === "baseline",
feature_type: "numeric",
row_count: 100,
null_count: 0,
null_rate: 0,
mean,
stddev: 0.1,
min_val: 0,
max_val: 1,
p50: 0.5,
p75: null,
p90: null,
p95: 0.9,
p99: null,
histogram: null,
});
const histogram = {
bins: [0, 0.1, 0.2, 0.3, 0.4],
counts: [60, 30, 10, 4, 1],
bin_width: 0.1,
};
const daily = Array.from({ length: 30 }, (_, i) =>
row(`2026-10-${String(i + 1).padStart(2, "0")}`, "daily", (i + 1) / 100),
);
// The newest daily window is the one the page shows.
daily[29] = { ...daily[29], histogram };
const monthly = row("2026-09-01", "monthly", 0.3);
const baseline: FeatureMetric = {
...row("2026-10-31", "baseline", 0.47),
histogram,
};
const server = setupServer(
http.get("/api/v1/monitoring/metrics/features", () =>
HttpResponse.json([...daily, monthly, baseline]),
),
http.get("/api/v1/monitoring/metrics/baseline", () =>
HttpResponse.json([baseline]),
),
);
beforeAll(() => server.listen());
afterAll(() => server.close());
test("monitoring charts show values on hover and zoom", async () => {
render(
<QueryClientProvider
client={
new QueryClient({ defaultOptions: { queries: { retry: false } } })
}
>
<DataModeContext.Provider value={{}}>
<EuiProvider>
<MemoryRouter
initialEntries={[
"/p/demo/monitoring/feature/driver_stats/conv_rate",
]}
>
<Routes>
<Route
path="/p/:projectName/monitoring/feature/:featureViewName/:featureName"
element={<FeatureMetricsDetail />}
/>
</Routes>
</MemoryRouter>
</EuiProvider>
</DataModeContext.Provider>
</QueryClientProvider>,
);
// Only daily windows: the monthly row (09-01) and the baseline (10-31)
// would stretch the range if they were plotted.
expect(
await screen.findByText(/Showing daily windows 2026-10-01 – 2026-10-30\./),
).toBeInTheDocument();
// Axis labels are calendar days, with no time-zone hour added.
expect(screen.getAllByText("10-01").length).toBeGreaterThan(0);
expect(screen.queryByText(/\d{2}-\d{2} \d{2}:\d{2}/)).toBeNull();
// Hovering a distribution bar shows its range and count. The compact
// chart puts 5 bars of 92 px from x 54, so x 340 is the fourth bar.
const histogram = screen.getByRole("img", { name: "Histogram" });
fireEvent.mouseMove(histogram, { clientX: 340 });
const tooltip = screen.getByRole("tooltip");
expect(tooltip).toHaveTextContent("0.30 – 0.40");
expect(tooltip).toHaveTextContent("Count4");
fireEvent.mouseLeave(histogram);
// Drag across the left half of the plot (x 60 to 450 of 780 wide).
const [drift] = screen.getAllByTestId("time-series-chart");
fireEvent.mouseDown(drift, { clientX: 60, button: 0 });
fireEvent.mouseMove(drift, { clientX: 450 });
fireEvent.mouseUp(drift, { clientX: 450 });
expect(
screen.getByText(/Showing daily windows 2026-10-01 – 2026-10-15\./),
).toBeInTheDocument();
// Hovering the first point shows its date and mean.
fireEvent.mouseMove(drift, { clientX: 60 });
expect(screen.getByText("2026-10-01")).toBeInTheDocument();
expect(screen.getByText("0.01")).toBeInTheDocument();
// Zoomed in, scrolling sideways moves through the rest of the data.
// 780 px is one plot width, so the window moves on by its own length.
const [scroller] = screen.getAllByTestId("time-series-scroll");
scroller.scrollLeft = 780;
fireEvent.scroll(scroller);
expect(
screen.getByText(/Showing daily windows 2026-10-15 – 2026-10-30\./),
).toBeInTheDocument();
fireEvent.doubleClick(drift);
expect(
screen.getByText(/Showing daily windows 2026-10-01 – 2026-10-30\./),
).toBeInTheDocument();
});
Original file line number
Diff line number
Diff line change
Expand Up
@@ -41,6 +41,16 @@ const GRANULARITY_LABELS: Record<string, string> = {
[BASELINE_KEY]: "Baseline",
};
// Window lengths the time series can plot, shortest first. The baseline
// covers all data at once, so it is never a point on the line.
const SERIES_GRANULARITIES = [
"daily",
"weekly",
"biweekly",
"monthly",
"quarterly",
];
const FeatureMetricsDetail = () => {
const { projectName, featureViewName, featureName } = useParams();
const navigate = useNavigate();
Expand Down
Expand Up
@@ -119,6 +129,22 @@ const FeatureMetricsDetail = () => {
return matching.reduce((a, b) => (a.metric_date > b.metric_date ? a : b));
}, [metrics, effectiveGranularity, baselineMetric]);
// Plot one window length at a time: the one picked in View, or the
// shortest one with data when View is the baseline.
const seriesGranularity =
SERIES_GRANULARITIES.includes(effectiveGranularity) &&
availableGranularities.includes(effectiveGranularity)
? effectiveGranularity
: SERIES_GRANULARITIES.find((g) => availableGranularities.includes(g));
const seriesMetrics = useMemo(
() =>
(metrics ?? []).filter(
(m) => !isBaselineMetricRow(m) && m.granularity === seriesGranularity,
),
[metrics, seriesGranularity],
);
const breadcrumbs = [
{
text: "Monitoring",
Expand Down
Expand Up
@@ -248,41 +274,19 @@ const FeatureMetricsDetail = () => {
</EuiFlexItem>
</EuiFlexGroup>
{metrics && effectiveGranularity !== BASELINE_KEY && (
<TimeSeriesSection
metrics={metrics}
granularity={effectiveGranularity}
featureType={activeMetric.feature_type}
/>
{seriesGranularity && seriesMetrics.length > 0 && (
<>
<EuiSpacer size="xl" />
<TimeSeriesAnalysis
metrics={seriesMetrics}
featureType={activeMetric.feature_type}
granularityLabel={GRANULARITY_LABELS[seriesGranularity]}
/>
</>
)}
</EuiPageTemplate.Section>
</EuiPageTemplate>
);
};
/**
* One window length at a time: plotting every granularity (and the baseline)
* by metric_date mixes spans, so the "drift" line has no meaning (#7054).
*/
const TimeSeriesSection = ({
metrics,
granularity,
featureType,
}: {
metrics: NonNullable<ReturnType<typeof useFeatureMetrics>["data"]>;
granularity: string;
featureType: string;
}) => {
const windowRows = metrics.filter(
(m) => !isBaselineMetricRow(m) && m.granularity === granularity,
);
if (windowRows.length === 0) return null;
return (
<>
<EuiSpacer size="xl" />
<TimeSeriesAnalysis metrics={windowRows} featureType={featureType} />
</>
);
};
export default FeatureMetricsDetail;
Loading
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Loading
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.