Refines minimap options

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

@@ -649,6 +649,12 @@ export function GraphWrapper({
 		const value = $el.value as GraphMinimapMarkerTypes;
 
 		if ($el.checked) {
+			if (!graphConfig.minimapMarkerTypes.includes(value)) {
+				const minimapMarkerTypes = [...graphConfig.minimapMarkerTypes, value];
+				setGraphConfig({ ...graphConfig, minimapMarkerTypes: minimapMarkerTypes });
+				onUpdateGraphConfiguration?.({ minimapMarkerTypes: minimapMarkerTypes });
+			}
+		} else {
 			const index = graphConfig.minimapMarkerTypes.indexOf(value);
 			if (index !== -1) {
 				const minimapMarkerTypes = [...graphConfig.minimapMarkerTypes];
@@ -656,10 +662,6 @@ export function GraphWrapper({
 				setGraphConfig({ ...graphConfig, minimapMarkerTypes: minimapMarkerTypes });
 				onUpdateGraphConfiguration?.({ minimapMarkerTypes: minimapMarkerTypes });
 			}
-		} else if (!graphConfig.minimapMarkerTypes.includes(value)) {
-			const minimapMarkerTypes = [...graphConfig.minimapMarkerTypes, value];
-			setGraphConfig({ ...graphConfig, minimapMarkerTypes: minimapMarkerTypes });
-			onUpdateGraphConfiguration?.({ minimapMarkerTypes: minimapMarkerTypes });
 		}
 	};
 
@@ -1435,7 +1437,7 @@ export function GraphWrapper({
 										></span>
 									</button>
 									<MenuList slot="content">
-										<MenuLabel>Show by day</MenuLabel>
+										<MenuLabel>Chart</MenuLabel>
 										<MenuItem role="none">
 											<VSCodeRadioGroup
 												orientation="vertical"
@@ -1449,7 +1451,7 @@ export function GraphWrapper({
 													Commits
 												</VSCodeRadio>
 												<VSCodeRadio name="minimap-datatype" value="lines">
-													Lines Changed (can take a while)
+													Lines Changed
 												</VSCodeRadio>
 											</VSCodeRadioGroup>
 										</MenuItem>
@@ -1460,13 +1462,10 @@ export function GraphWrapper({
 												value="localBranches"
 												onChange={handleOnMinimapAdditionalTypesChange}
 												defaultChecked={
-													!(
-														graphConfig?.minimapMarkerTypes?.includes('localBranches') ??
-														false
-													)
+													graphConfig?.minimapMarkerTypes?.includes('localBranches') ?? false
 												}
 											>
-												Hide Local Branches
+												Local Branches
 											</VSCodeCheckbox>
 										</MenuItem>
 										<MenuItem role="none">
@@ -1474,13 +1473,10 @@ export function GraphWrapper({
 												value="remoteBranches"
 												onChange={handleOnMinimapAdditionalTypesChange}
 												defaultChecked={
-													!(
-														graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ??
-														true
-													)
+													graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ?? true
 												}
 											>
-												Hide Remote Branches
+												Remote Branches
 											</VSCodeCheckbox>
 										</MenuItem>
 										<MenuItem role="none">
@@ -1488,10 +1484,10 @@ export function GraphWrapper({
 												value="stashes"
 												onChange={handleOnMinimapAdditionalTypesChange}
 												defaultChecked={
-													!(graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false)
+													graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false
 												}
 											>
-												Hide Stashes
+												Stashes
 											</VSCodeCheckbox>
 										</MenuItem>
 										<MenuItem role="none">
@@ -1499,10 +1495,10 @@ export function GraphWrapper({
 												value="tags"
 												onChange={handleOnMinimapAdditionalTypesChange}
 												defaultChecked={
-													!(graphConfig?.minimapMarkerTypes?.includes('tags') ?? true)
+													graphConfig?.minimapMarkerTypes?.includes('tags') ?? true
 												}
 											>
-												Hide Tags
+												Tags
 											</VSCodeCheckbox>
 										</MenuItem>
 									</MenuList>

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

@@ -339,8 +339,10 @@ button:not([disabled]),
 	flex-direction: row;
 	align-items: stretch;
 
-	&:hover {
+	&:hover,
+	&:focus-within {
 		background-color: var(--color-graph-actionbar-selectedBackground);
+		border-radius: 3px;
 	}
 
 	> *:not(:first-child),
@@ -351,12 +353,21 @@ button:not([disabled]),
 	}
 
 	> *:not(:first-child) .action-button {
-		padding-left: 0.25rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
 	}
 
 	> *:not(:last-child),
 	> *:not(:last-child) .action-button {
 		padding-right: 0.5rem;
+	}
+
+	&:hover > *:not(:last-child),
+	&:active > *:not(:last-child),
+	&:focus-within > *:not(:last-child),
+	&:hover > *:not(:last-child) .action-button,
+	&:active > *:not(:last-child) .action-button,
+	&:focus-within > *:not(:last-child) .action-button {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}