create morph registry

gnowgi · gnowgi · commit 961d9ec03c06 · 2025-09-14T10:20:56.000+05:30
manage morph changes in the UI
diff --git a/nodebook-base/data-store.js b/nodebook-base/data-store.js
@@ -4,6 +4,7 @@ import crypto from 'crypto';
 import { PolyNode, RelationNode, AttributeNode, FunctionNode } from './models.js';
 import { getOperationsFromCnl } from './cnl-parser.js';
 import { GitVersionControl } from './version-control.js';
+import { MorphRegistry } from './morph-registry.js';
 
 /**
  * Abstract Data Store Interface
@@ -40,6 +41,7 @@ export class FileSystemStore extends DataStore {
         super('file-system', { dataPath });
         this.dataPath = dataPath;
         this.gitVersionControl = new GitVersionControl(dataPath);
+        this.morphRegistry = new MorphRegistry();
     }
 
     async initialize() {
@@ -79,7 +81,12 @@ export class FileSystemStore extends DataStore {
         const graphPath = path.join(this.getGraphDataDir(userId, graphId), 'graph.json');
         try {
             const data = await fsp.readFile(graphPath, 'utf-8');
-            return JSON.parse(data);
+            const graphData = JSON.parse(data);
+            
+            // Build morph registry when loading graph
+            this.buildMorphRegistry(graphData);
+            
+            return graphData;
         } catch (error) {
             if (error.code === 'ENOENT') return null;
             throw error;
@@ -626,10 +633,79 @@ export class FileSystemStore extends DataStore {
         // Save the updated graph
         await this.saveGraph(userId, graphId, graphData);
         
+        // Rebuild morph registry after morph change
+        this.buildMorphRegistry(graphData);
+        
         console.log(`[DataStore] Changed node ${nodeId} to morph ${targetMorph.name}`);
         return { success: true, morphName: targetMorph.name };
     }
 
+    // --- Morph Registry Methods ---
+    
+    /**
+     * Build morph registry from graph data
+     * @param {Object} graphData - Graph data object
+     */
+    buildMorphRegistry(graphData) {
+        this.morphRegistry.clear();
+        
+        // Process each node and its morphs
+        graphData.nodes.forEach(node => {
+            if (node.morphs && node.morphs.length > 0) {
+                node.morphs.forEach(morph => {
+                    this.morphRegistry.addMorph(
+                        morph.morph_id,
+                        node.id,
+                        morph.name,
+                        morph.relationNode_ids || [],
+                        morph.attributeNode_ids || []
+                    );
+                });
+            }
+        });
+        
+        const stats = this.morphRegistry.getStats();
+        console.log(`[DataStore] Built morph registry with ${stats.totalMorphs} morphs for ${stats.totalNodes} nodes`);
+    }
+
+    /**
+     * Get filtered relations for a specific morph
+     * @param {Array} relations - All relations
+     * @param {string} morphId - Active morph ID
+     * @returns {Array} Filtered relations
+     */
+    getFilteredRelations(relations, morphId) {
+        return this.morphRegistry.filterRelationsForMorph(relations, morphId);
+    }
+
+    /**
+     * Get filtered attributes for a specific morph
+     * @param {Array} attributes - All attributes
+     * @param {string} morphId - Active morph ID
+     * @returns {Array} Filtered attributes
+     */
+    getFilteredAttributes(attributes, morphId) {
+        return this.morphRegistry.filterAttributesForMorph(attributes, morphId);
+    }
+
+    /**
+     * Get morph data by ID
+     * @param {string} morphId - Morph ID
+     * @returns {Object|null} Morph data
+     */
+    getMorphData(morphId) {
+        return this.morphRegistry.getMorph(morphId);
+    }
+
+    /**
+     * Get all morphs for a node
+     * @param {string} nodeId - Node ID
+     * @returns {Array} Array of morph data
+     */
+    getNodeMorphs(nodeId) {
+        return this.morphRegistry.getNodeMorphs(nodeId);
+    }
+
     // --- Collaboration (Invites) ---
     getCollabInvitesPath(ownerId) {
         return path.join(this.getUserDataDir(ownerId), 'collab_invites.json');
diff --git a/nodebook-base/frontend/src/App.tsx b/nodebook-base/frontend/src/App.tsx
@@ -728,6 +728,7 @@ function App({ onLogout, onGoToDashboard, user }: AppProps) {
                                   publication_state={publicationState}
                                   onPublicationStateChange={handlePublicationStateChange}
                                   graphMode={graphMode}
+                                  onMorphChange={handleMorphChange}
                                 />
                               ) : (
                                 <>
@@ -745,6 +746,7 @@ function App({ onLogout, onGoToDashboard, user }: AppProps) {
                                         nodeRegistry={{}}
                                         isPublic={false}
                                         graphId={activeGraphId || undefined}
+                                        onMorphChange={handleMorphChange}
                                       />
                                     </div>
                                   )}
@@ -852,6 +854,7 @@ function App({ onLogout, onGoToDashboard, user }: AppProps) {
                       publication_state={publicationState}
                       onPublicationStateChange={handlePublicationStateChange}
                       graphMode={graphMode}
+                      onMorphChange={handleMorphChange}
                     />}
                     {viewMode === 'schema' && <SchemaView onSchemaChange={fetchSchemas} />}
                     {viewMode === 'peers' && <PeerTab activeGraphId={activeGraphId} graphKey={activeGraphKey} />}
diff --git a/nodebook-base/frontend/src/DataView.tsx b/nodebook-base/frontend/src/DataView.tsx
@@ -20,6 +20,7 @@ interface DataViewProps {
   publication_state?: 'Private' | 'P2P' | 'Public';
   onPublicationStateChange?: (newState: 'Private' | 'P2P' | 'Public') => void;
   graphMode?: 'markdown' | 'mindmap' | 'richgraph' | 'strictgraph';
+  onMorphChange?: (nodeId: string, morphId: string) => void;
 }
 
 export function DataView({ 
@@ -32,7 +33,8 @@ export function DataView({
   onCnlChange,
   publication_state = 'Private',
   onPublicationStateChange,
-  graphMode = 'richgraph'
+  graphMode = 'richgraph',
+  onMorphChange
 }: DataViewProps) {
   const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
@@ -350,6 +352,7 @@ export function DataView({
               onImportContext={handleImportContext}
               nodeRegistry={nodeRegistry}
               graphId={activeGraphId}
+              onMorphChange={onMorphChange}
             />
           ))}
         </div>
diff --git a/nodebook-base/frontend/src/NodeCard.tsx b/nodebook-base/frontend/src/NodeCard.tsx
@@ -20,9 +20,10 @@ interface NodeCardProps {
   nodeRegistry: any;
   isPublic?: boolean; // Optional prop for public view mode
   graphId?: string; // Explicit graph id for actions
+  onMorphChange?: (nodeId: string, morphId: string) => void; // Callback for morph changes
 }
 
-export function NodeCard({ node, allNodes, allRelations, attributes, isActive, onSelectNode, onImportContext, nodeRegistry, isPublic = false, graphId }: NodeCardProps) {
+export function NodeCard({ node, allNodes, allRelations, attributes, isActive, onSelectNode, onImportContext, nodeRegistry, isPublic = false, graphId, onMorphChange }: NodeCardProps) {
   const cardRef = React.useRef<HTMLDivElement>(null);
   const subgraphSvgRef = React.useRef<string | null>(null);
   const registryEntry = nodeRegistry[node.id];
@@ -158,23 +159,15 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
   };
 
   const handleMorphChange = async (morphId: string) => {
-    if (!graphId || isChangingMorph) return;
+    if (!graphId || isChangingMorph || !onMorphChange) return;
 
     setIsChangingMorph(true);
     try {
-      const response = await authenticatedFetch(`${API_BASE_URL}/api/graphs/${graphId}/nodes/${node.id}/morph`, {
-        method: 'POST',
-        body: JSON.stringify({ morphId })
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        console.log(`Changed to morph: ${result.morphName}`);
-        // Refresh the page to show the updated morph
-        window.location.reload();
-      } else {
-        throw new Error('Failed to change morph');
-      }
+      // Update the node's nbh property locally for immediate UI update
+      node.nbh = morphId;
+      
+      // Notify parent component to handle the API call and refresh graph data
+      await onMorphChange(node.id, morphId);
     } catch (error) {
       console.error('Error changing morph:', error);
       alert('Failed to change morph. See console for details.');
@@ -226,10 +219,16 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
     );
   };
 
-  // Calculate subgraph data
+  // Backend should already filter attributes and relations by active morph
+  // Use all attributes and relations since backend filtering is now handled by morph registry
+  const filteredAttributes = attributes.filter(attr => attr.source_id === node.id);
+  const filteredRelations = allRelations.filter(rel => rel.source_id === node.id || rel.target_id === node.id);
+
+  // Calculate subgraph data using Cytoscape's neighborhood concept
   const subgraphNodes = [node];
-  const subgraphRelations = allRelations.filter(r => r.source_id === node.id || r.target_id === node.id);
-  for (const rel of subgraphRelations) {
+  
+  // Add related nodes (targets of outgoing relations and sources of incoming relations)
+  for (const rel of filteredRelations) {
     const otherNodeId = rel.source_id === node.id ? rel.target_id : rel.source_id;
     if (!subgraphNodes.find(n => n.id === otherNodeId)) {
       const otherNode = allNodes.find(n => n.id === otherNodeId);
@@ -240,7 +239,18 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
   return (
     <div ref={cardRef} className={`node-card ${isActive ? 'active' : ''}`}>
       <div className="node-card-header">
-        <h3>{node.name}</h3>
+        <h3>
+          {(() => {
+            // Show morph name if active morph is not basic
+            if (node.morphs && node.nbh) {
+              const activeMorph = node.morphs.find(m => m.morph_id === node.nbh);
+              if (activeMorph && activeMorph.name !== 'basic') {
+                return `${node.name} (${activeMorph.name})`;
+              }
+            }
+            return node.name;
+          })()}
+        </h3>
         <div className="node-card-header-actions">
           <button 
             className={`publication-toggle ${node.publication_mode?.toLowerCase()}`}
@@ -255,9 +265,10 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
       
       <div className="node-card-image">
         <Subgraph 
+          key={`subgraph-${node.id}-${node.nbh || 'default'}`}
           nodes={subgraphNodes} 
-          relations={subgraphRelations} 
-          attributes={attributes.filter(a => a.source_id === node.id)}
+          relations={filteredRelations} 
+          attributes={filteredAttributes}
           onReady={({ exportSvg }) => { subgraphSvgRef.current = exportSvg(); }}
         />
       </div>
diff --git a/nodebook-base/frontend/src/Subgraph.tsx b/nodebook-base/frontend/src/Subgraph.tsx
@@ -22,6 +22,7 @@ export function Subgraph({ nodes, relations, attributes = [], onReady }: Subgrap
   useEffect(() => {
     if (!containerRef.current || nodes.length === 0) return;
 
+
     const attributeValueNodes = (attributes || []).map(a => ({
       data: {
         id: a.id,
diff --git a/nodebook-base/frontend/src/Visualization.tsx b/nodebook-base/frontend/src/Visualization.tsx
@@ -32,14 +32,26 @@ export function Visualization({ nodes, relations, attributes, onNodeSelect, onMo
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const cyNodes = nodes.map(node => ({
-      data: { 
-        id: node.id, 
-        label: node.name, 
-        type: node.role === 'Transition' ? 'transition' : 'polynode' 
+    const cyNodes = nodes.map(node => {
+      // For polynodes, show morph name if active morph is not basic
+      let displayName = node.name;
+      if (node.role !== 'Transition' && node.morphs && node.nbh) {
+        const activeMorph = node.morphs.find(m => m.morph_id === node.nbh);
+        if (activeMorph && activeMorph.name !== 'basic') {
+          displayName = `${node.name} (${activeMorph.name})`;
+        }
       }
-    }));
+      
+      return {
+        data: { 
+          id: node.id, 
+          label: displayName, 
+          type: node.role === 'Transition' ? 'transition' : 'polynode' 
+        }
+      };
+    });
 
+    // Backend should already filter attributes and relations by active morph
     const attributeValueNodes = attributes.map(attr => ({
         data: {
             id: attr.id,
diff --git a/nodebook-base/morph-registry.js b/nodebook-base/morph-registry.js
diff --git a/nodebook-base/server.js b/nodebook-base/server.js
