@@ -12,7 +12,7 @@ import PanelColorPickerPortal from '../PanelColorPickerPortal.jsx';
1212 *
1313 * PERFORMANCE: This component is memoized to prevent re-renders during zoom/pan
1414 */
15- const PanelContentWrapper = memo ( ( {
15+ const PanelContentWrapper = memo ( ( {
1616 tabType, // 'home' | 'node'
1717 nodeId = null ,
1818 storeActions,
@@ -22,15 +22,15 @@ const PanelContentWrapper = memo(({
2222 isUltraSlim = false
2323} ) => {
2424 // #region agent log
25- fetch ( 'http://127.0.0.1:7242/ingest/52d0fe28-158e-49a4-b331-f013fcb14181' , { method : 'POST' , headers : { 'Content-Type' : 'application/json' } , body : JSON . stringify ( { location : 'PanelContentWrapper.jsx:14' , message : 'PanelContentWrapper render START' , data : { tabType , nodeId } , timestamp : Date . now ( ) , sessionId : 'debug-session' , hypothesisId : 'A' } ) } ) . catch ( ( ) => { } ) ;
25+ // Agent log removed
2626 // #endregion
27-
27+
2828 // PERFORMANCE FIX: Use individual selectors instead of destructuring entire store
2929 // This prevents re-renders when viewport state (panOffset/zoomLevel) changes
3030 const nodePrototypes = useGraphStore ( state => state . nodePrototypes ) ;
3131 const activeGraphId = useGraphStore ( state => state . activeGraphId ) ;
3232 const nodeDefinitionIndices = useGraphStore ( state => state . nodeDefinitionIndices ) ;
33-
33+
3434 // CRITICAL PERFORMANCE FIX: Don't subscribe to graphs changes!
3535 // The graphs Map contains panOffset/zoomLevel which change during zoom.
3636 // Instead, read graphs non-reactively using getState() since we don't need
@@ -53,13 +53,13 @@ const PanelContentWrapper = memo(({
5353 if ( ! graphs || ! activeGraphId ) return null ;
5454 const currentGraph = graphs . get ( activeGraphId ) ;
5555 if ( ! currentGraph ) return null ;
56-
56+
5757 const definingNodeId = currentGraph ?. definingNodeIds ?. [ 0 ] ;
5858 if ( definingNodeId && nodePrototypes && nodePrototypes . has ( definingNodeId ) ) {
5959 // Verify the defining node actually exists
6060 return nodePrototypes . get ( definingNodeId ) ;
6161 }
62-
62+
6363 // If no defining node or defining node doesn't exist, create a fallback node data object from the graph
6464 return {
6565 id : activeGraphId ,
@@ -85,10 +85,10 @@ const PanelContentWrapper = memo(({
8585 const getActiveGraphNodes = ( ) => {
8686 // #region agent log
8787 const startTime = performance . now ( ) ;
88- fetch ( 'http://127.0.0.1:7242/ingest/52d0fe28-158e-49a4-b331-f013fcb14181' , { method : 'POST' , headers : { 'Content-Type' : 'application/json' } , body : JSON . stringify ( { location : 'PanelContentWrapper.jsx:71' , message : 'getActiveGraphNodes START' , data : { tabType , activeGraphId } , timestamp : Date . now ( ) , sessionId : 'debug-session' , hypothesisId : 'D' } ) } ) . catch ( ( ) => { } ) ;
88+ // Agent log removed
8989 // #endregion
9090 let targetGraphId = activeGraphId ;
91-
91+
9292 // For node tabs, show components from the node's definition graph if it has one
9393 if ( tabType === 'node' && nodeId && nodePrototypes ) {
9494 const nodeData = nodePrototypes . get ( nodeId ) ;
@@ -102,17 +102,17 @@ const PanelContentWrapper = memo(({
102102 return [ ] ;
103103 }
104104 }
105-
105+
106106 if ( ! graphs ) return [ ] ;
107107 const targetGraph = graphs . get ( targetGraphId ) ;
108108 if ( ! targetGraph || ! targetGraph . instances ) return [ ] ;
109-
109+
110110 // Convert instances to hydrated nodes
111111 const result = Array . from ( targetGraph . instances . values ( ) )
112112 . map ( instance => {
113113 const prototype = nodePrototypes ?. get ( instance . prototypeId ) ;
114114 if ( ! prototype ) return null ;
115-
115+
116116 // Ensure prototype data (including name) is preserved, instance data only adds spatial properties
117117 return {
118118 id : instance . id ,
@@ -131,7 +131,7 @@ const PanelContentWrapper = memo(({
131131 } )
132132 . filter ( Boolean ) ;
133133 // #region agent log
134- fetch ( 'http://127.0.0.1:7242/ingest/52d0fe28-158e-49a4-b331-f013fcb14181' , { method : 'POST' , headers : { 'Content-Type' : 'application/json' } , body : JSON . stringify ( { location : 'PanelContentWrapper.jsx:115' , message : 'getActiveGraphNodes END' , data : { resultCount : result . length , duration : performance . now ( ) - startTime } , timestamp : Date . now ( ) , sessionId : 'debug-session' , hypothesisId : 'D' } ) } ) . catch ( ( ) => { } ) ;
134+ // Agent log removed
135135 // #endregion
136136 return result ;
137137 } ;
@@ -201,7 +201,7 @@ const PanelContentWrapper = memo(({
201201 } ) ( ) ;
202202
203203 // Check if this node is the defining node of the current active graph
204- const isDefiningNodeOfCurrentGraph = activeGraphId && graphData &&
204+ const isDefiningNodeOfCurrentGraph = activeGraphId && graphData &&
205205 graphData . definingNodeIds && graphData . definingNodeIds . includes ( nodeData ?. id ) ;
206206
207207 // Action handlers
@@ -220,21 +220,21 @@ const PanelContentWrapper = memo(({
220220 input . onchange = async ( e ) => {
221221 const file = e . target . files ?. [ 0 ] ;
222222 if ( ! file ) return ;
223-
223+
224224 const reader = new FileReader ( ) ;
225225 reader . onload = async ( loadEvent ) => {
226226 const fullImageSrc = loadEvent . target ?. result ;
227227 if ( typeof fullImageSrc !== 'string' ) return ;
228-
228+
229229 const img = new Image ( ) ;
230230 img . onload = async ( ) => {
231231 try {
232232 const aspectRatio = ( img . naturalHeight > 0 && img . naturalWidth > 0 ) ? ( img . naturalHeight / img . naturalWidth ) : 1 ;
233233 const thumbSrc = await generateThumbnail ( fullImageSrc , THUMBNAIL_MAX_DIMENSION ) ;
234- const nodeDataToSave = {
234+ const nodeDataToSave = {
235235 imageSrc : fullImageSrc ,
236236 thumbnailSrc : thumbSrc ,
237- imageAspectRatio : aspectRatio
237+ imageAspectRatio : aspectRatio
238238 } ;
239239 storeActions . updateNodePrototype ( nodeId , draft => {
240240 Object . assign ( draft , nodeDataToSave ) ;
@@ -254,14 +254,14 @@ const PanelContentWrapper = memo(({
254254 event . stopPropagation ( ) ;
255255 const nodeId = nodeData ?. id ;
256256 if ( ! nodeId ) return ;
257-
257+
258258 // If already open for the same node, close it (toggle behavior)
259259 if ( colorPickerVisible && colorPickerNodeId === nodeId ) {
260260 setColorPickerVisible ( false ) ;
261261 setColorPickerNodeId ( null ) ;
262262 return ;
263263 }
264-
264+
265265 // Open color picker - align with the icon position
266266 const rect = event . currentTarget . getBoundingClientRect ( ) ;
267267 setColorPickerPosition ( { x : rect . right - 10 , y : rect . top - 5 } ) ;
@@ -308,7 +308,7 @@ const PanelContentWrapper = memo(({
308308 if ( storeActions ?. createAndAssignGraphDefinitionWithoutActivation ) {
309309 const sourceGraphId = activeGraphId ; // Capture current graph before it changes
310310 storeActions . createAndAssignGraphDefinitionWithoutActivation ( nodeId ) ;
311-
311+
312312 setTimeout ( ( ) => {
313313 const currentState = useGraphStore . getState ( ) ;
314314 const updatedNodeData = currentState . nodePrototypes . get ( nodeId ) ;
@@ -331,9 +331,9 @@ const PanelContentWrapper = memo(({
331331
332332 const handleMaterializeConnection = ( connection ) => {
333333 console . log ( '[PanelContentWrapper] Materializing semantic connection:' , connection ) ;
334-
334+
335335 const { subject, predicate, object, subjectColor, objectColor } = connection ;
336-
336+
337337 // Find or create subject node prototype (REUSE if exists!)
338338 let subjectPrototypeId = null ;
339339 for ( const [ id , prototype ] of nodePrototypes . entries ( ) ) {
@@ -379,7 +379,7 @@ const PanelContentWrapper = memo(({
379379 definitionGraphIds : [ ]
380380 } ) ;
381381 }
382-
382+
383383 // Add instances to current graph if they don't exist
384384 const currentGraph = graphs . get ( activeGraphId ) ;
385385 if ( currentGraph ) {
@@ -420,7 +420,7 @@ const PanelContentWrapper = memo(({
420420 scale : 1
421421 } , objectInstanceId ) ;
422422 }
423-
423+
424424 // Create edge between instances
425425 // Dedupe: avoid duplicate edges with same S–P–O in current graph
426426 try {
@@ -443,8 +443,8 @@ const PanelContentWrapper = memo(({
443443 color : '#666666'
444444 } ) ;
445445 }
446- } catch { }
447-
446+ } catch { }
447+
448448 console . log ( '[PanelContentWrapper] Created semantic connection in graph:' , {
449449 subjectPrototypeId,
450450 objectPrototypeId,
@@ -470,7 +470,7 @@ const PanelContentWrapper = memo(({
470470 } else {
471471 errorMessage = 'Node data not found...' ;
472472 }
473-
473+
474474 return (
475475 < div style = { { padding : '10px' , color : '#aaa' , fontFamily : "'EmOne', sans-serif" } } >
476476 { errorMessage }
@@ -495,10 +495,10 @@ const PanelContentWrapper = memo(({
495495 onMaterializeConnection = { handleMaterializeConnection }
496496 isHomeTab = { tabType === 'home' }
497497 showExpandButton = { true }
498- expandButtonDisabled = { isDefiningNodeOfCurrentGraph }
498+ expandButtonDisabled = { isDefiningNodeOfCurrentGraph }
499499 isUltraSlim = { isUltraSlim }
500500 />
501-
501+
502502 { /* Color Picker Component - Rendered in Portal to prevent clipping */ }
503503 < PanelColorPickerPortal
504504 isVisible = { colorPickerVisible }
0 commit comments