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 15885be68a39151a031565dfb6603c2e8a0cb5cc Author: Vadim Ogievetsky <[email protected]> AuthorDate: Thu Oct 31 09:36:25 2024 -0700 cleaner normalization --- .../src/components/segment-timeline/common.ts | 10 +------ .../segment-timeline/segment-bar-chart-render.tsx | 34 ++++++++++++++-------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/web-console/src/components/segment-timeline/common.ts b/web-console/src/components/segment-timeline/common.ts index 966ade312ff..efd2a0b1b45 100644 --- a/web-console/src/components/segment-timeline/common.ts +++ b/web-console/src/components/segment-timeline/common.ts @@ -41,17 +41,9 @@ export interface IntervalRow extends Record<IntervalStat, number> { export interface TrimmedIntervalRow extends IntervalRow { shownSeconds: number; + normalized: Record<IntervalStat, number>; } export interface IntervalBar extends TrimmedIntervalRow { offset: Record<IntervalStat, number>; } - -export function normalizeIntervalRow(sr: TrimmedIntervalRow): TrimmedIntervalRow { - return { - ...sr, - segments: sr.segments / sr.shownSeconds, - size: sr.size / sr.shownSeconds, - rows: sr.rows / sr.shownSeconds, - }; -} diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx index 72fff4e891c..485bbe4afdb 100644 --- a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx +++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx @@ -43,7 +43,7 @@ import type { Margin, Stage } from '../../utils/stage'; import { ChartAxis } from './chart-axis'; import type { IntervalBar, IntervalRow, IntervalStat, TrimmedIntervalRow } from './common'; -import { aggregateSegmentStats, normalizeIntervalRow } from './common'; +import { aggregateSegmentStats } from './common'; import './segment-bar-chart-render.scss'; @@ -103,14 +103,16 @@ function stackIntervalRows(trimmedIntervalRows: TrimmedIntervalRow[]): IntervalB const intervalTree = new IntervalTree(); return sortedIntervalRows.map(intervalRow => { - intervalRow = normalizeIntervalRow(intervalRow); const startMs = intervalRow.start.valueOf(); const endMs = intervalRow.end.valueOf(); - const intervalRowsBelow = intervalTree.search([startMs + 1, startMs + 2]) as IntervalRow[]; + const intervalRowsBelow = intervalTree.search([ + startMs + 1, + startMs + 2, + ]) as TrimmedIntervalRow[]; intervalTree.insert([startMs, endMs], intervalRow); return { ...intervalRow, - offset: aggregateSegmentStats(intervalRowsBelow), + offset: aggregateSegmentStats(intervalRowsBelow.map(i => i.normalized)), }; }); } @@ -156,18 +158,22 @@ export const SegmentBarChartRender = function SegmentBarChartRender( ).toString(); }, [expandedDateRange, stage.width]); - console.log(trimGranularity); - const intervalBars = useMemo(() => { const trimDuration = new Duration(trimGranularity); const trimmedIntervalRows = intervalRows.map(intervalRow => { const start = trimDuration.floor(intervalRow.start, TZ_UTC); const end = trimDuration.ceil(intervalRow.end, TZ_UTC); + const shownSeconds = (end.valueOf() - start.valueOf()) / 1000; return { ...intervalRow, start, end, shownSeconds: (end.valueOf() - start.valueOf()) / 1000, + normalized: { + segments: intervalRow.segments / shownSeconds, + size: intervalRow.size / shownSeconds, + rows: intervalRow.rows / shownSeconds, + }, }; }); @@ -185,6 +191,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender( return { ...firstIntervalRow, ...aggregateSegmentStats(trimmedIntervalRows), + normalized: aggregateSegmentStats(trimmedIntervalRows.map(t => t.normalized)), }; }, ); @@ -202,10 +209,13 @@ export const SegmentBarChartRender = function SegmentBarChartRender( ? baseTimeScale.copy().domain(offsetDateRange(expandedDateRange, shiftOffset)) : baseTimeScale; - const maxStat = max(intervalBars, d => d[shownIntervalStat] + d.offset[shownIntervalStat]); + const maxNormalizedStat = max( + intervalBars, + d => d.normalized[shownIntervalStat] + d.offset[shownIntervalStat], + ); const statScale = scaleLinear() .rangeRound([innerStage.height, 0]) - .domain([0, maxStat ?? 1]); + .domain([0, maxNormalizedStat ?? 1]); const formatTick = (n: number) => { switch (shownIntervalStat) { @@ -289,7 +299,9 @@ export const SegmentBarChartRender = function SegmentBarChartRender( const xStart = clamp(timeScale(intervalBar.start), 0, innerStage.width); const xEnd = clamp(timeScale(intervalBar.end), 0, innerStage.width); const y0 = statScale(intervalBar.offset[shownIntervalStat]); - const y = statScale(intervalBar[shownIntervalStat] + intervalBar.offset[shownIntervalStat]); + const y = statScale( + intervalBar.normalized[shownIntervalStat] + intervalBar.offset[shownIntervalStat], + ); return { x: xStart, @@ -407,9 +419,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender( <div>Datasource: {hoverOn.datasource}</div> <div>{`Time: ${prettyFormatIsoDate(hoverOn.start)}/${hoverOn.originalTimeSpan}`}</div> <div> - {`${capitalizeFirst(shownIntervalStat)}: ${formatTick( - hoverOn[shownIntervalStat] * hoverOn.shownSeconds, - )}`} + {`${capitalizeFirst(shownIntervalStat)}: ${formatTick(hoverOn[shownIntervalStat])}`} </div> </div> ) : undefined} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
