Fixes graph row selection issues

Author: d13

src/webviews/apps/plus/graph/graph-header.ts

@@ -1023,7 +1023,7 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 								?valid=${this.searchValid}
 								?more=${this.appState.searchResults?.paging?.hasMore ?? false}
 								?searching=${this.appState.searching}
-								?filter=${this.appState.filter.filter}
+								?filter=${this.hostState.defaultSearchMode === 'filter'}
 								value=${this.appState.filter.query}
 								errorMessage=${this.appState.searchResultsError?.error ?? ''}
 								?resultsHidden=${this.appState.searchResultsHidden}

src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper-element.ts

@@ -12,6 +12,7 @@ import type {
 	GraphMissingRefsMetadata,
 	GraphRefMetadataItem,
 } from '../../../../plus/graph/protocol';
+import type { GraphWrapperInitProps, GraphWrapperProps, GraphWrapperSubscriberProps } from './graph-wrapper.react';
 import { GraphWrapperReact } from './graph-wrapper.react';
 
 // @customElement('gl-graph-wrapper-element')
@@ -38,8 +39,8 @@ export class WebGraph extends LitElement {
 	private graphRef: GraphContainer | null = null;
 
 	// State updater function provided by the React component
-	@state()
-	private stateUpdater: ((props: any) => void) | null = null;
+	// @state()
+	private stateUpdater: ((props: Partial<GraphWrapperSubscriberProps>) => void) | null = null;
 
 	// Properties that match GraphWrapperProps
 	@property({ type: String })
@@ -79,7 +80,7 @@ export class WebGraph extends LitElement {
 	loading?: boolean;
 
 	@property({ type: Object })
-	selectedRows?: Record<string, boolean>;
+	selectedRows?: GraphWrapperProps['selectedRows'];
 
 	@property({ type: Boolean })
 	windowFocused?: boolean;
@@ -124,10 +125,10 @@ export class WebGraph extends LitElement {
 	}
 
 	// Update the React component's state when properties change
-	override updated(_changedProperties: Map<string, any>): void {
+	override updated(changedProperties: Map<string, unknown>): void {
 		if (this.stateUpdater) {
 			// Only update if we have a state updater and properties have changed
-			const props = this.getProps();
+			const props = this.getProps(changedProperties);
 			this.stateUpdater(props);
 		}
 	}
@@ -145,15 +146,13 @@ export class WebGraph extends LitElement {
 		// Get the initial props
 		const props = this.getProps();
 
-		// Add the subscriber function to allow the React component to provide a state updater
-		props.subscriber = (updater: (props: any) => void) => {
-			this.stateUpdater = updater;
-		};
-
 		// Mount the React component
 		this.reactRoot.render(
 			createElement(GraphWrapperReact, {
 				...props,
+				subscriber: (updater: (props: Partial<GraphWrapperSubscriberProps>) => void) => {
+					this.stateUpdater = updater;
+				},
 				onChangeColumns: this.handleChangeColumns.bind(this),
 				onGraphMouseLeave: this.handleGraphMouseLeave.bind(this),
 				onChangeRefsVisibility: this.handleChangeRefsVisibility.bind(this),
@@ -167,17 +166,22 @@ export class WebGraph extends LitElement {
 				onGraphRowHovered: this.handleGraphRowHovered.bind(this),
 				onGraphRowUnhovered: this.handleGraphRowUnhovered.bind(this),
 				onRowContextMenu: this.handleRowContextMenu.bind(this),
-			}),
+			} as GraphWrapperInitProps),
 		);
 	}
 
 	// Collect all props to pass to the React component
-	private getProps(): any {
+	private getProps(_changedProperties?: Map<string, unknown>): Partial<GraphWrapperSubscriberProps> {
+		// TODO: look at only sending changed properties
+		// if (changedProperties != null) {
+		// 	return Object.fromEntries(changedProperties.entries());
+		// }
+
 		return {
 			activeRow: this.activeRow,
 			avatars: this.avatars,
 			columns: this.columns,
-			context: this.context,
+			context: this.context as GraphWrapperSubscriberProps['context'],
 			config: this.config,
 			downstreams: this.downstreams,
 			rows: this.rows,

src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.react.tsx

@@ -186,12 +186,18 @@ const emptySelectionContext: SelectionContext = {
 
 interface GraphWrapperAPI {
 	setRef: (refObject: GraphContainer) => void;
-	subscriber?: (updater: (props: Readonly<GraphWrapperEvents & GraphWrapperProps & GraphWrapperAPI>) => void) => void;
 }
 
+export type GraphWrapperSubscriberProps = GraphWrapperProps & GraphWrapperAPI;
+export type GraphWrapperInitProps = GraphWrapperProps &
+	GraphWrapperEvents &
+	GraphWrapperAPI & {
+		subscriber?: (updater: (props: Partial<GraphWrapperSubscriberProps>) => void) => void;
+	};
+
 const emptyRows: GraphRow[] = [];
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function GraphWrapperReact(initProps: Readonly<GraphWrapperEvents & GraphWrapperProps & GraphWrapperAPI>) {
+export function GraphWrapperReact(initProps: GraphWrapperInitProps) {
 	const [graph, _graphRef] = useState<GraphContainer | null>(null);
 	const [context, setContext] = useState(initProps.context);
 	const [props, setProps] = useState(initProps);
@@ -205,7 +211,7 @@ export function GraphWrapperReact(initProps: Readonly<GraphWrapperEvents & Graph
 				// if (newProps.context !== context) {
 				// 	setContext(newProps.context);
 				// }
-				setProps(newProps);
+				setProps({ ...props, ...newProps });
 				// Other state updates can be added here as needed
 			});
 		}

src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.ts

@@ -7,6 +7,7 @@ import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { GitGraphRowType } from '../../../../../git/models/graph';
+import { debounce } from '../../../../../system/decorators/debounce';
 import {
 	DoubleClickedCommandType,
 	GetMissingAvatarsCommand,
@@ -71,6 +72,7 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 		this._ipc.sendCommand(GetMoreRowsCommand, { id: sha });
 	}
 
+	@debounce(250)
 	private onColumnsChanged(event: CustomEventType<'graph-changecolumns'>) {
 		this._ipc.sendCommand(UpdateColumnsCommand, {
 			config: event.detail.settings,
@@ -101,6 +103,7 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 		this._ipc.sendCommand(UpdateGraphConfigurationCommand, { changes: changes });
 	}
 
+	@debounce(250)
 	private onSelectionChanged({ detail: rows }: CustomEventType<'graph-changeselection'>) {
 		const selection = rows.filter(r => r != null).map(r => ({ id: r.sha, type: r.type as GitGraphRowType }));
 		this._telemetry.sendEvent({ name: 'graph/row/selected', data: { rows: selection.length } });
@@ -223,7 +226,7 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 					// eslint-disable-next-line lit/no-this-assign-in-render
 					this.ref = ref;
 				}}
-				.filter=${{ ...this.graphAppState.filter }}
+				.filter=${this.graphAppState.filter}
 				@changecolumns=${this.onColumnsChanged}
 				@changegraphconfiguration=${this.onGraphConfigurationChanged}
 				@changerefsvisibility=${this.onRefsVisibilityChanged}