@eventcatalog/visualiser 3.18.4 → 3.20.0
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.d.mts +48 -28
- package/dist/index.d.ts +48 -28
- package/dist/index.js +2032 -1084
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1745 -787
- package/dist/index.mjs.map +1 -1
- package/dist/styles-core.css +192 -3
- package/dist/styles.css +192 -3
- package/package.json +5 -2
package/dist/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
useState as useState14,
|
|
6
6
|
useCallback as useCallback12,
|
|
7
7
|
useRef as useRef6,
|
|
8
|
-
memo as
|
|
8
|
+
memo as memo35
|
|
9
9
|
} from "react";
|
|
10
10
|
import { createPortal } from "react-dom";
|
|
11
11
|
import {
|
|
@@ -4114,6 +4114,7 @@ var config_default5 = {
|
|
|
4114
4114
|
// src/nodes/Flow.tsx
|
|
4115
4115
|
import { memo as memo16, useMemo as useMemo7 } from "react";
|
|
4116
4116
|
import { Handle as Handle12 } from "@xyflow/react";
|
|
4117
|
+
import { Maximize2 } from "lucide-react";
|
|
4117
4118
|
import * as ContextMenu from "@radix-ui/react-context-menu";
|
|
4118
4119
|
|
|
4119
4120
|
// src/utils/badges.tsx
|
|
@@ -4223,7 +4224,7 @@ function getIcon(iconName) {
|
|
|
4223
4224
|
}
|
|
4224
4225
|
|
|
4225
4226
|
// src/nodes/Flow.tsx
|
|
4226
|
-
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4227
|
+
import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4227
4228
|
function classNames12(...classes) {
|
|
4228
4229
|
return classes.filter(Boolean).join(" ");
|
|
4229
4230
|
}
|
|
@@ -4233,6 +4234,7 @@ var Flow_default = memo16(function FlowNode({
|
|
|
4233
4234
|
targetPosition
|
|
4234
4235
|
}) {
|
|
4235
4236
|
const { mode, flow } = data;
|
|
4237
|
+
const canExpand = Array.isArray(data?.expandedNodes) && data.expandedNodes.length > 0;
|
|
4236
4238
|
const { id, version, owners = EMPTY_ARRAY, name, styles } = flow.data;
|
|
4237
4239
|
const { node: { color = "teal", label } = {}, icon = "QueueListIcon" } = styles || {};
|
|
4238
4240
|
const Icon = useMemo7(() => getIcon(icon), [icon]);
|
|
@@ -4243,60 +4245,91 @@ var Flow_default = memo16(function FlowNode({
|
|
|
4243
4245
|
/* @__PURE__ */ jsx17(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs15(
|
|
4244
4246
|
"div",
|
|
4245
4247
|
{
|
|
4246
|
-
className:
|
|
4247
|
-
|
|
4248
|
-
),
|
|
4249
|
-
style: NODE_WIDTH_STYLE,
|
|
4248
|
+
className: "relative",
|
|
4249
|
+
style: { isolation: "isolate", ...NODE_WIDTH_STYLE },
|
|
4250
4250
|
children: [
|
|
4251
|
+
canExpand && /* @__PURE__ */ jsxs15(Fragment2, { children: [
|
|
4252
|
+
/* @__PURE__ */ jsx17(
|
|
4253
|
+
"div",
|
|
4254
|
+
{
|
|
4255
|
+
className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
|
|
4256
|
+
style: { transform: "translate(6px, 6px)", opacity: 0.5 },
|
|
4257
|
+
"aria-hidden": true
|
|
4258
|
+
}
|
|
4259
|
+
),
|
|
4260
|
+
/* @__PURE__ */ jsx17(
|
|
4261
|
+
"div",
|
|
4262
|
+
{
|
|
4263
|
+
className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
|
|
4264
|
+
style: { transform: "translate(3px, 3px)", opacity: 0.7 },
|
|
4265
|
+
"aria-hidden": true
|
|
4266
|
+
}
|
|
4267
|
+
)
|
|
4268
|
+
] }),
|
|
4251
4269
|
/* @__PURE__ */ jsxs15(
|
|
4252
4270
|
"div",
|
|
4253
4271
|
{
|
|
4254
4272
|
className: classNames12(
|
|
4255
|
-
`
|
|
4256
|
-
`border-r-[1px] border-${color}-500`
|
|
4273
|
+
`relative rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
|
|
4257
4274
|
),
|
|
4275
|
+
style: NODE_WIDTH_STYLE,
|
|
4258
4276
|
children: [
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
"span",
|
|
4277
|
+
/* @__PURE__ */ jsxs15(
|
|
4278
|
+
"div",
|
|
4262
4279
|
{
|
|
4263
|
-
className:
|
|
4264
|
-
|
|
4265
|
-
|
|
4280
|
+
className: classNames12(
|
|
4281
|
+
`bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-${color}-100`,
|
|
4282
|
+
`border-r-[1px] border-${color}-500`
|
|
4283
|
+
),
|
|
4284
|
+
children: [
|
|
4285
|
+
Icon && /* @__PURE__ */ jsx17(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
4286
|
+
mode === "full" && /* @__PURE__ */ jsx17(
|
|
4287
|
+
"span",
|
|
4288
|
+
{
|
|
4289
|
+
className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
|
|
4290
|
+
style: ROTATED_LABEL_STYLE,
|
|
4291
|
+
children: nodeLabel
|
|
4292
|
+
}
|
|
4293
|
+
)
|
|
4294
|
+
]
|
|
4266
4295
|
}
|
|
4267
|
-
)
|
|
4268
|
-
]
|
|
4269
|
-
}
|
|
4270
|
-
),
|
|
4271
|
-
/* @__PURE__ */ jsxs15("div", { className: "p-1 flex-1", children: [
|
|
4272
|
-
targetPosition && /* @__PURE__ */ jsx17(Handle12, { type: "target", position: targetPosition }),
|
|
4273
|
-
sourcePosition && /* @__PURE__ */ jsx17(Handle12, { type: "source", position: sourcePosition }),
|
|
4274
|
-
/* @__PURE__ */ jsxs15(
|
|
4275
|
-
"div",
|
|
4276
|
-
{
|
|
4277
|
-
className: classNames12(
|
|
4278
|
-
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4279
4296
|
),
|
|
4280
|
-
children: [
|
|
4281
|
-
/* @__PURE__ */ jsx17(
|
|
4282
|
-
/* @__PURE__ */
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4297
|
+
/* @__PURE__ */ jsxs15("div", { className: "p-1 flex-1", children: [
|
|
4298
|
+
targetPosition && /* @__PURE__ */ jsx17(Handle12, { type: "target", position: targetPosition }),
|
|
4299
|
+
sourcePosition && /* @__PURE__ */ jsx17(Handle12, { type: "source", position: sourcePosition }),
|
|
4300
|
+
/* @__PURE__ */ jsxs15(
|
|
4301
|
+
"div",
|
|
4302
|
+
{
|
|
4303
|
+
className: classNames12(
|
|
4304
|
+
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4305
|
+
),
|
|
4306
|
+
children: [
|
|
4307
|
+
/* @__PURE__ */ jsx17("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
|
|
4308
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
|
|
4309
|
+
/* @__PURE__ */ jsxs15("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
|
|
4310
|
+
"v",
|
|
4311
|
+
version
|
|
4312
|
+
] }),
|
|
4313
|
+
mode === "simple" && /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
|
|
4314
|
+
] })
|
|
4315
|
+
]
|
|
4316
|
+
}
|
|
4317
|
+
),
|
|
4318
|
+
mode === "full" && /* @__PURE__ */ jsxs15("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
|
|
4319
|
+
/* @__PURE__ */ jsx17("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx17("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
|
|
4320
|
+
/* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs15("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
|
|
4321
|
+
"Owners: ",
|
|
4322
|
+
owners.length
|
|
4323
|
+
] }) })
|
|
4324
|
+
] }),
|
|
4325
|
+
canExpand && /* @__PURE__ */ jsxs15("div", { className: "mt-1 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
|
|
4326
|
+
/* @__PURE__ */ jsx17(Maximize2, { className: "w-2.5 h-2.5" }),
|
|
4327
|
+
"Click to explore"
|
|
4288
4328
|
] })
|
|
4289
|
-
]
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
/* @__PURE__ */ jsx17("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx17("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
|
|
4294
|
-
/* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs15("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
|
|
4295
|
-
"Owners: ",
|
|
4296
|
-
owners.length
|
|
4297
|
-
] }) })
|
|
4298
|
-
] })
|
|
4299
|
-
] })
|
|
4329
|
+
] })
|
|
4330
|
+
]
|
|
4331
|
+
}
|
|
4332
|
+
)
|
|
4300
4333
|
]
|
|
4301
4334
|
}
|
|
4302
4335
|
) }),
|
|
@@ -4332,15 +4365,126 @@ var Flow_default = memo16(function FlowNode({
|
|
|
4332
4365
|
] });
|
|
4333
4366
|
});
|
|
4334
4367
|
|
|
4368
|
+
// src/nodes/FlowExpandedNode.tsx
|
|
4369
|
+
import { memo as memo17 } from "react";
|
|
4370
|
+
import { Workflow, Minimize2 } from "lucide-react";
|
|
4371
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
4372
|
+
var CONTAINER_STYLE = {
|
|
4373
|
+
width: "100%",
|
|
4374
|
+
height: "100%",
|
|
4375
|
+
borderRadius: 12,
|
|
4376
|
+
border: "2px solid rgba(20, 184, 166, 0.5)",
|
|
4377
|
+
backgroundColor: "rgba(20, 184, 166, 0.08)",
|
|
4378
|
+
boxShadow: "0 2px 12px rgba(20, 184, 166, 0.12)",
|
|
4379
|
+
position: "relative",
|
|
4380
|
+
overflow: "visible"
|
|
4381
|
+
};
|
|
4382
|
+
var HEADER_STYLE = {
|
|
4383
|
+
position: "absolute",
|
|
4384
|
+
top: 0,
|
|
4385
|
+
left: 0,
|
|
4386
|
+
right: 0,
|
|
4387
|
+
height: 44,
|
|
4388
|
+
borderTopLeftRadius: 10,
|
|
4389
|
+
borderTopRightRadius: 10,
|
|
4390
|
+
background: "rgba(20, 184, 166, 0.12)",
|
|
4391
|
+
borderBottom: "1px solid rgba(20, 184, 166, 0.3)",
|
|
4392
|
+
overflow: "visible"
|
|
4393
|
+
};
|
|
4394
|
+
var BADGE_STYLE = {
|
|
4395
|
+
position: "absolute",
|
|
4396
|
+
top: -10,
|
|
4397
|
+
left: 12,
|
|
4398
|
+
display: "inline-flex",
|
|
4399
|
+
alignItems: "center",
|
|
4400
|
+
gap: 3,
|
|
4401
|
+
padding: "2px 8px",
|
|
4402
|
+
borderRadius: 4,
|
|
4403
|
+
background: "#0d9488",
|
|
4404
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
|
|
4405
|
+
zIndex: 10,
|
|
4406
|
+
fontSize: 8,
|
|
4407
|
+
fontWeight: 700,
|
|
4408
|
+
letterSpacing: "0.08em",
|
|
4409
|
+
textTransform: "uppercase",
|
|
4410
|
+
color: "white"
|
|
4411
|
+
};
|
|
4412
|
+
var HEADER_CONTENT_STYLE = {
|
|
4413
|
+
display: "flex",
|
|
4414
|
+
alignItems: "center",
|
|
4415
|
+
justifyContent: "space-between",
|
|
4416
|
+
height: "100%",
|
|
4417
|
+
padding: "0 12px 0 14px"
|
|
4418
|
+
};
|
|
4419
|
+
var FLOW_NAME_STYLE = {
|
|
4420
|
+
fontSize: 11,
|
|
4421
|
+
fontWeight: 700,
|
|
4422
|
+
color: "rgb(var(--ec-page-text))",
|
|
4423
|
+
letterSpacing: "0.04em",
|
|
4424
|
+
textTransform: "uppercase",
|
|
4425
|
+
whiteSpace: "nowrap"
|
|
4426
|
+
};
|
|
4427
|
+
var VERSION_STYLE = {
|
|
4428
|
+
fontSize: 10,
|
|
4429
|
+
fontWeight: 500,
|
|
4430
|
+
color: "#5eead4",
|
|
4431
|
+
marginLeft: 8
|
|
4432
|
+
};
|
|
4433
|
+
var COLLAPSE_BUTTON_STYLE = {
|
|
4434
|
+
background: "#0d9488",
|
|
4435
|
+
border: "1px solid #5eead4",
|
|
4436
|
+
borderRadius: 6,
|
|
4437
|
+
padding: "4px 10px",
|
|
4438
|
+
cursor: "pointer",
|
|
4439
|
+
display: "flex",
|
|
4440
|
+
alignItems: "center",
|
|
4441
|
+
gap: 4,
|
|
4442
|
+
fontSize: 10,
|
|
4443
|
+
fontWeight: 600,
|
|
4444
|
+
color: "white"
|
|
4445
|
+
};
|
|
4446
|
+
var FlowExpandedNode_default = memo17(function FlowExpandedNode({
|
|
4447
|
+
data
|
|
4448
|
+
}) {
|
|
4449
|
+
const { flowName, version } = data;
|
|
4450
|
+
return /* @__PURE__ */ jsx18("div", { style: CONTAINER_STYLE, children: /* @__PURE__ */ jsxs16("div", { style: HEADER_STYLE, children: [
|
|
4451
|
+
/* @__PURE__ */ jsxs16("div", { style: BADGE_STYLE, children: [
|
|
4452
|
+
/* @__PURE__ */ jsx18(Workflow, { size: 10, strokeWidth: 2.5 }),
|
|
4453
|
+
"Sub-flow"
|
|
4454
|
+
] }),
|
|
4455
|
+
/* @__PURE__ */ jsxs16("div", { style: HEADER_CONTENT_STYLE, children: [
|
|
4456
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center" }, children: [
|
|
4457
|
+
/* @__PURE__ */ jsx18("span", { style: FLOW_NAME_STYLE, children: flowName || "Flow" }),
|
|
4458
|
+
version && /* @__PURE__ */ jsxs16("span", { style: VERSION_STYLE, children: [
|
|
4459
|
+
"v",
|
|
4460
|
+
version
|
|
4461
|
+
] })
|
|
4462
|
+
] }),
|
|
4463
|
+
/* @__PURE__ */ jsxs16(
|
|
4464
|
+
"button",
|
|
4465
|
+
{
|
|
4466
|
+
style: COLLAPSE_BUTTON_STYLE,
|
|
4467
|
+
className: "ec-collapse-flow-btn nodrag nopan",
|
|
4468
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
4469
|
+
children: [
|
|
4470
|
+
/* @__PURE__ */ jsx18(Minimize2, { size: 12, strokeWidth: 2.5 }),
|
|
4471
|
+
"Collapse"
|
|
4472
|
+
]
|
|
4473
|
+
}
|
|
4474
|
+
)
|
|
4475
|
+
] })
|
|
4476
|
+
] }) });
|
|
4477
|
+
});
|
|
4478
|
+
|
|
4335
4479
|
// src/nodes/Entity.tsx
|
|
4336
4480
|
import { Handle as Handle13, Position as Position12 } from "@xyflow/react";
|
|
4337
4481
|
import * as ContextMenu2 from "@radix-ui/react-context-menu";
|
|
4338
|
-
import { memo as
|
|
4339
|
-
import { Fragment as
|
|
4482
|
+
import { memo as memo18, useState as useState3, useMemo as useMemo8 } from "react";
|
|
4483
|
+
import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4340
4484
|
function classNames13(...classes) {
|
|
4341
4485
|
return classes.filter(Boolean).join(" ");
|
|
4342
4486
|
}
|
|
4343
|
-
var Entity_default =
|
|
4487
|
+
var Entity_default = memo18(function EntityNode({
|
|
4344
4488
|
data,
|
|
4345
4489
|
sourcePosition,
|
|
4346
4490
|
targetPosition
|
|
@@ -4361,8 +4505,8 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4361
4505
|
const Icon = useMemo8(() => getIcon(icon), [icon]);
|
|
4362
4506
|
const [hoveredProperty, setHoveredProperty] = useState3(null);
|
|
4363
4507
|
const portalContainer = usePortalContainer();
|
|
4364
|
-
return /* @__PURE__ */
|
|
4365
|
-
/* @__PURE__ */
|
|
4508
|
+
return /* @__PURE__ */ jsxs17(ContextMenu2.Root, { children: [
|
|
4509
|
+
/* @__PURE__ */ jsx19(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs17(
|
|
4366
4510
|
"div",
|
|
4367
4511
|
{
|
|
4368
4512
|
className: classNames13(
|
|
@@ -4370,7 +4514,7 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4370
4514
|
externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
|
|
4371
4515
|
),
|
|
4372
4516
|
children: [
|
|
4373
|
-
/* @__PURE__ */
|
|
4517
|
+
/* @__PURE__ */ jsxs17(
|
|
4374
4518
|
"div",
|
|
4375
4519
|
{
|
|
4376
4520
|
className: classNames13(
|
|
@@ -4378,34 +4522,34 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4378
4522
|
externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
|
|
4379
4523
|
),
|
|
4380
4524
|
children: [
|
|
4381
|
-
/* @__PURE__ */
|
|
4382
|
-
Icon && /* @__PURE__ */
|
|
4383
|
-
/* @__PURE__ */
|
|
4384
|
-
aggregateRoot && /* @__PURE__ */
|
|
4525
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
|
|
4526
|
+
Icon && /* @__PURE__ */ jsx19(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
|
|
4527
|
+
/* @__PURE__ */ jsx19("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
|
|
4528
|
+
aggregateRoot && /* @__PURE__ */ jsx19("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium", children: "AR" })
|
|
4385
4529
|
] }),
|
|
4386
|
-
domainName && /* @__PURE__ */
|
|
4530
|
+
domainName && /* @__PURE__ */ jsxs17("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
|
|
4387
4531
|
"from ",
|
|
4388
4532
|
domainName,
|
|
4389
4533
|
" domain"
|
|
4390
4534
|
] }),
|
|
4391
|
-
mode === "full" && /* @__PURE__ */
|
|
4535
|
+
mode === "full" && /* @__PURE__ */ jsxs17("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
|
|
4392
4536
|
"v",
|
|
4393
4537
|
version
|
|
4394
4538
|
] })
|
|
4395
4539
|
]
|
|
4396
4540
|
}
|
|
4397
4541
|
),
|
|
4398
|
-
properties.length > 0 ? /* @__PURE__ */
|
|
4542
|
+
properties.length > 0 ? /* @__PURE__ */ jsx19("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
|
|
4399
4543
|
const propertyKey = `${property.name}-${index}`;
|
|
4400
4544
|
const isHovered = hoveredProperty === propertyKey;
|
|
4401
|
-
return /* @__PURE__ */
|
|
4545
|
+
return /* @__PURE__ */ jsxs17(
|
|
4402
4546
|
"div",
|
|
4403
4547
|
{
|
|
4404
4548
|
className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
|
|
4405
4549
|
onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
|
|
4406
4550
|
onMouseLeave: () => setHoveredProperty(null),
|
|
4407
4551
|
children: [
|
|
4408
|
-
/* @__PURE__ */
|
|
4552
|
+
/* @__PURE__ */ jsx19(
|
|
4409
4553
|
Handle13,
|
|
4410
4554
|
{
|
|
4411
4555
|
type: "target",
|
|
@@ -4415,7 +4559,7 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4415
4559
|
style: HANDLE_LEFT_OFFSET_STYLE
|
|
4416
4560
|
}
|
|
4417
4561
|
),
|
|
4418
|
-
/* @__PURE__ */
|
|
4562
|
+
/* @__PURE__ */ jsx19(
|
|
4419
4563
|
Handle13,
|
|
4420
4564
|
{
|
|
4421
4565
|
type: "source",
|
|
@@ -4425,47 +4569,47 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4425
4569
|
style: HANDLE_RIGHT_OFFSET_STYLE
|
|
4426
4570
|
}
|
|
4427
4571
|
),
|
|
4428
|
-
/* @__PURE__ */
|
|
4429
|
-
/* @__PURE__ */
|
|
4430
|
-
/* @__PURE__ */
|
|
4431
|
-
property.required && /* @__PURE__ */
|
|
4572
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex-1 flex items-center justify-between", children: [
|
|
4573
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
|
|
4574
|
+
/* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
|
|
4575
|
+
property.required && /* @__PURE__ */ jsx19("span", { className: "text-red-500 text-xs", children: "*" })
|
|
4432
4576
|
] }),
|
|
4433
|
-
/* @__PURE__ */
|
|
4577
|
+
/* @__PURE__ */ jsx19("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
|
|
4434
4578
|
] }),
|
|
4435
|
-
property.references && /* @__PURE__ */
|
|
4579
|
+
property.references && /* @__PURE__ */ jsx19("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx19(
|
|
4436
4580
|
"div",
|
|
4437
4581
|
{
|
|
4438
4582
|
className: "w-2 h-2 bg-blue-500 rounded-full",
|
|
4439
4583
|
title: `References ${property.references}`
|
|
4440
4584
|
}
|
|
4441
4585
|
) }),
|
|
4442
|
-
isHovered && property.description && /* @__PURE__ */
|
|
4443
|
-
/* @__PURE__ */
|
|
4444
|
-
/* @__PURE__ */
|
|
4586
|
+
isHovered && property.description && /* @__PURE__ */ jsxs17("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
|
|
4587
|
+
/* @__PURE__ */ jsx19("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
|
|
4588
|
+
/* @__PURE__ */ jsx19("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
|
|
4445
4589
|
] })
|
|
4446
4590
|
]
|
|
4447
4591
|
},
|
|
4448
4592
|
propertyKey
|
|
4449
4593
|
);
|
|
4450
|
-
}) }) : /* @__PURE__ */
|
|
4451
|
-
properties.length === 0 && /* @__PURE__ */
|
|
4452
|
-
targetPosition && /* @__PURE__ */
|
|
4453
|
-
sourcePosition && /* @__PURE__ */
|
|
4594
|
+
}) }) : /* @__PURE__ */ jsx19("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
|
|
4595
|
+
properties.length === 0 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
|
|
4596
|
+
targetPosition && /* @__PURE__ */ jsx19(Handle13, { type: "target", position: targetPosition }),
|
|
4597
|
+
sourcePosition && /* @__PURE__ */ jsx19(Handle13, { type: "source", position: sourcePosition })
|
|
4454
4598
|
] })
|
|
4455
4599
|
]
|
|
4456
4600
|
}
|
|
4457
4601
|
) }),
|
|
4458
|
-
/* @__PURE__ */
|
|
4602
|
+
/* @__PURE__ */ jsx19(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx19(
|
|
4459
4603
|
ContextMenu2.Content,
|
|
4460
4604
|
{
|
|
4461
4605
|
className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]",
|
|
4462
4606
|
onClick: (e) => e.stopPropagation(),
|
|
4463
|
-
children: /* @__PURE__ */
|
|
4607
|
+
children: /* @__PURE__ */ jsx19(
|
|
4464
4608
|
ContextMenu2.Item,
|
|
4465
4609
|
{
|
|
4466
4610
|
asChild: true,
|
|
4467
4611
|
className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-accent-subtle))] rounded-sm flex items-center",
|
|
4468
|
-
children: /* @__PURE__ */
|
|
4612
|
+
children: /* @__PURE__ */ jsx19("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
|
|
4469
4613
|
}
|
|
4470
4614
|
)
|
|
4471
4615
|
}
|
|
@@ -4474,14 +4618,14 @@ var Entity_default = memo17(function EntityNode({
|
|
|
4474
4618
|
});
|
|
4475
4619
|
|
|
4476
4620
|
// src/nodes/User.tsx
|
|
4477
|
-
import { memo as
|
|
4621
|
+
import { memo as memo19 } from "react";
|
|
4478
4622
|
import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
|
|
4479
4623
|
import { Handle as Handle14 } from "@xyflow/react";
|
|
4480
|
-
import { jsx as
|
|
4624
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4481
4625
|
function classNames14(...classes) {
|
|
4482
4626
|
return classes.filter(Boolean).join(" ");
|
|
4483
4627
|
}
|
|
4484
|
-
var User_default =
|
|
4628
|
+
var User_default = memo19(function UserNode({
|
|
4485
4629
|
data,
|
|
4486
4630
|
sourcePosition,
|
|
4487
4631
|
targetPosition
|
|
@@ -4493,7 +4637,7 @@ var User_default = memo18(function UserNode({
|
|
|
4493
4637
|
showSource: _showSource = true
|
|
4494
4638
|
} = data;
|
|
4495
4639
|
const { summary, actor: { name } = {} } = step;
|
|
4496
|
-
return /* @__PURE__ */
|
|
4640
|
+
return /* @__PURE__ */ jsxs18(
|
|
4497
4641
|
"div",
|
|
4498
4642
|
{
|
|
4499
4643
|
className: classNames14(
|
|
@@ -4502,7 +4646,7 @@ var User_default = memo18(function UserNode({
|
|
|
4502
4646
|
),
|
|
4503
4647
|
style: NODE_WIDTH_STYLE,
|
|
4504
4648
|
children: [
|
|
4505
|
-
/* @__PURE__ */
|
|
4649
|
+
/* @__PURE__ */ jsxs18(
|
|
4506
4650
|
"div",
|
|
4507
4651
|
{
|
|
4508
4652
|
className: classNames14(
|
|
@@ -4510,8 +4654,8 @@ var User_default = memo18(function UserNode({
|
|
|
4510
4654
|
`border-r-[1px] border-yellow-500`
|
|
4511
4655
|
),
|
|
4512
4656
|
children: [
|
|
4513
|
-
/* @__PURE__ */
|
|
4514
|
-
mode === "full" && /* @__PURE__ */
|
|
4657
|
+
/* @__PURE__ */ jsx20(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
4658
|
+
mode === "full" && /* @__PURE__ */ jsx20(
|
|
4515
4659
|
"span",
|
|
4516
4660
|
{
|
|
4517
4661
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4522,24 +4666,24 @@ var User_default = memo18(function UserNode({
|
|
|
4522
4666
|
]
|
|
4523
4667
|
}
|
|
4524
4668
|
),
|
|
4525
|
-
/* @__PURE__ */
|
|
4526
|
-
targetPosition && /* @__PURE__ */
|
|
4527
|
-
sourcePosition && /* @__PURE__ */
|
|
4528
|
-
(!summary || mode !== "full") && /* @__PURE__ */
|
|
4529
|
-
/* @__PURE__ */
|
|
4530
|
-
mode === "simple" && /* @__PURE__ */
|
|
4669
|
+
/* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1", children: [
|
|
4670
|
+
targetPosition && /* @__PURE__ */ jsx20(Handle14, { type: "target", position: targetPosition }),
|
|
4671
|
+
sourcePosition && /* @__PURE__ */ jsx20(Handle14, { type: "source", position: sourcePosition }),
|
|
4672
|
+
(!summary || mode !== "full") && /* @__PURE__ */ jsxs18("div", { className: "h-full ", children: [
|
|
4673
|
+
/* @__PURE__ */ jsx20("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
|
|
4674
|
+
mode === "simple" && /* @__PURE__ */ jsx20("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx20("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
|
|
4531
4675
|
] }),
|
|
4532
|
-
summary && mode === "full" && /* @__PURE__ */
|
|
4533
|
-
/* @__PURE__ */
|
|
4676
|
+
summary && mode === "full" && /* @__PURE__ */ jsxs18("div", { children: [
|
|
4677
|
+
/* @__PURE__ */ jsx20(
|
|
4534
4678
|
"div",
|
|
4535
4679
|
{
|
|
4536
4680
|
className: classNames14(
|
|
4537
4681
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4538
4682
|
),
|
|
4539
|
-
children: /* @__PURE__ */
|
|
4683
|
+
children: /* @__PURE__ */ jsx20("span", { className: "text-xs font-bold block pb-0.5", children: name })
|
|
4540
4684
|
}
|
|
4541
4685
|
),
|
|
4542
|
-
mode === "full" && /* @__PURE__ */
|
|
4686
|
+
mode === "full" && /* @__PURE__ */ jsx20("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx20("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx20("span", { className: "text-[8px] font-light", children: summary }) }) })
|
|
4543
4687
|
] })
|
|
4544
4688
|
] })
|
|
4545
4689
|
]
|
|
@@ -4548,20 +4692,20 @@ var User_default = memo18(function UserNode({
|
|
|
4548
4692
|
});
|
|
4549
4693
|
|
|
4550
4694
|
// src/nodes/Step.tsx
|
|
4551
|
-
import { memo as
|
|
4695
|
+
import { memo as memo20 } from "react";
|
|
4552
4696
|
import { Handle as Handle15, Position as Position13 } from "@xyflow/react";
|
|
4553
|
-
import { jsx as
|
|
4697
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4554
4698
|
function classNames15(...classes) {
|
|
4555
4699
|
return classes.filter(Boolean).join(" ");
|
|
4556
4700
|
}
|
|
4557
|
-
var Step_default =
|
|
4701
|
+
var Step_default = memo20(function StepNode({
|
|
4558
4702
|
data,
|
|
4559
4703
|
sourcePosition,
|
|
4560
4704
|
targetPosition
|
|
4561
4705
|
}) {
|
|
4562
4706
|
const { mode, step } = data;
|
|
4563
4707
|
const { title, summary } = step;
|
|
4564
|
-
return /* @__PURE__ */
|
|
4708
|
+
return /* @__PURE__ */ jsxs19(
|
|
4565
4709
|
"div",
|
|
4566
4710
|
{
|
|
4567
4711
|
className: classNames15(
|
|
@@ -4569,14 +4713,14 @@ var Step_default = memo19(function StepNode({
|
|
|
4569
4713
|
),
|
|
4570
4714
|
style: NODE_WIDTH_STYLE,
|
|
4571
4715
|
children: [
|
|
4572
|
-
/* @__PURE__ */
|
|
4716
|
+
/* @__PURE__ */ jsx21(
|
|
4573
4717
|
"div",
|
|
4574
4718
|
{
|
|
4575
4719
|
className: classNames15(
|
|
4576
4720
|
"bg-gradient-to-b from-gray-700 to-gray-700 relative flex flex-col items-center w-5 justify-end rounded-l-sm text-orange-100-500",
|
|
4577
4721
|
`border-r-[1px] border-gray-500`
|
|
4578
4722
|
),
|
|
4579
|
-
children: mode === "full" && /* @__PURE__ */
|
|
4723
|
+
children: mode === "full" && /* @__PURE__ */ jsx21(
|
|
4580
4724
|
"span",
|
|
4581
4725
|
{
|
|
4582
4726
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4586,8 +4730,8 @@ var Step_default = memo19(function StepNode({
|
|
|
4586
4730
|
)
|
|
4587
4731
|
}
|
|
4588
4732
|
),
|
|
4589
|
-
/* @__PURE__ */
|
|
4590
|
-
/* @__PURE__ */
|
|
4733
|
+
/* @__PURE__ */ jsxs19("div", { className: "p-1 flex-1", children: [
|
|
4734
|
+
/* @__PURE__ */ jsx21(
|
|
4591
4735
|
Handle15,
|
|
4592
4736
|
{
|
|
4593
4737
|
type: "target",
|
|
@@ -4595,7 +4739,7 @@ var Step_default = memo19(function StepNode({
|
|
|
4595
4739
|
style: HIDDEN_HANDLE_STYLE
|
|
4596
4740
|
}
|
|
4597
4741
|
),
|
|
4598
|
-
/* @__PURE__ */
|
|
4742
|
+
/* @__PURE__ */ jsx21(
|
|
4599
4743
|
Handle15,
|
|
4600
4744
|
{
|
|
4601
4745
|
type: "source",
|
|
@@ -4603,18 +4747,18 @@ var Step_default = memo19(function StepNode({
|
|
|
4603
4747
|
style: HIDDEN_HANDLE_STYLE
|
|
4604
4748
|
}
|
|
4605
4749
|
),
|
|
4606
|
-
!summary && /* @__PURE__ */
|
|
4607
|
-
summary && /* @__PURE__ */
|
|
4608
|
-
/* @__PURE__ */
|
|
4750
|
+
!summary && /* @__PURE__ */ jsx21("div", { className: "h-full flex items-center", children: /* @__PURE__ */ jsx21("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
|
|
4751
|
+
summary && /* @__PURE__ */ jsxs19("div", { children: [
|
|
4752
|
+
/* @__PURE__ */ jsx21(
|
|
4609
4753
|
"div",
|
|
4610
4754
|
{
|
|
4611
4755
|
className: classNames15(
|
|
4612
4756
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4613
4757
|
),
|
|
4614
|
-
children: /* @__PURE__ */
|
|
4758
|
+
children: /* @__PURE__ */ jsx21("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4615
4759
|
}
|
|
4616
4760
|
),
|
|
4617
|
-
mode === "full" && /* @__PURE__ */
|
|
4761
|
+
mode === "full" && /* @__PURE__ */ jsx21("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx21("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx21("span", { className: "text-[8px] font-light", children: summary }) }) })
|
|
4618
4762
|
] })
|
|
4619
4763
|
] })
|
|
4620
4764
|
]
|
|
@@ -4630,9 +4774,9 @@ import {
|
|
|
4630
4774
|
Position as Position14
|
|
4631
4775
|
} from "@xyflow/react";
|
|
4632
4776
|
import * as ContextMenu3 from "@radix-ui/react-context-menu";
|
|
4633
|
-
import { memo as
|
|
4634
|
-
import { jsx as
|
|
4635
|
-
var Domain_default =
|
|
4777
|
+
import { memo as memo21, useState as useState4, useCallback as useCallback3, useMemo as useMemo9 } from "react";
|
|
4778
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4779
|
+
var Domain_default = memo21(function DomainNode({ data, id: nodeId }) {
|
|
4636
4780
|
const { mode, domain } = data;
|
|
4637
4781
|
const reactFlow = useReactFlow();
|
|
4638
4782
|
const [highlightedServices, setHighlightedServices] = useState4(
|
|
@@ -4675,27 +4819,27 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4675
4819
|
useOnSelectionChange({
|
|
4676
4820
|
onChange: handleSelectionChange
|
|
4677
4821
|
});
|
|
4678
|
-
return /* @__PURE__ */
|
|
4679
|
-
/* @__PURE__ */
|
|
4680
|
-
/* @__PURE__ */
|
|
4681
|
-
Icon && /* @__PURE__ */
|
|
4682
|
-
/* @__PURE__ */
|
|
4683
|
-
/* @__PURE__ */
|
|
4684
|
-
/* @__PURE__ */
|
|
4822
|
+
return /* @__PURE__ */ jsxs20(ContextMenu3.Root, { children: [
|
|
4823
|
+
/* @__PURE__ */ jsx22(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs20("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
|
|
4824
|
+
/* @__PURE__ */ jsxs20("div", { className: "bg-[rgb(var(--ec-domain-header-bg,253_224_71)/0.2)] px-3 py-2 flex items-center space-x-2", children: [
|
|
4825
|
+
Icon && /* @__PURE__ */ jsx22(Icon, { className: "w-4 h-4 text-yellow-500" }),
|
|
4826
|
+
/* @__PURE__ */ jsxs20("div", { children: [
|
|
4827
|
+
/* @__PURE__ */ jsx22("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
|
|
4828
|
+
/* @__PURE__ */ jsxs20("span", { className: "text-xs text-yellow-500 ml-2", children: [
|
|
4685
4829
|
"v",
|
|
4686
4830
|
version
|
|
4687
4831
|
] })
|
|
4688
4832
|
] })
|
|
4689
4833
|
] }),
|
|
4690
|
-
mode === "full" && services.length > 0 && /* @__PURE__ */
|
|
4834
|
+
mode === "full" && services.length > 0 && /* @__PURE__ */ jsx22("div", { children: services.map((service, index) => {
|
|
4691
4835
|
const isHighlighted = highlightedServices.has(service.data.id);
|
|
4692
|
-
return /* @__PURE__ */
|
|
4693
|
-
/* @__PURE__ */
|
|
4836
|
+
return /* @__PURE__ */ jsxs20(ContextMenu3.Root, { children: [
|
|
4837
|
+
/* @__PURE__ */ jsx22(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
|
|
4694
4838
|
"div",
|
|
4695
4839
|
{
|
|
4696
4840
|
className: `relative flex items-center justify-between px-3 py-2 cursor-pointer ${index !== services.length - 1 ? "border-b border-[rgb(var(--ec-page-border))]" : ""} ${isHighlighted ? "bg-pink-100 border-pink-300" : ""}`,
|
|
4697
4841
|
children: [
|
|
4698
|
-
/* @__PURE__ */
|
|
4842
|
+
/* @__PURE__ */ jsx22(
|
|
4699
4843
|
Handle16,
|
|
4700
4844
|
{
|
|
4701
4845
|
type: "target",
|
|
@@ -4705,7 +4849,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4705
4849
|
style: HANDLE_LEFT_STYLE
|
|
4706
4850
|
}
|
|
4707
4851
|
),
|
|
4708
|
-
/* @__PURE__ */
|
|
4852
|
+
/* @__PURE__ */ jsx22(
|
|
4709
4853
|
Handle16,
|
|
4710
4854
|
{
|
|
4711
4855
|
type: "source",
|
|
@@ -4715,19 +4859,19 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4715
4859
|
style: HANDLE_RIGHT_STYLE
|
|
4716
4860
|
}
|
|
4717
4861
|
),
|
|
4718
|
-
/* @__PURE__ */
|
|
4719
|
-
/* @__PURE__ */
|
|
4720
|
-
/* @__PURE__ */
|
|
4862
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center space-x-3", children: [
|
|
4863
|
+
/* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx22(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
|
|
4864
|
+
/* @__PURE__ */ jsx22("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
|
|
4721
4865
|
] }),
|
|
4722
|
-
/* @__PURE__ */
|
|
4866
|
+
/* @__PURE__ */ jsx22("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs20("span", { className: "text-xs", children: [
|
|
4723
4867
|
"v",
|
|
4724
4868
|
service.data.version
|
|
4725
4869
|
] }) })
|
|
4726
4870
|
]
|
|
4727
4871
|
}
|
|
4728
4872
|
) }),
|
|
4729
|
-
/* @__PURE__ */
|
|
4730
|
-
/* @__PURE__ */
|
|
4873
|
+
/* @__PURE__ */ jsx22(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
|
|
4874
|
+
/* @__PURE__ */ jsx22(
|
|
4731
4875
|
ContextMenu3.Item,
|
|
4732
4876
|
{
|
|
4733
4877
|
className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
|
|
@@ -4737,7 +4881,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4737
4881
|
children: "View Service Documentation"
|
|
4738
4882
|
}
|
|
4739
4883
|
),
|
|
4740
|
-
/* @__PURE__ */
|
|
4884
|
+
/* @__PURE__ */ jsx22(
|
|
4741
4885
|
ContextMenu3.Item,
|
|
4742
4886
|
{
|
|
4743
4887
|
className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
|
|
@@ -4751,8 +4895,8 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4751
4895
|
] }, `${service.data.id}-${index}`);
|
|
4752
4896
|
}) })
|
|
4753
4897
|
] }) }),
|
|
4754
|
-
/* @__PURE__ */
|
|
4755
|
-
/* @__PURE__ */
|
|
4898
|
+
/* @__PURE__ */ jsx22(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
|
|
4899
|
+
/* @__PURE__ */ jsx22(
|
|
4756
4900
|
ContextMenu3.Item,
|
|
4757
4901
|
{
|
|
4758
4902
|
className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
|
|
@@ -4762,7 +4906,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4762
4906
|
children: "View Domain Documentation"
|
|
4763
4907
|
}
|
|
4764
4908
|
),
|
|
4765
|
-
/* @__PURE__ */
|
|
4909
|
+
/* @__PURE__ */ jsx22(
|
|
4766
4910
|
ContextMenu3.Item,
|
|
4767
4911
|
{
|
|
4768
4912
|
className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
|
|
@@ -4777,9 +4921,9 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
|
|
|
4777
4921
|
});
|
|
4778
4922
|
|
|
4779
4923
|
// src/nodes/GroupNode.tsx
|
|
4780
|
-
import { memo as
|
|
4924
|
+
import { memo as memo22 } from "react";
|
|
4781
4925
|
import { BoxesIcon } from "lucide-react";
|
|
4782
|
-
import { jsx as
|
|
4926
|
+
import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
4783
4927
|
var GROUP_CONTAINER_STYLE = {
|
|
4784
4928
|
width: "100%",
|
|
4785
4929
|
height: "100%",
|
|
@@ -4851,11 +4995,11 @@ var GROUP_VERSION_STYLE = {
|
|
|
4851
4995
|
};
|
|
4852
4996
|
var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
|
|
4853
4997
|
var GROUP_ICON_WHITE_STYLE = { color: "white" };
|
|
4854
|
-
var GroupNode_default =
|
|
4998
|
+
var GroupNode_default = memo22(function GroupNode({ data }) {
|
|
4855
4999
|
const { domain } = data;
|
|
4856
|
-
return /* @__PURE__ */
|
|
4857
|
-
/* @__PURE__ */
|
|
4858
|
-
/* @__PURE__ */
|
|
5000
|
+
return /* @__PURE__ */ jsx23("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs21("div", { style: GROUP_HEADER_STYLE, children: [
|
|
5001
|
+
/* @__PURE__ */ jsx23("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx23(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
|
|
5002
|
+
/* @__PURE__ */ jsx23("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx23(
|
|
4859
5003
|
BoxesIcon,
|
|
4860
5004
|
{
|
|
4861
5005
|
size: 16,
|
|
@@ -4863,9 +5007,9 @@ var GroupNode_default = memo21(function GroupNode({ data }) {
|
|
|
4863
5007
|
style: GROUP_ICON_WHITE_STYLE
|
|
4864
5008
|
}
|
|
4865
5009
|
) }),
|
|
4866
|
-
/* @__PURE__ */
|
|
4867
|
-
/* @__PURE__ */
|
|
4868
|
-
domain?.version && /* @__PURE__ */
|
|
5010
|
+
/* @__PURE__ */ jsx23("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs21("div", { style: GROUP_BANNER_INNER_STYLE, children: [
|
|
5011
|
+
/* @__PURE__ */ jsx23("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
|
|
5012
|
+
domain?.version && /* @__PURE__ */ jsxs21("span", { style: GROUP_VERSION_STYLE, children: [
|
|
4869
5013
|
"v",
|
|
4870
5014
|
domain.version
|
|
4871
5015
|
] })
|
|
@@ -4876,14 +5020,14 @@ var GroupNode_default = memo21(function GroupNode({ data }) {
|
|
|
4876
5020
|
// src/nodes/Custom.tsx
|
|
4877
5021
|
import { Handle as Handle17 } from "@xyflow/react";
|
|
4878
5022
|
import * as Icons from "@heroicons/react/24/solid";
|
|
4879
|
-
import { memo as
|
|
5023
|
+
import { memo as memo23, useMemo as useMemo10 } from "react";
|
|
4880
5024
|
import * as ContextMenu4 from "@radix-ui/react-context-menu";
|
|
4881
5025
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
|
4882
|
-
import { jsx as
|
|
5026
|
+
import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4883
5027
|
function classNames16(...classes) {
|
|
4884
5028
|
return classes.filter(Boolean).join(" ");
|
|
4885
5029
|
}
|
|
4886
|
-
var Custom_default =
|
|
5030
|
+
var Custom_default = memo23(function UserNode2({
|
|
4887
5031
|
data,
|
|
4888
5032
|
sourcePosition,
|
|
4889
5033
|
targetPosition
|
|
@@ -4905,8 +5049,8 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4905
5049
|
const isLongType = type && type.length > 10;
|
|
4906
5050
|
const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
|
|
4907
5051
|
const portalContainer = usePortalContainer();
|
|
4908
|
-
return /* @__PURE__ */
|
|
4909
|
-
/* @__PURE__ */
|
|
5052
|
+
return /* @__PURE__ */ jsxs22(ContextMenu4.Root, { children: [
|
|
5053
|
+
/* @__PURE__ */ jsx24(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs22(
|
|
4910
5054
|
"div",
|
|
4911
5055
|
{
|
|
4912
5056
|
className: classNames16(
|
|
@@ -4917,7 +5061,7 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4917
5061
|
...NODE_WIDTH_STYLE
|
|
4918
5062
|
},
|
|
4919
5063
|
children: [
|
|
4920
|
-
/* @__PURE__ */
|
|
5064
|
+
/* @__PURE__ */ jsxs22(
|
|
4921
5065
|
"div",
|
|
4922
5066
|
{
|
|
4923
5067
|
className: classNames16(
|
|
@@ -4925,9 +5069,9 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4925
5069
|
`border-r-[1px] border-${color}`
|
|
4926
5070
|
),
|
|
4927
5071
|
children: [
|
|
4928
|
-
IconComponent && /* @__PURE__ */
|
|
4929
|
-
mode === "full" && /* @__PURE__ */
|
|
4930
|
-
/* @__PURE__ */
|
|
5072
|
+
IconComponent && /* @__PURE__ */ jsx24(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
5073
|
+
mode === "full" && /* @__PURE__ */ jsx24(Tooltip.Provider, { children: /* @__PURE__ */ jsxs22(Tooltip.Root, { children: [
|
|
5074
|
+
/* @__PURE__ */ jsx24(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx24(
|
|
4931
5075
|
"span",
|
|
4932
5076
|
{
|
|
4933
5077
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4935,7 +5079,7 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4935
5079
|
children: displayType
|
|
4936
5080
|
}
|
|
4937
5081
|
) }),
|
|
4938
|
-
isLongType && /* @__PURE__ */
|
|
5082
|
+
isLongType && /* @__PURE__ */ jsx24(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs22(
|
|
4939
5083
|
Tooltip.Content,
|
|
4940
5084
|
{
|
|
4941
5085
|
className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
|
|
@@ -4943,7 +5087,7 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4943
5087
|
sideOffset: 5,
|
|
4944
5088
|
children: [
|
|
4945
5089
|
type,
|
|
4946
|
-
/* @__PURE__ */
|
|
5090
|
+
/* @__PURE__ */ jsx24(Tooltip.Arrow, { className: "fill-slate-800" })
|
|
4947
5091
|
]
|
|
4948
5092
|
}
|
|
4949
5093
|
) })
|
|
@@ -4951,23 +5095,23 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4951
5095
|
]
|
|
4952
5096
|
}
|
|
4953
5097
|
),
|
|
4954
|
-
/* @__PURE__ */
|
|
4955
|
-
targetPosition && /* @__PURE__ */
|
|
4956
|
-
sourcePosition && /* @__PURE__ */
|
|
4957
|
-
(!summary || mode !== "full") && /* @__PURE__ */
|
|
4958
|
-
summary && mode === "full" && /* @__PURE__ */
|
|
4959
|
-
/* @__PURE__ */
|
|
5098
|
+
/* @__PURE__ */ jsxs22("div", { className: "p-1 flex-1", children: [
|
|
5099
|
+
targetPosition && /* @__PURE__ */ jsx24(Handle17, { type: "target", position: targetPosition }),
|
|
5100
|
+
sourcePosition && /* @__PURE__ */ jsx24(Handle17, { type: "source", position: sourcePosition }),
|
|
5101
|
+
(!summary || mode !== "full") && /* @__PURE__ */ jsx24("div", { className: "h-full ", children: /* @__PURE__ */ jsx24("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
|
|
5102
|
+
summary && mode === "full" && /* @__PURE__ */ jsxs22("div", { children: [
|
|
5103
|
+
/* @__PURE__ */ jsx24(
|
|
4960
5104
|
"div",
|
|
4961
5105
|
{
|
|
4962
5106
|
className: classNames16(
|
|
4963
5107
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4964
5108
|
),
|
|
4965
|
-
children: /* @__PURE__ */
|
|
5109
|
+
children: /* @__PURE__ */ jsx24("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4966
5110
|
}
|
|
4967
5111
|
),
|
|
4968
|
-
mode === "full" && /* @__PURE__ */
|
|
4969
|
-
/* @__PURE__ */
|
|
4970
|
-
properties && /* @__PURE__ */
|
|
5112
|
+
mode === "full" && /* @__PURE__ */ jsxs22("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
|
|
5113
|
+
/* @__PURE__ */ jsx24("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-light", children: summary }) }),
|
|
5114
|
+
properties && /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs22(
|
|
4971
5115
|
"span",
|
|
4972
5116
|
{
|
|
4973
5117
|
className: "text-xs",
|
|
@@ -4976,7 +5120,7 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4976
5120
|
key,
|
|
4977
5121
|
":",
|
|
4978
5122
|
" ",
|
|
4979
|
-
typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */
|
|
5123
|
+
typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx24(
|
|
4980
5124
|
"a",
|
|
4981
5125
|
{
|
|
4982
5126
|
href: value,
|
|
@@ -4996,13 +5140,13 @@ var Custom_default = memo22(function UserNode2({
|
|
|
4996
5140
|
]
|
|
4997
5141
|
}
|
|
4998
5142
|
) }),
|
|
4999
|
-
menu?.length > 0 && /* @__PURE__ */
|
|
5000
|
-
return /* @__PURE__ */
|
|
5143
|
+
menu?.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
|
|
5144
|
+
return /* @__PURE__ */ jsx24(
|
|
5001
5145
|
ContextMenu4.Item,
|
|
5002
5146
|
{
|
|
5003
5147
|
asChild: true,
|
|
5004
5148
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
|
|
5005
|
-
children: /* @__PURE__ */
|
|
5149
|
+
children: /* @__PURE__ */ jsx24("a", { href: item.url, children: item.label })
|
|
5006
5150
|
}
|
|
5007
5151
|
);
|
|
5008
5152
|
}) }) })
|
|
@@ -5010,12 +5154,12 @@ var Custom_default = memo22(function UserNode2({
|
|
|
5010
5154
|
});
|
|
5011
5155
|
|
|
5012
5156
|
// src/nodes/ExternalSystem2.tsx
|
|
5013
|
-
import { memo as
|
|
5157
|
+
import { memo as memo24 } from "react";
|
|
5014
5158
|
import { Handle as Handle18, Position as Position15 } from "@xyflow/react";
|
|
5015
|
-
import { jsx as
|
|
5016
|
-
var ExternalSystem2_default =
|
|
5017
|
-
return /* @__PURE__ */
|
|
5018
|
-
/* @__PURE__ */
|
|
5159
|
+
import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
5160
|
+
var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
|
|
5161
|
+
return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
|
|
5162
|
+
/* @__PURE__ */ jsx25(
|
|
5019
5163
|
Handle18,
|
|
5020
5164
|
{
|
|
5021
5165
|
type: "target",
|
|
@@ -5024,7 +5168,7 @@ var ExternalSystem2_default = memo23(function ExternalSystemNode(props) {
|
|
|
5024
5168
|
className: "bg-gray-500"
|
|
5025
5169
|
}
|
|
5026
5170
|
),
|
|
5027
|
-
/* @__PURE__ */
|
|
5171
|
+
/* @__PURE__ */ jsx25(
|
|
5028
5172
|
Handle18,
|
|
5029
5173
|
{
|
|
5030
5174
|
type: "source",
|
|
@@ -5033,17 +5177,17 @@ var ExternalSystem2_default = memo23(function ExternalSystemNode(props) {
|
|
|
5033
5177
|
className: "bg-gray-500"
|
|
5034
5178
|
}
|
|
5035
5179
|
),
|
|
5036
|
-
/* @__PURE__ */
|
|
5180
|
+
/* @__PURE__ */ jsx25(ExternalSystem_default, { ...props })
|
|
5037
5181
|
] });
|
|
5038
5182
|
});
|
|
5039
5183
|
|
|
5040
5184
|
// src/nodes/DataProduct.tsx
|
|
5041
|
-
import { memo as
|
|
5185
|
+
import { memo as memo25 } from "react";
|
|
5042
5186
|
import { Package } from "lucide-react";
|
|
5043
5187
|
import { Handle as Handle19, Position as Position16, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
|
|
5044
|
-
import { jsx as
|
|
5188
|
+
import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
5045
5189
|
function GlowHandle14({ side }) {
|
|
5046
|
-
return /* @__PURE__ */
|
|
5190
|
+
return /* @__PURE__ */ jsx26(
|
|
5047
5191
|
"div",
|
|
5048
5192
|
{
|
|
5049
5193
|
style: {
|
|
@@ -5070,7 +5214,7 @@ function PostItDataProduct(props) {
|
|
|
5070
5214
|
const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
|
|
5071
5215
|
const mode = props.data.mode || "simple";
|
|
5072
5216
|
const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
|
|
5073
|
-
return /* @__PURE__ */
|
|
5217
|
+
return /* @__PURE__ */ jsxs24(
|
|
5074
5218
|
"div",
|
|
5075
5219
|
{
|
|
5076
5220
|
className: classNames17(
|
|
@@ -5078,7 +5222,7 @@ function PostItDataProduct(props) {
|
|
|
5078
5222
|
props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
|
|
5079
5223
|
),
|
|
5080
5224
|
children: [
|
|
5081
|
-
/* @__PURE__ */
|
|
5225
|
+
/* @__PURE__ */ jsx26(
|
|
5082
5226
|
Handle19,
|
|
5083
5227
|
{
|
|
5084
5228
|
type: "target",
|
|
@@ -5086,7 +5230,7 @@ function PostItDataProduct(props) {
|
|
|
5086
5230
|
style: HIDDEN_HANDLE_STYLE
|
|
5087
5231
|
}
|
|
5088
5232
|
),
|
|
5089
|
-
/* @__PURE__ */
|
|
5233
|
+
/* @__PURE__ */ jsx26(
|
|
5090
5234
|
Handle19,
|
|
5091
5235
|
{
|
|
5092
5236
|
type: "source",
|
|
@@ -5094,8 +5238,8 @@ function PostItDataProduct(props) {
|
|
|
5094
5238
|
style: HIDDEN_HANDLE_STYLE
|
|
5095
5239
|
}
|
|
5096
5240
|
),
|
|
5097
|
-
notes && notes.length > 0 && /* @__PURE__ */
|
|
5098
|
-
/* @__PURE__ */
|
|
5241
|
+
notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
|
|
5242
|
+
/* @__PURE__ */ jsxs24(
|
|
5099
5243
|
"div",
|
|
5100
5244
|
{
|
|
5101
5245
|
className: "absolute inset-0",
|
|
@@ -5106,8 +5250,8 @@ function PostItDataProduct(props) {
|
|
|
5106
5250
|
border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
|
|
5107
5251
|
},
|
|
5108
5252
|
children: [
|
|
5109
|
-
/* @__PURE__ */
|
|
5110
|
-
/* @__PURE__ */
|
|
5253
|
+
/* @__PURE__ */ jsx26("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
|
|
5254
|
+
/* @__PURE__ */ jsx26(
|
|
5111
5255
|
"div",
|
|
5112
5256
|
{
|
|
5113
5257
|
style: {
|
|
@@ -5126,17 +5270,17 @@ function PostItDataProduct(props) {
|
|
|
5126
5270
|
]
|
|
5127
5271
|
}
|
|
5128
5272
|
),
|
|
5129
|
-
/* @__PURE__ */
|
|
5130
|
-
/* @__PURE__ */
|
|
5131
|
-
/* @__PURE__ */
|
|
5132
|
-
/* @__PURE__ */
|
|
5133
|
-
/* @__PURE__ */
|
|
5273
|
+
/* @__PURE__ */ jsxs24("div", { className: "relative px-3.5 py-3", children: [
|
|
5274
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
|
|
5275
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
|
|
5276
|
+
/* @__PURE__ */ jsx26(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
|
|
5277
|
+
/* @__PURE__ */ jsx26("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
|
|
5134
5278
|
] }),
|
|
5135
|
-
draft && /* @__PURE__ */
|
|
5136
|
-
deprecated && /* @__PURE__ */
|
|
5279
|
+
draft && /* @__PURE__ */ jsx26("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
|
|
5280
|
+
deprecated && /* @__PURE__ */ jsx26("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
|
|
5137
5281
|
] }),
|
|
5138
|
-
/* @__PURE__ */
|
|
5139
|
-
customIcon && /* @__PURE__ */
|
|
5282
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
|
|
5283
|
+
customIcon && /* @__PURE__ */ jsx26(
|
|
5140
5284
|
CustomIcon,
|
|
5141
5285
|
{
|
|
5142
5286
|
src: customIcon,
|
|
@@ -5144,7 +5288,7 @@ function PostItDataProduct(props) {
|
|
|
5144
5288
|
className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
|
|
5145
5289
|
}
|
|
5146
5290
|
),
|
|
5147
|
-
/* @__PURE__ */
|
|
5291
|
+
/* @__PURE__ */ jsx26(
|
|
5148
5292
|
"div",
|
|
5149
5293
|
{
|
|
5150
5294
|
className: classNames17(
|
|
@@ -5155,11 +5299,11 @@ function PostItDataProduct(props) {
|
|
|
5155
5299
|
}
|
|
5156
5300
|
)
|
|
5157
5301
|
] }),
|
|
5158
|
-
version && /* @__PURE__ */
|
|
5302
|
+
version && /* @__PURE__ */ jsxs24("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
|
|
5159
5303
|
"v",
|
|
5160
5304
|
version
|
|
5161
5305
|
] }),
|
|
5162
|
-
mode === "full" && summary && /* @__PURE__ */
|
|
5306
|
+
mode === "full" && summary && /* @__PURE__ */ jsx26(
|
|
5163
5307
|
"div",
|
|
5164
5308
|
{
|
|
5165
5309
|
className: "mt-2 pt-1.5 border-t border-indigo-900/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
|
|
@@ -5181,7 +5325,7 @@ function DefaultDataProduct(props) {
|
|
|
5181
5325
|
const sourceConnections = useNodeConnections10({ handleType: "source" });
|
|
5182
5326
|
const isDark = useDarkMode();
|
|
5183
5327
|
const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
|
|
5184
|
-
return /* @__PURE__ */
|
|
5328
|
+
return /* @__PURE__ */ jsxs24(
|
|
5185
5329
|
"div",
|
|
5186
5330
|
{
|
|
5187
5331
|
className: classNames17(
|
|
@@ -5194,7 +5338,7 @@ function DefaultDataProduct(props) {
|
|
|
5194
5338
|
boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
|
|
5195
5339
|
},
|
|
5196
5340
|
children: [
|
|
5197
|
-
/* @__PURE__ */
|
|
5341
|
+
/* @__PURE__ */ jsx26(
|
|
5198
5342
|
Handle19,
|
|
5199
5343
|
{
|
|
5200
5344
|
type: "target",
|
|
@@ -5202,7 +5346,7 @@ function DefaultDataProduct(props) {
|
|
|
5202
5346
|
style: HIDDEN_HANDLE_STYLE
|
|
5203
5347
|
}
|
|
5204
5348
|
),
|
|
5205
|
-
/* @__PURE__ */
|
|
5349
|
+
/* @__PURE__ */ jsx26(
|
|
5206
5350
|
Handle19,
|
|
5207
5351
|
{
|
|
5208
5352
|
type: "source",
|
|
@@ -5210,10 +5354,10 @@ function DefaultDataProduct(props) {
|
|
|
5210
5354
|
style: HIDDEN_HANDLE_STYLE
|
|
5211
5355
|
}
|
|
5212
5356
|
),
|
|
5213
|
-
notes && notes.length > 0 && /* @__PURE__ */
|
|
5214
|
-
targetConnections.length > 0 && /* @__PURE__ */
|
|
5215
|
-
sourceConnections.length > 0 && /* @__PURE__ */
|
|
5216
|
-
/* @__PURE__ */
|
|
5357
|
+
notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
|
|
5358
|
+
targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "left" }),
|
|
5359
|
+
sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "right" }),
|
|
5360
|
+
/* @__PURE__ */ jsx26("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs24(
|
|
5217
5361
|
"span",
|
|
5218
5362
|
{
|
|
5219
5363
|
className: classNames17(
|
|
@@ -5221,16 +5365,16 @@ function DefaultDataProduct(props) {
|
|
|
5221
5365
|
deprecated ? "bg-red-500" : "bg-indigo-500"
|
|
5222
5366
|
),
|
|
5223
5367
|
children: [
|
|
5224
|
-
/* @__PURE__ */
|
|
5368
|
+
/* @__PURE__ */ jsx26(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
|
|
5225
5369
|
"Data Product",
|
|
5226
5370
|
draft && " (Draft)",
|
|
5227
5371
|
deprecated && " (Deprecated)"
|
|
5228
5372
|
]
|
|
5229
5373
|
}
|
|
5230
5374
|
) }),
|
|
5231
|
-
/* @__PURE__ */
|
|
5232
|
-
/* @__PURE__ */
|
|
5233
|
-
customIcon && /* @__PURE__ */
|
|
5375
|
+
/* @__PURE__ */ jsxs24("div", { className: "px-3 pt-3.5 pb-2.5", children: [
|
|
5376
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
|
|
5377
|
+
customIcon && /* @__PURE__ */ jsx26(
|
|
5234
5378
|
CustomIcon,
|
|
5235
5379
|
{
|
|
5236
5380
|
src: customIcon,
|
|
@@ -5238,16 +5382,16 @@ function DefaultDataProduct(props) {
|
|
|
5238
5382
|
className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
|
|
5239
5383
|
}
|
|
5240
5384
|
),
|
|
5241
|
-
/* @__PURE__ */
|
|
5242
|
-
/* @__PURE__ */
|
|
5243
|
-
version && /* @__PURE__ */
|
|
5385
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-baseline gap-1 min-w-0", children: [
|
|
5386
|
+
/* @__PURE__ */ jsx26("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: name }),
|
|
5387
|
+
version && /* @__PURE__ */ jsxs24("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
|
|
5244
5388
|
"(v",
|
|
5245
5389
|
version,
|
|
5246
5390
|
")"
|
|
5247
5391
|
] })
|
|
5248
5392
|
] })
|
|
5249
5393
|
] }),
|
|
5250
|
-
mode === "full" && summary && /* @__PURE__ */
|
|
5394
|
+
mode === "full" && summary && /* @__PURE__ */ jsx26(
|
|
5251
5395
|
"div",
|
|
5252
5396
|
{
|
|
5253
5397
|
className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
|
|
@@ -5261,19 +5405,19 @@ function DefaultDataProduct(props) {
|
|
|
5261
5405
|
}
|
|
5262
5406
|
);
|
|
5263
5407
|
}
|
|
5264
|
-
var DataProduct_default =
|
|
5408
|
+
var DataProduct_default = memo25(function DataProductNode(props) {
|
|
5265
5409
|
const nodeStyle = props?.data?.style;
|
|
5266
5410
|
if (nodeStyle === "post-it") {
|
|
5267
|
-
return /* @__PURE__ */
|
|
5411
|
+
return /* @__PURE__ */ jsx26(PostItDataProduct, { ...props });
|
|
5268
5412
|
}
|
|
5269
|
-
return /* @__PURE__ */
|
|
5413
|
+
return /* @__PURE__ */ jsx26(DefaultDataProduct, { ...props });
|
|
5270
5414
|
});
|
|
5271
5415
|
|
|
5272
5416
|
// src/nodes/message-group/MessageGroupNode.tsx
|
|
5273
|
-
import { memo as
|
|
5274
|
-
import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 } from "lucide-react";
|
|
5417
|
+
import { memo as memo26, useMemo as useMemo11 } from "react";
|
|
5418
|
+
import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
|
|
5275
5419
|
import { Handle as Handle20, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
|
|
5276
|
-
import { jsx as
|
|
5420
|
+
import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
5277
5421
|
var TYPE_ICONS = {
|
|
5278
5422
|
events: Zap3,
|
|
5279
5423
|
commands: Terminal,
|
|
@@ -5285,7 +5429,7 @@ var CARD_STYLE = {
|
|
|
5285
5429
|
background: "var(--ec-message-group-node-bg, rgb(var(--ec-card-bg)))",
|
|
5286
5430
|
pointerEvents: "none"
|
|
5287
5431
|
};
|
|
5288
|
-
var MessageGroupNode_default =
|
|
5432
|
+
var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
|
|
5289
5433
|
const { groupName, messageCount } = props.data;
|
|
5290
5434
|
const isDark = useDarkMode();
|
|
5291
5435
|
const targetConnections = useNodeConnections11({ handleType: "target" });
|
|
@@ -5299,8 +5443,8 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5299
5443
|
});
|
|
5300
5444
|
return counts;
|
|
5301
5445
|
}, [props.data.messages]);
|
|
5302
|
-
return /* @__PURE__ */
|
|
5303
|
-
stackDepth >= 3 && /* @__PURE__ */
|
|
5446
|
+
return /* @__PURE__ */ jsxs25("div", { className: "relative", style: { isolation: "isolate" }, children: [
|
|
5447
|
+
stackDepth >= 3 && /* @__PURE__ */ jsx27(
|
|
5304
5448
|
"div",
|
|
5305
5449
|
{
|
|
5306
5450
|
style: {
|
|
@@ -5312,7 +5456,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5312
5456
|
}
|
|
5313
5457
|
}
|
|
5314
5458
|
),
|
|
5315
|
-
stackDepth >= 2 && /* @__PURE__ */
|
|
5459
|
+
stackDepth >= 2 && /* @__PURE__ */ jsx27(
|
|
5316
5460
|
"div",
|
|
5317
5461
|
{
|
|
5318
5462
|
style: {
|
|
@@ -5324,7 +5468,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5324
5468
|
}
|
|
5325
5469
|
}
|
|
5326
5470
|
),
|
|
5327
|
-
/* @__PURE__ */
|
|
5471
|
+
/* @__PURE__ */ jsxs25(
|
|
5328
5472
|
"div",
|
|
5329
5473
|
{
|
|
5330
5474
|
className: `relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible ${props.selected ? "ring-2 ring-violet-400/60 ring-offset-2" : ""} border-violet-500`,
|
|
@@ -5333,7 +5477,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5333
5477
|
boxShadow: "0 2px 12px rgba(139, 92, 246, 0.15)"
|
|
5334
5478
|
},
|
|
5335
5479
|
children: [
|
|
5336
|
-
/* @__PURE__ */
|
|
5480
|
+
/* @__PURE__ */ jsx27(
|
|
5337
5481
|
Handle20,
|
|
5338
5482
|
{
|
|
5339
5483
|
type: "target",
|
|
@@ -5341,7 +5485,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5341
5485
|
style: HIDDEN_HANDLE_STYLE
|
|
5342
5486
|
}
|
|
5343
5487
|
),
|
|
5344
|
-
/* @__PURE__ */
|
|
5488
|
+
/* @__PURE__ */ jsx27(
|
|
5345
5489
|
Handle20,
|
|
5346
5490
|
{
|
|
5347
5491
|
type: "source",
|
|
@@ -5349,7 +5493,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5349
5493
|
style: HIDDEN_HANDLE_STYLE
|
|
5350
5494
|
}
|
|
5351
5495
|
),
|
|
5352
|
-
targetConnections.length > 0 && /* @__PURE__ */
|
|
5496
|
+
targetConnections.length > 0 && /* @__PURE__ */ jsx27(
|
|
5353
5497
|
"div",
|
|
5354
5498
|
{
|
|
5355
5499
|
style: {
|
|
@@ -5368,7 +5512,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5368
5512
|
}
|
|
5369
5513
|
}
|
|
5370
5514
|
),
|
|
5371
|
-
sourceConnections.length > 0 && /* @__PURE__ */
|
|
5515
|
+
sourceConnections.length > 0 && /* @__PURE__ */ jsx27(
|
|
5372
5516
|
"div",
|
|
5373
5517
|
{
|
|
5374
5518
|
style: {
|
|
@@ -5387,14 +5531,14 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5387
5531
|
}
|
|
5388
5532
|
}
|
|
5389
5533
|
),
|
|
5390
|
-
/* @__PURE__ */
|
|
5391
|
-
/* @__PURE__ */
|
|
5534
|
+
/* @__PURE__ */ jsx27("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs25("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-600", children: [
|
|
5535
|
+
/* @__PURE__ */ jsx27(Layers, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
|
|
5392
5536
|
"Group"
|
|
5393
5537
|
] }) }),
|
|
5394
|
-
/* @__PURE__ */
|
|
5395
|
-
/* @__PURE__ */
|
|
5396
|
-
/* @__PURE__ */
|
|
5397
|
-
/* @__PURE__ */
|
|
5538
|
+
/* @__PURE__ */ jsxs25("div", { className: "px-3 pt-3.5 pb-2.5", children: [
|
|
5539
|
+
/* @__PURE__ */ jsx27("div", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: groupName }),
|
|
5540
|
+
/* @__PURE__ */ jsxs25("div", { className: "mt-1.5 flex items-center gap-2", children: [
|
|
5541
|
+
/* @__PURE__ */ jsxs25(
|
|
5398
5542
|
"span",
|
|
5399
5543
|
{
|
|
5400
5544
|
className: "text-[10px] font-medium px-1.5 py-0.5 rounded",
|
|
@@ -5409,14 +5553,14 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5409
5553
|
]
|
|
5410
5554
|
}
|
|
5411
5555
|
),
|
|
5412
|
-
/* @__PURE__ */
|
|
5556
|
+
/* @__PURE__ */ jsx27("div", { className: "flex items-center gap-1", children: Object.entries(typeBreakdown).map(([type, count]) => {
|
|
5413
5557
|
const Icon = TYPE_ICONS[type] || HelpCircle;
|
|
5414
|
-
return /* @__PURE__ */
|
|
5558
|
+
return /* @__PURE__ */ jsxs25(
|
|
5415
5559
|
"span",
|
|
5416
5560
|
{
|
|
5417
5561
|
className: "flex items-center gap-0.5 text-[9px] text-[rgb(var(--ec-page-text-muted))]",
|
|
5418
5562
|
children: [
|
|
5419
|
-
/* @__PURE__ */
|
|
5563
|
+
/* @__PURE__ */ jsx27(Icon, { className: "w-2.5 h-2.5", strokeWidth: 2 }),
|
|
5420
5564
|
count
|
|
5421
5565
|
]
|
|
5422
5566
|
},
|
|
@@ -5424,8 +5568,8 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5424
5568
|
);
|
|
5425
5569
|
}) })
|
|
5426
5570
|
] }),
|
|
5427
|
-
/* @__PURE__ */
|
|
5428
|
-
/* @__PURE__ */
|
|
5571
|
+
/* @__PURE__ */ jsxs25("div", { className: "mt-1.5 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
|
|
5572
|
+
/* @__PURE__ */ jsx27(Maximize22, { className: "w-2.5 h-2.5" }),
|
|
5429
5573
|
"Click to explore"
|
|
5430
5574
|
] })
|
|
5431
5575
|
] })
|
|
@@ -5436,10 +5580,10 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
|
|
|
5436
5580
|
});
|
|
5437
5581
|
|
|
5438
5582
|
// src/nodes/message-group/MessageGroupExpandedNode.tsx
|
|
5439
|
-
import { memo as
|
|
5440
|
-
import { Layers as Layers2, Minimize2 } from "lucide-react";
|
|
5441
|
-
import { jsx as
|
|
5442
|
-
var
|
|
5583
|
+
import { memo as memo27 } from "react";
|
|
5584
|
+
import { Layers as Layers2, Minimize2 as Minimize22 } from "lucide-react";
|
|
5585
|
+
import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
5586
|
+
var CONTAINER_STYLE2 = {
|
|
5443
5587
|
width: "100%",
|
|
5444
5588
|
height: "100%",
|
|
5445
5589
|
borderRadius: 12,
|
|
@@ -5448,7 +5592,7 @@ var CONTAINER_STYLE = {
|
|
|
5448
5592
|
position: "relative",
|
|
5449
5593
|
overflow: "visible"
|
|
5450
5594
|
};
|
|
5451
|
-
var
|
|
5595
|
+
var HEADER_STYLE2 = {
|
|
5452
5596
|
position: "absolute",
|
|
5453
5597
|
top: 0,
|
|
5454
5598
|
left: 0,
|
|
@@ -5460,7 +5604,7 @@ var HEADER_STYLE = {
|
|
|
5460
5604
|
borderBottom: "1px solid rgba(139, 92, 246, 0.3)",
|
|
5461
5605
|
overflow: "visible"
|
|
5462
5606
|
};
|
|
5463
|
-
var
|
|
5607
|
+
var BADGE_STYLE2 = {
|
|
5464
5608
|
position: "absolute",
|
|
5465
5609
|
top: -10,
|
|
5466
5610
|
left: 12,
|
|
@@ -5478,7 +5622,7 @@ var BADGE_STYLE = {
|
|
|
5478
5622
|
textTransform: "uppercase",
|
|
5479
5623
|
color: "white"
|
|
5480
5624
|
};
|
|
5481
|
-
var
|
|
5625
|
+
var HEADER_CONTENT_STYLE2 = {
|
|
5482
5626
|
display: "flex",
|
|
5483
5627
|
alignItems: "center",
|
|
5484
5628
|
justifyContent: "space-between",
|
|
@@ -5493,7 +5637,7 @@ var GROUP_NAME_STYLE = {
|
|
|
5493
5637
|
textTransform: "uppercase",
|
|
5494
5638
|
whiteSpace: "nowrap"
|
|
5495
5639
|
};
|
|
5496
|
-
var
|
|
5640
|
+
var COLLAPSE_BUTTON_STYLE2 = {
|
|
5497
5641
|
background: "#7c3aed",
|
|
5498
5642
|
border: "1px solid #a78bfa",
|
|
5499
5643
|
borderRadius: 6,
|
|
@@ -5506,25 +5650,25 @@ var COLLAPSE_BUTTON_STYLE = {
|
|
|
5506
5650
|
fontWeight: 600,
|
|
5507
5651
|
color: "white"
|
|
5508
5652
|
};
|
|
5509
|
-
var MessageGroupExpandedNode_default =
|
|
5653
|
+
var MessageGroupExpandedNode_default = memo27(function MessageGroupExpandedNode({
|
|
5510
5654
|
data
|
|
5511
5655
|
}) {
|
|
5512
5656
|
const { groupName, messageCount } = data;
|
|
5513
|
-
return /* @__PURE__ */
|
|
5514
|
-
/* @__PURE__ */
|
|
5515
|
-
/* @__PURE__ */
|
|
5657
|
+
return /* @__PURE__ */ jsx28("div", { style: CONTAINER_STYLE2, children: /* @__PURE__ */ jsxs26("div", { style: HEADER_STYLE2, children: [
|
|
5658
|
+
/* @__PURE__ */ jsxs26("div", { style: BADGE_STYLE2, children: [
|
|
5659
|
+
/* @__PURE__ */ jsx28(Layers2, { size: 10, strokeWidth: 2.5 }),
|
|
5516
5660
|
"Group"
|
|
5517
5661
|
] }),
|
|
5518
|
-
/* @__PURE__ */
|
|
5519
|
-
/* @__PURE__ */
|
|
5520
|
-
/* @__PURE__ */
|
|
5662
|
+
/* @__PURE__ */ jsxs26("div", { style: HEADER_CONTENT_STYLE2, children: [
|
|
5663
|
+
/* @__PURE__ */ jsx28("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx28("span", { style: GROUP_NAME_STYLE, children: groupName || "Group" }) }),
|
|
5664
|
+
/* @__PURE__ */ jsxs26(
|
|
5521
5665
|
"button",
|
|
5522
5666
|
{
|
|
5523
|
-
style:
|
|
5667
|
+
style: COLLAPSE_BUTTON_STYLE2,
|
|
5524
5668
|
className: "ec-collapse-group-btn nodrag nopan",
|
|
5525
5669
|
onMouseDown: (e) => e.stopPropagation(),
|
|
5526
5670
|
children: [
|
|
5527
|
-
/* @__PURE__ */
|
|
5671
|
+
/* @__PURE__ */ jsx28(Minimize22, { size: 12, strokeWidth: 2.5 }),
|
|
5528
5672
|
"Collapse"
|
|
5529
5673
|
]
|
|
5530
5674
|
}
|
|
@@ -5534,9 +5678,9 @@ var MessageGroupExpandedNode_default = memo26(function MessageGroupExpandedNode(
|
|
|
5534
5678
|
});
|
|
5535
5679
|
|
|
5536
5680
|
// src/edges/AnimatedMessageEdge.tsx
|
|
5537
|
-
import { memo as
|
|
5681
|
+
import { memo as memo28, useMemo as useMemo12 } from "react";
|
|
5538
5682
|
import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
|
|
5539
|
-
import { Fragment as
|
|
5683
|
+
import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
5540
5684
|
function messageColor(collection) {
|
|
5541
5685
|
switch (collection) {
|
|
5542
5686
|
case "events":
|
|
@@ -5551,7 +5695,7 @@ function messageColor(collection) {
|
|
|
5551
5695
|
}
|
|
5552
5696
|
var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
|
|
5553
5697
|
var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
|
|
5554
|
-
var AnimatedMessageEdge =
|
|
5698
|
+
var AnimatedMessageEdge = memo28(
|
|
5555
5699
|
({
|
|
5556
5700
|
id,
|
|
5557
5701
|
sourceX,
|
|
@@ -5583,12 +5727,12 @@ var AnimatedMessageEdge = memo27(
|
|
|
5583
5727
|
const animatedNodes = useMemo12(
|
|
5584
5728
|
() => customColors.map((color, index) => {
|
|
5585
5729
|
const delay = randomDelay + index * 0.3;
|
|
5586
|
-
return /* @__PURE__ */
|
|
5730
|
+
return /* @__PURE__ */ jsx29(
|
|
5587
5731
|
"g",
|
|
5588
5732
|
{
|
|
5589
5733
|
className: `ec-animated-msg ${opacityClass}`,
|
|
5590
|
-
children: /* @__PURE__ */
|
|
5591
|
-
/* @__PURE__ */
|
|
5734
|
+
children: /* @__PURE__ */ jsxs27("g", { children: [
|
|
5735
|
+
/* @__PURE__ */ jsx29(
|
|
5592
5736
|
"rect",
|
|
5593
5737
|
{
|
|
5594
5738
|
x: "-7",
|
|
@@ -5600,7 +5744,7 @@ var AnimatedMessageEdge = memo27(
|
|
|
5600
5744
|
fill: color
|
|
5601
5745
|
}
|
|
5602
5746
|
),
|
|
5603
|
-
/* @__PURE__ */
|
|
5747
|
+
/* @__PURE__ */ jsx29(
|
|
5604
5748
|
"path",
|
|
5605
5749
|
{
|
|
5606
5750
|
d: "M-7,-5 L0,1 L7,-5",
|
|
@@ -5610,7 +5754,7 @@ var AnimatedMessageEdge = memo27(
|
|
|
5610
5754
|
strokeLinejoin: "round"
|
|
5611
5755
|
}
|
|
5612
5756
|
),
|
|
5613
|
-
/* @__PURE__ */
|
|
5757
|
+
/* @__PURE__ */ jsx29(
|
|
5614
5758
|
"animateMotion",
|
|
5615
5759
|
{
|
|
5616
5760
|
dur: "2s",
|
|
@@ -5618,7 +5762,7 @@ var AnimatedMessageEdge = memo27(
|
|
|
5618
5762
|
path: edgePath,
|
|
5619
5763
|
rotate: "auto",
|
|
5620
5764
|
begin: `${delay}s`,
|
|
5621
|
-
children: /* @__PURE__ */
|
|
5765
|
+
children: /* @__PURE__ */ jsx29("mpath", { href: `#${id}` })
|
|
5622
5766
|
}
|
|
5623
5767
|
)
|
|
5624
5768
|
] })
|
|
@@ -5640,8 +5784,8 @@ var AnimatedMessageEdge = memo27(
|
|
|
5640
5784
|
);
|
|
5641
5785
|
const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
|
|
5642
5786
|
const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
|
|
5643
|
-
return /* @__PURE__ */
|
|
5644
|
-
/* @__PURE__ */
|
|
5787
|
+
return /* @__PURE__ */ jsxs27(Fragment4, { children: [
|
|
5788
|
+
/* @__PURE__ */ jsx29(
|
|
5645
5789
|
BaseEdge,
|
|
5646
5790
|
{
|
|
5647
5791
|
id,
|
|
@@ -5652,8 +5796,8 @@ var AnimatedMessageEdge = memo27(
|
|
|
5652
5796
|
}
|
|
5653
5797
|
),
|
|
5654
5798
|
animatedNodes,
|
|
5655
|
-
/* @__PURE__ */
|
|
5656
|
-
label && /* @__PURE__ */
|
|
5799
|
+
/* @__PURE__ */ jsxs27("g", { children: [
|
|
5800
|
+
label && /* @__PURE__ */ jsx29(
|
|
5657
5801
|
"rect",
|
|
5658
5802
|
{
|
|
5659
5803
|
x: labelX - labelWidth / 2,
|
|
@@ -5668,7 +5812,7 @@ var AnimatedMessageEdge = memo27(
|
|
|
5668
5812
|
ry: 5
|
|
5669
5813
|
}
|
|
5670
5814
|
),
|
|
5671
|
-
/* @__PURE__ */
|
|
5815
|
+
/* @__PURE__ */ jsx29(
|
|
5672
5816
|
"text",
|
|
5673
5817
|
{
|
|
5674
5818
|
x: labelX,
|
|
@@ -5679,7 +5823,7 @@ var AnimatedMessageEdge = memo27(
|
|
|
5679
5823
|
fontWeight: 500,
|
|
5680
5824
|
fill: "rgb(var(--ec-page-text))",
|
|
5681
5825
|
pointerEvents: "none",
|
|
5682
|
-
children: lines.map((line, i) => /* @__PURE__ */
|
|
5826
|
+
children: lines.map((line, i) => /* @__PURE__ */ jsx29(
|
|
5683
5827
|
"tspan",
|
|
5684
5828
|
{
|
|
5685
5829
|
x: labelX,
|
|
@@ -5698,12 +5842,12 @@ var AnimatedMessageEdge = memo27(
|
|
|
5698
5842
|
var AnimatedMessageEdge_default = AnimatedMessageEdge;
|
|
5699
5843
|
|
|
5700
5844
|
// src/edges/MultilineEdgeLabel.tsx
|
|
5701
|
-
import { memo as
|
|
5845
|
+
import { memo as memo29, useMemo as useMemo13 } from "react";
|
|
5702
5846
|
import { getSmoothStepPath as getSmoothStepPath2 } from "@xyflow/react";
|
|
5703
|
-
import { Fragment as
|
|
5847
|
+
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
5704
5848
|
var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
|
|
5705
5849
|
var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
|
|
5706
|
-
var MultilineEdgeLabel_default =
|
|
5850
|
+
var MultilineEdgeLabel_default = memo29(function MultilineEdgeLabel(props) {
|
|
5707
5851
|
const {
|
|
5708
5852
|
id,
|
|
5709
5853
|
sourceX,
|
|
@@ -5738,8 +5882,8 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
|
|
|
5738
5882
|
);
|
|
5739
5883
|
const labelWidth = Math.max(longestLine.length * 5.5 + 14, 44);
|
|
5740
5884
|
const labelHeight = lines.length * 12 + 4;
|
|
5741
|
-
return /* @__PURE__ */
|
|
5742
|
-
/* @__PURE__ */
|
|
5885
|
+
return /* @__PURE__ */ jsxs28(Fragment5, { children: [
|
|
5886
|
+
/* @__PURE__ */ jsx30(
|
|
5743
5887
|
"path",
|
|
5744
5888
|
{
|
|
5745
5889
|
id,
|
|
@@ -5750,7 +5894,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
|
|
|
5750
5894
|
style
|
|
5751
5895
|
}
|
|
5752
5896
|
),
|
|
5753
|
-
label && /* @__PURE__ */
|
|
5897
|
+
label && /* @__PURE__ */ jsx30(
|
|
5754
5898
|
"rect",
|
|
5755
5899
|
{
|
|
5756
5900
|
x: labelX - labelWidth / 2,
|
|
@@ -5766,7 +5910,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
|
|
|
5766
5910
|
pointerEvents: "none"
|
|
5767
5911
|
}
|
|
5768
5912
|
),
|
|
5769
|
-
/* @__PURE__ */
|
|
5913
|
+
/* @__PURE__ */ jsx30(
|
|
5770
5914
|
"text",
|
|
5771
5915
|
{
|
|
5772
5916
|
x: labelX,
|
|
@@ -5776,7 +5920,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
|
|
|
5776
5920
|
fontSize: "10px",
|
|
5777
5921
|
fill: "rgb(var(--ec-page-text))",
|
|
5778
5922
|
pointerEvents: "none",
|
|
5779
|
-
children: lines.map((line, i) => /* @__PURE__ */
|
|
5923
|
+
children: lines.map((line, i) => /* @__PURE__ */ jsx30(
|
|
5780
5924
|
"tspan",
|
|
5781
5925
|
{
|
|
5782
5926
|
x: labelX,
|
|
@@ -5792,13 +5936,13 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
|
|
|
5792
5936
|
});
|
|
5793
5937
|
|
|
5794
5938
|
// src/edges/FlowEdge.tsx
|
|
5795
|
-
import { memo as
|
|
5939
|
+
import { memo as memo30, useMemo as useMemo14 } from "react";
|
|
5796
5940
|
import {
|
|
5797
5941
|
BaseEdge as BaseEdge2,
|
|
5798
5942
|
EdgeLabelRenderer,
|
|
5799
5943
|
getSmoothStepPath as getSmoothStepPath3
|
|
5800
5944
|
} from "@xyflow/react";
|
|
5801
|
-
import { Fragment as
|
|
5945
|
+
import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
5802
5946
|
function messageColor2(collection) {
|
|
5803
5947
|
switch (collection) {
|
|
5804
5948
|
case "events":
|
|
@@ -5812,7 +5956,7 @@ function messageColor2(collection) {
|
|
|
5812
5956
|
}
|
|
5813
5957
|
}
|
|
5814
5958
|
var EMPTY_STYLE = {};
|
|
5815
|
-
var FlowEdge_default =
|
|
5959
|
+
var FlowEdge_default = memo30(function CustomEdge({
|
|
5816
5960
|
id,
|
|
5817
5961
|
sourceX,
|
|
5818
5962
|
sourceY,
|
|
@@ -5850,20 +5994,20 @@ var FlowEdge_default = memo29(function CustomEdge({
|
|
|
5850
5994
|
}),
|
|
5851
5995
|
[labelX, labelY, labelStyle]
|
|
5852
5996
|
);
|
|
5853
|
-
return /* @__PURE__ */
|
|
5854
|
-
/* @__PURE__ */
|
|
5855
|
-
data?.animated && /* @__PURE__ */
|
|
5997
|
+
return /* @__PURE__ */ jsxs29(Fragment6, { children: [
|
|
5998
|
+
/* @__PURE__ */ jsx31(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
|
|
5999
|
+
data?.animated && /* @__PURE__ */ jsx31(
|
|
5856
6000
|
"g",
|
|
5857
6001
|
{
|
|
5858
6002
|
className: `ec-animated-msg z-30 ${opacity === 1 ? "opacity-100" : "opacity-10"}`,
|
|
5859
|
-
children: /* @__PURE__ */
|
|
6003
|
+
children: /* @__PURE__ */ jsx31(
|
|
5860
6004
|
"circle",
|
|
5861
6005
|
{
|
|
5862
6006
|
cx: "0",
|
|
5863
6007
|
cy: "0",
|
|
5864
6008
|
r: "7",
|
|
5865
6009
|
fill: messageColor2(collection || "default"),
|
|
5866
|
-
children: /* @__PURE__ */
|
|
6010
|
+
children: /* @__PURE__ */ jsx31(
|
|
5867
6011
|
"animateMotion",
|
|
5868
6012
|
{
|
|
5869
6013
|
dur: "2s",
|
|
@@ -5871,14 +6015,14 @@ var FlowEdge_default = memo29(function CustomEdge({
|
|
|
5871
6015
|
path: edgePath,
|
|
5872
6016
|
rotate: "auto",
|
|
5873
6017
|
begin: `${randomDelay}s`,
|
|
5874
|
-
children: /* @__PURE__ */
|
|
6018
|
+
children: /* @__PURE__ */ jsx31("mpath", { href: `#${id}` })
|
|
5875
6019
|
}
|
|
5876
6020
|
)
|
|
5877
6021
|
}
|
|
5878
6022
|
)
|
|
5879
6023
|
}
|
|
5880
6024
|
),
|
|
5881
|
-
label && /* @__PURE__ */
|
|
6025
|
+
label && /* @__PURE__ */ jsx31(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx31(
|
|
5882
6026
|
"div",
|
|
5883
6027
|
{
|
|
5884
6028
|
style: labelPositionStyle,
|
|
@@ -5897,10 +6041,78 @@ import {
|
|
|
5897
6041
|
useEffect as useEffect2,
|
|
5898
6042
|
forwardRef,
|
|
5899
6043
|
useImperativeHandle,
|
|
5900
|
-
memo as
|
|
6044
|
+
memo as memo31
|
|
5901
6045
|
} from "react";
|
|
5902
|
-
import {
|
|
5903
|
-
|
|
6046
|
+
import {
|
|
6047
|
+
Blocks,
|
|
6048
|
+
Database as Database5,
|
|
6049
|
+
Layers as Layers3,
|
|
6050
|
+
ListTree,
|
|
6051
|
+
MessageSquare as MessageSquare2,
|
|
6052
|
+
Search as SearchIcon,
|
|
6053
|
+
Server as Server2,
|
|
6054
|
+
User as User3,
|
|
6055
|
+
Workflow as Workflow2,
|
|
6056
|
+
Zap as Zap4
|
|
6057
|
+
} from "lucide-react";
|
|
6058
|
+
import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
6059
|
+
var formatVersionedName = (name, version) => {
|
|
6060
|
+
if (version) {
|
|
6061
|
+
const nameWithoutVersion = name.replace(
|
|
6062
|
+
new RegExp(`-v?${version.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
|
|
6063
|
+
""
|
|
6064
|
+
);
|
|
6065
|
+
return `${nameWithoutVersion} (v${version})`;
|
|
6066
|
+
}
|
|
6067
|
+
const versionMatch = name.match(
|
|
6068
|
+
/^(.+)-v?(\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?)$/
|
|
6069
|
+
);
|
|
6070
|
+
if (!versionMatch) return name;
|
|
6071
|
+
return `${versionMatch[1]} (v${versionMatch[2]})`;
|
|
6072
|
+
};
|
|
6073
|
+
var normalizeCollectionType = (type) => {
|
|
6074
|
+
const aliases = {
|
|
6075
|
+
event: "events",
|
|
6076
|
+
command: "commands",
|
|
6077
|
+
query: "queries",
|
|
6078
|
+
service: "services",
|
|
6079
|
+
domain: "domains",
|
|
6080
|
+
channel: "channels",
|
|
6081
|
+
entity: "entities"
|
|
6082
|
+
};
|
|
6083
|
+
return aliases[type] || type;
|
|
6084
|
+
};
|
|
6085
|
+
var splitVersionedName = (name, version) => {
|
|
6086
|
+
if (version) {
|
|
6087
|
+
return {
|
|
6088
|
+
id: name.replace(
|
|
6089
|
+
new RegExp(`-v?${version.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
|
|
6090
|
+
""
|
|
6091
|
+
),
|
|
6092
|
+
version
|
|
6093
|
+
};
|
|
6094
|
+
}
|
|
6095
|
+
const versionMatch = name.match(
|
|
6096
|
+
/^(.+)-v?(\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?)$/
|
|
6097
|
+
);
|
|
6098
|
+
if (!versionMatch) return { id: name, version: void 0 };
|
|
6099
|
+
return { id: versionMatch[1], version: versionMatch[2] };
|
|
6100
|
+
};
|
|
6101
|
+
var getResourceKey = ({
|
|
6102
|
+
type,
|
|
6103
|
+
id,
|
|
6104
|
+
name,
|
|
6105
|
+
version
|
|
6106
|
+
}) => {
|
|
6107
|
+
const parsed = splitVersionedName(id || name, version);
|
|
6108
|
+
return `${normalizeCollectionType(type)}:${parsed.id}:${parsed.version || ""}`.toLowerCase();
|
|
6109
|
+
};
|
|
6110
|
+
var getNodeResourceData = (data, key) => {
|
|
6111
|
+
const resource = data?.[key];
|
|
6112
|
+
if (!resource || typeof resource !== "object") return void 0;
|
|
6113
|
+
return "data" in resource && resource.data ? resource.data : resource;
|
|
6114
|
+
};
|
|
6115
|
+
var VisualiserSearch = memo31(
|
|
5904
6116
|
forwardRef(
|
|
5905
6117
|
({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
|
|
5906
6118
|
const [searchQuery, setSearchQuery] = useState5("");
|
|
@@ -5909,6 +6121,8 @@ var VisualiserSearch = memo30(
|
|
|
5909
6121
|
const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState5(-1);
|
|
5910
6122
|
const searchInputRef = useRef2(null);
|
|
5911
6123
|
const containerRef = useRef2(null);
|
|
6124
|
+
const suggestionsListRef = useRef2(null);
|
|
6125
|
+
const suggestionItemRefs = useRef2([]);
|
|
5912
6126
|
const hideSuggestions = useCallback4(() => {
|
|
5913
6127
|
setShowSuggestions(false);
|
|
5914
6128
|
setSelectedSuggestionIndex(-1);
|
|
@@ -5927,84 +6141,277 @@ var VisualiserSearch = memo30(
|
|
|
5927
6141
|
if (node.type === "messageGroupExpanded") {
|
|
5928
6142
|
return node.data?.groupName || node.id;
|
|
5929
6143
|
}
|
|
5930
|
-
const
|
|
5931
|
-
const
|
|
5932
|
-
|
|
6144
|
+
const message = getNodeResourceData(node.data, "message");
|
|
6145
|
+
const service = getNodeResourceData(node.data, "service");
|
|
6146
|
+
const domain = getNodeResourceData(node.data, "domain");
|
|
6147
|
+
const entity = getNodeResourceData(node.data, "entity");
|
|
6148
|
+
const channel = getNodeResourceData(node.data, "channel");
|
|
6149
|
+
const dataProduct = getNodeResourceData(node.data, "dataProduct");
|
|
6150
|
+
const data = getNodeResourceData(node.data, "data");
|
|
6151
|
+
const name = message?.name || message?.id || service?.name || service?.id || domain?.name || domain?.id || entity?.name || entity?.id || channel?.name || channel?.id || dataProduct?.name || dataProduct?.id || data?.name || data?.id || node.data?.name || node.id;
|
|
6152
|
+
const version = message?.version || service?.version || domain?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
|
|
6153
|
+
return formatVersionedName(name, version);
|
|
5933
6154
|
}, []);
|
|
5934
|
-
const
|
|
5935
|
-
|
|
5936
|
-
|
|
5937
|
-
|
|
5938
|
-
|
|
5939
|
-
|
|
5940
|
-
|
|
5941
|
-
|
|
5942
|
-
|
|
5943
|
-
|
|
5944
|
-
|
|
5945
|
-
|
|
5946
|
-
|
|
5947
|
-
|
|
5948
|
-
|
|
5949
|
-
|
|
5950
|
-
|
|
6155
|
+
const getNodeResourceKey = useCallback4(
|
|
6156
|
+
(node, label) => {
|
|
6157
|
+
if (node.type === "messageGroup" || node.type === "messageGroupExpanded") {
|
|
6158
|
+
return `${node.type}:${node.id}`.toLowerCase();
|
|
6159
|
+
}
|
|
6160
|
+
const data = node.data;
|
|
6161
|
+
const resource = getNodeResourceData(data, "message") || getNodeResourceData(data, "service") || getNodeResourceData(data, "domain") || getNodeResourceData(data, "entity") || getNodeResourceData(data, "channel") || getNodeResourceData(data, "dataProduct") || data?.data || data;
|
|
6162
|
+
return getResourceKey({
|
|
6163
|
+
type: node.type || "unknown",
|
|
6164
|
+
id: resource?.id,
|
|
6165
|
+
name: resource?.name || resource?.id || label || node.id,
|
|
6166
|
+
version: resource?.version || data?.version
|
|
6167
|
+
});
|
|
6168
|
+
},
|
|
6169
|
+
[]
|
|
6170
|
+
);
|
|
6171
|
+
const dedupeSearchSuggestions = useCallback4(
|
|
6172
|
+
(suggestions) => {
|
|
6173
|
+
const uniqueSuggestions = [];
|
|
6174
|
+
const indexByResourceKey = /* @__PURE__ */ new Map();
|
|
6175
|
+
suggestions.forEach((suggestion) => {
|
|
6176
|
+
const existingIndex = indexByResourceKey.get(
|
|
6177
|
+
suggestion.resourceKey
|
|
6178
|
+
);
|
|
6179
|
+
if (existingIndex === void 0) {
|
|
6180
|
+
indexByResourceKey.set(
|
|
6181
|
+
suggestion.resourceKey,
|
|
6182
|
+
uniqueSuggestions.length
|
|
6183
|
+
);
|
|
6184
|
+
uniqueSuggestions.push(suggestion);
|
|
6185
|
+
return;
|
|
6186
|
+
}
|
|
6187
|
+
if (suggestion.isGroupedMessage && !uniqueSuggestions[existingIndex].isGroupedMessage) {
|
|
6188
|
+
uniqueSuggestions[existingIndex] = suggestion;
|
|
6189
|
+
}
|
|
6190
|
+
});
|
|
6191
|
+
return uniqueSuggestions;
|
|
6192
|
+
},
|
|
6193
|
+
[]
|
|
6194
|
+
);
|
|
6195
|
+
const getSearchSuggestions = useCallback4(
|
|
6196
|
+
(nodesToIndex) => {
|
|
6197
|
+
const suggestions = nodesToIndex.flatMap((node) => {
|
|
6198
|
+
const nodeName = getNodeDisplayName(node);
|
|
6199
|
+
const suggestions2 = [
|
|
6200
|
+
{
|
|
6201
|
+
key: node.id,
|
|
6202
|
+
node,
|
|
6203
|
+
label: nodeName,
|
|
6204
|
+
searchText: nodeName,
|
|
6205
|
+
type: node.type || "unknown",
|
|
6206
|
+
resourceKey: getNodeResourceKey(node, nodeName)
|
|
6207
|
+
}
|
|
6208
|
+
];
|
|
6209
|
+
if (node.type !== "messageGroup") return suggestions2;
|
|
6210
|
+
const groupName = node.data?.groupName || nodeName;
|
|
6211
|
+
const groupedMessages = node.data?.messages || [];
|
|
6212
|
+
groupedMessages.forEach((item, index) => {
|
|
6213
|
+
const message = item.message;
|
|
6214
|
+
const messageName = message?.data?.name || message?.data?.id;
|
|
6215
|
+
if (!messageName) return;
|
|
6216
|
+
const version = message?.data?.version;
|
|
6217
|
+
const label = formatVersionedName(messageName, version);
|
|
6218
|
+
suggestions2.push({
|
|
6219
|
+
key: `${node.id}:${message?.data?.id || messageName}:${version || index}`,
|
|
6220
|
+
node,
|
|
6221
|
+
label,
|
|
6222
|
+
searchText: `${label} ${groupName}`,
|
|
6223
|
+
type: message?.collection || "message",
|
|
6224
|
+
resourceKey: getResourceKey({
|
|
6225
|
+
type: message?.collection || "message",
|
|
6226
|
+
id: message?.data?.id,
|
|
6227
|
+
name: messageName,
|
|
6228
|
+
version
|
|
6229
|
+
}),
|
|
6230
|
+
groupName,
|
|
6231
|
+
isGroupedMessage: true
|
|
6232
|
+
});
|
|
6233
|
+
});
|
|
6234
|
+
return suggestions2;
|
|
6235
|
+
});
|
|
6236
|
+
return dedupeSearchSuggestions(suggestions);
|
|
6237
|
+
},
|
|
6238
|
+
[dedupeSearchSuggestions, getNodeDisplayName, getNodeResourceKey]
|
|
6239
|
+
);
|
|
6240
|
+
const getNodeTypeMeta = useCallback4((nodeType) => {
|
|
6241
|
+
const meta = {
|
|
6242
|
+
events: {
|
|
6243
|
+
label: "Event",
|
|
6244
|
+
Icon: Zap4,
|
|
6245
|
+
iconClass: "border-orange-500/25 bg-orange-500/10 text-orange-500",
|
|
6246
|
+
badgeClass: "border-orange-500/25 bg-orange-500/10 text-orange-700 dark:text-orange-300"
|
|
6247
|
+
},
|
|
6248
|
+
event: {
|
|
6249
|
+
label: "Event",
|
|
6250
|
+
Icon: Zap4,
|
|
6251
|
+
iconClass: "border-orange-500/25 bg-orange-500/10 text-orange-500",
|
|
6252
|
+
badgeClass: "border-orange-500/25 bg-orange-500/10 text-orange-700 dark:text-orange-300"
|
|
6253
|
+
},
|
|
6254
|
+
commands: {
|
|
6255
|
+
label: "Command",
|
|
6256
|
+
Icon: MessageSquare2,
|
|
6257
|
+
iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
|
|
6258
|
+
badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
|
|
6259
|
+
},
|
|
6260
|
+
command: {
|
|
6261
|
+
label: "Command",
|
|
6262
|
+
Icon: MessageSquare2,
|
|
6263
|
+
iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
|
|
6264
|
+
badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
|
|
6265
|
+
},
|
|
6266
|
+
queries: {
|
|
6267
|
+
label: "Query",
|
|
6268
|
+
Icon: SearchIcon,
|
|
6269
|
+
iconClass: "border-green-500/25 bg-green-500/10 text-green-500",
|
|
6270
|
+
badgeClass: "border-green-500/25 bg-green-500/10 text-green-700 dark:text-green-300"
|
|
6271
|
+
},
|
|
6272
|
+
query: {
|
|
6273
|
+
label: "Query",
|
|
6274
|
+
Icon: SearchIcon,
|
|
6275
|
+
iconClass: "border-green-500/25 bg-green-500/10 text-green-500",
|
|
6276
|
+
badgeClass: "border-green-500/25 bg-green-500/10 text-green-700 dark:text-green-300"
|
|
6277
|
+
},
|
|
6278
|
+
services: {
|
|
6279
|
+
label: "Service",
|
|
6280
|
+
Icon: Server2,
|
|
6281
|
+
iconClass: "border-pink-500/25 bg-pink-500/10 text-pink-500",
|
|
6282
|
+
badgeClass: "border-pink-500/25 bg-pink-500/10 text-pink-700 dark:text-pink-300"
|
|
6283
|
+
},
|
|
6284
|
+
domains: {
|
|
6285
|
+
label: "Domain",
|
|
6286
|
+
Icon: Blocks,
|
|
6287
|
+
iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
|
|
6288
|
+
badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
|
|
6289
|
+
},
|
|
6290
|
+
flows: {
|
|
6291
|
+
label: "Flow",
|
|
6292
|
+
Icon: Workflow2,
|
|
6293
|
+
iconClass: "border-teal-500/25 bg-teal-500/10 text-teal-500",
|
|
6294
|
+
badgeClass: "border-teal-500/25 bg-teal-500/10 text-teal-700 dark:text-teal-300"
|
|
6295
|
+
},
|
|
6296
|
+
channels: {
|
|
6297
|
+
label: "Channel",
|
|
6298
|
+
Icon: ListTree,
|
|
6299
|
+
iconClass: "border-gray-500/25 bg-gray-500/10 text-gray-500",
|
|
6300
|
+
badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
|
|
6301
|
+
},
|
|
6302
|
+
data: {
|
|
6303
|
+
label: "Data",
|
|
6304
|
+
Icon: Database5,
|
|
6305
|
+
iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
|
|
6306
|
+
badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
|
|
6307
|
+
},
|
|
6308
|
+
entities: {
|
|
6309
|
+
label: "Entity",
|
|
6310
|
+
Icon: Database5,
|
|
6311
|
+
iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
|
|
6312
|
+
badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
|
|
6313
|
+
},
|
|
6314
|
+
externalSystem: {
|
|
6315
|
+
label: "External",
|
|
6316
|
+
Icon: Server2,
|
|
6317
|
+
iconClass: "border-pink-500/25 bg-pink-500/10 text-pink-500",
|
|
6318
|
+
badgeClass: "border-pink-500/25 bg-pink-500/10 text-pink-700 dark:text-pink-300"
|
|
6319
|
+
},
|
|
6320
|
+
actor: {
|
|
6321
|
+
label: "Actor",
|
|
6322
|
+
Icon: User3,
|
|
6323
|
+
iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
|
|
6324
|
+
badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
|
|
6325
|
+
},
|
|
6326
|
+
user: {
|
|
6327
|
+
label: "User",
|
|
6328
|
+
Icon: User3,
|
|
6329
|
+
iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
|
|
6330
|
+
badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
|
|
6331
|
+
},
|
|
6332
|
+
messageGroup: {
|
|
6333
|
+
label: "Group",
|
|
6334
|
+
Icon: Layers3,
|
|
6335
|
+
iconClass: "border-violet-500/25 bg-violet-500/10 text-violet-500",
|
|
6336
|
+
badgeClass: "border-violet-500/25 bg-violet-500/10 text-violet-700 dark:text-violet-300"
|
|
6337
|
+
},
|
|
6338
|
+
messageGroupExpanded: {
|
|
6339
|
+
label: "Group",
|
|
6340
|
+
Icon: Layers3,
|
|
6341
|
+
iconClass: "border-violet-500/25 bg-violet-500/10 text-violet-500",
|
|
6342
|
+
badgeClass: "border-violet-500/25 bg-violet-500/10 text-violet-700 dark:text-violet-300"
|
|
6343
|
+
}
|
|
6344
|
+
};
|
|
6345
|
+
return meta[nodeType] || {
|
|
6346
|
+
label: nodeType,
|
|
6347
|
+
Icon: Layers3,
|
|
6348
|
+
iconClass: "border-gray-500/25 bg-gray-500/10 text-gray-500",
|
|
6349
|
+
badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
|
|
5951
6350
|
};
|
|
5952
|
-
return colorClasses[nodeType] || "bg-gray-100 text-gray-700";
|
|
5953
6351
|
}, []);
|
|
5954
6352
|
const handleSearchChange = useCallback4(
|
|
5955
6353
|
(event) => {
|
|
5956
6354
|
const query = event.target.value;
|
|
5957
6355
|
setSearchQuery(query);
|
|
5958
6356
|
if (query.length > 0) {
|
|
5959
|
-
const
|
|
5960
|
-
|
|
5961
|
-
|
|
5962
|
-
|
|
6357
|
+
const search = query.toLowerCase();
|
|
6358
|
+
const filtered = getSearchSuggestions(nodes).filter(
|
|
6359
|
+
(suggestion) => suggestion.searchText.toLowerCase().includes(search)
|
|
6360
|
+
);
|
|
5963
6361
|
setFilteredSuggestions(filtered);
|
|
5964
6362
|
setShowSuggestions(true);
|
|
5965
6363
|
setSelectedSuggestionIndex(-1);
|
|
5966
6364
|
} else {
|
|
5967
|
-
setFilteredSuggestions(nodes);
|
|
6365
|
+
setFilteredSuggestions(getSearchSuggestions(nodes));
|
|
5968
6366
|
setShowSuggestions(true);
|
|
5969
6367
|
setSelectedSuggestionIndex(-1);
|
|
5970
6368
|
}
|
|
5971
6369
|
},
|
|
5972
|
-
[nodes,
|
|
6370
|
+
[nodes, getSearchSuggestions]
|
|
5973
6371
|
);
|
|
5974
6372
|
const handleSearchFocus = useCallback4(() => {
|
|
5975
|
-
|
|
5976
|
-
|
|
5977
|
-
|
|
6373
|
+
const suggestions = getSearchSuggestions(nodes);
|
|
6374
|
+
const search = searchQuery.toLowerCase();
|
|
6375
|
+
setFilteredSuggestions(
|
|
6376
|
+
searchQuery.length === 0 ? suggestions : suggestions.filter(
|
|
6377
|
+
(suggestion) => suggestion.searchText.toLowerCase().includes(search)
|
|
6378
|
+
)
|
|
6379
|
+
);
|
|
5978
6380
|
setShowSuggestions(true);
|
|
5979
6381
|
setSelectedSuggestionIndex(-1);
|
|
5980
|
-
}, [nodes, searchQuery]);
|
|
6382
|
+
}, [nodes, searchQuery, getSearchSuggestions]);
|
|
5981
6383
|
const handleSuggestionClick = useCallback4(
|
|
5982
|
-
(
|
|
5983
|
-
setSearchQuery(
|
|
6384
|
+
(suggestion) => {
|
|
6385
|
+
setSearchQuery("");
|
|
6386
|
+
setFilteredSuggestions([]);
|
|
5984
6387
|
setShowSuggestions(false);
|
|
5985
|
-
|
|
6388
|
+
setSelectedSuggestionIndex(-1);
|
|
6389
|
+
onNodeSelect(suggestion.node);
|
|
5986
6390
|
},
|
|
5987
|
-
[onNodeSelect
|
|
6391
|
+
[onNodeSelect]
|
|
5988
6392
|
);
|
|
5989
6393
|
const handleSearchKeyDown = useCallback4(
|
|
5990
6394
|
(event) => {
|
|
5991
|
-
if (!showSuggestions || filteredSuggestions.length === 0) return;
|
|
5992
6395
|
switch (event.key) {
|
|
5993
6396
|
case "ArrowDown":
|
|
5994
6397
|
event.preventDefault();
|
|
6398
|
+
if (filteredSuggestions.length === 0) return;
|
|
6399
|
+
setShowSuggestions(true);
|
|
5995
6400
|
setSelectedSuggestionIndex(
|
|
5996
6401
|
(prev) => prev < filteredSuggestions.length - 1 ? prev + 1 : 0
|
|
5997
6402
|
);
|
|
5998
6403
|
break;
|
|
5999
6404
|
case "ArrowUp":
|
|
6000
6405
|
event.preventDefault();
|
|
6406
|
+
if (filteredSuggestions.length === 0) return;
|
|
6407
|
+
setShowSuggestions(true);
|
|
6001
6408
|
setSelectedSuggestionIndex(
|
|
6002
6409
|
(prev) => prev > 0 ? prev - 1 : filteredSuggestions.length - 1
|
|
6003
6410
|
);
|
|
6004
6411
|
break;
|
|
6005
6412
|
case "Enter":
|
|
6006
6413
|
event.preventDefault();
|
|
6007
|
-
if (selectedSuggestionIndex >= 0) {
|
|
6414
|
+
if (showSuggestions && selectedSuggestionIndex >= 0 && selectedSuggestionIndex < filteredSuggestions.length) {
|
|
6008
6415
|
handleSuggestionClick(
|
|
6009
6416
|
filteredSuggestions[selectedSuggestionIndex]
|
|
6010
6417
|
);
|
|
@@ -6033,6 +6440,31 @@ var VisualiserSearch = memo30(
|
|
|
6033
6440
|
searchInputRef.current.focus();
|
|
6034
6441
|
}
|
|
6035
6442
|
}, [onClear]);
|
|
6443
|
+
useEffect2(() => {
|
|
6444
|
+
suggestionItemRefs.current = suggestionItemRefs.current.slice(
|
|
6445
|
+
0,
|
|
6446
|
+
filteredSuggestions.length
|
|
6447
|
+
);
|
|
6448
|
+
}, [filteredSuggestions.length]);
|
|
6449
|
+
useEffect2(() => {
|
|
6450
|
+
if (!showSuggestions || selectedSuggestionIndex < 0) return;
|
|
6451
|
+
const list = suggestionsListRef.current;
|
|
6452
|
+
const item = suggestionItemRefs.current[selectedSuggestionIndex];
|
|
6453
|
+
if (!list || !item) return;
|
|
6454
|
+
const itemTop = item.offsetTop;
|
|
6455
|
+
const itemBottom = itemTop + item.offsetHeight;
|
|
6456
|
+
const visibleTop = list.scrollTop;
|
|
6457
|
+
const visibleBottom = visibleTop + list.clientHeight;
|
|
6458
|
+
if (itemTop < visibleTop) {
|
|
6459
|
+
list.scrollTop = itemTop;
|
|
6460
|
+
} else if (itemBottom > visibleBottom) {
|
|
6461
|
+
list.scrollTop = itemBottom - list.clientHeight;
|
|
6462
|
+
}
|
|
6463
|
+
}, [
|
|
6464
|
+
showSuggestions,
|
|
6465
|
+
selectedSuggestionIndex,
|
|
6466
|
+
filteredSuggestions.length
|
|
6467
|
+
]);
|
|
6036
6468
|
useEffect2(() => {
|
|
6037
6469
|
const handleClickOutside = (event) => {
|
|
6038
6470
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
@@ -6045,9 +6477,9 @@ var VisualiserSearch = memo30(
|
|
|
6045
6477
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
6046
6478
|
};
|
|
6047
6479
|
}, []);
|
|
6048
|
-
return /* @__PURE__ */
|
|
6049
|
-
/* @__PURE__ */
|
|
6050
|
-
/* @__PURE__ */
|
|
6480
|
+
return /* @__PURE__ */ jsxs30("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
|
|
6481
|
+
/* @__PURE__ */ jsxs30("div", { className: "relative", children: [
|
|
6482
|
+
/* @__PURE__ */ jsx32(
|
|
6051
6483
|
"input",
|
|
6052
6484
|
{
|
|
6053
6485
|
ref: searchInputRef,
|
|
@@ -6060,20 +6492,20 @@ var VisualiserSearch = memo30(
|
|
|
6060
6492
|
className: "w-full px-4 py-2 pr-10 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
|
|
6061
6493
|
}
|
|
6062
6494
|
),
|
|
6063
|
-
searchQuery && /* @__PURE__ */
|
|
6495
|
+
searchQuery && /* @__PURE__ */ jsx32(
|
|
6064
6496
|
"button",
|
|
6065
6497
|
{
|
|
6066
6498
|
onClick: clearSearch,
|
|
6067
6499
|
className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]",
|
|
6068
6500
|
"aria-label": "Clear search",
|
|
6069
|
-
children: /* @__PURE__ */
|
|
6501
|
+
children: /* @__PURE__ */ jsx32(
|
|
6070
6502
|
"svg",
|
|
6071
6503
|
{
|
|
6072
6504
|
className: "w-5 h-5",
|
|
6073
6505
|
fill: "none",
|
|
6074
6506
|
stroke: "currentColor",
|
|
6075
6507
|
viewBox: "0 0 24 24",
|
|
6076
|
-
children: /* @__PURE__ */
|
|
6508
|
+
children: /* @__PURE__ */ jsx32(
|
|
6077
6509
|
"path",
|
|
6078
6510
|
{
|
|
6079
6511
|
strokeLinecap: "round",
|
|
@@ -6087,28 +6519,53 @@ var VisualiserSearch = memo30(
|
|
|
6087
6519
|
}
|
|
6088
6520
|
)
|
|
6089
6521
|
] }),
|
|
6090
|
-
showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
"
|
|
6095
|
-
{
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
6099
|
-
|
|
6100
|
-
|
|
6101
|
-
|
|
6102
|
-
{
|
|
6103
|
-
|
|
6104
|
-
|
|
6105
|
-
|
|
6106
|
-
|
|
6107
|
-
|
|
6108
|
-
|
|
6109
|
-
|
|
6110
|
-
|
|
6111
|
-
|
|
6522
|
+
showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx32(
|
|
6523
|
+
"div",
|
|
6524
|
+
{
|
|
6525
|
+
ref: suggestionsListRef,
|
|
6526
|
+
className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto",
|
|
6527
|
+
children: filteredSuggestions.map((suggestion, index) => {
|
|
6528
|
+
const nodeTypeMeta = getNodeTypeMeta(suggestion.type);
|
|
6529
|
+
const Icon = nodeTypeMeta.Icon;
|
|
6530
|
+
const isSelected = index === selectedSuggestionIndex;
|
|
6531
|
+
return /* @__PURE__ */ jsxs30(
|
|
6532
|
+
"div",
|
|
6533
|
+
{
|
|
6534
|
+
ref: (element) => {
|
|
6535
|
+
suggestionItemRefs.current[index] = element;
|
|
6536
|
+
},
|
|
6537
|
+
onClick: () => handleSuggestionClick(suggestion),
|
|
6538
|
+
onMouseEnter: () => setSelectedSuggestionIndex(index),
|
|
6539
|
+
className: `px-3 py-2 cursor-pointer flex items-start gap-3 ${isSelected ? "bg-[rgb(var(--ec-accent-subtle))] outline outline-1 -outline-offset-1 outline-[rgb(var(--ec-accent))]" : "hover:bg-[rgb(var(--ec-page-border)/0.5)]"}`,
|
|
6540
|
+
children: [
|
|
6541
|
+
/* @__PURE__ */ jsx32(
|
|
6542
|
+
"span",
|
|
6543
|
+
{
|
|
6544
|
+
className: `mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border ${nodeTypeMeta.iconClass}`,
|
|
6545
|
+
children: /* @__PURE__ */ jsx32(Icon, { className: "h-3.5 w-3.5" })
|
|
6546
|
+
}
|
|
6547
|
+
),
|
|
6548
|
+
/* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1", children: [
|
|
6549
|
+
/* @__PURE__ */ jsx32("span", { className: "block truncate text-sm font-medium text-[rgb(var(--ec-page-text))]", children: suggestion.label }),
|
|
6550
|
+
suggestion.isGroupedMessage && suggestion.groupName && /* @__PURE__ */ jsxs30("span", { className: "mt-0.5 block truncate text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
|
|
6551
|
+
"in ",
|
|
6552
|
+
suggestion.groupName
|
|
6553
|
+
] })
|
|
6554
|
+
] }),
|
|
6555
|
+
/* @__PURE__ */ jsx32(
|
|
6556
|
+
"span",
|
|
6557
|
+
{
|
|
6558
|
+
className: `mt-0.5 flex-shrink-0 rounded border px-2 py-0.5 text-xs font-medium ${nodeTypeMeta.badgeClass}`,
|
|
6559
|
+
children: nodeTypeMeta.label
|
|
6560
|
+
}
|
|
6561
|
+
)
|
|
6562
|
+
]
|
|
6563
|
+
},
|
|
6564
|
+
`${suggestion.key}:${index}`
|
|
6565
|
+
);
|
|
6566
|
+
})
|
|
6567
|
+
}
|
|
6568
|
+
)
|
|
6112
6569
|
] });
|
|
6113
6570
|
}
|
|
6114
6571
|
)
|
|
@@ -6123,11 +6580,11 @@ import {
|
|
|
6123
6580
|
useCallback as useCallback5,
|
|
6124
6581
|
useMemo as useMemo15,
|
|
6125
6582
|
useRef as useRef3,
|
|
6126
|
-
memo as
|
|
6583
|
+
memo as memo32
|
|
6127
6584
|
} from "react";
|
|
6128
6585
|
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
|
6129
|
-
import { Fragment as
|
|
6130
|
-
var StepWalkthrough_default =
|
|
6586
|
+
import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
6587
|
+
var StepWalkthrough_default = memo32(function StepWalkthrough({
|
|
6131
6588
|
nodes,
|
|
6132
6589
|
edges,
|
|
6133
6590
|
isFlowVisualization,
|
|
@@ -6167,7 +6624,8 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
|
|
|
6167
6624
|
const startNodes = nodes.filter(
|
|
6168
6625
|
(node) => incomingEdgeMap.get(node.id) === 0
|
|
6169
6626
|
);
|
|
6170
|
-
|
|
6627
|
+
const cachedStartStillValid = startNodeId && nodes.some((n) => n.id === startNodeId);
|
|
6628
|
+
if (startNodes.length > 0 && !cachedStartStillValid) {
|
|
6171
6629
|
const firstStartNode = startNodes[0];
|
|
6172
6630
|
setStartNodeId(firstStartNode.id);
|
|
6173
6631
|
}
|
|
@@ -6175,6 +6633,16 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
|
|
|
6175
6633
|
}, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
|
|
6176
6634
|
useEffect3(() => {
|
|
6177
6635
|
if (currentNodeId) {
|
|
6636
|
+
const currentExists = nodes.some(
|
|
6637
|
+
(n) => n.id === currentNodeId
|
|
6638
|
+
);
|
|
6639
|
+
if (!currentExists) {
|
|
6640
|
+
setCurrentNodeId(null);
|
|
6641
|
+
setCurrentStepIndex(-1);
|
|
6642
|
+
setPathHistory([]);
|
|
6643
|
+
setAvailablePaths([]);
|
|
6644
|
+
return;
|
|
6645
|
+
}
|
|
6178
6646
|
const outgoingEdges = edges.filter(
|
|
6179
6647
|
(edge) => edge.source === currentNodeId
|
|
6180
6648
|
);
|
|
@@ -6286,14 +6754,14 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
|
|
|
6286
6754
|
}
|
|
6287
6755
|
return { title: title2, description: description2 };
|
|
6288
6756
|
}, [currentStepIndex, currentNodeId, nodeIdsKey]);
|
|
6289
|
-
return /* @__PURE__ */
|
|
6290
|
-
/* @__PURE__ */
|
|
6291
|
-
/* @__PURE__ */
|
|
6292
|
-
description && /* @__PURE__ */
|
|
6757
|
+
return /* @__PURE__ */ jsxs31("div", { className: "ml-12 bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-sm px-4 py-2 z-30 border border-[rgb(var(--ec-page-border))] w-[350px]", children: [
|
|
6758
|
+
/* @__PURE__ */ jsxs31("div", { className: "mb-2", children: [
|
|
6759
|
+
/* @__PURE__ */ jsx33("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
|
|
6760
|
+
description && /* @__PURE__ */ jsx33("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
|
|
6293
6761
|
] }),
|
|
6294
|
-
currentNodeId && availablePaths.length > 1 && /* @__PURE__ */
|
|
6295
|
-
/* @__PURE__ */
|
|
6296
|
-
/* @__PURE__ */
|
|
6762
|
+
currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs31("div", { className: "mb-3", children: [
|
|
6763
|
+
/* @__PURE__ */ jsx33("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
|
|
6764
|
+
/* @__PURE__ */ jsx33(
|
|
6297
6765
|
"select",
|
|
6298
6766
|
{
|
|
6299
6767
|
value: selectedPathIndex,
|
|
@@ -6301,16 +6769,16 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
|
|
|
6301
6769
|
className: "w-full px-3 py-2 text-xs border border-[rgb(var(--ec-input-border))] rounded-md bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))]",
|
|
6302
6770
|
children: availablePaths.map((path, index) => {
|
|
6303
6771
|
const nodeLabel = path.targetNode.data.step?.title || path.targetNode.data.service?.name || path.targetNode.data.message?.name || path.targetNode.data.flow?.data?.name || path.targetNode.data.custom?.title || path.targetNode.data.custom?.label || path.targetNode.data.externalSystem?.label || path.targetNode.data.label || "Unknown";
|
|
6304
|
-
return /* @__PURE__ */
|
|
6772
|
+
return /* @__PURE__ */ jsx33("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
|
|
6305
6773
|
})
|
|
6306
6774
|
}
|
|
6307
6775
|
)
|
|
6308
6776
|
] }),
|
|
6309
|
-
/* @__PURE__ */
|
|
6777
|
+
/* @__PURE__ */ jsx33("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
|
|
6310
6778
|
// Initial state - show only Start button on the right
|
|
6311
|
-
/* @__PURE__ */
|
|
6312
|
-
/* @__PURE__ */
|
|
6313
|
-
/* @__PURE__ */
|
|
6779
|
+
/* @__PURE__ */ jsxs31(Fragment7, { children: [
|
|
6780
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1" }),
|
|
6781
|
+
/* @__PURE__ */ jsx33(
|
|
6314
6782
|
"button",
|
|
6315
6783
|
{
|
|
6316
6784
|
onClick: handleNextStep,
|
|
@@ -6321,29 +6789,29 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
|
|
|
6321
6789
|
] })
|
|
6322
6790
|
) : (
|
|
6323
6791
|
// In walkthrough - show Previous on left, Next on right (only if paths available)
|
|
6324
|
-
/* @__PURE__ */
|
|
6325
|
-
/* @__PURE__ */
|
|
6792
|
+
/* @__PURE__ */ jsxs31(Fragment7, { children: [
|
|
6793
|
+
/* @__PURE__ */ jsxs31(
|
|
6326
6794
|
"button",
|
|
6327
6795
|
{
|
|
6328
6796
|
onClick: handlePreviousStep,
|
|
6329
6797
|
className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
|
|
6330
6798
|
children: [
|
|
6331
|
-
/* @__PURE__ */
|
|
6799
|
+
/* @__PURE__ */ jsx33(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
|
|
6332
6800
|
"Previous"
|
|
6333
6801
|
]
|
|
6334
6802
|
}
|
|
6335
6803
|
),
|
|
6336
|
-
availablePaths.length > 0 ? /* @__PURE__ */
|
|
6804
|
+
availablePaths.length > 0 ? /* @__PURE__ */ jsxs31(
|
|
6337
6805
|
"button",
|
|
6338
6806
|
{
|
|
6339
6807
|
onClick: handleNextStep,
|
|
6340
6808
|
className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
|
|
6341
6809
|
children: [
|
|
6342
6810
|
"Next",
|
|
6343
|
-
/* @__PURE__ */
|
|
6811
|
+
/* @__PURE__ */ jsx33(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
|
|
6344
6812
|
]
|
|
6345
6813
|
}
|
|
6346
|
-
) : /* @__PURE__ */
|
|
6814
|
+
) : /* @__PURE__ */ jsx33(
|
|
6347
6815
|
"button",
|
|
6348
6816
|
{
|
|
6349
6817
|
onClick: handleFinish,
|
|
@@ -6423,7 +6891,7 @@ var exportNodeGraphForStudio = (data) => {
|
|
|
6423
6891
|
};
|
|
6424
6892
|
|
|
6425
6893
|
// src/components/StudioModal.tsx
|
|
6426
|
-
import { Fragment as
|
|
6894
|
+
import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
6427
6895
|
var StudioModal = ({ isOpen, onClose }) => {
|
|
6428
6896
|
const [copySuccess, setCopySuccess] = useState7(false);
|
|
6429
6897
|
const portalContainer = usePortalContainer();
|
|
@@ -6454,14 +6922,14 @@ var StudioModal = ({ isOpen, onClose }) => {
|
|
|
6454
6922
|
);
|
|
6455
6923
|
onClose();
|
|
6456
6924
|
};
|
|
6457
|
-
return /* @__PURE__ */
|
|
6458
|
-
/* @__PURE__ */
|
|
6459
|
-
/* @__PURE__ */
|
|
6460
|
-
/* @__PURE__ */
|
|
6461
|
-
/* @__PURE__ */
|
|
6925
|
+
return /* @__PURE__ */ jsx34(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs32(Dialog2.Portal, { container: portalContainer, children: [
|
|
6926
|
+
/* @__PURE__ */ jsx34(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
|
|
6927
|
+
/* @__PURE__ */ jsxs32(Dialog2.Content, { className: "fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]", children: [
|
|
6928
|
+
/* @__PURE__ */ jsx34(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
|
|
6929
|
+
/* @__PURE__ */ jsxs32(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
|
|
6462
6930
|
"Import your diagram into",
|
|
6463
6931
|
" ",
|
|
6464
|
-
/* @__PURE__ */
|
|
6932
|
+
/* @__PURE__ */ jsx34(
|
|
6465
6933
|
"a",
|
|
6466
6934
|
{
|
|
6467
6935
|
href: "https://eventcatalog.studio",
|
|
@@ -6474,43 +6942,43 @@ var StudioModal = ({ isOpen, onClose }) => {
|
|
|
6474
6942
|
" ",
|
|
6475
6943
|
"to create designs from your visualization of your architecture."
|
|
6476
6944
|
] }),
|
|
6477
|
-
/* @__PURE__ */
|
|
6478
|
-
/* @__PURE__ */
|
|
6479
|
-
/* @__PURE__ */
|
|
6480
|
-
/* @__PURE__ */
|
|
6481
|
-
/* @__PURE__ */
|
|
6945
|
+
/* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
|
|
6946
|
+
/* @__PURE__ */ jsxs32("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
|
|
6947
|
+
/* @__PURE__ */ jsx34("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
|
|
6948
|
+
/* @__PURE__ */ jsx34("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
|
|
6949
|
+
/* @__PURE__ */ jsx34(
|
|
6482
6950
|
"button",
|
|
6483
6951
|
{
|
|
6484
6952
|
onClick: handleCopyToClipboard,
|
|
6485
6953
|
className: `w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${copySuccess ? "bg-green-50 border-green-200 text-green-700" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"}`,
|
|
6486
|
-
children: copySuccess ? /* @__PURE__ */
|
|
6487
|
-
/* @__PURE__ */
|
|
6488
|
-
/* @__PURE__ */
|
|
6489
|
-
] }) : /* @__PURE__ */
|
|
6490
|
-
/* @__PURE__ */
|
|
6491
|
-
/* @__PURE__ */
|
|
6954
|
+
children: copySuccess ? /* @__PURE__ */ jsxs32(Fragment8, { children: [
|
|
6955
|
+
/* @__PURE__ */ jsx34(CheckIcon, { className: "w-4 h-4" }),
|
|
6956
|
+
/* @__PURE__ */ jsx34("span", { children: "Copied!" })
|
|
6957
|
+
] }) : /* @__PURE__ */ jsxs32(Fragment8, { children: [
|
|
6958
|
+
/* @__PURE__ */ jsx34(ClipboardIcon, { className: "w-4 h-4" }),
|
|
6959
|
+
/* @__PURE__ */ jsx34("span", { children: "Copy diagram to clipboard" })
|
|
6492
6960
|
] })
|
|
6493
6961
|
}
|
|
6494
6962
|
)
|
|
6495
6963
|
] }),
|
|
6496
|
-
/* @__PURE__ */
|
|
6497
|
-
/* @__PURE__ */
|
|
6498
|
-
/* @__PURE__ */
|
|
6499
|
-
/* @__PURE__ */
|
|
6964
|
+
/* @__PURE__ */ jsxs32("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
|
|
6965
|
+
/* @__PURE__ */ jsx34("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
|
|
6966
|
+
/* @__PURE__ */ jsx34("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
|
|
6967
|
+
/* @__PURE__ */ jsxs32(
|
|
6500
6968
|
"button",
|
|
6501
6969
|
{
|
|
6502
6970
|
onClick: handleOpenStudio,
|
|
6503
6971
|
className: "w-full flex items-center justify-center space-x-2 px-4 py-2 bg-[rgb(var(--ec-accent))] text-white text-sm font-medium rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors",
|
|
6504
6972
|
children: [
|
|
6505
|
-
/* @__PURE__ */
|
|
6506
|
-
/* @__PURE__ */
|
|
6973
|
+
/* @__PURE__ */ jsx34(ExternalLinkIcon, { className: "w-4 h-4" }),
|
|
6974
|
+
/* @__PURE__ */ jsx34("span", { children: "Open EventCatalog Studio" })
|
|
6507
6975
|
]
|
|
6508
6976
|
}
|
|
6509
6977
|
),
|
|
6510
|
-
/* @__PURE__ */
|
|
6978
|
+
/* @__PURE__ */ jsx34("p", { className: "text-[12px] text-gray-500 italic mt-4 mb-0", children: "Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser." })
|
|
6511
6979
|
] })
|
|
6512
6980
|
] }),
|
|
6513
|
-
/* @__PURE__ */
|
|
6981
|
+
/* @__PURE__ */ jsx34("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx34(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(
|
|
6514
6982
|
"button",
|
|
6515
6983
|
{
|
|
6516
6984
|
type: "button",
|
|
@@ -6657,7 +7125,7 @@ function getNodeDocUrl(node) {
|
|
|
6657
7125
|
// src/components/FocusMode/FocusModeNodeActions.tsx
|
|
6658
7126
|
import { NodeToolbar, Position as Position18, useViewport } from "@xyflow/react";
|
|
6659
7127
|
import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
|
|
6660
|
-
import { jsx as
|
|
7128
|
+
import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
6661
7129
|
var FocusModeNodeActions = ({
|
|
6662
7130
|
node,
|
|
6663
7131
|
isCenter,
|
|
@@ -6684,26 +7152,26 @@ var FocusModeNodeActions = ({
|
|
|
6684
7152
|
};
|
|
6685
7153
|
if (isCenter) {
|
|
6686
7154
|
if (!docUrl) return null;
|
|
6687
|
-
return /* @__PURE__ */
|
|
7155
|
+
return /* @__PURE__ */ jsx35(
|
|
6688
7156
|
NodeToolbar,
|
|
6689
7157
|
{
|
|
6690
7158
|
nodeId: node.id,
|
|
6691
7159
|
position: Position18.Bottom,
|
|
6692
7160
|
isVisible: true,
|
|
6693
7161
|
offset: -16,
|
|
6694
|
-
children: /* @__PURE__ */
|
|
7162
|
+
children: /* @__PURE__ */ jsx35(
|
|
6695
7163
|
"div",
|
|
6696
7164
|
{
|
|
6697
7165
|
className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
|
|
6698
7166
|
style: { padding: Math.round(4 * scaleFactor) },
|
|
6699
|
-
children: /* @__PURE__ */
|
|
7167
|
+
children: /* @__PURE__ */ jsx35(
|
|
6700
7168
|
"button",
|
|
6701
7169
|
{
|
|
6702
7170
|
onClick: handleDocClick,
|
|
6703
7171
|
className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
|
|
6704
7172
|
style: { width: buttonSize, height: buttonSize },
|
|
6705
7173
|
title: "View documentation",
|
|
6706
|
-
children: /* @__PURE__ */
|
|
7174
|
+
children: /* @__PURE__ */ jsx35(FileText, { style: { width: iconSize, height: iconSize } })
|
|
6707
7175
|
}
|
|
6708
7176
|
)
|
|
6709
7177
|
}
|
|
@@ -6711,37 +7179,37 @@ var FocusModeNodeActions = ({
|
|
|
6711
7179
|
}
|
|
6712
7180
|
);
|
|
6713
7181
|
}
|
|
6714
|
-
return /* @__PURE__ */
|
|
7182
|
+
return /* @__PURE__ */ jsx35(
|
|
6715
7183
|
NodeToolbar,
|
|
6716
7184
|
{
|
|
6717
7185
|
nodeId: node.id,
|
|
6718
7186
|
position: Position18.Bottom,
|
|
6719
7187
|
isVisible: true,
|
|
6720
7188
|
offset: -16,
|
|
6721
|
-
children: /* @__PURE__ */
|
|
7189
|
+
children: /* @__PURE__ */ jsxs33(
|
|
6722
7190
|
"div",
|
|
6723
7191
|
{
|
|
6724
7192
|
className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
|
|
6725
7193
|
style: { padding: Math.round(4 * scaleFactor) },
|
|
6726
7194
|
children: [
|
|
6727
|
-
docUrl && /* @__PURE__ */
|
|
7195
|
+
docUrl && /* @__PURE__ */ jsx35(
|
|
6728
7196
|
"button",
|
|
6729
7197
|
{
|
|
6730
7198
|
onClick: handleDocClick,
|
|
6731
7199
|
className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
|
|
6732
7200
|
style: { width: buttonSize, height: buttonSize },
|
|
6733
7201
|
title: "View documentation",
|
|
6734
|
-
children: /* @__PURE__ */
|
|
7202
|
+
children: /* @__PURE__ */ jsx35(FileText, { style: { width: iconSize, height: iconSize } })
|
|
6735
7203
|
}
|
|
6736
7204
|
),
|
|
6737
|
-
/* @__PURE__ */
|
|
7205
|
+
/* @__PURE__ */ jsx35(
|
|
6738
7206
|
"button",
|
|
6739
7207
|
{
|
|
6740
7208
|
onClick: handleSwitch,
|
|
6741
7209
|
className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
|
|
6742
7210
|
style: { width: buttonSize, height: buttonSize },
|
|
6743
7211
|
title: "Focus on this node",
|
|
6744
|
-
children: /* @__PURE__ */
|
|
7212
|
+
children: /* @__PURE__ */ jsx35(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
|
|
6745
7213
|
}
|
|
6746
7214
|
)
|
|
6747
7215
|
]
|
|
@@ -6754,18 +7222,18 @@ var FocusModeNodeActions_default = FocusModeNodeActions;
|
|
|
6754
7222
|
|
|
6755
7223
|
// src/components/FocusMode/FocusModePlaceholder.tsx
|
|
6756
7224
|
import { Handle as Handle21, Position as Position19 } from "@xyflow/react";
|
|
6757
|
-
import { jsx as
|
|
7225
|
+
import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
6758
7226
|
var FocusModePlaceholder = ({
|
|
6759
7227
|
data
|
|
6760
7228
|
}) => {
|
|
6761
7229
|
const { label, side } = data;
|
|
6762
|
-
return /* @__PURE__ */
|
|
7230
|
+
return /* @__PURE__ */ jsxs34(
|
|
6763
7231
|
"div",
|
|
6764
7232
|
{
|
|
6765
7233
|
className: "px-4 py-4 rounded-lg border-2 border-dashed border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.5)] max-w-[280px] flex items-center justify-center",
|
|
6766
7234
|
style: { opacity: 0.6, minHeight: "130px" },
|
|
6767
7235
|
children: [
|
|
6768
|
-
side === "right" && /* @__PURE__ */
|
|
7236
|
+
side === "right" && /* @__PURE__ */ jsx36(
|
|
6769
7237
|
Handle21,
|
|
6770
7238
|
{
|
|
6771
7239
|
type: "target",
|
|
@@ -6773,8 +7241,8 @@ var FocusModePlaceholder = ({
|
|
|
6773
7241
|
style: { visibility: "hidden" }
|
|
6774
7242
|
}
|
|
6775
7243
|
),
|
|
6776
|
-
/* @__PURE__ */
|
|
6777
|
-
side === "left" && /* @__PURE__ */
|
|
7244
|
+
/* @__PURE__ */ jsx36("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
|
|
7245
|
+
side === "left" && /* @__PURE__ */ jsx36(
|
|
6778
7246
|
Handle21,
|
|
6779
7247
|
{
|
|
6780
7248
|
type: "source",
|
|
@@ -6789,7 +7257,7 @@ var FocusModePlaceholder = ({
|
|
|
6789
7257
|
var FocusModePlaceholder_default = FocusModePlaceholder;
|
|
6790
7258
|
|
|
6791
7259
|
// src/components/FocusMode/FocusModeContent.tsx
|
|
6792
|
-
import { jsx as
|
|
7260
|
+
import { jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
6793
7261
|
var HORIZONTAL_SPACING = 450;
|
|
6794
7262
|
var VERTICAL_SPACING = 200;
|
|
6795
7263
|
var SLIDE_DURATION = 300;
|
|
@@ -6998,14 +7466,14 @@ var FocusModeContent = ({
|
|
|
6998
7466
|
[nodeTypes]
|
|
6999
7467
|
);
|
|
7000
7468
|
if (displayNodes.length === 0) {
|
|
7001
|
-
return /* @__PURE__ */
|
|
7469
|
+
return /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
|
|
7002
7470
|
}
|
|
7003
|
-
return /* @__PURE__ */
|
|
7471
|
+
return /* @__PURE__ */ jsx37(
|
|
7004
7472
|
"div",
|
|
7005
7473
|
{
|
|
7006
7474
|
className: "h-full w-full focus-mode-container",
|
|
7007
7475
|
style: { opacity: isReady ? 1 : 0 },
|
|
7008
|
-
children: /* @__PURE__ */
|
|
7476
|
+
children: /* @__PURE__ */ jsxs35(
|
|
7009
7477
|
ReactFlow,
|
|
7010
7478
|
{
|
|
7011
7479
|
nodes: displayNodes,
|
|
@@ -7025,9 +7493,9 @@ var FocusModeContent = ({
|
|
|
7025
7493
|
minZoom: 0.3,
|
|
7026
7494
|
maxZoom: 2,
|
|
7027
7495
|
children: [
|
|
7028
|
-
/* @__PURE__ */
|
|
7029
|
-
/* @__PURE__ */
|
|
7030
|
-
displayNodes.map((node, index) => /* @__PURE__ */
|
|
7496
|
+
/* @__PURE__ */ jsx37(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
|
|
7497
|
+
/* @__PURE__ */ jsx37(Controls, { showInteractive: false }),
|
|
7498
|
+
displayNodes.map((node, index) => /* @__PURE__ */ jsx37(
|
|
7031
7499
|
FocusModeNodeActions_default,
|
|
7032
7500
|
{
|
|
7033
7501
|
node,
|
|
@@ -7045,7 +7513,7 @@ var FocusModeContent = ({
|
|
|
7045
7513
|
var FocusModeContent_default = FocusModeContent;
|
|
7046
7514
|
|
|
7047
7515
|
// src/components/FocusModeModal.tsx
|
|
7048
|
-
import { jsx as
|
|
7516
|
+
import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
7049
7517
|
var FocusModeModal = ({
|
|
7050
7518
|
isOpen,
|
|
7051
7519
|
onClose,
|
|
@@ -7076,7 +7544,7 @@ var FocusModeModal = ({
|
|
|
7076
7544
|
if (!centerNodeId) {
|
|
7077
7545
|
return null;
|
|
7078
7546
|
}
|
|
7079
|
-
return /* @__PURE__ */
|
|
7547
|
+
return /* @__PURE__ */ jsx38(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx38(Dialog3.Portal, { children: /* @__PURE__ */ jsxs36(
|
|
7080
7548
|
"div",
|
|
7081
7549
|
{
|
|
7082
7550
|
className: "eventcatalog-visualizer",
|
|
@@ -7087,7 +7555,7 @@ var FocusModeModal = ({
|
|
|
7087
7555
|
zIndex: 99999
|
|
7088
7556
|
},
|
|
7089
7557
|
children: [
|
|
7090
|
-
/* @__PURE__ */
|
|
7558
|
+
/* @__PURE__ */ jsx38(
|
|
7091
7559
|
Dialog3.Overlay,
|
|
7092
7560
|
{
|
|
7093
7561
|
style: {
|
|
@@ -7098,7 +7566,7 @@ var FocusModeModal = ({
|
|
|
7098
7566
|
}
|
|
7099
7567
|
}
|
|
7100
7568
|
),
|
|
7101
|
-
/* @__PURE__ */
|
|
7569
|
+
/* @__PURE__ */ jsxs36(
|
|
7102
7570
|
Dialog3.Content,
|
|
7103
7571
|
{
|
|
7104
7572
|
style: {
|
|
@@ -7114,7 +7582,7 @@ var FocusModeModal = ({
|
|
|
7114
7582
|
overflow: "hidden"
|
|
7115
7583
|
},
|
|
7116
7584
|
children: [
|
|
7117
|
-
/* @__PURE__ */
|
|
7585
|
+
/* @__PURE__ */ jsxs36(
|
|
7118
7586
|
"div",
|
|
7119
7587
|
{
|
|
7120
7588
|
style: {
|
|
@@ -7126,8 +7594,8 @@ var FocusModeModal = ({
|
|
|
7126
7594
|
flexShrink: 0
|
|
7127
7595
|
},
|
|
7128
7596
|
children: [
|
|
7129
|
-
/* @__PURE__ */
|
|
7130
|
-
/* @__PURE__ */
|
|
7597
|
+
/* @__PURE__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
7598
|
+
/* @__PURE__ */ jsx38(
|
|
7131
7599
|
"div",
|
|
7132
7600
|
{
|
|
7133
7601
|
style: {
|
|
@@ -7139,7 +7607,7 @@ var FocusModeModal = ({
|
|
|
7139
7607
|
borderRadius: 10,
|
|
7140
7608
|
background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
|
|
7141
7609
|
},
|
|
7142
|
-
children: /* @__PURE__ */
|
|
7610
|
+
children: /* @__PURE__ */ jsx38(
|
|
7143
7611
|
FocusIcon,
|
|
7144
7612
|
{
|
|
7145
7613
|
style: {
|
|
@@ -7151,8 +7619,8 @@ var FocusModeModal = ({
|
|
|
7151
7619
|
)
|
|
7152
7620
|
}
|
|
7153
7621
|
),
|
|
7154
|
-
/* @__PURE__ */
|
|
7155
|
-
/* @__PURE__ */
|
|
7622
|
+
/* @__PURE__ */ jsxs36("div", { children: [
|
|
7623
|
+
/* @__PURE__ */ jsx38(
|
|
7156
7624
|
Dialog3.Title,
|
|
7157
7625
|
{
|
|
7158
7626
|
style: {
|
|
@@ -7163,7 +7631,7 @@ var FocusModeModal = ({
|
|
|
7163
7631
|
children: "Focus Mode"
|
|
7164
7632
|
}
|
|
7165
7633
|
),
|
|
7166
|
-
/* @__PURE__ */
|
|
7634
|
+
/* @__PURE__ */ jsx38(
|
|
7167
7635
|
Dialog3.Description,
|
|
7168
7636
|
{
|
|
7169
7637
|
style: {
|
|
@@ -7176,7 +7644,7 @@ var FocusModeModal = ({
|
|
|
7176
7644
|
)
|
|
7177
7645
|
] })
|
|
7178
7646
|
] }),
|
|
7179
|
-
/* @__PURE__ */
|
|
7647
|
+
/* @__PURE__ */ jsx38(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx38(
|
|
7180
7648
|
"button",
|
|
7181
7649
|
{
|
|
7182
7650
|
style: {
|
|
@@ -7192,13 +7660,13 @@ var FocusModeModal = ({
|
|
|
7192
7660
|
color: isDark ? "#94a3b8" : "#64748b"
|
|
7193
7661
|
},
|
|
7194
7662
|
"aria-label": "Close",
|
|
7195
|
-
children: /* @__PURE__ */
|
|
7663
|
+
children: /* @__PURE__ */ jsx38(XIcon2, { style: { width: 20, height: 20 } })
|
|
7196
7664
|
}
|
|
7197
7665
|
) })
|
|
7198
7666
|
]
|
|
7199
7667
|
}
|
|
7200
7668
|
),
|
|
7201
|
-
/* @__PURE__ */
|
|
7669
|
+
/* @__PURE__ */ jsx38("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx38(ReactFlowProvider, { children: /* @__PURE__ */ jsx38(
|
|
7202
7670
|
FocusModeContent_default,
|
|
7203
7671
|
{
|
|
7204
7672
|
centerNodeId,
|
|
@@ -7484,7 +7952,7 @@ async function copyToClipboard(text) {
|
|
|
7484
7952
|
}
|
|
7485
7953
|
|
|
7486
7954
|
// src/components/MermaidView.tsx
|
|
7487
|
-
import { jsx as
|
|
7955
|
+
import { jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
7488
7956
|
var MermaidView = ({
|
|
7489
7957
|
nodes,
|
|
7490
7958
|
edges,
|
|
@@ -7594,51 +8062,51 @@ var MermaidView = ({
|
|
|
7594
8062
|
setCopySuccess(true);
|
|
7595
8063
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
7596
8064
|
}, [mermaidCode]);
|
|
7597
|
-
return /* @__PURE__ */
|
|
8065
|
+
return /* @__PURE__ */ jsxs37(
|
|
7598
8066
|
"div",
|
|
7599
8067
|
{
|
|
7600
8068
|
ref: containerRef,
|
|
7601
8069
|
className: "absolute inset-0 bg-[rgb(var(--ec-page-bg))]",
|
|
7602
8070
|
style: { animation: "fadeIn 200ms ease-out" },
|
|
7603
8071
|
children: [
|
|
7604
|
-
/* @__PURE__ */
|
|
8072
|
+
/* @__PURE__ */ jsx39("style", { children: `
|
|
7605
8073
|
@keyframes fadeIn {
|
|
7606
8074
|
from { opacity: 0; }
|
|
7607
8075
|
to { opacity: 1; }
|
|
7608
8076
|
}
|
|
7609
8077
|
` }),
|
|
7610
|
-
/* @__PURE__ */
|
|
7611
|
-
/* @__PURE__ */
|
|
8078
|
+
/* @__PURE__ */ jsx39("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs37("div", { className: "relative group", children: [
|
|
8079
|
+
/* @__PURE__ */ jsx39(
|
|
7612
8080
|
"button",
|
|
7613
8081
|
{
|
|
7614
8082
|
onClick: handleCopyToClipboard,
|
|
7615
8083
|
className: `p-2.5 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] transition-all duration-150 ${copySuccess ? "bg-green-500 text-white scale-110" : "bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-page-border))/0.5] text-[rgb(var(--ec-icon-color))] hover:scale-105"}`,
|
|
7616
8084
|
"aria-label": copySuccess ? "Copied!" : "Copy Mermaid code",
|
|
7617
|
-
children: copySuccess ? /* @__PURE__ */
|
|
8085
|
+
children: copySuccess ? /* @__PURE__ */ jsx39(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx39(ClipboardIcon2, { className: "h-5 w-5" })
|
|
7618
8086
|
}
|
|
7619
8087
|
),
|
|
7620
|
-
/* @__PURE__ */
|
|
8088
|
+
/* @__PURE__ */ jsx39("div", { className: "absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50", children: copySuccess ? "Copied!" : "Copy Mermaid code" })
|
|
7621
8089
|
] }) }),
|
|
7622
|
-
/* @__PURE__ */
|
|
7623
|
-
isRendering && /* @__PURE__ */
|
|
7624
|
-
/* @__PURE__ */
|
|
7625
|
-
/* @__PURE__ */
|
|
7626
|
-
/* @__PURE__ */
|
|
7627
|
-
/* @__PURE__ */
|
|
8090
|
+
/* @__PURE__ */ jsxs37("div", { className: "absolute inset-0 overflow-hidden", children: [
|
|
8091
|
+
isRendering && /* @__PURE__ */ jsx39("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
|
|
8092
|
+
/* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-4 opacity-40", children: [
|
|
8093
|
+
/* @__PURE__ */ jsx39("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
|
|
8094
|
+
/* @__PURE__ */ jsx39("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
|
|
8095
|
+
/* @__PURE__ */ jsx39(
|
|
7628
8096
|
"div",
|
|
7629
8097
|
{
|
|
7630
8098
|
className: "w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse",
|
|
7631
8099
|
style: { animationDelay: "75ms" }
|
|
7632
8100
|
}
|
|
7633
8101
|
),
|
|
7634
|
-
/* @__PURE__ */
|
|
8102
|
+
/* @__PURE__ */ jsx39(
|
|
7635
8103
|
"div",
|
|
7636
8104
|
{
|
|
7637
8105
|
className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse",
|
|
7638
8106
|
style: { animationDelay: "150ms" }
|
|
7639
8107
|
}
|
|
7640
8108
|
),
|
|
7641
|
-
/* @__PURE__ */
|
|
8109
|
+
/* @__PURE__ */ jsx39(
|
|
7642
8110
|
"div",
|
|
7643
8111
|
{
|
|
7644
8112
|
className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse",
|
|
@@ -7646,14 +8114,14 @@ var MermaidView = ({
|
|
|
7646
8114
|
}
|
|
7647
8115
|
)
|
|
7648
8116
|
] }),
|
|
7649
|
-
/* @__PURE__ */
|
|
8117
|
+
/* @__PURE__ */ jsx39("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
|
|
7650
8118
|
] }) }),
|
|
7651
|
-
previewError && !isRendering && /* @__PURE__ */
|
|
7652
|
-
/* @__PURE__ */
|
|
7653
|
-
/* @__PURE__ */
|
|
7654
|
-
/* @__PURE__ */
|
|
7655
|
-
/* @__PURE__ */
|
|
7656
|
-
/* @__PURE__ */
|
|
8119
|
+
previewError && !isRendering && /* @__PURE__ */ jsxs37("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
|
|
8120
|
+
/* @__PURE__ */ jsx39("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
|
|
8121
|
+
/* @__PURE__ */ jsx39("div", { className: "text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto", children: previewError }),
|
|
8122
|
+
/* @__PURE__ */ jsxs37("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
|
|
8123
|
+
/* @__PURE__ */ jsx39("p", { children: "You can still copy the Mermaid code and paste it into" }),
|
|
8124
|
+
/* @__PURE__ */ jsx39(
|
|
7657
8125
|
"a",
|
|
7658
8126
|
{
|
|
7659
8127
|
href: "https://mermaid.live",
|
|
@@ -7665,7 +8133,7 @@ var MermaidView = ({
|
|
|
7665
8133
|
)
|
|
7666
8134
|
] })
|
|
7667
8135
|
] }),
|
|
7668
|
-
previewSvg && !isRendering && !previewError && /* @__PURE__ */
|
|
8136
|
+
previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx39(
|
|
7669
8137
|
"div",
|
|
7670
8138
|
{
|
|
7671
8139
|
ref: svgContainerRef,
|
|
@@ -7674,15 +8142,15 @@ var MermaidView = ({
|
|
|
7674
8142
|
}
|
|
7675
8143
|
)
|
|
7676
8144
|
] }),
|
|
7677
|
-
/* @__PURE__ */
|
|
7678
|
-
/* @__PURE__ */
|
|
8145
|
+
/* @__PURE__ */ jsx39("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]", children: [
|
|
8146
|
+
/* @__PURE__ */ jsx39(
|
|
7679
8147
|
"svg",
|
|
7680
8148
|
{
|
|
7681
8149
|
className: "w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]",
|
|
7682
8150
|
fill: "none",
|
|
7683
8151
|
viewBox: "0 0 24 24",
|
|
7684
8152
|
stroke: "currentColor",
|
|
7685
|
-
children: /* @__PURE__ */
|
|
8153
|
+
children: /* @__PURE__ */ jsx39(
|
|
7686
8154
|
"path",
|
|
7687
8155
|
{
|
|
7688
8156
|
strokeLinecap: "round",
|
|
@@ -7693,7 +8161,7 @@ var MermaidView = ({
|
|
|
7693
8161
|
)
|
|
7694
8162
|
}
|
|
7695
8163
|
),
|
|
7696
|
-
/* @__PURE__ */
|
|
8164
|
+
/* @__PURE__ */ jsx39("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
|
|
7697
8165
|
] }) })
|
|
7698
8166
|
]
|
|
7699
8167
|
}
|
|
@@ -7918,17 +8386,17 @@ var useChannelVisibility = ({
|
|
|
7918
8386
|
};
|
|
7919
8387
|
|
|
7920
8388
|
// src/components/VisualizerDropdownContent.tsx
|
|
7921
|
-
import { useState as useState12, memo as
|
|
8389
|
+
import { useState as useState12, memo as memo33 } from "react";
|
|
7922
8390
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
7923
8391
|
import {
|
|
7924
8392
|
Code,
|
|
7925
8393
|
Share2,
|
|
7926
8394
|
Search as Search2,
|
|
7927
8395
|
Grid3x3,
|
|
7928
|
-
Maximize2 as
|
|
8396
|
+
Maximize2 as Maximize23,
|
|
7929
8397
|
Map as Map2,
|
|
7930
8398
|
Sparkles,
|
|
7931
|
-
Zap as
|
|
8399
|
+
Zap as Zap5,
|
|
7932
8400
|
EyeOff,
|
|
7933
8401
|
ExternalLink,
|
|
7934
8402
|
Save,
|
|
@@ -7940,8 +8408,8 @@ import {
|
|
|
7940
8408
|
DocumentArrowDownIcon,
|
|
7941
8409
|
PresentationChartLineIcon
|
|
7942
8410
|
} from "@heroicons/react/24/outline";
|
|
7943
|
-
import { Fragment as
|
|
7944
|
-
var VisualizerDropdownContent =
|
|
8411
|
+
import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
8412
|
+
var VisualizerDropdownContent = memo33(
|
|
7945
8413
|
({
|
|
7946
8414
|
isMermaidView,
|
|
7947
8415
|
setIsMermaidView,
|
|
@@ -7990,19 +8458,19 @@ var VisualizerDropdownContent = memo32(
|
|
|
7990
8458
|
setLayoutStatus("idle");
|
|
7991
8459
|
}
|
|
7992
8460
|
};
|
|
7993
|
-
return /* @__PURE__ */
|
|
7994
|
-
/* @__PURE__ */
|
|
7995
|
-
/* @__PURE__ */
|
|
7996
|
-
/* @__PURE__ */
|
|
7997
|
-
/* @__PURE__ */
|
|
7998
|
-
/* @__PURE__ */
|
|
8461
|
+
return /* @__PURE__ */ jsxs38(Fragment9, { children: [
|
|
8462
|
+
/* @__PURE__ */ jsxs38(DropdownMenu.Sub, { children: [
|
|
8463
|
+
/* @__PURE__ */ jsxs38(DropdownMenu.SubTrigger, { className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none", children: [
|
|
8464
|
+
/* @__PURE__ */ jsx40(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8465
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Canvas" }),
|
|
8466
|
+
/* @__PURE__ */ jsx40(
|
|
7999
8467
|
"svg",
|
|
8000
8468
|
{
|
|
8001
8469
|
className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
|
|
8002
8470
|
fill: "none",
|
|
8003
8471
|
viewBox: "0 0 24 24",
|
|
8004
8472
|
stroke: "currentColor",
|
|
8005
|
-
children: /* @__PURE__ */
|
|
8473
|
+
children: /* @__PURE__ */ jsx40(
|
|
8006
8474
|
"path",
|
|
8007
8475
|
{
|
|
8008
8476
|
strokeLinecap: "round",
|
|
@@ -8014,27 +8482,27 @@ var VisualizerDropdownContent = memo32(
|
|
|
8014
8482
|
}
|
|
8015
8483
|
)
|
|
8016
8484
|
] }),
|
|
8017
|
-
/* @__PURE__ */
|
|
8485
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs38(
|
|
8018
8486
|
DropdownMenu.SubContent,
|
|
8019
8487
|
{
|
|
8020
8488
|
className: "min-w-[200px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
|
|
8021
8489
|
sideOffset: 8,
|
|
8022
8490
|
alignOffset: -8,
|
|
8023
8491
|
children: [
|
|
8024
|
-
/* @__PURE__ */
|
|
8492
|
+
/* @__PURE__ */ jsxs38(
|
|
8025
8493
|
DropdownMenu.CheckboxItem,
|
|
8026
8494
|
{
|
|
8027
8495
|
checked: isMermaidView,
|
|
8028
8496
|
onCheckedChange: setIsMermaidView,
|
|
8029
8497
|
className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2",
|
|
8030
8498
|
children: [
|
|
8031
|
-
/* @__PURE__ */
|
|
8032
|
-
/* @__PURE__ */
|
|
8033
|
-
/* @__PURE__ */
|
|
8499
|
+
/* @__PURE__ */ jsx40(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8500
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
|
|
8501
|
+
/* @__PURE__ */ jsx40(
|
|
8034
8502
|
"div",
|
|
8035
8503
|
{
|
|
8036
8504
|
className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${isMermaidView ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
|
|
8037
|
-
children: /* @__PURE__ */
|
|
8505
|
+
children: /* @__PURE__ */ jsx40(
|
|
8038
8506
|
"div",
|
|
8039
8507
|
{
|
|
8040
8508
|
className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${isMermaidView ? "left-3.5" : "left-0.5"}`
|
|
@@ -8045,21 +8513,21 @@ var VisualizerDropdownContent = memo32(
|
|
|
8045
8513
|
]
|
|
8046
8514
|
}
|
|
8047
8515
|
),
|
|
8048
|
-
/* @__PURE__ */
|
|
8049
|
-
/* @__PURE__ */
|
|
8516
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8517
|
+
/* @__PURE__ */ jsxs38(
|
|
8050
8518
|
DropdownMenu.CheckboxItem,
|
|
8051
8519
|
{
|
|
8052
8520
|
checked: animateMessages,
|
|
8053
8521
|
onCheckedChange: toggleAnimateMessages,
|
|
8054
8522
|
className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2",
|
|
8055
8523
|
children: [
|
|
8056
|
-
/* @__PURE__ */
|
|
8057
|
-
/* @__PURE__ */
|
|
8058
|
-
/* @__PURE__ */
|
|
8524
|
+
/* @__PURE__ */ jsx40(Zap5, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8525
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
|
|
8526
|
+
/* @__PURE__ */ jsx40(
|
|
8059
8527
|
"div",
|
|
8060
8528
|
{
|
|
8061
8529
|
className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
|
|
8062
|
-
children: /* @__PURE__ */
|
|
8530
|
+
children: /* @__PURE__ */ jsx40(
|
|
8063
8531
|
"div",
|
|
8064
8532
|
{
|
|
8065
8533
|
className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? "left-3.5" : "left-0.5"}`
|
|
@@ -8070,20 +8538,20 @@ var VisualizerDropdownContent = memo32(
|
|
|
8070
8538
|
]
|
|
8071
8539
|
}
|
|
8072
8540
|
),
|
|
8073
|
-
hasChannels && /* @__PURE__ */
|
|
8541
|
+
hasChannels && /* @__PURE__ */ jsxs38(
|
|
8074
8542
|
DropdownMenu.CheckboxItem,
|
|
8075
8543
|
{
|
|
8076
8544
|
checked: hideChannels,
|
|
8077
8545
|
onCheckedChange: toggleChannelsVisibility,
|
|
8078
8546
|
className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2",
|
|
8079
8547
|
children: [
|
|
8080
|
-
/* @__PURE__ */
|
|
8081
|
-
/* @__PURE__ */
|
|
8082
|
-
/* @__PURE__ */
|
|
8548
|
+
/* @__PURE__ */ jsx40(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8549
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Hide channels" }),
|
|
8550
|
+
/* @__PURE__ */ jsx40(
|
|
8083
8551
|
"div",
|
|
8084
8552
|
{
|
|
8085
8553
|
className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${hideChannels ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
|
|
8086
|
-
children: /* @__PURE__ */
|
|
8554
|
+
children: /* @__PURE__ */ jsx40(
|
|
8087
8555
|
"div",
|
|
8088
8556
|
{
|
|
8089
8557
|
className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${hideChannels ? "left-3.5" : "left-0.5"}`
|
|
@@ -8094,20 +8562,20 @@ var VisualizerDropdownContent = memo32(
|
|
|
8094
8562
|
]
|
|
8095
8563
|
}
|
|
8096
8564
|
),
|
|
8097
|
-
/* @__PURE__ */
|
|
8565
|
+
/* @__PURE__ */ jsxs38(
|
|
8098
8566
|
DropdownMenu.CheckboxItem,
|
|
8099
8567
|
{
|
|
8100
8568
|
checked: showMinimap,
|
|
8101
8569
|
onCheckedChange: setShowMinimap,
|
|
8102
8570
|
className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2",
|
|
8103
8571
|
children: [
|
|
8104
|
-
/* @__PURE__ */
|
|
8105
|
-
/* @__PURE__ */
|
|
8106
|
-
/* @__PURE__ */
|
|
8572
|
+
/* @__PURE__ */ jsx40(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8573
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Show minimap" }),
|
|
8574
|
+
/* @__PURE__ */ jsx40(
|
|
8107
8575
|
"div",
|
|
8108
8576
|
{
|
|
8109
8577
|
className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${showMinimap ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
|
|
8110
|
-
children: /* @__PURE__ */
|
|
8578
|
+
children: /* @__PURE__ */ jsx40(
|
|
8111
8579
|
"div",
|
|
8112
8580
|
{
|
|
8113
8581
|
className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${showMinimap ? "left-3.5" : "left-0.5"}`
|
|
@@ -8118,19 +8586,19 @@ var VisualizerDropdownContent = memo32(
|
|
|
8118
8586
|
]
|
|
8119
8587
|
}
|
|
8120
8588
|
),
|
|
8121
|
-
/* @__PURE__ */
|
|
8122
|
-
/* @__PURE__ */
|
|
8589
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8590
|
+
/* @__PURE__ */ jsxs38(
|
|
8123
8591
|
DropdownMenu.Item,
|
|
8124
8592
|
{
|
|
8125
8593
|
onClick: handleFitView,
|
|
8126
8594
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8127
8595
|
children: [
|
|
8128
|
-
/* @__PURE__ */
|
|
8129
|
-
/* @__PURE__ */
|
|
8596
|
+
/* @__PURE__ */ jsx40(Maximize23, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8597
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Fit to view" })
|
|
8130
8598
|
]
|
|
8131
8599
|
}
|
|
8132
8600
|
),
|
|
8133
|
-
/* @__PURE__ */
|
|
8601
|
+
/* @__PURE__ */ jsxs38(
|
|
8134
8602
|
DropdownMenu.Item,
|
|
8135
8603
|
{
|
|
8136
8604
|
onClick: () => {
|
|
@@ -8144,8 +8612,8 @@ var VisualizerDropdownContent = memo32(
|
|
|
8144
8612
|
},
|
|
8145
8613
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8146
8614
|
children: [
|
|
8147
|
-
/* @__PURE__ */
|
|
8148
|
-
/* @__PURE__ */
|
|
8615
|
+
/* @__PURE__ */ jsx40(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8616
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Find on canvas" })
|
|
8149
8617
|
]
|
|
8150
8618
|
}
|
|
8151
8619
|
)
|
|
@@ -8153,14 +8621,14 @@ var VisualizerDropdownContent = memo32(
|
|
|
8153
8621
|
}
|
|
8154
8622
|
) })
|
|
8155
8623
|
] }),
|
|
8156
|
-
notesCount > 0 && onOpenNotes && /* @__PURE__ */
|
|
8624
|
+
notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs38(
|
|
8157
8625
|
DropdownMenu.Item,
|
|
8158
8626
|
{
|
|
8159
8627
|
onClick: onOpenNotes,
|
|
8160
8628
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8161
8629
|
children: [
|
|
8162
|
-
/* @__PURE__ */
|
|
8163
|
-
/* @__PURE__ */
|
|
8630
|
+
/* @__PURE__ */ jsx40(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8631
|
+
/* @__PURE__ */ jsxs38("span", { className: "flex-1 font-normal", children: [
|
|
8164
8632
|
"View notes (",
|
|
8165
8633
|
notesCount,
|
|
8166
8634
|
")"
|
|
@@ -8168,19 +8636,19 @@ var VisualizerDropdownContent = memo32(
|
|
|
8168
8636
|
]
|
|
8169
8637
|
}
|
|
8170
8638
|
),
|
|
8171
|
-
isDevMode && onSaveLayout && /* @__PURE__ */
|
|
8172
|
-
/* @__PURE__ */
|
|
8173
|
-
/* @__PURE__ */
|
|
8174
|
-
/* @__PURE__ */
|
|
8175
|
-
/* @__PURE__ */
|
|
8176
|
-
/* @__PURE__ */
|
|
8639
|
+
isDevMode && onSaveLayout && /* @__PURE__ */ jsxs38(DropdownMenu.Sub, { children: [
|
|
8640
|
+
/* @__PURE__ */ jsxs38(DropdownMenu.SubTrigger, { className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none", children: [
|
|
8641
|
+
/* @__PURE__ */ jsx40(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8642
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Layout" }),
|
|
8643
|
+
/* @__PURE__ */ jsx40("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
|
|
8644
|
+
/* @__PURE__ */ jsx40(
|
|
8177
8645
|
"svg",
|
|
8178
8646
|
{
|
|
8179
8647
|
className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
|
|
8180
8648
|
fill: "none",
|
|
8181
8649
|
viewBox: "0 0 24 24",
|
|
8182
8650
|
stroke: "currentColor",
|
|
8183
|
-
children: /* @__PURE__ */
|
|
8651
|
+
children: /* @__PURE__ */ jsx40(
|
|
8184
8652
|
"path",
|
|
8185
8653
|
{
|
|
8186
8654
|
strokeLinecap: "round",
|
|
@@ -8192,34 +8660,34 @@ var VisualizerDropdownContent = memo32(
|
|
|
8192
8660
|
}
|
|
8193
8661
|
)
|
|
8194
8662
|
] }),
|
|
8195
|
-
/* @__PURE__ */
|
|
8663
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs38(
|
|
8196
8664
|
DropdownMenu.SubContent,
|
|
8197
8665
|
{
|
|
8198
8666
|
className: "min-w-[180px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
|
|
8199
8667
|
sideOffset: 8,
|
|
8200
8668
|
alignOffset: -8,
|
|
8201
8669
|
children: [
|
|
8202
|
-
/* @__PURE__ */
|
|
8670
|
+
/* @__PURE__ */ jsxs38(
|
|
8203
8671
|
DropdownMenu.Item,
|
|
8204
8672
|
{
|
|
8205
8673
|
onClick: handleSaveLayout,
|
|
8206
8674
|
disabled: layoutStatus !== "idle",
|
|
8207
8675
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
|
|
8208
8676
|
children: [
|
|
8209
|
-
layoutStatus === "saving" ? /* @__PURE__ */
|
|
8210
|
-
/* @__PURE__ */
|
|
8677
|
+
layoutStatus === "saving" ? /* @__PURE__ */ jsx40(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx40(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8678
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
|
|
8211
8679
|
]
|
|
8212
8680
|
}
|
|
8213
8681
|
),
|
|
8214
|
-
/* @__PURE__ */
|
|
8682
|
+
/* @__PURE__ */ jsxs38(
|
|
8215
8683
|
DropdownMenu.Item,
|
|
8216
8684
|
{
|
|
8217
8685
|
onClick: handleResetLayout,
|
|
8218
8686
|
disabled: layoutStatus !== "idle",
|
|
8219
8687
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
|
|
8220
8688
|
children: [
|
|
8221
|
-
layoutStatus === "resetting" ? /* @__PURE__ */
|
|
8222
|
-
/* @__PURE__ */
|
|
8689
|
+
layoutStatus === "resetting" ? /* @__PURE__ */ jsx40(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx40(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8690
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
|
|
8223
8691
|
]
|
|
8224
8692
|
}
|
|
8225
8693
|
)
|
|
@@ -8227,75 +8695,75 @@ var VisualizerDropdownContent = memo32(
|
|
|
8227
8695
|
}
|
|
8228
8696
|
) })
|
|
8229
8697
|
] }),
|
|
8230
|
-
isChatEnabled && /* @__PURE__ */
|
|
8231
|
-
/* @__PURE__ */
|
|
8232
|
-
/* @__PURE__ */
|
|
8698
|
+
isChatEnabled && /* @__PURE__ */ jsxs38(Fragment9, { children: [
|
|
8699
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8700
|
+
/* @__PURE__ */ jsxs38(
|
|
8233
8701
|
DropdownMenu.Item,
|
|
8234
8702
|
{
|
|
8235
8703
|
onClick: openChat,
|
|
8236
8704
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8237
8705
|
children: [
|
|
8238
|
-
/* @__PURE__ */
|
|
8239
|
-
/* @__PURE__ */
|
|
8706
|
+
/* @__PURE__ */ jsx40(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8707
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Ask a question" })
|
|
8240
8708
|
]
|
|
8241
8709
|
}
|
|
8242
8710
|
)
|
|
8243
8711
|
] }),
|
|
8244
|
-
/* @__PURE__ */
|
|
8245
|
-
/* @__PURE__ */
|
|
8712
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8713
|
+
/* @__PURE__ */ jsxs38(
|
|
8246
8714
|
DropdownMenu.Item,
|
|
8247
8715
|
{
|
|
8248
8716
|
onClick: handleCopyArchitectureCode,
|
|
8249
8717
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8250
8718
|
children: [
|
|
8251
|
-
/* @__PURE__ */
|
|
8252
|
-
/* @__PURE__ */
|
|
8719
|
+
/* @__PURE__ */ jsx40(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8720
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
|
|
8253
8721
|
]
|
|
8254
8722
|
}
|
|
8255
8723
|
),
|
|
8256
|
-
/* @__PURE__ */
|
|
8724
|
+
/* @__PURE__ */ jsxs38(
|
|
8257
8725
|
DropdownMenu.Item,
|
|
8258
8726
|
{
|
|
8259
8727
|
onClick: handleExportVisual,
|
|
8260
8728
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8261
8729
|
children: [
|
|
8262
|
-
/* @__PURE__ */
|
|
8263
|
-
/* @__PURE__ */
|
|
8730
|
+
/* @__PURE__ */ jsx40(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8731
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Export image" })
|
|
8264
8732
|
]
|
|
8265
8733
|
}
|
|
8266
8734
|
),
|
|
8267
|
-
/* @__PURE__ */
|
|
8735
|
+
/* @__PURE__ */ jsxs38(
|
|
8268
8736
|
DropdownMenu.Item,
|
|
8269
8737
|
{
|
|
8270
8738
|
onClick: () => setIsShareModalOpen(true),
|
|
8271
8739
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8272
8740
|
children: [
|
|
8273
|
-
/* @__PURE__ */
|
|
8274
|
-
/* @__PURE__ */
|
|
8741
|
+
/* @__PURE__ */ jsx40(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8742
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Share Link" })
|
|
8275
8743
|
]
|
|
8276
8744
|
}
|
|
8277
8745
|
),
|
|
8278
|
-
/* @__PURE__ */
|
|
8279
|
-
/* @__PURE__ */
|
|
8746
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8747
|
+
/* @__PURE__ */ jsxs38(
|
|
8280
8748
|
DropdownMenu.Item,
|
|
8281
8749
|
{
|
|
8282
8750
|
onClick: toggleFullScreen,
|
|
8283
8751
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8284
8752
|
children: [
|
|
8285
|
-
/* @__PURE__ */
|
|
8286
|
-
/* @__PURE__ */
|
|
8753
|
+
/* @__PURE__ */ jsx40(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8754
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Start Presentation" })
|
|
8287
8755
|
]
|
|
8288
8756
|
}
|
|
8289
8757
|
),
|
|
8290
|
-
/* @__PURE__ */
|
|
8291
|
-
/* @__PURE__ */
|
|
8758
|
+
/* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
8759
|
+
/* @__PURE__ */ jsxs38(
|
|
8292
8760
|
DropdownMenu.Item,
|
|
8293
8761
|
{
|
|
8294
8762
|
onClick: openStudioModal,
|
|
8295
8763
|
className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
|
|
8296
8764
|
children: [
|
|
8297
|
-
/* @__PURE__ */
|
|
8298
|
-
/* @__PURE__ */
|
|
8765
|
+
/* @__PURE__ */ jsx40(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
8766
|
+
/* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
|
|
8299
8767
|
]
|
|
8300
8768
|
}
|
|
8301
8769
|
)
|
|
@@ -8306,30 +8774,30 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
|
|
|
8306
8774
|
var VisualizerDropdownContent_default = VisualizerDropdownContent;
|
|
8307
8775
|
|
|
8308
8776
|
// src/components/NodeContextMenu.tsx
|
|
8309
|
-
import { memo as
|
|
8777
|
+
import { memo as memo34 } from "react";
|
|
8310
8778
|
import * as ContextMenu5 from "@radix-ui/react-context-menu";
|
|
8311
|
-
import { Fragment as
|
|
8312
|
-
var NodeContextMenu_default =
|
|
8779
|
+
import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
8780
|
+
var NodeContextMenu_default = memo34(function NodeContextMenu({
|
|
8313
8781
|
items,
|
|
8314
8782
|
children
|
|
8315
8783
|
}) {
|
|
8316
8784
|
const portalContainer = usePortalContainer();
|
|
8317
|
-
if (!items || items.length === 0) return /* @__PURE__ */
|
|
8318
|
-
return /* @__PURE__ */
|
|
8319
|
-
/* @__PURE__ */
|
|
8320
|
-
/* @__PURE__ */
|
|
8785
|
+
if (!items || items.length === 0) return /* @__PURE__ */ jsx41(Fragment10, { children });
|
|
8786
|
+
return /* @__PURE__ */ jsxs39(ContextMenu5.Root, { children: [
|
|
8787
|
+
/* @__PURE__ */ jsx41(ContextMenu5.Trigger, { children }),
|
|
8788
|
+
/* @__PURE__ */ jsx41(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx41(
|
|
8321
8789
|
ContextMenu5.Content,
|
|
8322
8790
|
{
|
|
8323
8791
|
className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
|
|
8324
8792
|
onClick: (e) => e.stopPropagation(),
|
|
8325
|
-
children: items.map((item, index) => /* @__PURE__ */
|
|
8326
|
-
item.separator && index > 0 && /* @__PURE__ */
|
|
8327
|
-
/* @__PURE__ */
|
|
8793
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxs39("div", { children: [
|
|
8794
|
+
item.separator && index > 0 && /* @__PURE__ */ jsx41(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
|
|
8795
|
+
/* @__PURE__ */ jsx41(
|
|
8328
8796
|
ContextMenu5.Item,
|
|
8329
8797
|
{
|
|
8330
8798
|
asChild: true,
|
|
8331
8799
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center text-gray-900 hover:text-gray-900 visited:text-gray-900 no-underline hover:no-underline visited:no-underline",
|
|
8332
|
-
children: /* @__PURE__ */
|
|
8800
|
+
children: /* @__PURE__ */ jsx41(
|
|
8333
8801
|
"a",
|
|
8334
8802
|
{
|
|
8335
8803
|
href: item.href,
|
|
@@ -8837,6 +9305,120 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
|
|
|
8837
9305
|
return { nodes: layoutNodes, edges: layoutEdges };
|
|
8838
9306
|
}
|
|
8839
9307
|
|
|
9308
|
+
// src/utils/local-packing.ts
|
|
9309
|
+
var toNumber = (value) => {
|
|
9310
|
+
if (typeof value === "number") return value;
|
|
9311
|
+
if (typeof value === "string") {
|
|
9312
|
+
const parsed = Number.parseFloat(value);
|
|
9313
|
+
return Number.isFinite(parsed) ? parsed : void 0;
|
|
9314
|
+
}
|
|
9315
|
+
return void 0;
|
|
9316
|
+
};
|
|
9317
|
+
var getPackableNodeSize = (node) => ({
|
|
9318
|
+
width: toNumber(node.measured?.width) ?? toNumber(node.width) ?? toNumber(node.style?.width) ?? 260,
|
|
9319
|
+
height: toNumber(node.measured?.height) ?? toNumber(node.height) ?? toNumber(node.style?.height) ?? 140
|
|
9320
|
+
});
|
|
9321
|
+
var rectsIntersect = (a, b, gap = 0) => a.x < b.x + b.width + gap && a.x + a.width + gap > b.x && a.y < b.y + b.height + gap && a.y + a.height + gap > b.y;
|
|
9322
|
+
var toRect = (node, y = node.position.y) => {
|
|
9323
|
+
const size = getPackableNodeSize(node);
|
|
9324
|
+
return {
|
|
9325
|
+
x: node.position.x,
|
|
9326
|
+
y,
|
|
9327
|
+
width: size.width,
|
|
9328
|
+
height: size.height
|
|
9329
|
+
};
|
|
9330
|
+
};
|
|
9331
|
+
var packNodesAroundBounds = ({
|
|
9332
|
+
nodes,
|
|
9333
|
+
movableNodeIds,
|
|
9334
|
+
protectedBounds,
|
|
9335
|
+
groupNodeId,
|
|
9336
|
+
gap = 40
|
|
9337
|
+
}) => {
|
|
9338
|
+
const movableNodes = nodes.filter((node) => movableNodeIds.has(node.id)).sort((a, b) => a.position.y - b.position.y);
|
|
9339
|
+
const movableIds = new Set(movableNodes.map((node) => node.id));
|
|
9340
|
+
const occupiedRects = [
|
|
9341
|
+
protectedBounds,
|
|
9342
|
+
...nodes.filter(
|
|
9343
|
+
(node) => !node.parentId && node.id !== groupNodeId && !movableIds.has(node.id)
|
|
9344
|
+
).map((node) => toRect(node))
|
|
9345
|
+
];
|
|
9346
|
+
const plannedPositions = /* @__PURE__ */ new Map();
|
|
9347
|
+
const groupCenterY = protectedBounds.y + protectedBounds.height / 2;
|
|
9348
|
+
const placeNode = (node) => {
|
|
9349
|
+
const size = getPackableNodeSize(node);
|
|
9350
|
+
const nodeCenterY = node.position.y + size.height / 2;
|
|
9351
|
+
const moveDirection = nodeCenterY >= groupCenterY ? 1 : -1;
|
|
9352
|
+
let y = moveDirection > 0 ? Math.max(
|
|
9353
|
+
node.position.y,
|
|
9354
|
+
protectedBounds.y + protectedBounds.height + gap
|
|
9355
|
+
) : Math.min(node.position.y, protectedBounds.y - size.height - gap);
|
|
9356
|
+
let attempts = 0;
|
|
9357
|
+
while (attempts < occupiedRects.length + 8) {
|
|
9358
|
+
const rect = {
|
|
9359
|
+
x: node.position.x,
|
|
9360
|
+
y,
|
|
9361
|
+
width: size.width,
|
|
9362
|
+
height: size.height
|
|
9363
|
+
};
|
|
9364
|
+
const collision = occupiedRects.find(
|
|
9365
|
+
(occupied) => rectsIntersect(rect, occupied, gap)
|
|
9366
|
+
);
|
|
9367
|
+
if (!collision) {
|
|
9368
|
+
occupiedRects.push(rect);
|
|
9369
|
+
plannedPositions.set(node.id, { ...node.position, y });
|
|
9370
|
+
return;
|
|
9371
|
+
}
|
|
9372
|
+
y = moveDirection > 0 ? collision.y + collision.height + gap : collision.y - size.height - gap;
|
|
9373
|
+
attempts += 1;
|
|
9374
|
+
}
|
|
9375
|
+
occupiedRects.push({
|
|
9376
|
+
x: node.position.x,
|
|
9377
|
+
y,
|
|
9378
|
+
width: size.width,
|
|
9379
|
+
height: size.height
|
|
9380
|
+
});
|
|
9381
|
+
plannedPositions.set(node.id, { ...node.position, y });
|
|
9382
|
+
};
|
|
9383
|
+
const below = movableNodes.filter((node) => {
|
|
9384
|
+
const size = getPackableNodeSize(node);
|
|
9385
|
+
return node.position.y + size.height / 2 >= groupCenterY;
|
|
9386
|
+
});
|
|
9387
|
+
const belowIds = new Set(below.map((node) => node.id));
|
|
9388
|
+
const above = movableNodes.filter((node) => !belowIds.has(node.id)).reverse();
|
|
9389
|
+
below.forEach(placeNode);
|
|
9390
|
+
above.forEach(placeNode);
|
|
9391
|
+
return plannedPositions;
|
|
9392
|
+
};
|
|
9393
|
+
|
|
9394
|
+
// src/utils/message-group-expansion.ts
|
|
9395
|
+
var getExpandedMessageGroupNode = (nodes, groupNodeId) => nodes.find(
|
|
9396
|
+
(node) => node.id === groupNodeId && node.type === "messageGroupExpanded"
|
|
9397
|
+
);
|
|
9398
|
+
var buildMessageGroupExpansionNodes = ({
|
|
9399
|
+
currentNodes,
|
|
9400
|
+
groupNodeId,
|
|
9401
|
+
expandedContainerNode,
|
|
9402
|
+
childNodes,
|
|
9403
|
+
downstreamNodes,
|
|
9404
|
+
getDownstreamPosition
|
|
9405
|
+
}) => {
|
|
9406
|
+
const withoutExistingGroup = currentNodes.filter(
|
|
9407
|
+
(node) => node.id !== groupNodeId && node.parentId !== groupNodeId
|
|
9408
|
+
);
|
|
9409
|
+
const existingIds = new Set(withoutExistingGroup.map((node) => node.id));
|
|
9410
|
+
const newDownstream = downstreamNodes.filter((node) => !existingIds.has(node.id)).map((node, index) => ({
|
|
9411
|
+
...node,
|
|
9412
|
+
position: getDownstreamPosition(node, index)
|
|
9413
|
+
}));
|
|
9414
|
+
return [
|
|
9415
|
+
...withoutExistingGroup,
|
|
9416
|
+
expandedContainerNode,
|
|
9417
|
+
...childNodes,
|
|
9418
|
+
...newDownstream
|
|
9419
|
+
];
|
|
9420
|
+
};
|
|
9421
|
+
|
|
8840
9422
|
// src/components/NotesToolbarButton.tsx
|
|
8841
9423
|
import { useState as useState13, useCallback as useCallback11 } from "react";
|
|
8842
9424
|
import {
|
|
@@ -8846,35 +9428,35 @@ import {
|
|
|
8846
9428
|
Locate,
|
|
8847
9429
|
ChevronRight,
|
|
8848
9430
|
ServerIcon as ServerIcon2,
|
|
8849
|
-
Zap as
|
|
8850
|
-
MessageSquare as
|
|
9431
|
+
Zap as Zap6,
|
|
9432
|
+
MessageSquare as MessageSquare3,
|
|
8851
9433
|
Search as Search3,
|
|
8852
9434
|
ArrowRightLeft as ArrowRightLeft3,
|
|
8853
|
-
Database as
|
|
9435
|
+
Database as Database6,
|
|
8854
9436
|
Package as Package2,
|
|
8855
9437
|
Globe as Globe5,
|
|
8856
|
-
User as
|
|
9438
|
+
User as User4,
|
|
8857
9439
|
MonitorIcon as MonitorIcon2,
|
|
8858
9440
|
BoxesIcon as BoxesIcon2
|
|
8859
9441
|
} from "lucide-react";
|
|
8860
9442
|
import { useReactFlow as useReactFlow4 } from "@xyflow/react";
|
|
8861
9443
|
import * as Dialog4 from "@radix-ui/react-dialog";
|
|
8862
|
-
import { Fragment as
|
|
9444
|
+
import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
8863
9445
|
var NODE_TYPE_META = {
|
|
8864
9446
|
service: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
|
|
8865
9447
|
services: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
|
|
8866
|
-
event: { icon:
|
|
8867
|
-
events: { icon:
|
|
8868
|
-
command: { icon:
|
|
8869
|
-
commands: { icon:
|
|
9448
|
+
event: { icon: Zap6, color: "#f97316", label: "Event" },
|
|
9449
|
+
events: { icon: Zap6, color: "#f97316", label: "Event" },
|
|
9450
|
+
command: { icon: MessageSquare3, color: "#3b82f6", label: "Command" },
|
|
9451
|
+
commands: { icon: MessageSquare3, color: "#3b82f6", label: "Command" },
|
|
8870
9452
|
query: { icon: Search3, color: "#22c55e", label: "Query" },
|
|
8871
9453
|
queries: { icon: Search3, color: "#22c55e", label: "Query" },
|
|
8872
9454
|
channel: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
|
|
8873
9455
|
channels: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
|
|
8874
|
-
data: { icon:
|
|
9456
|
+
data: { icon: Database6, color: "#3b82f6", label: "Data" },
|
|
8875
9457
|
"data-products": { icon: Package2, color: "#6366f1", label: "Data Product" },
|
|
8876
9458
|
externalSystem: { icon: Globe5, color: "#ec4899", label: "External System" },
|
|
8877
|
-
actor: { icon:
|
|
9459
|
+
actor: { icon: User4, color: "#eab308", label: "Actor" },
|
|
8878
9460
|
view: { icon: MonitorIcon2, color: "#8b5cf6", label: "View" },
|
|
8879
9461
|
domain: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" },
|
|
8880
9462
|
domains: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" }
|
|
@@ -8965,7 +9547,7 @@ function hashStr2(s) {
|
|
|
8965
9547
|
function Avatar2({ name, size = 28 }) {
|
|
8966
9548
|
const initials = name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
|
|
8967
9549
|
const [c1, c2] = AVATAR_PALETTES2[hashStr2(name) % AVATAR_PALETTES2.length];
|
|
8968
|
-
return /* @__PURE__ */
|
|
9550
|
+
return /* @__PURE__ */ jsx42(
|
|
8969
9551
|
"div",
|
|
8970
9552
|
{
|
|
8971
9553
|
style: {
|
|
@@ -8978,7 +9560,7 @@ function Avatar2({ name, size = 28 }) {
|
|
|
8978
9560
|
justifyContent: "center",
|
|
8979
9561
|
flexShrink: 0
|
|
8980
9562
|
},
|
|
8981
|
-
children: /* @__PURE__ */
|
|
9563
|
+
children: /* @__PURE__ */ jsx42(
|
|
8982
9564
|
"span",
|
|
8983
9565
|
{
|
|
8984
9566
|
style: {
|
|
@@ -8997,7 +9579,7 @@ function PriorityBadge({ priority }) {
|
|
|
8997
9579
|
const p = PRIORITY2[priority.toLowerCase()];
|
|
8998
9580
|
if (!p) return null;
|
|
8999
9581
|
const isUrgent = priority === "high" || priority === "critical";
|
|
9000
|
-
return /* @__PURE__ */
|
|
9582
|
+
return /* @__PURE__ */ jsxs40(
|
|
9001
9583
|
"span",
|
|
9002
9584
|
{
|
|
9003
9585
|
style: {
|
|
@@ -9016,7 +9598,7 @@ function PriorityBadge({ priority }) {
|
|
|
9016
9598
|
lineHeight: 1.4
|
|
9017
9599
|
},
|
|
9018
9600
|
children: [
|
|
9019
|
-
isUrgent && /* @__PURE__ */
|
|
9601
|
+
isUrgent && /* @__PURE__ */ jsx42(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
|
|
9020
9602
|
p.label
|
|
9021
9603
|
]
|
|
9022
9604
|
}
|
|
@@ -9024,7 +9606,7 @@ function PriorityBadge({ priority }) {
|
|
|
9024
9606
|
}
|
|
9025
9607
|
function NoteCard2({ note, index }) {
|
|
9026
9608
|
const prioStyle = note.priority ? PRIORITY2[note.priority.toLowerCase()] : null;
|
|
9027
|
-
return /* @__PURE__ */
|
|
9609
|
+
return /* @__PURE__ */ jsxs40(
|
|
9028
9610
|
"div",
|
|
9029
9611
|
{
|
|
9030
9612
|
style: {
|
|
@@ -9036,7 +9618,7 @@ function NoteCard2({ note, index }) {
|
|
|
9036
9618
|
boxShadow: "0 1px 3px rgba(0,0,0,0.04)"
|
|
9037
9619
|
},
|
|
9038
9620
|
children: [
|
|
9039
|
-
prioStyle && /* @__PURE__ */
|
|
9621
|
+
prioStyle && /* @__PURE__ */ jsx42(
|
|
9040
9622
|
"div",
|
|
9041
9623
|
{
|
|
9042
9624
|
style: {
|
|
@@ -9050,7 +9632,7 @@ function NoteCard2({ note, index }) {
|
|
|
9050
9632
|
}
|
|
9051
9633
|
}
|
|
9052
9634
|
),
|
|
9053
|
-
/* @__PURE__ */
|
|
9635
|
+
/* @__PURE__ */ jsxs40(
|
|
9054
9636
|
"div",
|
|
9055
9637
|
{
|
|
9056
9638
|
style: {
|
|
@@ -9060,7 +9642,7 @@ function NoteCard2({ note, index }) {
|
|
|
9060
9642
|
marginBottom: 8
|
|
9061
9643
|
},
|
|
9062
9644
|
children: [
|
|
9063
|
-
note.author ? /* @__PURE__ */
|
|
9645
|
+
note.author ? /* @__PURE__ */ jsx42(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx42(
|
|
9064
9646
|
"div",
|
|
9065
9647
|
{
|
|
9066
9648
|
style: {
|
|
@@ -9074,10 +9656,10 @@ function NoteCard2({ note, index }) {
|
|
|
9074
9656
|
justifyContent: "center",
|
|
9075
9657
|
flexShrink: 0
|
|
9076
9658
|
},
|
|
9077
|
-
children: /* @__PURE__ */
|
|
9659
|
+
children: /* @__PURE__ */ jsx42("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
|
|
9078
9660
|
}
|
|
9079
9661
|
),
|
|
9080
|
-
/* @__PURE__ */
|
|
9662
|
+
/* @__PURE__ */ jsx42("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx42(
|
|
9081
9663
|
"span",
|
|
9082
9664
|
{
|
|
9083
9665
|
style: {
|
|
@@ -9089,11 +9671,11 @@ function NoteCard2({ note, index }) {
|
|
|
9089
9671
|
children: note.author
|
|
9090
9672
|
}
|
|
9091
9673
|
) }),
|
|
9092
|
-
note.priority && /* @__PURE__ */
|
|
9674
|
+
note.priority && /* @__PURE__ */ jsx42(PriorityBadge, { priority: note.priority })
|
|
9093
9675
|
]
|
|
9094
9676
|
}
|
|
9095
9677
|
),
|
|
9096
|
-
/* @__PURE__ */
|
|
9678
|
+
/* @__PURE__ */ jsx42(
|
|
9097
9679
|
"p",
|
|
9098
9680
|
{
|
|
9099
9681
|
style: {
|
|
@@ -9137,7 +9719,7 @@ function AllNotesModal({
|
|
|
9137
9719
|
[nodes, setCenter, getZoom, onClose]
|
|
9138
9720
|
);
|
|
9139
9721
|
if (totalNotes === 0) return null;
|
|
9140
|
-
return /* @__PURE__ */
|
|
9722
|
+
return /* @__PURE__ */ jsx42(
|
|
9141
9723
|
Dialog4.Root,
|
|
9142
9724
|
{
|
|
9143
9725
|
open: isOpen,
|
|
@@ -9147,13 +9729,13 @@ function AllNotesModal({
|
|
|
9147
9729
|
setSelectedIdx(0);
|
|
9148
9730
|
}
|
|
9149
9731
|
},
|
|
9150
|
-
children: /* @__PURE__ */
|
|
9732
|
+
children: /* @__PURE__ */ jsx42(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs40(
|
|
9151
9733
|
"div",
|
|
9152
9734
|
{
|
|
9153
9735
|
className: "fixed inset-0 z-[99999]",
|
|
9154
9736
|
style: { isolation: "isolate" },
|
|
9155
9737
|
children: [
|
|
9156
|
-
/* @__PURE__ */
|
|
9738
|
+
/* @__PURE__ */ jsx42(
|
|
9157
9739
|
Dialog4.Overlay,
|
|
9158
9740
|
{
|
|
9159
9741
|
style: {
|
|
@@ -9164,7 +9746,7 @@ function AllNotesModal({
|
|
|
9164
9746
|
}
|
|
9165
9747
|
}
|
|
9166
9748
|
),
|
|
9167
|
-
/* @__PURE__ */
|
|
9749
|
+
/* @__PURE__ */ jsxs40(
|
|
9168
9750
|
Dialog4.Content,
|
|
9169
9751
|
{
|
|
9170
9752
|
style: {
|
|
@@ -9185,7 +9767,7 @@ function AllNotesModal({
|
|
|
9185
9767
|
outline: "none"
|
|
9186
9768
|
},
|
|
9187
9769
|
children: [
|
|
9188
|
-
/* @__PURE__ */
|
|
9770
|
+
/* @__PURE__ */ jsxs40(
|
|
9189
9771
|
"div",
|
|
9190
9772
|
{
|
|
9191
9773
|
style: {
|
|
@@ -9197,7 +9779,7 @@ function AllNotesModal({
|
|
|
9197
9779
|
flexShrink: 0
|
|
9198
9780
|
},
|
|
9199
9781
|
children: [
|
|
9200
|
-
/* @__PURE__ */
|
|
9782
|
+
/* @__PURE__ */ jsx42(
|
|
9201
9783
|
"div",
|
|
9202
9784
|
{
|
|
9203
9785
|
style: {
|
|
@@ -9210,7 +9792,7 @@ function AllNotesModal({
|
|
|
9210
9792
|
justifyContent: "center",
|
|
9211
9793
|
flexShrink: 0
|
|
9212
9794
|
},
|
|
9213
|
-
children: /* @__PURE__ */
|
|
9795
|
+
children: /* @__PURE__ */ jsx42(
|
|
9214
9796
|
MessageCircle3,
|
|
9215
9797
|
{
|
|
9216
9798
|
style: { width: 16, height: 16, color: "#64748b" },
|
|
@@ -9219,8 +9801,8 @@ function AllNotesModal({
|
|
|
9219
9801
|
)
|
|
9220
9802
|
}
|
|
9221
9803
|
),
|
|
9222
|
-
/* @__PURE__ */
|
|
9223
|
-
/* @__PURE__ */
|
|
9804
|
+
/* @__PURE__ */ jsxs40("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
9805
|
+
/* @__PURE__ */ jsx42(
|
|
9224
9806
|
Dialog4.Title,
|
|
9225
9807
|
{
|
|
9226
9808
|
style: {
|
|
@@ -9233,7 +9815,7 @@ function AllNotesModal({
|
|
|
9233
9815
|
children: "Notes"
|
|
9234
9816
|
}
|
|
9235
9817
|
),
|
|
9236
|
-
/* @__PURE__ */
|
|
9818
|
+
/* @__PURE__ */ jsxs40(
|
|
9237
9819
|
Dialog4.Description,
|
|
9238
9820
|
{
|
|
9239
9821
|
style: {
|
|
@@ -9255,7 +9837,7 @@ function AllNotesModal({
|
|
|
9255
9837
|
}
|
|
9256
9838
|
)
|
|
9257
9839
|
] }),
|
|
9258
|
-
/* @__PURE__ */
|
|
9840
|
+
/* @__PURE__ */ jsx42(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx42(
|
|
9259
9841
|
"button",
|
|
9260
9842
|
{
|
|
9261
9843
|
style: {
|
|
@@ -9272,14 +9854,14 @@ function AllNotesModal({
|
|
|
9272
9854
|
flexShrink: 0
|
|
9273
9855
|
},
|
|
9274
9856
|
"aria-label": "Close",
|
|
9275
|
-
children: /* @__PURE__ */
|
|
9857
|
+
children: /* @__PURE__ */ jsx42(X, { style: { width: 15, height: 15 } })
|
|
9276
9858
|
}
|
|
9277
9859
|
) })
|
|
9278
9860
|
]
|
|
9279
9861
|
}
|
|
9280
9862
|
),
|
|
9281
|
-
/* @__PURE__ */
|
|
9282
|
-
/* @__PURE__ */
|
|
9863
|
+
/* @__PURE__ */ jsxs40("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
|
|
9864
|
+
/* @__PURE__ */ jsx42(
|
|
9283
9865
|
"div",
|
|
9284
9866
|
{
|
|
9285
9867
|
style: {
|
|
@@ -9294,7 +9876,7 @@ function AllNotesModal({
|
|
|
9294
9876
|
const meta = getNodeMeta(group.nodeType);
|
|
9295
9877
|
const IconComp = meta?.icon || MessageCircle3;
|
|
9296
9878
|
const iconColor = meta?.color || "#64748b";
|
|
9297
|
-
return /* @__PURE__ */
|
|
9879
|
+
return /* @__PURE__ */ jsxs40(
|
|
9298
9880
|
"button",
|
|
9299
9881
|
{
|
|
9300
9882
|
onClick: () => setSelectedIdx(i),
|
|
@@ -9313,7 +9895,7 @@ function AllNotesModal({
|
|
|
9313
9895
|
transition: "background 0.1s"
|
|
9314
9896
|
},
|
|
9315
9897
|
children: [
|
|
9316
|
-
/* @__PURE__ */
|
|
9898
|
+
/* @__PURE__ */ jsx42(
|
|
9317
9899
|
"div",
|
|
9318
9900
|
{
|
|
9319
9901
|
style: {
|
|
@@ -9327,7 +9909,7 @@ function AllNotesModal({
|
|
|
9327
9909
|
flexShrink: 0,
|
|
9328
9910
|
transition: "background 0.15s"
|
|
9329
9911
|
},
|
|
9330
|
-
children: /* @__PURE__ */
|
|
9912
|
+
children: /* @__PURE__ */ jsx42(
|
|
9331
9913
|
IconComp,
|
|
9332
9914
|
{
|
|
9333
9915
|
style: {
|
|
@@ -9341,8 +9923,8 @@ function AllNotesModal({
|
|
|
9341
9923
|
)
|
|
9342
9924
|
}
|
|
9343
9925
|
),
|
|
9344
|
-
/* @__PURE__ */
|
|
9345
|
-
/* @__PURE__ */
|
|
9926
|
+
/* @__PURE__ */ jsxs40("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
9927
|
+
/* @__PURE__ */ jsx42(
|
|
9346
9928
|
"div",
|
|
9347
9929
|
{
|
|
9348
9930
|
style: {
|
|
@@ -9357,7 +9939,7 @@ function AllNotesModal({
|
|
|
9357
9939
|
children: group.name
|
|
9358
9940
|
}
|
|
9359
9941
|
),
|
|
9360
|
-
/* @__PURE__ */
|
|
9942
|
+
/* @__PURE__ */ jsxs40(
|
|
9361
9943
|
"div",
|
|
9362
9944
|
{
|
|
9363
9945
|
style: {
|
|
@@ -9380,7 +9962,7 @@ function AllNotesModal({
|
|
|
9380
9962
|
}
|
|
9381
9963
|
)
|
|
9382
9964
|
] }),
|
|
9383
|
-
/* @__PURE__ */
|
|
9965
|
+
/* @__PURE__ */ jsx42(
|
|
9384
9966
|
ChevronRight,
|
|
9385
9967
|
{
|
|
9386
9968
|
style: {
|
|
@@ -9399,7 +9981,7 @@ function AllNotesModal({
|
|
|
9399
9981
|
})
|
|
9400
9982
|
}
|
|
9401
9983
|
),
|
|
9402
|
-
/* @__PURE__ */
|
|
9984
|
+
/* @__PURE__ */ jsx42(
|
|
9403
9985
|
"div",
|
|
9404
9986
|
{
|
|
9405
9987
|
style: {
|
|
@@ -9408,8 +9990,8 @@ function AllNotesModal({
|
|
|
9408
9990
|
display: "flex",
|
|
9409
9991
|
flexDirection: "column"
|
|
9410
9992
|
},
|
|
9411
|
-
children: selected && /* @__PURE__ */
|
|
9412
|
-
/* @__PURE__ */
|
|
9993
|
+
children: selected && /* @__PURE__ */ jsxs40(Fragment11, { children: [
|
|
9994
|
+
/* @__PURE__ */ jsxs40(
|
|
9413
9995
|
"div",
|
|
9414
9996
|
{
|
|
9415
9997
|
style: {
|
|
@@ -9422,7 +10004,7 @@ function AllNotesModal({
|
|
|
9422
10004
|
background: "#fafbfc"
|
|
9423
10005
|
},
|
|
9424
10006
|
children: [
|
|
9425
|
-
/* @__PURE__ */
|
|
10007
|
+
/* @__PURE__ */ jsxs40(
|
|
9426
10008
|
"div",
|
|
9427
10009
|
{
|
|
9428
10010
|
style: {
|
|
@@ -9435,7 +10017,7 @@ function AllNotesModal({
|
|
|
9435
10017
|
const meta = getNodeMeta(selected.nodeType);
|
|
9436
10018
|
const Icon = meta?.icon || MessageCircle3;
|
|
9437
10019
|
const color = meta?.color || "#64748b";
|
|
9438
|
-
return /* @__PURE__ */
|
|
10020
|
+
return /* @__PURE__ */ jsx42(
|
|
9439
10021
|
"div",
|
|
9440
10022
|
{
|
|
9441
10023
|
style: {
|
|
@@ -9448,7 +10030,7 @@ function AllNotesModal({
|
|
|
9448
10030
|
justifyContent: "center",
|
|
9449
10031
|
flexShrink: 0
|
|
9450
10032
|
},
|
|
9451
|
-
children: /* @__PURE__ */
|
|
10033
|
+
children: /* @__PURE__ */ jsx42(
|
|
9452
10034
|
Icon,
|
|
9453
10035
|
{
|
|
9454
10036
|
style: {
|
|
@@ -9462,8 +10044,8 @@ function AllNotesModal({
|
|
|
9462
10044
|
}
|
|
9463
10045
|
);
|
|
9464
10046
|
})(),
|
|
9465
|
-
/* @__PURE__ */
|
|
9466
|
-
/* @__PURE__ */
|
|
10047
|
+
/* @__PURE__ */ jsxs40("div", { children: [
|
|
10048
|
+
/* @__PURE__ */ jsx42(
|
|
9467
10049
|
"div",
|
|
9468
10050
|
{
|
|
9469
10051
|
style: {
|
|
@@ -9475,7 +10057,7 @@ function AllNotesModal({
|
|
|
9475
10057
|
children: selected.name
|
|
9476
10058
|
}
|
|
9477
10059
|
),
|
|
9478
|
-
/* @__PURE__ */
|
|
10060
|
+
/* @__PURE__ */ jsxs40(
|
|
9479
10061
|
"div",
|
|
9480
10062
|
{
|
|
9481
10063
|
style: {
|
|
@@ -9497,7 +10079,7 @@ function AllNotesModal({
|
|
|
9497
10079
|
]
|
|
9498
10080
|
}
|
|
9499
10081
|
),
|
|
9500
|
-
/* @__PURE__ */
|
|
10082
|
+
/* @__PURE__ */ jsxs40(
|
|
9501
10083
|
"button",
|
|
9502
10084
|
{
|
|
9503
10085
|
onClick: () => handleNavigate(selected.nodeId),
|
|
@@ -9524,7 +10106,7 @@ function AllNotesModal({
|
|
|
9524
10106
|
e.currentTarget.style.color = "#475569";
|
|
9525
10107
|
},
|
|
9526
10108
|
children: [
|
|
9527
|
-
/* @__PURE__ */
|
|
10109
|
+
/* @__PURE__ */ jsx42(Locate, { style: { width: 12, height: 12 } }),
|
|
9528
10110
|
"Find on canvas"
|
|
9529
10111
|
]
|
|
9530
10112
|
}
|
|
@@ -9532,7 +10114,7 @@ function AllNotesModal({
|
|
|
9532
10114
|
]
|
|
9533
10115
|
}
|
|
9534
10116
|
),
|
|
9535
|
-
/* @__PURE__ */
|
|
10117
|
+
/* @__PURE__ */ jsx42(
|
|
9536
10118
|
"div",
|
|
9537
10119
|
{
|
|
9538
10120
|
style: {
|
|
@@ -9543,7 +10125,7 @@ function AllNotesModal({
|
|
|
9543
10125
|
flexDirection: "column",
|
|
9544
10126
|
gap: 10
|
|
9545
10127
|
},
|
|
9546
|
-
children: selected.notes.map((note, i) => /* @__PURE__ */
|
|
10128
|
+
children: selected.notes.map((note, i) => /* @__PURE__ */ jsx42(NoteCard2, { note, index: i }, i))
|
|
9547
10129
|
}
|
|
9548
10130
|
)
|
|
9549
10131
|
] })
|
|
@@ -9562,7 +10144,7 @@ function AllNotesModal({
|
|
|
9562
10144
|
|
|
9563
10145
|
// src/components/NodeGraph.tsx
|
|
9564
10146
|
import dagre3 from "dagre";
|
|
9565
|
-
import { Fragment as
|
|
10147
|
+
import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
9566
10148
|
var POSITION_CHANGE_THRESHOLD = 1;
|
|
9567
10149
|
var LARGE_GRAPH_NODE_THRESHOLD = 30;
|
|
9568
10150
|
var NODE_ORIGIN = [0.1, 0.1];
|
|
@@ -9573,29 +10155,34 @@ var MINIMAP_STYLE = {
|
|
|
9573
10155
|
};
|
|
9574
10156
|
var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
|
|
9575
10157
|
marginBottom: "20px",
|
|
9576
|
-
marginLeft: "
|
|
10158
|
+
marginLeft: "420px"
|
|
9577
10159
|
};
|
|
9578
10160
|
var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
|
|
9579
10161
|
var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
|
|
9580
|
-
var
|
|
10162
|
+
var EXPANDED_WRAPPER_TYPES = /* @__PURE__ */ new Set([
|
|
10163
|
+
"flowExpanded",
|
|
10164
|
+
"messageGroupExpanded"
|
|
10165
|
+
]);
|
|
10166
|
+
var isExpandedWrapper = (type) => type != null && EXPANDED_WRAPPER_TYPES.has(type);
|
|
10167
|
+
var LegendPanel = memo35(function LegendPanel2({
|
|
9581
10168
|
legend,
|
|
9582
10169
|
showMinimap,
|
|
9583
10170
|
onLegendClick
|
|
9584
10171
|
}) {
|
|
9585
|
-
return /* @__PURE__ */
|
|
10172
|
+
return /* @__PURE__ */ jsx43(
|
|
9586
10173
|
Panel,
|
|
9587
10174
|
{
|
|
9588
10175
|
position: "bottom-right",
|
|
9589
10176
|
style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
|
|
9590
|
-
children: /* @__PURE__ */
|
|
9591
|
-
([key, { count, colorClass, groupId }]) => /* @__PURE__ */
|
|
10177
|
+
children: /* @__PURE__ */ jsx43("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] font-light px-4 text-[12px] shadow-md py-1 rounded-md", children: /* @__PURE__ */ jsx43("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
|
|
10178
|
+
([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs41(
|
|
9592
10179
|
"li",
|
|
9593
10180
|
{
|
|
9594
10181
|
className: "flex space-x-2 items-center text-[10px] cursor-pointer text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))] hover:underline",
|
|
9595
10182
|
onClick: () => onLegendClick(key, groupId),
|
|
9596
10183
|
children: [
|
|
9597
|
-
/* @__PURE__ */
|
|
9598
|
-
/* @__PURE__ */
|
|
10184
|
+
/* @__PURE__ */ jsx43("span", { className: `w-2 h-2 block ${colorClass}` }),
|
|
10185
|
+
/* @__PURE__ */ jsxs41("span", { className: "block capitalize", children: [
|
|
9599
10186
|
key,
|
|
9600
10187
|
" (",
|
|
9601
10188
|
count,
|
|
@@ -9717,10 +10304,10 @@ var NodeGraphBuilder = ({
|
|
|
9717
10304
|
}, []);
|
|
9718
10305
|
const nodeTypes = useMemo18(() => {
|
|
9719
10306
|
const wrapWithContextMenu = (Component) => {
|
|
9720
|
-
const Wrapped =
|
|
10307
|
+
const Wrapped = memo35((props) => {
|
|
9721
10308
|
const items = props.data?.contextMenu;
|
|
9722
|
-
if (!items?.length) return /* @__PURE__ */
|
|
9723
|
-
return /* @__PURE__ */
|
|
10309
|
+
if (!items?.length) return /* @__PURE__ */ jsx43(Component, { ...props });
|
|
10310
|
+
return /* @__PURE__ */ jsx43(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx43(Component, { ...props }) });
|
|
9724
10311
|
});
|
|
9725
10312
|
Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
|
|
9726
10313
|
return Wrapped;
|
|
@@ -9754,10 +10341,11 @@ var NodeGraphBuilder = ({
|
|
|
9754
10341
|
"data-product": wrapWithContextMenu(DataProduct_default),
|
|
9755
10342
|
"data-products": wrapWithContextMenu(DataProduct_default),
|
|
9756
10343
|
group: GroupNode_default,
|
|
9757
|
-
note:
|
|
10344
|
+
note: memo35((props) => /* @__PURE__ */ jsx43(NoteNode_default, { ...props, readOnly: true })),
|
|
9758
10345
|
field: wrapWithContextMenu(FieldNode_default),
|
|
9759
10346
|
messageGroup: MessageGroupNode_default,
|
|
9760
|
-
messageGroupExpanded: MessageGroupExpandedNode_default
|
|
10347
|
+
messageGroupExpanded: MessageGroupExpandedNode_default,
|
|
10348
|
+
flowExpanded: FlowExpandedNode_default
|
|
9761
10349
|
};
|
|
9762
10350
|
}, []);
|
|
9763
10351
|
const edgeTypes2 = useMemo18(
|
|
@@ -9770,7 +10358,7 @@ var NodeGraphBuilder = ({
|
|
|
9770
10358
|
);
|
|
9771
10359
|
const [nodes, setNodes, onNodesChange] = useNodesState2(initialNodes);
|
|
9772
10360
|
const [edges, setEdges, onEdgesChange] = useEdgesState2(initialEdges);
|
|
9773
|
-
const { fitView, getNodes } = useReactFlow5();
|
|
10361
|
+
const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = useReactFlow5();
|
|
9774
10362
|
useEffect8(() => {
|
|
9775
10363
|
setNodes(initialNodes);
|
|
9776
10364
|
setEdges(initialEdges);
|
|
@@ -9887,64 +10475,186 @@ var NodeGraphBuilder = ({
|
|
|
9887
10475
|
edgesRef.current = edges;
|
|
9888
10476
|
const hideChannelsRef = useRef6(hideChannels);
|
|
9889
10477
|
hideChannelsRef.current = hideChannels;
|
|
10478
|
+
const wrapperNodeIds = useMemo18(() => {
|
|
10479
|
+
const ids = /* @__PURE__ */ new Set();
|
|
10480
|
+
nodes.forEach((n) => {
|
|
10481
|
+
if (isExpandedWrapper(n.type)) ids.add(n.id);
|
|
10482
|
+
});
|
|
10483
|
+
return ids;
|
|
10484
|
+
}, [nodes]);
|
|
10485
|
+
const walkthroughNodes = useMemo18(
|
|
10486
|
+
() => wrapperNodeIds.size === 0 ? nodes : nodes.filter((n) => !wrapperNodeIds.has(n.id)),
|
|
10487
|
+
[nodes, wrapperNodeIds]
|
|
10488
|
+
);
|
|
10489
|
+
const walkthroughEdges = useMemo18(
|
|
10490
|
+
() => wrapperNodeIds.size === 0 ? edges : edges.filter(
|
|
10491
|
+
(e) => !wrapperNodeIds.has(e.source) && !wrapperNodeIds.has(e.target)
|
|
10492
|
+
),
|
|
10493
|
+
[edges, wrapperNodeIds]
|
|
10494
|
+
);
|
|
9890
10495
|
const animateLayout = useCallback12(() => {
|
|
9891
10496
|
const wrapper = reactFlowWrapperRef.current;
|
|
9892
10497
|
if (!wrapper) return;
|
|
9893
10498
|
wrapper.classList.add("ec-animating-layout");
|
|
9894
10499
|
setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
|
|
9895
10500
|
}, []);
|
|
9896
|
-
const relayoutGraph = useCallback12(
|
|
9897
|
-
|
|
9898
|
-
|
|
9899
|
-
|
|
9900
|
-
|
|
9901
|
-
|
|
9902
|
-
|
|
9903
|
-
|
|
9904
|
-
|
|
9905
|
-
|
|
9906
|
-
|
|
9907
|
-
|
|
9908
|
-
|
|
9909
|
-
|
|
9910
|
-
|
|
9911
|
-
|
|
9912
|
-
|
|
9913
|
-
|
|
9914
|
-
|
|
9915
|
-
|
|
9916
|
-
|
|
9917
|
-
|
|
9918
|
-
g.
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9922
|
-
|
|
9923
|
-
|
|
9924
|
-
|
|
9925
|
-
|
|
9926
|
-
|
|
9927
|
-
|
|
9928
|
-
|
|
9929
|
-
|
|
10501
|
+
const relayoutGraph = useCallback12(
|
|
10502
|
+
(nextNodes, nextEdges, anchor) => {
|
|
10503
|
+
const g = new dagre3.graphlib.Graph({ compound: true });
|
|
10504
|
+
g.setGraph({ rankdir: "LR", ranksep: 300, nodesep: 50 });
|
|
10505
|
+
g.setDefaultEdgeLabel(() => ({}));
|
|
10506
|
+
nextNodes.forEach((node) => {
|
|
10507
|
+
if (node.parentId) return;
|
|
10508
|
+
const w = node.style?.width || (node.type === "messageGroupExpanded" ? 380 : 150);
|
|
10509
|
+
const h = node.style?.height || (node.type === "messageGroupExpanded" ? 0 : 120);
|
|
10510
|
+
if (node.type === "messageGroupExpanded") {
|
|
10511
|
+
const children = nextNodes.filter((n) => n.parentId === node.id);
|
|
10512
|
+
const childHeight = children.length * 190 + 100;
|
|
10513
|
+
g.setNode(node.id, { width: w, height: childHeight });
|
|
10514
|
+
} else {
|
|
10515
|
+
g.setNode(node.id, { width: w, height: h });
|
|
10516
|
+
}
|
|
10517
|
+
});
|
|
10518
|
+
nextEdges.forEach((edge) => {
|
|
10519
|
+
const sourceNode = nextNodes.find((n) => n.id === edge.source);
|
|
10520
|
+
const targetNode = nextNodes.find((n) => n.id === edge.target);
|
|
10521
|
+
const sourceTop = sourceNode?.parentId || edge.source;
|
|
10522
|
+
const targetTop = targetNode?.parentId || edge.target;
|
|
10523
|
+
if (g.hasNode(sourceTop) && g.hasNode(targetTop) && sourceTop !== targetTop) {
|
|
10524
|
+
g.setEdge(sourceTop, targetTop);
|
|
10525
|
+
}
|
|
10526
|
+
});
|
|
10527
|
+
dagre3.layout(g);
|
|
10528
|
+
const positioned = nextNodes.map((node) => {
|
|
10529
|
+
if (node.parentId) {
|
|
10530
|
+
const parent = nextNodes.find((n) => n.id === node.parentId);
|
|
10531
|
+
if (parent?.type === "flowExpanded") {
|
|
10532
|
+
return node;
|
|
10533
|
+
}
|
|
10534
|
+
const parentWidth = parent?.style?.width || 380;
|
|
10535
|
+
const childWidth = 240;
|
|
10536
|
+
const xOffset = Math.max(20, (parentWidth - childWidth) / 2);
|
|
10537
|
+
const siblings = nextNodes.filter(
|
|
10538
|
+
(n) => n.parentId === node.parentId
|
|
10539
|
+
);
|
|
10540
|
+
const index = siblings.indexOf(node);
|
|
10541
|
+
return {
|
|
10542
|
+
...node,
|
|
10543
|
+
position: { x: xOffset, y: 70 + index * 190 }
|
|
10544
|
+
};
|
|
10545
|
+
}
|
|
10546
|
+
const pos = g.node(node.id);
|
|
10547
|
+
if (!pos) return node;
|
|
9930
10548
|
return {
|
|
9931
10549
|
...node,
|
|
9932
|
-
position: { x:
|
|
10550
|
+
position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 }
|
|
9933
10551
|
};
|
|
9934
|
-
}
|
|
9935
|
-
|
|
9936
|
-
|
|
9937
|
-
return
|
|
9938
|
-
|
|
9939
|
-
|
|
10552
|
+
});
|
|
10553
|
+
if (!anchor) return positioned;
|
|
10554
|
+
const positionedAnchor = positioned.find((node) => node.id === anchor.id);
|
|
10555
|
+
if (!positionedAnchor) return positioned;
|
|
10556
|
+
const offset = {
|
|
10557
|
+
x: anchor.position.x - positionedAnchor.position.x,
|
|
10558
|
+
y: anchor.position.y - positionedAnchor.position.y
|
|
9940
10559
|
};
|
|
9941
|
-
|
|
9942
|
-
|
|
9943
|
-
|
|
10560
|
+
return positioned.map((node) => {
|
|
10561
|
+
if (node.parentId) return node;
|
|
10562
|
+
return {
|
|
10563
|
+
...node,
|
|
10564
|
+
position: {
|
|
10565
|
+
x: node.position.x + offset.x,
|
|
10566
|
+
y: node.position.y + offset.y
|
|
10567
|
+
}
|
|
10568
|
+
};
|
|
10569
|
+
});
|
|
10570
|
+
},
|
|
10571
|
+
[]
|
|
10572
|
+
);
|
|
10573
|
+
const makeRoomForRenderedExpandedGroup = useCallback12(
|
|
10574
|
+
(groupNodeId, groupBounds) => {
|
|
10575
|
+
const padding = 80;
|
|
10576
|
+
const protectedBounds = {
|
|
10577
|
+
x: groupBounds.x - padding,
|
|
10578
|
+
y: groupBounds.y - padding,
|
|
10579
|
+
width: groupBounds.width + padding * 2,
|
|
10580
|
+
height: groupBounds.height + padding * 2
|
|
10581
|
+
};
|
|
10582
|
+
const intersectingIds = new Set(
|
|
10583
|
+
getIntersectingNodes(protectedBounds, true).filter((node) => node.id !== groupNodeId && !node.parentId).map((node) => node.id)
|
|
10584
|
+
);
|
|
10585
|
+
if (intersectingIds.size === 0) return;
|
|
10586
|
+
setNodes((currentNodes) => {
|
|
10587
|
+
const plannedPositions = packNodesAroundBounds({
|
|
10588
|
+
nodes: currentNodes,
|
|
10589
|
+
movableNodeIds: intersectingIds,
|
|
10590
|
+
protectedBounds,
|
|
10591
|
+
groupNodeId
|
|
10592
|
+
});
|
|
10593
|
+
return currentNodes.map((node) => {
|
|
10594
|
+
const plannedPosition = plannedPositions.get(node.id);
|
|
10595
|
+
if (!plannedPosition) return node;
|
|
10596
|
+
return { ...node, position: plannedPosition };
|
|
10597
|
+
});
|
|
10598
|
+
});
|
|
10599
|
+
},
|
|
10600
|
+
[getIntersectingNodes, setNodes]
|
|
10601
|
+
);
|
|
10602
|
+
const layoutSubFlowChildren = useCallback12(
|
|
10603
|
+
(children, edges2, sizeOf, opts) => {
|
|
10604
|
+
const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
|
|
10605
|
+
const g = new dagre3.graphlib.Graph();
|
|
10606
|
+
g.setGraph({ rankdir: "LR", ranksep: 360, nodesep: 200 });
|
|
10607
|
+
g.setDefaultEdgeLabel(() => ({}));
|
|
10608
|
+
const childIds = new Set(children.map((c) => c.id));
|
|
10609
|
+
children.forEach((c) => {
|
|
10610
|
+
const { w, h } = sizeOf(c);
|
|
10611
|
+
g.setNode(c.id, { width: w, height: h });
|
|
10612
|
+
});
|
|
10613
|
+
edges2.forEach((e) => {
|
|
10614
|
+
if (childIds.has(e.source) && childIds.has(e.target)) {
|
|
10615
|
+
g.setEdge(e.source, e.target);
|
|
10616
|
+
}
|
|
10617
|
+
});
|
|
10618
|
+
dagre3.layout(g);
|
|
10619
|
+
let minX = Infinity;
|
|
10620
|
+
let minY = Infinity;
|
|
10621
|
+
let maxX = -Infinity;
|
|
10622
|
+
let maxY = -Infinity;
|
|
10623
|
+
const positions = /* @__PURE__ */ new Map();
|
|
10624
|
+
children.forEach((c) => {
|
|
10625
|
+
const pos = g.node(c.id);
|
|
10626
|
+
if (!pos) return;
|
|
10627
|
+
const x = pos.x - pos.width / 2;
|
|
10628
|
+
const y = pos.y - pos.height / 2;
|
|
10629
|
+
positions.set(c.id, { x, y });
|
|
10630
|
+
minX = Math.min(minX, x);
|
|
10631
|
+
minY = Math.min(minY, y);
|
|
10632
|
+
maxX = Math.max(maxX, x + pos.width);
|
|
10633
|
+
maxY = Math.max(maxY, y + pos.height);
|
|
10634
|
+
});
|
|
10635
|
+
const offsetX = padding - (Number.isFinite(minX) ? minX : 0);
|
|
10636
|
+
const offsetY = headerH + padding - (Number.isFinite(minY) ? minY : 0);
|
|
10637
|
+
const positioned = children.map((c) => {
|
|
10638
|
+
const p = positions.get(c.id);
|
|
10639
|
+
if (!p) return c;
|
|
10640
|
+
return { ...c, position: { x: p.x + offsetX, y: p.y + offsetY } };
|
|
10641
|
+
});
|
|
10642
|
+
const finalPositions = /* @__PURE__ */ new Map();
|
|
10643
|
+
positions.forEach(
|
|
10644
|
+
(p, id) => finalPositions.set(id, { x: p.x + offsetX, y: p.y + offsetY })
|
|
10645
|
+
);
|
|
10646
|
+
const width = Number.isFinite(minX) ? maxX - minX + padding * 2 : fallbackW + padding * 2;
|
|
10647
|
+
const height = Number.isFinite(minY) ? maxY - minY + headerH + padding * 2 : fallbackH + headerH + padding * 2;
|
|
10648
|
+
return { positioned, positions: finalPositions, width, height };
|
|
10649
|
+
},
|
|
10650
|
+
[]
|
|
10651
|
+
);
|
|
9944
10652
|
const handleCollapseGroup = useCallback12(
|
|
9945
10653
|
(e) => {
|
|
9946
10654
|
const target = e.target;
|
|
9947
|
-
const collapseBtn = target.closest(
|
|
10655
|
+
const collapseBtn = target.closest(
|
|
10656
|
+
".ec-collapse-group-btn, .ec-collapse-flow-btn"
|
|
10657
|
+
);
|
|
9948
10658
|
if (!collapseBtn) return;
|
|
9949
10659
|
e.stopPropagation();
|
|
9950
10660
|
const nodeWrapper = target.closest("[data-id]");
|
|
@@ -9954,23 +10664,26 @@ var NodeGraphBuilder = ({
|
|
|
9954
10664
|
const currentNodes = nodesRef.current;
|
|
9955
10665
|
const currentEdges = edgesRef.current;
|
|
9956
10666
|
const expandedNode = currentNodes.find((n) => n.id === groupNodeId);
|
|
9957
|
-
if (!expandedNode || expandedNode.type
|
|
10667
|
+
if (!expandedNode || !isExpandedWrapper(expandedNode.type)) return;
|
|
10668
|
+
const stashed = expandedNode.data.__preExpansion;
|
|
10669
|
+
const originalNode = stashed?.node ?? initialNodes.find(
|
|
10670
|
+
(n) => n.id === groupNodeId && (n.type === "messageGroup" || n.type === "flows" || n.type === "flow")
|
|
10671
|
+
);
|
|
10672
|
+
if (!originalNode) return;
|
|
10673
|
+
const originalEdges = stashed?.edges ?? initialEdges.filter(
|
|
10674
|
+
(edge) => edge.source === groupNodeId || edge.target === groupNodeId
|
|
10675
|
+
);
|
|
9958
10676
|
const childNodeIds = new Set(
|
|
9959
10677
|
currentNodes.filter((n) => n.parentId === groupNodeId).map((n) => n.id)
|
|
9960
10678
|
);
|
|
9961
|
-
const originalNode = initialNodes.find(
|
|
9962
|
-
(n) => n.id === groupNodeId && n.type === "messageGroup"
|
|
9963
|
-
);
|
|
9964
|
-
if (!originalNode) return;
|
|
9965
10679
|
const originalData = originalNode.data;
|
|
9966
|
-
const
|
|
10680
|
+
const preExistingIds = new Set(
|
|
10681
|
+
stashed ? stashed.nodeIds : initialNodes.map((n) => n.id)
|
|
10682
|
+
);
|
|
9967
10683
|
const downstreamNodeIds = new Set(
|
|
9968
|
-
(originalData.expandedNodes || []).map((n) => n.id).filter((id) => !
|
|
10684
|
+
(originalData.expandedNodes || []).map((n) => n.id).filter((id) => !preExistingIds.has(id))
|
|
9969
10685
|
);
|
|
9970
10686
|
const isDownstreamEdge = (edge) => edge.id.startsWith(`${groupNodeId}__`);
|
|
9971
|
-
const originalEdges = initialEdges.filter(
|
|
9972
|
-
(edge) => edge.source === groupNodeId || edge.target === groupNodeId
|
|
9973
|
-
);
|
|
9974
10687
|
animateLayout();
|
|
9975
10688
|
setNodes((prev) => {
|
|
9976
10689
|
const nextEdges = currentEdges.filter(
|
|
@@ -9983,9 +10696,19 @@ var NodeGraphBuilder = ({
|
|
|
9983
10696
|
}
|
|
9984
10697
|
const without = prev.filter(
|
|
9985
10698
|
(n) => n.id !== groupNodeId && !childNodeIds.has(n.id) && !(downstreamNodeIds.has(n.id) && !referencedByEdges.has(n.id))
|
|
9986
|
-
)
|
|
9987
|
-
|
|
9988
|
-
|
|
10699
|
+
).map((n) => {
|
|
10700
|
+
const stashedPosition = stashed?.nodePositions?.[n.id];
|
|
10701
|
+
if (!stashedPosition || n.parentId) return n;
|
|
10702
|
+
return { ...n, position: stashedPosition };
|
|
10703
|
+
});
|
|
10704
|
+
const next = [
|
|
10705
|
+
...without,
|
|
10706
|
+
{
|
|
10707
|
+
...originalNode,
|
|
10708
|
+
position: stashed?.nodePositions?.[groupNodeId] ?? expandedNode.position
|
|
10709
|
+
}
|
|
10710
|
+
];
|
|
10711
|
+
return next;
|
|
9989
10712
|
});
|
|
9990
10713
|
setEdges((prev) => {
|
|
9991
10714
|
const without = prev.filter(
|
|
@@ -10083,36 +10806,63 @@ var NodeGraphBuilder = ({
|
|
|
10083
10806
|
onNodeClick(node);
|
|
10084
10807
|
return;
|
|
10085
10808
|
}
|
|
10086
|
-
if (linksToVisualiser && onNavigate) {
|
|
10087
|
-
return;
|
|
10088
|
-
}
|
|
10089
10809
|
const isFlow = edgesRef.current.some(
|
|
10090
10810
|
(edge) => edge.type === "flow-edge"
|
|
10091
10811
|
);
|
|
10092
10812
|
const isEntityVisualizer = nodesRef.current.some(
|
|
10093
10813
|
(n) => n.type === "entities"
|
|
10094
10814
|
);
|
|
10095
|
-
|
|
10815
|
+
const isExpandableFlow = (node.type === "flows" || node.type === "flow") && Array.isArray(node.data?.expandedNodes) && node.data.expandedNodes.length > 0;
|
|
10816
|
+
if ((isFlow || isEntityVisualizer) && !isExpandableFlow) return;
|
|
10096
10817
|
if (node.type === "domain" || node.type === "domains") return;
|
|
10097
|
-
if (node.type
|
|
10818
|
+
if (isExpandedWrapper(node.type)) return;
|
|
10098
10819
|
if (node.type === "messageGroup") {
|
|
10099
10820
|
const groupData = node.data;
|
|
10100
10821
|
const groupNodeId = node.id;
|
|
10822
|
+
const currentGroupNode = getExpandedMessageGroupNode(
|
|
10823
|
+
nodesRef.current,
|
|
10824
|
+
groupNodeId
|
|
10825
|
+
);
|
|
10826
|
+
if (currentGroupNode?.type === "messageGroupExpanded") {
|
|
10827
|
+
const measured = currentGroupNode?.measured;
|
|
10828
|
+
const width = measured?.width ?? currentGroupNode.style?.width ?? 380;
|
|
10829
|
+
const height = measured?.height ?? currentGroupNode.style?.height ?? 300;
|
|
10830
|
+
setCenter(
|
|
10831
|
+
currentGroupNode.position.x + width / 2,
|
|
10832
|
+
currentGroupNode.position.y + height / 2,
|
|
10833
|
+
{
|
|
10834
|
+
duration: 300,
|
|
10835
|
+
zoom: Math.min(Math.max(getZoom(), 0.55), 1)
|
|
10836
|
+
}
|
|
10837
|
+
);
|
|
10838
|
+
return;
|
|
10839
|
+
}
|
|
10101
10840
|
const serviceNodeId = `${groupData.service.id}-${groupData.service.version}`;
|
|
10102
10841
|
const childCount = groupData.messages?.length || 0;
|
|
10103
10842
|
const containerWidth = 380;
|
|
10104
10843
|
const containerHeight = childCount * 190 + 100;
|
|
10844
|
+
const preExpansionEdges = edgesRef.current.filter(
|
|
10845
|
+
(e) => e.source === groupNodeId || e.target === groupNodeId
|
|
10846
|
+
);
|
|
10847
|
+
const preExpansionNodeIds = nodesRef.current.map((n) => n.id);
|
|
10848
|
+
const preExpansionNodePositions = Object.fromEntries(
|
|
10849
|
+
nodesRef.current.map((n) => [n.id, { ...n.position }])
|
|
10850
|
+
);
|
|
10105
10851
|
const expandedContainerNode = {
|
|
10106
10852
|
id: groupNodeId,
|
|
10107
|
-
// reuse the same ID
|
|
10108
10853
|
type: "messageGroupExpanded",
|
|
10109
10854
|
position: node.position,
|
|
10110
|
-
// will be recalculated by dagre
|
|
10111
10855
|
data: {
|
|
10112
10856
|
groupName: groupData.groupName,
|
|
10113
10857
|
direction: groupData.direction,
|
|
10114
10858
|
messageCount: childCount,
|
|
10115
|
-
onCollapse: groupNodeId
|
|
10859
|
+
onCollapse: groupNodeId,
|
|
10860
|
+
__preExpansion: {
|
|
10861
|
+
node,
|
|
10862
|
+
edges: preExpansionEdges,
|
|
10863
|
+
nodeIds: preExpansionNodeIds,
|
|
10864
|
+
nodePositions: preExpansionNodePositions
|
|
10865
|
+
}
|
|
10116
10866
|
},
|
|
10117
10867
|
style: {
|
|
10118
10868
|
width: containerWidth,
|
|
@@ -10172,24 +10922,19 @@ var NodeGraphBuilder = ({
|
|
|
10172
10922
|
});
|
|
10173
10923
|
animateLayout();
|
|
10174
10924
|
setNodes((prev) => {
|
|
10175
|
-
const
|
|
10176
|
-
const
|
|
10177
|
-
|
|
10178
|
-
|
|
10179
|
-
|
|
10180
|
-
const next = [
|
|
10181
|
-
...without,
|
|
10925
|
+
const downstreamX = groupData.direction === "sends" ? node.position.x + containerWidth + 260 : node.position.x - 420;
|
|
10926
|
+
const downstreamY = node.position.y + 40;
|
|
10927
|
+
return buildMessageGroupExpansionNodes({
|
|
10928
|
+
currentNodes: prev,
|
|
10929
|
+
groupNodeId,
|
|
10182
10930
|
expandedContainerNode,
|
|
10183
|
-
|
|
10184
|
-
|
|
10185
|
-
|
|
10186
|
-
|
|
10187
|
-
|
|
10188
|
-
|
|
10189
|
-
|
|
10190
|
-
...childEdges,
|
|
10191
|
-
...downstreamEdges
|
|
10192
|
-
]);
|
|
10931
|
+
childNodes,
|
|
10932
|
+
downstreamNodes,
|
|
10933
|
+
getDownstreamPosition: (_downstreamNode, index) => ({
|
|
10934
|
+
x: downstreamX,
|
|
10935
|
+
y: downstreamY + index * 190
|
|
10936
|
+
})
|
|
10937
|
+
});
|
|
10193
10938
|
});
|
|
10194
10939
|
setEdges((prev) => {
|
|
10195
10940
|
const without = prev.filter(
|
|
@@ -10198,6 +10943,12 @@ var NodeGraphBuilder = ({
|
|
|
10198
10943
|
return [...without, ...childEdges, ...downstreamEdges];
|
|
10199
10944
|
});
|
|
10200
10945
|
requestAnimationFrame(() => {
|
|
10946
|
+
let actualContainerBounds = {
|
|
10947
|
+
x: node.position.x,
|
|
10948
|
+
y: node.position.y,
|
|
10949
|
+
width: containerWidth,
|
|
10950
|
+
height: containerHeight
|
|
10951
|
+
};
|
|
10201
10952
|
setNodes((prev) => {
|
|
10202
10953
|
const children = prev.filter((n) => n.parentId === groupNodeId);
|
|
10203
10954
|
if (children.length === 0) return prev;
|
|
@@ -10217,8 +10968,20 @@ var NodeGraphBuilder = ({
|
|
|
10217
10968
|
const totalChildH = measurements.reduce((sum, m) => sum + m.h, 0) + gap * (measurements.length - 1);
|
|
10218
10969
|
const actualContainerH = headerH + totalChildH + padding * 2;
|
|
10219
10970
|
let currentY = headerH + padding;
|
|
10971
|
+
actualContainerBounds = {
|
|
10972
|
+
x: node.position.x,
|
|
10973
|
+
y: node.position.y,
|
|
10974
|
+
width: containerWidth,
|
|
10975
|
+
height: actualContainerH
|
|
10976
|
+
};
|
|
10220
10977
|
return prev.map((n) => {
|
|
10221
10978
|
if (n.id === groupNodeId) {
|
|
10979
|
+
actualContainerBounds = {
|
|
10980
|
+
x: n.position.x,
|
|
10981
|
+
y: n.position.y,
|
|
10982
|
+
width: containerWidth,
|
|
10983
|
+
height: actualContainerH
|
|
10984
|
+
};
|
|
10222
10985
|
return {
|
|
10223
10986
|
...n,
|
|
10224
10987
|
style: {
|
|
@@ -10236,13 +10999,202 @@ var NodeGraphBuilder = ({
|
|
|
10236
10999
|
return { ...n, position: { x, y } };
|
|
10237
11000
|
});
|
|
10238
11001
|
});
|
|
11002
|
+
requestAnimationFrame(() => {
|
|
11003
|
+
const groupNode = getNodes().find((n) => n.id === groupNodeId);
|
|
11004
|
+
const measured = groupNode?.measured;
|
|
11005
|
+
const width = measured?.width ?? groupNode?.style?.width ?? containerWidth;
|
|
11006
|
+
const height = measured?.height ?? groupNode?.style?.height ?? actualContainerBounds.height;
|
|
11007
|
+
const bounds = {
|
|
11008
|
+
x: groupNode?.position.x ?? actualContainerBounds.x,
|
|
11009
|
+
y: groupNode?.position.y ?? actualContainerBounds.y,
|
|
11010
|
+
width,
|
|
11011
|
+
height
|
|
11012
|
+
};
|
|
11013
|
+
makeRoomForRenderedExpandedGroup(groupNodeId, bounds);
|
|
11014
|
+
setCenter(bounds.x + width / 2, bounds.y + height / 2, {
|
|
11015
|
+
duration: 450,
|
|
11016
|
+
zoom: Math.min(Math.max(getZoom(), 0.55), 1)
|
|
11017
|
+
});
|
|
11018
|
+
});
|
|
11019
|
+
});
|
|
11020
|
+
return;
|
|
11021
|
+
}
|
|
11022
|
+
if (isExpandableFlow) {
|
|
11023
|
+
const flowData = node.data;
|
|
11024
|
+
const flowNodeId = node.id;
|
|
11025
|
+
const subFlowNodes = flowData.expandedNodes || [];
|
|
11026
|
+
const subFlowEdges = flowData.expandedEdges || [];
|
|
11027
|
+
const initialChildNodes = subFlowNodes.map((child) => ({
|
|
11028
|
+
...child,
|
|
11029
|
+
parentId: flowNodeId,
|
|
11030
|
+
extent: "parent",
|
|
11031
|
+
position: { x: 0, y: 0 }
|
|
11032
|
+
}));
|
|
11033
|
+
const CHILD_PADDING = 60;
|
|
11034
|
+
const HEADER_H = 60;
|
|
11035
|
+
const EST_W = 240;
|
|
11036
|
+
const EST_H = 120;
|
|
11037
|
+
const {
|
|
11038
|
+
positioned: childNodes,
|
|
11039
|
+
width: containerWidth,
|
|
11040
|
+
height: containerHeight
|
|
11041
|
+
} = layoutSubFlowChildren(
|
|
11042
|
+
initialChildNodes,
|
|
11043
|
+
subFlowEdges,
|
|
11044
|
+
() => ({ w: EST_W, h: EST_H }),
|
|
11045
|
+
{ padding: CHILD_PADDING, headerH: HEADER_H }
|
|
11046
|
+
);
|
|
11047
|
+
const preExpansionEdges = edgesRef.current.filter(
|
|
11048
|
+
(e) => e.source === flowNodeId || e.target === flowNodeId
|
|
11049
|
+
);
|
|
11050
|
+
const preExpansionNodeIds = nodesRef.current.map((n) => n.id);
|
|
11051
|
+
const expandedContainerNode = {
|
|
11052
|
+
id: flowNodeId,
|
|
11053
|
+
type: "flowExpanded",
|
|
11054
|
+
position: node.position,
|
|
11055
|
+
data: {
|
|
11056
|
+
flowName: flowData.flow?.name || flowData.flow?.data?.name,
|
|
11057
|
+
version: flowData.flow?.version || flowData.flow?.data?.version,
|
|
11058
|
+
__preExpansion: {
|
|
11059
|
+
node,
|
|
11060
|
+
edges: preExpansionEdges,
|
|
11061
|
+
nodeIds: preExpansionNodeIds
|
|
11062
|
+
}
|
|
11063
|
+
},
|
|
11064
|
+
style: {
|
|
11065
|
+
width: containerWidth,
|
|
11066
|
+
height: containerHeight,
|
|
11067
|
+
background: "transparent",
|
|
11068
|
+
border: "none",
|
|
11069
|
+
padding: 0,
|
|
11070
|
+
overflow: "visible"
|
|
11071
|
+
}
|
|
11072
|
+
};
|
|
11073
|
+
const childIds = new Set(childNodes.map((n) => n.id));
|
|
11074
|
+
const hasIncoming = /* @__PURE__ */ new Set();
|
|
11075
|
+
const hasOutgoing = /* @__PURE__ */ new Set();
|
|
11076
|
+
for (const e of subFlowEdges) {
|
|
11077
|
+
if (childIds.has(e.target)) hasIncoming.add(e.target);
|
|
11078
|
+
if (childIds.has(e.source)) hasOutgoing.add(e.source);
|
|
11079
|
+
}
|
|
11080
|
+
const entryChildIds = childNodes.map((n) => n.id).filter((id) => !hasIncoming.has(id));
|
|
11081
|
+
const terminalChildIds = childNodes.map((n) => n.id).filter((id) => !hasOutgoing.has(id));
|
|
11082
|
+
const currentEdges = edgesRef.current;
|
|
11083
|
+
const predecessorEdges = currentEdges.filter(
|
|
11084
|
+
(e) => e.target === flowNodeId
|
|
11085
|
+
);
|
|
11086
|
+
const successorEdges = currentEdges.filter(
|
|
11087
|
+
(e) => e.source === flowNodeId
|
|
11088
|
+
);
|
|
11089
|
+
const stitchedPredecessors = [];
|
|
11090
|
+
for (const e of predecessorEdges) {
|
|
11091
|
+
for (const entryId of entryChildIds.length > 0 ? entryChildIds : [flowNodeId]) {
|
|
11092
|
+
stitchedPredecessors.push({
|
|
11093
|
+
...e,
|
|
11094
|
+
id: `${e.id}__to__${entryId}`,
|
|
11095
|
+
target: entryId
|
|
11096
|
+
});
|
|
11097
|
+
}
|
|
11098
|
+
}
|
|
11099
|
+
const stitchedSuccessors = [];
|
|
11100
|
+
for (const e of successorEdges) {
|
|
11101
|
+
for (const terminalId of terminalChildIds.length > 0 ? terminalChildIds : [flowNodeId]) {
|
|
11102
|
+
stitchedSuccessors.push({
|
|
11103
|
+
...e,
|
|
11104
|
+
id: `${e.id}__from__${terminalId}`,
|
|
11105
|
+
source: terminalId
|
|
11106
|
+
});
|
|
11107
|
+
}
|
|
11108
|
+
}
|
|
11109
|
+
animateLayout();
|
|
11110
|
+
setNodes((prev) => {
|
|
11111
|
+
const without = prev.filter((n) => n.id !== flowNodeId);
|
|
11112
|
+
const next = [...without, expandedContainerNode, ...childNodes];
|
|
11113
|
+
const nextEdges = [
|
|
11114
|
+
...currentEdges.filter(
|
|
11115
|
+
(e) => e.source !== flowNodeId && e.target !== flowNodeId
|
|
11116
|
+
),
|
|
11117
|
+
...subFlowEdges,
|
|
11118
|
+
...stitchedPredecessors,
|
|
11119
|
+
...stitchedSuccessors
|
|
11120
|
+
];
|
|
11121
|
+
return relayoutGraph(next, nextEdges);
|
|
11122
|
+
});
|
|
11123
|
+
setEdges((prev) => {
|
|
11124
|
+
const without = prev.filter(
|
|
11125
|
+
(e) => e.source !== flowNodeId && e.target !== flowNodeId
|
|
11126
|
+
);
|
|
11127
|
+
return [
|
|
11128
|
+
...without,
|
|
11129
|
+
...subFlowEdges,
|
|
11130
|
+
...stitchedPredecessors,
|
|
11131
|
+
...stitchedSuccessors
|
|
11132
|
+
];
|
|
11133
|
+
});
|
|
11134
|
+
requestAnimationFrame(() => {
|
|
11135
|
+
const currentChildren = nodesRef.current.filter(
|
|
11136
|
+
(n) => n.parentId === flowNodeId
|
|
11137
|
+
);
|
|
11138
|
+
if (currentChildren.length === 0) return;
|
|
11139
|
+
const measurements = /* @__PURE__ */ new Map();
|
|
11140
|
+
currentChildren.forEach((n) => {
|
|
11141
|
+
const el = document.querySelector(
|
|
11142
|
+
`[data-id="${n.id}"]`
|
|
11143
|
+
);
|
|
11144
|
+
measurements.set(n.id, {
|
|
11145
|
+
w: el?.offsetWidth ?? EST_W,
|
|
11146
|
+
h: el?.offsetHeight ?? EST_H
|
|
11147
|
+
});
|
|
11148
|
+
});
|
|
11149
|
+
const {
|
|
11150
|
+
positions,
|
|
11151
|
+
width: actualContainerW,
|
|
11152
|
+
height: actualContainerH
|
|
11153
|
+
} = layoutSubFlowChildren(
|
|
11154
|
+
currentChildren,
|
|
11155
|
+
subFlowEdges,
|
|
11156
|
+
(n) => measurements.get(n.id) ?? { w: EST_W, h: EST_H },
|
|
11157
|
+
{ padding: CHILD_PADDING, headerH: HEADER_H }
|
|
11158
|
+
);
|
|
11159
|
+
setNodes(
|
|
11160
|
+
(prev) => prev.map((n) => {
|
|
11161
|
+
if (n.id === flowNodeId) {
|
|
11162
|
+
return {
|
|
11163
|
+
...n,
|
|
11164
|
+
style: {
|
|
11165
|
+
...n.style,
|
|
11166
|
+
width: actualContainerW,
|
|
11167
|
+
height: actualContainerH
|
|
11168
|
+
}
|
|
11169
|
+
};
|
|
11170
|
+
}
|
|
11171
|
+
if (n.parentId !== flowNodeId) return n;
|
|
11172
|
+
const p = positions.get(n.id);
|
|
11173
|
+
if (!p) return n;
|
|
11174
|
+
return { ...n, position: { x: p.x, y: p.y } };
|
|
11175
|
+
})
|
|
11176
|
+
);
|
|
11177
|
+
});
|
|
11178
|
+
requestAnimationFrame(() => {
|
|
11179
|
+
fitView({ duration: 400, padding: 0.2 });
|
|
10239
11180
|
});
|
|
10240
11181
|
return;
|
|
10241
11182
|
}
|
|
11183
|
+
if (linksToVisualiser && onNavigate) {
|
|
11184
|
+
return;
|
|
11185
|
+
}
|
|
10242
11186
|
setFocusedNodeId(node.id);
|
|
10243
11187
|
setFocusModeOpen(true);
|
|
10244
11188
|
},
|
|
10245
|
-
[
|
|
11189
|
+
[
|
|
11190
|
+
onNodeClick,
|
|
11191
|
+
linksToVisualiser,
|
|
11192
|
+
onNavigate,
|
|
11193
|
+
makeRoomForRenderedExpandedGroup,
|
|
11194
|
+
getNodes,
|
|
11195
|
+
getZoom,
|
|
11196
|
+
setCenter
|
|
11197
|
+
]
|
|
10246
11198
|
);
|
|
10247
11199
|
const toggleAnimateMessages = useCallback12(() => {
|
|
10248
11200
|
setAnimateMessages((prev) => {
|
|
@@ -10472,13 +11424,15 @@ var NodeGraphBuilder = ({
|
|
|
10472
11424
|
}, [getNodes, downloadImage, title]);
|
|
10473
11425
|
const handleLegendClick = useCallback12(
|
|
10474
11426
|
(collectionType, groupId) => {
|
|
11427
|
+
const isLegendTarget = (node) => {
|
|
11428
|
+
if (groupId) {
|
|
11429
|
+
return node.data.group && node.data.group?.id === groupId;
|
|
11430
|
+
}
|
|
11431
|
+
return node.type === collectionType;
|
|
11432
|
+
};
|
|
10475
11433
|
const updatedNodes = nodes.map((node) => {
|
|
10476
|
-
if (
|
|
11434
|
+
if (isLegendTarget(node)) {
|
|
10477
11435
|
return { ...node, style: { ...node.style, opacity: 1 } };
|
|
10478
|
-
} else {
|
|
10479
|
-
if (node.type === collectionType) {
|
|
10480
|
-
return { ...node, style: { ...node.style, opacity: 1 } };
|
|
10481
|
-
}
|
|
10482
11436
|
}
|
|
10483
11437
|
return { ...node, style: { ...node.style, opacity: 0.1 } };
|
|
10484
11438
|
});
|
|
@@ -10493,10 +11447,12 @@ var NodeGraphBuilder = ({
|
|
|
10493
11447
|
});
|
|
10494
11448
|
setNodes(updatedNodes);
|
|
10495
11449
|
setEdges(updatedEdges);
|
|
11450
|
+
const targetNodes = updatedNodes.filter(isLegendTarget);
|
|
11451
|
+
if (targetNodes.length === 0) return;
|
|
10496
11452
|
fitView({
|
|
10497
11453
|
padding: 0.2,
|
|
10498
11454
|
duration: 800,
|
|
10499
|
-
nodes:
|
|
11455
|
+
nodes: targetNodes
|
|
10500
11456
|
});
|
|
10501
11457
|
},
|
|
10502
11458
|
[nodes, edges, setNodes, setEdges, fitView]
|
|
@@ -10670,7 +11626,7 @@ var NodeGraphBuilder = ({
|
|
|
10670
11626
|
() => edges.some((edge) => edge.type === "flow-edge"),
|
|
10671
11627
|
[edges]
|
|
10672
11628
|
);
|
|
10673
|
-
return /* @__PURE__ */
|
|
11629
|
+
return /* @__PURE__ */ jsx43(
|
|
10674
11630
|
"div",
|
|
10675
11631
|
{
|
|
10676
11632
|
ref: reactFlowWrapperRef,
|
|
@@ -10682,22 +11638,22 @@ var NodeGraphBuilder = ({
|
|
|
10682
11638
|
display: "flex",
|
|
10683
11639
|
flexDirection: "column"
|
|
10684
11640
|
},
|
|
10685
|
-
children: /* @__PURE__ */
|
|
10686
|
-
isMermaidView ? /* @__PURE__ */
|
|
10687
|
-
/* @__PURE__ */
|
|
10688
|
-
/* @__PURE__ */
|
|
10689
|
-
/* @__PURE__ */
|
|
11641
|
+
children: /* @__PURE__ */ jsxs41(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
|
|
11642
|
+
isMermaidView ? /* @__PURE__ */ jsxs41(Fragment12, { children: [
|
|
11643
|
+
/* @__PURE__ */ jsxs41("div", { className: "w-full pr-6 flex space-x-2 justify-between items-center bg-[rgb(var(--ec-page-bg))] border-b border-[rgb(var(--ec-page-border))] p-4", children: [
|
|
11644
|
+
/* @__PURE__ */ jsx43("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs41(DropdownMenu2.Root, { children: [
|
|
11645
|
+
/* @__PURE__ */ jsx43(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
|
|
10690
11646
|
"button",
|
|
10691
11647
|
{
|
|
10692
11648
|
className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
|
|
10693
11649
|
"aria-label": "Open menu",
|
|
10694
11650
|
children: [
|
|
10695
|
-
title && /* @__PURE__ */
|
|
10696
|
-
/* @__PURE__ */
|
|
11651
|
+
title && /* @__PURE__ */ jsx43("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
|
|
11652
|
+
/* @__PURE__ */ jsx43(MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
|
|
10697
11653
|
]
|
|
10698
11654
|
}
|
|
10699
11655
|
) }),
|
|
10700
|
-
/* @__PURE__ */
|
|
11656
|
+
/* @__PURE__ */ jsx43(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs41(
|
|
10701
11657
|
DropdownMenu2.Content,
|
|
10702
11658
|
{
|
|
10703
11659
|
className: "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5 animate-in fade-in zoom-in-95 duration-200",
|
|
@@ -10705,8 +11661,8 @@ var NodeGraphBuilder = ({
|
|
|
10705
11661
|
align: "end",
|
|
10706
11662
|
alignOffset: -180,
|
|
10707
11663
|
children: [
|
|
10708
|
-
/* @__PURE__ */
|
|
10709
|
-
/* @__PURE__ */
|
|
11664
|
+
/* @__PURE__ */ jsx43(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
|
|
11665
|
+
/* @__PURE__ */ jsx43(
|
|
10710
11666
|
VisualizerDropdownContent_default,
|
|
10711
11667
|
{
|
|
10712
11668
|
isMermaidView,
|
|
@@ -10736,7 +11692,7 @@ var NodeGraphBuilder = ({
|
|
|
10736
11692
|
}
|
|
10737
11693
|
) })
|
|
10738
11694
|
] }) }),
|
|
10739
|
-
mode === "full" && showSearch && /* @__PURE__ */
|
|
11695
|
+
mode === "full" && showSearch && /* @__PURE__ */ jsx43("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx43("div", { className: "w-96", children: /* @__PURE__ */ jsx43(
|
|
10740
11696
|
VisualiserSearch_default,
|
|
10741
11697
|
{
|
|
10742
11698
|
ref: searchRef,
|
|
@@ -10746,7 +11702,7 @@ var NodeGraphBuilder = ({
|
|
|
10746
11702
|
}
|
|
10747
11703
|
) }) })
|
|
10748
11704
|
] }),
|
|
10749
|
-
/* @__PURE__ */
|
|
11705
|
+
/* @__PURE__ */ jsx43("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx43(
|
|
10750
11706
|
MermaidView_default,
|
|
10751
11707
|
{
|
|
10752
11708
|
nodes,
|
|
@@ -10754,7 +11710,7 @@ var NodeGraphBuilder = ({
|
|
|
10754
11710
|
maxTextSize
|
|
10755
11711
|
}
|
|
10756
11712
|
) })
|
|
10757
|
-
] }) : /* @__PURE__ */
|
|
11713
|
+
] }) : /* @__PURE__ */ jsxs41(
|
|
10758
11714
|
ReactFlow2,
|
|
10759
11715
|
{
|
|
10760
11716
|
nodeTypes,
|
|
@@ -10780,30 +11736,30 @@ var NodeGraphBuilder = ({
|
|
|
10780
11736
|
zoomOnScroll,
|
|
10781
11737
|
className: "relative",
|
|
10782
11738
|
children: [
|
|
10783
|
-
/* @__PURE__ */
|
|
11739
|
+
/* @__PURE__ */ jsxs41(
|
|
10784
11740
|
Panel,
|
|
10785
11741
|
{
|
|
10786
11742
|
position: "top-center",
|
|
10787
11743
|
className: "w-full pr-6 pointer-events-none",
|
|
10788
11744
|
children: [
|
|
10789
|
-
/* @__PURE__ */
|
|
10790
|
-
/* @__PURE__ */
|
|
10791
|
-
/* @__PURE__ */
|
|
11745
|
+
/* @__PURE__ */ jsxs41("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
|
|
11746
|
+
/* @__PURE__ */ jsx43("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs41(DropdownMenu2.Root, { children: [
|
|
11747
|
+
/* @__PURE__ */ jsx43(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
|
|
10792
11748
|
"button",
|
|
10793
11749
|
{
|
|
10794
11750
|
className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
|
|
10795
11751
|
"aria-label": "Open menu",
|
|
10796
11752
|
children: [
|
|
10797
|
-
title && /* @__PURE__ */
|
|
10798
|
-
/* @__PURE__ */
|
|
11753
|
+
title && /* @__PURE__ */ jsx43("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
|
|
11754
|
+
/* @__PURE__ */ jsx43(MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
|
|
10799
11755
|
]
|
|
10800
11756
|
}
|
|
10801
11757
|
) }),
|
|
10802
|
-
/* @__PURE__ */
|
|
11758
|
+
/* @__PURE__ */ jsx43(
|
|
10803
11759
|
DropdownMenu2.Portal,
|
|
10804
11760
|
{
|
|
10805
11761
|
container: reactFlowWrapperRef.current,
|
|
10806
|
-
children: /* @__PURE__ */
|
|
11762
|
+
children: /* @__PURE__ */ jsxs41(
|
|
10807
11763
|
DropdownMenu2.Content,
|
|
10808
11764
|
{
|
|
10809
11765
|
className: "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5 animate-in fade-in zoom-in-95 duration-200",
|
|
@@ -10811,8 +11767,8 @@ var NodeGraphBuilder = ({
|
|
|
10811
11767
|
align: "end",
|
|
10812
11768
|
alignOffset: -180,
|
|
10813
11769
|
children: [
|
|
10814
|
-
/* @__PURE__ */
|
|
10815
|
-
/* @__PURE__ */
|
|
11770
|
+
/* @__PURE__ */ jsx43(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
|
|
11771
|
+
/* @__PURE__ */ jsx43(
|
|
10816
11772
|
VisualizerDropdownContent_default,
|
|
10817
11773
|
{
|
|
10818
11774
|
isMermaidView,
|
|
@@ -10846,7 +11802,7 @@ var NodeGraphBuilder = ({
|
|
|
10846
11802
|
}
|
|
10847
11803
|
)
|
|
10848
11804
|
] }) }),
|
|
10849
|
-
mode === "full" && showSearch && /* @__PURE__ */
|
|
11805
|
+
mode === "full" && showSearch && /* @__PURE__ */ jsx43("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx43("div", { className: "w-96", children: /* @__PURE__ */ jsx43(
|
|
10850
11806
|
VisualiserSearch_default,
|
|
10851
11807
|
{
|
|
10852
11808
|
ref: searchRef,
|
|
@@ -10856,9 +11812,9 @@ var NodeGraphBuilder = ({
|
|
|
10856
11812
|
}
|
|
10857
11813
|
) }) })
|
|
10858
11814
|
] }),
|
|
10859
|
-
links.length > 0 && /* @__PURE__ */
|
|
10860
|
-
/* @__PURE__ */
|
|
10861
|
-
/* @__PURE__ */
|
|
11815
|
+
links.length > 0 && /* @__PURE__ */ jsx43("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs41("div", { className: "relative flex items-center -mt-1", children: [
|
|
11816
|
+
/* @__PURE__ */ jsx43("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx43(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
|
|
11817
|
+
/* @__PURE__ */ jsx43(
|
|
10862
11818
|
"select",
|
|
10863
11819
|
{
|
|
10864
11820
|
value: links.find(
|
|
@@ -10873,10 +11829,10 @@ var NodeGraphBuilder = ({
|
|
|
10873
11829
|
},
|
|
10874
11830
|
className: "appearance-none pl-7 pr-6 py-0 text-[14px] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] rounded-md border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.5)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))]",
|
|
10875
11831
|
style: { minWidth: 120, height: "26px" },
|
|
10876
|
-
children: links.map((link) => /* @__PURE__ */
|
|
11832
|
+
children: links.map((link) => /* @__PURE__ */ jsx43("option", { value: link.url, children: link.label }, link.url))
|
|
10877
11833
|
}
|
|
10878
11834
|
),
|
|
10879
|
-
/* @__PURE__ */
|
|
11835
|
+
/* @__PURE__ */ jsx43("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx43(
|
|
10880
11836
|
"svg",
|
|
10881
11837
|
{
|
|
10882
11838
|
className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]",
|
|
@@ -10884,7 +11840,7 @@ var NodeGraphBuilder = ({
|
|
|
10884
11840
|
stroke: "currentColor",
|
|
10885
11841
|
strokeWidth: "2",
|
|
10886
11842
|
viewBox: "0 0 24 24",
|
|
10887
|
-
children: /* @__PURE__ */
|
|
11843
|
+
children: /* @__PURE__ */ jsx43(
|
|
10888
11844
|
"path",
|
|
10889
11845
|
{
|
|
10890
11846
|
strokeLinecap: "round",
|
|
@@ -10898,9 +11854,9 @@ var NodeGraphBuilder = ({
|
|
|
10898
11854
|
]
|
|
10899
11855
|
}
|
|
10900
11856
|
),
|
|
10901
|
-
includeBackground && /* @__PURE__ */
|
|
10902
|
-
includeBackground && /* @__PURE__ */
|
|
10903
|
-
showMinimap && /* @__PURE__ */
|
|
11857
|
+
includeBackground && /* @__PURE__ */ jsx43(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
|
|
11858
|
+
includeBackground && /* @__PURE__ */ jsx43(Controls2, {}),
|
|
11859
|
+
showMinimap && /* @__PURE__ */ jsx43(
|
|
10904
11860
|
MiniMap,
|
|
10905
11861
|
{
|
|
10906
11862
|
nodeStrokeWidth: 3,
|
|
@@ -10909,24 +11865,24 @@ var NodeGraphBuilder = ({
|
|
|
10909
11865
|
style: MINIMAP_STYLE
|
|
10910
11866
|
}
|
|
10911
11867
|
),
|
|
10912
|
-
isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */
|
|
11868
|
+
isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx43(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx43(
|
|
10913
11869
|
StepWalkthrough_default,
|
|
10914
11870
|
{
|
|
10915
|
-
nodes,
|
|
10916
|
-
edges,
|
|
11871
|
+
nodes: walkthroughNodes,
|
|
11872
|
+
edges: walkthroughEdges,
|
|
10917
11873
|
isFlowVisualization,
|
|
10918
11874
|
onStepChange: handleStepChange,
|
|
10919
11875
|
mode
|
|
10920
11876
|
}
|
|
10921
11877
|
) }),
|
|
10922
|
-
isDevMode && hasLayoutChanges && /* @__PURE__ */
|
|
11878
|
+
isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx43(
|
|
10923
11879
|
Panel,
|
|
10924
11880
|
{
|
|
10925
11881
|
position: "bottom-left",
|
|
10926
11882
|
style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
|
|
10927
|
-
children: /* @__PURE__ */
|
|
10928
|
-
/* @__PURE__ */
|
|
10929
|
-
/* @__PURE__ */
|
|
11883
|
+
children: /* @__PURE__ */ jsxs41("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3", children: [
|
|
11884
|
+
/* @__PURE__ */ jsx43("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
|
|
11885
|
+
/* @__PURE__ */ jsx43(
|
|
10930
11886
|
"button",
|
|
10931
11887
|
{
|
|
10932
11888
|
onClick: handleQuickSaveLayout,
|
|
@@ -10938,7 +11894,7 @@ var NodeGraphBuilder = ({
|
|
|
10938
11894
|
] })
|
|
10939
11895
|
}
|
|
10940
11896
|
),
|
|
10941
|
-
includeKey && /* @__PURE__ */
|
|
11897
|
+
includeKey && /* @__PURE__ */ jsx43(
|
|
10942
11898
|
LegendPanel,
|
|
10943
11899
|
{
|
|
10944
11900
|
legend,
|
|
@@ -10949,14 +11905,14 @@ var NodeGraphBuilder = ({
|
|
|
10949
11905
|
]
|
|
10950
11906
|
}
|
|
10951
11907
|
),
|
|
10952
|
-
/* @__PURE__ */
|
|
11908
|
+
/* @__PURE__ */ jsx43(
|
|
10953
11909
|
StudioModal_default,
|
|
10954
11910
|
{
|
|
10955
11911
|
isOpen: isStudioModalOpen || false,
|
|
10956
11912
|
onClose: () => setIsStudioModalOpen(false)
|
|
10957
11913
|
}
|
|
10958
11914
|
),
|
|
10959
|
-
/* @__PURE__ */
|
|
11915
|
+
/* @__PURE__ */ jsx43(
|
|
10960
11916
|
FocusModeModal_default,
|
|
10961
11917
|
{
|
|
10962
11918
|
isOpen: focusModeOpen,
|
|
@@ -10970,7 +11926,7 @@ var NodeGraphBuilder = ({
|
|
|
10970
11926
|
edgeTypes: edgeTypes2
|
|
10971
11927
|
}
|
|
10972
11928
|
),
|
|
10973
|
-
/* @__PURE__ */
|
|
11929
|
+
/* @__PURE__ */ jsx43(
|
|
10974
11930
|
AllNotesModal,
|
|
10975
11931
|
{
|
|
10976
11932
|
noteGroups: allNoteGroups,
|
|
@@ -10979,8 +11935,8 @@ var NodeGraphBuilder = ({
|
|
|
10979
11935
|
nodes
|
|
10980
11936
|
}
|
|
10981
11937
|
),
|
|
10982
|
-
isShareModalOpen && /* @__PURE__ */
|
|
10983
|
-
/* @__PURE__ */
|
|
11938
|
+
isShareModalOpen && /* @__PURE__ */ jsxs41(Fragment12, { children: [
|
|
11939
|
+
/* @__PURE__ */ jsx43(
|
|
10984
11940
|
"div",
|
|
10985
11941
|
{
|
|
10986
11942
|
className: "fixed inset-0 bg-black/20 z-40",
|
|
@@ -10988,13 +11944,13 @@ var NodeGraphBuilder = ({
|
|
|
10988
11944
|
style: { animation: "fadeIn 150ms ease-out" }
|
|
10989
11945
|
}
|
|
10990
11946
|
),
|
|
10991
|
-
/* @__PURE__ */
|
|
11947
|
+
/* @__PURE__ */ jsxs41(
|
|
10992
11948
|
"div",
|
|
10993
11949
|
{
|
|
10994
11950
|
className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[rgb(var(--ec-page-bg))] rounded-lg shadow-xl z-50 w-full max-w-md p-6 border border-[rgb(var(--ec-page-border))]",
|
|
10995
11951
|
style: { animation: "slideInCenter 250ms ease-out" },
|
|
10996
11952
|
children: [
|
|
10997
|
-
/* @__PURE__ */
|
|
11953
|
+
/* @__PURE__ */ jsx43("style", { children: `
|
|
10998
11954
|
@keyframes fadeIn {
|
|
10999
11955
|
from { opacity: 0; }
|
|
11000
11956
|
to { opacity: 1; }
|
|
@@ -11004,21 +11960,21 @@ var NodeGraphBuilder = ({
|
|
|
11004
11960
|
to { opacity: 1; transform: translate(-50%, -50%); }
|
|
11005
11961
|
}
|
|
11006
11962
|
` }),
|
|
11007
|
-
/* @__PURE__ */
|
|
11008
|
-
/* @__PURE__ */
|
|
11009
|
-
/* @__PURE__ */
|
|
11963
|
+
/* @__PURE__ */ jsxs41("div", { className: "flex justify-between items-start mb-4", children: [
|
|
11964
|
+
/* @__PURE__ */ jsx43("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
|
|
11965
|
+
/* @__PURE__ */ jsx43(
|
|
11010
11966
|
"button",
|
|
11011
11967
|
{
|
|
11012
11968
|
onClick: () => setIsShareModalOpen(false),
|
|
11013
11969
|
className: "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors",
|
|
11014
11970
|
"aria-label": "Close modal",
|
|
11015
|
-
children: /* @__PURE__ */
|
|
11971
|
+
children: /* @__PURE__ */ jsx43(ExternalLink2, { className: "w-5 h-5 rotate-180" })
|
|
11016
11972
|
}
|
|
11017
11973
|
)
|
|
11018
11974
|
] }),
|
|
11019
|
-
/* @__PURE__ */
|
|
11020
|
-
/* @__PURE__ */
|
|
11021
|
-
/* @__PURE__ */
|
|
11975
|
+
/* @__PURE__ */ jsx43("p", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] mb-4", children: "Share this link with your team to let them view this visualization." }),
|
|
11976
|
+
/* @__PURE__ */ jsxs41("div", { className: "flex gap-2", children: [
|
|
11977
|
+
/* @__PURE__ */ jsx43(
|
|
11022
11978
|
"input",
|
|
11023
11979
|
{
|
|
11024
11980
|
type: "text",
|
|
@@ -11027,15 +11983,15 @@ var NodeGraphBuilder = ({
|
|
|
11027
11983
|
className: "flex-1 px-3 py-2.5 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] rounded-md text-[rgb(var(--ec-input-text))] text-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
|
|
11028
11984
|
}
|
|
11029
11985
|
),
|
|
11030
|
-
/* @__PURE__ */
|
|
11986
|
+
/* @__PURE__ */ jsxs41(
|
|
11031
11987
|
"button",
|
|
11032
11988
|
{
|
|
11033
11989
|
onClick: handleCopyShareUrl,
|
|
11034
11990
|
className: `px-4 py-2.5 rounded-md font-medium transition-all duration-200 flex items-center gap-2 ${shareUrlCopySuccess ? "bg-green-500 text-white" : "bg-[rgb(var(--ec-accent))] text-white hover:opacity-90"}`,
|
|
11035
11991
|
"aria-label": shareUrlCopySuccess ? "Copied!" : "Copy link",
|
|
11036
11992
|
children: [
|
|
11037
|
-
shareUrlCopySuccess ? /* @__PURE__ */
|
|
11038
|
-
/* @__PURE__ */
|
|
11993
|
+
shareUrlCopySuccess ? /* @__PURE__ */ jsx43(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx43(ClipboardIcon3, { className: "w-4 h-4" }),
|
|
11994
|
+
/* @__PURE__ */ jsx43("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
|
|
11039
11995
|
]
|
|
11040
11996
|
}
|
|
11041
11997
|
)
|
|
@@ -11114,9 +12070,9 @@ var NodeGraph = ({
|
|
|
11114
12070
|
}
|
|
11115
12071
|
}, []);
|
|
11116
12072
|
if (!elem) return null;
|
|
11117
|
-
return /* @__PURE__ */
|
|
11118
|
-
/* @__PURE__ */
|
|
11119
|
-
/* @__PURE__ */
|
|
12073
|
+
return /* @__PURE__ */ jsx43("div", { children: createPortal(
|
|
12074
|
+
/* @__PURE__ */ jsxs41(ReactFlowProvider2, { children: [
|
|
12075
|
+
/* @__PURE__ */ jsx43(
|
|
11120
12076
|
NodeGraphBuilder,
|
|
11121
12077
|
{
|
|
11122
12078
|
edges,
|
|
@@ -11148,11 +12104,11 @@ var NodeGraph = ({
|
|
|
11148
12104
|
onResetLayout
|
|
11149
12105
|
}
|
|
11150
12106
|
),
|
|
11151
|
-
showFooter && /* @__PURE__ */
|
|
11152
|
-
footerLabel && /* @__PURE__ */
|
|
11153
|
-
href && /* @__PURE__ */
|
|
11154
|
-
/* @__PURE__ */
|
|
11155
|
-
/* @__PURE__ */
|
|
12107
|
+
showFooter && /* @__PURE__ */ jsxs41("div", { className: "flex justify-between", id: "visualiser-footer", children: [
|
|
12108
|
+
footerLabel && /* @__PURE__ */ jsx43("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx43("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
|
|
12109
|
+
href && /* @__PURE__ */ jsxs41("div", { className: "py-2 w-full text-right flex justify-between", children: [
|
|
12110
|
+
/* @__PURE__ */ jsx43("span", {}),
|
|
12111
|
+
/* @__PURE__ */ jsxs41(
|
|
11156
12112
|
"a",
|
|
11157
12113
|
{
|
|
11158
12114
|
className: " text-sm underline text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]",
|
|
@@ -11189,6 +12145,7 @@ var nodeComponents = {
|
|
|
11189
12145
|
domain: Domain_default,
|
|
11190
12146
|
entity: Entity_default,
|
|
11191
12147
|
flow: Flow_default,
|
|
12148
|
+
flowExpanded: FlowExpandedNode_default,
|
|
11192
12149
|
group: GroupNode_default,
|
|
11193
12150
|
step: Step_default,
|
|
11194
12151
|
user: User_default,
|
|
@@ -11231,6 +12188,7 @@ export {
|
|
|
11231
12188
|
ExternalSystem2_default as ExternalSystem2Node,
|
|
11232
12189
|
FieldNode_default as Field,
|
|
11233
12190
|
FlowEdge_default as FlowEdge,
|
|
12191
|
+
FlowExpandedNode_default as FlowExpandedNode,
|
|
11234
12192
|
Flow_default as FlowNode,
|
|
11235
12193
|
FocusModeModal_default as FocusModeModal,
|
|
11236
12194
|
GroupNode_default as GroupNode,
|