#398: Table View Interactions

packages/ui/src/utils/isFieldForeignKey.ts

@@ -0,0 +1,28 @@
+/*
+ *
+ * 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 { Schema, SchemaField } from '@overture-stack/lectern-dictionary';
+
+export function isFieldForeignKey(schema: Schema, field: SchemaField): boolean {
+	return (
+		schema.restrictions?.foreignKey?.some((fk) => fk.mappings.some((mapping) => mapping.local === field.name)) || false
+	);
+}

packages/ui/src/utils/isFieldUniqueKey.ts

@@ -0,0 +1,26 @@
+/*
+ *
+ * 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 { Schema, SchemaField } from '@overture-stack/lectern-dictionary';
+
+export function isFieldUniqueKey(schema: Schema, field: SchemaField): boolean {
+	return schema.restrictions?.uniqueKey?.includes(field.name) || field.unique === true || false;
+}

packages/ui/src/viewer-table/DataTable/SchemaTable/Columns/AllowedValuesColumn/RenderAllowedValues.tsx

@@ -20,11 +20,13 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
-import { SchemaField, SchemaFieldRestrictions, SchemaRestrictions } from '@overture-stack/lectern-dictionary';
+import { Schema, SchemaField, SchemaFieldRestrictions, SchemaRestrictions } from '@overture-stack/lectern-dictionary';
 import { type ReactNode } from 'react';
 
 import ReadMoreText from '../../../../../common/ReadMoreText';
 import { type Theme, useThemeContext } from '../../../../../theme/index';
+import { isFieldForeignKey } from '../../../../../utils/isFieldForeignKey';
+import { useDiagramViewContext } from '../../../../DiagramViewContext';
 
 import { computeAllowedValuesColumn, type RestrictionItem } from './ComputeAllowedValues';
 
@@ -47,6 +49,22 @@ const codeListContentStyle = css`
 	gap: 2px;
 `;
 
+const viewInDiagramButtonStyle = (theme: Theme) => css`
+	${theme.typography.paragraphSmallBold}
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 0;
+	background: none;
+	border: none;
+	text-decoration: underline;
+	cursor: pointer;
+	margin-top: 4px;
+	&:hover {
+		color: ${theme.colors.secondary};
+	}
+`;
+
 const renderRestrictionItem = (value: RestrictionItem, key: string): ReactNode => {
 	const { prefix, content } = value;
 	return (
@@ -71,9 +89,12 @@ export const renderAllowedValuesColumn = (
 	fieldLevelRestrictions: SchemaFieldRestrictions,
 	schemaLevelRestrictions: SchemaRestrictions,
 	currentSchemaField: SchemaField,
+	schema?: Schema,
 ) => {
 	const items = computeAllowedValuesColumn(fieldLevelRestrictions, schemaLevelRestrictions, currentSchemaField);
 	const theme: Theme = useThemeContext();
+	const { openFocusedDiagram } = useDiagramViewContext();
+	const isForeignKey = schema ? isFieldForeignKey(schema, currentSchemaField) : false;
 
 	if (!items || Object.keys(items).length === 0) {
 		return (
@@ -83,6 +104,14 @@ export const renderAllowedValuesColumn = (
 				`}
 			>
 				No restrictions provided for this field.
+				{isForeignKey && schema && (
+					<button
+						css={viewInDiagramButtonStyle(theme)}
+						onClick={() => openFocusedDiagram({ schemaName: schema.name, fieldName: currentSchemaField.name })}
+					>
+						View in diagram
+					</button>
+				)}
 			</span>
 		);
 	}
@@ -98,6 +127,14 @@ export const renderAllowedValuesColumn = (
 					:	null
 				);
 			})}
+			{isForeignKey && schema && (
+				<button
+					css={viewInDiagramButtonStyle(theme)}
+					onClick={() => openFocusedDiagram({ schemaName: schema.name, fieldName: currentSchemaField.name })}
+				>
+					View in diagram
+				</button>
+			)}
 		</ReadMoreText>
 	);
 };

packages/ui/src/viewer-table/DataTable/SchemaTable/Columns/Attribute.tsx

@@ -20,15 +20,20 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
-import type { SchemaField } from '@overture-stack/lectern-dictionary';
+import type { Schema, SchemaField } from '@overture-stack/lectern-dictionary';
 import { SchemaFieldRestrictions } from '@overture-stack/lectern-dictionary';
 import { useState } from 'react';
 
 import { type Theme, useThemeContext } from '../../../../theme/index';
+import Key from '../../../../theme/icons/Key';
+import Eye from '../../../../theme/icons/Eye';
+import { isFieldForeignKey } from '../../../../utils/isFieldForeignKey';
 import { isFieldRequired } from '../../../../utils/isFieldRequired';
+import { isFieldUniqueKey } from '../../../../utils/isFieldUniqueKey';
 import { ConditionalLogicModal } from '../../../ConditionalLogicModal/ConditionalLogicModal';
 import { NoMarginParagraph } from '../../../../theme/emotion';
 import OpenModalButton from '../../../OpenModalButton';
+import { useDiagramViewContext } from '../../../DiagramViewContext';
 
 export type Attributes = 'Required' | 'Optional' | 'Required When';
 
@@ -41,10 +46,37 @@ const containerStyle = (theme: Theme) => css`
 	${theme.typography.paragraphSmallBold}
 `;
 
-const buttonTextContainer = css`
+const diagramLinkStyle = (theme: Theme) => css`
+	${theme.typography.paragraphSmallBold}
+	padding: 0;
+	background: none;
+	border: none;
+	color: ${theme.colors.black};
+	text-decoration: underline;
+	cursor: pointer;
+	&:hover {
+		color: ${theme.colors.secondary};
+	}
+`;
+
+const hoverGroupStyle = (theme: Theme) => css`
 	display: flex;
 	flex-direction: column;
-	gap: 0;
+	align-items: center;
+	gap: 10px;
+	&:has(button:hover) svg {
+		stroke: ${theme.colors.secondary};
+	}
+	&:has(button:hover) button {
+		color: ${theme.colors.secondary};
+	}
+`;
+
+const iconGroupStyle = css`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
 `;
 
 /**
@@ -55,21 +87,30 @@ const buttonTextContainer = css`
 export const renderAttributesColumn = (
 	schemaFieldRestrictions: SchemaFieldRestrictions,
 	currentSchemaField?: SchemaField,
+	schema?: Schema,
 ) => {
 	const theme: Theme = useThemeContext();
-	const [isOpen, setIsOpen] = useState(false);
+	const { openFocusedDiagram } = useDiagramViewContext();
+	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const showConditional = !!(schemaFieldRestrictions && 'if' in schemaFieldRestrictions);
+	const isUniqueKey = schema && currentSchemaField && isFieldUniqueKey(schema, currentSchemaField);
+	const isForeignKey = schema && currentSchemaField && isFieldForeignKey(schema, currentSchemaField);
+	const isRequired = currentSchemaField && isFieldRequired(currentSchemaField);
 
 	return (
 		<div css={containerStyle(theme)}>
 			{showConditional ?
 				<>
-					<OpenModalButton onClick={() => setIsOpen(true)}>
-						<div css={buttonTextContainer}>
+					<div css={hoverGroupStyle(theme)}>
+						<div css={iconGroupStyle}>
+							<Eye width={24} height={24} />
+							{(isUniqueKey || isForeignKey) && <Key width={18} height={18} />}
+						</div>
+						<OpenModalButton onClick={() => setIsOpen(true)}>
 							<p css={NoMarginParagraph}>Required</p>
 							<p css={NoMarginParagraph}>When</p>
-						</div>
-					</OpenModalButton>
+						</OpenModalButton>
+					</div>
 					{currentSchemaField && (
 						<ConditionalLogicModal
 							isOpen={isOpen}
@@ -79,7 +120,26 @@ export const renderAttributesColumn = (
 						/>
 					)}
 				</>
-			:	<div>{currentSchemaField && isFieldRequired(currentSchemaField) ? 'Required' : 'Optional'}</div>}
+			: isForeignKey ?
+				<div css={hoverGroupStyle(theme)}>
+					<Key width={18} height={18} />
+					<button
+						css={diagramLinkStyle(theme)}
+						onClick={() => {
+						if (!schema || !currentSchemaField) {
+							return;
+						}
+						openFocusedDiagram({ schemaName: schema.name, fieldName: currentSchemaField.name });
+					}}
+					>
+						{isRequired ? 'Required' : 'Optional'}
+					</button>
+				</div>
+			:	<>
+					{isUniqueKey && <Key width={18} height={18} />}
+					<div>{isRequired ? 'Required' : 'Optional'}</div>
+				</>
+			}
 		</div>
 	);
 };

packages/ui/src/viewer-table/DataTable/SchemaTable/SchemaTableInit.tsx

@@ -50,7 +50,7 @@ export const getSchemaBaseColumns = (schema: Schema) => [
 		cell: (attribute: CellContext<SchemaField, unknown>) => {
 			const schemaField: SchemaField = attribute.row.original;
 			const fieldLevelRestrictions: SchemaFieldRestrictions = schemaField.restrictions;
-			return renderAttributesColumn(fieldLevelRestrictions, schemaField);
+			return renderAttributesColumn(fieldLevelRestrictions, schemaField, schema);
 		},
 	}),
 
@@ -70,7 +70,7 @@ export const getSchemaBaseColumns = (schema: Schema) => [
 			const fieldLevelRestrictions = schemaField.restrictions;
 			const schemaLevelRestrictions = schema.restrictions;
 
-			return renderAllowedValuesColumn(fieldLevelRestrictions, schemaLevelRestrictions, schemaField);
+			return renderAllowedValuesColumn(fieldLevelRestrictions, schemaLevelRestrictions, schemaField, schema);
 		},
 	}),
 ];

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

@@ -0,0 +1,67 @@
+/*
+ *
+ * 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 { createContext, useCallback, useContext, useState } from 'react';
+import type { ReactNode } from 'react';
+
+type DiagramViewContextType = {
+	isOpen: boolean;
+	focusField: { schemaName: string; fieldName: string } | undefined;
+	openDiagram: () => void;
+	openFocusedDiagram: (field: { schemaName: string; fieldName: string }) => void;
+	closeDiagram: () => void;
+};
+
+export const DiagramViewContext = createContext<DiagramViewContextType>({
+	isOpen: false,
+	focusField: undefined,
+	openDiagram: () => {},
+	openFocusedDiagram: () => {},
+	closeDiagram: () => {},
+});
+
+export const useDiagramViewContext = () => useContext(DiagramViewContext);
+
+export function DiagramViewProvider({ children }: { children: ReactNode }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [focusField, setFocusField] = useState<{ schemaName: string; fieldName: string } | undefined>(undefined);
+
+	const openDiagram = useCallback(() => {
+		setFocusField(undefined);
+		setIsOpen(true);
+	}, []);
+
+	const openFocusedDiagram = useCallback((field: { schemaName: string; fieldName: string }) => {
+		setFocusField(field);
+		setIsOpen(true);
+	}, []);
+
+	const closeDiagram = useCallback(() => {
+		setIsOpen(false);
+		setFocusField(undefined);
+	}, []);
+
+	return (
+		<DiagramViewContext.Provider value={{ isOpen, focusField, openDiagram, openFocusedDiagram, closeDiagram }}>
+			{children}
+		</DiagramViewContext.Provider>
+	);
+}