chore(Operations): fix plan timeline [YTFRONT-4695]

ytsaurus · Mar 7, 2025 · 561274a · 561274a
1 parent b87d696
commit 561274a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/ui/src/ui/pages/query-tracker/Plan/Timeline/Timeline.tsx b/packages/ui/src/ui/pages/query-tracker/Plan/Timeline/Timeline.tsx
@@ -23,7 +23,7 @@ import {
 
 import {EventGroup, Timeline} from './TimelineCanvas';
 import {RowType, TimelineTable} from './TimelineTable';
-import {MIN_RANGE, OperationColorsType, parseGraph, useTimelineInterval} from './utils';
+import {OperationColorsType, parseGraph, useTimelineInterval} from './utils';
 
 import './Timeline.scss';
 
@@ -280,7 +280,8 @@ function TimelineWithSidebar({graph, prepareNode}: TimelineWithSidebarProps) {
                                 hasPicker={false}
                                 hasDatePicker={false}
                                 hasRulerNowButton={false}
-                                minRange={MIN_RANGE}
+                                minRange={timelineStart}
+                                maxRange={timelineEnd}
                             />
                         </div>
                         {Boolean(timelineAxes.length) && (
@@ -292,6 +293,9 @@ function TimelineWithSidebar({graph, prepareNode}: TimelineWithSidebarProps) {
                                 end={timelineEnd}
                                 boundsChanged={handleBoundsChanged}
                                 axes={timelineAxes}
+                                axesOptions={{
+                                    topPadding: yaTimelineConfig.TRACK_HEIGHT / 2,
+                                }}
                                 events={events}
                                 theme={theme}
                             />

diff --git a/packages/ui/src/ui/pages/query-tracker/Plan/Timeline/TimelineCanvas.tsx b/packages/ui/src/ui/pages/query-tracker/Plan/Timeline/TimelineCanvas.tsx
@@ -19,12 +19,16 @@ import {YEAR} from '../../../../packages/ya-timeline/definitions';
 import {getCSSPropertyValue} from '../styles';
 
 import {OperationRenderer} from './OperationRenderer';
+import {HoverEvent, LeftEvent} from '../../../../packages/ya-timeline/components/Events';
+import {AxesOptions} from '../../../../packages/ya-timeline/components/Axes';
 
 export type EventGroup = TimelineEvent & {
     eventsCount: number;
 };
 
 export class TimelineCanvas extends YaTimeline {
+    private axesOptions: AxesOptions = {};
+
     set events(value: EventGroup[]) {
         this.getComponent(BasicEventsProvider).then((component) => {
             component?.setEvents(value);
@@ -57,7 +61,7 @@ export class TimelineCanvas extends YaTimeline {
         events.registerRenderer('operation', new OperationRenderer());
         return [
             new Grid(this),
-            new Axes(this),
+            new Axes(this, this.axesOptions),
             events,
             new AreaSelectionComponent(this),
             new BasicEventsProvider<EventGroup>(this),
@@ -80,19 +84,22 @@ export class TimelineCanvas extends YaTimeline {
 
 customElements.define('my-timeline-canvas', TimelineCanvas);
 
-interface TimelineProps {
+interface TimelineProps<T extends TimelineEvent> {
     start: number;
     end: number;
     canvasScrollTop?: number;
     isZoomAllowed?: boolean;
     scrollTopChanged?: (event: ScrollTopChangedEvent) => void;
     boundsChanged?: (event: BoundsChangedEvent) => void;
-    eventsSelected?: (event: EventsSelectedEvent<TimelineEvent>) => void;
+    eventsSelected?: (event: EventsSelectedEvent<T>) => void;
+    hoverEvent?: (event: HoverEvent<T>) => void;
+    leftEvent?: (event: LeftEvent<T>) => void;
 
     axes: TimelineAxis[];
+    axesOptions?: AxesOptions;
     markers?: TimelineMarker[];
     events?: EventGroup[];
     theme: string;
 }
 
-export const Timeline = wrapWc<TimelineProps>('my-timeline-canvas');
+export const Timeline = wrapWc<TimelineProps<any>>('my-timeline-canvas');