Fix task title color, fetch and update logs in GUI (#122)

This PR fixes a few GUI issues:

- fix missing state for title color.
- fetch and update logs in GUI

Author: superstar54

aiida_workgraph/web/backend/app/workgraph.py

@@ -62,7 +62,6 @@ async def read_workgraph(id: int):
         get_node_inputs,
         get_node_outputs,
     )
-    from aiida.cmdline.utils.common import get_workchain_report
     from aiida.orm.utils.serialize import deserialize_unsafe
     from aiida_workgraph.utils import get_parent_workgraphs, get_processes_latest
 
@@ -80,12 +79,11 @@ async def read_workgraph(id: int):
             "inputs": get_node_inputs(id),
             "outputs": get_node_outputs(id),
         }
-        report = get_workchain_report(node, "REPORT")
+
         parent_workgraphs = get_parent_workgraphs(id)
         parent_workgraphs.reverse()
         processes_info = get_processes_latest(id)
         content["summary"] = summary
-        content["logs"] = report.splitlines()
         content["parent_workgraphs"] = parent_workgraphs
         content["processes_info"] = processes_info
         return content
@@ -104,6 +102,19 @@ async def read_workgraph_tasks_state(id: int):
         raise HTTPException(status_code=404, detail=f"Workgraph {id} not found")
 
 
+@router.get("/api/workgraph-logs/{id}")
+async def read_workgraph_logs(id: int):
+    from aiida.cmdline.utils.common import get_workchain_report
+
+    try:
+        node = orm.load_node(id)
+        report = get_workchain_report(node, "REPORT")
+        logs = report.splitlines()
+        return logs
+    except KeyError:
+        raise HTTPException(status_code=404, detail=f"Workgraph {id} not found")
+
+
 # Route for pausing a workgraph item
 @router.post("/api/workgraph/pause/{id}")
 async def pause_workgraph(

aiida_workgraph/web/frontend/src/components/WorkGraphItem.tsx

@@ -74,7 +74,7 @@ export function useRete<T extends { destroy(): void }>(
 
 function WorkGraphGraph() {
   const { pk } = useParams();
-  const [workgraphData, setWorktreeData] = useState({ summary: {}, nodes: {}, links: [], logs: [], pk: [] });
+  const [workgraphData, setWorktreeData] = useState({ summary: {}, nodes: {}, links: [], pk: [] });
   const [ref, editor] = useRete(createEditor, workgraphData);
   const [selectedNode, setSelectedNode] = useState({ metadata: [], executor: '' });
   const [showNodeDetails, setShowNodeDetails] = useState(false);
@@ -111,20 +111,24 @@ function WorkGraphGraph() {
         if (nodeName && nodeName in stateData) {
           const nodeState = stateData[nodeName].state;
             if (nodeState === 'FINISHED') {
-            titleElement.style.background = 'green';
+              titleElement.style.background = 'green';
             } else if (nodeState === 'RUNNING') {
-            titleElement.style.background = 'orange';
+              titleElement.style.background = 'orange';
             } else if (nodeState === 'CREATED') {
-            titleElement.style.background = 'blue';
+              titleElement.style.background = 'blue';
+            } else if (nodeState === 'PLANNED') {
+              titleElement.style.background = 'gray';
             } else if (nodeState === 'WAITING') {
-            titleElement.style.background = 'purple'; // Change to the desired color for "waiting"
+              titleElement.style.background = 'purple'; // Change to the desired color for "waiting"
             } else if (nodeState === 'KILLED') {
-            titleElement.style.background = 'red'; // Change to the desired color for "killed"
-            // } else if (nodeState === 'PAUSED') {
-            // titleElement.style.background = 'purple'; // Change to the desired color for "paused"
+              titleElement.style.background = 'pink'; // Change to the desired color for "killed"
+            } else if (nodeState === 'PAUSED') {
+              titleElement.style.background = 'yellow'; // Change to the desired color for "paused"
+            } else if (nodeState === 'FAILED') {
+              titleElement.style.background = 'red'; // Change to the desired color for "failed"
             } else {
-            // Handle any other states or provide a default color
-            titleElement.style.background = 'gray'; // Change to the desired default color
+              // Handle any other states or provide a default color
+              titleElement.style.background = 'lightblue'; // Change to the desired default color
             }
         }
       }
@@ -253,7 +257,7 @@ function WorkGraphGraph() {
           <Button onClick={() => setSelectedView('Time')}>Time</Button>
         </TopMenu>
           {selectedView === 'Summary' && <WorktreeSummary summary={workgraphData.summary} />}
-          {selectedView === 'Log' && <WorkGraphLog logs={workgraphData.logs} />}
+          {selectedView === 'Log' && <WorkGraphLog id={pk} />}
           {selectedView === 'Time' && <NodeDurationGraph id={pk}/>}
           <EditorWrapper visible={selectedView === 'Editor'}>
           <WorkGraphIndicator parentWorktrees={workgraphHierarchy} />

aiida_workgraph/web/frontend/src/components/WorkGraphLog.js

@@ -1,5 +1,6 @@
 // WorkGraphLog.js
 import styled from "styled-components";
+import { useEffect, useState } from "react";
 
 
 export const WorktreeLogStyle = styled.div`
@@ -24,18 +25,41 @@ export const WorktreeLogStyle = styled.div`
 }
 `;
 
-function WorkGraphLog({ logs }) {
+function WorkGraphLog({ id }) {
+  const [fetchedLogs, setFetchedLogs] = useState([]);
+
+  useEffect(() => {
+    fetchLogs(); // Fetch logs immediately
+
+    const interval = setInterval(() => {
+      fetchLogs();
+    }, 4000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  const fetchLogs = async () => {
+    try {
+      const response = await fetch(`http://localhost:8000/api/workgraph-logs/${id}`);
+      const data = await response.json();
+      setFetchedLogs(data);
+    } catch (error) {
+      console.error("Error fetching logs:", error);
+    }
+  };
+
   return (
     <WorktreeLogStyle>
-
-    <div className="log-section">
-      <h3>Log Information</h3>
-      <div className="log-content">
-        {logs.map((log, index) => (
-          <div key={index}>{log}</div>
-        ))}
+      <div className="log-section">
+        <h3>Log Information</h3>
+        <div className="log-content">
+          {fetchedLogs.map((log, index) => (
+            <div key={index}>{log}</div>
+          ))}
+        </div>
       </div>
-    </div>
     </WorktreeLogStyle>
   );
 }