Renames to activity minibar to minimap

package.json

@@ -2309,10 +2309,10 @@
 						"scope": "window",
 						"order": 100
 					},
-					"gitlens.graph.experimental.activityMinibar.enabled": {
+					"gitlens.graph.experimental.minimap.enabled": {
 						"type": "boolean",
 						"default": false,
-						"markdownDescription": "Specifies whether to show an activity minibar above the _Commit Graph_",
+						"markdownDescription": "Specifies whether to show a minimap of commit activity above the _Commit Graph_",
 						"scope": "window",
 						"order": 100
 					}

src/config.ts

@@ -389,7 +389,7 @@ export interface GraphConfig {
 	defaultItemLimit: number;
 	dimMergeCommits: boolean;
 	experimental: {
-		activityMinibar: {
+		minimap: {
 			enabled: boolean;
 		};
 	};

src/plus/webviews/graph/graphWebview.ts

@@ -479,11 +479,8 @@ export class GraphWebview extends WebviewBase {
 		for (key in params.changes) {
 			if (config[key] !== params.changes[key]) {
 				switch (key) {
-					case 'activityMinibar':
-						void configuration.updateEffective(
-							'graph.experimental.activityMinibar.enabled',
-							params.changes[key],
-						);
+					case 'minimap':
+						void configuration.updateEffective('graph.experimental.minimap.enabled', params.changes[key]);
 						break;
 					default:
 						// TODO:@eamodio add more config options as needed
@@ -586,13 +583,13 @@ export class GraphWebview extends WebviewBase {
 			configuration.changed(e, 'graph.pullRequests.enabled') ||
 			configuration.changed(e, 'graph.showRemoteNames') ||
 			configuration.changed(e, 'graph.showUpstreamStatus') ||
-			configuration.changed(e, 'graph.experimental.activityMinibar.enabled')
+			configuration.changed(e, 'graph.experimental.minimap.enabled')
 		) {
 			void this.notifyDidChangeConfiguration();
 
 			if (
-				configuration.changed(e, 'graph.experimental.activityMinibar.enabled') &&
-				configuration.get('graph.experimental.activityMinibar.enabled') &&
+				configuration.changed(e, 'graph.experimental.minimap.enabled') &&
+				configuration.get('graph.experimental.minimap.enabled') &&
 				!this._graph?.includes?.stats
 			) {
 				this.updateState();
@@ -1598,7 +1595,6 @@ export class GraphWebview extends WebviewBase {
 
 	private getComponentConfig(): GraphComponentConfig {
 		const config: GraphComponentConfig = {
-			activityMinibar: configuration.get('graph.experimental.activityMinibar.enabled'),
 			avatars: configuration.get('graph.avatars'),
 			dateFormat:
 				configuration.get('graph.dateFormat') ?? configuration.get('defaultDateFormat') ?? 'short+short',
@@ -1607,6 +1603,7 @@ export class GraphWebview extends WebviewBase {
 			dimMergeCommits: configuration.get('graph.dimMergeCommits'),
 			enableMultiSelection: false,
 			highlightRowsOnRefHover: configuration.get('graph.highlightRowsOnRefHover'),
+			minimap: configuration.get('graph.experimental.minimap.enabled'),
 			scrollRowPadding: configuration.get('graph.scrollRowPadding'),
 			showGhostRefsOnRowHover: configuration.get('graph.showGhostRefsOnRowHover'),
 			showRemoteNamesOnRefs: configuration.get('graph.showRemoteNames'),
@@ -1703,7 +1700,7 @@ export class GraphWebview extends WebviewBase {
 			this.repository.path,
 			this._panel!.webview.asWebviewUri.bind(this._panel!.webview),
 			{
-				include: { stats: configuration.get('graph.experimental.activityMinibar.enabled') },
+				include: { stats: configuration.get('graph.experimental.minimap.enabled') },
 				limit: limit,
 				ref: ref,
 			},

src/plus/webviews/graph/protocol.ts

@@ -128,7 +128,6 @@ export type GraphTag = Tag;
 export type GraphBranch = Head;
 
 export interface GraphComponentConfig {
-	activityMinibar?: boolean;
 	avatars?: boolean;
 	dateFormat: DateTimeFormat | string;
 	dateStyle: DateStyle;
@@ -136,6 +135,7 @@ export interface GraphComponentConfig {
 	enabledRefMetadataTypes?: GraphRefMetadataType[];
 	enableMultiSelection?: boolean;
 	highlightRowsOnRefHover?: boolean;
+	minimap?: boolean;
 	scrollRowPadding?: number;
 	showGhostRefsOnRowHover?: boolean;
 	showRemoteNamesOnRefs?: boolean;

src/webviews/apps/plus/activity/react.tsx

@@ -1,8 +0,0 @@
-import { reactWrapper } from '../../shared/components/helpers/react-wrapper';
-import { ActivityMinibar as activityMinibarComponent } from './activity-minibar';
-
-export const ActivityMinibar = reactWrapper(activityMinibarComponent, {
-	events: {
-		onSelected: 'selected',
-	},
-});

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

@@ -66,13 +66,13 @@ import type { SearchNavigationEventDetail } from '../../shared/components/search
 import type { DateTimeFormat } from '../../shared/date';
 import { formatDate, fromNow } from '../../shared/date';
 import type {
-	ActivityMarker,
-	ActivityMinibar as ActivityMinibarType,
-	ActivitySearchResultMarker,
-	ActivityStats,
-	ActivityStatsSelectedEventDetail,
-} from '../activity/activity-minibar';
-import { ActivityMinibar } from '../activity/react';
+	GraphMinimapDaySelectedEventDetail,
+	GraphMinimapMarker,
+	GraphMinimapSearchResultMarker,
+	GraphMinimapStats,
+	GraphMinimap as GraphMinimapType,
+} from './minimap/minimap';
+import { GraphMinimap } from './minimap/react';
 
 export interface GraphWrapperProps {
 	nonce?: string;
@@ -228,7 +228,7 @@ export function GraphWrapper({
 		state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 },
 	);
 
-	const activityMinibar = useRef<ActivityMinibarType | undefined>(undefined);
+	const minimap = useRef<GraphMinimapType | undefined>(undefined);
 
 	const ensuredIds = useRef<Set<string>>(new Set());
 	const ensuredSkippedIds = useRef<Set<string>>(new Set());
@@ -344,12 +344,12 @@ export function GraphWrapper({
 		};
 	}, [activeRow]);
 
-	const activityData = useMemo(() => {
-		if (!graphConfig?.activityMinibar) return undefined;
+	const minimapData = useMemo(() => {
+		if (!graphConfig?.minimap) return undefined;
 
 		// Loops through all the rows and group them by day and aggregate the row.stats
-		const statsByDayMap = new Map<number, ActivityStats>();
-		const markersByDay = new Map<number, ActivityMarker[]>();
+		const statsByDayMap = new Map<number, GraphMinimapStats>();
+		const markersByDay = new Map<number, GraphMinimapMarker[]>();
 
 		let rankedShas: {
 			head: string | undefined;
@@ -395,7 +395,7 @@ export function GraphWrapper({
 				rankedShas.branch = row.sha;
 
 				// eslint-disable-next-line no-loop-func
-				headMarkers = row.heads.map<ActivityMarker>(h => {
+				headMarkers = row.heads.map<GraphMinimapMarker>(h => {
 					if (h.isCurrentHead) {
 						head = h;
 						rankedShas.head = row.sha;
@@ -420,7 +420,7 @@ export function GraphWrapper({
 				rankedShas.remote = row.sha;
 
 				// eslint-disable-next-line no-loop-func
-				remoteMarkers = row.remotes.map<ActivityMarker>(r => {
+				remoteMarkers = row.remotes.map<GraphMinimapMarker>(r => {
 					let current = false;
 					if (r.name === head?.name) {
 						rankedShas.remote = row.sha;
@@ -445,7 +445,7 @@ export function GraphWrapper({
 			if (row.tags?.length) {
 				rankedShas.tag = row.sha;
 
-				tagMarkers = row.tags.map<ActivityMarker>(t => ({
+				tagMarkers = row.tags.map<GraphMinimapMarker>(t => ({
 					type: 'tag',
 					name: t.name,
 				}));
@@ -489,12 +489,12 @@ export function GraphWrapper({
 		}
 
 		return { stats: statsByDayMap, markers: markersByDay };
-	}, [rows, graphConfig?.activityMinibar]);
+	}, [rows, graphConfig?.minimap]);
 
-	const activitySearchResults = useMemo(() => {
-		if (!graphConfig?.activityMinibar) return undefined;
+	const minimapSearchResults = useMemo(() => {
+		if (!graphConfig?.minimap) return undefined;
 
-		const searchResultsByDay = new Map<number, ActivitySearchResultMarker>();
+		const searchResultsByDay = new Map<number, GraphMinimapSearchResultMarker>();
 
 		if (searchResults?.ids != null) {
 			let day;
@@ -512,9 +512,9 @@ export function GraphWrapper({
 		}
 
 		return searchResultsByDay;
-	}, [searchResults, graphConfig?.activityMinibar]);
+	}, [searchResults, graphConfig?.minimap]);
 
-	const handleOnActivityStatsSelected = (e: CustomEvent<ActivityStatsSelectedEventDetail>) => {
+	const handleOnMinimapDaySelected = (e: CustomEvent<GraphMinimapDaySelectedEventDetail>) => {
 		let { sha } = e.detail;
 		if (sha == null) {
 			const date = e.detail.date?.getTime();
@@ -530,18 +530,18 @@ export function GraphWrapper({
 		graphRef.current?.selectCommits([sha], false, true);
 	};
 
-	const handleOnToggleActivityMinibar = (_e: React.MouseEvent) => {
-		onUpdateGraphConfiguration?.({ activityMinibar: !graphConfig?.activityMinibar });
+	const handleOnToggleMinimap = (_e: React.MouseEvent) => {
+		onUpdateGraphConfiguration?.({ minimap: !graphConfig?.minimap });
 	};
 
 	const handleOnGraphMouseLeave = (_event: any) => {
-		activityMinibar.current?.unselect(undefined, true);
+		minimap.current?.unselect(undefined, true);
 	};
 
 	const handleOnGraphRowHovered = (_event: any, graphZoneType: GraphZoneType, graphRow: GraphRow) => {
-		if (graphZoneType === REF_ZONE_TYPE || activityMinibar.current == null) return;
+		if (graphZoneType === REF_ZONE_TYPE || minimap.current == null) return;
 
-		activityMinibar.current?.select(graphRow.date, true);
+		minimap.current?.select(graphRow.date, true);
 	};
 
 	const handleKeyDown = (e: KeyboardEvent) => {
@@ -1223,9 +1223,9 @@ export function GraphWrapper({
 							<button
 								type="button"
 								className="action-button action-button--narrow"
-								title="Toggle Activity Minibar (experimental)"
-								aria-label="Toggle Activity Minibar (experimental)"
-								onClick={handleOnToggleActivityMinibar}
+								title="Toggle Minimap (experimental)"
+								aria-label="Toggle Minimap (experimental)"
+								onClick={handleOnToggleMinimap}
 							>
 								<span className="codicon codicon-graph-line action-button__icon"></span>
 							</button>
@@ -1236,16 +1236,16 @@ export function GraphWrapper({
 					<div className="progress-bar"></div>
 				</div>
 			</header>
-			{graphConfig?.activityMinibar && (
-				<ActivityMinibar
-					ref={activityMinibar as any}
+			{graphConfig?.minimap && (
+				<GraphMinimap
+					ref={minimap as any}
 					activeDay={activeDay}
-					data={activityData?.stats}
-					markers={activityData?.markers}
-					searchResults={activitySearchResults}
+					data={minimapData?.stats}
+					markers={minimapData?.markers}
+					searchResults={minimapSearchResults}
 					visibleDays={visibleDays}
-					onSelected={e => handleOnActivityStatsSelected(e as CustomEvent<ActivityStatsSelectedEventDetail>)}
-				></ActivityMinibar>
+					onSelected={e => handleOnMinimapDaySelected(e as CustomEvent<GraphMinimapDaySelectedEventDetail>)}
+				></GraphMinimap>
 			)}
 			<main
 				id="main"
@@ -1285,16 +1285,14 @@ export function GraphWrapper({
 							onDoubleClickGraphRow={handleOnDoubleClickRow}
 							onDoubleClickGraphRef={handleOnDoubleClickRef}
 							onGraphColumnsReOrdered={handleOnGraphColumnsReOrdered}
-							onGraphMouseLeave={activityMinibar.current ? handleOnGraphMouseLeave : undefined}
-							onGraphRowHovered={activityMinibar.current ? handleOnGraphRowHovered : undefined}
+							onGraphMouseLeave={minimap.current ? handleOnGraphMouseLeave : undefined}
+							onGraphRowHovered={minimap.current ? handleOnGraphRowHovered : undefined}
 							onSelectGraphRows={handleSelectGraphRows}
 							onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick}
 							onEmailsMissingAvatarUrls={handleMissingAvatars}
 							onRefsMissingMetadata={handleMissingRefsMetadata}
 							onShowMoreCommits={handleMoreCommits}
-							onGraphVisibleRowsChanged={
-								activityMinibar.current ? handleOnGraphVisibleRowsChanged : undefined
-							}
+							onGraphVisibleRowsChanged={minimap.current ? handleOnGraphVisibleRowsChanged : undefined}
 							platform={clientPlatform}
 							refMetadataById={refsMetadata}
 							shaLength={graphConfig?.idLength}

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

@@ -382,7 +382,8 @@ export class GraphApp extends App {
 		bodyStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65));
 		bodyStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50));
 
-		// activity minibar
+		// minimap
+
 		const resultColor = Color.fromHex('#ffff00');
 		const headColor = Color.fromHex('#00ff00');
 		const branchColor = Color.fromHex('#ff7f50');
@@ -390,17 +391,17 @@ export class GraphApp extends App {
 
 		color = e.computedStyle.getPropertyValue('--vscode-progressBar-background').trim();
 		const activityColor = Color.from(color);
-		// bodyStyle.setProperty('--color-activityMinibar-line0', color);
-		bodyStyle.setProperty('--color-activityMinibar-line0', activityColor.luminance(themeLuminance(0.5)).toString());
+		// bodyStyle.setProperty('--color-graph-minimap-line0', color);
+		bodyStyle.setProperty('--color-graph-minimap-line0', activityColor.luminance(themeLuminance(0.5)).toString());
 
 		bodyStyle.setProperty(
-			'--color-activityMinibar-focusLine',
+			'--color-graph-minimap-focusLine',
 			backgroundColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.2)).toString(),
 		);
 
 		color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-background').trim();
 		bodyStyle.setProperty(
-			'--color-activityMinibar-visibleAreaBackground',
+			'--color-graph-minimap-visibleAreaBackground',
 			Color.from(color)
 				.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
 				.toString(),
@@ -408,7 +409,7 @@ export class GraphApp extends App {
 
 		color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-hoverBackground').trim();
 		bodyStyle.setProperty(
-			'--color-activityMinibar-visibleAreaHoverBackground',
+			'--color-graph-minimap-visibleAreaHoverBackground',
 			Color.from(color)
 				.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
 				.toString(),
@@ -418,11 +419,11 @@ export class GraphApp extends App {
 			.luminance(themeLuminance(e.isLightTheme ? 0.45 : 0.32))
 			.toString();
 		// color = e.computedStyle.getPropertyValue('--vscode-editorCursor-foreground').trim();
-		bodyStyle.setProperty('--color-activityMinibar-selectedMarker', color);
-		bodyStyle.setProperty('--color-activityMinibar-highlightedMarker', opacity(color, 60));
+		bodyStyle.setProperty('--color-graph-minimap-selectedMarker', color);
+		bodyStyle.setProperty('--color-graph-minimap-highlightedMarker', opacity(color, 60));
 
 		bodyStyle.setProperty(
-			'--color-activityMinibar-resultMarker',
+			'--color-graph-minimap-resultMarker',
 			resultColor.luminance(themeLuminance(0.6)).toString(),
 		);
 
@@ -431,41 +432,41 @@ export class GraphApp extends App {
 		const headBorder = headColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
 		const headMarker = headColor.luminance(themeLuminance(0.5)).toString();
 
-		bodyStyle.setProperty('--color-activityMinibar-headBackground', headBackground);
-		bodyStyle.setProperty('--color-activityMinibar-headBorder', headBorder);
-		bodyStyle.setProperty('--color-activityMinibar-headForeground', pillLabel);
-		bodyStyle.setProperty('--color-activityMinibar-headMarker', opacity(headMarker, 80));
+		bodyStyle.setProperty('--color-graph-minimap-headBackground', headBackground);
+		bodyStyle.setProperty('--color-graph-minimap-headBorder', headBorder);
+		bodyStyle.setProperty('--color-graph-minimap-headForeground', pillLabel);
+		bodyStyle.setProperty('--color-graph-minimap-headMarker', opacity(headMarker, 80));
 
-		bodyStyle.setProperty('--color-activityMinibar-upstreamBackground', headBackground);
-		bodyStyle.setProperty('--color-activityMinibar-upstreamBorder', headBorder);
-		bodyStyle.setProperty('--color-activityMinibar-upstreamForeground', pillLabel);
-		bodyStyle.setProperty('--color-activityMinibar-upstreamMarker', opacity(headMarker, 60));
+		bodyStyle.setProperty('--color-graph-minimap-upstreamBackground', headBackground);
+		bodyStyle.setProperty('--color-graph-minimap-upstreamBorder', headBorder);
+		bodyStyle.setProperty('--color-graph-minimap-upstreamForeground', pillLabel);
+		bodyStyle.setProperty('--color-graph-minimap-upstreamMarker', opacity(headMarker, 60));
 
 		const branchBackground = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3)).toString();
 		const branchBorder = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
 		const branchMarker = branchColor.luminance(themeLuminance(0.6)).toString();
 
-		bodyStyle.setProperty('--color-activityMinibar-branchBackground', branchBackground);
-		bodyStyle.setProperty('--color-activityMinibar-branchBorder', branchBorder);
-		bodyStyle.setProperty('--color-activityMinibar-branchForeground', pillLabel);
-		bodyStyle.setProperty('--color-activityMinibar-branchMarker', opacity(branchMarker, 70));
+		bodyStyle.setProperty('--color-graph-minimap-branchBackground', branchBackground);
+		bodyStyle.setProperty('--color-graph-minimap-branchBorder', branchBorder);
+		bodyStyle.setProperty('--color-graph-minimap-branchForeground', pillLabel);
+		bodyStyle.setProperty('--color-graph-minimap-branchMarker', opacity(branchMarker, 70));
 
-		bodyStyle.setProperty('--color-activityMinibar-remoteBackground', opacity(branchBackground, 80));
-		bodyStyle.setProperty('--color-activityMinibar-remoteBorder', opacity(branchBorder, 80));
-		bodyStyle.setProperty('--color-activityMinibar-remoteForeground', pillLabel);
-		bodyStyle.setProperty('--color-activityMinibar-remoteMarker', opacity(branchMarker, 30));
+		bodyStyle.setProperty('--color-graph-minimap-remoteBackground', opacity(branchBackground, 80));
+		bodyStyle.setProperty('--color-graph-minimap-remoteBorder', opacity(branchBorder, 80));
+		bodyStyle.setProperty('--color-graph-minimap-remoteForeground', pillLabel);
+		bodyStyle.setProperty('--color-graph-minimap-remoteMarker', opacity(branchMarker, 30));
 
 		bodyStyle.setProperty(
-			'--color-activityMinibar-tagBackground',
+			'--color-graph-minimap-tagBackground',
 			tagColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(),
 		);
 		bodyStyle.setProperty(
-			'--color-activityMinibar-tagBorder',
+			'--color-graph-minimap-tagBorder',
 			tagColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(),
 		);
-		bodyStyle.setProperty('--color-activityMinibar-tagForeground', pillLabel);
+		bodyStyle.setProperty('--color-graph-minimap-tagForeground', pillLabel);
 		bodyStyle.setProperty(
-			'--color-activityMinibar-tagMarker',
+			'--color-graph-minimap-tagMarker',
 			opacity(tagColor.luminance(themeLuminance(0.5)).toString(), 60),
 		);
 

src/webviews/apps/plus/activity/activity-minibar.ts → src/webviews/apps/plus/graph/minimap/minimap.ts

@@ -1,10 +1,10 @@
 import { css, customElement, FASTElement, html, observable, ref } from '@microsoft/fast-element';
 import type { Chart, DataItem, RegionOptions } from 'billboard.js';
 import { bb, selection, spline, zoom } from 'billboard.js';
-import { groupByMap } from '../../../../system/array';
-import { first, flatMap, map, some, union } from '../../../../system/iterable';
-import { pluralize } from '../../../../system/string';
-import { formatDate, formatNumeric, fromNow } from '../../shared/date';
+import { groupByMap } from '../../../../../system/array';
+import { first, flatMap, map, some, union } from '../../../../../system/iterable';
+import { pluralize } from '../../../../../system/string';
+import { formatDate, formatNumeric, fromNow } from '../../../shared/date';
 
 export interface BranchMarker {
 	type: 'branch';
@@ -24,14 +24,14 @@ export interface TagMarker {
 	current?: undefined;
 }
 
-export type ActivityMarker = BranchMarker | RemoteMarker | TagMarker;
+export type GraphMinimapMarker = BranchMarker | RemoteMarker | TagMarker;
 
-export interface ActivitySearchResultMarker {
+export interface GraphMinimapSearchResultMarker {
 	type: 'search-result';
 	sha: string;
 }
 
-export interface ActivityStats {
+export interface GraphMinimapStats {
 	commits: number;
 
 	activity?: { additions: number; deletions: number };
@@ -39,14 +39,14 @@ export interface ActivityStats {
 	sha?: string;
 }
 
-export type ActivityStatsSelectedEvent = CustomEvent<ActivityStatsSelectedEventDetail>;
+export type GraphMinimapDaySelectedEvent = CustomEvent<GraphMinimapDaySelectedEventDetail>;
 
-export interface ActivityStatsSelectedEventDetail {
+export interface GraphMinimapDaySelectedEventDetail {
 	date: Date;
 	sha?: string;
 }
 
-const template = html<ActivityMinibar>`<template>
+const template = html<GraphMinimap>`<template>
 	<div id="chart" ${ref('chart')}></div>
 </template>`;
 
@@ -86,7 +86,7 @@ const styles = css`
 
 	/*-- Grid --*/
 	.bb-xgrid-focus line {
-		stroke: var(--color-activityMinibar-focusLine);
+		stroke: var(--color-graph-minimap-focusLine);
 	}
 
 	/*-- Line --*/
@@ -123,7 +123,7 @@ const styles = css`
 	/*-- Regions --*/
 
 	.bb-region.visible-area {
-		fill: var(--color-activityMinibar-visibleAreaBackground);
+		fill: var(--color-graph-minimap-visibleAreaBackground);
 		/* transform: translateY(26px); */
 		transform: translateY(-4px);
 		z-index: 0;
@@ -134,11 +134,11 @@ const styles = css`
 	}
 
 	/* :host(:hover) .bb-region.visible-area {
-		fill: var(--color-activityMinibar-visibleAreaHoverBackground);
+		fill: var(--color-graph-minimap-visibleAreaHoverBackground);
 	} */
 
 	.bb-region.marker-result {
-		fill: var(--color-activityMinibar-resultMarker);
+		fill: var(--color-graph-minimap-resultMarker);
 		transform: translate(-1px, -4px);
 		z-index: 10;
 	}
@@ -148,7 +148,7 @@ const styles = css`
 	}
 
 	.bb-region.marker-head {
-		fill: var(--color-activityMinibar-headMarker);
+		fill: var(--color-graph-minimap-headMarker);
 		transform: translate(0px, -4px);
 		z-index: 5;
 	}
@@ -158,7 +158,7 @@ const styles = css`
 	}
 
 	.bb-region.marker-upstream {
-		fill: var(--color-activityMinibar-upstreamMarker);
+		fill: var(--color-graph-minimap-upstreamMarker);
 		transform: translate(0px, -4px);
 		z-index: 4;
 	}
@@ -168,7 +168,7 @@ const styles = css`
 	}
 
 	.bb-region.marker-branch {
-		fill: var(--color-activityMinibar-branchMarker);
+		fill: var(--color-graph-minimap-branchMarker);
 		transform: translate(-2px, 26px);
 		z-index: 3;
 	}
@@ -178,7 +178,7 @@ const styles = css`
 	}
 
 	.bb-region.marker-remote {
-		fill: var(--color-activityMinibar-remoteMarker);
+		fill: var(--color-graph-minimap-remoteMarker);
 		transform: translate(-3px, 31px);
 		z-index: 2;
 	}
@@ -188,7 +188,7 @@ const styles = css`
 	}
 
 	.bb-region.marker-tag {
-		fill: var(--color-activityMinibar-tagMarker);
+		fill: var(--color-graph-minimap-tagMarker);
 		transform: translate(1px, 31px);
 		z-index: 1;
 	}
@@ -295,38 +295,38 @@ const styles = css`
 	.bb-tooltip .refs .branch {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-activityMinibar-branchBackground);
-		border: 1px solid var(--color-activityMinibar-branchBorder);
-		color: var(--color-activityMinibar-branchForeground);
+		background-color: var(--color-graph-minimap-branchBackground);
+		border: 1px solid var(--color-graph-minimap-branchBorder);
+		color: var(--color-graph-minimap-branchForeground);
 	}
 	.bb-tooltip .refs .branch.current {
-		background-color: var(--color-activityMinibar-headBackground);
-		border: 1px solid var(--color-activityMinibar-headBorder);
-		color: var(--color-activityMinibar-headForeground);
+		background-color: var(--color-graph-minimap-headBackground);
+		border: 1px solid var(--color-graph-minimap-headBorder);
+		color: var(--color-graph-minimap-headForeground);
 	}
 	.bb-tooltip .refs .remote {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-activityMinibar-remoteBackground);
-		border: 1px solid var(--color-activityMinibar-remoteBorder);
-		color: var(--color-activityMinibar-remoteForeground);
+		background-color: var(--color-graph-minimap-remoteBackground);
+		border: 1px solid var(--color-graph-minimap-remoteBorder);
+		color: var(--color-graph-minimap-remoteForeground);
 	}
 	.bb-tooltip .refs .remote.current {
-		background-color: var(--color-activityMinibar-upstreamBackground);
-		border: 1px solid var(--color-activityMinibar-upstreamBorder);
-		color: var(--color-activityMinibar-upstreamForeground);
+		background-color: var(--color-graph-minimap-upstreamBackground);
+		border: 1px solid var(--color-graph-minimap-upstreamBorder);
+		color: var(--color-graph-minimap-upstreamForeground);
 	}
 	.bb-tooltip .refs .tag {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-activityMinibar-tagBackground);
-		border: 1px solid var(--color-activityMinibar-tagBorder);
-		color: var(--color-activityMinibar-tagForeground);
+		background-color: var(--color-graph-minimap-tagBackground);
+		border: 1px solid var(--color-graph-minimap-tagBorder);
+		color: var(--color-graph-minimap-tagForeground);
 	}
 `;
 
-@customElement({ name: 'activity-minibar', template: template, styles: styles })
-export class ActivityMinibar extends FASTElement {
+@customElement({ name: 'graph-minimap', template: template, styles: styles })
+export class GraphMinimap extends FASTElement {
 	chart!: HTMLDivElement;
 
 	private _chart!: Chart;
@@ -342,10 +342,10 @@ export class ActivityMinibar extends FASTElement {
 	}
 
 	@observable
-	data: Map<number, ActivityStats | null> | undefined;
+	data: Map<number, GraphMinimapStats | null> | undefined;
 	protected dataChanged(
-		_oldVal?: Map<number, ActivityStats | null>,
-		_newVal?: Map<number, ActivityStats | null>,
+		_oldVal?: Map<number, GraphMinimapStats | null>,
+		_newVal?: Map<number, GraphMinimapStats | null>,
 		markerChanged?: boolean,
 	) {
 		if (this._loadTimer) {
@@ -362,13 +362,13 @@ export class ActivityMinibar extends FASTElement {
 	}
 
 	@observable
-	markers: Map<number, ActivityMarker[]> | undefined;
+	markers: Map<number, GraphMinimapMarker[]> | undefined;
 	protected markersChanged() {
 		this.dataChanged(undefined, undefined, true);
 	}
 
 	@observable
-	searchResults: Map<number, ActivitySearchResultMarker> | undefined;
+	searchResults: Map<number, GraphMinimapSearchResultMarker> | undefined;
 	protected searchResultsChanged() {
 		this._chart?.regions.remove({ classes: ['marker-result'] });
 		if (this.searchResults == null) return;
@@ -455,7 +455,7 @@ export class ActivityMinibar extends FASTElement {
 		if (this._markerRegions == null) {
 			if (this.markers != null) {
 				const regions = flatMap(this.markers, ([day, markers]) =>
-					map<ActivityMarker, RegionOptions>(
+					map<GraphMinimapMarker, RegionOptions>(
 						markers,
 						m =>
 							({
@@ -616,7 +616,7 @@ export class ActivityMinibar extends FASTElement {
 							this.$emit('selected', {
 								date: date,
 								sha: sha,
-							} satisfies ActivityStatsSelectedEventDetail);
+							} satisfies GraphMinimapDaySelectedEventDetail);
 						});
 					},
 					selection: {
@@ -630,7 +630,7 @@ export class ActivityMinibar extends FASTElement {
 						// },
 					},
 					colors: {
-						activity: 'var(--color-activityMinibar-line0)',
+						activity: 'var(--color-graph-minimap-line0)',
 						// additions: 'rgba(73, 190, 71, 0.7)',
 						// deletions: 'rgba(195, 32, 45, 0.7)',
 					},

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

@@ -0,0 +1,8 @@
+import { reactWrapper } from '../../../shared/components/helpers/react-wrapper';
+import { GraphMinimap as graphMinimapComponent } from './minimap';
+
+export const GraphMinimap = reactWrapper(graphMinimapComponent, {
+	events: {
+		onSelected: 'selected',
+	},
+});