Adds a new control for graph branches visibility

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Adds new ability to search for a GitLab MR in the _Launchpad_ — closes [#3788](https://github.com/gitkraken/vscode-gitlens/issues/3788)
 - Adds go to home view button to the commit graph title section — closes [#3873](https://github.com/gitkraken/vscode-gitlens/issues/3873)
 - Adds a _Contributors_ section to comparison results in the views
+- Adds a new control for graph branches visibility — closes [#3101](https://github.com/gitkraken/vscode-gitlens/issues/3101)
 
 ### Changed
 

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

@@ -100,6 +100,19 @@ import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
 import { GlGraphMinimapContainer } from './minimap/minimap-container.react';
 import { GlGraphSideBar } from './sidebar/sidebar.react';
 
+function getRemoteIcon(type: string | number) {
+	switch (type) {
+		case 'head':
+			return 'vm';
+		case 'remote':
+			return 'cloud';
+		case 'tag':
+			return 'tag';
+		default:
+			return '';
+	}
+}
+
 export interface GraphWrapperProps {
 	nonce?: string;
 	state: State;
@@ -873,7 +886,25 @@ export function GraphWrapper({
 		onChangeColumns?.(graphColumnsConfig);
 	};
 
+	// dirty trick to avoid mutations on the GraphContainer side
+	const fixedExcludeRefsById = useMemo(() => ({ ...excludeRefsById }), [excludeRefsById]);
 	const handleOnToggleRefsVisibilityClick = (_event: any, refs: GraphRefOptData[], visible: boolean) => {
+		if (!visible) {
+			document.getElementById('test')?.animate(
+				[
+					{ offset: 0, background: 'transparent' },
+					{
+						offset: 0.4,
+						background: 'var(--vscode-statusBarItem-warningBackground)',
+					},
+					{ offset: 1, background: 'transparent' },
+				],
+				{
+					duration: 1000,
+					iterations: !Object.keys(fixedExcludeRefsById ?? {}).length ? 2 : 1,
+				},
+			);
+		}
 		onChangeRefsVisibility?.(refs, visible);
 	};
 
@@ -1029,6 +1060,8 @@ export function GraphWrapper({
 		onChangeSelection?.(rows);
 	};
 
+	const hasExcludedRefs = excludeRefsById && Object.keys(excludeRefsById).length;
+
 	return (
 		<>
 			<header className="titlebar graph-app__header">
@@ -1347,6 +1380,59 @@ export function GraphWrapper({
 									<SlOption value="current">Current Branch</SlOption>
 								</SlSelect>
 							</GlTooltip>
+							<div className={`shrink ${!Object.values(excludeRefsById ?? {}).length && 'hidden'}`}>
+								<GlPopover
+									className="popover"
+									placement="bottom-start"
+									trigger="click focus"
+									arrow={false}
+									distance={0}
+								>
+									<GlTooltip placement="top" slot="anchor">
+										<button type="button" id="test" className="action-button">
+											<CodeIcon icon={`eye`} />
+											{Object.values(excludeRefsById ?? {}).length}
+											<CodeIcon
+												className="action-button__more"
+												icon="chevron-down"
+												aria-hidden="true"
+											/>
+										</button>
+										<span slot="content">Hidden branches</span>
+									</GlTooltip>
+									<div slot="content">
+										<MenuLabel>Hidden branches</MenuLabel>
+										{hasExcludedRefs &&
+											[...Object.values(excludeRefsById), null].map(ref =>
+												ref ? (
+													<MenuItem
+														// key prop is skipped intentionally. It allows me to not hide the dropdown after click (I don't know why)
+														onClick={event => {
+															handleOnToggleRefsVisibilityClick(event, [ref], true);
+														}}
+														className="flex-gap"
+													>
+														<CodeIcon icon={getRemoteIcon(ref.type)}></CodeIcon>
+														<span>{ref.name}</span>
+													</MenuItem>
+												) : (
+													// One more weird case. If I render it outside the listed items, the dropdown is hidden after click on the last item
+													<MenuItem
+														onClick={event => {
+															handleOnToggleRefsVisibilityClick(
+																event,
+																Object.values(excludeRefsById ?? {}),
+																true,
+															);
+														}}
+													>
+														Show all
+													</MenuItem>
+												),
+											)}
+									</div>
+								</GlPopover>
+							</div>
 							<GlPopover
 								className="popover"
 								placement="bottom-start"

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

@@ -250,6 +250,20 @@ button:not([disabled]),
 	--button-foreground: var(--color-foreground);
 }
 
+.shrink {
+	max-width: fit-content;
+	transition: all .2s;
+
+	&.hidden {
+		max-width: 0;
+		overflow: hidden;
+		.titlebar__group &:not(:first-child) {
+			// compensate the parent gap
+			margin-left: -0.5rem;
+		}
+	}
+}
+
 .action-button {
 	position: relative;
 	appearance: none;
@@ -475,6 +489,12 @@ button:not([disabled]),
 	z-index: 1040;
 }
 
+.flex-gap {
+	display: flex;
+	gap: 0.5em;
+	align-items: center;
+}
+
 .alert {
 	--alert-foreground: var(--color-alert-foreground);
 	--alert-background: var(--color-alert-infoBackground);