feat: enhance PortComponent with memoization and improve code formatting in store files

Author: yakud

apps/chaingraph-frontend/src/components/flow/nodes/ChaingraphNode/PortComponent.tsx

@@ -22,8 +22,8 @@ import type {
 import type {
   PortContextValue,
 } from '@/components/flow/nodes/ChaingraphNode/ports/context/PortContext'
-import { memo } from 'react'
 import { AnyPort } from 'components/flow/nodes/ChaingraphNode/ports/AnyPort/AnyPort'
+import { memo } from 'react'
 import { BooleanPort } from '@/components/flow/nodes/ChaingraphNode/ports/BooleanPort/BooleanPort'
 import { NumberPort } from '@/components/flow/nodes/ChaingraphNode/ports/NumberPort/NumberPort'
 
@@ -46,6 +46,35 @@ export interface PortProps {
   context: PortContextValue
 }
 
+/**
+ * Memoized PortComponent with custom comparison
+ * Only re-renders when port data actually changes, not on parent node position updates
+ */
+export const PortComponent = memo(PortComponentInner, (prev, next) => {
+  // Different port ID = must re-render
+  if (prev.port.id !== next.port.id) {
+    return false
+  }
+
+  // Different node = must re-render
+  if (prev.node.id !== next.node.id) {
+    return false
+  }
+
+  // Node version changed = port data might have changed
+  if (prev.node.getVersion() !== next.node.getVersion()) {
+    return false
+  }
+
+  // Context reference changed (operations are stable, but check anyway)
+  if (prev.context !== next.context) {
+    return false
+  }
+
+  // All checks passed - skip re-render
+  return true
+})
+
 function PortComponentInner(props: PortProps) {
   const {
     node,
@@ -118,32 +147,3 @@ function PortComponentInner(props: PortProps) {
     }
   }
 }
-
-/**
- * Memoized PortComponent with custom comparison
- * Only re-renders when port data actually changes, not on parent node position updates
- */
-export const PortComponent = memo(PortComponentInner, (prev, next) => {
-  // Different port ID = must re-render
-  if (prev.port.id !== next.port.id) {
-    return false
-  }
-
-  // Different node = must re-render
-  if (prev.node.id !== next.node.id) {
-    return false
-  }
-
-  // Node version changed = port data might have changed
-  if (prev.node.getVersion() !== next.node.getVersion()) {
-    return false
-  }
-
-  // Context reference changed (operations are stable, but check anyway)
-  if (prev.context !== next.context) {
-    return false
-  }
-
-  // All checks passed - skip re-render
-  return true
-})

apps/chaingraph-frontend/src/store/nodes/computed/port-context.ts

@@ -186,7 +186,7 @@ export const $nodePortContexts = combine(
 
     // Iterate over ALL nodes, not just those in portEdgesMap
     Object.keys(nodes).forEach((nodeId) => {
-      const nodePortEdges = portEdgesMap[nodeId] || {}  // Empty object if no edges
+      const nodePortEdges = portEdgesMap[nodeId] || {} // Empty object if no edges
 
       // Get or create operations for this node
       let operations = operationsCache.get(nodeId)

apps/chaingraph-frontend/src/store/nodes/computed/port-edges.ts

@@ -9,7 +9,6 @@
 import type { EdgeData } from '@/store/edges/types'
 import { combine } from 'effector'
 import { $edges } from '@/store/edges'
-import { $nodes } from '../stores'
 
 export interface PortEdgesMap {
   [portId: string]: EdgeData[]

apps/chaingraph-frontend/src/store/nodes/stores.ts

@@ -382,7 +382,7 @@ export const $nodePositions = nodesDomain.createStore<Record<string, Position>>(
   .on(updateNodePositionOnly, (state, { nodeId, position }) => {
     const current = state[nodeId]
     if (current?.x === position.x && current?.y === position.y) {
-      return state  // Same reference - no cascade
+      return state // Same reference - no cascade
     }
     return { ...state, [nodeId]: position }
   })
@@ -413,7 +413,8 @@ export const $nodePositions = nodesDomain.createStore<Record<string, Position>>(
   // Node CRUD operations - sync initial positions
   .on(addNode, (state, node) => {
     const position = node.metadata.ui?.position
-    if (!position) return state
+    if (!position)
+      return state
     return { ...state, [node.id]: position }
   })
   .on(addNodes, (state, nodes) => {
@@ -428,7 +429,8 @@ export const $nodePositions = nodesDomain.createStore<Record<string, Position>>(
   })
   .on(updateNode, (state, node) => {
     const position = node.metadata.ui?.position
-    if (!position) return state
+    if (!position)
+      return state
     const current = state[node.id]
     if (current?.x === position.x && current?.y === position.y) {
       return state
@@ -437,7 +439,8 @@ export const $nodePositions = nodesDomain.createStore<Record<string, Position>>(
   })
   // UI updates that include position changes
   .on(updateNodeUILocal, (state, { nodeId, ui }) => {
-    if (!ui?.position) return state
+    if (!ui?.position)
+      return state
     const current = state[nodeId]
     if (current?.x === ui.position.x && current?.y === ui.position.y) {
       return state