#271: Implement Expand All and Collapse All Buttons

packages/ui/src/common/Button.tsx

@@ -0,0 +1,143 @@
+/*
+ *
+ * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ *  This program and the accompanying materials are made available under the terms of
+ *  the GNU Affero General Public License v3.0. You should have received a copy of the
+ *  GNU Affero General Public License along with this program.
+ *   If not, see <http://www.gnu.org/licenses/>.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+/** @jsxImportSource @emotion/react */
+// This is a slightly refactored version of the stage button
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/react';
+
+import { Theme } from '../theme';
+import { useThemeContext } from '../theme/ThemeContext';
+
+type ButtonProps = {
+	children?: ReactNode;
+	disabled?: boolean;
+	onClick?: (
+		e: React.SyntheticEvent<HTMLButtonElement>,
+	) => any | ((e: React.SyntheticEvent<HTMLButtonElement>) => Promise<any>);
+	isAsync?: boolean;
+	className?: string;
+	isLoading?: boolean;
+	leftIcon?: ReactNode;
+	width?: string;
+};
+
+const getButtonContainerStyles = (theme: any, width?: string) => css`
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: center;
+	gap: 11px;
+	width: ${width || 'auto'};
+	min-width: fit-content;
+	padding: 8px 16px;
+	background-color: #f7f7f7;
+	color: ${theme.colors.black};
+	border: 1px solid #beb2b294;
+	border-radius: 9px;
+	height: 42px;
+	box-sizing: border-box;
+	cursor: pointer;
+	position: relative;
+	transition: all 0.2s ease;
+
+	&:hover {
+		background-color: ${theme.colors.grey_1};
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+`;
+
+const getContentStyles = (theme: Theme, shouldShowLoading: boolean) => css`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	${theme.typography.button};
+	color: inherit;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	visibility: ${shouldShowLoading ? 'hidden' : 'visible'};
+`;
+
+const getSpinnerStyles = (shouldShowLoading: boolean) => css`
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	visibility: ${shouldShowLoading ? 'visible' : 'hidden'};
+`;
+
+const getIconStyles = () => css`
+	display: flex;
+	align-items: center;
+`;
+
+/**
+ * This is the generic button component used throughout stage, however it has
+ * the styling that is specific to the current theme that is being used.
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{
+			children,
+			onClick = () => {},
+			disabled = false,
+			isAsync = false,
+			className,
+			isLoading: controlledLoading,
+			leftIcon,
+			width,
+		}: ButtonProps,
+		ref,
+	) => {
+		const [internalLoading, setInternalLoading] = React.useState(false);
+
+		const shouldShowLoading = !!controlledLoading || (internalLoading && isAsync);
+		const handleClick = async (event: React.SyntheticEvent<HTMLButtonElement>) => {
+			setInternalLoading(true);
+			await onClick(event);
+			setInternalLoading(false);
+		};
+		const theme = useThemeContext();
+		const { Spinner } = theme.icons;
+		return (
+			<button
+				ref={ref}
+				onClick={isAsync ? handleClick : onClick}
+				disabled={disabled || shouldShowLoading}
+				className={className}
+				css={getButtonContainerStyles(theme, width)}
+			>
+				{leftIcon && !shouldShowLoading && <span css={getIconStyles()}>{leftIcon}</span>}
+				<span css={getContentStyles(theme, shouldShowLoading)}>{children}</span>
+				<span css={getSpinnerStyles(shouldShowLoading)}>
+					<Spinner height={20} width={20} />
+				</span>
+			</button>
+		);
+	},
+);
+
+export default Button;

packages/ui/src/theme/icons/Collapse.tsx

@@ -0,0 +1,49 @@
+/*
+ *
+ * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ *  This program and the accompanying materials are made available under the terms of
+ *  the GNU Affero General Public License v3.0. You should have received a copy of the
+ *  GNU Affero General Public License along with this program.
+ *   If not, see <http://www.gnu.org/licenses/>.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+/** @jsxImportSource @emotion/react */
+
+import IconProps from './IconProps';
+
+const Collapse = ({ fill, width, height, style }: IconProps) => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={width || '24'}
+			height={height || '24'}
+			viewBox="0 0 24 24"
+			css={style}
+			fill={fill || 'none'}
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="m15 18-.722-3.25" />
+			<path d="M2 8a10.645 10.645 0 0 0 20 0" />
+			<path d="m20 15-1.726-2.05" />
+			<path d="m4 15 1.726-2.05" />
+			<path d="m9 18 .722-3.25" />
+		</svg>
+	);
+};
+
+export default Collapse;

packages/ui/src/theme/icons/Eye.tsx

@@ -0,0 +1,46 @@
+/*
+ *
+ * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ *  This program and the accompanying materials are made available under the terms of
+ *  the GNU Affero General Public License v3.0. You should have received a copy of the
+ *  GNU Affero General Public License along with this program.
+ *   If not, see <http://www.gnu.org/licenses/>.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+/** @jsxImportSource @emotion/react */
+
+import IconProps from './IconProps';
+
+const Eye = ({ fill, width, height, style }: IconProps) => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={width || '24'}
+			height={height || '24'}
+			viewBox="0 0 24 24"
+			css={style}
+			fill={fill || 'none'}
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+			<circle cx="12" cy="12" r="3" />
+		</svg>
+	);
+};
+
+export default Eye;

packages/ui/src/theme/icons/Spinner.tsx

