Add option to modify the scroll padding for the graph (#2378)

* Add option to modify the scroll padding for the graph

* Fix label ref

package.json

@@ -2181,6 +2181,13 @@
 						"scope": "window",
 						"order": 12
 					},
+					"gitlens.graph.scrollRowPadding": {
+						"type": "number",
+						"default": 0,
+						"markdownDescription": "Specifies how many rows from the edge a selected row should be before scrolling starts",
+						"scope": "window",
+						"order": 14
+					},
 					"gitlens.graph.showDetailsView": {
 						"type": [
 							"boolean",

src/config.ts

@@ -388,6 +388,7 @@ export interface GraphConfig {
 	dateStyle: DateStyle | null;
 	defaultItemLimit: number;
 	highlightRowsOnRefHover: boolean;
+	scrollRowPadding: number;
 	showDetailsView: 'open' | 'selection' | false;
 	showGhostRefsOnRowHover: boolean;
 	showRemoteNames: boolean;

src/plus/webviews/graph/graphWebview.ts

@@ -511,6 +511,7 @@ export class GraphWebview extends WebviewBase {
 			configuration.changed(e, 'graph.dateFormat') ||
 			configuration.changed(e, 'graph.dateStyle') ||
 			configuration.changed(e, 'graph.highlightRowsOnRefHover') ||
+			configuration.changed(e, 'graph.scrollRowPadding') ||
 			configuration.changed(e, 'graph.showGhostRefsOnRowHover') ||
 			configuration.changed(e, 'graph.showRemoteNames')
 		) {
@@ -1310,6 +1311,7 @@ export class GraphWebview extends WebviewBase {
 			dateStyle: configuration.get('graph.dateStyle') ?? configuration.get('defaultDateStyle'),
 			enableMultiSelection: false,
 			highlightRowsOnRefHover: configuration.get('graph.highlightRowsOnRefHover'),
+			scrollRowPadding: configuration.get('graph.scrollRowPadding'),
 			showGhostRefsOnRowHover: configuration.get('graph.showGhostRefsOnRowHover'),
 			showRemoteNamesOnRefs: configuration.get('graph.showRemoteNames'),
 			idLength: configuration.get('advanced.abbreviatedShaLength'),

src/plus/webviews/graph/protocol.ts

@@ -102,6 +102,7 @@ export interface GraphComponentConfig {
 	dateStyle: DateStyle;
 	enableMultiSelection?: boolean;
 	highlightRowsOnRefHover?: boolean;
+	scrollRowPadding?: number;
 	showGhostRefsOnRowHover?: boolean;
 	showRemoteNamesOnRefs?: boolean;
 	idLength?: number;

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -402,7 +402,7 @@ export function GraphWrapper({
 		}
 
 		if (id != null) {
-			queueMicrotask(() => graphRef.current?.selectCommits([id!], false));
+			queueMicrotask(() => graphRef.current?.selectCommits([id!], false, true));
 		}
 	};
 
@@ -728,6 +728,7 @@ export function GraphWrapper({
 							highlightedShas={searchResults?.ids as GraphContainerProps['highlightedShas']}
 							highlightRowsOnRefHover={graphConfig?.highlightRowsOnRefHover}
 							hiddenRefsById={hiddenRefsById}
+							scrollRowPadding={graphConfig?.scrollRowPadding}
 							showGhostRefsOnRowHover={graphConfig?.showGhostRefsOnRowHover}
 							showRemoteNamesOnRefs={graphConfig?.showRemoteNamesOnRefs}
 							isLoadingRows={isLoading}

src/webviews/apps/settings/partials/commit-graph.html

@@ -65,6 +65,21 @@
 					</div>
 
 					<div class="setting">
+						<div class="setting__input">
+							<label for="graph.scrollRowPadding">Start scrolling at </label>
+							<input
+								id="graph.scrollRowPadding"
+								name="graph.scrollRowPadding"
+								type="number"
+								placeholder="0"
+								data-setting
+								data-default-value="0"
+							/>
+							<label for="graph.scrollRowPadding"> rows from the edge</label>
+						</div>
+					</div>
+
+					<div class="setting">
 						<div class="setting__input setting__input--inner-select">
 							<input
 								id="graph.showDetailsView"