Skip to main content

🧪 Testing Guide for Workflow Studio UX Fixes

Date: October 25, 2025
Branch: rc-3
Files Changed: 3 core components + CSS + documentation

🎯 Quick Start​

# Navigate to web app
cd web/typescript/valkyr_labs_com

# Install dependencies (if needed)
yarn install

# Start dev server
yarn dev

# Navigate to Workflow Builder
# URL: http://localhost:5173/workflow/builder (or similar)

✅ Test Checklist​

Test 1: Component Palette Drag Smoothness​

Location: Open Workflow Builder page

Steps:

  1. Locate the floating component palette toolbar (left side or floating)
  2. Hover over any module item in the palette
    • ✅ Item should lift up 2px smoothly
    • ✅ Border should glow with blue accent color
    • ✅ Cursor should change to "grab" pointer
  3. Click and drag a module item
    • ✅ Cursor should change to "grabbing"
    • ✅ Drag ghost should appear with 80% opacity
    • ✅ Drag should be smooth with no lag
  4. Release the module on the canvas
    • ✅ Node should be created at drop position
    • ✅ No console errors

Expected Performance:

  • Hover animation: < 50ms
  • Drag start: Instant
  • Frame rate during drag: 60 FPS
  • No state update warnings in console

Test 2: Floating Toolbar Drag & Resize​

Location: Workflow Builder - Component Palette

Steps:

  1. Locate the toolbar header (top bar with grip icon)
  2. Click and drag the header
    • ✅ Toolbar should move smoothly
    • ✅ No jumping or stuttering
    • ✅ Position updates should feel instant
  3. Release and drag again rapidly
    • ✅ No lag build-up
    • ✅ Consistent smooth motion
  4. Locate the resize handle (bottom-right corner)
  5. Click and drag to resize
    • ✅ Resize should be smooth
    • ✅ Content should reflow correctly
    • ✅ No state conflicts

Expected Performance:

  • Drag updates: 5-10 per second (not 50+)
  • No console warnings about state updates
  • Memory usage stable during drag
  • Toolbar stops exactly where released

Debug Commands (Browser Console):

// Check for excessive re-renders
// Open React DevTools → Profiler
// Record while dragging
// Look for <DraggableFloatingToolbar> render count
// Should be < 20 for a 2-second drag

Test 3: 3D Viewer Redux Integration​

Location: Workflow Builder - Overview Tab

Steps:

  1. Open Workflow Builder
  2. Create a new workflow or load existing one
  3. Add 2-3 tasks to the workflow canvas
  4. Switch to "Overview" tab
  5. Check 3D Viewer section
    • ✅ Tasks should appear as 3D spheres
    • ✅ Each task should be visible
    • ✅ Rotating/orbiting (from modules)
  6. Return to canvas and add another task
  7. Switch back to Overview tab
    • ✅ New task should appear in 3D viewer
    • ✅ No loading spinner stuck
  8. Remove a task from canvas
  9. Check 3D viewer again
    • ✅ Task should disappear from 3D view

Expected Behavior:

  • 3D viewer updates in real-time
  • No infinite loading spinners
  • Empty state shows: "No tasks to visualize..."
  • Network tab shows NO unnecessary /Task API calls

Debug Commands (Browser Console):

// Check Redux state
import { store } from "@/redux/store";
store.getState().workflowEditor.draft.tasks;
// Should match what you see in 3D viewer

// Check if viewer is connected to Redux
// Open React DevTools → Components
// Find Workflow3DViewer
// Check hooks: should see useAppSelector

Test 4: State Management Stability​

Location: Browser DevTools → Console

Steps:

  1. Open browser DevTools (F12)
  2. Go to Console tab
  3. Perform all above tests
  4. Monitor for warnings/errors

Expected Results:

  • ✅ NO "Maximum update depth exceeded" warnings
  • ✅ NO "Cannot update a component while rendering" errors
  • ✅ NO infinite loop warnings
  • ✅ Clean console (or only unrelated warnings)

Common Issues (Now Fixed):

  • ❌ "Warning: Maximum update depth exceeded" → FIXED in DraggableFloatingToolbar
  • ❌ "Cannot update during an existing state transition" → FIXED with isDragging guard
  • ❌ "useEffect dependency array" warnings → FIXED with proper deps

🔍 Visual Inspection Guide​

Component Palette Items​

