@railtownai/railtracks-visualizer 0.0.4 → 0.0.5
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/LICENSE +201 -201
- package/README.md +52 -52
- package/dist/cjs/index.js +55 -40
- package/dist/cjs/index.js.map +1 -0
- package/dist/esm/index.js +55 -12
- package/dist/esm/index.js.map +1 -0
- package/dist/types/src/AgenticFlowVisualizer.d.ts.map +1 -0
- package/dist/types/src/App.d.ts.map +1 -0
- package/dist/types/src/Visualizer.d.ts.map +1 -0
- package/dist/types/src/components/Edge.d.ts.map +1 -0
- package/dist/types/src/components/FileSelector.d.ts.map +1 -0
- package/dist/types/src/components/Node.d.ts.map +1 -0
- package/dist/types/src/components/Timeline.d.ts.map +1 -0
- package/dist/types/src/components/VerticalTimeline.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -0
- package/dist/types/src/hooks/useApi.d.ts.map +1 -0
- package/dist/types/src/hooks/useFlowData.d.ts.map +1 -0
- package/dist/types/{index.d.ts → src/index.d.ts} +1 -3
- package/dist/types/src/index.d.ts.map +1 -0
- package/dist/types/tests/setup.d.ts.map +1 -0
- package/package.json +93 -82
- package/dist/cjs/AgenticFlowVisualizer.js +0 -750
- package/dist/cjs/App.js +0 -94
- package/dist/cjs/Visualizer.js +0 -16
- package/dist/cjs/components/Edge.js +0 -75
- package/dist/cjs/components/FileSelector.js +0 -28
- package/dist/cjs/components/Node.js +0 -104
- package/dist/cjs/components/Timeline.js +0 -122
- package/dist/cjs/components/VerticalTimeline.js +0 -160
- package/dist/cjs/hooks/index.js +0 -7
- package/dist/cjs/hooks/useApi.js +0 -108
- package/dist/cjs/hooks/useFlowData.js +0 -53
- package/dist/cjs/test/Visualizer.test.js +0 -257
- package/dist/cjs/test/setup.js +0 -24
- package/dist/esm/AgenticFlowVisualizer.js +0 -710
- package/dist/esm/App.js +0 -89
- package/dist/esm/Visualizer.js +0 -11
- package/dist/esm/components/Edge.js +0 -74
- package/dist/esm/components/FileSelector.js +0 -24
- package/dist/esm/components/Node.js +0 -100
- package/dist/esm/components/Timeline.js +0 -118
- package/dist/esm/components/VerticalTimeline.js +0 -156
- package/dist/esm/hooks/index.js +0 -2
- package/dist/esm/hooks/useApi.js +0 -95
- package/dist/esm/hooks/useFlowData.js +0 -66
- package/dist/esm/test/Visualizer.test.js +0 -243
- package/dist/esm/test/setup.js +0 -22
- package/dist/types/AgenticFlowVisualizer.d.ts.map +0 -1
- package/dist/types/App.d.ts.map +0 -1
- package/dist/types/Visualizer.d.ts.map +0 -1
- package/dist/types/components/Edge.d.ts.map +0 -1
- package/dist/types/components/FileSelector.d.ts.map +0 -1
- package/dist/types/components/Node.d.ts.map +0 -1
- package/dist/types/components/Timeline.d.ts.map +0 -1
- package/dist/types/components/VerticalTimeline.d.ts.map +0 -1
- package/dist/types/hooks/index.d.ts.map +0 -1
- package/dist/types/hooks/useApi.d.ts.map +0 -1
- package/dist/types/hooks/useFlowData.d.ts.map +0 -1
- package/dist/types/index.d.ts.map +0 -1
- package/dist/types/test/Visualizer.test.d.ts +0 -2
- package/dist/types/test/Visualizer.test.d.ts.map +0 -1
- package/dist/types/test/setup.d.ts.map +0 -1
- /package/dist/types/{AgenticFlowVisualizer.d.ts → src/AgenticFlowVisualizer.d.ts} +0 -0
- /package/dist/types/{App.d.ts → src/App.d.ts} +0 -0
- /package/dist/types/{Visualizer.d.ts → src/Visualizer.d.ts} +0 -0
- /package/dist/types/{components → src/components}/Edge.d.ts +0 -0
- /package/dist/types/{components → src/components}/FileSelector.d.ts +0 -0
- /package/dist/types/{components → src/components}/Node.d.ts +0 -0
- /package/dist/types/{components → src/components}/Timeline.d.ts +0 -0
- /package/dist/types/{components → src/components}/VerticalTimeline.d.ts +0 -0
- /package/dist/types/{hooks → src/hooks}/index.d.ts +0 -0
- /package/dist/types/{hooks → src/hooks}/useApi.d.ts +0 -0
- /package/dist/types/{hooks → src/hooks}/useFlowData.d.ts +0 -0
- /package/dist/types/{test → tests}/setup.d.ts +0 -0
package/dist/esm/hooks/useApi.js
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { useState, useCallback } from "react";
|
|
2
|
-
// Base URL for the API
|
|
3
|
-
const API_BASE = "/api";
|
|
4
|
-
export const useApi = () => {
|
|
5
|
-
const [loading, setLoading] = useState(false);
|
|
6
|
-
const [error, setError] = useState(null);
|
|
7
|
-
// Function to list all JSON files in the .railtracks directory
|
|
8
|
-
const listJsonFiles = useCallback(async () => {
|
|
9
|
-
setLoading(true);
|
|
10
|
-
setError(null);
|
|
11
|
-
try {
|
|
12
|
-
console.log("Fetching files from:", `${API_BASE}/files`);
|
|
13
|
-
const response = await fetch(`${API_BASE}/files`);
|
|
14
|
-
console.log("Response status:", response.status);
|
|
15
|
-
if (!response.ok) {
|
|
16
|
-
throw new Error(`HTTP error! status: ${response.status}`);
|
|
17
|
-
}
|
|
18
|
-
const files = await response.json();
|
|
19
|
-
console.log("Files received:", files);
|
|
20
|
-
return files;
|
|
21
|
-
}
|
|
22
|
-
catch (err) {
|
|
23
|
-
console.error("Error fetching files:", err);
|
|
24
|
-
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
|
|
25
|
-
const apiError = {
|
|
26
|
-
message: errorMessage,
|
|
27
|
-
status: err instanceof Error && "status" in err ? err.status : undefined
|
|
28
|
-
};
|
|
29
|
-
setError(apiError);
|
|
30
|
-
return [];
|
|
31
|
-
}
|
|
32
|
-
finally {
|
|
33
|
-
setLoading(false);
|
|
34
|
-
}
|
|
35
|
-
}, []);
|
|
36
|
-
// Function to load a specific JSON file
|
|
37
|
-
const loadJsonFile = useCallback(async (filename) => {
|
|
38
|
-
setLoading(true);
|
|
39
|
-
setError(null);
|
|
40
|
-
try {
|
|
41
|
-
const response = await fetch(`${API_BASE}/json/${filename}`);
|
|
42
|
-
if (!response.ok) {
|
|
43
|
-
throw new Error(`HTTP error! status: ${response.status}`);
|
|
44
|
-
}
|
|
45
|
-
const data = await response.json();
|
|
46
|
-
return data;
|
|
47
|
-
}
|
|
48
|
-
catch (err) {
|
|
49
|
-
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
|
|
50
|
-
const apiError = {
|
|
51
|
-
message: errorMessage,
|
|
52
|
-
status: err instanceof Error && "status" in err ? err.status : undefined
|
|
53
|
-
};
|
|
54
|
-
setError(apiError);
|
|
55
|
-
return null;
|
|
56
|
-
}
|
|
57
|
-
finally {
|
|
58
|
-
setLoading(false);
|
|
59
|
-
}
|
|
60
|
-
}, []);
|
|
61
|
-
// Function to trigger a frontend refresh
|
|
62
|
-
const triggerRefresh = useCallback(async () => {
|
|
63
|
-
setLoading(true);
|
|
64
|
-
setError(null);
|
|
65
|
-
try {
|
|
66
|
-
const response = await fetch(`${API_BASE}/refresh`, {
|
|
67
|
-
method: "POST"
|
|
68
|
-
});
|
|
69
|
-
if (!response.ok) {
|
|
70
|
-
throw new Error(`HTTP error! status: ${response.status}`);
|
|
71
|
-
}
|
|
72
|
-
const result = await response.json();
|
|
73
|
-
return result;
|
|
74
|
-
}
|
|
75
|
-
catch (err) {
|
|
76
|
-
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
|
|
77
|
-
const apiError = {
|
|
78
|
-
message: errorMessage,
|
|
79
|
-
status: err instanceof Error && "status" in err ? err.status : undefined
|
|
80
|
-
};
|
|
81
|
-
setError(apiError);
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
finally {
|
|
85
|
-
setLoading(false);
|
|
86
|
-
}
|
|
87
|
-
}, []);
|
|
88
|
-
return {
|
|
89
|
-
loading,
|
|
90
|
-
error,
|
|
91
|
-
listJsonFiles,
|
|
92
|
-
loadJsonFile,
|
|
93
|
-
triggerRefresh
|
|
94
|
-
};
|
|
95
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect, useCallback } from "react";
|
|
2
|
-
import { useApi } from "./useApi";
|
|
3
|
-
export const useFlowData = () => {
|
|
4
|
-
const { listJsonFiles, loadJsonFile, loading: apiLoading, error: apiError } = useApi();
|
|
5
|
-
const [state, setState] = useState({
|
|
6
|
-
availableFiles: [],
|
|
7
|
-
currentFile: null,
|
|
8
|
-
flowData: null,
|
|
9
|
-
loading: false,
|
|
10
|
-
error: null
|
|
11
|
-
});
|
|
12
|
-
// Load available files on mount
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
loadAvailableFiles();
|
|
15
|
-
}, []);
|
|
16
|
-
const loadAvailableFiles = useCallback(async () => {
|
|
17
|
-
const files = await listJsonFiles();
|
|
18
|
-
setState((prev) => ({
|
|
19
|
-
...prev,
|
|
20
|
-
availableFiles: files
|
|
21
|
-
}));
|
|
22
|
-
}, [listJsonFiles]);
|
|
23
|
-
const loadFile = useCallback(async (filename) => {
|
|
24
|
-
setState((prev) => ({
|
|
25
|
-
...prev,
|
|
26
|
-
loading: true,
|
|
27
|
-
error: null
|
|
28
|
-
}));
|
|
29
|
-
try {
|
|
30
|
-
const data = await loadJsonFile(filename);
|
|
31
|
-
if (data) {
|
|
32
|
-
setState((prev) => ({
|
|
33
|
-
...prev,
|
|
34
|
-
currentFile: filename,
|
|
35
|
-
flowData: data,
|
|
36
|
-
loading: false,
|
|
37
|
-
error: null
|
|
38
|
-
}));
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
setState((prev) => ({
|
|
42
|
-
...prev,
|
|
43
|
-
loading: false,
|
|
44
|
-
error: "Failed to load file data"
|
|
45
|
-
}));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
catch (err) {
|
|
49
|
-
setState((prev) => ({
|
|
50
|
-
...prev,
|
|
51
|
-
loading: false,
|
|
52
|
-
error: err instanceof Error ? err.message : "Unknown error occurred"
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
}, [loadJsonFile]);
|
|
56
|
-
const refreshFiles = useCallback(async () => {
|
|
57
|
-
await loadAvailableFiles();
|
|
58
|
-
}, [loadAvailableFiles]);
|
|
59
|
-
return {
|
|
60
|
-
...state,
|
|
61
|
-
loading: state.loading || apiLoading,
|
|
62
|
-
error: state.error || apiError?.message || null,
|
|
63
|
-
loadFile,
|
|
64
|
-
refreshFiles
|
|
65
|
-
};
|
|
66
|
-
};
|
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
4
|
-
import { render, screen, waitFor } from "@testing-library/react";
|
|
5
|
-
import Visualizer from "../Visualizer";
|
|
6
|
-
// Mock ReactFlow and its provider since we're testing the wrapper, not ReactFlow itself
|
|
7
|
-
vi.mock("reactflow", () => ({
|
|
8
|
-
ReactFlowProvider: ({ children }) => (_jsx("div", { "data-testid": "react-flow-provider", children: children })),
|
|
9
|
-
useReactFlow: () => ({
|
|
10
|
-
fitView: vi.fn(),
|
|
11
|
-
getNodes: vi.fn(() => []),
|
|
12
|
-
getEdges: vi.fn(() => [])
|
|
13
|
-
})
|
|
14
|
-
}));
|
|
15
|
-
// Mock the AgenticFlowVisualizer component
|
|
16
|
-
vi.mock("../AgenticFlowVisualizer", () => ({
|
|
17
|
-
default: ({ flowData, width, height, className }) => (_jsxs("div", { "data-testid": "agentic-flow-visualizer", "data-width": width || "", "data-height": height || "", "data-classname": className || "", "data-has-flow-data": !!flowData, children: ["AgenticFlowVisualizer Mock", !flowData && _jsx("div", { "data-testid": "no-data-state", children: "No flow data available" })] }))
|
|
18
|
-
}));
|
|
19
|
-
// Mock data for testing
|
|
20
|
-
const mockFlowData = {
|
|
21
|
-
nodes: [
|
|
22
|
-
{
|
|
23
|
-
identifier: "node-1",
|
|
24
|
-
node_type: "agent",
|
|
25
|
-
stamp: {
|
|
26
|
-
step: 1,
|
|
27
|
-
time: 1634567890,
|
|
28
|
-
identifier: "stamp-1"
|
|
29
|
-
},
|
|
30
|
-
details: {
|
|
31
|
-
internals: {
|
|
32
|
-
llm_details: [
|
|
33
|
-
{
|
|
34
|
-
model_name: "gpt-4",
|
|
35
|
-
model_provider: "openai",
|
|
36
|
-
input: [{ role: "user", content: "test" }],
|
|
37
|
-
output: { role: "assistant", content: "response" },
|
|
38
|
-
input_tokens: 10,
|
|
39
|
-
output_tokens: 5,
|
|
40
|
-
total_cost: 0.001,
|
|
41
|
-
system_fingerprint: "test-fingerprint"
|
|
42
|
-
}
|
|
43
|
-
]
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
parent: null
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
identifier: "node-2",
|
|
50
|
-
node_type: "tool",
|
|
51
|
-
stamp: {
|
|
52
|
-
step: 2,
|
|
53
|
-
time: 1634567891,
|
|
54
|
-
identifier: "stamp-2"
|
|
55
|
-
},
|
|
56
|
-
details: {
|
|
57
|
-
internals: {
|
|
58
|
-
llm_details: []
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
parent: null
|
|
62
|
-
}
|
|
63
|
-
],
|
|
64
|
-
edges: [
|
|
65
|
-
{
|
|
66
|
-
identifier: "edge-1",
|
|
67
|
-
source: "node-1",
|
|
68
|
-
target: "node-2",
|
|
69
|
-
stamp: {
|
|
70
|
-
step: 2,
|
|
71
|
-
time: 1634567891,
|
|
72
|
-
identifier: "edge-stamp-1"
|
|
73
|
-
},
|
|
74
|
-
details: {
|
|
75
|
-
input_args: [],
|
|
76
|
-
output: null
|
|
77
|
-
},
|
|
78
|
-
parent: null
|
|
79
|
-
}
|
|
80
|
-
],
|
|
81
|
-
stamps: [
|
|
82
|
-
{
|
|
83
|
-
step: 1,
|
|
84
|
-
time: 1634567890,
|
|
85
|
-
identifier: "stamp-1"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
step: 2,
|
|
89
|
-
time: 1634567891,
|
|
90
|
-
identifier: "stamp-2"
|
|
91
|
-
}
|
|
92
|
-
]
|
|
93
|
-
};
|
|
94
|
-
describe("Visualizer", () => {
|
|
95
|
-
beforeEach(() => {
|
|
96
|
-
vi.clearAllMocks();
|
|
97
|
-
});
|
|
98
|
-
describe("Component Rendering", () => {
|
|
99
|
-
it("renders successfully without any props", () => {
|
|
100
|
-
render(_jsx(Visualizer, {}));
|
|
101
|
-
expect(screen.getByTestId("react-flow-provider")).toBeInTheDocument();
|
|
102
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
|
|
103
|
-
});
|
|
104
|
-
it("wraps AgenticFlowVisualizer with ReactFlowProvider", () => {
|
|
105
|
-
render(_jsx(Visualizer, { flowData: mockFlowData }));
|
|
106
|
-
const provider = screen.getByTestId("react-flow-provider");
|
|
107
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
108
|
-
expect(provider).toBeInTheDocument();
|
|
109
|
-
expect(provider).toContainElement(visualizer);
|
|
110
|
-
});
|
|
111
|
-
it("renders with valid flow data", () => {
|
|
112
|
-
render(_jsx(Visualizer, { flowData: mockFlowData }));
|
|
113
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
114
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
|
|
115
|
-
expect(screen.queryByTestId("no-data-state")).not.toBeInTheDocument();
|
|
116
|
-
});
|
|
117
|
-
it("handles null flow data gracefully", () => {
|
|
118
|
-
render(_jsx(Visualizer, { flowData: null }));
|
|
119
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
120
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "false");
|
|
121
|
-
});
|
|
122
|
-
it("handles undefined flow data gracefully", () => {
|
|
123
|
-
render(_jsx(Visualizer, { flowData: undefined }));
|
|
124
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
125
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "false");
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
describe("Props Forwarding", () => {
|
|
129
|
-
it("forwards flowData prop correctly", () => {
|
|
130
|
-
render(_jsx(Visualizer, { flowData: mockFlowData }));
|
|
131
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
132
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
|
|
133
|
-
});
|
|
134
|
-
it("forwards width prop correctly", () => {
|
|
135
|
-
render(_jsx(Visualizer, { flowData: mockFlowData, width: "800px" }));
|
|
136
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
137
|
-
expect(visualizer).toHaveAttribute("data-width", "800px");
|
|
138
|
-
});
|
|
139
|
-
it("forwards height prop correctly", () => {
|
|
140
|
-
render(_jsx(Visualizer, { flowData: mockFlowData, height: 600 }));
|
|
141
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
142
|
-
expect(visualizer).toHaveAttribute("data-height", "600");
|
|
143
|
-
});
|
|
144
|
-
it("forwards className prop correctly", () => {
|
|
145
|
-
render(_jsx(Visualizer, { flowData: mockFlowData, className: "custom-class" }));
|
|
146
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
147
|
-
expect(visualizer).toHaveAttribute("data-classname", "custom-class");
|
|
148
|
-
});
|
|
149
|
-
it("forwards all props together correctly", () => {
|
|
150
|
-
render(_jsx(Visualizer, { flowData: mockFlowData, width: "100%", height: "500px", className: "test-visualizer" }));
|
|
151
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
152
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
|
|
153
|
-
expect(visualizer).toHaveAttribute("data-width", "100%");
|
|
154
|
-
expect(visualizer).toHaveAttribute("data-height", "500px");
|
|
155
|
-
expect(visualizer).toHaveAttribute("data-classname", "test-visualizer");
|
|
156
|
-
});
|
|
157
|
-
it("uses default values when optional props are not provided", () => {
|
|
158
|
-
render(_jsx(Visualizer, { flowData: mockFlowData }));
|
|
159
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
160
|
-
expect(visualizer).toHaveAttribute("data-width", "");
|
|
161
|
-
expect(visualizer).toHaveAttribute("data-height", "");
|
|
162
|
-
expect(visualizer).toHaveAttribute("data-classname", "");
|
|
163
|
-
});
|
|
164
|
-
});
|
|
165
|
-
describe("Integration as NPM Package Component", () => {
|
|
166
|
-
it("can be imported and used as a standalone component", () => {
|
|
167
|
-
// This test ensures the component works when imported by users
|
|
168
|
-
const TestApp = () => (_jsxs("div", { children: [_jsx("h1", { children: "My App" }), _jsx(Visualizer, { flowData: mockFlowData })] }));
|
|
169
|
-
render(_jsx(TestApp, {}));
|
|
170
|
-
expect(screen.getByText("My App")).toBeInTheDocument();
|
|
171
|
-
expect(screen.getByTestId("react-flow-provider")).toBeInTheDocument();
|
|
172
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
|
|
173
|
-
});
|
|
174
|
-
it("works in a React component with state", async () => {
|
|
175
|
-
const TestComponent = () => {
|
|
176
|
-
const [data, setData] = React.useState(null);
|
|
177
|
-
React.useEffect(() => {
|
|
178
|
-
// Simulate loading data
|
|
179
|
-
setTimeout(() => setData(mockFlowData), 100);
|
|
180
|
-
}, []);
|
|
181
|
-
return (_jsxs("div", { children: [_jsx("button", { onClick: () => setData(null), children: "Clear Data" }), _jsx(Visualizer, { flowData: data })] }));
|
|
182
|
-
};
|
|
183
|
-
render(_jsx(TestComponent, {}));
|
|
184
|
-
// Initially no data
|
|
185
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "false");
|
|
186
|
-
// Wait for data to load
|
|
187
|
-
await waitFor(() => {
|
|
188
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "true");
|
|
189
|
-
});
|
|
190
|
-
});
|
|
191
|
-
it("handles multiple instances on the same page", () => {
|
|
192
|
-
render(_jsxs("div", { children: [_jsx(Visualizer, { flowData: mockFlowData, className: "visualizer-1" }), _jsx(Visualizer, { flowData: null, className: "visualizer-2" })] }));
|
|
193
|
-
const visualizers = screen.getAllByTestId("agentic-flow-visualizer");
|
|
194
|
-
expect(visualizers).toHaveLength(2);
|
|
195
|
-
expect(visualizers[0]).toHaveAttribute("data-classname", "visualizer-1");
|
|
196
|
-
expect(visualizers[0]).toHaveAttribute("data-has-flow-data", "true");
|
|
197
|
-
expect(visualizers[1]).toHaveAttribute("data-classname", "visualizer-2");
|
|
198
|
-
expect(visualizers[1]).toHaveAttribute("data-has-flow-data", "false");
|
|
199
|
-
});
|
|
200
|
-
});
|
|
201
|
-
describe("Error Handling", () => {
|
|
202
|
-
it("handles malformed flow data gracefully", () => {
|
|
203
|
-
const malformedData = {
|
|
204
|
-
nodes: null,
|
|
205
|
-
edges: undefined
|
|
206
|
-
};
|
|
207
|
-
expect(() => {
|
|
208
|
-
render(_jsx(Visualizer, { flowData: malformedData }));
|
|
209
|
-
}).not.toThrow();
|
|
210
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
|
|
211
|
-
});
|
|
212
|
-
it("handles empty flow data", () => {
|
|
213
|
-
const emptyData = {
|
|
214
|
-
nodes: [],
|
|
215
|
-
edges: [],
|
|
216
|
-
stamps: []
|
|
217
|
-
};
|
|
218
|
-
render(_jsx(Visualizer, { flowData: emptyData }));
|
|
219
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
220
|
-
expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
|
|
221
|
-
});
|
|
222
|
-
});
|
|
223
|
-
describe("TypeScript Compatibility", () => {
|
|
224
|
-
it("accepts correct prop types", () => {
|
|
225
|
-
// This test ensures TypeScript compatibility
|
|
226
|
-
const props = {
|
|
227
|
-
flowData: mockFlowData,
|
|
228
|
-
width: "100%",
|
|
229
|
-
height: 600,
|
|
230
|
-
className: "test-class"
|
|
231
|
-
};
|
|
232
|
-
render(_jsx(Visualizer, { ...props }));
|
|
233
|
-
expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
|
|
234
|
-
});
|
|
235
|
-
it("works with partial props", () => {
|
|
236
|
-
// Test that optional props work correctly
|
|
237
|
-
render(_jsx(Visualizer, { flowData: mockFlowData, width: "50%" }));
|
|
238
|
-
const visualizer = screen.getByTestId("agentic-flow-visualizer");
|
|
239
|
-
expect(visualizer).toHaveAttribute("data-width", "50%");
|
|
240
|
-
expect(visualizer).toHaveAttribute("data-height", "");
|
|
241
|
-
});
|
|
242
|
-
});
|
|
243
|
-
});
|
package/dist/esm/test/setup.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import "@testing-library/jest-dom";
|
|
2
|
-
import { vi } from "vitest";
|
|
3
|
-
// Mock ResizeObserver for React Flow components
|
|
4
|
-
globalThis.ResizeObserver = class ResizeObserver {
|
|
5
|
-
observe() { }
|
|
6
|
-
unobserve() { }
|
|
7
|
-
disconnect() { }
|
|
8
|
-
};
|
|
9
|
-
// Mock window.matchMedia
|
|
10
|
-
Object.defineProperty(window, "matchMedia", {
|
|
11
|
-
writable: true,
|
|
12
|
-
value: vi.fn().mockImplementation((query) => ({
|
|
13
|
-
matches: false,
|
|
14
|
-
media: query,
|
|
15
|
-
onchange: null,
|
|
16
|
-
addListener: vi.fn(), // deprecated
|
|
17
|
-
removeListener: vi.fn(), // deprecated
|
|
18
|
-
addEventListener: vi.fn(),
|
|
19
|
-
removeEventListener: vi.fn(),
|
|
20
|
-
dispatchEvent: vi.fn()
|
|
21
|
-
}))
|
|
22
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AgenticFlowVisualizer.d.ts","sourceRoot":"","sources":["../../src/AgenticFlowVisualizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,OAAO,0BAA0B,CAAC;AAMlC,OAAO,EAA8B,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMxE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqJD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAwyB/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
package/dist/types/App.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EA6HhB,CAAC;AAEF,eAAe,GAAG,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Visualizer.d.ts","sourceRoot":"","sources":["../../src/Visualizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAA8B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE5F;;;GAGG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAMpD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Edge.d.ts","sourceRoot":"","sources":["../../../src/components/Edge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,GAAG,CAAC;KACf,CAAC;IACF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8JpC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileSelector.d.ts","sourceRoot":"","sources":["../../../src/components/FileSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/components/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;CACf;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0H7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,UAAU,aAAa;IACrB,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4KrC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/VerticalTimeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACd,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkPtC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useApi.d.ts","sourceRoot":"","sources":["../../../src/hooks/useApi.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM;;;yBAK2B,OAAO,CAAC,QAAQ,EAAE,CAAC;6BA6Bb,MAAM,KAAG,OAAO,CAAC,GAAG,CAAC;0BAyB1B,OAAO,CAAC,GAAG,CAAC;CAiC1D,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFlowData.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFlowData.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,QAAQ,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,EAAE;QACP,SAAS,CAAC,EAAE;YACV,WAAW,CAAC,EAAE,KAAK,CAAC;gBAClB,UAAU,EAAE,MAAM,CAAC;gBACnB,cAAc,EAAE,MAAM,CAAC;gBACvB,KAAK,EAAE,KAAK,CAAC;oBACX,IAAI,EAAE,MAAM,CAAC;oBACb,OAAO,EAAE,GAAG,CAAC;iBACd,CAAC,CAAC;gBACH,MAAM,EAAE;oBACN,IAAI,EAAE,MAAM,CAAC;oBACb,OAAO,EAAE,GAAG,CAAC;iBACd,CAAC;gBACF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;gBAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;gBAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;gBAC1B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;aACnC,CAAC,CAAC;YACH,OAAO,CAAC,EAAE;gBACR,UAAU,EAAE,MAAM,CAAC;aACpB,CAAC;SACH,CAAC;KACH,CAAC;IACF,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;QACnB,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,MAAM,CAAC,EAAE,GAAG,CAAC;KACd,CAAC;IACF,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;;yBAyBH,MAAM;;oBAhCT,QAAQ,EAAE;iBACb,MAAM,GAAG,IAAI;cAChB,iBAAiB,GAAG,IAAI;CA4EnC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAGjE,cAAc,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Visualizer.test.d.ts","sourceRoot":"","sources":["../../../src/test/Visualizer.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|