Enhances timeline hover, zoom, & chart interaction

Hovers are now "grouped" on the x axis
Adds better zoom in/out functionality with wheel support and reset
Optimizes chart resizing and axis label rendering with author indicators
Improves cursor feedback and interaction states for timeline elements

Author: eamodio

src/webviews/apps/plus/graph/minimap/minimap.ts

@@ -466,9 +466,14 @@ export class GlGraphMinimap extends GlElement {
 			color: var(--color-graph-minimap-tip-tagForeground);
 		}
 
-		.bb-event-rects {
+		.bb-event-rects,
+		.bb-event-rect {
 			cursor: pointer !important;
 		}
+		.bb-event-rects:active,
+		.bb-event-rect:active {
+			cursor: ew-resize !important;
+		}
 	`;
 
 	@query('#chart')
@@ -491,7 +496,7 @@ export class GlGraphMinimap extends GlElement {
 		this.select(this.activeDay);
 	}
 
-	@property({ type: Map })
+	@property({ type: Object })
 	data: Map<number, GraphMinimapStats | null> | undefined;
 
 	@property({ type: String })
@@ -502,15 +507,15 @@ export class GlGraphMinimap extends GlElement {
 		this.handleDataChanged(false);
 	}
 
-	@property({ type: Map })
+	@property({ type: Object })
 	markers: Map<number, GraphMinimapMarker[]> | undefined;
 
 	@observe('markers')
 	private onMarkersChanged() {
 		this.handleDataChanged(true);
 	}
 
-	@property({ type: Map })
+	@property({ type: Object })
 	searchResults: Map<number, GraphMinimapSearchResultMarker> | undefined;
 
 	@observe('searchResults')

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

@@ -48,7 +48,16 @@ export const timelineChartStyles = css`
 		font-size: 11px;
 	}
 
-	.bb .bb-legend-item-tile,
+	.bb .bb-event-rects,
+	.bb .bb-event-rect {
+		cursor: pointer !important;
+	}
+
+	.bb .bb-event-rects:active,
+	.bb .bb-event-rect:active {
+		cursor: ew-resize !important;
+	}
+
 	.bb .bb-xgrid-focus,
 	.bb .bb-ygrid-focus,
 	.bb .bb-ygrid,
@@ -57,6 +66,11 @@ export const timelineChartStyles = css`
 		shape-rendering: crispEdges;
 	}
 
+	.bb .bb-legend-item-tile {
+		stroke-width: 2px;
+		transform: translate(0, 1px);
+	}
+
 	.bb .bb-chart-arc .bb-gauge-value {
 		fill: #000;
 	}
@@ -375,4 +389,23 @@ export const timelineChartStyles = css`
 	.bb-tooltip .message__content {
 		white-space: pre-line;
 	}
+
+	:host-context(:host[placement='view']) .bb-axis-y .tick text {
+		transform: translate(0, 0.4rem);
+		font-family: codicon;
+		font-size: 1.5rem;
+	}
+
+	@media (max-height: 275px) {
+		:host-context(:host[placement='view']) .bb-axis-y .tick text {
+			transform: none;
+			font-size: 1rem;
+		}
+	}
+
+	@media (max-height: 225px) {
+		:host-context(:host[placement='view']) .bb-axis-y .tick text {
+			display: none;
+		}
+	}
 `;