Improves timeline chart tooltip interactions

 - Shows tooltip when hovering over slider and footer SHA

Author: eamodio

src/webviews/apps/plus/timeline/components/chart.ts

@@ -220,13 +220,20 @@ export class GlTimelineChart extends GlElement {
 	}
 
 	private renderFooter() {
+		const sha = this._shaHovered ?? this._shaSelected;
+
 		return html`<footer>
 			<gl-chart-slider
 				.data=${this._dataReversed}
 				?shift=${this._shiftKeyPressed}
 				@gl-slider-change=${this.onSliderChanged}
+				@mouseover=${this.onSliderMouseOver}
+				@mouseout=${this.onSliderMouseOut}
 			></gl-chart-slider>
-			${renderCommitSha(this._shaHovered ?? this._shaSelected, 16)}${this.renderActions()}
+			<span @mouseover=${this.onFooterShaMouseOver} @mouseout=${this.onFooterShaMouseOut}
+				>${renderCommitSha(sha, 16)}</span
+			>
+			${this.renderActions()}
 		</footer>`;
 	}
 
@@ -295,6 +302,16 @@ export class GlTimelineChart extends GlElement {
 		this._shiftKeyPressed = e.shiftKey;
 	};
 
+	private onFooterShaMouseOver() {
+		if (!this._shaSelected) return;
+
+		this.showTooltip(this._data?.find(c => c.sha === this._shaSelected));
+	}
+
+	private onFooterShaMouseOut() {
+		this.hideTooltip();
+	}
+
 	private readonly onResize = (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => {
 		if (!this._chart) return;
 
@@ -325,14 +342,25 @@ export class GlTimelineChart extends GlElement {
 	private onSliderChanged(e: CustomEvent<SliderChangeEventDetail>) {
 		this.revealDate(e.detail.date, { focus: true, select: true });
 
-		const sha = this._commitsByTimestamp.get(e.detail.date.getTime())?.sha;
+		const commit = this._commitsByTimestamp.get(e.detail.date.getTime());
+		const sha = commit?.sha;
 		this._shaHovered = undefined;
 		this._shaSelected = sha;
 
+		this.showTooltip(commit);
+
 		if (sha == null) return;
 		this.emit('gl-commit-select', { id: sha, shift: e.detail.shift });
 	}
 
+	private onSliderMouseOver(_e: MouseEvent) {
+		this.showTooltip(this.slider?.value);
+	}
+
+	private onSliderMouseOut(_e: MouseEvent) {
+		this.hideTooltip();
+	}
+
 	private readonly onZoom = (domain: [Date, Date]) => {
 		this.zoomedRange = domain[0] <= this.range[0] && domain[1] >= this.range[1] ? undefined : domain;
 	};
@@ -415,6 +443,16 @@ export class GlTimelineChart extends GlElement {
 		}
 	}
 
+	private showTooltip(datum: TimelineDatum | undefined) {
+		if (datum == null) return;
+
+		this._chart?.tooltip.show({ x: new Date(datum.date) });
+	}
+
+	private hideTooltip() {
+		this._chart?.tooltip.hide();
+	}
+
 	zoom(factor: number): void {
 		if (factor === 0) {
 			this.resetZoom();

src/webviews/apps/plus/timeline/components/slider.ts

@@ -1,8 +1,5 @@
-import type SlRange from '@shoelace-style/shoelace/dist/components/range/range.js';
-import type { PropertyValues } from 'lit';
 import { css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { isUncommitted, isUncommittedStaged, shortenRevision } from '../../../../../git/utils/revision.utils';
+import { customElement, property, state } from 'lit/decorators.js';
 import type { TimelineDatum } from '../../../../plus/timeline/protocol';
 import { GlElement } from '../../../shared/components/element';
 import '@shoelace-style/shoelace/dist/components/range/range.js';
@@ -30,10 +27,11 @@ export class GlChartSlider extends GlElement {
 			--track-active-offset: 100%;
 			--track-color-active: var(--gl-track-color-active, var(--sl-color-neutral-200));
 		}
-	`;
 
-	@query('#slider')
-	private slider!: SlRange;
+		sl-range::part(thumb) {
+			cursor: pointer;
+		}
+	`;
 
 	@state()
 	private _value: number = 0;
@@ -68,18 +66,8 @@ export class GlChartSlider extends GlElement {
 		}
 	}
 
-	protected override firstUpdated(_changedProperties: PropertyValues): void {
-		this.slider.tooltipFormatter = (value: number) => {
-			const sha = this.data?.[value]?.sha;
-			if (sha == null) return '';
-
-			if (!sha) return 'Working Changes';
-			if (isUncommitted(sha)) {
-				return isUncommittedStaged(sha) ? 'Staged Changes' : 'Working Changes';
-			}
-
-			return `Commit ${shortenRevision(sha)}`;
-		};
+	get value() {
+		return this.data?.[this._value];
 	}
 
 	override render() {
@@ -89,8 +77,10 @@ export class GlChartSlider extends GlElement {
 				.min=${this._min}
 				.max=${this._max}
 				.value=${this._value}
+				tooltip="none"
 				@sl-change=${this.handleSliderInput}
 				@sl-input=${this.handleSliderInput}
+				@click=${this.handleSliderInput}
 			></sl-range>
 		</div>`;
 	}
@@ -110,7 +100,7 @@ export class GlChartSlider extends GlElement {
 		this._value = index;
 	}
 
-	private handleSliderInput(e: CustomEvent<void>) {
+	private handleSliderInput(e: MouseEvent | CustomEvent<void>) {
 		if (!this.data?.length) return;
 
 		const index = parseInt((e.target as HTMLInputElement).value);