Updates billboard.js dependency

Fixes scrubbing issues when data point is far vertically
Avoids translate hacks for inverted X axis

ThirdPartyNotices.txt

@@ -12,7 +12,7 @@ This project incorporates components from the projects listed below.
 7. @vscode/codicons version 0.0.32 (https://github.com/microsoft/vscode-codicons)
 8. @vscode/webview-ui-toolkit version 1.2.2 (https://github.com/microsoft/vscode-webview-ui-toolkit)
 9. ansi-regex version 6.0.1 (https://github.com/chalk/ansi-regex)
-10. billboard.js version 3.7.4 (https://github.com/naver/billboard.js)
+10. billboard.js version 3.8.0-next.2 (https://github.com/naver/billboard.js)
 11. https-proxy-agent version 5.0.1 (https://github.com/TooTallNate/node-https-proxy-agent)
 12. iconv-lite version 0.6.3 (https://github.com/ashtuchkin/iconv-lite)
 13. lit version 2.7.2 (https://github.com/lit/lit)

package.json

@@ -13605,7 +13605,7 @@
 		"@vscode/codicons": "0.0.32",
 		"@vscode/webview-ui-toolkit": "1.2.2",
 		"ansi-regex": "6.0.1",
-		"billboard.js": "3.7.4",
+		"billboard.js": "3.8.0-next.2",
 		"https-proxy-agent": "5.0.1",
 		"iconv-lite": "0.6.3",
 		"lit": "2.7.2",

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

@@ -77,7 +77,6 @@ const styles = css`
 	.bb svg {
 		font: 10px var(--font-family);
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-		transform: translateX(2.5em) rotateY(180deg);
 	}
 
 	.bb-chart {
@@ -142,7 +141,7 @@ const styles = css`
 
 	.bb-region.visible-area {
 		fill: var(--color-graph-minimap-visibleAreaBackground);
-		transform: translateY(-4px);
+		/* transform: translateY(-4px); */
 	}
 	.bb-region.visible-area > rect {
 		height: 100%;
@@ -150,7 +149,7 @@ const styles = css`
 
 	.bb-region.marker-result {
 		fill: var(--color-graph-minimap-marker-highlights);
-		transform: translate(-1px, -4px);
+		transform: translateX(-1px);
 		z-index: 10;
 	}
 	.bb-region.marker-result > rect {
@@ -161,7 +160,7 @@ const styles = css`
 	.bb-region.marker-head {
 		fill: var(--color-graph-minimap-marker-head);
 		stroke: var(--color-graph-minimap-marker-head);
-		transform: translate(-1px, -4px);
+		transform: translateX(-1px);
 	}
 	.bb-region.marker-head > rect {
 		width: 1px;
@@ -171,7 +170,7 @@ const styles = css`
 	.bb-region.marker-head-arrow-left {
 		fill: var(--color-graph-minimap-marker-head);
 		stroke: var(--color-graph-minimap-marker-head);
-		transform: translate(-5px, -5px) skewX(45deg);
+		transform: translate(-5px, -1px) skewX(45deg);
 	}
 	.bb-region.marker-head-arrow-left > rect {
 		width: 3px;
@@ -181,7 +180,7 @@ const styles = css`
 	.bb-region.marker-head-arrow-right {
 		fill: var(--color-graph-minimap-marker-head);
 		stroke: var(--color-graph-minimap-marker-head);
-		transform: translate(1px, -5px) skewX(-45deg);
+		transform: translate(1px, -1px) skewX(-45deg);
 	}
 	.bb-region.marker-head-arrow-right > rect {
 		width: 3px;
@@ -191,7 +190,7 @@ const styles = css`
 	.bb-region.marker-upstream {
 		fill: var(--color-graph-minimap-marker-upstream);
 		stroke: var(--color-graph-minimap-marker-upstream);
-		transform: translate(-1px, -4px);
+		transform: translateX(-1px);
 	}
 	.bb-region.marker-upstream > rect {
 		width: 1px;
@@ -201,7 +200,7 @@ const styles = css`
 	.bb-region.marker-branch {
 		fill: var(--color-graph-minimap-marker-local-branches);
 		stroke: var(--color-graph-minimap-marker-local-branches);
-		transform: translate(-2px, 32px);
+		transform: translate(-2px, 35px);
 	}
 	.bb-region.marker-branch > rect {
 		width: 3px;
@@ -211,7 +210,7 @@ const styles = css`
 	.bb-region.marker-remote {
 		fill: var(--color-graph-minimap-marker-remote-branches);
 		stroke: var(--color-graph-minimap-marker-remote-branches);
-		transform: translate(-2px, 26px);
+		transform: translate(-2px, 29px);
 	}
 	.bb-region.marker-remote > rect {
 		width: 3px;
@@ -221,7 +220,7 @@ const styles = css`
 	.bb-region.marker-stash {
 		fill: var(--color-graph-minimap-marker-stashes);
 		stroke: var(--color-graph-minimap-marker-stashes);
-		transform: translate(-2px, 32px);
+		transform: translate(-2px, 35px);
 	}
 	.bb-region.marker-stash > rect {
 		width: 3px;
@@ -231,7 +230,7 @@ const styles = css`
 	.bb-region.marker-tag {
 		fill: var(--color-graph-minimap-marker-tags);
 		stroke: var(--color-graph-minimap-marker-tags);
-		transform: translate(-2px, 26px);
+		transform: translate(-2px, 29px);
 	}
 	.bb-region.marker-tag > rect {
 		width: 3px;
@@ -601,8 +600,8 @@ export class GraphMinimap extends FASTElement {
 	private getVisibleAreaRegion(visibleDays: NonNullable<typeof this.visibleDays>): RegionOptions {
 		return {
 			axis: 'x',
-			start: visibleDays.bottom,
-			end: visibleDays.top,
+			start: visibleDays.top,
+			end: visibleDays.bottom,
 			class: 'visible-area',
 		} satisfies RegionOptions;
 	}
@@ -730,7 +729,6 @@ export class GraphMinimap extends FASTElement {
 				bindto: this.chart,
 				data: {
 					x: 'date',
-					xSort: false,
 					axes: {
 						activity: 'y',
 					},
@@ -769,17 +767,13 @@ export class GraphMinimap extends FASTElement {
 				},
 				axis: {
 					x: {
-						show: false,
+						inverted: true,
 						localtime: true,
 						type: 'timeseries',
 					},
 					y: {
 						min: 0,
 						max: yMax,
-						show: true,
-						padding: {
-							bottom: 8,
-						},
 					},
 				},
 				clipPath: false,
@@ -796,6 +790,13 @@ export class GraphMinimap extends FASTElement {
 					point: true,
 					zerobased: true,
 				},
+				padding: {
+					mode: 'fit',
+					bottom: -8,
+					left: 0,
+					right: 0,
+					top: 0,
+				},
 				point: {
 					show: true,
 					select: {
@@ -906,13 +907,12 @@ export class GraphMinimap extends FASTElement {
 					},
 					grouped: true,
 					position: (_data, width, _height, element, pos) => {
-						const { x } = pos;
+						let { x } = pos;
 						const rect = (element as HTMLElement).getBoundingClientRect();
-						let left = rect.right - x;
-						if (left + width > rect.right) {
-							left = rect.right - width;
+						if (x + width > rect.right) {
+							x = rect.right - width;
 						}
-						return { top: 0, left: left };
+						return { top: 0, left: x };
 					},
 				},
 				transition: {

yarn.lock

@@ -592,7 +592,7 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/d3-selection@*", "@types/d3-selection@^3.0.4":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.5":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.5.tgz#27cd53b7672d405025e2414d98532d7934c16ebd"
   integrity sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==
@@ -1393,12 +1393,12 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
-billboard.js@3.7.4:
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.7.4.tgz#94181655168a8e44025279894e9442c97d1e7965"
-  integrity sha512-FFmmiiJCPdwE4OKE8L0XttP94ESOBqEvSQZDx+vA/LyK2pmvP8P/oU5perFS14lBTEojunuurvHAaVN1S9i1wA==
+billboard.js@3.8.0-next.2:
+  version "3.8.0-next.2"
+  resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.8.0-next.2.tgz#8bfde14c67f8133cb12c55ea90e892bcf392f3eb"
+  integrity sha512-jJeCjpWb5ylSpXVOOhuRXA+D6AOt3iGpuhS42O5ksjkSeS9HuH0PgqDzyexNEww9pilUjkXwSuIokHva5yJJ/g==
   dependencies:
-    "@types/d3-selection" "^3.0.4"
+    "@types/d3-selection" "^3.0.5"
     "@types/d3-transition" "^3.0.3"
     d3-axis "^3.0.0"
     d3-brush "^3.0.0"