@@ -0,0 +1,54 @@
+/*
+ *
+ * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ *  This program and the accompanying materials are made available under the terms of
+ *  the GNU Affero General Public License v3.0. You should have received a copy of the
+ *  GNU Affero General Public License along with this program.
+ *   If not, see <http://www.gnu.org/licenses/>.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+/** @jsxImportSource @emotion/react */
+
+import { css, keyframes } from '@emotion/react';
+import IconProps from './IconProps';
+
+// Animation
+const spin = keyframes`
+    100% {
+    transform: rotate(360deg);
+    }
+`;
+
+const Spinner = ({ fill, height, width }: IconProps) => {
+	return (
+		<svg
+			viewBox={'0 0 20 20'}
+			width={width || '24px'}
+			height={height || '24px'}
+			css={css`
+				height: 20px;
+				animation: ${spin} 1.4s linear infinite;
+			`}
+		>
+			<path
+				fill={fill || 'none'}
+				fillRule="evenodd"
+				d="M10.455 0c1.003 0 1.818.779 1.818 1.74 0 .96-.815 1.738-1.818 1.738-1.004 0-1.819-.779-1.819-1.739C8.636.78 9.451 0 10.455 0zm0 18.26c.502 0 .909.39.909.87s-.407.87-.91.87c-.502 0-.909-.39-.909-.87s.407-.87.91-.87zM5.073 1.519c.797-.44 1.816-.179 2.276.584.46.763.187 1.737-.61 2.178-.797.44-1.816.179-2.276-.584-.46-.762-.187-1.737.61-2.178zm9.55 15.824a.777.777 0 0 1 1.035.266c.21.346.085.79-.277.99a.776.776 0 0 1-1.035-.266.708.708 0 0 1 .278-.99zM1.267 5.367c.419-.693 1.345-.93 2.07-.53.725.4.973 1.286.555 1.98-.419.693-1.346.93-2.07.53-.725-.4-.973-1.287-.555-1.98zm16.54 9.122a.621.621 0 0 1 .827-.212c.29.16.39.514.222.791a.621.621 0 0 1-.828.212.566.566 0 0 1-.222-.791zM1.363 9.13c.753 0 1.363.584 1.363 1.305 0 .72-.61 1.304-1.363 1.304S0 11.155 0 10.435c0-.72.61-1.305 1.364-1.305zm18.181.87c.251 0 .455.194.455.435 0 .24-.204.435-.455.435a.445.445 0 0 1-.454-.435c0-.24.204-.435.454-.435zM1.97 13.78c.58-.32 1.321-.13 1.656.425.335.555.136 1.264-.444 1.584-.58.32-1.32.13-1.655-.424-.335-.555-.136-1.264.443-1.584zm16.21-7.947a.31.31 0 0 1 .414.106.283.283 0 0 1-.11.396.31.31 0 0 1-.414-.106.283.283 0 0 1 .11-.396zM4.995 17.462c.293-.486.942-.652 1.449-.372.507.28.68.9.388 1.386-.293.485-.941.651-1.449.371a.99.99 0 0 1-.388-1.385z"
+			/>
+		</svg>
+	);
+};
+
+export default Spinner;

packages/ui/src/theme/styles/icons.ts

@@ -1,4 +1,10 @@
 import ChevronDown from '../icons/ChevronDown';
+import Spinner from '../icons/Spinner';
+import Collapse from '../icons/Collapse';
+import Eye from '../icons/Eye';
 export default {
 	ChevronDown,
+	Spinner,
+	Collapse,
+	Eye,
 };

packages/ui/src/theme/styles/typography.ts

@@ -35,11 +35,11 @@ const regular = css`
 
 const button = css`
 	${baseFont}
-	font-size: 16px;
-	font-weight: bold;
+	font-size: 20px;
+	font-weight: 700;
 	font-style: normal;
 	font-stretch: normal;
-	line-height: 18px;
+	line-height: 100%;
 	letter-spacing: normal;
 `;
 

packages/ui/src/viewer-table/InteractionPanel/CollapseAllButton.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import Button from '../../common/Button';
+import { useThemeContext } from '../../theme/ThemeContext';
+
+export interface CollapseAllButtonProps {
+	onClick: () => void;
+}
+
+const CollapseAllButton = ({ onClick }: CollapseAllButtonProps) => {
+	const theme = useThemeContext();
+	const { Collapse } = theme.icons;
+
+	return (
+		<Button leftIcon={<Collapse />} onClick={onClick}>
+			Collapse All
+		</Button>
+	);
+};
+
+export default CollapseAllButton;

packages/ui/src/viewer-table/InteractionPanel/ExpandAllButton.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import Button from '../../common/Button';
+import { useThemeContext } from '../../theme/ThemeContext';
+
+export interface ExpandAllButtonProps {
+	onClick: () => void;
+}
+
+const ExpandAllButton = ({ onClick }: ExpandAllButtonProps) => {
+	const theme = useThemeContext();
+	const { Eye } = theme.icons;
+
+	return (
+		<Button leftIcon={<Eye />} onClick={onClick}>
+			Expand All
+		</Button>
+	);
+};
+
+export default ExpandAllButton;

packages/ui/stories/common/Button.stories.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @emotion/react */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import themeDecorator from '../themeDecorator';
+import Button from '../../src/common/Button';
+
+const meta = {
+	component: Button,
+	title: 'Common/Button',
+	tags: ['autodocs'],
+	decorators: [themeDecorator()],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: { children: 'Click Me', onClick: () => alert('I have been clicked'), className: 'my-button', leftIcon: '👍' },
+};
+export const Disabled: Story = {
+	args: { children: 'Disabled', disabled: true },
+};
+export const Loading: Story = {
+	args: { isLoading: true, children: 'Loading...' },
+};
+export const Empty: Story = {
+	args: {},
+};