rendering morph data in html in the NodeCard

transition state change of morphs of a polynode and refreshing visualization

Author: gnowgi

nodebook-base/frontend/src/App.tsx

@@ -153,20 +153,29 @@ function App({ onLogout, onGoToDashboard, user }: AppProps) {
     if (!activeGraphId) return;
 
     try {
+      console.log(`[App] Changing morph for node ${nodeId} to ${morphId}`);
+      
       const response = await authenticatedFetch(`/api/graphs/${activeGraphId}/nodes/${nodeId}/morph`, {
         method: 'POST',
         body: JSON.stringify({ morphId })
       });
 
+      console.log(`[App] Morph change response:`, { status: response.status, ok: response.ok });
+      
       if (response.ok) {
+        const result = await response.json();
+        console.log(`[App] Morph change successful:`, result);
+        
         // Refresh the graph data to show the updated morph
-        await loadGraphData(activeGraphId);
+        fetchGraph(activeGraphId);
       } else {
-        throw new Error('Failed to change morph');
+        const errorText = await response.text();
+        console.error(`[App] Morph change failed:`, { status: response.status, error: errorText });
+        throw new Error(`Failed to change morph: ${response.status} ${errorText}`);
       }
     } catch (error) {
-      console.error('Error changing morph:', error);
-      alert('Failed to change morph. See console for details.');
+      console.error('[App] Error changing morph:', error);
+      alert(`Failed to change morph: ${error.message}`);
     }
   };
   const [isWordNetLoading, setIsWordNetLoading] = useState(false);

nodebook-base/frontend/src/NodeCard.css

@@ -236,4 +236,47 @@
   color: #007bff;
   font-size: 0.8rem;
   font-style: italic;
+}
+
+/* Morph data display */
+.node-morph-data {
+  margin: 1rem 0;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+}
+
+.node-morph-data h4 {
+  margin: 0 0 0.75rem 0;
+  color: #495057;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.node-morph-data h5 {
+  margin: 0.5rem 0 0.25rem 0;
+  color: #6c757d;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.morph-attributes ul,
+.morph-relations ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  list-style-type: disc;
+}
+
+.morph-attributes li,
+.morph-relations li {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.morph-attributes strong,
+.morph-relations strong {
+  color: #495057;
+  font-weight: 500;
 }

nodebook-base/frontend/src/NodeCard.tsx

@@ -163,14 +163,18 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
 
     setIsChangingMorph(true);
     try {
+      console.log(`[NodeCard] Changing morph for node ${node.id} to ${morphId}`);
+      
       // 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);
+      
+      console.log(`[NodeCard] Morph change completed successfully`);
     } catch (error) {
-      console.error('Error changing morph:', error);
-      alert('Failed to change morph. See console for details.');
+      console.error('[NodeCard] Error changing morph:', error);
+      alert(`Failed to change morph: ${error.message}`);
     } finally {
       setIsChangingMorph(false);
     }
@@ -273,6 +277,44 @@ export function NodeCard({ node, allNodes, allRelations, attributes, isActive, o
         />
       </div>
 
+      {/* HTML display of relations and attributes for current morph */}
+      {!isPublic && (filteredRelations.length > 0 || filteredAttributes.length > 0) && (
+        <div className="node-morph-data">
+          <h4>Current Morph Data</h4>
+          
+          {filteredAttributes.length > 0 && (
+            <div className="morph-attributes">
+              <h5>Attributes:</h5>
+              <ul>
+                {filteredAttributes.map(attr => (
+                  <li key={attr.id}>
+                    <strong>{attr.name}:</strong> {attr.value}
+                    {attr.unit && <span> {attr.unit}</span>}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          
+          {filteredRelations.length > 0 && (
+            <div className="morph-relations">
+              <h5>Relations:</h5>
+              <ul>
+                {filteredRelations.map(rel => {
+                  const otherNodeId = rel.source_id === node.id ? rel.target_id : rel.source_id;
+                  const otherNode = allNodes.find(n => n.id === otherNodeId);
+                  return (
+                    <li key={rel.id}>
+                      <strong>{rel.name}</strong> → {otherNode?.name || otherNodeId}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
       {node.description && (
         <div className="node-description">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{node.description}</ReactMarkdown>