Adds search results to minimap tooltips

Author: eamodio

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

@@ -603,7 +603,9 @@ export function GraphWrapper({
 
 				result = searchResultsByDay.get(day);
 				if (result == null) {
-					searchResultsByDay.set(day, { type: 'search-result', sha: sha });
+					searchResultsByDay.set(day, { type: 'search-result', sha: sha, count: 1 });
+				} else {
+					result.count++;
 				}
 			}
 		}

src/webviews/apps/plus/graph/graph.scss

@@ -64,6 +64,10 @@
 	--color-graph-minimap-tip-headBorder: var(--color-graph-scroll-marker-head);
 	--color-graph-minimap-tip-headForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
 
+	--color-graph-minimap-tip-highlightBackground: var(--color-graph-scroll-marker-highlights);
+	--color-graph-minimap-tip-highlightBorder: var(--color-graph-scroll-marker-highlights);
+	--color-graph-minimap-tip-highlightForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
 	--color-graph-minimap-tip-branchBackground: var(--color-graph-scroll-marker-local-branches);
 	--color-graph-minimap-tip-branchBorder: var(--color-graph-scroll-marker-local-branches);
 	--color-graph-minimap-tip-branchForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

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

@@ -411,22 +411,11 @@ export class GraphApp extends App<State> {
 			);
 
 			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			rootStyle.setProperty(
-				'--color-graph-minimap-tip-branchForeground',
-				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
-			);
-
-			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			rootStyle.setProperty(
-				'--color-graph-minimap-tip-headForeground',
-				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
-			);
-
-			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			rootStyle.setProperty(
-				'--color-graph-minimap-tip-upstreamForeground',
-				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
-			);
+			const tipForeground = c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString();
+			rootStyle.setProperty('--color-graph-minimap-tip-headForeground', tipForeground);
+			rootStyle.setProperty('--color-graph-minimap-tip-upstreamForeground', tipForeground);
+			rootStyle.setProperty('--color-graph-minimap-tip-highlightForeground', tipForeground);
+			rootStyle.setProperty('--color-graph-minimap-tip-branchForeground', tipForeground);
 		}
 
 		const branchStatusLuminance = themeLuminance(e.isLightTheme ? 0.72 : 0.064);

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

@@ -36,6 +36,7 @@ export type GraphMinimapMarker = BranchMarker | RemoteMarker | StashMarker | Tag
 export interface GraphMinimapSearchResultMarker {
 	type: 'search-result';
 	sha: string;
+	count: number;
 }
 
 export interface GraphMinimapStats {
@@ -355,6 +356,24 @@ const styles = css`
 		margin: 0.5rem 0;
 	}
 
+	.bb-tooltip .results {
+		display: flex;
+		font-size: 12px;
+		gap: 0.5rem;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin: 0.5rem 0;
+		max-width: fit-content;
+	}
+
+	.bb-tooltip .results .result {
+		border-radius: 3px;
+		padding: 0 4px;
+		background-color: var(--color-graph-minimap-tip-highlightBackground);
+		border: 1px solid var(--color-graph-minimap-tip-highlightBorder);
+		color: var(--color-graph-minimap-tip-highlightForeground);
+	}
+
 	.bb-tooltip .refs {
 		display: flex;
 		font-size: 12px;
@@ -871,46 +890,53 @@ export class GraphMinimap extends FASTElement {
 					contents: (data, _defaultTitleFormat, _defaultValueFormat, _color) => {
 						const date = new Date(data[0].x);
 
-						const stat = this.data?.get(getDay(date));
-						const markers = this.markers?.get(getDay(date));
+						const day = getDay(date);
+						const stat = this.data?.get(day);
+						const markers = this.markers?.get(day);
+						const results = this.searchResults?.get(day);
+
 						let groups;
 						if (markers?.length) {
 							groups = groupByMap(markers, m => m.type);
 						}
 
 						const stashesCount = groups?.get('stash')?.length ?? 0;
-						const showLinesChanged = this.dataType === 'lines';
+
+						let commits;
+						let linesChanged;
+						let resultsCount;
+						if (stat?.commits) {
+							commits = pluralize('commit', stat.commits, { format: c => formatNumeric(c) });
+							if (results?.count) {
+								resultsCount = pluralize('matching commit', results.count);
+							}
+
+							if (this.dataType === 'lines') {
+								linesChanged = `${pluralize('file', stat?.files ?? 0, {
+									format: c => formatNumeric(c),
+									zero: 'No',
+								})}, ${pluralize(
+									'line',
+									(stat?.activity?.additions ?? 0) + (stat?.activity?.deletions ?? 0),
+									{
+										format: c => formatNumeric(c),
+										zero: 'No',
+									},
+								)} changed`;
+							}
+						} else {
+							commits = 'No commits';
+						}
 
 						return /*html*/ `<div class="bb-tooltip">
 							<div class="header">
 								<span class="header--title">${formatDate(date, 'MMMM Do, YYYY')}</span>
 								<span class="header--description">(${capitalize(fromNow(date))})</span>
 							</div>
 							<div class="changes">
-								<span>${
-									(stat?.commits ?? 0) === 0
-										? 'No commits'
-										: `${pluralize('commit', stat?.commits ?? 0, {
-												format: c => formatNumeric(c),
-												zero: 'No',
-										  })}${
-												showLinesChanged
-													? `, ${pluralize('file', stat?.files ?? 0, {
-															format: c => formatNumeric(c),
-															zero: 'No',
-													  })}, ${pluralize(
-															'line',
-															(stat?.activity?.additions ?? 0) +
-																(stat?.activity?.deletions ?? 0),
-															{
-																format: c => formatNumeric(c),
-																zero: 'No',
-															},
-													  )} changed`
-													: ''
-										  }`
-								}</span>
+								<span>${commits}${linesChanged ? `, ${linesChanged}` : ''}</span>
 							</div>
+							${resultsCount ? /*html*/ `<div class="results"><span class="result">${resultsCount}</span></div>` : ''}
 							${
 								groups != null
 									? /*html*/ `