data-primals-engine 1.6.2 → 1.6.3

package/client/src/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useMemo, useEffect} from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import {FaPlus, FaSpinner, FaCog} from "react-icons/fa"; // Ajout FaTrash
+import {FaPlus, FaSpinner, FaCog, FaEye} from "react-icons/fa"; // Ajout FaTrash
 
 import "./Dashboard.scss"
 import {useMutation, useQuery, useQueryClient} from "react-query";

package/client/src/WorkflowEditor.jsx

@@ -12,6 +12,7 @@ import { useModelContext } from './contexts/ModelContext';
 import { useAuthContext } from './contexts/AuthContext';
 import { Trans, useTranslation } from 'react-i18next';
 import { CodeField } from "./Field.jsx";
+import { useData } from './hooks/data.js';
 import { useQuery } from 'react-query';
 
 import "./WorkflowEditor.scss"
@@ -32,6 +33,23 @@ const WorkflowEditor = ({ workflowId }) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     const [selectedNode, setSelectedNode] = useState(null);
+    const [highlightedElements, setHighlightedElements] = useState({ nodes: new Set(), edges: new Set() });
+    const [workflowRuns, setWorkflowRuns] = useState([]);
+    const [selectedRun, setSelectedRun] = useState(null);
+
+    // --- CORRECTION ---
+    // On utilise le hook `useData` comme prévu, en lui passant directement les paramètres de la requête.
+    // Cela corrige l'erreur "Cannot read properties of undefined (reading 'queryKey')".
+    const { data: runsData, refetch: refetchRuns } = useData(
+        'workflowRun', // queryKey
+        { model: 'workflowRun', filter: { workflow: workflowId }, sort: 'startedAt:DESC', limit: 10 }, // queryParams
+        {
+            queryKey: ['workflowRuns', workflowId],
+            enabled: !!workflowId,
+            // --- CORRECTION ---
+            // Le hook `useData` retourne déjà le tableau de données. On utilise donc `data` directement.
+            onSuccess: (data) => setWorkflowRuns(data || [])
+        });
     const [panelWidth, setPanelWidth] = useState(300);
     const resizeData = useRef({ isResizing: false, initialX: 0, initialWidth: 0 });
 
