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 cac4f78be4004adba878875bb888b100ce9f97f6 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Mon Nov 4 19:33:09 2024 -0800 good fixes --- .../src/components/segment-timeline/common.ts | 15 ++++++++++ .../segment-timeline/segment-bar-chart-render.tsx | 33 +++++++++------------- web-console/src/entry.scss | 1 + 3 files changed, 30 insertions(+), 19 deletions(-) diff --git a/web-console/src/components/segment-timeline/common.ts b/web-console/src/components/segment-timeline/common.ts index 69a1d20c457..c808161ce17 100644 --- a/web-console/src/components/segment-timeline/common.ts +++ b/web-console/src/components/segment-timeline/common.ts @@ -19,6 +19,7 @@ import { sum } from 'd3-array'; import type { Duration } from '../../utils'; +import { formatBytes, formatInteger } from '../../utils'; export type IntervalStat = 'segments' | 'size' | 'rows'; @@ -50,6 +51,20 @@ export function aggregateSegmentStats( }; } +export function formatIntervalStat(stat: IntervalStat, n: number) { + switch (stat) { + case 'segments': + case 'rows': + return formatInteger(n); + + case 'size': + return formatBytes(n); + + default: + return ''; + } +} + export interface IntervalRow extends Record<IntervalStat, number> { start: Date; end: Date; 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 dbf8302d109..adfb5657309 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 @@ -34,7 +34,6 @@ import { Duration, filterMap, formatBytes, - formatInteger, formatNumber, groupBy, month, @@ -46,12 +45,12 @@ import type { Margin, Stage } from '../../utils/stage'; import { Bubble } from './bubble'; import { ChartAxis } from './chart-axis'; import type { IntervalBar, IntervalRow, IntervalStat, TrimmedIntervalRow } from './common'; -import { aggregateSegmentStats } from './common'; +import { aggregateSegmentStats, formatIntervalStat, INTERVAL_STATS } from './common'; import './segment-bar-chart-render.scss'; const CHART_MARGIN: Margin = { top: 10, right: 0, bottom: 25, left: 70 }; -const MIN_BAR_WIDTH = 2; +const MIN_BAR_WIDTH = 3; const POSSIBLE_GRANULARITIES = [ new Duration('PT15M'), new Duration('PT1H'), @@ -196,17 +195,6 @@ export const SegmentBarChartRender = function SegmentBarChartRender( .rangeRound([innerStage.height, 0]) .domain([0, maxNormalizedStat ?? 1]); - const formatTick = (n: number) => { - switch (shownIntervalStat) { - case 'segments': - case 'rows': - return formatInteger(n); - - case 'size': - return formatBytes(n); - } - }; - const formatTickRate = (n: number) => { switch (shownIntervalStat) { case 'segments': @@ -301,6 +289,13 @@ export const SegmentBarChartRender = function SegmentBarChartRender( } }); + useGlobalEventListener('keydown', (e: KeyboardEvent) => { + if (e.key === 'Escape' && mouseDownAt) { + setMouseDownAt(undefined); + setDragging(undefined); + } + }); + function startEndToXWidth({ start, end }: { start: Date; end: Date }) { const xStart = clamp(timeScale(start), 0, innerStage.width); const xEnd = clamp(timeScale(end), 0, innerStage.width); @@ -343,11 +338,11 @@ export const SegmentBarChartRender = function SegmentBarChartRender( <div>{`Time: ${prettyFormatIsoDate(hoveredIntervalBar.start)}/${ hoveredIntervalBar.originalTimeSpan }`}</div> - <div> - {`${capitalizeFirst(shownIntervalStat)}: ${formatTick( - hoveredIntervalBar[shownIntervalStat], - )}`} - </div> + {INTERVAL_STATS.map(stat => ( + <div key={stat}> + {`${capitalizeFirst(stat)}: ${formatIntervalStat(stat, hoveredIntervalBar[stat])}`} + </div> + ))} </> ), }; diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss index 8d368a4146b..46ea9d298d0 100644 --- a/web-console/src/entry.scss +++ b/web-console/src/entry.scss @@ -56,6 +56,7 @@ body { position: absolute; height: 100%; width: 100%; + z-index: 0; .console-application { position: absolute; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
