@cyvest/cyvest-vis 4.4.0 → 4.4.1
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/dist/{index.mjs → index.cjs} +322 -310
- package/dist/index.js +310 -322
- package/package.json +16 -3
- /package/dist/{index.d.mts → index.d.cts} +0 -0
|
@@ -1,22 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
CyvestGraph: () => CyvestGraph,
|
|
34
|
+
DEFAULT_FORCE_CONFIG: () => DEFAULT_FORCE_CONFIG,
|
|
35
|
+
INVESTIGATION_ICON_MAP: () => INVESTIGATION_ICON_MAP,
|
|
36
|
+
InvestigationGraph: () => InvestigationGraph,
|
|
37
|
+
OBSERVABLE_ICON_MAP: () => OBSERVABLE_ICON_MAP,
|
|
38
|
+
ObservablesGraph: () => ObservablesGraph,
|
|
39
|
+
getInvestigationIcon: () => getInvestigationIcon,
|
|
40
|
+
getObservableIcon: () => getObservableIcon
|
|
41
|
+
});
|
|
42
|
+
module.exports = __toCommonJS(index_exports);
|
|
43
|
+
|
|
1
44
|
// src/components/CyvestGraph.tsx
|
|
2
|
-
|
|
45
|
+
var import_react14 = require("react");
|
|
3
46
|
|
|
4
47
|
// src/components/ObservablesGraph.tsx
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
Background,
|
|
10
|
-
Controls,
|
|
11
|
-
MiniMap,
|
|
12
|
-
useNodesState,
|
|
13
|
-
useEdgesState,
|
|
14
|
-
ConnectionMode,
|
|
15
|
-
BackgroundVariant,
|
|
16
|
-
Panel
|
|
17
|
-
} from "@xyflow/react";
|
|
18
|
-
import "@xyflow/react/dist/style.css";
|
|
19
|
-
import { getObservableGraph } from "@cyvest/cyvest-js";
|
|
48
|
+
var import_react7 = __toESM(require("react"), 1);
|
|
49
|
+
var import_react8 = require("@xyflow/react");
|
|
50
|
+
var import_style = require("@xyflow/react/dist/style.css");
|
|
51
|
+
var import_cyvest_js2 = require("@cyvest/cyvest-js");
|
|
20
52
|
|
|
21
53
|
// src/types.ts
|
|
22
54
|
var DEFAULT_FORCE_CONFIG = {
|
|
@@ -28,11 +60,11 @@ var DEFAULT_FORCE_CONFIG = {
|
|
|
28
60
|
};
|
|
29
61
|
|
|
30
62
|
// src/components/ObservableNode.tsx
|
|
31
|
-
|
|
32
|
-
|
|
63
|
+
var import_react = require("react");
|
|
64
|
+
var import_react2 = require("@xyflow/react");
|
|
33
65
|
|
|
34
66
|
// src/utils/observables.ts
|
|
35
|
-
|
|
67
|
+
var import_cyvest_js = require("@cyvest/cyvest-js");
|
|
36
68
|
function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
|
|
37
69
|
if (value.length <= maxLength) {
|
|
38
70
|
return value;
|
|
@@ -44,7 +76,7 @@ function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
|
|
|
44
76
|
return `${value.slice(0, maxLength - 1)}\u2026`;
|
|
45
77
|
}
|
|
46
78
|
function getLevelColor(level) {
|
|
47
|
-
return getColorForLevel(level);
|
|
79
|
+
return (0, import_cyvest_js.getColorForLevel)(level);
|
|
48
80
|
}
|
|
49
81
|
function lightenHexColor(hex, amount) {
|
|
50
82
|
const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
|
|
@@ -63,14 +95,14 @@ function getLevelBackgroundColor(level) {
|
|
|
63
95
|
}
|
|
64
96
|
|
|
65
97
|
// src/components/Icons.tsx
|
|
66
|
-
|
|
98
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
67
99
|
var defaultSize = 16;
|
|
68
100
|
var defaultColor = "currentColor";
|
|
69
101
|
var GlobeIcon = ({
|
|
70
102
|
size = defaultSize,
|
|
71
103
|
color = defaultColor,
|
|
72
104
|
className
|
|
73
|
-
}) => /* @__PURE__ */ jsxs(
|
|
105
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
106
|
"svg",
|
|
75
107
|
{
|
|
76
108
|
width: size,
|
|
@@ -83,9 +115,9 @@ var GlobeIcon = ({
|
|
|
83
115
|
strokeLinejoin: "round",
|
|
84
116
|
className,
|
|
85
117
|
children: [
|
|
86
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
87
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
|
|
88
|
-
/* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
119
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h20" }),
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
|
|
89
121
|
]
|
|
90
122
|
}
|
|
91
123
|
);
|
|
@@ -93,7 +125,7 @@ var DomainIcon = ({
|
|
|
93
125
|
size = defaultSize,
|
|
94
126
|
color = defaultColor,
|
|
95
127
|
className
|
|
96
|
-
}) => /* @__PURE__ */ jsxs(
|
|
128
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
97
129
|
"svg",
|
|
98
130
|
{
|
|
99
131
|
width: size,
|
|
@@ -106,8 +138,8 @@ var DomainIcon = ({
|
|
|
106
138
|
strokeLinejoin: "round",
|
|
107
139
|
className,
|
|
108
140
|
children: [
|
|
109
|
-
/* @__PURE__ */ jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
|
|
110
|
-
/* @__PURE__ */ jsx("polyline", { points: "9,22 9,12 15,12 15,22" })
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9,22 9,12 15,12 15,22" })
|
|
111
143
|
]
|
|
112
144
|
}
|
|
113
145
|
);
|
|
@@ -115,7 +147,7 @@ var LinkIcon = ({
|
|
|
115
147
|
size = defaultSize,
|
|
116
148
|
color = defaultColor,
|
|
117
149
|
className
|
|
118
|
-
}) => /* @__PURE__ */ jsxs(
|
|
150
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
119
151
|
"svg",
|
|
120
152
|
{
|
|
121
153
|
width: size,
|
|
@@ -128,8 +160,8 @@ var LinkIcon = ({
|
|
|
128
160
|
strokeLinejoin: "round",
|
|
129
161
|
className,
|
|
130
162
|
children: [
|
|
131
|
-
/* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
132
|
-
/* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
163
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
133
165
|
]
|
|
134
166
|
}
|
|
135
167
|
);
|
|
@@ -137,7 +169,7 @@ var MailIcon = ({
|
|
|
137
169
|
size = defaultSize,
|
|
138
170
|
color = defaultColor,
|
|
139
171
|
className
|
|
140
|
-
}) => /* @__PURE__ */ jsxs(
|
|
172
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
141
173
|
"svg",
|
|
142
174
|
{
|
|
143
175
|
width: size,
|
|
@@ -150,8 +182,8 @@ var MailIcon = ({
|
|
|
150
182
|
strokeLinejoin: "round",
|
|
151
183
|
className,
|
|
152
184
|
children: [
|
|
153
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
|
|
154
|
-
/* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
|
|
155
187
|
]
|
|
156
188
|
}
|
|
157
189
|
);
|
|
@@ -159,7 +191,7 @@ var EnvelopeIcon = ({
|
|
|
159
191
|
size = defaultSize,
|
|
160
192
|
color = defaultColor,
|
|
161
193
|
className
|
|
162
|
-
}) => /* @__PURE__ */ jsxs(
|
|
194
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
163
195
|
"svg",
|
|
164
196
|
{
|
|
165
197
|
width: size,
|
|
@@ -172,8 +204,8 @@ var EnvelopeIcon = ({
|
|
|
172
204
|
strokeLinejoin: "round",
|
|
173
205
|
className,
|
|
174
206
|
children: [
|
|
175
|
-
/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
|
|
176
|
-
/* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
|
|
207
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
|
|
208
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
|
|
177
209
|
]
|
|
178
210
|
}
|
|
179
211
|
);
|
|
@@ -181,7 +213,7 @@ var FileIcon = ({
|
|
|
181
213
|
size = defaultSize,
|
|
182
214
|
color = defaultColor,
|
|
183
215
|
className
|
|
184
|
-
}) => /* @__PURE__ */ jsxs(
|
|
216
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
185
217
|
"svg",
|
|
186
218
|
{
|
|
187
219
|
width: size,
|
|
@@ -194,8 +226,8 @@ var FileIcon = ({
|
|
|
194
226
|
strokeLinejoin: "round",
|
|
195
227
|
className,
|
|
196
228
|
children: [
|
|
197
|
-
/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
198
|
-
/* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })
|
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
230
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14,2 14,8 20,8" })
|
|
199
231
|
]
|
|
200
232
|
}
|
|
201
233
|
);
|
|
@@ -203,7 +235,7 @@ var HashIcon = ({
|
|
|
203
235
|
size = defaultSize,
|
|
204
236
|
color = defaultColor,
|
|
205
237
|
className
|
|
206
|
-
}) => /* @__PURE__ */ jsxs(
|
|
238
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
207
239
|
"svg",
|
|
208
240
|
{
|
|
209
241
|
width: size,
|
|
@@ -216,10 +248,10 @@ var HashIcon = ({
|
|
|
216
248
|
strokeLinejoin: "round",
|
|
217
249
|
className,
|
|
218
250
|
children: [
|
|
219
|
-
/* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
|
|
220
|
-
/* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
|
|
221
|
-
/* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
|
|
222
|
-
/* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
|
|
251
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
|
|
252
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
|
|
253
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
|
|
254
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
|
|
223
255
|
]
|
|
224
256
|
}
|
|
225
257
|
);
|
|
@@ -227,7 +259,7 @@ var UserIcon = ({
|
|
|
227
259
|
size = defaultSize,
|
|
228
260
|
color = defaultColor,
|
|
229
261
|
className
|
|
230
|
-
}) => /* @__PURE__ */ jsxs(
|
|
262
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
231
263
|
"svg",
|
|
232
264
|
{
|
|
233
265
|
width: size,
|
|
@@ -240,8 +272,8 @@ var UserIcon = ({
|
|
|
240
272
|
strokeLinejoin: "round",
|
|
241
273
|
className,
|
|
242
274
|
children: [
|
|
243
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "5" }),
|
|
244
|
-
/* @__PURE__ */ jsx("path", { d: "M20 21a8 8 0 1 0-16 0" })
|
|
275
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "8", r: "5" }),
|
|
276
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 21a8 8 0 1 0-16 0" })
|
|
245
277
|
]
|
|
246
278
|
}
|
|
247
279
|
);
|
|
@@ -249,7 +281,7 @@ var IdCardIcon = ({
|
|
|
249
281
|
size = defaultSize,
|
|
250
282
|
color = defaultColor,
|
|
251
283
|
className
|
|
252
|
-
}) => /* @__PURE__ */ jsxs(
|
|
284
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
253
285
|
"svg",
|
|
254
286
|
{
|
|
255
287
|
width: size,
|
|
@@ -262,10 +294,10 @@ var IdCardIcon = ({
|
|
|
262
294
|
strokeLinejoin: "round",
|
|
263
295
|
className,
|
|
264
296
|
children: [
|
|
265
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
|
|
266
|
-
/* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2" }),
|
|
267
|
-
/* @__PURE__ */ jsx("path", { d: "M14 10h4" }),
|
|
268
|
-
/* @__PURE__ */ jsx("path", { d: "M14 14h4" })
|
|
297
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
|
|
298
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "12", r: "2" }),
|
|
299
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 10h4" }),
|
|
300
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 14h4" })
|
|
269
301
|
]
|
|
270
302
|
}
|
|
271
303
|
);
|
|
@@ -273,7 +305,7 @@ var GearIcon = ({
|
|
|
273
305
|
size = defaultSize,
|
|
274
306
|
color = defaultColor,
|
|
275
307
|
className
|
|
276
|
-
}) => /* @__PURE__ */ jsxs(
|
|
308
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
277
309
|
"svg",
|
|
278
310
|
{
|
|
279
311
|
width: size,
|
|
@@ -286,8 +318,8 @@ var GearIcon = ({
|
|
|
286
318
|
strokeLinejoin: "round",
|
|
287
319
|
className,
|
|
288
320
|
children: [
|
|
289
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
|
|
290
|
-
/* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
|
|
321
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
|
|
322
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
|
|
291
323
|
]
|
|
292
324
|
}
|
|
293
325
|
);
|
|
@@ -295,7 +327,7 @@ var AppIcon = ({
|
|
|
295
327
|
size = defaultSize,
|
|
296
328
|
color = defaultColor,
|
|
297
329
|
className
|
|
298
|
-
}) => /* @__PURE__ */ jsxs(
|
|
330
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
299
331
|
"svg",
|
|
300
332
|
{
|
|
301
333
|
width: size,
|
|
@@ -308,9 +340,9 @@ var AppIcon = ({
|
|
|
308
340
|
strokeLinejoin: "round",
|
|
309
341
|
className,
|
|
310
342
|
children: [
|
|
311
|
-
/* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
312
|
-
/* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
|
|
313
|
-
/* @__PURE__ */ jsx("path", { d: "M3 9h18" })
|
|
343
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
344
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 3v18" }),
|
|
345
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 9h18" })
|
|
314
346
|
]
|
|
315
347
|
}
|
|
316
348
|
);
|
|
@@ -318,7 +350,7 @@ var RegistryIcon = ({
|
|
|
318
350
|
size = defaultSize,
|
|
319
351
|
color = defaultColor,
|
|
320
352
|
className
|
|
321
|
-
}) => /* @__PURE__ */ jsx(
|
|
353
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
322
354
|
"svg",
|
|
323
355
|
{
|
|
324
356
|
width: size,
|
|
@@ -330,14 +362,14 @@ var RegistryIcon = ({
|
|
|
330
362
|
strokeLinecap: "round",
|
|
331
363
|
strokeLinejoin: "round",
|
|
332
364
|
className,
|
|
333
|
-
children: /* @__PURE__ */ jsx("path", { d: "m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" })
|
|
365
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" })
|
|
334
366
|
}
|
|
335
367
|
);
|
|
336
368
|
var ThreatActorIcon = ({
|
|
337
369
|
size = defaultSize,
|
|
338
370
|
color = defaultColor,
|
|
339
371
|
className
|
|
340
|
-
}) => /* @__PURE__ */ jsxs(
|
|
372
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
341
373
|
"svg",
|
|
342
374
|
{
|
|
343
375
|
width: size,
|
|
@@ -350,12 +382,12 @@ var ThreatActorIcon = ({
|
|
|
350
382
|
strokeLinejoin: "round",
|
|
351
383
|
className,
|
|
352
384
|
children: [
|
|
353
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "7" }),
|
|
354
|
-
/* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.5", fill: color }),
|
|
355
|
-
/* @__PURE__ */ jsx("circle", { cx: "15", cy: "9", r: "1.5", fill: color }),
|
|
356
|
-
/* @__PURE__ */ jsx("path", { d: "M9 17v-2" }),
|
|
357
|
-
/* @__PURE__ */ jsx("path", { d: "M12 17v-2" }),
|
|
358
|
-
/* @__PURE__ */ jsx("path", { d: "M15 17v-2" })
|
|
385
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "10", r: "7" }),
|
|
386
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "1.5", fill: color }),
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "9", r: "1.5", fill: color }),
|
|
388
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 17v-2" }),
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17v-2" }),
|
|
390
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 17v-2" })
|
|
359
391
|
]
|
|
360
392
|
}
|
|
361
393
|
);
|
|
@@ -363,7 +395,7 @@ var BugIcon = ({
|
|
|
363
395
|
size = defaultSize,
|
|
364
396
|
color = defaultColor,
|
|
365
397
|
className
|
|
366
|
-
}) => /* @__PURE__ */ jsxs(
|
|
398
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
367
399
|
"svg",
|
|
368
400
|
{
|
|
369
401
|
width: size,
|
|
@@ -376,17 +408,17 @@ var BugIcon = ({
|
|
|
376
408
|
strokeLinejoin: "round",
|
|
377
409
|
className,
|
|
378
410
|
children: [
|
|
379
|
-
/* @__PURE__ */ jsx("path", { d: "m8 2 1.88 1.88" }),
|
|
380
|
-
/* @__PURE__ */ jsx("path", { d: "M14.12 3.88 16 2" }),
|
|
381
|
-
/* @__PURE__ */ jsx("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
|
|
382
|
-
/* @__PURE__ */ jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
|
|
383
|
-
/* @__PURE__ */ jsx("path", { d: "M12 20v-9" }),
|
|
384
|
-
/* @__PURE__ */ jsx("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
|
|
385
|
-
/* @__PURE__ */ jsx("path", { d: "M6 13H2" }),
|
|
386
|
-
/* @__PURE__ */ jsx("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
|
|
387
|
-
/* @__PURE__ */ jsx("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
|
|
388
|
-
/* @__PURE__ */ jsx("path", { d: "M22 13h-4" }),
|
|
389
|
-
/* @__PURE__ */ jsx("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
|
|
411
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m8 2 1.88 1.88" }),
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.12 3.88 16 2" }),
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v-9" }),
|
|
416
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
|
|
417
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 13H2" }),
|
|
418
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
|
|
419
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
|
|
420
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 13h-4" }),
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
|
|
390
422
|
]
|
|
391
423
|
}
|
|
392
424
|
);
|
|
@@ -394,7 +426,7 @@ var SwordIcon = ({
|
|
|
394
426
|
size = defaultSize,
|
|
395
427
|
color = defaultColor,
|
|
396
428
|
className
|
|
397
|
-
}) => /* @__PURE__ */ jsxs(
|
|
429
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
398
430
|
"svg",
|
|
399
431
|
{
|
|
400
432
|
width: size,
|
|
@@ -407,10 +439,10 @@ var SwordIcon = ({
|
|
|
407
439
|
strokeLinejoin: "round",
|
|
408
440
|
className,
|
|
409
441
|
children: [
|
|
410
|
-
/* @__PURE__ */ jsx("polyline", { points: "14.5,17.5 3,6 3,3 6,3 17.5,14.5" }),
|
|
411
|
-
/* @__PURE__ */ jsx("line", { x1: "13", y1: "19", x2: "19", y2: "13" }),
|
|
412
|
-
/* @__PURE__ */ jsx("line", { x1: "16", y1: "16", x2: "20", y2: "20" }),
|
|
413
|
-
/* @__PURE__ */ jsx("line", { x1: "19", y1: "21", x2: "21", y2: "19" })
|
|
442
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14.5,17.5 3,6 3,3 6,3 17.5,14.5" }),
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "13", y1: "19", x2: "19", y2: "13" }),
|
|
444
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "16", x2: "20", y2: "20" }),
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", y1: "21", x2: "21", y2: "19" })
|
|
414
446
|
]
|
|
415
447
|
}
|
|
416
448
|
);
|
|
@@ -418,7 +450,7 @@ var TargetIcon = ({
|
|
|
418
450
|
size = defaultSize,
|
|
419
451
|
color = defaultColor,
|
|
420
452
|
className
|
|
421
|
-
}) => /* @__PURE__ */ jsxs(
|
|
453
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
422
454
|
"svg",
|
|
423
455
|
{
|
|
424
456
|
width: size,
|
|
@@ -431,9 +463,9 @@ var TargetIcon = ({
|
|
|
431
463
|
strokeLinejoin: "round",
|
|
432
464
|
className,
|
|
433
465
|
children: [
|
|
434
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
435
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
436
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
467
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "6" }),
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "2" })
|
|
437
469
|
]
|
|
438
470
|
}
|
|
439
471
|
);
|
|
@@ -441,7 +473,7 @@ var AlertIcon = ({
|
|
|
441
473
|
size = defaultSize,
|
|
442
474
|
color = defaultColor,
|
|
443
475
|
className
|
|
444
|
-
}) => /* @__PURE__ */ jsxs(
|
|
476
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
445
477
|
"svg",
|
|
446
478
|
{
|
|
447
479
|
width: size,
|
|
@@ -454,9 +486,9 @@ var AlertIcon = ({
|
|
|
454
486
|
strokeLinejoin: "round",
|
|
455
487
|
className,
|
|
456
488
|
children: [
|
|
457
|
-
/* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
|
|
458
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
|
|
459
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
|
|
491
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
460
492
|
]
|
|
461
493
|
}
|
|
462
494
|
);
|
|
@@ -464,7 +496,7 @@ var FlaskIcon = ({
|
|
|
464
496
|
size = defaultSize,
|
|
465
497
|
color = defaultColor,
|
|
466
498
|
className
|
|
467
|
-
}) => /* @__PURE__ */ jsxs(
|
|
499
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
468
500
|
"svg",
|
|
469
501
|
{
|
|
470
502
|
width: size,
|
|
@@ -477,9 +509,9 @@ var FlaskIcon = ({
|
|
|
477
509
|
strokeLinejoin: "round",
|
|
478
510
|
className,
|
|
479
511
|
children: [
|
|
480
|
-
/* @__PURE__ */ jsx("path", { d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" }),
|
|
481
|
-
/* @__PURE__ */ jsx("path", { d: "M8.5 2h7" }),
|
|
482
|
-
/* @__PURE__ */ jsx("path", { d: "M7 16h10" })
|
|
512
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" }),
|
|
513
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.5 2h7" }),
|
|
514
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 16h10" })
|
|
483
515
|
]
|
|
484
516
|
}
|
|
485
517
|
);
|
|
@@ -487,7 +519,7 @@ var CertificateIcon = ({
|
|
|
487
519
|
size = defaultSize,
|
|
488
520
|
color = defaultColor,
|
|
489
521
|
className
|
|
490
|
-
}) => /* @__PURE__ */ jsxs(
|
|
522
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
491
523
|
"svg",
|
|
492
524
|
{
|
|
493
525
|
width: size,
|
|
@@ -500,9 +532,9 @@ var CertificateIcon = ({
|
|
|
500
532
|
strokeLinejoin: "round",
|
|
501
533
|
className,
|
|
502
534
|
children: [
|
|
503
|
-
/* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }),
|
|
504
|
-
/* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" }),
|
|
505
|
-
/* @__PURE__ */ jsx("path", { d: "m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" })
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }),
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" }),
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" })
|
|
506
538
|
]
|
|
507
539
|
}
|
|
508
540
|
);
|
|
@@ -510,7 +542,7 @@ var WifiIcon = ({
|
|
|
510
542
|
size = defaultSize,
|
|
511
543
|
color = defaultColor,
|
|
512
544
|
className
|
|
513
|
-
}) => /* @__PURE__ */ jsxs(
|
|
545
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
514
546
|
"svg",
|
|
515
547
|
{
|
|
516
548
|
width: size,
|
|
@@ -523,10 +555,10 @@ var WifiIcon = ({
|
|
|
523
555
|
strokeLinejoin: "round",
|
|
524
556
|
className,
|
|
525
557
|
children: [
|
|
526
|
-
/* @__PURE__ */ jsx("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
|
|
527
|
-
/* @__PURE__ */ jsx("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
|
|
528
|
-
/* @__PURE__ */ jsx("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
|
|
529
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
|
|
558
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
|
|
559
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
|
|
561
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
|
|
530
562
|
]
|
|
531
563
|
}
|
|
532
564
|
);
|
|
@@ -534,7 +566,7 @@ var WorldIcon = ({
|
|
|
534
566
|
size = defaultSize,
|
|
535
567
|
color = defaultColor,
|
|
536
568
|
className
|
|
537
|
-
}) => /* @__PURE__ */ jsxs(
|
|
569
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
538
570
|
"svg",
|
|
539
571
|
{
|
|
540
572
|
width: size,
|
|
@@ -547,9 +579,9 @@ var WorldIcon = ({
|
|
|
547
579
|
strokeLinejoin: "round",
|
|
548
580
|
className,
|
|
549
581
|
children: [
|
|
550
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
551
|
-
/* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
|
|
552
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12h20" })
|
|
582
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
583
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
|
|
584
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h20" })
|
|
553
585
|
]
|
|
554
586
|
}
|
|
555
587
|
);
|
|
@@ -557,7 +589,7 @@ var QuestionIcon = ({
|
|
|
557
589
|
size = defaultSize,
|
|
558
590
|
color = defaultColor,
|
|
559
591
|
className
|
|
560
|
-
}) => /* @__PURE__ */ jsxs(
|
|
592
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
561
593
|
"svg",
|
|
562
594
|
{
|
|
563
595
|
width: size,
|
|
@@ -570,9 +602,9 @@ var QuestionIcon = ({
|
|
|
570
602
|
strokeLinejoin: "round",
|
|
571
603
|
className,
|
|
572
604
|
children: [
|
|
573
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
574
|
-
/* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
|
|
575
|
-
/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
|
|
605
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
606
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
|
|
607
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
|
|
576
608
|
]
|
|
577
609
|
}
|
|
578
610
|
);
|
|
@@ -580,7 +612,7 @@ var CheckIcon = ({
|
|
|
580
612
|
size = defaultSize,
|
|
581
613
|
color = defaultColor,
|
|
582
614
|
className
|
|
583
|
-
}) => /* @__PURE__ */ jsx(
|
|
615
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
584
616
|
"svg",
|
|
585
617
|
{
|
|
586
618
|
width: size,
|
|
@@ -592,14 +624,14 @@ var CheckIcon = ({
|
|
|
592
624
|
strokeLinecap: "round",
|
|
593
625
|
strokeLinejoin: "round",
|
|
594
626
|
className,
|
|
595
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
627
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
|
|
596
628
|
}
|
|
597
629
|
);
|
|
598
630
|
var BoxIcon = ({
|
|
599
631
|
size = defaultSize,
|
|
600
632
|
color = defaultColor,
|
|
601
633
|
className
|
|
602
|
-
}) => /* @__PURE__ */ jsxs(
|
|
634
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
603
635
|
"svg",
|
|
604
636
|
{
|
|
605
637
|
width: size,
|
|
@@ -612,9 +644,9 @@ var BoxIcon = ({
|
|
|
612
644
|
strokeLinejoin: "round",
|
|
613
645
|
className,
|
|
614
646
|
children: [
|
|
615
|
-
/* @__PURE__ */ jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
|
|
616
|
-
/* @__PURE__ */ jsx("path", { d: "m3.3 7 8.7 5 8.7-5" }),
|
|
617
|
-
/* @__PURE__ */ jsx("path", { d: "M12 22V12" })
|
|
647
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3.3 7 8.7 5 8.7-5" }),
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 22V12" })
|
|
618
650
|
]
|
|
619
651
|
}
|
|
620
652
|
);
|
|
@@ -622,7 +654,7 @@ var CrosshairIcon = ({
|
|
|
622
654
|
size = defaultSize,
|
|
623
655
|
color = defaultColor,
|
|
624
656
|
className
|
|
625
|
-
}) => /* @__PURE__ */ jsxs(
|
|
657
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
626
658
|
"svg",
|
|
627
659
|
{
|
|
628
660
|
width: size,
|
|
@@ -635,11 +667,11 @@ var CrosshairIcon = ({
|
|
|
635
667
|
strokeLinejoin: "round",
|
|
636
668
|
className,
|
|
637
669
|
children: [
|
|
638
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
639
|
-
/* @__PURE__ */ jsx("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
|
|
640
|
-
/* @__PURE__ */ jsx("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
|
|
641
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
|
|
642
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
|
|
670
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
|
|
673
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
|
|
643
675
|
]
|
|
644
676
|
}
|
|
645
677
|
);
|
|
@@ -695,7 +727,7 @@ function getInvestigationIcon(nodeType) {
|
|
|
695
727
|
}
|
|
696
728
|
|
|
697
729
|
// src/components/ObservableNode.tsx
|
|
698
|
-
|
|
730
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
699
731
|
var NODE_SIZE = 40;
|
|
700
732
|
var ROOT_NODE_WIDTH = 56;
|
|
701
733
|
var ROOT_NODE_HEIGHT = 40;
|
|
@@ -746,11 +778,11 @@ function ObservableNodeComponent({ data, selected }) {
|
|
|
746
778
|
const { label, level, isRoot, whitelisted, fullValue, observableType } = nodeData;
|
|
747
779
|
const borderColor = getLevelColor(level);
|
|
748
780
|
const backgroundColor = getLevelBackgroundColor(level);
|
|
749
|
-
const IconComponent = useMemo(() => {
|
|
781
|
+
const IconComponent = (0, import_react.useMemo)(() => {
|
|
750
782
|
if (isRoot) return CrosshairIcon;
|
|
751
783
|
return getObservableIcon(observableType);
|
|
752
784
|
}, [isRoot, observableType]);
|
|
753
|
-
const shapeStyle = useMemo(() => {
|
|
785
|
+
const shapeStyle = (0, import_react.useMemo)(() => {
|
|
754
786
|
if (isRoot) {
|
|
755
787
|
return {
|
|
756
788
|
width: ROOT_NODE_WIDTH,
|
|
@@ -780,34 +812,34 @@ function ObservableNodeComponent({ data, selected }) {
|
|
|
780
812
|
transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out"
|
|
781
813
|
};
|
|
782
814
|
}, [isRoot, backgroundColor, borderColor, selected, whitelisted]);
|
|
783
|
-
const labelStyle = useMemo(
|
|
815
|
+
const labelStyle = (0, import_react.useMemo)(
|
|
784
816
|
() => ({
|
|
785
817
|
...nodeStyles.label,
|
|
786
818
|
color: whitelisted ? "#9ca3af" : "#374151"
|
|
787
819
|
}),
|
|
788
820
|
[whitelisted]
|
|
789
821
|
);
|
|
790
|
-
return /* @__PURE__ */
|
|
791
|
-
/* @__PURE__ */
|
|
792
|
-
/* @__PURE__ */
|
|
822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "observable-node", style: nodeStyles.container, children: [
|
|
823
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: nodeStyles.shapeWrapper, children: [
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: shapeStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
793
825
|
IconComponent,
|
|
794
826
|
{
|
|
795
827
|
size: isRoot ? ROOT_ICON_SIZE : ICON_SIZE,
|
|
796
828
|
color: borderColor
|
|
797
829
|
}
|
|
798
830
|
) }),
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
831
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "source", position: import_react2.Position.Right, style: nodeStyles.handle }),
|
|
832
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "target", position: import_react2.Position.Left, style: nodeStyles.handle })
|
|
801
833
|
] }),
|
|
802
|
-
/* @__PURE__ */
|
|
834
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: labelStyle, title: fullValue, children: label })
|
|
803
835
|
] });
|
|
804
836
|
}
|
|
805
|
-
var ObservableNode = memo(ObservableNodeComponent);
|
|
837
|
+
var ObservableNode = (0, import_react.memo)(ObservableNodeComponent);
|
|
806
838
|
|
|
807
839
|
// src/components/FloatingEdge.tsx
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
840
|
+
var import_react3 = require("react");
|
|
841
|
+
var import_react4 = require("@xyflow/react");
|
|
842
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
811
843
|
function getControlOffset(sourceX, sourceY, targetX, targetY) {
|
|
812
844
|
const dx = targetX - sourceX;
|
|
813
845
|
const dy = targetY - sourceY;
|
|
@@ -824,18 +856,18 @@ function FloatingEdgeComponent({
|
|
|
824
856
|
markerEnd,
|
|
825
857
|
selected
|
|
826
858
|
}) {
|
|
827
|
-
const offset =
|
|
859
|
+
const offset = (0, import_react3.useMemo)(
|
|
828
860
|
() => getControlOffset(sourceX, sourceY, targetX, targetY),
|
|
829
861
|
[sourceX, sourceY, targetX, targetY]
|
|
830
862
|
);
|
|
831
|
-
const [edgePath] = getBezierPath({
|
|
863
|
+
const [edgePath] = (0, import_react4.getBezierPath)({
|
|
832
864
|
sourceX,
|
|
833
865
|
sourceY,
|
|
834
866
|
targetX,
|
|
835
867
|
targetY,
|
|
836
868
|
curvature: 0.15
|
|
837
869
|
});
|
|
838
|
-
const edgeStyle =
|
|
870
|
+
const edgeStyle = (0, import_react3.useMemo)(
|
|
839
871
|
() => ({
|
|
840
872
|
strokeWidth: selected ? 2.5 : 1.5,
|
|
841
873
|
stroke: selected ? "#3b82f6" : "#94a3b8",
|
|
@@ -844,8 +876,8 @@ function FloatingEdgeComponent({
|
|
|
844
876
|
}),
|
|
845
877
|
[selected, style]
|
|
846
878
|
);
|
|
847
|
-
return /* @__PURE__ */
|
|
848
|
-
BaseEdge,
|
|
879
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
880
|
+
import_react4.BaseEdge,
|
|
849
881
|
{
|
|
850
882
|
id,
|
|
851
883
|
path: edgePath,
|
|
@@ -854,43 +886,31 @@ function FloatingEdgeComponent({
|
|
|
854
886
|
}
|
|
855
887
|
);
|
|
856
888
|
}
|
|
857
|
-
var FloatingEdge =
|
|
889
|
+
var FloatingEdge = (0, import_react3.memo)(FloatingEdgeComponent);
|
|
858
890
|
|
|
859
891
|
// src/hooks/useForceLayout.ts
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
forceLink,
|
|
864
|
-
forceManyBody,
|
|
865
|
-
forceCenter,
|
|
866
|
-
forceCollide,
|
|
867
|
-
forceX,
|
|
868
|
-
forceY
|
|
869
|
-
} from "d3-force";
|
|
870
|
-
import {
|
|
871
|
-
useReactFlow,
|
|
872
|
-
useNodesInitialized,
|
|
873
|
-
useStore
|
|
874
|
-
} from "@xyflow/react";
|
|
892
|
+
var import_react5 = require("react");
|
|
893
|
+
var import_d3_force = require("d3-force");
|
|
894
|
+
var import_react6 = require("@xyflow/react");
|
|
875
895
|
var nodeIdsSelector = (state) => {
|
|
876
896
|
const ids = Array.from(state.nodeLookup.keys()).sort();
|
|
877
897
|
return ids.join(",");
|
|
878
898
|
};
|
|
879
899
|
function useForceLayout(config = {}, rootNodeId) {
|
|
880
|
-
const { getNodes, getEdges, setNodes } = useReactFlow();
|
|
881
|
-
const nodesInitialized = useNodesInitialized();
|
|
882
|
-
const nodeIds = useStore(nodeIdsSelector);
|
|
883
|
-
const forceConfig =
|
|
900
|
+
const { getNodes, getEdges, setNodes } = (0, import_react6.useReactFlow)();
|
|
901
|
+
const nodesInitialized = (0, import_react6.useNodesInitialized)();
|
|
902
|
+
const nodeIds = (0, import_react6.useStore)(nodeIdsSelector);
|
|
903
|
+
const forceConfig = (0, import_react5.useMemo)(
|
|
884
904
|
() => ({ ...DEFAULT_FORCE_CONFIG, ...config }),
|
|
885
905
|
[config]
|
|
886
906
|
);
|
|
887
|
-
const simulationRef = useRef(null);
|
|
888
|
-
const draggingRef = useRef({ nodeId: null, active: false });
|
|
889
|
-
const nodePositionsRef = useRef(
|
|
907
|
+
const simulationRef = (0, import_react5.useRef)(null);
|
|
908
|
+
const draggingRef = (0, import_react5.useRef)({ nodeId: null, active: false });
|
|
909
|
+
const nodePositionsRef = (0, import_react5.useRef)(
|
|
890
910
|
/* @__PURE__ */ new Map()
|
|
891
911
|
);
|
|
892
|
-
const rafRef = useRef(null);
|
|
893
|
-
useEffect(() => {
|
|
912
|
+
const rafRef = (0, import_react5.useRef)(null);
|
|
913
|
+
(0, import_react5.useEffect)(() => {
|
|
894
914
|
if (!nodesInitialized || !nodeIds) {
|
|
895
915
|
return;
|
|
896
916
|
}
|
|
@@ -932,13 +952,13 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
932
952
|
cancelAnimationFrame(rafRef.current);
|
|
933
953
|
rafRef.current = null;
|
|
934
954
|
}
|
|
935
|
-
const simulation = forceSimulation(simNodes).force(
|
|
955
|
+
const simulation = (0, import_d3_force.forceSimulation)(simNodes).force(
|
|
936
956
|
"link",
|
|
937
|
-
forceLink(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.4)
|
|
957
|
+
(0, import_d3_force.forceLink)(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.4)
|
|
938
958
|
).force(
|
|
939
959
|
"charge",
|
|
940
|
-
forceManyBody().strength(forceConfig.chargeStrength)
|
|
941
|
-
).force("center", forceCenter(0, 0).strength(forceConfig.centerStrength)).force("collision", forceCollide(forceConfig.collisionRadius)).force("x", forceX(0).strength(8e-3)).force("y", forceY(0).strength(8e-3)).alphaDecay(0.02).velocityDecay(0.35);
|
|
960
|
+
(0, import_d3_force.forceManyBody)().strength(forceConfig.chargeStrength)
|
|
961
|
+
).force("center", (0, import_d3_force.forceCenter)(0, 0).strength(forceConfig.centerStrength)).force("collision", (0, import_d3_force.forceCollide)(forceConfig.collisionRadius)).force("x", (0, import_d3_force.forceX)(0).strength(8e-3)).force("y", (0, import_d3_force.forceY)(0).strength(8e-3)).alphaDecay(0.02).velocityDecay(0.35);
|
|
942
962
|
const updateNodes = () => {
|
|
943
963
|
if (draggingRef.current.active) {
|
|
944
964
|
rafRef.current = requestAnimationFrame(updateNodes);
|
|
@@ -990,7 +1010,7 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
990
1010
|
forceConfig,
|
|
991
1011
|
rootNodeId
|
|
992
1012
|
]);
|
|
993
|
-
const onNodeDragStart = useCallback(
|
|
1013
|
+
const onNodeDragStart = (0, import_react5.useCallback)(
|
|
994
1014
|
(_, node) => {
|
|
995
1015
|
const simulation = simulationRef.current;
|
|
996
1016
|
if (!simulation) return;
|
|
@@ -1004,7 +1024,7 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
1004
1024
|
},
|
|
1005
1025
|
[]
|
|
1006
1026
|
);
|
|
1007
|
-
const onNodeDrag = useCallback((_, node) => {
|
|
1027
|
+
const onNodeDrag = (0, import_react5.useCallback)((_, node) => {
|
|
1008
1028
|
const simulation = simulationRef.current;
|
|
1009
1029
|
if (!simulation) return;
|
|
1010
1030
|
const simNode = simulation.nodes().find((n) => n.id === node.id);
|
|
@@ -1017,7 +1037,7 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
1017
1037
|
});
|
|
1018
1038
|
}
|
|
1019
1039
|
}, []);
|
|
1020
|
-
const onNodeDragStop = useCallback(
|
|
1040
|
+
const onNodeDragStop = (0, import_react5.useCallback)(
|
|
1021
1041
|
(_, node) => {
|
|
1022
1042
|
const simulation = simulationRef.current;
|
|
1023
1043
|
draggingRef.current = { nodeId: null, active: false };
|
|
@@ -1038,14 +1058,14 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
1038
1058
|
},
|
|
1039
1059
|
[rootNodeId]
|
|
1040
1060
|
);
|
|
1041
|
-
const updateForceConfig = useCallback(
|
|
1061
|
+
const updateForceConfig = (0, import_react5.useCallback)(
|
|
1042
1062
|
(updates) => {
|
|
1043
1063
|
const simulation = simulationRef.current;
|
|
1044
1064
|
if (!simulation) return;
|
|
1045
1065
|
if (updates.chargeStrength !== void 0) {
|
|
1046
1066
|
simulation.force(
|
|
1047
1067
|
"charge",
|
|
1048
|
-
forceManyBody().strength(updates.chargeStrength)
|
|
1068
|
+
(0, import_d3_force.forceManyBody)().strength(updates.chargeStrength)
|
|
1049
1069
|
);
|
|
1050
1070
|
}
|
|
1051
1071
|
if (updates.linkDistance !== void 0) {
|
|
@@ -1057,14 +1077,14 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
1057
1077
|
if (updates.collisionRadius !== void 0) {
|
|
1058
1078
|
simulation.force(
|
|
1059
1079
|
"collision",
|
|
1060
|
-
forceCollide(updates.collisionRadius)
|
|
1080
|
+
(0, import_d3_force.forceCollide)(updates.collisionRadius)
|
|
1061
1081
|
);
|
|
1062
1082
|
}
|
|
1063
1083
|
simulation.alpha(0.3).restart();
|
|
1064
1084
|
},
|
|
1065
1085
|
[]
|
|
1066
1086
|
);
|
|
1067
|
-
const restartSimulation = useCallback(() => {
|
|
1087
|
+
const restartSimulation = (0, import_react5.useCallback)(() => {
|
|
1068
1088
|
const simulation = simulationRef.current;
|
|
1069
1089
|
if (!simulation) return;
|
|
1070
1090
|
simulation.alpha(1).restart();
|
|
@@ -1079,7 +1099,7 @@ function useForceLayout(config = {}, rootNodeId) {
|
|
|
1079
1099
|
}
|
|
1080
1100
|
|
|
1081
1101
|
// src/components/ObservablesGraph.tsx
|
|
1082
|
-
|
|
1102
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1083
1103
|
var nodeTypes = {
|
|
1084
1104
|
observable: ObservableNode
|
|
1085
1105
|
};
|
|
@@ -1091,7 +1111,7 @@ var defaultEdgeOptions = {
|
|
|
1091
1111
|
style: { stroke: "#94a3b8", strokeWidth: 1.5 }
|
|
1092
1112
|
};
|
|
1093
1113
|
function createObservableNodes(investigation, rootObservableIds) {
|
|
1094
|
-
const graph = getObservableGraph(investigation);
|
|
1114
|
+
const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
|
|
1095
1115
|
return graph.nodes.map((graphNode, index) => {
|
|
1096
1116
|
const isRoot = rootObservableIds.has(graphNode.id);
|
|
1097
1117
|
const nodeData = {
|
|
@@ -1122,7 +1142,7 @@ function createObservableNodes(investigation, rootObservableIds) {
|
|
|
1122
1142
|
});
|
|
1123
1143
|
}
|
|
1124
1144
|
function createObservableEdges(investigation) {
|
|
1125
|
-
const graph = getObservableGraph(investigation);
|
|
1145
|
+
const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
|
|
1126
1146
|
return graph.edges.map((graphEdge, index) => {
|
|
1127
1147
|
const edgeData = {
|
|
1128
1148
|
relationshipType: graphEdge.type,
|
|
@@ -1141,7 +1161,7 @@ function createObservableEdges(investigation) {
|
|
|
1141
1161
|
});
|
|
1142
1162
|
}
|
|
1143
1163
|
var ForceControls = ({ config, onChange, onRestart }) => {
|
|
1144
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
1164
|
+
const [isExpanded, setIsExpanded] = (0, import_react7.useState)(false);
|
|
1145
1165
|
const panelStyle = {
|
|
1146
1166
|
background: "rgba(255, 255, 255, 0.95)",
|
|
1147
1167
|
backdropFilter: "blur(8px)",
|
|
@@ -1213,18 +1233,18 @@ var ForceControls = ({ config, onChange, onRestart }) => {
|
|
|
1213
1233
|
transition: "transform 0.1s ease, box-shadow 0.1s ease",
|
|
1214
1234
|
boxShadow: "0 2px 4px rgba(59, 130, 246, 0.3)"
|
|
1215
1235
|
};
|
|
1216
|
-
return /* @__PURE__ */
|
|
1217
|
-
/* @__PURE__ */
|
|
1218
|
-
/* @__PURE__ */
|
|
1219
|
-
/* @__PURE__ */
|
|
1236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: panelStyle, children: [
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: headerStyle, onClick: () => setIsExpanded(!isExpanded), children: [
|
|
1238
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: titleStyle, children: "\u26A1 Force Layout" }),
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
|
|
1220
1240
|
] }),
|
|
1221
|
-
/* @__PURE__ */
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1224
|
-
/* @__PURE__ */
|
|
1225
|
-
/* @__PURE__ */
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderContainerStyle, children: [
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 10 }, children: [
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
|
|
1244
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Repulsion" }),
|
|
1245
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.chargeStrength })
|
|
1226
1246
|
] }),
|
|
1227
|
-
/* @__PURE__ */
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1228
1248
|
"input",
|
|
1229
1249
|
{
|
|
1230
1250
|
type: "range",
|
|
@@ -1236,12 +1256,12 @@ var ForceControls = ({ config, onChange, onRestart }) => {
|
|
|
1236
1256
|
}
|
|
1237
1257
|
)
|
|
1238
1258
|
] }),
|
|
1239
|
-
/* @__PURE__ */
|
|
1240
|
-
/* @__PURE__ */
|
|
1241
|
-
/* @__PURE__ */
|
|
1242
|
-
/* @__PURE__ */
|
|
1259
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 10 }, children: [
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Link Distance" }),
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.linkDistance })
|
|
1243
1263
|
] }),
|
|
1244
|
-
/* @__PURE__ */
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1245
1265
|
"input",
|
|
1246
1266
|
{
|
|
1247
1267
|
type: "range",
|
|
@@ -1253,12 +1273,12 @@ var ForceControls = ({ config, onChange, onRestart }) => {
|
|
|
1253
1273
|
}
|
|
1254
1274
|
)
|
|
1255
1275
|
] }),
|
|
1256
|
-
/* @__PURE__ */
|
|
1257
|
-
/* @__PURE__ */
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 6 }, children: [
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Collision" }),
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.collisionRadius })
|
|
1260
1280
|
] }),
|
|
1261
|
-
/* @__PURE__ */
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1262
1282
|
"input",
|
|
1263
1283
|
{
|
|
1264
1284
|
type: "range",
|
|
@@ -1270,7 +1290,7 @@ var ForceControls = ({ config, onChange, onRestart }) => {
|
|
|
1270
1290
|
}
|
|
1271
1291
|
)
|
|
1272
1292
|
] }),
|
|
1273
|
-
/* @__PURE__ */
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1274
1294
|
"button",
|
|
1275
1295
|
{
|
|
1276
1296
|
onClick: onRestart,
|
|
@@ -1301,14 +1321,14 @@ var ObservablesGraphInner = ({
|
|
|
1301
1321
|
className,
|
|
1302
1322
|
showControls = true
|
|
1303
1323
|
}) => {
|
|
1304
|
-
const [forceConfig, setForceConfig] = useState({
|
|
1324
|
+
const [forceConfig, setForceConfig] = (0, import_react7.useState)({
|
|
1305
1325
|
...DEFAULT_FORCE_CONFIG,
|
|
1306
1326
|
...initialForceConfig
|
|
1307
1327
|
});
|
|
1308
|
-
const initialFitDone =
|
|
1309
|
-
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
|
1310
|
-
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
|
1311
|
-
|
|
1328
|
+
const initialFitDone = (0, import_react7.useRef)(false);
|
|
1329
|
+
const [nodes, setNodes, onNodesChange] = (0, import_react8.useNodesState)(initialNodes);
|
|
1330
|
+
const [edges, setEdges, onEdgesChange] = (0, import_react8.useEdgesState)(initialEdges);
|
|
1331
|
+
import_react7.default.useEffect(() => {
|
|
1312
1332
|
setNodes(initialNodes);
|
|
1313
1333
|
setEdges(initialEdges);
|
|
1314
1334
|
initialFitDone.current = false;
|
|
@@ -1320,30 +1340,30 @@ var ObservablesGraphInner = ({
|
|
|
1320
1340
|
updateForceConfig,
|
|
1321
1341
|
restartSimulation
|
|
1322
1342
|
} = useForceLayout(forceConfig, primaryRootId);
|
|
1323
|
-
const handleNodeClick =
|
|
1343
|
+
const handleNodeClick = (0, import_react7.useCallback)(
|
|
1324
1344
|
(_, node) => {
|
|
1325
1345
|
onNodeClick?.(node.id);
|
|
1326
1346
|
},
|
|
1327
1347
|
[onNodeClick]
|
|
1328
1348
|
);
|
|
1329
|
-
const handleNodeDoubleClick =
|
|
1349
|
+
const handleNodeDoubleClick = (0, import_react7.useCallback)(
|
|
1330
1350
|
(_, node) => {
|
|
1331
1351
|
onNodeDoubleClick?.(node.id);
|
|
1332
1352
|
},
|
|
1333
1353
|
[onNodeDoubleClick]
|
|
1334
1354
|
);
|
|
1335
|
-
const handleConfigChange =
|
|
1355
|
+
const handleConfigChange = (0, import_react7.useCallback)(
|
|
1336
1356
|
(updates) => {
|
|
1337
1357
|
setForceConfig((prev) => ({ ...prev, ...updates }));
|
|
1338
1358
|
updateForceConfig(updates);
|
|
1339
1359
|
},
|
|
1340
1360
|
[updateForceConfig]
|
|
1341
1361
|
);
|
|
1342
|
-
const miniMapNodeColor =
|
|
1362
|
+
const miniMapNodeColor = (0, import_react7.useCallback)((node) => {
|
|
1343
1363
|
const data = node.data;
|
|
1344
1364
|
return getLevelColor(data.level);
|
|
1345
1365
|
}, []);
|
|
1346
|
-
const containerStyle =
|
|
1366
|
+
const containerStyle = (0, import_react7.useMemo)(
|
|
1347
1367
|
() => ({
|
|
1348
1368
|
width,
|
|
1349
1369
|
height,
|
|
@@ -1352,8 +1372,8 @@ var ObservablesGraphInner = ({
|
|
|
1352
1372
|
}),
|
|
1353
1373
|
[width, height]
|
|
1354
1374
|
);
|
|
1355
|
-
return /* @__PURE__ */
|
|
1356
|
-
ReactFlow,
|
|
1375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1376
|
+
import_react8.ReactFlow,
|
|
1357
1377
|
{
|
|
1358
1378
|
nodes,
|
|
1359
1379
|
edges,
|
|
@@ -1367,7 +1387,7 @@ var ObservablesGraphInner = ({
|
|
|
1367
1387
|
nodeTypes,
|
|
1368
1388
|
edgeTypes,
|
|
1369
1389
|
defaultEdgeOptions,
|
|
1370
|
-
connectionMode: ConnectionMode.Loose,
|
|
1390
|
+
connectionMode: import_react8.ConnectionMode.Loose,
|
|
1371
1391
|
fitView: true,
|
|
1372
1392
|
fitViewOptions: { padding: 0.4, maxZoom: 1.5 },
|
|
1373
1393
|
minZoom: 0.1,
|
|
@@ -1382,17 +1402,17 @@ var ObservablesGraphInner = ({
|
|
|
1382
1402
|
zoomOnPinch: true,
|
|
1383
1403
|
panOnScroll: false,
|
|
1384
1404
|
children: [
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
Background,
|
|
1405
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1406
|
+
import_react8.Background,
|
|
1387
1407
|
{
|
|
1388
|
-
variant: BackgroundVariant.Dots,
|
|
1408
|
+
variant: import_react8.BackgroundVariant.Dots,
|
|
1389
1409
|
gap: 24,
|
|
1390
1410
|
size: 1,
|
|
1391
1411
|
color: "#d1d5db"
|
|
1392
1412
|
}
|
|
1393
1413
|
),
|
|
1394
|
-
/* @__PURE__ */
|
|
1395
|
-
Controls,
|
|
1414
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1415
|
+
import_react8.Controls,
|
|
1396
1416
|
{
|
|
1397
1417
|
showInteractive: false,
|
|
1398
1418
|
style: {
|
|
@@ -1402,8 +1422,8 @@ var ObservablesGraphInner = ({
|
|
|
1402
1422
|
}
|
|
1403
1423
|
}
|
|
1404
1424
|
),
|
|
1405
|
-
/* @__PURE__ */
|
|
1406
|
-
MiniMap,
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1426
|
+
import_react8.MiniMap,
|
|
1407
1427
|
{
|
|
1408
1428
|
nodeColor: miniMapNodeColor,
|
|
1409
1429
|
zoomable: true,
|
|
@@ -1417,7 +1437,7 @@ var ObservablesGraphInner = ({
|
|
|
1417
1437
|
maskColor: "rgba(0,0,0,0.08)"
|
|
1418
1438
|
}
|
|
1419
1439
|
),
|
|
1420
|
-
showControls && /* @__PURE__ */
|
|
1440
|
+
showControls && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Panel, { position: "top-right", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1421
1441
|
ForceControls,
|
|
1422
1442
|
{
|
|
1423
1443
|
config: forceConfig,
|
|
@@ -1431,7 +1451,7 @@ var ObservablesGraphInner = ({
|
|
|
1431
1451
|
};
|
|
1432
1452
|
var ObservablesGraph = (props) => {
|
|
1433
1453
|
const { investigation } = props;
|
|
1434
|
-
const { rootKeys, primaryRootId } =
|
|
1454
|
+
const { rootKeys, primaryRootId } = (0, import_react7.useMemo)(() => {
|
|
1435
1455
|
const rootType = investigation.data_extraction.root_type;
|
|
1436
1456
|
if (!rootType) {
|
|
1437
1457
|
return { rootKeys: /* @__PURE__ */ new Set(), primaryRootId: void 0 };
|
|
@@ -1445,12 +1465,12 @@ var ObservablesGraph = (props) => {
|
|
|
1445
1465
|
primaryRootId: rootsByType[0]?.key
|
|
1446
1466
|
};
|
|
1447
1467
|
}, [investigation]);
|
|
1448
|
-
const { initialNodes, initialEdges } =
|
|
1468
|
+
const { initialNodes, initialEdges } = (0, import_react7.useMemo)(() => {
|
|
1449
1469
|
const nodes = createObservableNodes(investigation, rootKeys);
|
|
1450
1470
|
const edges = createObservableEdges(investigation);
|
|
1451
1471
|
return { initialNodes: nodes, initialEdges: edges };
|
|
1452
1472
|
}, [investigation, rootKeys]);
|
|
1453
|
-
return /* @__PURE__ */
|
|
1473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1454
1474
|
ObservablesGraphInner,
|
|
1455
1475
|
{
|
|
1456
1476
|
...props,
|
|
@@ -1462,23 +1482,14 @@ var ObservablesGraph = (props) => {
|
|
|
1462
1482
|
};
|
|
1463
1483
|
|
|
1464
1484
|
// src/components/InvestigationGraph.tsx
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
Background as Background2,
|
|
1469
|
-
Controls as Controls2,
|
|
1470
|
-
MiniMap as MiniMap2,
|
|
1471
|
-
useNodesState as useNodesState2,
|
|
1472
|
-
useEdgesState as useEdgesState2,
|
|
1473
|
-
BackgroundVariant as BackgroundVariant2,
|
|
1474
|
-
MarkerType
|
|
1475
|
-
} from "@xyflow/react";
|
|
1476
|
-
import "@xyflow/react/dist/style.css";
|
|
1485
|
+
var import_react12 = __toESM(require("react"), 1);
|
|
1486
|
+
var import_react13 = require("@xyflow/react");
|
|
1487
|
+
var import_style2 = require("@xyflow/react/dist/style.css");
|
|
1477
1488
|
|
|
1478
1489
|
// src/components/InvestigationNode.tsx
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1490
|
+
var import_react9 = require("react");
|
|
1491
|
+
var import_react10 = require("@xyflow/react");
|
|
1492
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1482
1493
|
var NODE_CONFIG = {
|
|
1483
1494
|
root: {
|
|
1484
1495
|
minWidth: 140,
|
|
@@ -1519,11 +1530,11 @@ function InvestigationNodeComponent({ data, selected }) {
|
|
|
1519
1530
|
const borderColor = getLevelColor(level);
|
|
1520
1531
|
const backgroundColor = getLevelBackgroundColor(level);
|
|
1521
1532
|
const config = NODE_CONFIG[nodeType] || NODE_CONFIG.check;
|
|
1522
|
-
const IconComponent =
|
|
1533
|
+
const IconComponent = (0, import_react9.useMemo)(
|
|
1523
1534
|
() => getInvestigationIcon(nodeType),
|
|
1524
1535
|
[nodeType]
|
|
1525
1536
|
);
|
|
1526
|
-
const nodeStyle =
|
|
1537
|
+
const nodeStyle = (0, import_react9.useMemo)(
|
|
1527
1538
|
() => ({
|
|
1528
1539
|
minWidth: config.minWidth,
|
|
1529
1540
|
padding: config.padding,
|
|
@@ -1540,7 +1551,7 @@ function InvestigationNodeComponent({ data, selected }) {
|
|
|
1540
1551
|
}),
|
|
1541
1552
|
[config, backgroundColor, borderColor, selected]
|
|
1542
1553
|
);
|
|
1543
|
-
const headerStyle =
|
|
1554
|
+
const headerStyle = (0, import_react9.useMemo)(
|
|
1544
1555
|
() => ({
|
|
1545
1556
|
display: "flex",
|
|
1546
1557
|
alignItems: "center",
|
|
@@ -1549,7 +1560,7 @@ function InvestigationNodeComponent({ data, selected }) {
|
|
|
1549
1560
|
}),
|
|
1550
1561
|
[config.alignCenter]
|
|
1551
1562
|
);
|
|
1552
|
-
const labelStyle =
|
|
1563
|
+
const labelStyle = (0, import_react9.useMemo)(
|
|
1553
1564
|
() => ({
|
|
1554
1565
|
fontSize: config.fontSize,
|
|
1555
1566
|
fontWeight: config.fontWeight,
|
|
@@ -1562,7 +1573,7 @@ function InvestigationNodeComponent({ data, selected }) {
|
|
|
1562
1573
|
}),
|
|
1563
1574
|
[config]
|
|
1564
1575
|
);
|
|
1565
|
-
const descriptionStyle =
|
|
1576
|
+
const descriptionStyle = (0, import_react9.useMemo)(
|
|
1566
1577
|
() => ({
|
|
1567
1578
|
marginTop: 4,
|
|
1568
1579
|
fontSize: 10,
|
|
@@ -1584,21 +1595,21 @@ function InvestigationNodeComponent({ data, selected }) {
|
|
|
1584
1595
|
border: "none",
|
|
1585
1596
|
opacity: 0
|
|
1586
1597
|
};
|
|
1587
|
-
return /* @__PURE__ */
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
config.showIcon && /* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "investigation-node", style: nodeStyle, children: [
|
|
1599
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, children: [
|
|
1600
|
+
config.showIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { size: config.iconSize, color: borderColor }),
|
|
1601
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: labelStyle, title: label, children: label })
|
|
1591
1602
|
] }),
|
|
1592
|
-
description && /* @__PURE__ */
|
|
1593
|
-
/* @__PURE__ */
|
|
1594
|
-
/* @__PURE__ */
|
|
1603
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: descriptionStyle, title: description, children: description }),
|
|
1604
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.Handle, { type: "target", position: import_react10.Position.Left, style: handleStyle }),
|
|
1605
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.Handle, { type: "source", position: import_react10.Position.Right, style: handleStyle })
|
|
1595
1606
|
] });
|
|
1596
1607
|
}
|
|
1597
|
-
var InvestigationNode =
|
|
1608
|
+
var InvestigationNode = (0, import_react9.memo)(InvestigationNodeComponent);
|
|
1598
1609
|
|
|
1599
1610
|
// src/hooks/useDagreLayout.ts
|
|
1600
|
-
|
|
1601
|
-
|
|
1611
|
+
var import_react11 = require("react");
|
|
1612
|
+
var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
|
|
1602
1613
|
var DEFAULT_OPTIONS = {
|
|
1603
1614
|
direction: "LR",
|
|
1604
1615
|
// Horizontal layout by default
|
|
@@ -1610,7 +1621,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
|
|
|
1610
1621
|
return { nodes, edges };
|
|
1611
1622
|
}
|
|
1612
1623
|
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
1613
|
-
const g = new
|
|
1624
|
+
const g = new import_dagre.default.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
|
|
1614
1625
|
g.setGraph({
|
|
1615
1626
|
rankdir: opts.direction,
|
|
1616
1627
|
nodesep: opts.nodeSpacing,
|
|
@@ -1626,7 +1637,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
|
|
|
1626
1637
|
for (const edge of edges) {
|
|
1627
1638
|
g.setEdge(edge.source, edge.target);
|
|
1628
1639
|
}
|
|
1629
|
-
|
|
1640
|
+
import_dagre.default.layout(g);
|
|
1630
1641
|
const positionedNodes = nodes.map((node) => {
|
|
1631
1642
|
const dagNode = g.node(node.id);
|
|
1632
1643
|
const width = node.measured?.width ?? 150;
|
|
@@ -1643,7 +1654,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
|
|
|
1643
1654
|
}
|
|
1644
1655
|
|
|
1645
1656
|
// src/components/InvestigationGraph.tsx
|
|
1646
|
-
|
|
1657
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1647
1658
|
var nodeTypes2 = {
|
|
1648
1659
|
investigation: InvestigationNode
|
|
1649
1660
|
};
|
|
@@ -1654,7 +1665,7 @@ var defaultEdgeOptions2 = {
|
|
|
1654
1665
|
strokeWidth: 1.5
|
|
1655
1666
|
},
|
|
1656
1667
|
markerEnd: {
|
|
1657
|
-
type: MarkerType.ArrowClosed,
|
|
1668
|
+
type: import_react13.MarkerType.ArrowClosed,
|
|
1658
1669
|
width: 16,
|
|
1659
1670
|
height: 16,
|
|
1660
1671
|
color: "#94a3b8"
|
|
@@ -1783,35 +1794,35 @@ var InvestigationGraph = ({
|
|
|
1783
1794
|
onNodeClick,
|
|
1784
1795
|
className
|
|
1785
1796
|
}) => {
|
|
1786
|
-
const { initialNodes, initialEdges } =
|
|
1797
|
+
const { initialNodes, initialEdges } = (0, import_react12.useMemo)(() => {
|
|
1787
1798
|
const { nodes: nodes2, edges: edges2 } = createInvestigationGraph(investigation);
|
|
1788
1799
|
return { initialNodes: nodes2, initialEdges: edges2 };
|
|
1789
1800
|
}, [investigation]);
|
|
1790
|
-
const { nodes: layoutNodes, edges: layoutEdges } =
|
|
1801
|
+
const { nodes: layoutNodes, edges: layoutEdges } = (0, import_react12.useMemo)(() => {
|
|
1791
1802
|
return computeDagreLayout(initialNodes, initialEdges, {
|
|
1792
1803
|
direction: "LR",
|
|
1793
1804
|
nodeSpacing: 40,
|
|
1794
1805
|
rankSpacing: 140
|
|
1795
1806
|
});
|
|
1796
1807
|
}, [initialNodes, initialEdges]);
|
|
1797
|
-
const [nodes, setNodes, onNodesChange] =
|
|
1798
|
-
const [edges, setEdges, onEdgesChange] =
|
|
1799
|
-
|
|
1808
|
+
const [nodes, setNodes, onNodesChange] = (0, import_react13.useNodesState)(layoutNodes);
|
|
1809
|
+
const [edges, setEdges, onEdgesChange] = (0, import_react13.useEdgesState)(layoutEdges);
|
|
1810
|
+
import_react12.default.useEffect(() => {
|
|
1800
1811
|
setNodes(layoutNodes);
|
|
1801
1812
|
setEdges(layoutEdges);
|
|
1802
1813
|
}, [layoutNodes, layoutEdges, setNodes, setEdges]);
|
|
1803
|
-
const handleNodeClick =
|
|
1814
|
+
const handleNodeClick = (0, import_react12.useCallback)(
|
|
1804
1815
|
(_, node) => {
|
|
1805
1816
|
const data = node.data;
|
|
1806
1817
|
onNodeClick?.(node.id, data.nodeType);
|
|
1807
1818
|
},
|
|
1808
1819
|
[onNodeClick]
|
|
1809
1820
|
);
|
|
1810
|
-
const miniMapNodeColor =
|
|
1821
|
+
const miniMapNodeColor = (0, import_react12.useCallback)((node) => {
|
|
1811
1822
|
const data = node.data;
|
|
1812
1823
|
return getLevelColor(data.level);
|
|
1813
1824
|
}, []);
|
|
1814
|
-
const containerStyle =
|
|
1825
|
+
const containerStyle = (0, import_react12.useMemo)(
|
|
1815
1826
|
() => ({
|
|
1816
1827
|
width,
|
|
1817
1828
|
height,
|
|
@@ -1820,8 +1831,8 @@ var InvestigationGraph = ({
|
|
|
1820
1831
|
}),
|
|
1821
1832
|
[width, height]
|
|
1822
1833
|
);
|
|
1823
|
-
return /* @__PURE__ */
|
|
1824
|
-
|
|
1834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1835
|
+
import_react13.ReactFlow,
|
|
1825
1836
|
{
|
|
1826
1837
|
nodes,
|
|
1827
1838
|
edges,
|
|
@@ -1844,17 +1855,17 @@ var InvestigationGraph = ({
|
|
|
1844
1855
|
zoomOnPinch: true,
|
|
1845
1856
|
panOnScroll: false,
|
|
1846
1857
|
children: [
|
|
1847
|
-
/* @__PURE__ */
|
|
1848
|
-
|
|
1858
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1859
|
+
import_react13.Background,
|
|
1849
1860
|
{
|
|
1850
|
-
variant:
|
|
1861
|
+
variant: import_react13.BackgroundVariant.Dots,
|
|
1851
1862
|
gap: 24,
|
|
1852
1863
|
size: 1,
|
|
1853
1864
|
color: "#d1d5db"
|
|
1854
1865
|
}
|
|
1855
1866
|
),
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
|
|
1867
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1868
|
+
import_react13.Controls,
|
|
1858
1869
|
{
|
|
1859
1870
|
showInteractive: false,
|
|
1860
1871
|
style: {
|
|
@@ -1864,8 +1875,8 @@ var InvestigationGraph = ({
|
|
|
1864
1875
|
}
|
|
1865
1876
|
}
|
|
1866
1877
|
),
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1879
|
+
import_react13.MiniMap,
|
|
1869
1880
|
{
|
|
1870
1881
|
nodeColor: miniMapNodeColor,
|
|
1871
1882
|
zoomable: true,
|
|
@@ -1885,9 +1896,9 @@ var InvestigationGraph = ({
|
|
|
1885
1896
|
};
|
|
1886
1897
|
|
|
1887
1898
|
// src/components/CyvestGraph.tsx
|
|
1888
|
-
|
|
1899
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1889
1900
|
var ViewToggle = ({ currentView, onChange }) => {
|
|
1890
|
-
const containerStyle =
|
|
1901
|
+
const containerStyle = (0, import_react14.useMemo)(
|
|
1891
1902
|
() => ({
|
|
1892
1903
|
position: "absolute",
|
|
1893
1904
|
top: 12,
|
|
@@ -1905,7 +1916,7 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1905
1916
|
}),
|
|
1906
1917
|
[]
|
|
1907
1918
|
);
|
|
1908
|
-
const getButtonStyle =
|
|
1919
|
+
const getButtonStyle = (0, import_react14.useCallback)(
|
|
1909
1920
|
(isActive) => ({
|
|
1910
1921
|
padding: "8px 14px",
|
|
1911
1922
|
border: "none",
|
|
@@ -1920,8 +1931,8 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1920
1931
|
}),
|
|
1921
1932
|
[]
|
|
1922
1933
|
);
|
|
1923
|
-
return /* @__PURE__ */
|
|
1924
|
-
/* @__PURE__ */
|
|
1934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: containerStyle, children: [
|
|
1935
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1925
1936
|
"button",
|
|
1926
1937
|
{
|
|
1927
1938
|
onClick: () => onChange("observables"),
|
|
@@ -1938,8 +1949,8 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1938
1949
|
e.currentTarget.style.color = "#4b5563";
|
|
1939
1950
|
}
|
|
1940
1951
|
},
|
|
1941
|
-
children: /* @__PURE__ */
|
|
1942
|
-
/* @__PURE__ */
|
|
1952
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1943
1954
|
"svg",
|
|
1944
1955
|
{
|
|
1945
1956
|
width: "14",
|
|
@@ -1951,12 +1962,12 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1951
1962
|
strokeLinecap: "round",
|
|
1952
1963
|
strokeLinejoin: "round",
|
|
1953
1964
|
children: [
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
/* @__PURE__ */
|
|
1956
|
-
/* @__PURE__ */
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
1965
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
|
|
1966
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1967
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
|
|
1968
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
|
|
1969
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
|
|
1970
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "20", y1: "12", x2: "22", y2: "12" })
|
|
1960
1971
|
]
|
|
1961
1972
|
}
|
|
1962
1973
|
),
|
|
@@ -1964,7 +1975,7 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1964
1975
|
] })
|
|
1965
1976
|
}
|
|
1966
1977
|
),
|
|
1967
|
-
/* @__PURE__ */
|
|
1978
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1968
1979
|
"button",
|
|
1969
1980
|
{
|
|
1970
1981
|
onClick: () => onChange("investigation"),
|
|
@@ -1981,8 +1992,8 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1981
1992
|
e.currentTarget.style.color = "#4b5563";
|
|
1982
1993
|
}
|
|
1983
1994
|
},
|
|
1984
|
-
children: /* @__PURE__ */
|
|
1985
|
-
/* @__PURE__ */
|
|
1995
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1986
1997
|
"svg",
|
|
1987
1998
|
{
|
|
1988
1999
|
width: "14",
|
|
@@ -1994,9 +2005,9 @@ var ViewToggle = ({ currentView, onChange }) => {
|
|
|
1994
2005
|
strokeLinecap: "round",
|
|
1995
2006
|
strokeLinejoin: "round",
|
|
1996
2007
|
children: [
|
|
1997
|
-
/* @__PURE__ */
|
|
1998
|
-
/* @__PURE__ */
|
|
1999
|
-
/* @__PURE__ */
|
|
2008
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
2009
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 3v18" }),
|
|
2010
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 9h18" })
|
|
2000
2011
|
]
|
|
2001
2012
|
}
|
|
2002
2013
|
),
|
|
@@ -2015,16 +2026,16 @@ var CyvestGraph = ({
|
|
|
2015
2026
|
className,
|
|
2016
2027
|
showViewToggle = true
|
|
2017
2028
|
}) => {
|
|
2018
|
-
const [view, setView] =
|
|
2029
|
+
const [view, setView] = (0, import_react14.useState)(
|
|
2019
2030
|
initialView
|
|
2020
2031
|
);
|
|
2021
|
-
const handleNodeClick =
|
|
2032
|
+
const handleNodeClick = (0, import_react14.useCallback)(
|
|
2022
2033
|
(nodeId, _nodeType) => {
|
|
2023
2034
|
onNodeClick?.(nodeId);
|
|
2024
2035
|
},
|
|
2025
2036
|
[onNodeClick]
|
|
2026
2037
|
);
|
|
2027
|
-
const containerStyle =
|
|
2038
|
+
const containerStyle = (0, import_react14.useMemo)(
|
|
2028
2039
|
() => ({
|
|
2029
2040
|
width,
|
|
2030
2041
|
height,
|
|
@@ -2032,9 +2043,9 @@ var CyvestGraph = ({
|
|
|
2032
2043
|
}),
|
|
2033
2044
|
[width, height]
|
|
2034
2045
|
);
|
|
2035
|
-
return /* @__PURE__ */
|
|
2036
|
-
showViewToggle && /* @__PURE__ */
|
|
2037
|
-
view === "observables" ? /* @__PURE__ */
|
|
2046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, style: containerStyle, children: [
|
|
2047
|
+
showViewToggle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewToggle, { currentView: view, onChange: setView }),
|
|
2048
|
+
view === "observables" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2038
2049
|
ObservablesGraph,
|
|
2039
2050
|
{
|
|
2040
2051
|
investigation,
|
|
@@ -2043,7 +2054,7 @@ var CyvestGraph = ({
|
|
|
2043
2054
|
onNodeClick: handleNodeClick,
|
|
2044
2055
|
showControls: true
|
|
2045
2056
|
}
|
|
2046
|
-
) : /* @__PURE__ */
|
|
2057
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2047
2058
|
InvestigationGraph,
|
|
2048
2059
|
{
|
|
2049
2060
|
investigation,
|
|
@@ -2054,7 +2065,8 @@ var CyvestGraph = ({
|
|
|
2054
2065
|
)
|
|
2055
2066
|
] });
|
|
2056
2067
|
};
|
|
2057
|
-
export
|
|
2068
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
2069
|
+
0 && (module.exports = {
|
|
2058
2070
|
CyvestGraph,
|
|
2059
2071
|
DEFAULT_FORCE_CONFIG,
|
|
2060
2072
|
INVESTIGATION_ICON_MAP,
|
|
@@ -2063,4 +2075,4 @@ export {
|
|
|
2063
2075
|
ObservablesGraph,
|
|
2064
2076
|
getInvestigationIcon,
|
|
2065
2077
|
getObservableIcon
|
|
2066
|
-
};
|
|
2078
|
+
});
|