#394: Diagram View Modal

packages/ui/src/common/Modal.tsx

@@ -1,6 +1,6 @@
 /*
  *
- * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ * Copyright (c) 2026 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
@@ -36,6 +36,7 @@ export type ModalProps = {
 	onAfterOpen?: () => void;
 	children?: ReactNode;
 	title: string;
+	subtitle?: string;
 };
 
 // Using react-modal's built-in styling system instead of emotion css for modal configuration
@@ -85,8 +86,16 @@ const titleStyle = (theme: Theme) => css`
 	${theme.typography.subtitleBold};
 	color: ${theme.colors.accent};
 `;
+
+const subtitleStyle = (theme: Theme) => css`
+	${theme.typography.data};
+	color: ${theme.colors.black};
+	margin-top: 8px;
+	margin-bottom: 0;
+`;
+
 Modal.setAppElement('body');
-const ModalComponent = ({ children, setIsOpen, isOpen, onAfterOpen, title }: ModalProps) => {
+const ModalComponent = ({ children, setIsOpen, isOpen, onAfterOpen, title, subtitle }: ModalProps) => {
 	const theme: Theme = useThemeContext();
 	return (
 		<>
@@ -106,7 +115,10 @@ const ModalComponent = ({ children, setIsOpen, isOpen, onAfterOpen, title }: Mod
 				bodyOpenClassName="modal-open"
 			>
 				<div css={headerStyle(theme)}>
-					<span css={titleStyle(theme)}>{title}</span>
+					<div>
+						<span css={titleStyle(theme)}>{title}</span>
+						{subtitle && <p css={subtitleStyle(theme)}>{subtitle}</p>}
+					</div>
 					<Button iconOnly onClick={() => setIsOpen(false)} icon={<Cancel />} />
 				</div>
 				<div css={bodyStyle}>{children}</div>

packages/ui/src/viewer-table/Toolbar/DiagramViewButton.tsx

@@ -0,0 +1,50 @@
+/*
+ *
+ * Copyright (c) 2026 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.
+ *
+ */
+
+import { useState } from 'react';
+
+import Button from '../../common/Button';
+import Modal from '../../common/Modal';
+import { useDictionaryDataContext } from '../../dictionary-controller/DictionaryDataContext';
+import { useThemeContext } from '../../theme/index';
+
+const DiagramViewButton = () => {
+	const [isOpen, setIsOpen] = useState(false);
+	const theme = useThemeContext();
+	const { Eye } = theme.icons;
+	const { loading, errors } = useDictionaryDataContext();
+
+	return (
+		<>
+			<Button icon={<Eye />} onClick={() => setIsOpen(true)} disabled={loading || errors.length > 0} isLoading={loading}>
+				Diagram View
+			</Button>
+			<Modal
+				title="Diagram View"
+				subtitle="Select any key field or edge to highlight a relation."
+				isOpen={isOpen}
+				setIsOpen={setIsOpen}
+			/>
+		</>
+	);
+};
+
+export default DiagramViewButton;

packages/ui/src/viewer-table/Toolbar/Toolbar.tsx

@@ -1,6 +1,6 @@
 /*
  *
- * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
+ * Copyright (c) 2026 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
@@ -29,6 +29,7 @@ import { ToolbarSkeleton } from '../Loading';
 
 import AttributeFilterDropdown from './AttributeFilterDropdown';
 import CollapseAllButton from './CollapseAllButton';
+import DiagramViewButton from './DiagramViewButton';
 import DictionaryDownloadButton from './DictionaryDownloadButton';
 import ExpandAllButton from './ExpandAllButton';
 import TableOfContentsDropdown from './TableOfContentsDropdown';
@@ -84,6 +85,7 @@ const Toolbar = ({ onSelect, setIsCollapsed, isCollapsed }: ToolbarProps) => {
 				:	<CollapseAllButton onClick={() => setIsCollapsed(true)} />}
 			</div>
 			<div css={sectionStyles}>
+				<DiagramViewButton />
 				<DictionaryDownloadButton fileType="tsv" />
 			</div>
 		</div>

packages/ui/src/viewer-table/Toolbar/index.ts

@@ -1,5 +1,6 @@
 export { default as AttributeFilterDropdown } from './AttributeFilterDropdown.js';
 export { default as CollapseAllButton, type CollapseAllButtonProps } from './CollapseAllButton.js';
+export { default as DiagramViewButton } from './DiagramViewButton.js';
 export { default as DictionaryDownloadButton, type DictionaryDownloadButtonProps } from './DictionaryDownloadButton.js';
 export { default as ExpandAllButton, type ExpandAllButtonProps } from './ExpandAllButton.js';
 export { default as TableOfContentsDropdown, type TableOfContentsDropdownProps } from './TableOfContentsDropdown.js';

packages/ui/stories/viewer-table/Toolbar/DiagramViewButton.stories.tsx

@@ -0,0 +1,45 @@
+/*
+ *
+ * Copyright (c) 2026 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.
+ *
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import DiagramViewButton from '../../../src/viewer-table/Toolbar/DiagramViewButton';
+
+import { multipleDictionaryData, withDictionaryContext, withForeverLoading } from '../../dictionaryDecorator';
+import themeDecorator from '../../themeDecorator';
+
+const meta = {
+	component: DiagramViewButton,
+	title: 'Viewer - Table/Toolbar/DiagramViewButton',
+	tags: ['autodocs'],
+	decorators: [themeDecorator(), withDictionaryContext(multipleDictionaryData)],
+} satisfies Meta<typeof DiagramViewButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Loading: Story = {
+	decorators: [themeDecorator(), withForeverLoading()],
+};