Improves Graph render performance

 - Only sends changed props to react
 - Limits work on selection

Author: eamodio

docs/telemetry-events.md

@@ -909,7 +909,7 @@ or
 
 ### graph/row/hovered
 
-> Sent when the user hovers over a row on the Commit Graph
+> Sent when the user hovers over a row on the Commit Graph (first time and every 100 times after)
 
 ```typescript
 {
@@ -921,13 +921,14 @@ or
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,
-  'context.webview.type': string
+  'context.webview.type': string,
+  'count': number
 }
 ```
 
 ### graph/row/selected
 
-> Sent when the user selects (clicks on) a row or rows on the Commit Graph
+> Sent when the user selects (clicks on) a row or rows on the Commit Graph (first time and every 100 times after)
 
 ```typescript
 {
@@ -940,6 +941,7 @@ or
   'context.webview.id': string,
   'context.webview.instanceId': string,
   'context.webview.type': string,
+  'count': number,
   'rows': number
 }
 ```

src/constants.telemetry.ts

@@ -135,9 +135,9 @@ export interface TelemetryEvents extends WebviewShowAbortedEvents, WebviewShownE
 	/** Sent when the user changes the current repository on the Commit Graph */
 	'graph/repository/changed': GraphRepositoryChangedEvent;
 
-	/** Sent when the user hovers over a row on the Commit Graph */
-	'graph/row/hovered': GraphContextEventData;
-	/** Sent when the user selects (clicks on) a row or rows on the Commit Graph */
+	/** Sent when the user hovers over a row on the Commit Graph (first time and every 100 times after) */
+	'graph/row/hovered': GraphRowHoveredEvent;
+	/** Sent when the user selects (clicks on) a row or rows on the Commit Graph (first time and every 100 times after) */
 	'graph/row/selected': GraphRowSelectedEvent;
 	/** Sent when rows are loaded into the Commit Graph */
 	'graph/rows/loaded': GraphRowsLoadedEvent;
