Adds a new control for graph branches visibility

Author: nzaytsev

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);
 	};
 
@@ -1347,6 +1378,57 @@ 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>
+										{Object.values(excludeRefsById ?? {}).map(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 unconditionally, the dropdown is not hidden after click */}
+										{Boolean(Object.values(excludeRefsById ?? {}).length) && (
+											<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);