From 561274af914dde55be52e0d8a6f7bd8b316f912d Mon Sep 17 00:00:00 2001
From: simbiozizv <simbiozizv@yandex-team.ru>
Date: Thu, 6 Mar 2025 14:15:08 +0300
Subject: [PATCH] chore(Operations): fix plan timeline [YTFRONT-4695]

---
 .../query-tracker/Plan/Timeline/Timeline.tsx      |  8 ++++++--
 .../Plan/Timeline/TimelineCanvas.tsx              | 15 +++++++++++----
 2 files changed, 17 insertions(+), 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
index 350f53272..daefe61ab 100644
--- 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
index a58c2f0b4..0a83411d9 100644
--- 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');