Refactored zoom threshold logic and improve compact label rendering in nodes

src/main/frontend/app/routes/studio/canvas/flow.config.ts

@@ -14,4 +14,17 @@ export const FlowConfig = {
   MAX_HISTORY: 20, // Adjust this value as needed to limit the number of undo steps
   LAYOUT_HORIZONTAL_OFFSET: 300,
   LAYOUT_VERTICAL_OFFSET: 200,
+  ZOOM_THRESHOLD: 0.6,
+}
+
+/**
+ * Counter-scale factor for compact-mode labels so they stay readable when zoomed out.
+ *
+ * The React Flow viewport scales all node content by `zoom`, so a fixed font size shrinks on
+ * screen as you zoom out. Multiplying a label's font size by this factor keeps its on-screen
+ * size roughly constant. Only called in compact mode (zoom < {@link FlowConfig.ZOOM_THRESHOLD}),
+ * so the result is always >= 1, and the canvas `minZoom` bounds how large it can get.
+ */
+export function getCompactLabelScale(zoom: number): number {
+  return FlowConfig.ZOOM_THRESHOLD / zoom
 }

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -338,7 +338,7 @@
       logApiError('Failed to save XML', error as Error)
       setIdle()
     }
   }, [])
 
   const autosaveEnabled = useSettingsStore((s) => s.general.autoSave.enabled)
   const autosaveDelay = useSettingsStore((s) => s.general.autoSave.delayMs)
@@ -481,7 +481,7 @@
     const mouseEvent = event as MouseEvent
     if (!connectionState.isValid) {
       const zoom = reactFlow.getZoom()
-      if (zoom < 0.4 && sourceInfoReference.current.handleType === 'source') {
+      if (zoom < FlowConfig.ZOOM_THRESHOLD && sourceInfoReference.current.handleType === 'source') {
         const { nodes } = useFlowStore.getState()
         const sourceNode = nodes.find((node) => node.id === sourceInfoReference.current.nodeId)
         if (sourceNode && isFrankNode(sourceNode)) {
@@ -500,7 +500,7 @@
     (connection: Connection) => {
       const zoom = reactFlow.getZoom()
 
-      if (zoom < 0.4 && connection.source) {
+      if (zoom < FlowConfig.ZOOM_THRESHOLD && connection.source) {
         const { nodes } = useFlowStore.getState()
         const sourceNode = nodes.find((node) => node.id === connection.source)
 
@@ -1220,7 +1220,7 @@
     setParentId(null)
   }
 
   function addNodeAtPosition(
     position: { x: number; y: number },
     elementName: string,
     sourceInfo?: { nodeId: string | null; handleId: string | null; handleType: 'source' | 'target' | null },
@@ -1262,7 +1262,7 @@
     if (sourceInfo?.nodeId && sourceInfo.handleType === 'source') {
       const sourceNode = flowStore.nodes.find((node) => node.id === sourceInfo.nodeId)
 
-      if (reactFlow.getZoom() < 0.4 && sourceNode && isFrankNode(sourceNode)) {
+      if (reactFlow.getZoom() < FlowConfig.ZOOM_THRESHOLD && sourceNode && isFrankNode(sourceNode)) {
         if (edgeDropHandleType) {
           const existingHandle = sourceNode.data.sourceHandles.find((handle) => handle.type === edgeDropHandleType)
           if (existingHandle) {

src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx

@@ -17,17 +17,11 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
   const minNodeHeight = FlowConfig.EXIT_DEFAULT_HEIGHT
   const gradientEnabled = useSettingsStore((state) => state.studio.gradient)
   const zoom = useStore((state) => state.transform[2])
-  const isCompact = zoom < 0.4
+  const isCompact = zoom < FlowConfig.ZOOM_THRESHOLD
 
   if (isCompact) {
     return (
-      <ZoomedOutNode
-        subtype={properties.data.subtype}
-        name={properties.data.name}
-        attributes={properties.data.attributes}
-        colorVariable="--type-exit"
-        selected={properties.selected}
-      />
+      <ZoomedOutNode subtype={properties.data.subtype} colorVariable="--type-exit" selected={properties.selected} />
     )
   }
 

src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx

@@ -78,7 +78,7 @@
   } = useNodeContextStore()
   const gradientEnabled = useSettingsStore((state) => state.studio.gradient)
   const zoom = useStore((state) => state.transform[2])
-  const isCompact = zoom < 0.4
+  const isCompact = zoom < FlowConfig.ZOOM_THRESHOLD
   const [isOverflowing, setIsOverflowing] = useState(false)
 
   const frankElement = useMemo(() => {
@@ -346,7 +346,7 @@
 
       addChild(properties.id, child)
     },
     [
       properties.id,
       addChild,
       setIsNewNode,
@@ -402,8 +402,6 @@
     return (
       <ZoomedOutNode
         subtype={properties.data.subtype}
-        name={properties.data.name}
-        attributes={properties.data.attributes}
         colorVariable={colorVariable}
         selected={properties.selected}
         showTargetHandle={properties.data.subtype !== 'Receiver'}

src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx

@@ -1,15 +1,14 @@
-import { Handle, Position } from '@xyflow/react'
-import { FlowConfig } from '~/routes/studio/canvas/flow.config'
+import { Handle, Position, useStore } from '@xyflow/react'
+import { FlowConfig, getCompactLabelScale } from '~/routes/studio/canvas/flow.config'
 
 const COMPACT_INITIALS_BOX_SIZE = 160
 const COMPACT_PADDING_TOP = 8
 const COMPACT_HANDLE_SIZE = 15
 const COMPACT_HANDLE_GAP = 4
+const COMPACT_LABEL_BASE_FONT_PX = 22
 
 export type ZoomedOutNodeProps = {
   subtype: string
-  name?: string
-  attributes?: Record<string, string>
   colorVariable: string
   selected?: boolean
   showTargetHandle?: boolean
@@ -23,20 +22,19 @@ function getAbbreviation(subtype: string): string {
 
 /**
  * Compact representation of a node shown when the canvas is zoomed out far enough that the full
- * node would be unreadable. Renders an initials box with the subtype, name attributes and the
- * handles aligned under it.
+ * node would be unreadable. Renders an initials box with the subtype aligned under it.
  */
 export default function ZoomedOutNode({
   subtype,
-  name,
-  attributes,
   colorVariable,
   selected,
   showTargetHandle = true,
   sourceHandles = [],
   width = FlowConfig.NODE_DEFAULT_WIDTH,
 }: Readonly<ZoomedOutNodeProps>) {
   const abbr = getAbbreviation(subtype)
+  const zoom = useStore((state) => state.transform[2])
+  const labelFontSize = `${COMPACT_LABEL_BASE_FONT_PX * getCompactLabelScale(zoom)}px`
 
   const compactXOffsetPx = (width - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP
   const compactHandleTop =
@@ -65,15 +63,9 @@ export default function ZoomedOutNode({
           </span>
         </div>
 
-        <span className="text-center text-3xl leading-snug font-semibold whitespace-nowrap">{subtype}</span>
-
-        {name && <span className="text-foreground-muted text-center text-3xl whitespace-nowrap">{name}</span>}
-        {attributes &&
-          Object.entries(attributes).map(([key, value]) => (
-            <span key={key} className="text-foreground-muted text-center text-2xl whitespace-nowrap">
-              {value || key}
-            </span>
-          ))}
+        <span className="text-center leading-snug font-semibold whitespace-nowrap" style={{ fontSize: labelFontSize }}>
+          {subtype}
+        </span>
       </div>
 
       {showTargetHandle && (