@@ -157,6 +175,7 @@ const WorkflowEditor = ({ workflowId }) => {
                 const nodePosition = { x: parentPosition.x, y: parentPosition.y + 120 };
                 initialNodes.push({
                     id: step._id,
+                    // --- NOUVEAU --- Ajout d'une classe de base pour le styling
                     type: 'default',
                     className: 'workflow-step-node',
                     position: nodePosition,
@@ -182,6 +201,7 @@ const WorkflowEditor = ({ workflowId }) => {
                     initialNodes.push({
                         id: action._id,
                         type: 'default',
+                        // --- NOUVEAU --- Ajout d'une classe de base pour le styling
                         className: 'workflow-action-node',
                         position: actionNodePosition,
                         data: {
@@ -220,6 +240,62 @@ const WorkflowEditor = ({ workflowId }) => {
         }
     }, [mainWorkflowData, workflowStepsData, workflowActionsData, setNodes, setEdges, t]);
 
+    // --- NOUVEAU ---
+    // Ce `useEffect` est le cœur de la nouvelle fonctionnalité.
+    // Il s'exécute chaque fois que l'utilisateur sélectionne un `workflowRun` différent.
+    useEffect(() => {
+        if (!selectedRun) {
+            // Si aucun run n'est sélectionné, on réinitialise tous les styles.
+            setNodes((nds) =>
+                nds.map((node) => ({
+                    ...node,
+                    className: node.className?.split(' ')[0] // Garde seulement la classe de base (ex: 'workflow-step-node')
+                }))
+            );
+            setEdges((eds) =>
+                eds.map((edge) => ({
+                    ...edge,
+                    animated: false,
+                    className: ''
+                }))
+            );
+            return;
+        }
+
+        // 1. Identifier tous les IDs des nœuds (étapes et actions) qui ont été exécutés.
+        const executedStepIds = new Set(selectedRun.history.map(h => h.stepId));
+        const executedActionIds = new Set(selectedRun.history.flatMap(h => h.actions?.map(a => a.actionId) || []));
+        const allExecutedNodeIds = new Set([
+            `workflow-start-${mainWorkflowData._id}`, // Toujours inclure le nœud de départ
+            ...executedStepIds,
+            ...executedActionIds
+        ]);
+
+        // 2. Mettre à jour les nœuds pour ajouter une classe 'executed'.
+        setNodes((nds) =>
+            nds.map((node) => {
+                const baseClass = node.className?.split(' ')[0] || '';
+                if (allExecutedNodeIds.has(node.id)) {
+                    return { ...node, className: `${baseClass} executed` };
+                }
+                return { ...node, className: baseClass }; // Rétablir la classe de base si non exécuté
+            })
+        );
+
+        // 3. Mettre à jour les arêtes pour les animer si elles connectent deux nœuds exécutés.
+        setEdges((eds) =>
+            eds.map((edge) => {
+                const isExecuted = allExecutedNodeIds.has(edge.source) && allExecutedNodeIds.has(edge.target);
+                return {
+                    ...edge,
+                    animated: isExecuted,
+                    className: isExecuted ? 'executed' : ''
+                };
+            })
+        );
+
+    }, [selectedRun, setNodes, setEdges, mainWorkflowData]);
+
     const onConnect = useCallback(
         (params) => setEdges((eds) => addEdge(params, eds)),
         [setEdges],
@@ -264,6 +340,11 @@ const WorkflowEditor = ({ workflowId }) => {
             {/* Panneau latéral pour l'édition des propriétés */}
             {selectedNode && (
                 <div className="properties-panel" style={{ width: `${panelWidth}px`, padding: '10px', borderLeft: '1px solid #ccc' }}>
+                    <select onChange={(e) => setSelectedRun(workflowRuns.find(r => r._id === e.target.value))} value={selectedRun?._id || ''}>
+                        <option value="">{t('select_a_run', 'Select a run to debug')}</option>
+                        {workflowRuns.map(run => <option key={run._id} value={run._id}>{new Date(run.startedAt).toLocaleString()} - {run.status}</option>)}
+                    </select>
+                    <button onClick={() => refetchRuns()}>{t('refresh', 'Refresh')}</button>
                     <div
                         className="resizer"
                         onMouseDown={handleMouseDown}
@@ -271,6 +352,26 @@ const WorkflowEditor = ({ workflowId }) => {
                     <h3><Trans i18nKey="properties">Propriétés</Trans></h3>
                     <p><strong>ID:</strong> {selectedNode.id}</p>
 
+                    {/* --- NOUVELLE SECTION POUR L'HISTORIQUE --- */}
+                    {selectedRun && selectedRun.history && selectedRun.history.find(h => h.stepId === selectedNode.id) && (
+                        <div className="mt-2 p-2 border rounded bg-gray-50">
+                            <strong><Trans i18nKey="run_history">Run History</Trans> ({selectedRun.status})</strong>
+                            {selectedRun.history.filter(h => h.stepId === selectedNode.id).map((historyEntry, index) => (
+                                <div key={index} className="mt-1 text-sm">
+                                    <p><strong><Trans i18nKey="executed_at">Executed at:</Trans></strong> {new Date(historyEntry.executedAt).toLocaleTimeString()}</p>
+                                    <p><strong><Trans i18nKey="status">Status:</Trans></strong> {historyEntry.status}</p>
+                                    {historyEntry.actions?.length > 0 && (
+                                        <ul className="pl-4 list-disc">
+                                            {historyEntry.actions.map((actionHist, aIndex) => (
+                                                <li key={aIndex}>{actionHist.actionName}: {actionHist.status} ({actionHist.result})</li>
+                                            ))}
+                                        </ul>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
                     {/* Affiche les conditions pour un workflowStep */}
                     {selectedNode.data.conditions && (
                         <div className="mt-2">

package/client/src/WorkflowEditor.scss

@@ -1,16 +1,41 @@
 
 .workflow-step-node {
-  background-color: #e0e7ff; /* Un bleu clair pour les étapes */
-  border-color: #a5b4fc;
+  background-color: #f3f4f6; /* Gris clair par défaut */
+  border-color: #d1d5db;
   border-width: 2px;
   font-weight: bold;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .workflow-action-node {
-  background-color: #f0f9ff; /* Un bleu très clair pour les actions */
-  border-color: #bae6fd;
+  background-color: #f9fafb; /* Gris très clair par défaut */
+  border-color: #e5e7eb;
   border-width: 1px;
   border-style: dashed;
   width: auto;
   min-width: 150px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* --- NOUVEAU : Styles pour les éléments exécutés --- */
+
+/* Style pour les nœuds (étapes et actions) qui ont été exécutés */
+.react-flow__node.executed {
+  background-color: #dcfce7; /* Vert clair */
+  border-color: #4ade80; /* Vert plus prononcé */
+}
+
+/* Style pour les arêtes qui font partie du chemin d'exécution */
+.react-flow__edge.executed .react-flow__edge-path {
+  stroke: #2563eb; /* Bleu vif */
+  stroke-width: 2.5;
+}
+
+/* Style pour l'animation sur les arêtes exécutées */
+.react-flow__edge.executed.animated .react-flow__edge-path {
+  animation-duration: 1s;
+}
+
+.react-flow__edge-textbg {
+  fill: #f9fafb;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-primals-engine",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "data-primals-engine is a package responsible from handling large amount of data using MongoDB in a practical and performant way. It can also get workflow models working (for automation), and fully supports internationalisation. It also has integrated AI assistant.",
   "main": "src/engine.js",
   "type": "module",