Add granularity (step) selector to override query step#773
Merged
thinkingfish merged 3 commits intomainfrom Apr 14, 2026
Merged
Add granularity (step) selector to override query step#773thinkingfish merged 3 commits intomainfrom
thinkingfish merged 3 commits intomainfrom
Conversation
thinkingfish
force-pushed
the
claude/chart-scaling-tool-YdArW
branch
from
a9ce8ca to
6eeb249
Compare
thinkingfish
force-pushed
the
claude/chart-scaling-tool-YdArW
branch
from
6eeb249 to
ba45125
Compare
Add a Step dropdown to the TopNav bar that lets users override the auto-calculated PromQL query step, enabling coarser time aggregation (e.g. 1s, 15s, 1m, 15m) across all charts. Changing the granularity invalidates cached data and re-fetches all sections at the new resolution. Works in both the server-based viewer and the WASM site viewer. https://claude.ai/code/session_01Dd3LpTREvfoscZdtSjqLc4
Rewrite PromQL queries when a coarser step is selected so values are properly smoothed over the wider window: - Counter: irate(m[5m]) → rate(m[Ns]) for true windowed average - Gauge: wrap simple selectors with avg_over_time(m[Ns]) - Histogram: pass stride to histogram_percentiles / histogram_heatmap Fix insertGapNulls breaking chart lines at step-aligned intervals by using the step override as the effective gap detection interval. Remove frontend downsampler (backend VectorSelector now respects step). Tighten responsive topnav layout: reduce row gap, right-align granularity selector and theme toggle on narrow viewports, remove asymmetric time-range-bar margin. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
thinkingfish
force-pushed
the
claude/chart-scaling-tool-YdArW
branch
from
7d9b326 to
61d9593
Compare
Remove avg_over_time rewrite for gauge queries — gauges are instantaneous values that don't need windowed aggregation. Also add 5s option to the granularity step selector. Bump metriken-query and update README. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Problem
When querying time-series data, the viewer automatically calculates an appropriate query step based on the time window duration. However, users may want to override this auto-calculated step to get finer or coarser granularity in their results for better analysis or performance tuning.
Solution
Added a granularity selector control that allows users to override the auto-calculated query step:
New UI Component (
GranularitySelector): A dropdown control in the top navigation bar that lets users select from predefined step options (Auto, 1s, 15s, 1m, 15m) or use the auto-calculated value.Step Override Mechanism (
data.js): IntroducedsetStepOverride()andgetStepOverride()functions to manage the user-selected step value. When a step override is set, it takes precedence over the auto-calculated step in range queries.State Management (
script.js): AddedcurrentGranularitystate andchangeGranularity()handler that:Styling (
style.css): Added CSS classes for the granularity selector with proper styling, hover/focus states, and responsive adjustments for mobile views.Integration: Connected the granularity selector to the top navigation bar, making it visible only when time range data is available and hiding it on system info and report pages.
Result
Users can now manually adjust the query step granularity via a dropdown selector in the top navigation bar. This provides more control over the data resolution and can help with performance optimization or detailed analysis of specific time ranges. The selector is only shown when appropriate (time-range queries) and integrates seamlessly with the existing viewer interface.
https://claude.ai/code/session_01Dd3LpTREvfoscZdtSjqLc4