@goplasmatic/dataflow-ui 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/dist/dataflow-ui.css +5719 -0
- package/dist/datalogic_wasm-4utZNR2J-B5BvlAcC.cjs +364 -0
- package/dist/datalogic_wasm-4utZNR2J-DW6r1ZIK.js +363 -0
- package/dist/index.cjs +22060 -0
- package/dist/index.d.ts +722 -0
- package/dist/index.js +22060 -0
- package/package.json +72 -0
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://avatars.githubusercontent.com/u/207296579?s=200&v=4" alt="Plasmatic Logo" width="120" height="120">
|
|
3
|
+
|
|
4
|
+
# @goplasmatic/dataflow-ui
|
|
5
|
+
|
|
6
|
+
**React visualization library for dataflow-rs workflow engine**
|
|
7
|
+
|
|
8
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
9
|
+
[](https://www.npmjs.com/package/@goplasmatic/dataflow-ui)
|
|
10
|
+
[](https://www.typescriptlang.org/)
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
A React component library for visualizing and debugging [dataflow-rs](https://github.com/GoPlasmatic/dataflow-rs) workflows. Features an interactive tree view, step-by-step execution debugging, and JSONLogic visualization.
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- **Workflow Visualization** - Interactive tree view of workflows, tasks, and conditions
|
|
20
|
+
- **Execution Debugging** - Step-by-step execution trace visualization with change highlighting
|
|
21
|
+
- **JSONLogic Viewer** - Visual representation of JSONLogic expressions via [@goplasmatic/datalogic-ui](https://www.npmjs.com/package/@goplasmatic/datalogic-ui)
|
|
22
|
+
- **Theme Support** - Light, dark, and system theme modes
|
|
23
|
+
- **TypeScript** - Full type definitions included
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @goplasmatic/dataflow-ui
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { WorkflowVisualizer } from '@goplasmatic/dataflow-ui';
|
|
35
|
+
import '@goplasmatic/dataflow-ui/styles.css';
|
|
36
|
+
|
|
37
|
+
const workflows = [
|
|
38
|
+
{
|
|
39
|
+
id: 'my-workflow',
|
|
40
|
+
name: 'My Workflow',
|
|
41
|
+
tasks: [
|
|
42
|
+
{
|
|
43
|
+
id: 'task-1',
|
|
44
|
+
name: 'Transform Data',
|
|
45
|
+
function: {
|
|
46
|
+
name: 'map',
|
|
47
|
+
input: {
|
|
48
|
+
mappings: [
|
|
49
|
+
{ path: 'data.output', logic: { var: 'data.input' } }
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
];
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
return (
|
|
60
|
+
<WorkflowVisualizer
|
|
61
|
+
workflows={workflows}
|
|
62
|
+
theme="system"
|
|
63
|
+
onTaskSelect={(task, workflow) => console.log('Selected:', task.name)}
|
|
64
|
+
/>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Components
|
|
70
|
+
|
|
71
|
+
### WorkflowVisualizer
|
|
72
|
+
|
|
73
|
+
The main component for displaying workflows.
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
interface WorkflowVisualizerProps {
|
|
77
|
+
workflows: Workflow[];
|
|
78
|
+
onWorkflowSelect?: (workflow: Workflow) => void;
|
|
79
|
+
onTaskSelect?: (task: Task, workflow: Workflow) => void;
|
|
80
|
+
theme?: 'light' | 'dark' | 'system';
|
|
81
|
+
className?: string;
|
|
82
|
+
executionResult?: Message | null;
|
|
83
|
+
debugMode?: boolean;
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Debug Mode
|
|
88
|
+
|
|
89
|
+
Enable step-by-step execution visualization:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { WorkflowVisualizer, DebuggerProvider, DebuggerControls } from '@goplasmatic/dataflow-ui';
|
|
93
|
+
|
|
94
|
+
function DebugView() {
|
|
95
|
+
return (
|
|
96
|
+
<DebuggerProvider>
|
|
97
|
+
<WorkflowVisualizer workflows={workflows} debugMode={true} />
|
|
98
|
+
<DebuggerControls />
|
|
99
|
+
</DebuggerProvider>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Exports
|
|
105
|
+
|
|
106
|
+
### Components
|
|
107
|
+
- `WorkflowVisualizer` - Main visualization component
|
|
108
|
+
- `TreeView` - Standalone tree view
|
|
109
|
+
- `DebuggerControls` - Debug playback controls
|
|
110
|
+
- `DebuggerProvider` - Debug state context provider
|
|
111
|
+
|
|
112
|
+
### Hooks
|
|
113
|
+
- `useTheme` - Access theme state
|
|
114
|
+
- `useDebugger` - Access debugger state and controls
|
|
115
|
+
- `useTaskDebugState` - Get debug state for a specific task
|
|
116
|
+
|
|
117
|
+
### Types
|
|
118
|
+
All TypeScript types are exported for workflow definitions, tasks, messages, and execution traces.
|
|
119
|
+
|
|
120
|
+
## Peer Dependencies
|
|
121
|
+
|
|
122
|
+
- React 18.x or 19.x
|
|
123
|
+
- React DOM 18.x or 19.x
|
|
124
|
+
|
|
125
|
+
## Related Packages
|
|
126
|
+
|
|
127
|
+
- [dataflow-rs](https://crates.io/crates/dataflow-rs) - Core Rust workflow engine
|
|
128
|
+
- [@goplasmatic/dataflow-wasm](https://www.npmjs.com/package/@goplasmatic/dataflow-wasm) - WebAssembly bindings
|
|
129
|
+
- [@goplasmatic/datalogic-ui](https://www.npmjs.com/package/@goplasmatic/datalogic-ui) - JSONLogic visualization
|
|
130
|
+
|
|
131
|
+
## License
|
|
132
|
+
|
|
133
|
+
This project is licensed under the Apache License, Version 2.0. See the [LICENSE](../LICENSE) file for details.
|