@@ -545,8 +545,13 @@ interface GraphFiltersChangedEvent extends GraphContextEventData {
 
 interface GraphRepositoryChangedEvent extends RepositoryEventData, GraphContextEventData {}
 
+interface GraphRowHoveredEvent extends GraphContextEventData {
+	count: number;
+}
+
 interface GraphRowSelectedEvent extends GraphContextEventData {
 	rows: number;
+	count: number;
 }
 
 interface GraphRowsLoadedEvent extends GraphContextEventData {

src/webviews/apps/plus/graph/graph-app.ts

@@ -1,20 +1,30 @@
+import type { GraphRow } from '@gitkraken/gitkraken-components';
+import { refZone } from '@gitkraken/gitkraken-components';
 import { consume } from '@lit/context';
 import { SignalWatcher } from '@lit-labs/signals';
 import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import type { GitGraphRowType } from '../../../../git/models/graph';
+import { getScopedCounter } from '../../../../system/counter';
+import { GetRowHoverRequest } from '../../../plus/graph/protocol';
 import type { CustomEventType } from '../../shared/components/element';
+import { ipcContext } from '../../shared/contexts/ipc';
+import type { TelemetryContext } from '../../shared/contexts/telemetry';
+import { telemetryContext } from '../../shared/contexts/telemetry';
 import { emitTelemetrySentEvent } from '../../shared/telemetry';
 import { stateContext } from './context';
 import type { GlGraphWrapper } from './graph-wrapper/graph-wrapper';
+import type { GlGraphHover } from './hover/graphHover';
 import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
 import type { GlGraphMinimapContainer } from './minimap/minimap-container';
 import { graphStateContext } from './stateProvider';
-import './minimap/minimap-container';
+import './gate';
+import './graph-header';
 import './graph-wrapper/graph-wrapper';
+import './hover/graphHover';
+import './minimap/minimap-container';
 import './sidebar/sidebar';
-import './graph-header';
-import './gate';
 
 @customElement('gl-graph-app-wc')
 export class GraphAppWC extends SignalWatcher(LitElement) {
@@ -28,20 +38,28 @@ export class GraphAppWC extends SignalWatcher(LitElement) {
 	@consume({ context: graphStateContext, subscribe: true })
 	graphApp!: typeof graphStateContext.__context__;
 
-	@query('gl-graph-minimap-container')
-	minimapEl: GlGraphMinimapContainer | undefined;
+	@consume({ context: ipcContext })
+	private readonly _ipc!: typeof ipcContext.__context__;
+
+	@consume({ context: telemetryContext as any })
+	private readonly _telemetry!: TelemetryContext;
 
 	@query('gl-graph-wrapper')
-	graphWrapper!: GlGraphWrapper;
+	graph!: GlGraphWrapper;
+
+	@query('gl-graph-hover#commit-hover')
+	private readonly graphHover!: GlGraphHover;
+
+	@query('gl-graph-minimap-container')
+	minimapEl: GlGraphMinimapContainer | undefined;
 
 	private handleHeaderSearchNavigation(e: CustomEventType<'gl-select-commits'>) {
-		this.graphWrapper.selectCommits([e.detail], false, true);
+		this.graph.selectCommits([e.detail], false, true);
 	}
 
 	private handleMinimapDaySelected(e: CustomEvent<GraphMinimapDaySelectedEventDetail>) {
-		if (!this.state.rows) {
-			return;
-		}
+		if (!this.state.rows) return;
+
 		let { sha } = e.detail;
 		if (sha == null) {
 			const date = e.detail.date?.getTime();
@@ -54,32 +72,99 @@ export class GraphAppWC extends SignalWatcher(LitElement) {
 			sha = closest.sha;
 		}
 
-		this.graphWrapper.selectCommits([sha], false, true);
+		this.graph.selectCommits([sha], false, true);
 
-		queueMicrotask(
-			() =>
-				e.target &&
-				emitTelemetrySentEvent<'graph/minimap/day/selected'>(e.target, {
+		if (e.target != null) {
+			const { target } = e;
+			queueMicrotask(() =>
+				emitTelemetrySentEvent<'graph/minimap/day/selected'>(target, {
 					name: 'graph/minimap/day/selected',
 					data: {},
 				}),
-		);
+			);
+		}
+	}
+
+	private handleGraphSelectionChanged(_e: CustomEventType<'gl-graph-change-selection'>) {
+		this.graphHover.hide();
+	}
+
+	private handleGraphVisibleDaysChanged({ detail }: CustomEventType<'gl-graph-change-visible-days'>) {
+		this.graphApp.visibleDays = detail;
+	}
+
+	private handleGraphRowContextMenu(_e: CustomEventType<'gl-graph-row-context-menu'>) {
+		this.graphHover.hide();
 	}
 
-	private handleGraphVisibleDaysChanged(e: CustomEventType<'gl-graph-change-visible-days'>) {
-		this.graphApp.visibleDays = e.detail;
+	private handleGraphRowHover({
+		detail: { graphZoneType, graphRow, clientX, currentTarget },
+	}: CustomEventType<'gl-graph-row-hover'>) {
+		if (graphZoneType === refZone) return;
+
+		const hover = this.graphHover;
+		if (hover == null) return;
+
+		const rect = currentTarget.getBoundingClientRect();
+		const x = clientX;
+		const y = rect.top;
+		const height = rect.height;
+		const width = 60; // Add some width, so `skidding` will be able to apply
+		const anchor = {
+			getBoundingClientRect: function () {
+				return {
+					width: width,
+					height: height,
+					x: x,
+					y: y,
+					top: y,
+					left: x,
+					right: x + width,
+					bottom: y + height,
+				};
+			},
+		};
+
+		hover.requestMarkdown ??= this.getRowHoverPromise.bind(this);
+		hover.onRowHovered(graphRow, anchor);
+
+		this.minimapEl?.select(graphRow.date, true);
 	}
 
-	private handleGraphRowHovered(e: CustomEventType<'gl-graph-hovered-row'>) {
-		this.minimapEl?.select(e.detail.graphRow.date, true);
+	private handleGraphRowUnhover({
+		detail: { graphZoneType, graphRow, relatedTarget },
+	}: CustomEventType<'gl-graph-row-unhover'>): void {
+		if (graphZoneType === refZone) return;
+
+		this.graphHover.onRowUnhovered(graphRow, relatedTarget);
+	}
+
+	private _hoverCounter = getScopedCounter();
+
+	private async getRowHoverPromise(row: GraphRow) {
+		try {
+			const request = await this._ipc.sendRequest(GetRowHoverRequest, {
+				type: row.type as GitGraphRowType,
+				id: row.sha,
+			});
+
+			const count = this._hoverCounter.next();
+			if (count === 1 || count % 100 === 0) {
+				queueMicrotask(() => this._telemetry.sendEvent({ name: 'graph/row/hovered', data: { count: count } }));
+			}
+
+			return request;
+		} catch (ex) {
+			return { id: row.sha, markdown: { status: 'rejected' as const, reason: ex } };
+		}
 	}
 
-	private handleGraphMouseLeaved() {
+	private handleGraphMouseLeave() {
 		this.minimapEl?.unselect(undefined, true);
 	}
 
 	resetHover() {
-		this.graphWrapper.resetHover();
+		this.graphHover.reset();
 	}
 
 	override render() {
@@ -105,19 +190,20 @@ export class GraphAppWC extends SignalWatcher(LitElement) {
 										.markerTypes=${this.state.config?.minimapMarkerTypes ?? []}
 										.refMetadata=${this.state.refsMetadata}
 										.searchResults=${this.graphApp.searchResults}
+										.visibleDays=${this.graphApp.visibleDays}
 										@gl-graph-minimap-selected=${this.handleMinimapDaySelected}
-										.visibleDays=${this.graphApp.visibleDays && {
-											top: this.graphApp.visibleDays.top,
-											bottom: this.graphApp.visibleDays.bottom,
-										}}
 									></gl-graph-minimap-container>
 								`,
 							)}
 							${when(this.state.config?.sidebar, () => html`<gl-graph-sidebar></gl-graph-sidebar>`)}
+							<gl-graph-hover id="commit-hover" distance=${0} skidding=${15}></gl-graph-hover>
 							<gl-graph-wrapper
+								@gl-graph-change-selection=${this.handleGraphSelectionChanged}
 								@gl-graph-change-visible-days=${this.handleGraphVisibleDaysChanged}
-								@gl-graph-hovered-row=${this.handleGraphRowHovered}
-								@gl-graph-mouse-leave=${this.handleGraphMouseLeaved}
+								@gl-graph-mouse-leave=${this.handleGraphMouseLeave}
+								@gl-graph-row-context-menu=${this.handleGraphRowContextMenu}
+								@gl-graph-row-hover=${this.handleGraphRowHover}
+								@gl-graph-row-unhover=${this.handleGraphRowUnhover}
 							></gl-graph-wrapper>
 						</div>
 						<!-- future: commit details -->