+ | ${instance.workflow_instance_id} |
+ ${instance.status} |
+ ${formatDate(instance.create_time)} |
+ ${formatDate(instance.start_time)} |
+ ${formatDate(instance.end_time)} |
+ ${instance.workflow_uuid} |
+
+ `).join('');
+
+ // Add click handlers to instance rows
+ document.querySelectorAll('.instance-row').forEach(row => {
+ row.addEventListener('click', function() {
+ const status = this.getAttribute('data-status');
+ if (status && status.toLowerCase() !== "created") {
+ const instanceId = this.getAttribute('data-instance-id');
+ onInstanceClick(instanceId);
+ }
+ });
+ });
+}
+
+/**
+ * Shows the instance details panel
+ * @param {string} instanceId - The ID of the instance to show
+ */
+function showInstanceDetails(instanceId) {
+ document.getElementById('instanceIdDisplay').textContent = instanceId;
+ document.getElementById('instanceDetailsContainer').style.display = 'block';
+}
+
+/**
+ * Populates the run selector dropdown
+ * @param {Object} instance - The workflow instance
+ * @param {Function} onRunChange - Callback function when a run is selected
+ */
+function populateRunSelector(instance, onRunChange) {
+ const runSelector = document.getElementById('runSelector');
+ runSelector.innerHTML = '';
+
+ // Add the latest run
+ const option = document.createElement('option');
+ option.value = instance.workflow_run_id;
+ option.textContent = `Run ${instance.workflow_run_id} (Latest)`;
+ runSelector.appendChild(option);
+
+ // Add event listener to run selector
+ runSelector.addEventListener('change', function() {
+ onRunChange(this.value);
+ });
+
+ return instance.workflow_run_id;
+}
+
+/**
+ * Visualizes the DAG (Directed Acyclic Graph) of a workflow run
+ * @param {Object} run - The workflow run data
+ * @param {Function} onStepClick - Callback function when a step is clicked
+ */
+async function visualizeDAG(run, onStepClick) {
+ const dagContainer = document.getElementById('dagContainer');
+ dagContainer.innerHTML = '';
+
+ // Hide step details
+ document.getElementById('stepDetailsContainer').style.display = 'none';
+
+ // Check if we have a runtime DAG
+ if (!run.runtime_dag) {
+ dagContainer.innerHTML = 'No DAG information available for this run.
';
+ return;
+ }
+
+ // Get the steps from the runtime workflow
+ const steps = run.runtime_workflow.steps;
+ if (!steps || steps.length === 0) {
+ dagContainer.innerHTML = 'No steps available for this run.
';
+ return;
+ }
+
+ // Create nodes for each step
+ const nodes = {};
+ const horizontalSpacing = 200;
+ const verticalSpacing = 100;
+
+ // First, create a map of step ID to step
+ const stepsMap = {};
+ steps.forEach(stepObj => {
+ const step = stepObj.step;
+ stepsMap[step.id] = step;
+ });
+
+ // Create a map of step ID to level (depth in the DAG)
+ const levels = {};
+ const visited = new Set();
+
+ // Find root nodes (steps with no predecessors)
+ const rootNodes = [];
+ for (const stepId in run.runtime_dag) {
+ const transition = run.runtime_dag[stepId];
+ if (!transition.predecessors || transition.predecessors.length === 0) {
+ rootNodes.push(stepId);
+ }
+ }
+
+ // Assign levels to nodes using BFS
+ const queue = rootNodes.map(id => ({ id, level: 0 }));
+ while (queue.length > 0) {
+ const { id, level } = queue.shift();
+ if (visited.has(id)) continue;
+
+ visited.add(id);
+ levels[id] = level;
+
+ // Add successors to queue
+ const transition = run.runtime_dag[id];
+ if (transition && transition.successors) {
+ for (const successorId in transition.successors) {
+ queue.push({ id: successorId, level: level + 1 });
+ }
+ }
+ }
+
+ // Count nodes at each level
+ const nodesAtLevel = {};
+ for (const id in levels) {
+ const level = levels[id];
+ nodesAtLevel[level] = (nodesAtLevel[level] || 0) + 1;
+ }
+
+ // Calculate positions for each node
+ const positions = {};
+ for (const id in levels) {
+ const level = levels[id];
+ const levelNodes = Object.entries(levels)
+ .filter(([_, l]) => l === level)
+ .map(([id]) => id);
+
+ const index = levelNodes.indexOf(id);
+ const x = level * horizontalSpacing + 50;
+ const y = (index + 0.5) * verticalSpacing + 50;
+
+ positions[id] = { x, y };
+ }
+
+ // Create nodes
+ for (const stepId in stepsMap) {
+ const step = stepsMap[stepId];
+ const position = positions[stepId] || { x: 50, y: 50 };
+
+ // Get step status from step details
+ const stepDetails = await onStepClick(stepId, true);
+ let status = stepDetails.runtime_state.status;
+
+ // Create node element
+ const node = document.createElement('div');
+ node.className = `step-node status-${status.toLowerCase()}`;
+ node.id = `step-${stepId}`;
+ node.setAttribute('data-step-id', stepId);
+ node.style.left = `${position.x}px`;
+ node.style.top = `${position.y}px`;
+ node.innerHTML = `
+