This is an automated email from the ASF dual-hosted git repository. vogievetsky pushed a commit to branch segment_timeline2 in repository https://gitbox.apache.org/repos/asf/druid.git
commit 9c5875555e8f68d436f6a5d84ea31c3f46b71ec4 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Thu Nov 7 09:23:01 2024 -0800 fix zooming --- .../segment-timeline/segment-timeline.tsx | 48 +++++++++++----------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 4446d7fff99..fd07f9cdf15 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -167,45 +167,45 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr initDatasourceDateRangeState.data || (initDatasourceDateRangeState.isLoading() ? undefined : defaultDateRange); + let previousDateRange: NonNullDateRange | undefined; + let zoomedOutDateRange: NonNullDateRange | undefined; + let nextDateRange: NonNullDateRange | undefined; + if (effectiveDateRange) { + const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], TZ_UTC); + const shiftStartBack = d.shift(effectiveDateRange[0], TZ_UTC, -1); + const shiftEndForward = d.shift(effectiveDateRange[1], TZ_UTC); + const now = day.ceil(new Date(), TZ_UTC); + previousDateRange = [shiftStartBack, effectiveDateRange[0]]; + zoomedOutDateRange = [shiftStartBack, shiftEndForward < now ? shiftEndForward : now]; + nextDateRange = [effectiveDateRange[1], shiftEndForward]; + } + return ( <div className="segment-timeline"> <div className="control-bar"> <ButtonGroup> <Button icon={IconNames.CARET_LEFT} - data-tooltip="Previous time period" + data-tooltip={ + previousDateRange && `Previous time period\n${formatDateRange(previousDateRange)}` + } small - disabled={!effectiveDateRange} - onClick={() => { - if (!effectiveDateRange) return; - const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], TZ_UTC); - setDateRange([d.shift(effectiveDateRange[0], TZ_UTC, -1), effectiveDateRange[0]]); - }} + disabled={!previousDateRange} + onClick={() => setDateRange(previousDateRange)} /> <Button icon={IconNames.ZOOM_OUT} - data-tooltip="Zoom out" + data-tooltip={zoomedOutDateRange && `Zoom out\n${formatDateRange(zoomedOutDateRange)}`} small - disabled={!effectiveDateRange} - onClick={e => { - if (!effectiveDateRange) return; - const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], TZ_UTC); - setDateRange([ - d.shift(effectiveDateRange[0], TZ_UTC, -1), - e.altKey ? d.shift(effectiveDateRange[1], TZ_UTC, 1) : effectiveDateRange[1], - ]); - }} + disabled={!zoomedOutDateRange} + onClick={() => setDateRange(zoomedOutDateRange)} /> <Button icon={IconNames.CARET_RIGHT} - data-tooltip="Next time period" + data-tooltip={nextDateRange && `Next time period\n${formatDateRange(nextDateRange)}`} small - disabled={!effectiveDateRange} - onClick={() => { - if (!effectiveDateRange) return; - const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], TZ_UTC); - setDateRange([effectiveDateRange[1], d.shift(effectiveDateRange[1], TZ_UTC, 1)]); - }} + disabled={!nextDateRange} + onClick={() => setDateRange(nextDateRange)} /> </ButtonGroup> <ButtonGroup> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