Correct Appearance (Hover):

  • Background: Slightly lighter
  • Border: Blue glow (#38bdf8 at 50% opacity)
  • Shadow: 2-layer shadow with accent ring
  • Transform: Lift 2px up, scale 1.02x
  • Transition: Smooth cubic-bezier

Correct Appearance (Active/Dragging):

  • Cursor: "grabbing" pointer
  • Opacity: 0.9
  • Scale: 1.05x
  • Drag ghost: Semi-transparent clone

3D Viewer​

Correct Appearance:

  • Canvas: Dark background (rgba(0,0,0,0.3))
  • Tasks: Colored spheres (green/orange/red based on status)
  • Modules: Rotating small boxes around tasks
  • Labels: White text above each sphere
  • Empty state: Centered message, light gray text

🐛 Troubleshooting​

Issue: Drag is still laggy​

Check:

  1. Open React DevTools → Profiler
  2. Record while dragging
  3. Look for component with excessive renders
  4. Verify hasInitialized is true after first render

Solution:

// Should see this in DraggableFloatingToolbar
const [hasInitialized, setHasInitialized] = useState(false);

// And this guard in useEffect
if (isDragging || isResizing) return;

Issue: 3D Viewer is empty​

Check:

  1. Open Redux DevTools
  2. Navigate to State → workflowEditor → draft → tasks
  3. Verify tasks array exists and has items
  4. Check Workflow3DViewer props in React DevTools

Solution:

// Verify this connection exists in Workflow3DViewer.tsx
const workflowDraft = useAppSelector(selectWorkflowDraft);
const sourceTasks = propTasks || workflowDraft?.tasks || fetchedTasks;

Issue: Palette items not draggable​

Check:

  1. Verify draggable attribute is true
  2. Check onDragStart handler is attached
  3. Look for JavaScript errors in console

Solution:

<div
  draggable
  onDragStart={(e) => onDragStart(e, item)}
  className="palette-item"
>

📊 Performance Benchmarks​

Acceptable Performance​

MetricTargetHow to Measure
Drag FPS60Chrome DevTools → Performance → Record during drag
State updates/sec< 10React DevTools → Profiler
3D render time< 100msPerformance API: performance.now() before/after
Memory growth< 5MBChrome DevTools → Memory → Take heap snapshot

Commands for Benchmarking​

// In browser console

// 1. Measure drag performance
let dragStart = performance.now();
// ... perform drag ...
let dragEnd = performance.now();
console.log("Drag took:", dragEnd - dragStart, "ms");

// 2. Count re-renders
let renderCount = 0;
// Add to component: useEffect(() => { renderCount++; });
// After test: console.log('Renders:', renderCount);

// 3. Check memory
performance.memory.usedJSHeapSize / 1048576; // MB

✅ Sign-Off Criteria​

Before marking as complete:

  • All drag operations smooth (60 FPS)
  • No console errors or warnings
  • 3D viewer shows current workflow tasks
  • Hover effects work correctly
  • Resize/drag toolbar stable
  • Memory usage stable over 5 minutes
  • Works in Chrome, Firefox, Safari
  • Redux state matches UI state

🚀 Deployment Checklist​

Before deploying to production:

  • Run full test suite: yarn test
  • Build without warnings: yarn build
  • Test on staging environment
  • Performance test with 50+ nodes
  • Mobile/tablet touch testing
  • Screen reader testing (basic)
  • Update CHANGELOG.md
  • Tag release: v1.0.1 (or appropriate)

📝 Reporting Issues​

If you find a bug:

  1. Check if it's a known issue (see WORKFLOW_UX_FIXES_OCT25.md)
  2. Gather information:
    • Browser and version
    • Steps to reproduce
    • Console errors (screenshot)
    • Expected vs actual behavior
  3. Create GitHub issue with template:
### Bug Report: [Component] - [Issue]

**Environment**:

- Browser: Chrome 120
- OS: macOS 14
- Branch: rc-3

**Steps to Reproduce**:

1. Open Workflow Builder
2. Drag component palette
3. ...

**Expected**: Smooth drag
**Actual**: Lag after 2 seconds

**Console Errors**:

[paste errors here]


**Screenshots**: [attach]

🎓 Learning Resources​

Understanding the Fixes​

  1. React Hook Dependencies: https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
  2. Redux Best Practices: https://redux.js.org/style-guide/
  3. React Performance: https://react.dev/learn/render-and-commit
  • N8N_KILLER_UX_UPDATE.md - Original UX requirements
  • WORKFLOW_UX_FIXES_OCT25.md - Detailed fix documentation
  • systemPatterns.md - Architecture patterns
  • techContext.md - Technical context

Happy Testing! 🎉

If all tests pass, you have successfully verified the smoothest workflow UX ever created! 🚀