Improves graph hover stability

Author: eamodio

src/plus/webviews/graph/graphWebview.ts

@@ -917,7 +917,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 	private async onHoverRowRequest<T extends typeof GetRowHoverRequest>(requestType: T, msg: IpcCallMessageType<T>) {
 		const hover: DidGetRowHoverParams = {
 			id: msg.params.id,
-			markdown: undefined,
+			cancelled: true,
 		};
 
 		if (this._hoverCancellation != null) {
@@ -965,9 +965,9 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 						});
 					}
 
-					markdown = this.getCommitTooltip(commit, cancellation.token).catch(() => {
+					markdown = this.getCommitTooltip(commit, cancellation.token).catch((ex: unknown) => {
 						this._hoverCache.delete(id);
-						return undefined;
+						throw ex;
 					});
 					if (cache) {
 						this._hoverCache.set(id, markdown);
@@ -976,7 +976,10 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			}
 
 			if (markdown != null) {
-				hover.markdown = await markdown;
+				try {
+					hover.markdown = await markdown;
+					hover.cancelled = false;
+				} catch {}
 			}
 		}
 

src/plus/webviews/graph/protocol.ts

@@ -314,10 +314,13 @@ export type GetRowHoverParams = {
 	type: GitGraphRowType;
 	id: string;
 };
+
 export interface DidGetRowHoverParams {
 	id: string;
 	markdown?: string;
+	cancelled: boolean;
 }
+
 export const GetRowHoverRequest = new IpcRequest<GetRowHoverParams, DidGetRowHoverParams>(scope, 'row/hover/get');
 
 export interface SearchParams {

src/webviews/apps/plus/graph/hover/graphHover.ts

@@ -78,10 +78,15 @@ export class GlGraphHover extends GlElement {
 		this.hoverMarkdownCache.clear();
 	}
 
-	onRowHovered(row: GraphRow, anchor: Anchor) {
-		console.log('onRowHovered', row.sha);
+	onParentMouseLeave = () => {
+		this.hide();
+	};
 
+	onRowHovered(row: GraphRow, anchor: Anchor) {
+		clearTimeout(this.unhoverTimer);
 		if (this.requestMarkdown == null) return;
+		// Break if we are already showing the hover for thesame row
+		if (this.hoveredSha === row.sha && this.open) return;
 
 		this.hoveredSha = row.sha;
 
@@ -98,19 +103,20 @@ export class GlGraphHover extends GlElement {
 				}
 
 				this.hoverMarkdownCache.delete(row.sha);
+				if (params?.cancelled) throw new Error('Cancelled');
+
 				return '';
 			});
 
 			if (cache) {
 				this.hoverMarkdownCache.set(row.sha, markdown);
 			}
 		}
+
 		this.showCore(anchor, markdown);
 	}
 
 	onRowUnhovered(row: GraphRow, relatedTarget: EventTarget | null) {
-		console.log('onRowUnhovered', row.sha);
-
 		clearTimeout(this.unhoverTimer);
 
 		if (
@@ -121,35 +127,37 @@ export class GlGraphHover extends GlElement {
 			return;
 		}
 
-		this.hoveredSha = undefined;
-
-		this.unhoverTimer = setTimeout(() => {
-			console.log('onRowUnhovered timeout', this.hoveredSha);
-			if (this.hoveredSha == null) {
-				this.hide();
-			}
-		}, 100);
+		this.unhoverTimer = setTimeout(() => this.hide(), 250);
 	}
 
 	private showCore(
 		anchor: string | HTMLElement | { getBoundingClientRect: () => Omit<DOMRect, 'toJSON'> },
 		markdown: Promise<string | undefined> | string | undefined,
 	) {
 		if (isPromise(markdown)) {
+			const previousSha = this.hoveredSha;
 			void markdown.then(markdown => {
+				if (previousSha !== this.hoveredSha) return;
+
 				this.markdown = markdown;
 				if (!markdown) {
-					this.open = false;
+					this.hide();
 				}
 			});
 		}
 
 		this.anchor = anchor;
 		this.markdown = markdown;
 		this.open = true;
+		this.parentElement?.addEventListener('mouseleave', this.onParentMouseLeave);
 	}
 
 	hide() {
+		clearTimeout(this.unhoverTimer);
+		this.parentElement?.removeEventListener('mouseleave', this.onParentMouseLeave);
+
+		this.hoveredSha = undefined;
+		this.markdown = undefined;
 		this.open = false;
 	}
 }