#396: Field & Edge Interactions

packages/ui/src/theme/emotion/schemaNodeStyles.ts

@@ -22,13 +22,21 @@
 import { css } from '@emotion/react';
 import type { Theme } from '../';
 
-export const fieldRowStyles = css`
+export const fieldRowStyles = (theme: Theme, isForeignKey: boolean, isEven: boolean) => css`
 	padding: 12px 12px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	transition: background-color 0.2s;
 	position: relative;
+	background-color: ${isEven ? '#e5edf3' : 'transparent'};
+	border-block: 1.5px solid ${isEven ? '#d4dce2' : 'transparent'};
+	${isForeignKey ? 'cursor: pointer;' : ''}
+
+	&:hover {
+		background-color: ${isForeignKey ? theme.colors.secondary_1 : theme.colors.grey_3};
+		border-block: 1.5px solid ${isForeignKey ? theme.colors.secondary_dark : theme.colors.grey_4};
+	}
 `;
 
 export const fieldContentStyles = css`
@@ -102,10 +110,6 @@ export const nodeSubtitleTextStyle = css`
 export const fieldsListStyles = css`
 	background: #f8fafc;
 	overflow-y: auto;
-	& > div:nth-child(even) {
-		background-color: #e5edf3;
-		border-block: 1.5px solid #d4dce2;
-	}
 `;
 
 export const fieldNameContainerStyles = css`

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

@@ -20,6 +20,8 @@
  */
 
 /** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { type Theme, useThemeContext } from '../../theme';
 import type { Dictionary } from '@overture-stack/lectern-dictionary';
 import ReactFlow, {
 	Background,
@@ -43,6 +45,19 @@ type EntityRelationshipDiagramProps = {
 	layout?: Partial<SchemaNodeLayout>;
 };
 
+const edgeHoverStyles = (theme: Theme) => css`
+	.react-flow__edge {
+		cursor: pointer;
+	}
+	.react-flow__edge-path {
+		stroke: ${theme.colors.black};
+		stroke-width: 2;
+	}
+	.react-flow__edge:hover .react-flow__edge-path {
+		stroke: ${theme.colors.secondary_dark};
+	}
+`;
+
 /**
  * Entity Relationship Diagram visualizing schemas and their foreign key relationships.
  *
@@ -55,26 +70,29 @@ type EntityRelationshipDiagramProps = {
 export function EntityRelationshipDiagram({ dictionary, layout }: EntityRelationshipDiagramProps) {
 	const [nodes, , onNodesChange] = useNodesState(getNodesForDictionary(dictionary, layout));
 	const [edges, , onEdgesChange] = useEdgesState(getEdgesForDictionary(dictionary));
+	const theme = useThemeContext();
 
 	return (
 		<>
 			<OneCardinalityMarker />
-			<ReactFlow
-				nodes={nodes}
-				edges={edges}
-				onNodesChange={onNodesChange}
-				onEdgesChange={onEdgesChange}
-				nodeTypes={nodeTypes}
-				fitView
-				fitViewOptions={{ padding: 20, maxZoom: 1.5, minZoom: 0.5 }}
-				style={{ width: '100%', height: '100%' }}
-				defaultViewport={{ x: 0, y: 0, zoom: 1.0 }}
-				minZoom={0.1}
-				maxZoom={3}
-			>
-				<Controls />
-				<Background variant={BackgroundVariant.Lines} />
-			</ReactFlow>
+			<div css={edgeHoverStyles(theme)} style={{ width: '100%', height: '100%' }}>
+				<ReactFlow
+					nodes={nodes}
+					edges={edges}
+					onNodesChange={onNodesChange}
+					onEdgesChange={onEdgesChange}
+					nodeTypes={nodeTypes}
+					fitView
+					fitViewOptions={{ padding: 20, maxZoom: 1.5, minZoom: 0.5 }}
+					style={{ width: '100%', height: '100%' }}
+					defaultViewport={{ x: 0, y: 0, zoom: 1.0 }}
+					minZoom={0.1}
+					maxZoom={3}
+				>
+					<Controls />
+					<Background variant={BackgroundVariant.Lines} />
+				</ReactFlow>
+			</div>
 		</>
 	);
 }

packages/ui/src/viewer-table/EntityRelationshipDiagram/SchemaNode.tsx

@@ -59,11 +59,11 @@ export function SchemaNode(props: { data: Schema }) {
 						schema.restrictions?.foreignKey?.some((fk) =>
 							fk.mappings.some((mapping) => mapping.local === field.name),
 						) || false;
-
+					const isEvenRow = index % 2 === 1;
 					const valueType = field.isArray ? `${field.valueType}[]` : field.valueType;
 
 					return (
-						<div key={index} css={fieldRowStyles}>
+						<div key={index} css={fieldRowStyles(theme, isForeignKey, isEvenRow)}>
 							<div css={fieldContentStyles}>
 								<span css={fieldNameStyles(theme)}>{field.name}</span>
 							</div>

packages/ui/src/viewer-table/EntityRelationshipDiagram/diagramUtils.ts

@@ -87,7 +87,6 @@ export function getEdgesForDictionary(dictionary: Dictionary): Edge[] {
 				target: schema.name,
 				targetHandle: createFieldHandleId(schema.name, mapping.local, 'target'),
 				type: 'smoothstep',
-				style: { stroke: '#374151', strokeWidth: 2 },
 				pathOptions: {
 					offset: -20,
 				},