@eventcatalog/visualiser 3.15.4 → 3.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +16 -10
- package/dist/index.d.ts +16 -10
- package/dist/index.js +1088 -934
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +815 -663
- package/dist/index.mjs.map +1 -1
- package/dist/styles-core.css +9 -0
- package/dist/styles.css +9 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -47,6 +47,7 @@ __export(index_exports, {
|
|
|
47
47
|
Event: () => EventNode_default,
|
|
48
48
|
ExternalSystem: () => ExternalSystem_default,
|
|
49
49
|
ExternalSystem2Node: () => ExternalSystem2_default,
|
|
50
|
+
Field: () => FieldNode_default,
|
|
50
51
|
FlowEdge: () => FlowEdge_default,
|
|
51
52
|
FlowNode: () => Flow_default,
|
|
52
53
|
FocusModeModal: () => FocusModeModal_default,
|
|
@@ -81,6 +82,7 @@ __export(index_exports, {
|
|
|
81
82
|
eventConfig: () => config_default,
|
|
82
83
|
exportNodeGraphForStudio: () => exportNodeGraphForStudio,
|
|
83
84
|
externalSystemConfig: () => config_default4,
|
|
85
|
+
fieldConfig: () => config_default5,
|
|
84
86
|
generateIdForNode: () => generateIdForNode,
|
|
85
87
|
generateIdForNodes: () => generateIdForNodes,
|
|
86
88
|
generatedIdForEdge: () => generatedIdForEdge,
|
|
@@ -96,11 +98,10 @@ __export(index_exports, {
|
|
|
96
98
|
module.exports = __toCommonJS(index_exports);
|
|
97
99
|
|
|
98
100
|
// src/components/NodeGraph.tsx
|
|
99
|
-
var
|
|
101
|
+
var import_react74 = require("react");
|
|
100
102
|
var import_react_dom = require("react-dom");
|
|
101
|
-
var
|
|
102
|
-
var
|
|
103
|
-
var import_lucide_react25 = require("lucide-react");
|
|
103
|
+
var import_react75 = require("@xyflow/react");
|
|
104
|
+
var import_lucide_react27 = require("lucide-react");
|
|
104
105
|
var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
|
|
105
106
|
var import_html_to_image = require("html-to-image");
|
|
106
107
|
|
|
@@ -3779,9 +3780,135 @@ var NoteNode_default = (0, import_react29.memo)(function NoteNodeComponent({
|
|
|
3779
3780
|
] });
|
|
3780
3781
|
});
|
|
3781
3782
|
|
|
3782
|
-
// src/nodes/
|
|
3783
|
+
// src/nodes/field/FieldNode.tsx
|
|
3783
3784
|
var import_react30 = require("react");
|
|
3785
|
+
var import_lucide_react16 = require("lucide-react");
|
|
3784
3786
|
var import_react31 = require("@xyflow/react");
|
|
3787
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3788
|
+
function GlowHandle13({ side }) {
|
|
3789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3790
|
+
"div",
|
|
3791
|
+
{
|
|
3792
|
+
style: {
|
|
3793
|
+
position: "absolute",
|
|
3794
|
+
top: "50%",
|
|
3795
|
+
[side]: -6,
|
|
3796
|
+
transform: "translateY(-50%)",
|
|
3797
|
+
width: 12,
|
|
3798
|
+
height: 12,
|
|
3799
|
+
borderRadius: "50%",
|
|
3800
|
+
background: "linear-gradient(135deg, #06b6d4, #0891b2)",
|
|
3801
|
+
border: "2px solid rgb(var(--ec-page-bg))",
|
|
3802
|
+
zIndex: 20,
|
|
3803
|
+
animation: "ec-handle-pulse 2s ease-in-out infinite",
|
|
3804
|
+
pointerEvents: "none"
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
);
|
|
3808
|
+
}
|
|
3809
|
+
function classNames11(...classes) {
|
|
3810
|
+
return classes.filter(Boolean).join(" ");
|
|
3811
|
+
}
|
|
3812
|
+
var FieldNode_default = (0, import_react30.memo)(function Field(props) {
|
|
3813
|
+
const { name, type: fieldType } = props.data;
|
|
3814
|
+
const mode = props.data.mode || "simple";
|
|
3815
|
+
const targetConnections = (0, import_react31.useHandleConnections)({ type: "target" });
|
|
3816
|
+
const sourceConnections = (0, import_react31.useHandleConnections)({ type: "source" });
|
|
3817
|
+
const isDark = useDarkMode();
|
|
3818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
3819
|
+
"div",
|
|
3820
|
+
{
|
|
3821
|
+
className: classNames11(
|
|
3822
|
+
"relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
|
|
3823
|
+
props?.selected ? "ring-2 ring-cyan-400/60 ring-offset-2" : "",
|
|
3824
|
+
"border-cyan-500"
|
|
3825
|
+
),
|
|
3826
|
+
style: {
|
|
3827
|
+
background: "var(--ec-field-node-bg, rgb(var(--ec-card-bg)))",
|
|
3828
|
+
boxShadow: "0 2px 12px rgba(6, 182, 212, 0.15)"
|
|
3829
|
+
},
|
|
3830
|
+
children: [
|
|
3831
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3832
|
+
import_react31.Handle,
|
|
3833
|
+
{
|
|
3834
|
+
type: "target",
|
|
3835
|
+
position: import_react31.Position.Left,
|
|
3836
|
+
style: HIDDEN_HANDLE_STYLE
|
|
3837
|
+
}
|
|
3838
|
+
),
|
|
3839
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3840
|
+
import_react31.Handle,
|
|
3841
|
+
{
|
|
3842
|
+
type: "source",
|
|
3843
|
+
position: import_react31.Position.Right,
|
|
3844
|
+
style: HIDDEN_HANDLE_STYLE
|
|
3845
|
+
}
|
|
3846
|
+
),
|
|
3847
|
+
targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle13, { side: "left" }),
|
|
3848
|
+
sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle13, { side: "right" }),
|
|
3849
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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-cyan-600", children: [
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react16.Database, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
|
|
3851
|
+
"Field"
|
|
3852
|
+
] }) }),
|
|
3853
|
+
fieldType && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3854
|
+
"span",
|
|
3855
|
+
{
|
|
3856
|
+
className: "z-10 text-[7px] font-semibold text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] border border-cyan-500 rounded-full px-1.5 py-0.5 uppercase tracking-wide",
|
|
3857
|
+
style: { position: "absolute", top: -8, right: 10 },
|
|
3858
|
+
children: fieldType
|
|
3859
|
+
}
|
|
3860
|
+
),
|
|
3861
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "px-3 pt-3.5 pb-2.5", children: [
|
|
3862
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-baseline gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }) }),
|
|
3863
|
+
mode === "full" && fieldType && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
3864
|
+
"div",
|
|
3865
|
+
{
|
|
3866
|
+
className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed",
|
|
3867
|
+
title: `Type: ${fieldType}`,
|
|
3868
|
+
children: [
|
|
3869
|
+
"Type: ",
|
|
3870
|
+
fieldType
|
|
3871
|
+
]
|
|
3872
|
+
}
|
|
3873
|
+
)
|
|
3874
|
+
] })
|
|
3875
|
+
]
|
|
3876
|
+
}
|
|
3877
|
+
);
|
|
3878
|
+
});
|
|
3879
|
+
|
|
3880
|
+
// src/nodes/field/config.ts
|
|
3881
|
+
var import_react32 = require("@xyflow/react");
|
|
3882
|
+
var import_lucide_react17 = require("lucide-react");
|
|
3883
|
+
var config_default5 = {
|
|
3884
|
+
type: "field",
|
|
3885
|
+
icon: import_lucide_react17.Database,
|
|
3886
|
+
color: "cyan",
|
|
3887
|
+
targetCanConnectTo: [],
|
|
3888
|
+
sourceCanConnectTo: [],
|
|
3889
|
+
validateConnection: () => false,
|
|
3890
|
+
getEdgeOptions: () => ({
|
|
3891
|
+
label: "contains",
|
|
3892
|
+
markerEnd: { type: import_react32.MarkerType.ArrowClosed, color: "#06b6d4" }
|
|
3893
|
+
}),
|
|
3894
|
+
defaultData: { name: "New Field", type: "string", mode: "full" },
|
|
3895
|
+
editor: {
|
|
3896
|
+
title: "Field",
|
|
3897
|
+
subtitle: "Schema field",
|
|
3898
|
+
schema: {
|
|
3899
|
+
type: "object",
|
|
3900
|
+
required: ["name"],
|
|
3901
|
+
properties: {
|
|
3902
|
+
name: { type: "string", title: "Field Path" },
|
|
3903
|
+
type: { type: "string", title: "Type" }
|
|
3904
|
+
}
|
|
3905
|
+
}
|
|
3906
|
+
}
|
|
3907
|
+
};
|
|
3908
|
+
|
|
3909
|
+
// src/nodes/Flow.tsx
|
|
3910
|
+
var import_react33 = require("react");
|
|
3911
|
+
var import_react34 = require("@xyflow/react");
|
|
3785
3912
|
var ContextMenu = __toESM(require("@radix-ui/react-context-menu"));
|
|
3786
3913
|
|
|
3787
3914
|
// src/utils/url-builder.ts
|
|
@@ -3800,16 +3927,16 @@ function buildUrl(path) {
|
|
|
3800
3927
|
var HeroIcons = __toESM(require("@heroicons/react/24/outline"));
|
|
3801
3928
|
|
|
3802
3929
|
// src/utils/protocols.tsx
|
|
3803
|
-
var
|
|
3804
|
-
var
|
|
3930
|
+
var import_lucide_react18 = require("lucide-react");
|
|
3931
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3805
3932
|
function AwsEventBridge({ className }) {
|
|
3806
|
-
return /* @__PURE__ */ (0,
|
|
3807
|
-
/* @__PURE__ */ (0,
|
|
3808
|
-
/* @__PURE__ */ (0,
|
|
3809
|
-
/* @__PURE__ */ (0,
|
|
3933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { viewBox: "0 0 40 40", className, children: [
|
|
3934
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "eb-g", children: [
|
|
3935
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#B0084D", offset: "0%" }),
|
|
3936
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#FF4F8B", offset: "100%" })
|
|
3810
3937
|
] }) }),
|
|
3811
|
-
/* @__PURE__ */ (0,
|
|
3812
|
-
/* @__PURE__ */ (0,
|
|
3938
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "40", height: "40", rx: "4", fill: "url(#eb-g)" }),
|
|
3939
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3813
3940
|
"path",
|
|
3814
3941
|
{
|
|
3815
3942
|
fill: "#FFF",
|
|
@@ -3819,13 +3946,13 @@ function AwsEventBridge({ className }) {
|
|
|
3819
3946
|
] });
|
|
3820
3947
|
}
|
|
3821
3948
|
function AwsSqs({ className }) {
|
|
3822
|
-
return /* @__PURE__ */ (0,
|
|
3823
|
-
/* @__PURE__ */ (0,
|
|
3824
|
-
/* @__PURE__ */ (0,
|
|
3825
|
-
/* @__PURE__ */ (0,
|
|
3949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { viewBox: "0 0 40 40", className, children: [
|
|
3950
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sqs-g", children: [
|
|
3951
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#B0084D", offset: "0%" }),
|
|
3952
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#FF4F8B", offset: "100%" })
|
|
3826
3953
|
] }) }),
|
|
3827
|
-
/* @__PURE__ */ (0,
|
|
3828
|
-
/* @__PURE__ */ (0,
|
|
3954
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "40", height: "40", rx: "4", fill: "url(#sqs-g)" }),
|
|
3955
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3829
3956
|
"path",
|
|
3830
3957
|
{
|
|
3831
3958
|
fill: "#FFF",
|
|
@@ -3835,13 +3962,13 @@ function AwsSqs({ className }) {
|
|
|
3835
3962
|
] });
|
|
3836
3963
|
}
|
|
3837
3964
|
function AwsSns({ className }) {
|
|
3838
|
-
return /* @__PURE__ */ (0,
|
|
3839
|
-
/* @__PURE__ */ (0,
|
|
3840
|
-
/* @__PURE__ */ (0,
|
|
3841
|
-
/* @__PURE__ */ (0,
|
|
3965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { viewBox: "0 0 40 40", className, children: [
|
|
3966
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sns-g", children: [
|
|
3967
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#B0084D", offset: "0%" }),
|
|
3968
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#FF4F8B", offset: "100%" })
|
|
3842
3969
|
] }) }),
|
|
3843
|
-
/* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
3970
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "40", height: "40", rx: "4", fill: "url(#sns-g)" }),
|
|
3971
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3845
3972
|
"path",
|
|
3846
3973
|
{
|
|
3847
3974
|
fill: "#FFF",
|
|
@@ -3852,41 +3979,41 @@ function AwsSns({ className }) {
|
|
|
3852
3979
|
}
|
|
3853
3980
|
var protocolIconMap = {
|
|
3854
3981
|
// Web protocols
|
|
3855
|
-
http: { component:
|
|
3856
|
-
https: { component:
|
|
3857
|
-
ws: { component:
|
|
3858
|
-
wss: { component:
|
|
3859
|
-
websocket: { component:
|
|
3982
|
+
http: { component: import_lucide_react18.Server, type: "lucide" },
|
|
3983
|
+
https: { component: import_lucide_react18.Server, type: "lucide" },
|
|
3984
|
+
ws: { component: import_lucide_react18.Radio, type: "lucide" },
|
|
3985
|
+
wss: { component: import_lucide_react18.Radio, type: "lucide" },
|
|
3986
|
+
websocket: { component: import_lucide_react18.Radio, type: "lucide" },
|
|
3860
3987
|
// Messaging protocols
|
|
3861
|
-
mqtt: { component:
|
|
3862
|
-
amqp: { component:
|
|
3863
|
-
grpc: { component:
|
|
3864
|
-
graphql: { component:
|
|
3988
|
+
mqtt: { component: import_lucide_react18.Wifi, type: "lucide" },
|
|
3989
|
+
amqp: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3990
|
+
grpc: { component: import_lucide_react18.Globe, type: "lucide" },
|
|
3991
|
+
graphql: { component: import_lucide_react18.Globe, type: "lucide" },
|
|
3865
3992
|
// Message brokers
|
|
3866
|
-
kafka: { component:
|
|
3867
|
-
rabbitmq: { component:
|
|
3868
|
-
redis: { component:
|
|
3869
|
-
nats: { component:
|
|
3870
|
-
pulsar: { component:
|
|
3871
|
-
solace: { component:
|
|
3872
|
-
activemq: { component:
|
|
3993
|
+
kafka: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3994
|
+
rabbitmq: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3995
|
+
redis: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3996
|
+
nats: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3997
|
+
pulsar: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3998
|
+
solace: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3999
|
+
activemq: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3873
4000
|
// AWS
|
|
3874
4001
|
sqs: { component: AwsSqs, type: "svg" },
|
|
3875
4002
|
sns: { component: AwsSns, type: "svg" },
|
|
3876
4003
|
eventbridge: { component: AwsEventBridge, type: "svg" },
|
|
3877
|
-
kinesis: { component:
|
|
3878
|
-
msk: { component:
|
|
4004
|
+
kinesis: { component: import_lucide_react18.Network, type: "lucide" },
|
|
4005
|
+
msk: { component: import_lucide_react18.Network, type: "lucide" },
|
|
3879
4006
|
// Google Cloud
|
|
3880
|
-
pubsub: { component:
|
|
3881
|
-
googlepubsub: { component:
|
|
3882
|
-
cloudtasks: { component:
|
|
4007
|
+
pubsub: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4008
|
+
googlepubsub: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4009
|
+
cloudtasks: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
3883
4010
|
// Azure
|
|
3884
|
-
servicebus: { component:
|
|
3885
|
-
azureservicebus: { component:
|
|
3886
|
-
eventhubs: { component:
|
|
3887
|
-
azureeventhubs: { component:
|
|
3888
|
-
eventgrid: { component:
|
|
3889
|
-
azureeventgrid: { component:
|
|
4011
|
+
servicebus: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4012
|
+
azureservicebus: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4013
|
+
eventhubs: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4014
|
+
azureeventhubs: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4015
|
+
eventgrid: { component: import_lucide_react18.Cloud, type: "lucide" },
|
|
4016
|
+
azureeventgrid: { component: import_lucide_react18.Cloud, type: "lucide" }
|
|
3890
4017
|
};
|
|
3891
4018
|
var getIconForProtocol = (protocol) => {
|
|
3892
4019
|
if (!protocol) return null;
|
|
@@ -3903,11 +4030,11 @@ function getIcon(iconName) {
|
|
|
3903
4030
|
}
|
|
3904
4031
|
|
|
3905
4032
|
// src/nodes/Flow.tsx
|
|
3906
|
-
var
|
|
3907
|
-
function
|
|
4033
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
4034
|
+
function classNames12(...classes) {
|
|
3908
4035
|
return classes.filter(Boolean).join(" ");
|
|
3909
4036
|
}
|
|
3910
|
-
var Flow_default = (0,
|
|
4037
|
+
var Flow_default = (0, import_react33.memo)(function FlowNode({
|
|
3911
4038
|
data,
|
|
3912
4039
|
sourcePosition,
|
|
3913
4040
|
targetPosition
|
|
@@ -3915,29 +4042,29 @@ var Flow_default = (0, import_react30.memo)(function FlowNode({
|
|
|
3915
4042
|
const { mode, flow } = data;
|
|
3916
4043
|
const { id, version, owners = EMPTY_ARRAY, name, styles } = flow.data;
|
|
3917
4044
|
const { node: { color = "teal", label } = {}, icon = "QueueListIcon" } = styles || {};
|
|
3918
|
-
const Icon = (0,
|
|
4045
|
+
const Icon = (0, import_react33.useMemo)(() => getIcon(icon), [icon]);
|
|
3919
4046
|
const portalContainer = usePortalContainer();
|
|
3920
4047
|
const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
|
|
3921
4048
|
const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
|
|
3922
|
-
return /* @__PURE__ */ (0,
|
|
3923
|
-
/* @__PURE__ */ (0,
|
|
4049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ContextMenu.Root, { children: [
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3924
4051
|
"div",
|
|
3925
4052
|
{
|
|
3926
|
-
className:
|
|
4053
|
+
className: classNames12(
|
|
3927
4054
|
`rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
|
|
3928
4055
|
),
|
|
3929
4056
|
style: NODE_WIDTH_STYLE,
|
|
3930
4057
|
children: [
|
|
3931
|
-
/* @__PURE__ */ (0,
|
|
4058
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3932
4059
|
"div",
|
|
3933
4060
|
{
|
|
3934
|
-
className:
|
|
4061
|
+
className: classNames12(
|
|
3935
4062
|
`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`,
|
|
3936
4063
|
`border-r-[1px] border-${color}-500`
|
|
3937
4064
|
),
|
|
3938
4065
|
children: [
|
|
3939
|
-
Icon && /* @__PURE__ */ (0,
|
|
3940
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4066
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
4067
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3941
4068
|
"span",
|
|
3942
4069
|
{
|
|
3943
4070
|
className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
|
|
@@ -3948,30 +4075,30 @@ var Flow_default = (0, import_react30.memo)(function FlowNode({
|
|
|
3948
4075
|
]
|
|
3949
4076
|
}
|
|
3950
4077
|
),
|
|
3951
|
-
/* @__PURE__ */ (0,
|
|
3952
|
-
targetPosition && /* @__PURE__ */ (0,
|
|
3953
|
-
sourcePosition && /* @__PURE__ */ (0,
|
|
3954
|
-
/* @__PURE__ */ (0,
|
|
4078
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-1 flex-1", children: [
|
|
4079
|
+
targetPosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react34.Handle, { type: "target", position: targetPosition }),
|
|
4080
|
+
sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react34.Handle, { type: "source", position: sourcePosition }),
|
|
4081
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3955
4082
|
"div",
|
|
3956
4083
|
{
|
|
3957
|
-
className:
|
|
4084
|
+
className: classNames12(
|
|
3958
4085
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
3959
4086
|
),
|
|
3960
4087
|
children: [
|
|
3961
|
-
/* @__PURE__ */ (0,
|
|
3962
|
-
/* @__PURE__ */ (0,
|
|
3963
|
-
/* @__PURE__ */ (0,
|
|
4088
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
|
|
4089
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between", children: [
|
|
4090
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
|
|
3964
4091
|
"v",
|
|
3965
4092
|
version
|
|
3966
4093
|
] }),
|
|
3967
|
-
mode === "simple" && /* @__PURE__ */ (0,
|
|
4094
|
+
mode === "simple" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
|
|
3968
4095
|
] })
|
|
3969
4096
|
]
|
|
3970
4097
|
}
|
|
3971
4098
|
),
|
|
3972
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
3973
|
-
/* @__PURE__ */ (0,
|
|
3974
|
-
/* @__PURE__ */ (0,
|
|
4099
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
|
|
4100
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
|
|
4101
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
|
|
3975
4102
|
"Owners: ",
|
|
3976
4103
|
owners.length
|
|
3977
4104
|
] }) })
|
|
@@ -3980,25 +4107,25 @@ var Flow_default = (0, import_react30.memo)(function FlowNode({
|
|
|
3980
4107
|
]
|
|
3981
4108
|
}
|
|
3982
4109
|
) }),
|
|
3983
|
-
/* @__PURE__ */ (0,
|
|
3984
|
-
/* @__PURE__ */ (0,
|
|
4110
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ContextMenu.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: [
|
|
4111
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3985
4112
|
ContextMenu.Item,
|
|
3986
4113
|
{
|
|
3987
4114
|
asChild: true,
|
|
3988
4115
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
|
|
3989
|
-
children: /* @__PURE__ */ (0,
|
|
4116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
|
|
3990
4117
|
}
|
|
3991
4118
|
),
|
|
3992
|
-
/* @__PURE__ */ (0,
|
|
4119
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3993
4120
|
ContextMenu.Item,
|
|
3994
4121
|
{
|
|
3995
4122
|
asChild: true,
|
|
3996
4123
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
|
|
3997
|
-
children: /* @__PURE__ */ (0,
|
|
4124
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
|
|
3998
4125
|
}
|
|
3999
4126
|
),
|
|
4000
|
-
/* @__PURE__ */ (0,
|
|
4001
|
-
/* @__PURE__ */ (0,
|
|
4127
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu.Separator, { className: "h-[1px] bg-[rgb(var(--ec-page-border))] m-1" }),
|
|
4128
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
4002
4129
|
"a",
|
|
4003
4130
|
{
|
|
4004
4131
|
href: buildUrl(`/docs/flows/${id}/${version}/changelog`),
|
|
@@ -4013,14 +4140,14 @@ var Flow_default = (0, import_react30.memo)(function FlowNode({
|
|
|
4013
4140
|
});
|
|
4014
4141
|
|
|
4015
4142
|
// src/nodes/Entity.tsx
|
|
4016
|
-
var
|
|
4143
|
+
var import_react35 = require("@xyflow/react");
|
|
4017
4144
|
var ContextMenu2 = __toESM(require("@radix-ui/react-context-menu"));
|
|
4018
|
-
var
|
|
4019
|
-
var
|
|
4020
|
-
function
|
|
4145
|
+
var import_react36 = require("react");
|
|
4146
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
4147
|
+
function classNames13(...classes) {
|
|
4021
4148
|
return classes.filter(Boolean).join(" ");
|
|
4022
4149
|
}
|
|
4023
|
-
var Entity_default = (0,
|
|
4150
|
+
var Entity_default = (0, import_react36.memo)(function EntityNode({
|
|
4024
4151
|
data,
|
|
4025
4152
|
sourcePosition,
|
|
4026
4153
|
targetPosition
|
|
@@ -4038,114 +4165,114 @@ var Entity_default = (0, import_react33.memo)(function EntityNode({
|
|
|
4038
4165
|
node: { color: _color = "blue", label: _label } = {},
|
|
4039
4166
|
icon = "CubeIcon"
|
|
4040
4167
|
} = styles || {};
|
|
4041
|
-
const Icon = (0,
|
|
4042
|
-
const [hoveredProperty, setHoveredProperty] = (0,
|
|
4168
|
+
const Icon = (0, import_react36.useMemo)(() => getIcon(icon), [icon]);
|
|
4169
|
+
const [hoveredProperty, setHoveredProperty] = (0, import_react36.useState)(null);
|
|
4043
4170
|
const portalContainer = usePortalContainer();
|
|
4044
|
-
return /* @__PURE__ */ (0,
|
|
4045
|
-
/* @__PURE__ */ (0,
|
|
4171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ContextMenu2.Root, { children: [
|
|
4172
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenu2.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
4046
4173
|
"div",
|
|
4047
4174
|
{
|
|
4048
|
-
className:
|
|
4175
|
+
className: classNames13(
|
|
4049
4176
|
"bg-[rgb(var(--ec-card-bg))] border rounded-lg shadow-sm min-w-[200px]",
|
|
4050
4177
|
externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
|
|
4051
4178
|
),
|
|
4052
4179
|
children: [
|
|
4053
|
-
/* @__PURE__ */ (0,
|
|
4180
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
4054
4181
|
"div",
|
|
4055
4182
|
{
|
|
4056
|
-
className:
|
|
4183
|
+
className: classNames13(
|
|
4057
4184
|
"px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
|
|
4058
4185
|
externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
|
|
4059
4186
|
),
|
|
4060
4187
|
children: [
|
|
4061
|
-
/* @__PURE__ */ (0,
|
|
4062
|
-
Icon && /* @__PURE__ */ (0,
|
|
4063
|
-
/* @__PURE__ */ (0,
|
|
4064
|
-
aggregateRoot && /* @__PURE__ */ (0,
|
|
4188
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
4189
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
|
|
4190
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
|
|
4191
|
+
aggregateRoot && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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" })
|
|
4065
4192
|
] }),
|
|
4066
|
-
domainName && /* @__PURE__ */ (0,
|
|
4193
|
+
domainName && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
|
|
4067
4194
|
"from ",
|
|
4068
4195
|
domainName,
|
|
4069
4196
|
" domain"
|
|
4070
4197
|
] }),
|
|
4071
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4198
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
|
|
4072
4199
|
"v",
|
|
4073
4200
|
version
|
|
4074
4201
|
] })
|
|
4075
4202
|
]
|
|
4076
4203
|
}
|
|
4077
4204
|
),
|
|
4078
|
-
properties.length > 0 ? /* @__PURE__ */ (0,
|
|
4205
|
+
properties.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
|
|
4079
4206
|
const propertyKey = `${property.name}-${index}`;
|
|
4080
4207
|
const isHovered = hoveredProperty === propertyKey;
|
|
4081
|
-
return /* @__PURE__ */ (0,
|
|
4208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
4082
4209
|
"div",
|
|
4083
4210
|
{
|
|
4084
4211
|
className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
|
|
4085
4212
|
onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
|
|
4086
4213
|
onMouseLeave: () => setHoveredProperty(null),
|
|
4087
4214
|
children: [
|
|
4088
|
-
/* @__PURE__ */ (0,
|
|
4089
|
-
|
|
4215
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
4216
|
+
import_react35.Handle,
|
|
4090
4217
|
{
|
|
4091
4218
|
type: "target",
|
|
4092
|
-
position:
|
|
4219
|
+
position: import_react35.Position.Left,
|
|
4093
4220
|
id: `${property.name}-target`,
|
|
4094
4221
|
className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
|
|
4095
4222
|
style: HANDLE_LEFT_OFFSET_STYLE
|
|
4096
4223
|
}
|
|
4097
4224
|
),
|
|
4098
|
-
/* @__PURE__ */ (0,
|
|
4099
|
-
|
|
4225
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
4226
|
+
import_react35.Handle,
|
|
4100
4227
|
{
|
|
4101
4228
|
type: "source",
|
|
4102
|
-
position:
|
|
4229
|
+
position: import_react35.Position.Right,
|
|
4103
4230
|
id: `${property.name}-source`,
|
|
4104
4231
|
className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
|
|
4105
4232
|
style: HANDLE_RIGHT_OFFSET_STYLE
|
|
4106
4233
|
}
|
|
4107
4234
|
),
|
|
4108
|
-
/* @__PURE__ */ (0,
|
|
4109
|
-
/* @__PURE__ */ (0,
|
|
4110
|
-
/* @__PURE__ */ (0,
|
|
4111
|
-
property.required && /* @__PURE__ */ (0,
|
|
4235
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 flex items-center justify-between", children: [
|
|
4236
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
4237
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
|
|
4238
|
+
property.required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 text-xs", children: "*" })
|
|
4112
4239
|
] }),
|
|
4113
|
-
/* @__PURE__ */ (0,
|
|
4240
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
|
|
4114
4241
|
] }),
|
|
4115
|
-
property.references && /* @__PURE__ */ (0,
|
|
4242
|
+
property.references && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
4116
4243
|
"div",
|
|
4117
4244
|
{
|
|
4118
4245
|
className: "w-2 h-2 bg-blue-500 rounded-full",
|
|
4119
4246
|
title: `References ${property.references}`
|
|
4120
4247
|
}
|
|
4121
4248
|
) }),
|
|
4122
|
-
isHovered && property.description && /* @__PURE__ */ (0,
|
|
4123
|
-
/* @__PURE__ */ (0,
|
|
4124
|
-
/* @__PURE__ */ (0,
|
|
4249
|
+
isHovered && property.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("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: [
|
|
4250
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
|
|
4251
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
|
|
4125
4252
|
] })
|
|
4126
4253
|
]
|
|
4127
4254
|
},
|
|
4128
4255
|
propertyKey
|
|
4129
4256
|
);
|
|
4130
|
-
}) }) : /* @__PURE__ */ (0,
|
|
4131
|
-
properties.length === 0 && /* @__PURE__ */ (0,
|
|
4132
|
-
targetPosition && /* @__PURE__ */ (0,
|
|
4133
|
-
sourcePosition && /* @__PURE__ */ (0,
|
|
4257
|
+
}) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
|
|
4258
|
+
properties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
4259
|
+
targetPosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react35.Handle, { type: "target", position: targetPosition }),
|
|
4260
|
+
sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react35.Handle, { type: "source", position: sourcePosition })
|
|
4134
4261
|
] })
|
|
4135
4262
|
]
|
|
4136
4263
|
}
|
|
4137
4264
|
) }),
|
|
4138
|
-
/* @__PURE__ */ (0,
|
|
4265
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
4139
4266
|
ContextMenu2.Content,
|
|
4140
4267
|
{
|
|
4141
4268
|
className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]",
|
|
4142
4269
|
onClick: (e) => e.stopPropagation(),
|
|
4143
|
-
children: /* @__PURE__ */ (0,
|
|
4270
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
4144
4271
|
ContextMenu2.Item,
|
|
4145
4272
|
{
|
|
4146
4273
|
asChild: true,
|
|
4147
4274
|
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",
|
|
4148
|
-
children: /* @__PURE__ */ (0,
|
|
4275
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
|
|
4149
4276
|
}
|
|
4150
4277
|
)
|
|
4151
4278
|
}
|
|
@@ -4154,14 +4281,14 @@ var Entity_default = (0, import_react33.memo)(function EntityNode({
|
|
|
4154
4281
|
});
|
|
4155
4282
|
|
|
4156
4283
|
// src/nodes/User.tsx
|
|
4157
|
-
var
|
|
4284
|
+
var import_react37 = require("react");
|
|
4158
4285
|
var import_solid = require("@heroicons/react/20/solid");
|
|
4159
|
-
var
|
|
4160
|
-
var
|
|
4161
|
-
function
|
|
4286
|
+
var import_react38 = require("@xyflow/react");
|
|
4287
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
4288
|
+
function classNames14(...classes) {
|
|
4162
4289
|
return classes.filter(Boolean).join(" ");
|
|
4163
4290
|
}
|
|
4164
|
-
var User_default = (0,
|
|
4291
|
+
var User_default = (0, import_react37.memo)(function UserNode({
|
|
4165
4292
|
data,
|
|
4166
4293
|
sourcePosition,
|
|
4167
4294
|
targetPosition
|
|
@@ -4173,25 +4300,25 @@ var User_default = (0, import_react34.memo)(function UserNode({
|
|
|
4173
4300
|
showSource: _showSource = true
|
|
4174
4301
|
} = data;
|
|
4175
4302
|
const { summary, actor: { name } = {} } = step;
|
|
4176
|
-
return /* @__PURE__ */ (0,
|
|
4303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
4177
4304
|
"div",
|
|
4178
4305
|
{
|
|
4179
|
-
className:
|
|
4306
|
+
className: classNames14(
|
|
4180
4307
|
`rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-yellow-400`,
|
|
4181
4308
|
mode === "full" ? "min-h-[5em]" : "min-h-[2em]"
|
|
4182
4309
|
),
|
|
4183
4310
|
style: NODE_WIDTH_STYLE,
|
|
4184
4311
|
children: [
|
|
4185
|
-
/* @__PURE__ */ (0,
|
|
4312
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
4186
4313
|
"div",
|
|
4187
4314
|
{
|
|
4188
|
-
className:
|
|
4315
|
+
className: classNames14(
|
|
4189
4316
|
"bg-gradient-to-b from-yellow-400 to-yellow-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500",
|
|
4190
4317
|
`border-r-[1px] border-yellow-500`
|
|
4191
4318
|
),
|
|
4192
4319
|
children: [
|
|
4193
|
-
/* @__PURE__ */ (0,
|
|
4194
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4320
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_solid.UserIcon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
4321
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4195
4322
|
"span",
|
|
4196
4323
|
{
|
|
4197
4324
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4202,24 +4329,24 @@ var User_default = (0, import_react34.memo)(function UserNode({
|
|
|
4202
4329
|
]
|
|
4203
4330
|
}
|
|
4204
4331
|
),
|
|
4205
|
-
/* @__PURE__ */ (0,
|
|
4206
|
-
targetPosition && /* @__PURE__ */ (0,
|
|
4207
|
-
sourcePosition && /* @__PURE__ */ (0,
|
|
4208
|
-
(!summary || mode !== "full") && /* @__PURE__ */ (0,
|
|
4209
|
-
/* @__PURE__ */ (0,
|
|
4210
|
-
mode === "simple" && /* @__PURE__ */ (0,
|
|
4332
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "p-1 flex-1", children: [
|
|
4333
|
+
targetPosition && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react38.Handle, { type: "target", position: targetPosition }),
|
|
4334
|
+
sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react38.Handle, { type: "source", position: sourcePosition }),
|
|
4335
|
+
(!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "h-full ", children: [
|
|
4336
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
|
|
4337
|
+
mode === "simple" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full text-right", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
|
|
4211
4338
|
] }),
|
|
4212
|
-
summary && mode === "full" && /* @__PURE__ */ (0,
|
|
4213
|
-
/* @__PURE__ */ (0,
|
|
4339
|
+
summary && mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
|
|
4340
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4214
4341
|
"div",
|
|
4215
4342
|
{
|
|
4216
|
-
className:
|
|
4343
|
+
className: classNames14(
|
|
4217
4344
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4218
4345
|
),
|
|
4219
|
-
children: /* @__PURE__ */ (0,
|
|
4346
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs font-bold block pb-0.5", children: name })
|
|
4220
4347
|
}
|
|
4221
4348
|
),
|
|
4222
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4349
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[8px] font-light", children: summary }) }) })
|
|
4223
4350
|
] })
|
|
4224
4351
|
] })
|
|
4225
4352
|
]
|
|
@@ -4228,35 +4355,35 @@ var User_default = (0, import_react34.memo)(function UserNode({
|
|
|
4228
4355
|
});
|
|
4229
4356
|
|
|
4230
4357
|
// src/nodes/Step.tsx
|
|
4231
|
-
var
|
|
4232
|
-
var
|
|
4233
|
-
var
|
|
4234
|
-
function
|
|
4358
|
+
var import_react39 = require("react");
|
|
4359
|
+
var import_react40 = require("@xyflow/react");
|
|
4360
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
4361
|
+
function classNames15(...classes) {
|
|
4235
4362
|
return classes.filter(Boolean).join(" ");
|
|
4236
4363
|
}
|
|
4237
|
-
var Step_default = (0,
|
|
4364
|
+
var Step_default = (0, import_react39.memo)(function StepNode({
|
|
4238
4365
|
data,
|
|
4239
4366
|
sourcePosition,
|
|
4240
4367
|
targetPosition
|
|
4241
4368
|
}) {
|
|
4242
4369
|
const { mode, step } = data;
|
|
4243
4370
|
const { title, summary } = step;
|
|
4244
|
-
return /* @__PURE__ */ (0,
|
|
4371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
4245
4372
|
"div",
|
|
4246
4373
|
{
|
|
4247
|
-
className:
|
|
4374
|
+
className: classNames15(
|
|
4248
4375
|
"rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-blue-400 min-h-[3em]"
|
|
4249
4376
|
),
|
|
4250
4377
|
style: NODE_WIDTH_STYLE,
|
|
4251
4378
|
children: [
|
|
4252
|
-
/* @__PURE__ */ (0,
|
|
4379
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4253
4380
|
"div",
|
|
4254
4381
|
{
|
|
4255
|
-
className:
|
|
4382
|
+
className: classNames15(
|
|
4256
4383
|
"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",
|
|
4257
4384
|
`border-r-[1px] border-gray-500`
|
|
4258
4385
|
),
|
|
4259
|
-
children: mode === "full" && /* @__PURE__ */ (0,
|
|
4386
|
+
children: mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4260
4387
|
"span",
|
|
4261
4388
|
{
|
|
4262
4389
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4266,35 +4393,35 @@ var Step_default = (0, import_react36.memo)(function StepNode({
|
|
|
4266
4393
|
)
|
|
4267
4394
|
}
|
|
4268
4395
|
),
|
|
4269
|
-
/* @__PURE__ */ (0,
|
|
4270
|
-
/* @__PURE__ */ (0,
|
|
4271
|
-
|
|
4396
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-1 flex-1", children: [
|
|
4397
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4398
|
+
import_react40.Handle,
|
|
4272
4399
|
{
|
|
4273
4400
|
type: "target",
|
|
4274
|
-
position: targetPosition ||
|
|
4401
|
+
position: targetPosition || import_react40.Position.Left,
|
|
4275
4402
|
style: HIDDEN_HANDLE_STYLE
|
|
4276
4403
|
}
|
|
4277
4404
|
),
|
|
4278
|
-
/* @__PURE__ */ (0,
|
|
4279
|
-
|
|
4405
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4406
|
+
import_react40.Handle,
|
|
4280
4407
|
{
|
|
4281
4408
|
type: "source",
|
|
4282
|
-
position: sourcePosition ||
|
|
4409
|
+
position: sourcePosition || import_react40.Position.Right,
|
|
4283
4410
|
style: HIDDEN_HANDLE_STYLE
|
|
4284
4411
|
}
|
|
4285
4412
|
),
|
|
4286
|
-
!summary && /* @__PURE__ */ (0,
|
|
4287
|
-
summary && /* @__PURE__ */ (0,
|
|
4288
|
-
/* @__PURE__ */ (0,
|
|
4413
|
+
!summary && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
|
|
4414
|
+
summary && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
|
|
4415
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4289
4416
|
"div",
|
|
4290
4417
|
{
|
|
4291
|
-
className:
|
|
4418
|
+
className: classNames15(
|
|
4292
4419
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4293
4420
|
),
|
|
4294
|
-
children: /* @__PURE__ */ (0,
|
|
4421
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4295
4422
|
}
|
|
4296
4423
|
),
|
|
4297
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4424
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[8px] font-light", children: summary }) }) })
|
|
4298
4425
|
] })
|
|
4299
4426
|
] })
|
|
4300
4427
|
]
|
|
@@ -4303,22 +4430,22 @@ var Step_default = (0, import_react36.memo)(function StepNode({
|
|
|
4303
4430
|
});
|
|
4304
4431
|
|
|
4305
4432
|
// src/nodes/Domain.tsx
|
|
4306
|
-
var
|
|
4433
|
+
var import_react41 = require("@xyflow/react");
|
|
4307
4434
|
var ContextMenu3 = __toESM(require("@radix-ui/react-context-menu"));
|
|
4308
|
-
var
|
|
4309
|
-
var
|
|
4310
|
-
var Domain_default = (0,
|
|
4435
|
+
var import_react42 = require("react");
|
|
4436
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
4437
|
+
var Domain_default = (0, import_react42.memo)(function DomainNode({ data, id: nodeId }) {
|
|
4311
4438
|
const { mode, domain } = data;
|
|
4312
|
-
const reactFlow = (0,
|
|
4313
|
-
const [highlightedServices, setHighlightedServices] = (0,
|
|
4439
|
+
const reactFlow = (0, import_react41.useReactFlow)();
|
|
4440
|
+
const [highlightedServices, setHighlightedServices] = (0, import_react42.useState)(
|
|
4314
4441
|
/* @__PURE__ */ new Set()
|
|
4315
4442
|
);
|
|
4316
4443
|
const { id, version, name, services = [], styles } = domain.data;
|
|
4317
4444
|
const { icon = "RectangleGroupIcon" } = styles || {};
|
|
4318
|
-
const Icon = (0,
|
|
4319
|
-
const ServerIcon3 = (0,
|
|
4445
|
+
const Icon = (0, import_react42.useMemo)(() => getIcon(icon), [icon]);
|
|
4446
|
+
const ServerIcon3 = (0, import_react42.useMemo)(() => getIcon("ServerIcon"), []);
|
|
4320
4447
|
const portalContainer = usePortalContainer();
|
|
4321
|
-
const handleSelectionChange = (0,
|
|
4448
|
+
const handleSelectionChange = (0, import_react42.useCallback)(
|
|
4322
4449
|
({ nodes: selectedNodes }) => {
|
|
4323
4450
|
if (selectedNodes.length === 0) {
|
|
4324
4451
|
setHighlightedServices(/* @__PURE__ */ new Set());
|
|
@@ -4347,62 +4474,62 @@ var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: no
|
|
|
4347
4474
|
},
|
|
4348
4475
|
[nodeId, reactFlow]
|
|
4349
4476
|
);
|
|
4350
|
-
(0,
|
|
4477
|
+
(0, import_react41.useOnSelectionChange)({
|
|
4351
4478
|
onChange: handleSelectionChange
|
|
4352
4479
|
});
|
|
4353
|
-
return /* @__PURE__ */ (0,
|
|
4354
|
-
/* @__PURE__ */ (0,
|
|
4355
|
-
/* @__PURE__ */ (0,
|
|
4356
|
-
Icon && /* @__PURE__ */ (0,
|
|
4357
|
-
/* @__PURE__ */ (0,
|
|
4358
|
-
/* @__PURE__ */ (0,
|
|
4359
|
-
/* @__PURE__ */ (0,
|
|
4480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ContextMenu3.Root, { children: [
|
|
4481
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContextMenu3.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
|
|
4482
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("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: [
|
|
4483
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "w-4 h-4 text-yellow-500" }),
|
|
4484
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
4485
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
|
|
4486
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-xs text-yellow-500 ml-2", children: [
|
|
4360
4487
|
"v",
|
|
4361
4488
|
version
|
|
4362
4489
|
] })
|
|
4363
4490
|
] })
|
|
4364
4491
|
] }),
|
|
4365
|
-
mode === "full" && services.length > 0 && /* @__PURE__ */ (0,
|
|
4492
|
+
mode === "full" && services.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: services.map((service, index) => {
|
|
4366
4493
|
const isHighlighted = highlightedServices.has(service.data.id);
|
|
4367
|
-
return /* @__PURE__ */ (0,
|
|
4368
|
-
/* @__PURE__ */ (0,
|
|
4494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ContextMenu3.Root, { children: [
|
|
4495
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
4369
4496
|
"div",
|
|
4370
4497
|
{
|
|
4371
4498
|
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" : ""}`,
|
|
4372
4499
|
children: [
|
|
4373
|
-
/* @__PURE__ */ (0,
|
|
4374
|
-
|
|
4500
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4501
|
+
import_react41.Handle,
|
|
4375
4502
|
{
|
|
4376
4503
|
type: "target",
|
|
4377
|
-
position:
|
|
4504
|
+
position: import_react41.Position.Left,
|
|
4378
4505
|
id: `${service.data.id}-target`,
|
|
4379
4506
|
className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
|
|
4380
4507
|
style: HANDLE_LEFT_STYLE
|
|
4381
4508
|
}
|
|
4382
4509
|
),
|
|
4383
|
-
/* @__PURE__ */ (0,
|
|
4384
|
-
|
|
4510
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4511
|
+
import_react41.Handle,
|
|
4385
4512
|
{
|
|
4386
4513
|
type: "source",
|
|
4387
|
-
position:
|
|
4514
|
+
position: import_react41.Position.Right,
|
|
4388
4515
|
id: `${service.data.id}-source`,
|
|
4389
4516
|
className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
|
|
4390
4517
|
style: HANDLE_RIGHT_STYLE
|
|
4391
4518
|
}
|
|
4392
4519
|
),
|
|
4393
|
-
/* @__PURE__ */ (0,
|
|
4394
|
-
/* @__PURE__ */ (0,
|
|
4395
|
-
/* @__PURE__ */ (0,
|
|
4520
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center space-x-3", children: [
|
|
4521
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
|
|
4522
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
|
|
4396
4523
|
] }),
|
|
4397
|
-
/* @__PURE__ */ (0,
|
|
4524
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-xs", children: [
|
|
4398
4525
|
"v",
|
|
4399
4526
|
service.data.version
|
|
4400
4527
|
] }) })
|
|
4401
4528
|
]
|
|
4402
4529
|
}
|
|
4403
4530
|
) }),
|
|
4404
|
-
/* @__PURE__ */ (0,
|
|
4405
|
-
/* @__PURE__ */ (0,
|
|
4531
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(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: [
|
|
4532
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4406
4533
|
ContextMenu3.Item,
|
|
4407
4534
|
{
|
|
4408
4535
|
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",
|
|
@@ -4412,7 +4539,7 @@ var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: no
|
|
|
4412
4539
|
children: "View Service Documentation"
|
|
4413
4540
|
}
|
|
4414
4541
|
),
|
|
4415
|
-
/* @__PURE__ */ (0,
|
|
4542
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4416
4543
|
ContextMenu3.Item,
|
|
4417
4544
|
{
|
|
4418
4545
|
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",
|
|
@@ -4426,8 +4553,8 @@ var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: no
|
|
|
4426
4553
|
] }, `${service.data.id}-${index}`);
|
|
4427
4554
|
}) })
|
|
4428
4555
|
] }) }),
|
|
4429
|
-
/* @__PURE__ */ (0,
|
|
4430
|
-
/* @__PURE__ */ (0,
|
|
4556
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(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: [
|
|
4557
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4431
4558
|
ContextMenu3.Item,
|
|
4432
4559
|
{
|
|
4433
4560
|
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",
|
|
@@ -4437,7 +4564,7 @@ var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: no
|
|
|
4437
4564
|
children: "View Domain Documentation"
|
|
4438
4565
|
}
|
|
4439
4566
|
),
|
|
4440
|
-
/* @__PURE__ */ (0,
|
|
4567
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4441
4568
|
ContextMenu3.Item,
|
|
4442
4569
|
{
|
|
4443
4570
|
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",
|
|
@@ -4452,9 +4579,9 @@ var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: no
|
|
|
4452
4579
|
});
|
|
4453
4580
|
|
|
4454
4581
|
// src/nodes/GroupNode.tsx
|
|
4455
|
-
var
|
|
4456
|
-
var
|
|
4457
|
-
var
|
|
4582
|
+
var import_react43 = require("react");
|
|
4583
|
+
var import_lucide_react19 = require("lucide-react");
|
|
4584
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
4458
4585
|
var GROUP_CONTAINER_STYLE = {
|
|
4459
4586
|
width: "100%",
|
|
4460
4587
|
height: "100%",
|
|
@@ -4526,21 +4653,21 @@ var GROUP_VERSION_STYLE = {
|
|
|
4526
4653
|
};
|
|
4527
4654
|
var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
|
|
4528
4655
|
var GROUP_ICON_WHITE_STYLE = { color: "white" };
|
|
4529
|
-
var GroupNode_default = (0,
|
|
4656
|
+
var GroupNode_default = (0, import_react43.memo)(function GroupNode({ data }) {
|
|
4530
4657
|
const { domain } = data;
|
|
4531
|
-
return /* @__PURE__ */ (0,
|
|
4532
|
-
/* @__PURE__ */ (0,
|
|
4533
|
-
/* @__PURE__ */ (0,
|
|
4534
|
-
|
|
4658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: GROUP_HEADER_STYLE, children: [
|
|
4659
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react19.BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
|
|
4660
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4661
|
+
import_lucide_react19.BoxesIcon,
|
|
4535
4662
|
{
|
|
4536
4663
|
size: 16,
|
|
4537
4664
|
strokeWidth: 2.5,
|
|
4538
4665
|
style: GROUP_ICON_WHITE_STYLE
|
|
4539
4666
|
}
|
|
4540
4667
|
) }),
|
|
4541
|
-
/* @__PURE__ */ (0,
|
|
4542
|
-
/* @__PURE__ */ (0,
|
|
4543
|
-
domain?.version && /* @__PURE__ */ (0,
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: GROUP_BANNER_INNER_STYLE, children: [
|
|
4669
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
|
|
4670
|
+
domain?.version && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: GROUP_VERSION_STYLE, children: [
|
|
4544
4671
|
"v",
|
|
4545
4672
|
domain.version
|
|
4546
4673
|
] })
|
|
@@ -4549,16 +4676,16 @@ var GroupNode_default = (0, import_react40.memo)(function GroupNode({ data }) {
|
|
|
4549
4676
|
});
|
|
4550
4677
|
|
|
4551
4678
|
// src/nodes/Custom.tsx
|
|
4552
|
-
var
|
|
4679
|
+
var import_react44 = require("@xyflow/react");
|
|
4553
4680
|
var Icons = __toESM(require("@heroicons/react/24/solid"));
|
|
4554
|
-
var
|
|
4681
|
+
var import_react45 = require("react");
|
|
4555
4682
|
var ContextMenu4 = __toESM(require("@radix-ui/react-context-menu"));
|
|
4556
4683
|
var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
|
|
4557
|
-
var
|
|
4558
|
-
function
|
|
4684
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4685
|
+
function classNames16(...classes) {
|
|
4559
4686
|
return classes.filter(Boolean).join(" ");
|
|
4560
4687
|
}
|
|
4561
|
-
var Custom_default = (0,
|
|
4688
|
+
var Custom_default = (0, import_react45.memo)(function UserNode2({
|
|
4562
4689
|
data,
|
|
4563
4690
|
sourcePosition,
|
|
4564
4691
|
targetPosition
|
|
@@ -4575,16 +4702,16 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4575
4702
|
menu = EMPTY_ARRAY,
|
|
4576
4703
|
height = 5
|
|
4577
4704
|
} = customProps;
|
|
4578
|
-
const IconComponent = (0,
|
|
4705
|
+
const IconComponent = (0, import_react45.useMemo)(() => Icons[icon], [icon]);
|
|
4579
4706
|
const { actor: { name: _name } = {} } = step;
|
|
4580
4707
|
const isLongType = type && type.length > 10;
|
|
4581
4708
|
const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
|
|
4582
4709
|
const portalContainer = usePortalContainer();
|
|
4583
|
-
return /* @__PURE__ */ (0,
|
|
4584
|
-
/* @__PURE__ */ (0,
|
|
4710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ContextMenu4.Root, { children: [
|
|
4711
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContextMenu4.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4585
4712
|
"div",
|
|
4586
4713
|
{
|
|
4587
|
-
className:
|
|
4714
|
+
className: classNames16(
|
|
4588
4715
|
`rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
|
|
4589
4716
|
),
|
|
4590
4717
|
style: {
|
|
@@ -4592,17 +4719,17 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4592
4719
|
...NODE_WIDTH_STYLE
|
|
4593
4720
|
},
|
|
4594
4721
|
children: [
|
|
4595
|
-
/* @__PURE__ */ (0,
|
|
4722
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4596
4723
|
"div",
|
|
4597
4724
|
{
|
|
4598
|
-
className:
|
|
4725
|
+
className: classNames16(
|
|
4599
4726
|
`bg-gradient-to-b from-${color}-400 to-${color}-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500`,
|
|
4600
4727
|
`border-r-[1px] border-${color}`
|
|
4601
4728
|
),
|
|
4602
4729
|
children: [
|
|
4603
|
-
IconComponent && /* @__PURE__ */ (0,
|
|
4604
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4605
|
-
/* @__PURE__ */ (0,
|
|
4730
|
+
IconComponent && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
|
|
4731
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tooltip.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tooltip.Root, { children: [
|
|
4732
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4606
4733
|
"span",
|
|
4607
4734
|
{
|
|
4608
4735
|
className: "text-center text-[9px] text-white font-bold uppercase mb-4",
|
|
@@ -4610,7 +4737,7 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4610
4737
|
children: displayType
|
|
4611
4738
|
}
|
|
4612
4739
|
) }),
|
|
4613
|
-
isLongType && /* @__PURE__ */ (0,
|
|
4740
|
+
isLongType && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4614
4741
|
Tooltip.Content,
|
|
4615
4742
|
{
|
|
4616
4743
|
className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
|
|
@@ -4618,7 +4745,7 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4618
4745
|
sideOffset: 5,
|
|
4619
4746
|
children: [
|
|
4620
4747
|
type,
|
|
4621
|
-
/* @__PURE__ */ (0,
|
|
4748
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tooltip.Arrow, { className: "fill-slate-800" })
|
|
4622
4749
|
]
|
|
4623
4750
|
}
|
|
4624
4751
|
) })
|
|
@@ -4626,23 +4753,23 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4626
4753
|
]
|
|
4627
4754
|
}
|
|
4628
4755
|
),
|
|
4629
|
-
/* @__PURE__ */ (0,
|
|
4630
|
-
targetPosition && /* @__PURE__ */ (0,
|
|
4631
|
-
sourcePosition && /* @__PURE__ */ (0,
|
|
4632
|
-
(!summary || mode !== "full") && /* @__PURE__ */ (0,
|
|
4633
|
-
summary && mode === "full" && /* @__PURE__ */ (0,
|
|
4634
|
-
/* @__PURE__ */ (0,
|
|
4756
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-1 flex-1", children: [
|
|
4757
|
+
targetPosition && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react44.Handle, { type: "target", position: targetPosition }),
|
|
4758
|
+
sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react44.Handle, { type: "source", position: sourcePosition }),
|
|
4759
|
+
(!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full ", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
|
|
4760
|
+
summary && mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
4761
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4635
4762
|
"div",
|
|
4636
4763
|
{
|
|
4637
|
-
className:
|
|
4764
|
+
className: classNames16(
|
|
4638
4765
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4639
4766
|
),
|
|
4640
|
-
children: /* @__PURE__ */ (0,
|
|
4767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4641
4768
|
}
|
|
4642
4769
|
),
|
|
4643
|
-
mode === "full" && /* @__PURE__ */ (0,
|
|
4644
|
-
/* @__PURE__ */ (0,
|
|
4645
|
-
properties && /* @__PURE__ */ (0,
|
|
4770
|
+
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
|
|
4771
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[8px] font-light", children: summary }) }),
|
|
4772
|
+
properties && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4646
4773
|
"span",
|
|
4647
4774
|
{
|
|
4648
4775
|
className: "text-xs",
|
|
@@ -4651,7 +4778,7 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4651
4778
|
key,
|
|
4652
4779
|
":",
|
|
4653
4780
|
" ",
|
|
4654
|
-
typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ (0,
|
|
4781
|
+
typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4655
4782
|
"a",
|
|
4656
4783
|
{
|
|
4657
4784
|
href: value,
|
|
@@ -4671,13 +4798,13 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4671
4798
|
]
|
|
4672
4799
|
}
|
|
4673
4800
|
) }),
|
|
4674
|
-
menu?.length > 0 && /* @__PURE__ */ (0,
|
|
4675
|
-
return /* @__PURE__ */ (0,
|
|
4801
|
+
menu?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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) => {
|
|
4802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4676
4803
|
ContextMenu4.Item,
|
|
4677
4804
|
{
|
|
4678
4805
|
asChild: true,
|
|
4679
4806
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
|
|
4680
|
-
children: /* @__PURE__ */ (0,
|
|
4807
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: item.url, children: item.label })
|
|
4681
4808
|
}
|
|
4682
4809
|
);
|
|
4683
4810
|
}) }) })
|
|
@@ -4685,40 +4812,40 @@ var Custom_default = (0, import_react42.memo)(function UserNode2({
|
|
|
4685
4812
|
});
|
|
4686
4813
|
|
|
4687
4814
|
// src/nodes/ExternalSystem2.tsx
|
|
4688
|
-
var
|
|
4689
|
-
var
|
|
4690
|
-
var
|
|
4691
|
-
var ExternalSystem2_default = (0,
|
|
4692
|
-
return /* @__PURE__ */ (0,
|
|
4693
|
-
/* @__PURE__ */ (0,
|
|
4694
|
-
|
|
4815
|
+
var import_react46 = require("react");
|
|
4816
|
+
var import_react47 = require("@xyflow/react");
|
|
4817
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4818
|
+
var ExternalSystem2_default = (0, import_react46.memo)(function ExternalSystemNode(props) {
|
|
4819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
|
|
4820
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4821
|
+
import_react47.Handle,
|
|
4695
4822
|
{
|
|
4696
4823
|
type: "target",
|
|
4697
|
-
position:
|
|
4824
|
+
position: import_react47.Position.Left,
|
|
4698
4825
|
style: EXTERNAL_SYSTEM_HANDLE_STYLE,
|
|
4699
4826
|
className: "bg-gray-500"
|
|
4700
4827
|
}
|
|
4701
4828
|
),
|
|
4702
|
-
/* @__PURE__ */ (0,
|
|
4703
|
-
|
|
4829
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4830
|
+
import_react47.Handle,
|
|
4704
4831
|
{
|
|
4705
4832
|
type: "source",
|
|
4706
|
-
position:
|
|
4833
|
+
position: import_react47.Position.Right,
|
|
4707
4834
|
style: EXTERNAL_SYSTEM_HANDLE_STYLE,
|
|
4708
4835
|
className: "bg-gray-500"
|
|
4709
4836
|
}
|
|
4710
4837
|
),
|
|
4711
|
-
/* @__PURE__ */ (0,
|
|
4838
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalSystem_default, { ...props })
|
|
4712
4839
|
] });
|
|
4713
4840
|
});
|
|
4714
4841
|
|
|
4715
4842
|
// src/nodes/DataProduct.tsx
|
|
4716
|
-
var
|
|
4717
|
-
var
|
|
4718
|
-
var
|
|
4719
|
-
var
|
|
4720
|
-
function
|
|
4721
|
-
return /* @__PURE__ */ (0,
|
|
4843
|
+
var import_react48 = require("react");
|
|
4844
|
+
var import_lucide_react20 = require("lucide-react");
|
|
4845
|
+
var import_react49 = require("@xyflow/react");
|
|
4846
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4847
|
+
function GlowHandle14({ side }) {
|
|
4848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4722
4849
|
"div",
|
|
4723
4850
|
{
|
|
4724
4851
|
style: {
|
|
@@ -4738,38 +4865,38 @@ function GlowHandle13({ side }) {
|
|
|
4738
4865
|
}
|
|
4739
4866
|
);
|
|
4740
4867
|
}
|
|
4741
|
-
function
|
|
4868
|
+
function classNames17(...classes) {
|
|
4742
4869
|
return classes.filter(Boolean).join(" ");
|
|
4743
4870
|
}
|
|
4744
4871
|
function PostItDataProduct(props) {
|
|
4745
4872
|
const { version, name, summary, deprecated, draft, notes } = props.data.dataProduct;
|
|
4746
4873
|
const mode = props.data.mode || "simple";
|
|
4747
|
-
return /* @__PURE__ */ (0,
|
|
4874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4748
4875
|
"div",
|
|
4749
4876
|
{
|
|
4750
|
-
className:
|
|
4877
|
+
className: classNames17(
|
|
4751
4878
|
"relative min-w-44 max-w-56 min-h-[120px]",
|
|
4752
4879
|
props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
|
|
4753
4880
|
),
|
|
4754
4881
|
children: [
|
|
4755
|
-
/* @__PURE__ */ (0,
|
|
4756
|
-
|
|
4882
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4883
|
+
import_react49.Handle,
|
|
4757
4884
|
{
|
|
4758
4885
|
type: "target",
|
|
4759
|
-
position:
|
|
4886
|
+
position: import_react49.Position.Left,
|
|
4760
4887
|
style: HIDDEN_HANDLE_STYLE
|
|
4761
4888
|
}
|
|
4762
4889
|
),
|
|
4763
|
-
/* @__PURE__ */ (0,
|
|
4764
|
-
|
|
4890
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4891
|
+
import_react49.Handle,
|
|
4765
4892
|
{
|
|
4766
4893
|
type: "source",
|
|
4767
|
-
position:
|
|
4894
|
+
position: import_react49.Position.Right,
|
|
4768
4895
|
style: HIDDEN_HANDLE_STYLE
|
|
4769
4896
|
}
|
|
4770
4897
|
),
|
|
4771
|
-
notes && notes.length > 0 && /* @__PURE__ */ (0,
|
|
4772
|
-
/* @__PURE__ */ (0,
|
|
4898
|
+
notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NotesIndicator, { notes, resourceName: name }),
|
|
4899
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4773
4900
|
"div",
|
|
4774
4901
|
{
|
|
4775
4902
|
className: "absolute inset-0",
|
|
@@ -4780,8 +4907,8 @@ function PostItDataProduct(props) {
|
|
|
4780
4907
|
border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
|
|
4781
4908
|
},
|
|
4782
4909
|
children: [
|
|
4783
|
-
/* @__PURE__ */ (0,
|
|
4784
|
-
/* @__PURE__ */ (0,
|
|
4910
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
|
|
4911
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4785
4912
|
"div",
|
|
4786
4913
|
{
|
|
4787
4914
|
style: {
|
|
@@ -4800,30 +4927,30 @@ function PostItDataProduct(props) {
|
|
|
4800
4927
|
]
|
|
4801
4928
|
}
|
|
4802
4929
|
),
|
|
4803
|
-
/* @__PURE__ */ (0,
|
|
4804
|
-
/* @__PURE__ */ (0,
|
|
4805
|
-
/* @__PURE__ */ (0,
|
|
4806
|
-
/* @__PURE__ */ (0,
|
|
4807
|
-
/* @__PURE__ */ (0,
|
|
4930
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative px-3.5 py-3", children: [
|
|
4931
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
4932
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
4933
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react20.Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
|
|
4934
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
|
|
4808
4935
|
] }),
|
|
4809
|
-
draft && /* @__PURE__ */ (0,
|
|
4810
|
-
deprecated && /* @__PURE__ */ (0,
|
|
4936
|
+
draft && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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" }),
|
|
4937
|
+
deprecated && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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" })
|
|
4811
4938
|
] }),
|
|
4812
|
-
/* @__PURE__ */ (0,
|
|
4939
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4813
4940
|
"div",
|
|
4814
4941
|
{
|
|
4815
|
-
className:
|
|
4942
|
+
className: classNames17(
|
|
4816
4943
|
"text-[13px] font-bold leading-snug",
|
|
4817
4944
|
deprecated ? "text-indigo-950/40 line-through" : "text-indigo-950"
|
|
4818
4945
|
),
|
|
4819
4946
|
children: name
|
|
4820
4947
|
}
|
|
4821
4948
|
),
|
|
4822
|
-
version && /* @__PURE__ */ (0,
|
|
4949
|
+
version && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
|
|
4823
4950
|
"v",
|
|
4824
4951
|
version
|
|
4825
4952
|
] }),
|
|
4826
|
-
mode === "full" && summary && /* @__PURE__ */ (0,
|
|
4953
|
+
mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4827
4954
|
"div",
|
|
4828
4955
|
{
|
|
4829
4956
|
className: "mt-2 pt-1.5 border-t border-indigo-900/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
|
|
@@ -4840,14 +4967,14 @@ function PostItDataProduct(props) {
|
|
|
4840
4967
|
function DefaultDataProduct(props) {
|
|
4841
4968
|
const { version, name, summary, deprecated, draft, notes } = props.data.dataProduct;
|
|
4842
4969
|
const mode = props.data.mode || "simple";
|
|
4843
|
-
const targetConnections = (0,
|
|
4844
|
-
const sourceConnections = (0,
|
|
4970
|
+
const targetConnections = (0, import_react49.useHandleConnections)({ type: "target" });
|
|
4971
|
+
const sourceConnections = (0, import_react49.useHandleConnections)({ type: "source" });
|
|
4845
4972
|
const isDark = useDarkMode();
|
|
4846
4973
|
const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
|
|
4847
|
-
return /* @__PURE__ */ (0,
|
|
4974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4848
4975
|
"div",
|
|
4849
4976
|
{
|
|
4850
|
-
className:
|
|
4977
|
+
className: classNames17(
|
|
4851
4978
|
"relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
|
|
4852
4979
|
props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-2" : "",
|
|
4853
4980
|
deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-indigo-400" : "border-indigo-400/60"}` : "border-indigo-500"
|
|
@@ -4857,50 +4984,50 @@ function DefaultDataProduct(props) {
|
|
|
4857
4984
|
boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
|
|
4858
4985
|
},
|
|
4859
4986
|
children: [
|
|
4860
|
-
/* @__PURE__ */ (0,
|
|
4861
|
-
|
|
4987
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4988
|
+
import_react49.Handle,
|
|
4862
4989
|
{
|
|
4863
4990
|
type: "target",
|
|
4864
|
-
position:
|
|
4991
|
+
position: import_react49.Position.Left,
|
|
4865
4992
|
style: HIDDEN_HANDLE_STYLE
|
|
4866
4993
|
}
|
|
4867
4994
|
),
|
|
4868
|
-
/* @__PURE__ */ (0,
|
|
4869
|
-
|
|
4995
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4996
|
+
import_react49.Handle,
|
|
4870
4997
|
{
|
|
4871
4998
|
type: "source",
|
|
4872
|
-
position:
|
|
4999
|
+
position: import_react49.Position.Right,
|
|
4873
5000
|
style: HIDDEN_HANDLE_STYLE
|
|
4874
5001
|
}
|
|
4875
5002
|
),
|
|
4876
|
-
notes && notes.length > 0 && /* @__PURE__ */ (0,
|
|
4877
|
-
targetConnections.length > 0 && /* @__PURE__ */ (0,
|
|
4878
|
-
sourceConnections.length > 0 && /* @__PURE__ */ (0,
|
|
4879
|
-
/* @__PURE__ */ (0,
|
|
5003
|
+
notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NotesIndicator, { notes, resourceName: name }),
|
|
5004
|
+
targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "left" }),
|
|
5005
|
+
sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "right" }),
|
|
5006
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4880
5007
|
"span",
|
|
4881
5008
|
{
|
|
4882
|
-
className:
|
|
5009
|
+
className: classNames17(
|
|
4883
5010
|
"inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
|
|
4884
5011
|
deprecated ? "bg-red-500" : "bg-indigo-500"
|
|
4885
5012
|
),
|
|
4886
5013
|
children: [
|
|
4887
|
-
/* @__PURE__ */ (0,
|
|
5014
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react20.Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
|
|
4888
5015
|
"Data Product",
|
|
4889
5016
|
draft && " (Draft)",
|
|
4890
5017
|
deprecated && " (Deprecated)"
|
|
4891
5018
|
]
|
|
4892
5019
|
}
|
|
4893
5020
|
) }),
|
|
4894
|
-
/* @__PURE__ */ (0,
|
|
4895
|
-
/* @__PURE__ */ (0,
|
|
4896
|
-
/* @__PURE__ */ (0,
|
|
4897
|
-
version && /* @__PURE__ */ (0,
|
|
5021
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-3 pt-3.5 pb-2.5", children: [
|
|
5022
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-baseline gap-1", children: [
|
|
5023
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }),
|
|
5024
|
+
version && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
|
|
4898
5025
|
"(v",
|
|
4899
5026
|
version,
|
|
4900
5027
|
")"
|
|
4901
5028
|
] })
|
|
4902
5029
|
] }),
|
|
4903
|
-
mode === "full" && summary && /* @__PURE__ */ (0,
|
|
5030
|
+
mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4904
5031
|
"div",
|
|
4905
5032
|
{
|
|
4906
5033
|
className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
|
|
@@ -4914,18 +5041,18 @@ function DefaultDataProduct(props) {
|
|
|
4914
5041
|
}
|
|
4915
5042
|
);
|
|
4916
5043
|
}
|
|
4917
|
-
var DataProduct_default = (0,
|
|
5044
|
+
var DataProduct_default = (0, import_react48.memo)(function DataProductNode(props) {
|
|
4918
5045
|
const nodeStyle = props?.data?.style;
|
|
4919
5046
|
if (nodeStyle === "post-it") {
|
|
4920
|
-
return /* @__PURE__ */ (0,
|
|
5047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PostItDataProduct, { ...props });
|
|
4921
5048
|
}
|
|
4922
|
-
return /* @__PURE__ */ (0,
|
|
5049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DefaultDataProduct, { ...props });
|
|
4923
5050
|
});
|
|
4924
5051
|
|
|
4925
5052
|
// src/edges/AnimatedMessageEdge.tsx
|
|
4926
|
-
var
|
|
4927
|
-
var
|
|
4928
|
-
var
|
|
5053
|
+
var import_react50 = require("react");
|
|
5054
|
+
var import_react51 = require("@xyflow/react");
|
|
5055
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4929
5056
|
function messageColor(collection) {
|
|
4930
5057
|
switch (collection) {
|
|
4931
5058
|
case "events":
|
|
@@ -4940,7 +5067,7 @@ function messageColor(collection) {
|
|
|
4940
5067
|
}
|
|
4941
5068
|
var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
|
|
4942
5069
|
var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
|
|
4943
|
-
var AnimatedMessageEdge = (0,
|
|
5070
|
+
var AnimatedMessageEdge = (0, import_react50.memo)(
|
|
4944
5071
|
({
|
|
4945
5072
|
id,
|
|
4946
5073
|
sourceX,
|
|
@@ -4954,7 +5081,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
4954
5081
|
markerEnd,
|
|
4955
5082
|
markerStart
|
|
4956
5083
|
}) => {
|
|
4957
|
-
const [edgePath, labelX, labelY] = (0,
|
|
5084
|
+
const [edgePath, labelX, labelY] = (0, import_react51.getSmoothStepPath)({
|
|
4958
5085
|
sourceX,
|
|
4959
5086
|
sourceY,
|
|
4960
5087
|
sourcePosition,
|
|
@@ -4967,17 +5094,17 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
4967
5094
|
const customColor = data?.customColor || messageColor(collection ?? "default");
|
|
4968
5095
|
const warning = data?.warning;
|
|
4969
5096
|
const customColors = Array.isArray(customColor) ? customColor : [customColor];
|
|
4970
|
-
const randomDelay = (0,
|
|
5097
|
+
const randomDelay = (0, import_react50.useMemo)(() => Math.random() * 1, []);
|
|
4971
5098
|
const opacityClass = opacity === 1 ? "z-30 opacity-100" : "z-30 opacity-10";
|
|
4972
|
-
const animatedNodes = (0,
|
|
5099
|
+
const animatedNodes = (0, import_react50.useMemo)(
|
|
4973
5100
|
() => customColors.map((color, index) => {
|
|
4974
5101
|
const delay = randomDelay + index * 0.3;
|
|
4975
|
-
return /* @__PURE__ */ (0,
|
|
5102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4976
5103
|
"g",
|
|
4977
5104
|
{
|
|
4978
5105
|
className: `ec-animated-msg ${opacityClass}`,
|
|
4979
|
-
children: /* @__PURE__ */ (0,
|
|
4980
|
-
/* @__PURE__ */ (0,
|
|
5106
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("g", { children: [
|
|
5107
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4981
5108
|
"rect",
|
|
4982
5109
|
{
|
|
4983
5110
|
x: "-7",
|
|
@@ -4989,7 +5116,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
4989
5116
|
fill: color
|
|
4990
5117
|
}
|
|
4991
5118
|
),
|
|
4992
|
-
/* @__PURE__ */ (0,
|
|
5119
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4993
5120
|
"path",
|
|
4994
5121
|
{
|
|
4995
5122
|
d: "M-7,-5 L0,1 L7,-5",
|
|
@@ -4999,7 +5126,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
4999
5126
|
strokeLinejoin: "round"
|
|
5000
5127
|
}
|
|
5001
5128
|
),
|
|
5002
|
-
/* @__PURE__ */ (0,
|
|
5129
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5003
5130
|
"animateMotion",
|
|
5004
5131
|
{
|
|
5005
5132
|
dur: "2s",
|
|
@@ -5007,7 +5134,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5007
5134
|
path: edgePath,
|
|
5008
5135
|
rotate: "auto",
|
|
5009
5136
|
begin: `${delay}s`,
|
|
5010
|
-
children: /* @__PURE__ */ (0,
|
|
5137
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mpath", { href: `#${id}` })
|
|
5011
5138
|
}
|
|
5012
5139
|
)
|
|
5013
5140
|
] })
|
|
@@ -5019,8 +5146,8 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5019
5146
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5020
5147
|
[edgePath, id, customColors.join(","), opacity, randomDelay]
|
|
5021
5148
|
);
|
|
5022
|
-
const lines = (0,
|
|
5023
|
-
const longestLine = (0,
|
|
5149
|
+
const lines = (0, import_react50.useMemo)(() => String(label ?? "").split("\n"), [label]);
|
|
5150
|
+
const longestLine = (0, import_react50.useMemo)(
|
|
5024
5151
|
() => lines.reduce(
|
|
5025
5152
|
(a, b) => a.length > b.length ? a : b,
|
|
5026
5153
|
""
|
|
@@ -5028,9 +5155,9 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5028
5155
|
[lines]
|
|
5029
5156
|
);
|
|
5030
5157
|
const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
|
|
5031
|
-
return /* @__PURE__ */ (0,
|
|
5032
|
-
/* @__PURE__ */ (0,
|
|
5033
|
-
|
|
5158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5159
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5160
|
+
import_react51.BaseEdge,
|
|
5034
5161
|
{
|
|
5035
5162
|
id,
|
|
5036
5163
|
path: edgePath,
|
|
@@ -5040,8 +5167,8 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5040
5167
|
}
|
|
5041
5168
|
),
|
|
5042
5169
|
animatedNodes,
|
|
5043
|
-
/* @__PURE__ */ (0,
|
|
5044
|
-
label && /* @__PURE__ */ (0,
|
|
5170
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("g", { children: [
|
|
5171
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5045
5172
|
"rect",
|
|
5046
5173
|
{
|
|
5047
5174
|
x: labelX - labelWidth / 2,
|
|
@@ -5056,7 +5183,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5056
5183
|
ry: 5
|
|
5057
5184
|
}
|
|
5058
5185
|
),
|
|
5059
|
-
/* @__PURE__ */ (0,
|
|
5186
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5060
5187
|
"text",
|
|
5061
5188
|
{
|
|
5062
5189
|
x: labelX,
|
|
@@ -5067,7 +5194,7 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5067
5194
|
fontWeight: 500,
|
|
5068
5195
|
fill: "rgb(var(--ec-page-text))",
|
|
5069
5196
|
pointerEvents: "none",
|
|
5070
|
-
children: lines.map((line, i) => /* @__PURE__ */ (0,
|
|
5197
|
+
children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5071
5198
|
"tspan",
|
|
5072
5199
|
{
|
|
5073
5200
|
x: labelX,
|
|
@@ -5086,12 +5213,12 @@ var AnimatedMessageEdge = (0, import_react47.memo)(
|
|
|
5086
5213
|
var AnimatedMessageEdge_default = AnimatedMessageEdge;
|
|
5087
5214
|
|
|
5088
5215
|
// src/edges/MultilineEdgeLabel.tsx
|
|
5089
|
-
var
|
|
5090
|
-
var
|
|
5091
|
-
var
|
|
5216
|
+
var import_react52 = require("react");
|
|
5217
|
+
var import_react53 = require("@xyflow/react");
|
|
5218
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
5092
5219
|
var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
|
|
5093
5220
|
var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
|
|
5094
|
-
var MultilineEdgeLabel_default = (0,
|
|
5221
|
+
var MultilineEdgeLabel_default = (0, import_react52.memo)(function MultilineEdgeLabel(props) {
|
|
5095
5222
|
const {
|
|
5096
5223
|
id,
|
|
5097
5224
|
sourceX,
|
|
@@ -5107,7 +5234,7 @@ var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdge
|
|
|
5107
5234
|
style,
|
|
5108
5235
|
selected
|
|
5109
5236
|
} = props;
|
|
5110
|
-
const [edgePath, labelX, labelY] = (0,
|
|
5237
|
+
const [edgePath, labelX, labelY] = (0, import_react53.getSmoothStepPath)({
|
|
5111
5238
|
sourceX,
|
|
5112
5239
|
sourceY,
|
|
5113
5240
|
targetX,
|
|
@@ -5115,9 +5242,9 @@ var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdge
|
|
|
5115
5242
|
sourcePosition,
|
|
5116
5243
|
targetPosition
|
|
5117
5244
|
});
|
|
5118
|
-
const lines = (0,
|
|
5119
|
-
return /* @__PURE__ */ (0,
|
|
5120
|
-
/* @__PURE__ */ (0,
|
|
5245
|
+
const lines = (0, import_react52.useMemo)(() => String(label ?? "").split("\n"), [label]);
|
|
5246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
5247
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5121
5248
|
"path",
|
|
5122
5249
|
{
|
|
5123
5250
|
id,
|
|
@@ -5128,7 +5255,7 @@ var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdge
|
|
|
5128
5255
|
style
|
|
5129
5256
|
}
|
|
5130
5257
|
),
|
|
5131
|
-
/* @__PURE__ */ (0,
|
|
5258
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5132
5259
|
"text",
|
|
5133
5260
|
{
|
|
5134
5261
|
x: labelX,
|
|
@@ -5138,7 +5265,7 @@ var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdge
|
|
|
5138
5265
|
fontSize: "10px",
|
|
5139
5266
|
fill: "rgb(var(--ec-page-text))",
|
|
5140
5267
|
pointerEvents: "none",
|
|
5141
|
-
children: lines.map((line, i) => /* @__PURE__ */ (0,
|
|
5268
|
+
children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5142
5269
|
"tspan",
|
|
5143
5270
|
{
|
|
5144
5271
|
x: labelX,
|
|
@@ -5154,9 +5281,9 @@ var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdge
|
|
|
5154
5281
|
});
|
|
5155
5282
|
|
|
5156
5283
|
// src/edges/FlowEdge.tsx
|
|
5157
|
-
var
|
|
5158
|
-
var
|
|
5159
|
-
var
|
|
5284
|
+
var import_react54 = require("react");
|
|
5285
|
+
var import_react55 = require("@xyflow/react");
|
|
5286
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
5160
5287
|
function messageColor2(collection) {
|
|
5161
5288
|
switch (collection) {
|
|
5162
5289
|
case "events":
|
|
@@ -5170,7 +5297,7 @@ function messageColor2(collection) {
|
|
|
5170
5297
|
}
|
|
5171
5298
|
}
|
|
5172
5299
|
var EMPTY_STYLE = {};
|
|
5173
|
-
var FlowEdge_default = (0,
|
|
5300
|
+
var FlowEdge_default = (0, import_react54.memo)(function CustomEdge({
|
|
5174
5301
|
id,
|
|
5175
5302
|
sourceX,
|
|
5176
5303
|
sourceY,
|
|
@@ -5184,7 +5311,7 @@ var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
|
|
|
5184
5311
|
labelStyle,
|
|
5185
5312
|
data
|
|
5186
5313
|
}) {
|
|
5187
|
-
const [edgePath, labelX, labelY] = (0,
|
|
5314
|
+
const [edgePath, labelX, labelY] = (0, import_react55.getSmoothStepPath)({
|
|
5188
5315
|
sourceX,
|
|
5189
5316
|
sourceY,
|
|
5190
5317
|
sourcePosition,
|
|
@@ -5192,14 +5319,14 @@ var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
|
|
|
5192
5319
|
targetY,
|
|
5193
5320
|
targetPosition
|
|
5194
5321
|
});
|
|
5195
|
-
const randomDelay = (0,
|
|
5322
|
+
const randomDelay = (0, import_react54.useMemo)(() => Math.random() * 1, []);
|
|
5196
5323
|
const collection = data?.message?.collection;
|
|
5197
5324
|
const opacity = data?.opacity ?? 1;
|
|
5198
|
-
const mergedStyle = (0,
|
|
5325
|
+
const mergedStyle = (0, import_react54.useMemo)(
|
|
5199
5326
|
() => ({ ...EDGE_FLOW_BASE_STYLE, ...style }),
|
|
5200
5327
|
[style]
|
|
5201
5328
|
);
|
|
5202
|
-
const labelPositionStyle = (0,
|
|
5329
|
+
const labelPositionStyle = (0, import_react54.useMemo)(
|
|
5203
5330
|
() => ({
|
|
5204
5331
|
position: "absolute",
|
|
5205
5332
|
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
@@ -5208,20 +5335,20 @@ var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
|
|
|
5208
5335
|
}),
|
|
5209
5336
|
[labelX, labelY, labelStyle]
|
|
5210
5337
|
);
|
|
5211
|
-
return /* @__PURE__ */ (0,
|
|
5212
|
-
/* @__PURE__ */ (0,
|
|
5213
|
-
data?.animated && /* @__PURE__ */ (0,
|
|
5338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
5339
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react55.BaseEdge, { path: edgePath, markerEnd, style: mergedStyle }),
|
|
5340
|
+
data?.animated && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5214
5341
|
"g",
|
|
5215
5342
|
{
|
|
5216
5343
|
className: `ec-animated-msg z-30 ${opacity === 1 ? "opacity-100" : "opacity-10"}`,
|
|
5217
|
-
children: /* @__PURE__ */ (0,
|
|
5344
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5218
5345
|
"circle",
|
|
5219
5346
|
{
|
|
5220
5347
|
cx: "0",
|
|
5221
5348
|
cy: "0",
|
|
5222
5349
|
r: "7",
|
|
5223
5350
|
fill: messageColor2(collection || "default"),
|
|
5224
|
-
children: /* @__PURE__ */ (0,
|
|
5351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5225
5352
|
"animateMotion",
|
|
5226
5353
|
{
|
|
5227
5354
|
dur: "2s",
|
|
@@ -5229,14 +5356,14 @@ var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
|
|
|
5229
5356
|
path: edgePath,
|
|
5230
5357
|
rotate: "auto",
|
|
5231
5358
|
begin: `${randomDelay}s`,
|
|
5232
|
-
children: /* @__PURE__ */ (0,
|
|
5359
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("mpath", { href: `#${id}` })
|
|
5233
5360
|
}
|
|
5234
5361
|
)
|
|
5235
5362
|
}
|
|
5236
5363
|
)
|
|
5237
5364
|
}
|
|
5238
5365
|
),
|
|
5239
|
-
label && /* @__PURE__ */ (0,
|
|
5366
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react55.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5240
5367
|
"div",
|
|
5241
5368
|
{
|
|
5242
5369
|
style: labelPositionStyle,
|
|
@@ -5248,34 +5375,34 @@ var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
|
|
|
5248
5375
|
});
|
|
5249
5376
|
|
|
5250
5377
|
// src/components/VisualiserSearch.tsx
|
|
5251
|
-
var
|
|
5252
|
-
var
|
|
5253
|
-
var VisualiserSearch = (0,
|
|
5254
|
-
(0,
|
|
5378
|
+
var import_react56 = require("react");
|
|
5379
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
5380
|
+
var VisualiserSearch = (0, import_react56.memo)(
|
|
5381
|
+
(0, import_react56.forwardRef)(
|
|
5255
5382
|
({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
|
|
5256
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
5257
|
-
const [filteredSuggestions, setFilteredSuggestions] = (0,
|
|
5258
|
-
const [showSuggestions, setShowSuggestions] = (0,
|
|
5259
|
-
const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0,
|
|
5260
|
-
const searchInputRef = (0,
|
|
5261
|
-
const containerRef = (0,
|
|
5262
|
-
const hideSuggestions = (0,
|
|
5383
|
+
const [searchQuery, setSearchQuery] = (0, import_react56.useState)("");
|
|
5384
|
+
const [filteredSuggestions, setFilteredSuggestions] = (0, import_react56.useState)([]);
|
|
5385
|
+
const [showSuggestions, setShowSuggestions] = (0, import_react56.useState)(false);
|
|
5386
|
+
const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react56.useState)(-1);
|
|
5387
|
+
const searchInputRef = (0, import_react56.useRef)(null);
|
|
5388
|
+
const containerRef = (0, import_react56.useRef)(null);
|
|
5389
|
+
const hideSuggestions = (0, import_react56.useCallback)(() => {
|
|
5263
5390
|
setShowSuggestions(false);
|
|
5264
5391
|
setSelectedSuggestionIndex(-1);
|
|
5265
5392
|
}, []);
|
|
5266
|
-
(0,
|
|
5393
|
+
(0, import_react56.useImperativeHandle)(
|
|
5267
5394
|
ref,
|
|
5268
5395
|
() => ({
|
|
5269
5396
|
hideSuggestions
|
|
5270
5397
|
}),
|
|
5271
5398
|
[hideSuggestions]
|
|
5272
5399
|
);
|
|
5273
|
-
const getNodeDisplayName = (0,
|
|
5400
|
+
const getNodeDisplayName = (0, import_react56.useCallback)((node) => {
|
|
5274
5401
|
const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.domain?.data?.name || node.data?.entity?.data?.name || node.data?.name || node.id;
|
|
5275
5402
|
const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.domain?.data?.version || node.data?.entity?.data?.version || node.data?.version;
|
|
5276
5403
|
return version ? `${name} (v${version})` : name;
|
|
5277
5404
|
}, []);
|
|
5278
|
-
const getNodeTypeColorClass = (0,
|
|
5405
|
+
const getNodeTypeColorClass = (0, import_react56.useCallback)((nodeType) => {
|
|
5279
5406
|
const colorClasses = {
|
|
5280
5407
|
events: "bg-orange-600 text-white",
|
|
5281
5408
|
services: "bg-pink-600 text-white",
|
|
@@ -5288,11 +5415,12 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5288
5415
|
actor: "bg-yellow-500 text-white",
|
|
5289
5416
|
step: "bg-gray-700 text-white",
|
|
5290
5417
|
user: "bg-yellow-500 text-white",
|
|
5291
|
-
custom: "bg-gray-500 text-white"
|
|
5418
|
+
custom: "bg-gray-500 text-white",
|
|
5419
|
+
field: "bg-cyan-600 text-white"
|
|
5292
5420
|
};
|
|
5293
5421
|
return colorClasses[nodeType] || "bg-gray-100 text-gray-700";
|
|
5294
5422
|
}, []);
|
|
5295
|
-
const handleSearchChange = (0,
|
|
5423
|
+
const handleSearchChange = (0, import_react56.useCallback)(
|
|
5296
5424
|
(event) => {
|
|
5297
5425
|
const query = event.target.value;
|
|
5298
5426
|
setSearchQuery(query);
|
|
@@ -5312,14 +5440,14 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5312
5440
|
},
|
|
5313
5441
|
[nodes, getNodeDisplayName]
|
|
5314
5442
|
);
|
|
5315
|
-
const handleSearchFocus = (0,
|
|
5443
|
+
const handleSearchFocus = (0, import_react56.useCallback)(() => {
|
|
5316
5444
|
if (searchQuery.length === 0) {
|
|
5317
5445
|
setFilteredSuggestions(nodes);
|
|
5318
5446
|
}
|
|
5319
5447
|
setShowSuggestions(true);
|
|
5320
5448
|
setSelectedSuggestionIndex(-1);
|
|
5321
5449
|
}, [nodes, searchQuery]);
|
|
5322
|
-
const handleSuggestionClick = (0,
|
|
5450
|
+
const handleSuggestionClick = (0, import_react56.useCallback)(
|
|
5323
5451
|
(node) => {
|
|
5324
5452
|
setSearchQuery(getNodeDisplayName(node));
|
|
5325
5453
|
setShowSuggestions(false);
|
|
@@ -5327,7 +5455,7 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5327
5455
|
},
|
|
5328
5456
|
[onNodeSelect, getNodeDisplayName]
|
|
5329
5457
|
);
|
|
5330
|
-
const handleSearchKeyDown = (0,
|
|
5458
|
+
const handleSearchKeyDown = (0, import_react56.useCallback)(
|
|
5331
5459
|
(event) => {
|
|
5332
5460
|
if (!showSuggestions || filteredSuggestions.length === 0) return;
|
|
5333
5461
|
switch (event.key) {
|
|
@@ -5364,7 +5492,7 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5364
5492
|
handleSuggestionClick
|
|
5365
5493
|
]
|
|
5366
5494
|
);
|
|
5367
|
-
const clearSearch = (0,
|
|
5495
|
+
const clearSearch = (0, import_react56.useCallback)(() => {
|
|
5368
5496
|
setSearchQuery("");
|
|
5369
5497
|
setShowSuggestions(false);
|
|
5370
5498
|
setFilteredSuggestions([]);
|
|
@@ -5374,7 +5502,7 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5374
5502
|
searchInputRef.current.focus();
|
|
5375
5503
|
}
|
|
5376
5504
|
}, [onClear]);
|
|
5377
|
-
(0,
|
|
5505
|
+
(0, import_react56.useEffect)(() => {
|
|
5378
5506
|
const handleClickOutside = (event) => {
|
|
5379
5507
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
5380
5508
|
setShowSuggestions(false);
|
|
@@ -5386,9 +5514,9 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5386
5514
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
5387
5515
|
};
|
|
5388
5516
|
}, []);
|
|
5389
|
-
return /* @__PURE__ */ (0,
|
|
5390
|
-
/* @__PURE__ */ (0,
|
|
5391
|
-
/* @__PURE__ */ (0,
|
|
5517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
|
|
5518
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
|
|
5519
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
5392
5520
|
"input",
|
|
5393
5521
|
{
|
|
5394
5522
|
ref: searchInputRef,
|
|
@@ -5401,20 +5529,20 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5401
5529
|
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"
|
|
5402
5530
|
}
|
|
5403
5531
|
),
|
|
5404
|
-
searchQuery && /* @__PURE__ */ (0,
|
|
5532
|
+
searchQuery && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
5405
5533
|
"button",
|
|
5406
5534
|
{
|
|
5407
5535
|
onClick: clearSearch,
|
|
5408
5536
|
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))]",
|
|
5409
5537
|
"aria-label": "Clear search",
|
|
5410
|
-
children: /* @__PURE__ */ (0,
|
|
5538
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
5411
5539
|
"svg",
|
|
5412
5540
|
{
|
|
5413
5541
|
className: "w-5 h-5",
|
|
5414
5542
|
fill: "none",
|
|
5415
5543
|
stroke: "currentColor",
|
|
5416
5544
|
viewBox: "0 0 24 24",
|
|
5417
|
-
children: /* @__PURE__ */ (0,
|
|
5545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
5418
5546
|
"path",
|
|
5419
5547
|
{
|
|
5420
5548
|
strokeLinecap: "round",
|
|
@@ -5428,17 +5556,17 @@ var VisualiserSearch = (0, import_react53.memo)(
|
|
|
5428
5556
|
}
|
|
5429
5557
|
)
|
|
5430
5558
|
] }),
|
|
5431
|
-
showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ (0,
|
|
5559
|
+
showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { 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", children: filteredSuggestions.map((node, index) => {
|
|
5432
5560
|
const nodeName = getNodeDisplayName(node);
|
|
5433
5561
|
const nodeType = node.type || "unknown";
|
|
5434
|
-
return /* @__PURE__ */ (0,
|
|
5562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
5435
5563
|
"div",
|
|
5436
5564
|
{
|
|
5437
5565
|
onClick: () => handleSuggestionClick(node),
|
|
5438
5566
|
className: `px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-[rgb(var(--ec-page-border)/0.5)] ${index === selectedSuggestionIndex ? "bg-[rgb(var(--ec-accent-subtle))]" : ""}`,
|
|
5439
5567
|
children: [
|
|
5440
|
-
/* @__PURE__ */ (0,
|
|
5441
|
-
/* @__PURE__ */ (0,
|
|
5568
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
|
|
5569
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
5442
5570
|
"span",
|
|
5443
5571
|
{
|
|
5444
5572
|
className: `text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`,
|
|
@@ -5458,35 +5586,35 @@ VisualiserSearch.displayName = "VisualiserSearch";
|
|
|
5458
5586
|
var VisualiserSearch_default = VisualiserSearch;
|
|
5459
5587
|
|
|
5460
5588
|
// src/components/StepWalkthrough.tsx
|
|
5461
|
-
var
|
|
5589
|
+
var import_react57 = require("react");
|
|
5462
5590
|
var import_outline = require("@heroicons/react/24/outline");
|
|
5463
|
-
var
|
|
5464
|
-
var StepWalkthrough_default = (0,
|
|
5591
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
5592
|
+
var StepWalkthrough_default = (0, import_react57.memo)(function StepWalkthrough({
|
|
5465
5593
|
nodes,
|
|
5466
5594
|
edges,
|
|
5467
5595
|
isFlowVisualization,
|
|
5468
5596
|
onStepChange,
|
|
5469
5597
|
mode = "full"
|
|
5470
5598
|
}) {
|
|
5471
|
-
const [currentNodeId, setCurrentNodeId] = (0,
|
|
5472
|
-
const [pathHistory, setPathHistory] = (0,
|
|
5473
|
-
const [currentStepIndex, setCurrentStepIndex] = (0,
|
|
5474
|
-
const [availablePaths, setAvailablePaths] = (0,
|
|
5475
|
-
const [selectedPathIndex, setSelectedPathIndex] = (0,
|
|
5476
|
-
const [startNodeId, setStartNodeId] = (0,
|
|
5477
|
-
const nodeIdsKeyRef = (0,
|
|
5599
|
+
const [currentNodeId, setCurrentNodeId] = (0, import_react57.useState)(null);
|
|
5600
|
+
const [pathHistory, setPathHistory] = (0, import_react57.useState)([]);
|
|
5601
|
+
const [currentStepIndex, setCurrentStepIndex] = (0, import_react57.useState)(-1);
|
|
5602
|
+
const [availablePaths, setAvailablePaths] = (0, import_react57.useState)([]);
|
|
5603
|
+
const [selectedPathIndex, setSelectedPathIndex] = (0, import_react57.useState)(0);
|
|
5604
|
+
const [startNodeId, setStartNodeId] = (0, import_react57.useState)(null);
|
|
5605
|
+
const nodeIdsKeyRef = (0, import_react57.useRef)("");
|
|
5478
5606
|
const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
|
|
5479
5607
|
if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
|
|
5480
5608
|
nodeIdsKeyRef.current = computedNodeIdsKey;
|
|
5481
5609
|
}
|
|
5482
5610
|
const nodeIdsKey = nodeIdsKeyRef.current;
|
|
5483
|
-
const edgeKeyRef = (0,
|
|
5611
|
+
const edgeKeyRef = (0, import_react57.useRef)("");
|
|
5484
5612
|
const computedEdgeKey = edges.map((e) => `${e.source}-${e.target}`).join(",");
|
|
5485
5613
|
if (computedEdgeKey !== edgeKeyRef.current) {
|
|
5486
5614
|
edgeKeyRef.current = computedEdgeKey;
|
|
5487
5615
|
}
|
|
5488
5616
|
const edgeKey = edgeKeyRef.current;
|
|
5489
|
-
(0,
|
|
5617
|
+
(0, import_react57.useEffect)(() => {
|
|
5490
5618
|
if (isFlowVisualization && nodes.length > 0) {
|
|
5491
5619
|
const incomingEdgeMap = /* @__PURE__ */ new Map();
|
|
5492
5620
|
nodes.forEach((node) => incomingEdgeMap.set(node.id, 0));
|
|
@@ -5507,7 +5635,7 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5507
5635
|
}
|
|
5508
5636
|
}
|
|
5509
5637
|
}, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
|
|
5510
|
-
(0,
|
|
5638
|
+
(0, import_react57.useEffect)(() => {
|
|
5511
5639
|
if (currentNodeId) {
|
|
5512
5640
|
const outgoingEdges = edges.filter(
|
|
5513
5641
|
(edge) => edge.source === currentNodeId
|
|
@@ -5526,7 +5654,7 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5526
5654
|
setAvailablePaths([]);
|
|
5527
5655
|
}
|
|
5528
5656
|
}, [currentNodeId, nodeIdsKey, edgeKey]);
|
|
5529
|
-
const handleNextStep = (0,
|
|
5657
|
+
const handleNextStep = (0, import_react57.useCallback)(() => {
|
|
5530
5658
|
if (currentStepIndex === -1) {
|
|
5531
5659
|
if (startNodeId) {
|
|
5532
5660
|
setPathHistory([startNodeId]);
|
|
@@ -5553,7 +5681,7 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5553
5681
|
currentNodeId,
|
|
5554
5682
|
onStepChange
|
|
5555
5683
|
]);
|
|
5556
|
-
const handlePreviousStep = (0,
|
|
5684
|
+
const handlePreviousStep = (0, import_react57.useCallback)(() => {
|
|
5557
5685
|
if (currentStepIndex > 0) {
|
|
5558
5686
|
const newIndex = currentStepIndex - 1;
|
|
5559
5687
|
const prevNodeId = pathHistory[newIndex];
|
|
@@ -5566,10 +5694,10 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5566
5694
|
onStepChange(null);
|
|
5567
5695
|
}
|
|
5568
5696
|
}, [currentStepIndex, pathHistory, onStepChange]);
|
|
5569
|
-
const handlePathSelection = (0,
|
|
5697
|
+
const handlePathSelection = (0, import_react57.useCallback)((index) => {
|
|
5570
5698
|
setSelectedPathIndex(index);
|
|
5571
5699
|
}, []);
|
|
5572
|
-
const handleFinish = (0,
|
|
5700
|
+
const handleFinish = (0, import_react57.useCallback)(() => {
|
|
5573
5701
|
setCurrentNodeId(null);
|
|
5574
5702
|
setCurrentStepIndex(-1);
|
|
5575
5703
|
setPathHistory([]);
|
|
@@ -5578,7 +5706,7 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5578
5706
|
if (!isFlowVisualization || nodes.length === 0 || mode !== "full") {
|
|
5579
5707
|
return null;
|
|
5580
5708
|
}
|
|
5581
|
-
const { title, description } = (0,
|
|
5709
|
+
const { title, description } = (0, import_react57.useMemo)(() => {
|
|
5582
5710
|
if (currentStepIndex === -1) {
|
|
5583
5711
|
return {
|
|
5584
5712
|
title: "Walk through business flow",
|
|
@@ -5620,14 +5748,14 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5620
5748
|
}
|
|
5621
5749
|
return { title: title2, description: description2 };
|
|
5622
5750
|
}, [currentStepIndex, currentNodeId, nodeIdsKey]);
|
|
5623
|
-
return /* @__PURE__ */ (0,
|
|
5624
|
-
/* @__PURE__ */ (0,
|
|
5625
|
-
/* @__PURE__ */ (0,
|
|
5626
|
-
description && /* @__PURE__ */ (0,
|
|
5751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("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: [
|
|
5752
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mb-2", children: [
|
|
5753
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
|
|
5754
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
|
|
5627
5755
|
] }),
|
|
5628
|
-
currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ (0,
|
|
5629
|
-
/* @__PURE__ */ (0,
|
|
5630
|
-
/* @__PURE__ */ (0,
|
|
5756
|
+
currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mb-3", children: [
|
|
5757
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
|
|
5758
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
5631
5759
|
"select",
|
|
5632
5760
|
{
|
|
5633
5761
|
value: selectedPathIndex,
|
|
@@ -5635,16 +5763,16 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5635
5763
|
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))]",
|
|
5636
5764
|
children: availablePaths.map((path, index) => {
|
|
5637
5765
|
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";
|
|
5638
|
-
return /* @__PURE__ */ (0,
|
|
5766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
|
|
5639
5767
|
})
|
|
5640
5768
|
}
|
|
5641
5769
|
)
|
|
5642
5770
|
] }),
|
|
5643
|
-
/* @__PURE__ */ (0,
|
|
5771
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
|
|
5644
5772
|
// Initial state - show only Start button on the right
|
|
5645
|
-
/* @__PURE__ */ (0,
|
|
5646
|
-
/* @__PURE__ */ (0,
|
|
5647
|
-
/* @__PURE__ */ (0,
|
|
5773
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
5774
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1" }),
|
|
5775
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
5648
5776
|
"button",
|
|
5649
5777
|
{
|
|
5650
5778
|
onClick: handleNextStep,
|
|
@@ -5655,29 +5783,29 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5655
5783
|
] })
|
|
5656
5784
|
) : (
|
|
5657
5785
|
// In walkthrough - show Previous on left, Next on right (only if paths available)
|
|
5658
|
-
/* @__PURE__ */ (0,
|
|
5659
|
-
/* @__PURE__ */ (0,
|
|
5786
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
5787
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
5660
5788
|
"button",
|
|
5661
5789
|
{
|
|
5662
5790
|
onClick: handlePreviousStep,
|
|
5663
5791
|
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",
|
|
5664
5792
|
children: [
|
|
5665
|
-
/* @__PURE__ */ (0,
|
|
5793
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_outline.ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
|
|
5666
5794
|
"Previous"
|
|
5667
5795
|
]
|
|
5668
5796
|
}
|
|
5669
5797
|
),
|
|
5670
|
-
availablePaths.length > 0 ? /* @__PURE__ */ (0,
|
|
5798
|
+
availablePaths.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
5671
5799
|
"button",
|
|
5672
5800
|
{
|
|
5673
5801
|
onClick: handleNextStep,
|
|
5674
5802
|
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",
|
|
5675
5803
|
children: [
|
|
5676
5804
|
"Next",
|
|
5677
|
-
/* @__PURE__ */ (0,
|
|
5805
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_outline.ChevronRightIcon, { className: "w-4 h-4 ml-1" })
|
|
5678
5806
|
]
|
|
5679
5807
|
}
|
|
5680
|
-
) : /* @__PURE__ */ (0,
|
|
5808
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
5681
5809
|
"button",
|
|
5682
5810
|
{
|
|
5683
5811
|
onClick: handleFinish,
|
|
@@ -5691,10 +5819,10 @@ var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough(
|
|
|
5691
5819
|
});
|
|
5692
5820
|
|
|
5693
5821
|
// src/components/StudioModal.tsx
|
|
5694
|
-
var
|
|
5822
|
+
var import_react58 = require("react");
|
|
5695
5823
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
|
|
5696
|
-
var
|
|
5697
|
-
var
|
|
5824
|
+
var import_lucide_react21 = require("lucide-react");
|
|
5825
|
+
var import_react59 = require("@xyflow/react");
|
|
5698
5826
|
|
|
5699
5827
|
// src/utils/export-node-graph.ts
|
|
5700
5828
|
var exportNodeGraphForStudio = (data) => {
|
|
@@ -5757,12 +5885,12 @@ var exportNodeGraphForStudio = (data) => {
|
|
|
5757
5885
|
};
|
|
5758
5886
|
|
|
5759
5887
|
// src/components/StudioModal.tsx
|
|
5760
|
-
var
|
|
5888
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
5761
5889
|
var StudioModal = ({ isOpen, onClose }) => {
|
|
5762
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
5890
|
+
const [copySuccess, setCopySuccess] = (0, import_react58.useState)(false);
|
|
5763
5891
|
const portalContainer = usePortalContainer();
|
|
5764
|
-
const { toObject } = (0,
|
|
5765
|
-
const handleCopyToClipboard = (0,
|
|
5892
|
+
const { toObject } = (0, import_react59.useReactFlow)();
|
|
5893
|
+
const handleCopyToClipboard = (0, import_react58.useCallback)(async () => {
|
|
5766
5894
|
const visualizerData = toObject();
|
|
5767
5895
|
const studioData = exportNodeGraphForStudio(visualizerData);
|
|
5768
5896
|
try {
|
|
@@ -5788,14 +5916,14 @@ var StudioModal = ({ isOpen, onClose }) => {
|
|
|
5788
5916
|
);
|
|
5789
5917
|
onClose();
|
|
5790
5918
|
};
|
|
5791
|
-
return /* @__PURE__ */ (0,
|
|
5792
|
-
/* @__PURE__ */ (0,
|
|
5793
|
-
/* @__PURE__ */ (0,
|
|
5794
|
-
/* @__PURE__ */ (0,
|
|
5795
|
-
/* @__PURE__ */ (0,
|
|
5919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Portal, { container: portalContainer, children: [
|
|
5920
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
|
|
5921
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(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: [
|
|
5922
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
|
|
5923
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
|
|
5796
5924
|
"Import your diagram into",
|
|
5797
5925
|
" ",
|
|
5798
|
-
/* @__PURE__ */ (0,
|
|
5926
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5799
5927
|
"a",
|
|
5800
5928
|
{
|
|
5801
5929
|
href: "https://eventcatalog.studio",
|
|
@@ -5808,43 +5936,43 @@ var StudioModal = ({ isOpen, onClose }) => {
|
|
|
5808
5936
|
" ",
|
|
5809
5937
|
"to create designs from your visualization of your architecture."
|
|
5810
5938
|
] }),
|
|
5811
|
-
/* @__PURE__ */ (0,
|
|
5812
|
-
/* @__PURE__ */ (0,
|
|
5813
|
-
/* @__PURE__ */ (0,
|
|
5814
|
-
/* @__PURE__ */ (0,
|
|
5815
|
-
/* @__PURE__ */ (0,
|
|
5939
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-4", children: [
|
|
5940
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
|
|
5941
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
|
|
5942
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
|
|
5943
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5816
5944
|
"button",
|
|
5817
5945
|
{
|
|
5818
5946
|
onClick: handleCopyToClipboard,
|
|
5819
5947
|
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"}`,
|
|
5820
|
-
children: copySuccess ? /* @__PURE__ */ (0,
|
|
5821
|
-
/* @__PURE__ */ (0,
|
|
5822
|
-
/* @__PURE__ */ (0,
|
|
5823
|
-
] }) : /* @__PURE__ */ (0,
|
|
5824
|
-
/* @__PURE__ */ (0,
|
|
5825
|
-
/* @__PURE__ */ (0,
|
|
5948
|
+
children: copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
5949
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react21.CheckIcon, { className: "w-4 h-4" }),
|
|
5950
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Copied!" })
|
|
5951
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
5952
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react21.ClipboardIcon, { className: "w-4 h-4" }),
|
|
5953
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Copy diagram to clipboard" })
|
|
5826
5954
|
] })
|
|
5827
5955
|
}
|
|
5828
5956
|
)
|
|
5829
5957
|
] }),
|
|
5830
|
-
/* @__PURE__ */ (0,
|
|
5831
|
-
/* @__PURE__ */ (0,
|
|
5832
|
-
/* @__PURE__ */ (0,
|
|
5833
|
-
/* @__PURE__ */ (0,
|
|
5958
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
|
|
5959
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
|
|
5960
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
|
|
5961
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
5834
5962
|
"button",
|
|
5835
5963
|
{
|
|
5836
5964
|
onClick: handleOpenStudio,
|
|
5837
5965
|
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",
|
|
5838
5966
|
children: [
|
|
5839
|
-
/* @__PURE__ */ (0,
|
|
5840
|
-
/* @__PURE__ */ (0,
|
|
5967
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react21.ExternalLinkIcon, { className: "w-4 h-4" }),
|
|
5968
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Open EventCatalog Studio" })
|
|
5841
5969
|
]
|
|
5842
5970
|
}
|
|
5843
5971
|
),
|
|
5844
|
-
/* @__PURE__ */ (0,
|
|
5972
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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." })
|
|
5845
5973
|
] })
|
|
5846
5974
|
] }),
|
|
5847
|
-
/* @__PURE__ */ (0,
|
|
5975
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5848
5976
|
"button",
|
|
5849
5977
|
{
|
|
5850
5978
|
type: "button",
|
|
@@ -5859,14 +5987,14 @@ var StudioModal = ({ isOpen, onClose }) => {
|
|
|
5859
5987
|
var StudioModal_default = StudioModal;
|
|
5860
5988
|
|
|
5861
5989
|
// src/components/FocusModeModal.tsx
|
|
5862
|
-
var
|
|
5990
|
+
var import_react64 = require("react");
|
|
5863
5991
|
var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
|
|
5864
|
-
var
|
|
5865
|
-
var
|
|
5992
|
+
var import_lucide_react23 = require("lucide-react");
|
|
5993
|
+
var import_react65 = require("@xyflow/react");
|
|
5866
5994
|
|
|
5867
5995
|
// src/components/FocusMode/FocusModeContent.tsx
|
|
5868
|
-
var
|
|
5869
|
-
var
|
|
5996
|
+
var import_react62 = require("react");
|
|
5997
|
+
var import_react63 = require("@xyflow/react");
|
|
5870
5998
|
|
|
5871
5999
|
// src/components/FocusMode/utils.ts
|
|
5872
6000
|
function getConnectedNodes(centerNodeId, nodes, edges) {
|
|
@@ -5897,6 +6025,15 @@ var ENTITY_KEYS = [
|
|
|
5897
6025
|
function getNodeDisplayInfo(node) {
|
|
5898
6026
|
const nodeType = node.type || "unknown";
|
|
5899
6027
|
const data = node.data;
|
|
6028
|
+
if (nodeType === "field") {
|
|
6029
|
+
return {
|
|
6030
|
+
id: node.id,
|
|
6031
|
+
name: data?.name || node.id,
|
|
6032
|
+
type: "field",
|
|
6033
|
+
version: void 0,
|
|
6034
|
+
description: `Type: ${data?.type || "unknown"}`
|
|
6035
|
+
};
|
|
6036
|
+
}
|
|
5900
6037
|
const entityKey = ENTITY_KEYS.find((key) => data[key]);
|
|
5901
6038
|
const entity = entityKey ? data[entityKey] : null;
|
|
5902
6039
|
const name = entity?.data?.name || entity?.id || data.label || data.name || node.id;
|
|
@@ -5947,15 +6084,15 @@ function getNodeDocUrl(node) {
|
|
|
5947
6084
|
}
|
|
5948
6085
|
|
|
5949
6086
|
// src/components/FocusMode/FocusModeNodeActions.tsx
|
|
5950
|
-
var
|
|
5951
|
-
var
|
|
5952
|
-
var
|
|
6087
|
+
var import_react60 = require("@xyflow/react");
|
|
6088
|
+
var import_lucide_react22 = require("lucide-react");
|
|
6089
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
5953
6090
|
var FocusModeNodeActions = ({
|
|
5954
6091
|
node,
|
|
5955
6092
|
isCenter,
|
|
5956
6093
|
onSwitch
|
|
5957
6094
|
}) => {
|
|
5958
|
-
const { zoom } = (0,
|
|
6095
|
+
const { zoom } = (0, import_react60.useViewport)();
|
|
5959
6096
|
if (node.type === "placeholder") return null;
|
|
5960
6097
|
const docUrl = getNodeDocUrl(node);
|
|
5961
6098
|
const direction = (node.position?.x ?? 0) < 0 ? "left" : "right";
|
|
@@ -5976,26 +6113,26 @@ var FocusModeNodeActions = ({
|
|
|
5976
6113
|
};
|
|
5977
6114
|
if (isCenter) {
|
|
5978
6115
|
if (!docUrl) return null;
|
|
5979
|
-
return /* @__PURE__ */ (0,
|
|
5980
|
-
|
|
6116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6117
|
+
import_react60.NodeToolbar,
|
|
5981
6118
|
{
|
|
5982
6119
|
nodeId: node.id,
|
|
5983
|
-
position:
|
|
6120
|
+
position: import_react60.Position.Bottom,
|
|
5984
6121
|
isVisible: true,
|
|
5985
6122
|
offset: -16,
|
|
5986
|
-
children: /* @__PURE__ */ (0,
|
|
6123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5987
6124
|
"div",
|
|
5988
6125
|
{
|
|
5989
6126
|
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",
|
|
5990
6127
|
style: { padding: Math.round(4 * scaleFactor) },
|
|
5991
|
-
children: /* @__PURE__ */ (0,
|
|
6128
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5992
6129
|
"button",
|
|
5993
6130
|
{
|
|
5994
6131
|
onClick: handleDocClick,
|
|
5995
6132
|
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",
|
|
5996
6133
|
style: { width: buttonSize, height: buttonSize },
|
|
5997
6134
|
title: "View documentation",
|
|
5998
|
-
children: /* @__PURE__ */ (0,
|
|
6135
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react22.FileText, { style: { width: iconSize, height: iconSize } })
|
|
5999
6136
|
}
|
|
6000
6137
|
)
|
|
6001
6138
|
}
|
|
@@ -6003,37 +6140,37 @@ var FocusModeNodeActions = ({
|
|
|
6003
6140
|
}
|
|
6004
6141
|
);
|
|
6005
6142
|
}
|
|
6006
|
-
return /* @__PURE__ */ (0,
|
|
6007
|
-
|
|
6143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6144
|
+
import_react60.NodeToolbar,
|
|
6008
6145
|
{
|
|
6009
6146
|
nodeId: node.id,
|
|
6010
|
-
position:
|
|
6147
|
+
position: import_react60.Position.Bottom,
|
|
6011
6148
|
isVisible: true,
|
|
6012
6149
|
offset: -16,
|
|
6013
|
-
children: /* @__PURE__ */ (0,
|
|
6150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
6014
6151
|
"div",
|
|
6015
6152
|
{
|
|
6016
6153
|
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",
|
|
6017
6154
|
style: { padding: Math.round(4 * scaleFactor) },
|
|
6018
6155
|
children: [
|
|
6019
|
-
docUrl && /* @__PURE__ */ (0,
|
|
6156
|
+
docUrl && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6020
6157
|
"button",
|
|
6021
6158
|
{
|
|
6022
6159
|
onClick: handleDocClick,
|
|
6023
6160
|
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",
|
|
6024
6161
|
style: { width: buttonSize, height: buttonSize },
|
|
6025
6162
|
title: "View documentation",
|
|
6026
|
-
children: /* @__PURE__ */ (0,
|
|
6163
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react22.FileText, { style: { width: iconSize, height: iconSize } })
|
|
6027
6164
|
}
|
|
6028
6165
|
),
|
|
6029
|
-
/* @__PURE__ */ (0,
|
|
6166
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6030
6167
|
"button",
|
|
6031
6168
|
{
|
|
6032
6169
|
onClick: handleSwitch,
|
|
6033
6170
|
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",
|
|
6034
6171
|
style: { width: buttonSize, height: buttonSize },
|
|
6035
6172
|
title: "Focus on this node",
|
|
6036
|
-
children: /* @__PURE__ */ (0,
|
|
6173
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react22.ArrowRightLeft, { style: { width: iconSize, height: iconSize } })
|
|
6037
6174
|
}
|
|
6038
6175
|
)
|
|
6039
6176
|
]
|
|
@@ -6045,32 +6182,32 @@ var FocusModeNodeActions = ({
|
|
|
6045
6182
|
var FocusModeNodeActions_default = FocusModeNodeActions;
|
|
6046
6183
|
|
|
6047
6184
|
// src/components/FocusMode/FocusModePlaceholder.tsx
|
|
6048
|
-
var
|
|
6049
|
-
var
|
|
6185
|
+
var import_react61 = require("@xyflow/react");
|
|
6186
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
6050
6187
|
var FocusModePlaceholder = ({
|
|
6051
6188
|
data
|
|
6052
6189
|
}) => {
|
|
6053
6190
|
const { label, side } = data;
|
|
6054
|
-
return /* @__PURE__ */ (0,
|
|
6191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6055
6192
|
"div",
|
|
6056
6193
|
{
|
|
6057
6194
|
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",
|
|
6058
6195
|
style: { opacity: 0.6, minHeight: "130px" },
|
|
6059
6196
|
children: [
|
|
6060
|
-
side === "right" && /* @__PURE__ */ (0,
|
|
6061
|
-
|
|
6197
|
+
side === "right" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6198
|
+
import_react61.Handle,
|
|
6062
6199
|
{
|
|
6063
6200
|
type: "target",
|
|
6064
|
-
position:
|
|
6201
|
+
position: import_react61.Position.Left,
|
|
6065
6202
|
style: { visibility: "hidden" }
|
|
6066
6203
|
}
|
|
6067
6204
|
),
|
|
6068
|
-
/* @__PURE__ */ (0,
|
|
6069
|
-
side === "left" && /* @__PURE__ */ (0,
|
|
6070
|
-
|
|
6205
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
|
|
6206
|
+
side === "left" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6207
|
+
import_react61.Handle,
|
|
6071
6208
|
{
|
|
6072
6209
|
type: "source",
|
|
6073
|
-
position:
|
|
6210
|
+
position: import_react61.Position.Right,
|
|
6074
6211
|
style: { visibility: "hidden" }
|
|
6075
6212
|
}
|
|
6076
6213
|
)
|
|
@@ -6081,7 +6218,7 @@ var FocusModePlaceholder = ({
|
|
|
6081
6218
|
var FocusModePlaceholder_default = FocusModePlaceholder;
|
|
6082
6219
|
|
|
6083
6220
|
// src/components/FocusMode/FocusModeContent.tsx
|
|
6084
|
-
var
|
|
6221
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
6085
6222
|
var HORIZONTAL_SPACING = 450;
|
|
6086
6223
|
var VERTICAL_SPACING = 200;
|
|
6087
6224
|
var SLIDE_DURATION = 300;
|
|
@@ -6093,21 +6230,21 @@ var FocusModeContent = ({
|
|
|
6093
6230
|
edgeTypes: edgeTypes2,
|
|
6094
6231
|
onSwitchCenter
|
|
6095
6232
|
}) => {
|
|
6096
|
-
const { fitView } = (0,
|
|
6097
|
-
const [isAnimating, setIsAnimating] = (0,
|
|
6098
|
-
const [needsFitView, setNeedsFitView] = (0,
|
|
6099
|
-
const [hoveredEdgeId, setHoveredEdgeId] = (0,
|
|
6100
|
-
const [isReady, setIsReady] = (0,
|
|
6101
|
-
const reactFlowInitialized = (0,
|
|
6102
|
-
const animationTimeoutRef = (0,
|
|
6103
|
-
(0,
|
|
6233
|
+
const { fitView } = (0, import_react63.useReactFlow)();
|
|
6234
|
+
const [isAnimating, setIsAnimating] = (0, import_react62.useState)(false);
|
|
6235
|
+
const [needsFitView, setNeedsFitView] = (0, import_react62.useState)(false);
|
|
6236
|
+
const [hoveredEdgeId, setHoveredEdgeId] = (0, import_react62.useState)(null);
|
|
6237
|
+
const [isReady, setIsReady] = (0, import_react62.useState)(false);
|
|
6238
|
+
const reactFlowInitialized = (0, import_react62.useRef)(false);
|
|
6239
|
+
const animationTimeoutRef = (0, import_react62.useRef)(null);
|
|
6240
|
+
(0, import_react62.useEffect)(() => {
|
|
6104
6241
|
return () => {
|
|
6105
6242
|
if (animationTimeoutRef.current) {
|
|
6106
6243
|
clearTimeout(animationTimeoutRef.current);
|
|
6107
6244
|
}
|
|
6108
6245
|
};
|
|
6109
6246
|
}, []);
|
|
6110
|
-
const calculateFocusedGraph = (0,
|
|
6247
|
+
const calculateFocusedGraph = (0, import_react62.useCallback)(
|
|
6111
6248
|
(centerId) => {
|
|
6112
6249
|
const centerNode = allNodes.find((n) => n.id === centerId);
|
|
6113
6250
|
if (!centerNode) {
|
|
@@ -6190,19 +6327,19 @@ var FocusModeContent = ({
|
|
|
6190
6327
|
},
|
|
6191
6328
|
[allNodes, allEdges]
|
|
6192
6329
|
);
|
|
6193
|
-
const initialGraph = (0,
|
|
6330
|
+
const initialGraph = (0, import_react62.useMemo)(
|
|
6194
6331
|
() => calculateFocusedGraph(centerNodeId),
|
|
6195
6332
|
[centerNodeId, calculateFocusedGraph]
|
|
6196
6333
|
);
|
|
6197
|
-
const [displayNodes, setDisplayNodes] = (0,
|
|
6198
|
-
const [displayEdges, setDisplayEdges] = (0,
|
|
6199
|
-
(0,
|
|
6334
|
+
const [displayNodes, setDisplayNodes] = (0, import_react63.useNodesState)(initialGraph.nodes);
|
|
6335
|
+
const [displayEdges, setDisplayEdges] = (0, import_react63.useEdgesState)(initialGraph.edges);
|
|
6336
|
+
(0, import_react62.useEffect)(() => {
|
|
6200
6337
|
const { nodes, edges } = calculateFocusedGraph(centerNodeId);
|
|
6201
6338
|
setDisplayNodes(nodes);
|
|
6202
6339
|
setDisplayEdges(edges);
|
|
6203
6340
|
setNeedsFitView(true);
|
|
6204
6341
|
}, [centerNodeId, calculateFocusedGraph, setDisplayNodes, setDisplayEdges]);
|
|
6205
|
-
(0,
|
|
6342
|
+
(0, import_react62.useEffect)(() => {
|
|
6206
6343
|
if (needsFitView && reactFlowInitialized.current) {
|
|
6207
6344
|
const timer = setTimeout(() => {
|
|
6208
6345
|
fitView({ padding: 0.2, duration: 300 });
|
|
@@ -6211,14 +6348,14 @@ var FocusModeContent = ({
|
|
|
6211
6348
|
return () => clearTimeout(timer);
|
|
6212
6349
|
}
|
|
6213
6350
|
}, [needsFitView, displayNodes, fitView]);
|
|
6214
|
-
const handleInit = (0,
|
|
6351
|
+
const handleInit = (0, import_react62.useCallback)(() => {
|
|
6215
6352
|
reactFlowInitialized.current = true;
|
|
6216
6353
|
requestAnimationFrame(() => {
|
|
6217
6354
|
fitView({ padding: 0.2, duration: 0 });
|
|
6218
6355
|
setIsReady(true);
|
|
6219
6356
|
});
|
|
6220
6357
|
}, [fitView]);
|
|
6221
|
-
const handleSwitchNode = (0,
|
|
6358
|
+
const handleSwitchNode = (0, import_react62.useCallback)(
|
|
6222
6359
|
(nodeId, direction) => {
|
|
6223
6360
|
if (nodeId === centerNodeId || isAnimating) return;
|
|
6224
6361
|
setIsAnimating(true);
|
|
@@ -6254,7 +6391,7 @@ var FocusModeContent = ({
|
|
|
6254
6391
|
},
|
|
6255
6392
|
[centerNodeId, isAnimating, setDisplayNodes, onSwitchCenter]
|
|
6256
6393
|
);
|
|
6257
|
-
const handleNodeClick = (0,
|
|
6394
|
+
const handleNodeClick = (0, import_react62.useCallback)(
|
|
6258
6395
|
(_, clickedNode) => {
|
|
6259
6396
|
if (clickedNode.id === centerNodeId || isAnimating) return;
|
|
6260
6397
|
const direction = (clickedNode.position?.x ?? 0) < 0 ? "left" : "right";
|
|
@@ -6262,16 +6399,16 @@ var FocusModeContent = ({
|
|
|
6262
6399
|
},
|
|
6263
6400
|
[centerNodeId, isAnimating, handleSwitchNode]
|
|
6264
6401
|
);
|
|
6265
|
-
const handleEdgeMouseEnter = (0,
|
|
6402
|
+
const handleEdgeMouseEnter = (0, import_react62.useCallback)(
|
|
6266
6403
|
(_, edge) => {
|
|
6267
6404
|
setHoveredEdgeId(edge.id);
|
|
6268
6405
|
},
|
|
6269
6406
|
[]
|
|
6270
6407
|
);
|
|
6271
|
-
const handleEdgeMouseLeave = (0,
|
|
6408
|
+
const handleEdgeMouseLeave = (0, import_react62.useCallback)(() => {
|
|
6272
6409
|
setHoveredEdgeId(null);
|
|
6273
6410
|
}, []);
|
|
6274
|
-
const edgesWithHover = (0,
|
|
6411
|
+
const edgesWithHover = (0, import_react62.useMemo)(() => {
|
|
6275
6412
|
return displayEdges.map((edge) => {
|
|
6276
6413
|
if (edge.id === hoveredEdgeId) {
|
|
6277
6414
|
return {
|
|
@@ -6282,7 +6419,7 @@ var FocusModeContent = ({
|
|
|
6282
6419
|
return edge;
|
|
6283
6420
|
});
|
|
6284
6421
|
}, [displayEdges, hoveredEdgeId]);
|
|
6285
|
-
const mergedNodeTypes = (0,
|
|
6422
|
+
const mergedNodeTypes = (0, import_react62.useMemo)(
|
|
6286
6423
|
() => ({
|
|
6287
6424
|
...nodeTypes,
|
|
6288
6425
|
placeholder: FocusModePlaceholder_default
|
|
@@ -6290,15 +6427,15 @@ var FocusModeContent = ({
|
|
|
6290
6427
|
[nodeTypes]
|
|
6291
6428
|
);
|
|
6292
6429
|
if (displayNodes.length === 0) {
|
|
6293
|
-
return /* @__PURE__ */ (0,
|
|
6430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
|
|
6294
6431
|
}
|
|
6295
|
-
return /* @__PURE__ */ (0,
|
|
6432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6296
6433
|
"div",
|
|
6297
6434
|
{
|
|
6298
6435
|
className: "h-full w-full focus-mode-container",
|
|
6299
6436
|
style: { opacity: isReady ? 1 : 0 },
|
|
6300
|
-
children: /* @__PURE__ */ (0,
|
|
6301
|
-
|
|
6437
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
6438
|
+
import_react63.ReactFlow,
|
|
6302
6439
|
{
|
|
6303
6440
|
nodes: displayNodes,
|
|
6304
6441
|
edges: edgesWithHover,
|
|
@@ -6317,9 +6454,9 @@ var FocusModeContent = ({
|
|
|
6317
6454
|
minZoom: 0.3,
|
|
6318
6455
|
maxZoom: 2,
|
|
6319
6456
|
children: [
|
|
6320
|
-
/* @__PURE__ */ (0,
|
|
6321
|
-
/* @__PURE__ */ (0,
|
|
6322
|
-
displayNodes.map((node, index) => /* @__PURE__ */ (0,
|
|
6457
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react63.Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
|
|
6458
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react63.Controls, { showInteractive: false }),
|
|
6459
|
+
displayNodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6323
6460
|
FocusModeNodeActions_default,
|
|
6324
6461
|
{
|
|
6325
6462
|
node,
|
|
@@ -6337,7 +6474,7 @@ var FocusModeContent = ({
|
|
|
6337
6474
|
var FocusModeContent_default = FocusModeContent;
|
|
6338
6475
|
|
|
6339
6476
|
// src/components/FocusModeModal.tsx
|
|
6340
|
-
var
|
|
6477
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
6341
6478
|
var FocusModeModal = ({
|
|
6342
6479
|
isOpen,
|
|
6343
6480
|
onClose,
|
|
@@ -6347,17 +6484,17 @@ var FocusModeModal = ({
|
|
|
6347
6484
|
nodeTypes,
|
|
6348
6485
|
edgeTypes: edgeTypes2
|
|
6349
6486
|
}) => {
|
|
6350
|
-
const [centerNodeId, setCenterNodeId] = (0,
|
|
6487
|
+
const [centerNodeId, setCenterNodeId] = (0, import_react64.useState)(
|
|
6351
6488
|
initialNodeId
|
|
6352
6489
|
);
|
|
6353
6490
|
const isDark = useDarkMode();
|
|
6354
6491
|
const portalContainer = usePortalContainer();
|
|
6355
|
-
(0,
|
|
6492
|
+
(0, import_react64.useEffect)(() => {
|
|
6356
6493
|
if (isOpen && initialNodeId) {
|
|
6357
6494
|
setCenterNodeId(initialNodeId);
|
|
6358
6495
|
}
|
|
6359
6496
|
}, [isOpen, initialNodeId]);
|
|
6360
|
-
const handleSwitchCenter = (0,
|
|
6497
|
+
const handleSwitchCenter = (0, import_react64.useCallback)(
|
|
6361
6498
|
(newCenterNodeId, _direction) => {
|
|
6362
6499
|
setCenterNodeId(newCenterNodeId);
|
|
6363
6500
|
},
|
|
@@ -6368,7 +6505,7 @@ var FocusModeModal = ({
|
|
|
6368
6505
|
if (!centerNodeId) {
|
|
6369
6506
|
return null;
|
|
6370
6507
|
}
|
|
6371
|
-
return /* @__PURE__ */ (0,
|
|
6508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6372
6509
|
"div",
|
|
6373
6510
|
{
|
|
6374
6511
|
className: "eventcatalog-visualizer",
|
|
@@ -6379,7 +6516,7 @@ var FocusModeModal = ({
|
|
|
6379
6516
|
zIndex: 99999
|
|
6380
6517
|
},
|
|
6381
6518
|
children: [
|
|
6382
|
-
/* @__PURE__ */ (0,
|
|
6519
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6383
6520
|
Dialog3.Overlay,
|
|
6384
6521
|
{
|
|
6385
6522
|
style: {
|
|
@@ -6390,7 +6527,7 @@ var FocusModeModal = ({
|
|
|
6390
6527
|
}
|
|
6391
6528
|
}
|
|
6392
6529
|
),
|
|
6393
|
-
/* @__PURE__ */ (0,
|
|
6530
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6394
6531
|
Dialog3.Content,
|
|
6395
6532
|
{
|
|
6396
6533
|
style: {
|
|
@@ -6406,7 +6543,7 @@ var FocusModeModal = ({
|
|
|
6406
6543
|
overflow: "hidden"
|
|
6407
6544
|
},
|
|
6408
6545
|
children: [
|
|
6409
|
-
/* @__PURE__ */ (0,
|
|
6546
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6410
6547
|
"div",
|
|
6411
6548
|
{
|
|
6412
6549
|
style: {
|
|
@@ -6418,8 +6555,8 @@ var FocusModeModal = ({
|
|
|
6418
6555
|
flexShrink: 0
|
|
6419
6556
|
},
|
|
6420
6557
|
children: [
|
|
6421
|
-
/* @__PURE__ */ (0,
|
|
6422
|
-
/* @__PURE__ */ (0,
|
|
6558
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
6559
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6423
6560
|
"div",
|
|
6424
6561
|
{
|
|
6425
6562
|
style: {
|
|
@@ -6431,8 +6568,8 @@ var FocusModeModal = ({
|
|
|
6431
6568
|
borderRadius: 10,
|
|
6432
6569
|
background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
|
|
6433
6570
|
},
|
|
6434
|
-
children: /* @__PURE__ */ (0,
|
|
6435
|
-
|
|
6571
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6572
|
+
import_lucide_react23.FocusIcon,
|
|
6436
6573
|
{
|
|
6437
6574
|
style: {
|
|
6438
6575
|
width: 20,
|
|
@@ -6443,8 +6580,8 @@ var FocusModeModal = ({
|
|
|
6443
6580
|
)
|
|
6444
6581
|
}
|
|
6445
6582
|
),
|
|
6446
|
-
/* @__PURE__ */ (0,
|
|
6447
|
-
/* @__PURE__ */ (0,
|
|
6583
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
|
|
6584
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6448
6585
|
Dialog3.Title,
|
|
6449
6586
|
{
|
|
6450
6587
|
style: {
|
|
@@ -6455,7 +6592,7 @@ var FocusModeModal = ({
|
|
|
6455
6592
|
children: "Focus Mode"
|
|
6456
6593
|
}
|
|
6457
6594
|
),
|
|
6458
|
-
/* @__PURE__ */ (0,
|
|
6595
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6459
6596
|
Dialog3.Description,
|
|
6460
6597
|
{
|
|
6461
6598
|
style: {
|
|
@@ -6468,7 +6605,7 @@ var FocusModeModal = ({
|
|
|
6468
6605
|
)
|
|
6469
6606
|
] })
|
|
6470
6607
|
] }),
|
|
6471
|
-
/* @__PURE__ */ (0,
|
|
6608
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6472
6609
|
"button",
|
|
6473
6610
|
{
|
|
6474
6611
|
style: {
|
|
@@ -6484,13 +6621,13 @@ var FocusModeModal = ({
|
|
|
6484
6621
|
color: isDark ? "#94a3b8" : "#64748b"
|
|
6485
6622
|
},
|
|
6486
6623
|
"aria-label": "Close",
|
|
6487
|
-
children: /* @__PURE__ */ (0,
|
|
6624
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react23.XIcon, { style: { width: 20, height: 20 } })
|
|
6488
6625
|
}
|
|
6489
6626
|
) })
|
|
6490
6627
|
]
|
|
6491
6628
|
}
|
|
6492
6629
|
),
|
|
6493
|
-
/* @__PURE__ */ (0,
|
|
6630
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react65.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6494
6631
|
FocusModeContent_default,
|
|
6495
6632
|
{
|
|
6496
6633
|
centerNodeId,
|
|
@@ -6511,8 +6648,8 @@ var FocusModeModal = ({
|
|
|
6511
6648
|
var FocusModeModal_default = FocusModeModal;
|
|
6512
6649
|
|
|
6513
6650
|
// src/components/MermaidView.tsx
|
|
6514
|
-
var
|
|
6515
|
-
var
|
|
6651
|
+
var import_react66 = require("react");
|
|
6652
|
+
var import_lucide_react24 = require("lucide-react");
|
|
6516
6653
|
|
|
6517
6654
|
// src/utils/export-mermaid.ts
|
|
6518
6655
|
var NODE_SHAPE_MAP = {
|
|
@@ -6558,8 +6695,12 @@ var NODE_SHAPE_MAP = {
|
|
|
6558
6695
|
// rectangle
|
|
6559
6696
|
view: ["[", "]"],
|
|
6560
6697
|
// rectangle
|
|
6561
|
-
note: ["[", "]"]
|
|
6698
|
+
note: ["[", "]"],
|
|
6562
6699
|
// rectangle
|
|
6700
|
+
field: ["[(", ")]"],
|
|
6701
|
+
// cylinder
|
|
6702
|
+
fields: ["[(", ")]"]
|
|
6703
|
+
// cylinder
|
|
6563
6704
|
};
|
|
6564
6705
|
var NODE_STYLE_CLASSES = {
|
|
6565
6706
|
services: "fill:#ec4899,stroke:#be185d,color:#fff",
|
|
@@ -6588,7 +6729,9 @@ var NODE_STYLE_CLASSES = {
|
|
|
6588
6729
|
entity: "fill:#6b7280,stroke:#374151,color:#fff",
|
|
6589
6730
|
custom: "fill:#9ca3af,stroke:#6b7280,color:#000",
|
|
6590
6731
|
view: "fill:#9ca3af,stroke:#6b7280,color:#000",
|
|
6591
|
-
note: "fill:#fef3c7,stroke:#d97706,color:#000"
|
|
6732
|
+
note: "fill:#fef3c7,stroke:#d97706,color:#000",
|
|
6733
|
+
field: "fill:#06b6d4,stroke:#0891b2,color:#fff",
|
|
6734
|
+
fields: "fill:#06b6d4,stroke:#0891b2,color:#fff"
|
|
6592
6735
|
};
|
|
6593
6736
|
function sanitizeMermaidId(id) {
|
|
6594
6737
|
return id.replace(/[^a-zA-Z0-9_]/g, "_");
|
|
@@ -6667,6 +6810,11 @@ function getNodeLabel(node) {
|
|
|
6667
6810
|
if (type === "note") {
|
|
6668
6811
|
return data.text || data.label || "Note";
|
|
6669
6812
|
}
|
|
6813
|
+
if (type === "field" || type === "fields") {
|
|
6814
|
+
const name = data.name || node.id;
|
|
6815
|
+
const fieldType = data.type;
|
|
6816
|
+
return fieldType ? `${name} (${fieldType})` : name;
|
|
6817
|
+
}
|
|
6670
6818
|
return data.name || data.label || data.title || data.id || node.id;
|
|
6671
6819
|
}
|
|
6672
6820
|
function getEdgeLabel(edge) {
|
|
@@ -6751,28 +6899,28 @@ async function copyToClipboard(text) {
|
|
|
6751
6899
|
}
|
|
6752
6900
|
|
|
6753
6901
|
// src/components/MermaidView.tsx
|
|
6754
|
-
var
|
|
6902
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
6755
6903
|
var MermaidView = ({
|
|
6756
6904
|
nodes,
|
|
6757
6905
|
edges,
|
|
6758
6906
|
maxTextSize = 1e5
|
|
6759
6907
|
}) => {
|
|
6760
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
6761
|
-
const [mermaidCode, setMermaidCode] = (0,
|
|
6762
|
-
const [previewSvg, setPreviewSvg] = (0,
|
|
6763
|
-
const [previewError, setPreviewError] = (0,
|
|
6764
|
-
const [isRendering, setIsRendering] = (0,
|
|
6765
|
-
const containerRef = (0,
|
|
6766
|
-
const svgContainerRef = (0,
|
|
6767
|
-
const panZoomInstanceRef = (0,
|
|
6768
|
-
(0,
|
|
6908
|
+
const [copySuccess, setCopySuccess] = (0, import_react66.useState)(false);
|
|
6909
|
+
const [mermaidCode, setMermaidCode] = (0, import_react66.useState)("");
|
|
6910
|
+
const [previewSvg, setPreviewSvg] = (0, import_react66.useState)(null);
|
|
6911
|
+
const [previewError, setPreviewError] = (0, import_react66.useState)(null);
|
|
6912
|
+
const [isRendering, setIsRendering] = (0, import_react66.useState)(true);
|
|
6913
|
+
const containerRef = (0, import_react66.useRef)(null);
|
|
6914
|
+
const svgContainerRef = (0, import_react66.useRef)(null);
|
|
6915
|
+
const panZoomInstanceRef = (0, import_react66.useRef)(null);
|
|
6916
|
+
(0, import_react66.useEffect)(() => {
|
|
6769
6917
|
const code = convertToMermaid(nodes, edges, {
|
|
6770
6918
|
includeStyles: true,
|
|
6771
6919
|
direction: "LR"
|
|
6772
6920
|
});
|
|
6773
6921
|
setMermaidCode(code);
|
|
6774
6922
|
}, [nodes, edges]);
|
|
6775
|
-
(0,
|
|
6923
|
+
(0, import_react66.useEffect)(() => {
|
|
6776
6924
|
if (!mermaidCode) return;
|
|
6777
6925
|
let cancelled = false;
|
|
6778
6926
|
setIsRendering(true);
|
|
@@ -6817,7 +6965,7 @@ var MermaidView = ({
|
|
|
6817
6965
|
cancelled = true;
|
|
6818
6966
|
};
|
|
6819
6967
|
}, [mermaidCode]);
|
|
6820
|
-
(0,
|
|
6968
|
+
(0, import_react66.useEffect)(() => {
|
|
6821
6969
|
if (!previewSvg || !svgContainerRef.current) return;
|
|
6822
6970
|
const initZoom = async () => {
|
|
6823
6971
|
const svgElement = svgContainerRef.current?.querySelector("svg");
|
|
@@ -6856,56 +7004,56 @@ var MermaidView = ({
|
|
|
6856
7004
|
}
|
|
6857
7005
|
};
|
|
6858
7006
|
}, [previewSvg]);
|
|
6859
|
-
const handleCopyToClipboard = (0,
|
|
7007
|
+
const handleCopyToClipboard = (0, import_react66.useCallback)(async () => {
|
|
6860
7008
|
await copyToClipboard(mermaidCode);
|
|
6861
7009
|
setCopySuccess(true);
|
|
6862
7010
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
6863
7011
|
}, [mermaidCode]);
|
|
6864
|
-
return /* @__PURE__ */ (0,
|
|
7012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
6865
7013
|
"div",
|
|
6866
7014
|
{
|
|
6867
7015
|
ref: containerRef,
|
|
6868
7016
|
className: "absolute inset-0 bg-[rgb(var(--ec-page-bg))]",
|
|
6869
7017
|
style: { animation: "fadeIn 200ms ease-out" },
|
|
6870
7018
|
children: [
|
|
6871
|
-
/* @__PURE__ */ (0,
|
|
7019
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("style", { children: `
|
|
6872
7020
|
@keyframes fadeIn {
|
|
6873
7021
|
from { opacity: 0; }
|
|
6874
7022
|
to { opacity: 1; }
|
|
6875
7023
|
}
|
|
6876
7024
|
` }),
|
|
6877
|
-
/* @__PURE__ */ (0,
|
|
6878
|
-
/* @__PURE__ */ (0,
|
|
7025
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative group", children: [
|
|
7026
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6879
7027
|
"button",
|
|
6880
7028
|
{
|
|
6881
7029
|
onClick: handleCopyToClipboard,
|
|
6882
7030
|
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"}`,
|
|
6883
7031
|
"aria-label": copySuccess ? "Copied!" : "Copy Mermaid code",
|
|
6884
|
-
children: copySuccess ? /* @__PURE__ */ (0,
|
|
7032
|
+
children: copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react24.CheckIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react24.ClipboardIcon, { className: "h-5 w-5" })
|
|
6885
7033
|
}
|
|
6886
7034
|
),
|
|
6887
|
-
/* @__PURE__ */ (0,
|
|
7035
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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" })
|
|
6888
7036
|
] }) }),
|
|
6889
|
-
/* @__PURE__ */ (0,
|
|
6890
|
-
isRendering && /* @__PURE__ */ (0,
|
|
6891
|
-
/* @__PURE__ */ (0,
|
|
6892
|
-
/* @__PURE__ */ (0,
|
|
6893
|
-
/* @__PURE__ */ (0,
|
|
6894
|
-
/* @__PURE__ */ (0,
|
|
7037
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "absolute inset-0 overflow-hidden", children: [
|
|
7038
|
+
isRendering && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", children: [
|
|
7039
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-4 opacity-40", children: [
|
|
7040
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
|
|
7041
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
|
|
7042
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6895
7043
|
"div",
|
|
6896
7044
|
{
|
|
6897
7045
|
className: "w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse",
|
|
6898
7046
|
style: { animationDelay: "75ms" }
|
|
6899
7047
|
}
|
|
6900
7048
|
),
|
|
6901
|
-
/* @__PURE__ */ (0,
|
|
7049
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6902
7050
|
"div",
|
|
6903
7051
|
{
|
|
6904
7052
|
className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse",
|
|
6905
7053
|
style: { animationDelay: "150ms" }
|
|
6906
7054
|
}
|
|
6907
7055
|
),
|
|
6908
|
-
/* @__PURE__ */ (0,
|
|
7056
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6909
7057
|
"div",
|
|
6910
7058
|
{
|
|
6911
7059
|
className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse",
|
|
@@ -6913,14 +7061,14 @@ var MermaidView = ({
|
|
|
6913
7061
|
}
|
|
6914
7062
|
)
|
|
6915
7063
|
] }),
|
|
6916
|
-
/* @__PURE__ */ (0,
|
|
7064
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
|
|
6917
7065
|
] }) }),
|
|
6918
|
-
previewError && !isRendering && /* @__PURE__ */ (0,
|
|
6919
|
-
/* @__PURE__ */ (0,
|
|
6920
|
-
/* @__PURE__ */ (0,
|
|
6921
|
-
/* @__PURE__ */ (0,
|
|
6922
|
-
/* @__PURE__ */ (0,
|
|
6923
|
-
/* @__PURE__ */ (0,
|
|
7066
|
+
previewError && !isRendering && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
|
|
7067
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
|
|
7068
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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 }),
|
|
7069
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
|
|
7070
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: "You can still copy the Mermaid code and paste it into" }),
|
|
7071
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6924
7072
|
"a",
|
|
6925
7073
|
{
|
|
6926
7074
|
href: "https://mermaid.live",
|
|
@@ -6932,7 +7080,7 @@ var MermaidView = ({
|
|
|
6932
7080
|
)
|
|
6933
7081
|
] })
|
|
6934
7082
|
] }),
|
|
6935
|
-
previewSvg && !isRendering && !previewError && /* @__PURE__ */ (0,
|
|
7083
|
+
previewSvg && !isRendering && !previewError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6936
7084
|
"div",
|
|
6937
7085
|
{
|
|
6938
7086
|
ref: svgContainerRef,
|
|
@@ -6941,15 +7089,15 @@ var MermaidView = ({
|
|
|
6941
7089
|
}
|
|
6942
7090
|
)
|
|
6943
7091
|
] }),
|
|
6944
|
-
/* @__PURE__ */ (0,
|
|
6945
|
-
/* @__PURE__ */ (0,
|
|
7092
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("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: [
|
|
7093
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6946
7094
|
"svg",
|
|
6947
7095
|
{
|
|
6948
7096
|
className: "w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]",
|
|
6949
7097
|
fill: "none",
|
|
6950
7098
|
viewBox: "0 0 24 24",
|
|
6951
7099
|
stroke: "currentColor",
|
|
6952
|
-
children: /* @__PURE__ */ (0,
|
|
7100
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6953
7101
|
"path",
|
|
6954
7102
|
{
|
|
6955
7103
|
strokeLinecap: "round",
|
|
@@ -6960,7 +7108,7 @@ var MermaidView = ({
|
|
|
6960
7108
|
)
|
|
6961
7109
|
}
|
|
6962
7110
|
),
|
|
6963
|
-
/* @__PURE__ */ (0,
|
|
7111
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
|
|
6964
7112
|
] }) })
|
|
6965
7113
|
]
|
|
6966
7114
|
}
|
|
@@ -6969,10 +7117,10 @@ var MermaidView = ({
|
|
|
6969
7117
|
var MermaidView_default = MermaidView;
|
|
6970
7118
|
|
|
6971
7119
|
// src/hooks/use-channel-visibility.ts
|
|
6972
|
-
var
|
|
7120
|
+
var import_react68 = require("react");
|
|
6973
7121
|
|
|
6974
7122
|
// src/utils/utils/utils.ts
|
|
6975
|
-
var
|
|
7123
|
+
var import_react67 = require("@xyflow/react");
|
|
6976
7124
|
var import_dagre = __toESM(require("dagre"));
|
|
6977
7125
|
var generateIdForNode = (node) => {
|
|
6978
7126
|
return `${node.data.id}-${node.data.version}`;
|
|
@@ -7047,7 +7195,7 @@ var createEdge = (edgeOptions) => {
|
|
|
7047
7195
|
// height: 40,
|
|
7048
7196
|
// },
|
|
7049
7197
|
markerEnd: {
|
|
7050
|
-
type:
|
|
7198
|
+
type: import_react67.MarkerType.ArrowClosed,
|
|
7051
7199
|
width: 40,
|
|
7052
7200
|
height: 40,
|
|
7053
7201
|
color: "rgb(var(--ec-page-text-muted))"
|
|
@@ -7062,8 +7210,8 @@ var createEdge = (edgeOptions) => {
|
|
|
7062
7210
|
};
|
|
7063
7211
|
var createNode = (values) => {
|
|
7064
7212
|
return {
|
|
7065
|
-
sourcePosition:
|
|
7066
|
-
targetPosition:
|
|
7213
|
+
sourcePosition: import_react67.Position.Right,
|
|
7214
|
+
targetPosition: import_react67.Position.Left,
|
|
7067
7215
|
...values
|
|
7068
7216
|
};
|
|
7069
7217
|
};
|
|
@@ -7094,10 +7242,10 @@ var useChannelVisibility = ({
|
|
|
7094
7242
|
setEdges,
|
|
7095
7243
|
skipProcessing = false
|
|
7096
7244
|
}) => {
|
|
7097
|
-
const [hideChannels, setHideChannels] = (0,
|
|
7098
|
-
const [initialNodes, setInitialNodes] = (0,
|
|
7099
|
-
const [initialEdges, setInitialEdges] = (0,
|
|
7100
|
-
(0,
|
|
7245
|
+
const [hideChannels, setHideChannels] = (0, import_react68.useState)(false);
|
|
7246
|
+
const [initialNodes, setInitialNodes] = (0, import_react68.useState)(nodes);
|
|
7247
|
+
const [initialEdges, setInitialEdges] = (0, import_react68.useState)(edges);
|
|
7248
|
+
(0, import_react68.useEffect)(() => {
|
|
7101
7249
|
const storedHideChannels = localStorage.getItem(
|
|
7102
7250
|
"EventCatalog:hideChannels"
|
|
7103
7251
|
);
|
|
@@ -7105,14 +7253,14 @@ var useChannelVisibility = ({
|
|
|
7105
7253
|
setHideChannels(storedHideChannels === "true");
|
|
7106
7254
|
}
|
|
7107
7255
|
}, []);
|
|
7108
|
-
(0,
|
|
7256
|
+
(0, import_react68.useEffect)(() => {
|
|
7109
7257
|
const hasChannels = nodes.some((node) => node.type === "channels");
|
|
7110
7258
|
if (!hideChannels || hasChannels) {
|
|
7111
7259
|
setInitialNodes(nodes);
|
|
7112
7260
|
setInitialEdges(edges);
|
|
7113
7261
|
}
|
|
7114
7262
|
}, [nodes, edges, hideChannels]);
|
|
7115
|
-
const toggleChannelsVisibility = (0,
|
|
7263
|
+
const toggleChannelsVisibility = (0, import_react68.useCallback)(() => {
|
|
7116
7264
|
setHideChannels((prev) => {
|
|
7117
7265
|
const newValue = !prev;
|
|
7118
7266
|
localStorage.setItem(
|
|
@@ -7122,15 +7270,15 @@ var useChannelVisibility = ({
|
|
|
7122
7270
|
return newValue;
|
|
7123
7271
|
});
|
|
7124
7272
|
}, []);
|
|
7125
|
-
const channels = (0,
|
|
7273
|
+
const channels = (0, import_react68.useMemo)(
|
|
7126
7274
|
() => nodes.filter((node) => node.type === "channels"),
|
|
7127
7275
|
[nodes]
|
|
7128
7276
|
);
|
|
7129
|
-
const updatedNodes = (0,
|
|
7277
|
+
const updatedNodes = (0, import_react68.useMemo)(
|
|
7130
7278
|
() => nodes.filter((node) => node.type !== "channels"),
|
|
7131
7279
|
[nodes]
|
|
7132
7280
|
);
|
|
7133
|
-
const updatedEdges = (0,
|
|
7281
|
+
const updatedEdges = (0, import_react68.useMemo)(() => {
|
|
7134
7282
|
const newEdges = edges.reduce((acc, edge) => {
|
|
7135
7283
|
const { source, target, data } = edge;
|
|
7136
7284
|
const targetIsChannel = channels.some((channel) => channel.id === target);
|
|
@@ -7162,7 +7310,7 @@ var useChannelVisibility = ({
|
|
|
7162
7310
|
(edge, index, self) => index === self.findIndex((t) => t.id === edge.id)
|
|
7163
7311
|
);
|
|
7164
7312
|
}, [edges, channels]);
|
|
7165
|
-
(0,
|
|
7313
|
+
(0, import_react68.useEffect)(() => {
|
|
7166
7314
|
if (skipProcessing) {
|
|
7167
7315
|
return;
|
|
7168
7316
|
}
|
|
@@ -7185,12 +7333,12 @@ var useChannelVisibility = ({
|
|
|
7185
7333
|
};
|
|
7186
7334
|
|
|
7187
7335
|
// src/components/VisualizerDropdownContent.tsx
|
|
7188
|
-
var
|
|
7336
|
+
var import_react69 = require("react");
|
|
7189
7337
|
var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
|
|
7190
|
-
var
|
|
7338
|
+
var import_lucide_react25 = require("lucide-react");
|
|
7191
7339
|
var import_outline2 = require("@heroicons/react/24/outline");
|
|
7192
|
-
var
|
|
7193
|
-
var VisualizerDropdownContent = (0,
|
|
7340
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
7341
|
+
var VisualizerDropdownContent = (0, import_react69.memo)(
|
|
7194
7342
|
({
|
|
7195
7343
|
isMermaidView,
|
|
7196
7344
|
setIsMermaidView,
|
|
@@ -7216,7 +7364,7 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7216
7364
|
notesCount = 0,
|
|
7217
7365
|
onOpenNotes
|
|
7218
7366
|
}) => {
|
|
7219
|
-
const [layoutStatus, setLayoutStatus] = (0,
|
|
7367
|
+
const [layoutStatus, setLayoutStatus] = (0, import_react69.useState)("idle");
|
|
7220
7368
|
const portalContainer = usePortalContainer();
|
|
7221
7369
|
const handleSaveLayout = async () => {
|
|
7222
7370
|
if (!onSaveLayout) return;
|
|
@@ -7239,19 +7387,19 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7239
7387
|
setLayoutStatus("idle");
|
|
7240
7388
|
}
|
|
7241
7389
|
};
|
|
7242
|
-
return /* @__PURE__ */ (0,
|
|
7243
|
-
/* @__PURE__ */ (0,
|
|
7244
|
-
/* @__PURE__ */ (0,
|
|
7245
|
-
/* @__PURE__ */ (0,
|
|
7246
|
-
/* @__PURE__ */ (0,
|
|
7247
|
-
/* @__PURE__ */ (0,
|
|
7390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
7391
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenu.Sub, { children: [
|
|
7392
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(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: [
|
|
7393
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7394
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Canvas" }),
|
|
7395
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7248
7396
|
"svg",
|
|
7249
7397
|
{
|
|
7250
7398
|
className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
|
|
7251
7399
|
fill: "none",
|
|
7252
7400
|
viewBox: "0 0 24 24",
|
|
7253
7401
|
stroke: "currentColor",
|
|
7254
|
-
children: /* @__PURE__ */ (0,
|
|
7402
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7255
7403
|
"path",
|
|
7256
7404
|
{
|
|
7257
7405
|
strokeLinecap: "round",
|
|
@@ -7263,27 +7411,27 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7263
7411
|
}
|
|
7264
7412
|
)
|
|
7265
7413
|
] }),
|
|
7266
|
-
/* @__PURE__ */ (0,
|
|
7414
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7267
7415
|
DropdownMenu.SubContent,
|
|
7268
7416
|
{
|
|
7269
7417
|
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]",
|
|
7270
7418
|
sideOffset: 8,
|
|
7271
7419
|
alignOffset: -8,
|
|
7272
7420
|
children: [
|
|
7273
|
-
/* @__PURE__ */ (0,
|
|
7421
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7274
7422
|
DropdownMenu.CheckboxItem,
|
|
7275
7423
|
{
|
|
7276
7424
|
checked: isMermaidView,
|
|
7277
7425
|
onCheckedChange: setIsMermaidView,
|
|
7278
7426
|
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",
|
|
7279
7427
|
children: [
|
|
7280
|
-
/* @__PURE__ */ (0,
|
|
7281
|
-
/* @__PURE__ */ (0,
|
|
7282
|
-
/* @__PURE__ */ (0,
|
|
7428
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7429
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
|
|
7430
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7283
7431
|
"div",
|
|
7284
7432
|
{
|
|
7285
7433
|
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))]"}`,
|
|
7286
|
-
children: /* @__PURE__ */ (0,
|
|
7434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7287
7435
|
"div",
|
|
7288
7436
|
{
|
|
7289
7437
|
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"}`
|
|
@@ -7294,21 +7442,21 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7294
7442
|
]
|
|
7295
7443
|
}
|
|
7296
7444
|
),
|
|
7297
|
-
/* @__PURE__ */ (0,
|
|
7298
|
-
/* @__PURE__ */ (0,
|
|
7445
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7446
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7299
7447
|
DropdownMenu.CheckboxItem,
|
|
7300
7448
|
{
|
|
7301
7449
|
checked: animateMessages,
|
|
7302
7450
|
onCheckedChange: toggleAnimateMessages,
|
|
7303
7451
|
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",
|
|
7304
7452
|
children: [
|
|
7305
|
-
/* @__PURE__ */ (0,
|
|
7306
|
-
/* @__PURE__ */ (0,
|
|
7307
|
-
/* @__PURE__ */ (0,
|
|
7453
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Zap, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7454
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
|
|
7455
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7308
7456
|
"div",
|
|
7309
7457
|
{
|
|
7310
7458
|
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))]"}`,
|
|
7311
|
-
children: /* @__PURE__ */ (0,
|
|
7459
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7312
7460
|
"div",
|
|
7313
7461
|
{
|
|
7314
7462
|
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"}`
|
|
@@ -7319,20 +7467,20 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7319
7467
|
]
|
|
7320
7468
|
}
|
|
7321
7469
|
),
|
|
7322
|
-
hasChannels && /* @__PURE__ */ (0,
|
|
7470
|
+
hasChannels && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7323
7471
|
DropdownMenu.CheckboxItem,
|
|
7324
7472
|
{
|
|
7325
7473
|
checked: hideChannels,
|
|
7326
7474
|
onCheckedChange: toggleChannelsVisibility,
|
|
7327
7475
|
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",
|
|
7328
7476
|
children: [
|
|
7329
|
-
/* @__PURE__ */ (0,
|
|
7330
|
-
/* @__PURE__ */ (0,
|
|
7331
|
-
/* @__PURE__ */ (0,
|
|
7477
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7478
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Hide channels" }),
|
|
7479
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7332
7480
|
"div",
|
|
7333
7481
|
{
|
|
7334
7482
|
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))]"}`,
|
|
7335
|
-
children: /* @__PURE__ */ (0,
|
|
7483
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7336
7484
|
"div",
|
|
7337
7485
|
{
|
|
7338
7486
|
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"}`
|
|
@@ -7343,20 +7491,20 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7343
7491
|
]
|
|
7344
7492
|
}
|
|
7345
7493
|
),
|
|
7346
|
-
/* @__PURE__ */ (0,
|
|
7494
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7347
7495
|
DropdownMenu.CheckboxItem,
|
|
7348
7496
|
{
|
|
7349
7497
|
checked: showMinimap,
|
|
7350
7498
|
onCheckedChange: setShowMinimap,
|
|
7351
7499
|
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",
|
|
7352
7500
|
children: [
|
|
7353
|
-
/* @__PURE__ */ (0,
|
|
7354
|
-
/* @__PURE__ */ (0,
|
|
7355
|
-
/* @__PURE__ */ (0,
|
|
7501
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Map, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7502
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Show minimap" }),
|
|
7503
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7356
7504
|
"div",
|
|
7357
7505
|
{
|
|
7358
7506
|
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))]"}`,
|
|
7359
|
-
children: /* @__PURE__ */ (0,
|
|
7507
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7360
7508
|
"div",
|
|
7361
7509
|
{
|
|
7362
7510
|
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"}`
|
|
@@ -7367,19 +7515,19 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7367
7515
|
]
|
|
7368
7516
|
}
|
|
7369
7517
|
),
|
|
7370
|
-
/* @__PURE__ */ (0,
|
|
7371
|
-
/* @__PURE__ */ (0,
|
|
7518
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7519
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7372
7520
|
DropdownMenu.Item,
|
|
7373
7521
|
{
|
|
7374
7522
|
onClick: handleFitView,
|
|
7375
7523
|
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",
|
|
7376
7524
|
children: [
|
|
7377
|
-
/* @__PURE__ */ (0,
|
|
7378
|
-
/* @__PURE__ */ (0,
|
|
7525
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Maximize2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7526
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Fit to view" })
|
|
7379
7527
|
]
|
|
7380
7528
|
}
|
|
7381
7529
|
),
|
|
7382
|
-
/* @__PURE__ */ (0,
|
|
7530
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7383
7531
|
DropdownMenu.Item,
|
|
7384
7532
|
{
|
|
7385
7533
|
onClick: () => {
|
|
@@ -7393,8 +7541,8 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7393
7541
|
},
|
|
7394
7542
|
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",
|
|
7395
7543
|
children: [
|
|
7396
|
-
/* @__PURE__ */ (0,
|
|
7397
|
-
/* @__PURE__ */ (0,
|
|
7544
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Search, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7545
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Find on canvas" })
|
|
7398
7546
|
]
|
|
7399
7547
|
}
|
|
7400
7548
|
)
|
|
@@ -7402,14 +7550,14 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7402
7550
|
}
|
|
7403
7551
|
) })
|
|
7404
7552
|
] }),
|
|
7405
|
-
notesCount > 0 && onOpenNotes && /* @__PURE__ */ (0,
|
|
7553
|
+
notesCount > 0 && onOpenNotes && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7406
7554
|
DropdownMenu.Item,
|
|
7407
7555
|
{
|
|
7408
7556
|
onClick: onOpenNotes,
|
|
7409
7557
|
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",
|
|
7410
7558
|
children: [
|
|
7411
|
-
/* @__PURE__ */ (0,
|
|
7412
|
-
/* @__PURE__ */ (0,
|
|
7559
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.MessageCircle, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7560
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex-1 font-normal", children: [
|
|
7413
7561
|
"View notes (",
|
|
7414
7562
|
notesCount,
|
|
7415
7563
|
")"
|
|
@@ -7417,19 +7565,19 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7417
7565
|
]
|
|
7418
7566
|
}
|
|
7419
7567
|
),
|
|
7420
|
-
isDevMode && onSaveLayout && /* @__PURE__ */ (0,
|
|
7421
|
-
/* @__PURE__ */ (0,
|
|
7422
|
-
/* @__PURE__ */ (0,
|
|
7423
|
-
/* @__PURE__ */ (0,
|
|
7424
|
-
/* @__PURE__ */ (0,
|
|
7425
|
-
/* @__PURE__ */ (0,
|
|
7568
|
+
isDevMode && onSaveLayout && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenu.Sub, { children: [
|
|
7569
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(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: [
|
|
7570
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7571
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Layout" }),
|
|
7572
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
|
|
7573
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7426
7574
|
"svg",
|
|
7427
7575
|
{
|
|
7428
7576
|
className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
|
|
7429
7577
|
fill: "none",
|
|
7430
7578
|
viewBox: "0 0 24 24",
|
|
7431
7579
|
stroke: "currentColor",
|
|
7432
|
-
children: /* @__PURE__ */ (0,
|
|
7580
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7433
7581
|
"path",
|
|
7434
7582
|
{
|
|
7435
7583
|
strokeLinecap: "round",
|
|
@@ -7441,34 +7589,34 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7441
7589
|
}
|
|
7442
7590
|
)
|
|
7443
7591
|
] }),
|
|
7444
|
-
/* @__PURE__ */ (0,
|
|
7592
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7445
7593
|
DropdownMenu.SubContent,
|
|
7446
7594
|
{
|
|
7447
7595
|
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]",
|
|
7448
7596
|
sideOffset: 8,
|
|
7449
7597
|
alignOffset: -8,
|
|
7450
7598
|
children: [
|
|
7451
|
-
/* @__PURE__ */ (0,
|
|
7599
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7452
7600
|
DropdownMenu.Item,
|
|
7453
7601
|
{
|
|
7454
7602
|
onClick: handleSaveLayout,
|
|
7455
7603
|
disabled: layoutStatus !== "idle",
|
|
7456
7604
|
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",
|
|
7457
7605
|
children: [
|
|
7458
|
-
layoutStatus === "saving" ? /* @__PURE__ */ (0,
|
|
7459
|
-
/* @__PURE__ */ (0,
|
|
7606
|
+
layoutStatus === "saving" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7607
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
|
|
7460
7608
|
]
|
|
7461
7609
|
}
|
|
7462
7610
|
),
|
|
7463
|
-
/* @__PURE__ */ (0,
|
|
7611
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7464
7612
|
DropdownMenu.Item,
|
|
7465
7613
|
{
|
|
7466
7614
|
onClick: handleResetLayout,
|
|
7467
7615
|
disabled: layoutStatus !== "idle",
|
|
7468
7616
|
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",
|
|
7469
7617
|
children: [
|
|
7470
|
-
layoutStatus === "resetting" ? /* @__PURE__ */ (0,
|
|
7471
|
-
/* @__PURE__ */ (0,
|
|
7618
|
+
layoutStatus === "resetting" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7619
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
|
|
7472
7620
|
]
|
|
7473
7621
|
}
|
|
7474
7622
|
)
|
|
@@ -7476,75 +7624,75 @@ var VisualizerDropdownContent = (0, import_react66.memo)(
|
|
|
7476
7624
|
}
|
|
7477
7625
|
) })
|
|
7478
7626
|
] }),
|
|
7479
|
-
isChatEnabled && /* @__PURE__ */ (0,
|
|
7480
|
-
/* @__PURE__ */ (0,
|
|
7481
|
-
/* @__PURE__ */ (0,
|
|
7627
|
+
isChatEnabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
7628
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7629
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7482
7630
|
DropdownMenu.Item,
|
|
7483
7631
|
{
|
|
7484
7632
|
onClick: openChat,
|
|
7485
7633
|
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",
|
|
7486
7634
|
children: [
|
|
7487
|
-
/* @__PURE__ */ (0,
|
|
7488
|
-
/* @__PURE__ */ (0,
|
|
7635
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7636
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Ask a question" })
|
|
7489
7637
|
]
|
|
7490
7638
|
}
|
|
7491
7639
|
)
|
|
7492
7640
|
] }),
|
|
7493
|
-
/* @__PURE__ */ (0,
|
|
7494
|
-
/* @__PURE__ */ (0,
|
|
7641
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7642
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7495
7643
|
DropdownMenu.Item,
|
|
7496
7644
|
{
|
|
7497
7645
|
onClick: handleCopyArchitectureCode,
|
|
7498
7646
|
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",
|
|
7499
7647
|
children: [
|
|
7500
|
-
/* @__PURE__ */ (0,
|
|
7501
|
-
/* @__PURE__ */ (0,
|
|
7648
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7649
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
|
|
7502
7650
|
]
|
|
7503
7651
|
}
|
|
7504
7652
|
),
|
|
7505
|
-
/* @__PURE__ */ (0,
|
|
7653
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7506
7654
|
DropdownMenu.Item,
|
|
7507
7655
|
{
|
|
7508
7656
|
onClick: handleExportVisual,
|
|
7509
7657
|
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",
|
|
7510
7658
|
children: [
|
|
7511
|
-
/* @__PURE__ */ (0,
|
|
7512
|
-
/* @__PURE__ */ (0,
|
|
7659
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_outline2.DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7660
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Export image" })
|
|
7513
7661
|
]
|
|
7514
7662
|
}
|
|
7515
7663
|
),
|
|
7516
|
-
/* @__PURE__ */ (0,
|
|
7664
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7517
7665
|
DropdownMenu.Item,
|
|
7518
7666
|
{
|
|
7519
7667
|
onClick: () => setIsShareModalOpen(true),
|
|
7520
7668
|
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",
|
|
7521
7669
|
children: [
|
|
7522
|
-
/* @__PURE__ */ (0,
|
|
7523
|
-
/* @__PURE__ */ (0,
|
|
7670
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7671
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Share Link" })
|
|
7524
7672
|
]
|
|
7525
7673
|
}
|
|
7526
7674
|
),
|
|
7527
|
-
/* @__PURE__ */ (0,
|
|
7528
|
-
/* @__PURE__ */ (0,
|
|
7675
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7676
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7529
7677
|
DropdownMenu.Item,
|
|
7530
7678
|
{
|
|
7531
7679
|
onClick: toggleFullScreen,
|
|
7532
7680
|
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",
|
|
7533
7681
|
children: [
|
|
7534
|
-
/* @__PURE__ */ (0,
|
|
7535
|
-
/* @__PURE__ */ (0,
|
|
7682
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_outline2.PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7683
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Start Presentation" })
|
|
7536
7684
|
]
|
|
7537
7685
|
}
|
|
7538
7686
|
),
|
|
7539
|
-
/* @__PURE__ */ (0,
|
|
7540
|
-
/* @__PURE__ */ (0,
|
|
7687
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
|
|
7688
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7541
7689
|
DropdownMenu.Item,
|
|
7542
7690
|
{
|
|
7543
7691
|
onClick: openStudioModal,
|
|
7544
7692
|
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",
|
|
7545
7693
|
children: [
|
|
7546
|
-
/* @__PURE__ */ (0,
|
|
7547
|
-
/* @__PURE__ */ (0,
|
|
7694
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react25.ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
|
|
7695
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
|
|
7548
7696
|
]
|
|
7549
7697
|
}
|
|
7550
7698
|
)
|
|
@@ -7555,30 +7703,30 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
|
|
|
7555
7703
|
var VisualizerDropdownContent_default = VisualizerDropdownContent;
|
|
7556
7704
|
|
|
7557
7705
|
// src/components/NodeContextMenu.tsx
|
|
7558
|
-
var
|
|
7706
|
+
var import_react70 = require("react");
|
|
7559
7707
|
var ContextMenu5 = __toESM(require("@radix-ui/react-context-menu"));
|
|
7560
|
-
var
|
|
7561
|
-
var NodeContextMenu_default = (0,
|
|
7708
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
7709
|
+
var NodeContextMenu_default = (0, import_react70.memo)(function NodeContextMenu({
|
|
7562
7710
|
items,
|
|
7563
7711
|
children
|
|
7564
7712
|
}) {
|
|
7565
7713
|
const portalContainer = usePortalContainer();
|
|
7566
|
-
if (!items || items.length === 0) return /* @__PURE__ */ (0,
|
|
7567
|
-
return /* @__PURE__ */ (0,
|
|
7568
|
-
/* @__PURE__ */ (0,
|
|
7569
|
-
/* @__PURE__ */ (0,
|
|
7714
|
+
if (!items || items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
|
7715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ContextMenu5.Root, { children: [
|
|
7716
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ContextMenu5.Trigger, { children }),
|
|
7717
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7570
7718
|
ContextMenu5.Content,
|
|
7571
7719
|
{
|
|
7572
7720
|
className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
|
|
7573
7721
|
onClick: (e) => e.stopPropagation(),
|
|
7574
|
-
children: items.map((item, index) => /* @__PURE__ */ (0,
|
|
7575
|
-
item.separator && index > 0 && /* @__PURE__ */ (0,
|
|
7576
|
-
/* @__PURE__ */ (0,
|
|
7722
|
+
children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
|
|
7723
|
+
item.separator && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
|
|
7724
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7577
7725
|
ContextMenu5.Item,
|
|
7578
7726
|
{
|
|
7579
7727
|
asChild: true,
|
|
7580
7728
|
className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
|
|
7581
|
-
children: /* @__PURE__ */ (0,
|
|
7729
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7582
7730
|
"a",
|
|
7583
7731
|
{
|
|
7584
7732
|
href: item.href,
|
|
@@ -7597,7 +7745,7 @@ var NodeContextMenu_default = (0, import_react67.memo)(function NodeContextMenu(
|
|
|
7597
7745
|
|
|
7598
7746
|
// src/utils/layout.ts
|
|
7599
7747
|
var import_dagre2 = __toESM(require("dagre"));
|
|
7600
|
-
var
|
|
7748
|
+
var import_react71 = require("@xyflow/react");
|
|
7601
7749
|
var GROUP_HEADER_HEIGHT = 44;
|
|
7602
7750
|
var GROUP_CONTENT_PADDING_TOP = 50;
|
|
7603
7751
|
var GROUP_CONTENT_PADDING_BOTTOM = 30;
|
|
@@ -8009,7 +8157,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
|
|
|
8009
8157
|
const isFlowStep = edge.type === "flow-step";
|
|
8010
8158
|
const isBidirectional = edge.type === "reads-writes";
|
|
8011
8159
|
const arrowMarker = {
|
|
8012
|
-
type:
|
|
8160
|
+
type: import_react71.MarkerType.ArrowClosed,
|
|
8013
8161
|
width: 20,
|
|
8014
8162
|
height: 20,
|
|
8015
8163
|
color: "rgb(var(--ec-page-text-muted))"
|
|
@@ -8066,7 +8214,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
|
|
|
8066
8214
|
const isFlowStep = edge.type === "flow-step";
|
|
8067
8215
|
const isBidirectional = edge.type === "reads-writes";
|
|
8068
8216
|
const arrowMarker = {
|
|
8069
|
-
type:
|
|
8217
|
+
type: import_react71.MarkerType.ArrowClosed,
|
|
8070
8218
|
width: 20,
|
|
8071
8219
|
height: 20,
|
|
8072
8220
|
color: "rgb(var(--ec-page-text-muted))"
|
|
@@ -8086,29 +8234,29 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
|
|
|
8086
8234
|
}
|
|
8087
8235
|
|
|
8088
8236
|
// src/components/NotesToolbarButton.tsx
|
|
8089
|
-
var
|
|
8090
|
-
var
|
|
8091
|
-
var
|
|
8237
|
+
var import_react72 = require("react");
|
|
8238
|
+
var import_lucide_react26 = require("lucide-react");
|
|
8239
|
+
var import_react73 = require("@xyflow/react");
|
|
8092
8240
|
var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
|
|
8093
|
-
var
|
|
8241
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
8094
8242
|
var NODE_TYPE_META = {
|
|
8095
|
-
service: { icon:
|
|
8096
|
-
services: { icon:
|
|
8097
|
-
event: { icon:
|
|
8098
|
-
events: { icon:
|
|
8099
|
-
command: { icon:
|
|
8100
|
-
commands: { icon:
|
|
8101
|
-
query: { icon:
|
|
8102
|
-
queries: { icon:
|
|
8103
|
-
channel: { icon:
|
|
8104
|
-
channels: { icon:
|
|
8105
|
-
data: { icon:
|
|
8106
|
-
"data-products": { icon:
|
|
8107
|
-
externalSystem: { icon:
|
|
8108
|
-
actor: { icon:
|
|
8109
|
-
view: { icon:
|
|
8110
|
-
domain: { icon:
|
|
8111
|
-
domains: { icon:
|
|
8243
|
+
service: { icon: import_lucide_react26.ServerIcon, color: "#ec4899", label: "Service" },
|
|
8244
|
+
services: { icon: import_lucide_react26.ServerIcon, color: "#ec4899", label: "Service" },
|
|
8245
|
+
event: { icon: import_lucide_react26.Zap, color: "#f97316", label: "Event" },
|
|
8246
|
+
events: { icon: import_lucide_react26.Zap, color: "#f97316", label: "Event" },
|
|
8247
|
+
command: { icon: import_lucide_react26.MessageSquare, color: "#3b82f6", label: "Command" },
|
|
8248
|
+
commands: { icon: import_lucide_react26.MessageSquare, color: "#3b82f6", label: "Command" },
|
|
8249
|
+
query: { icon: import_lucide_react26.Search, color: "#22c55e", label: "Query" },
|
|
8250
|
+
queries: { icon: import_lucide_react26.Search, color: "#22c55e", label: "Query" },
|
|
8251
|
+
channel: { icon: import_lucide_react26.ArrowRightLeft, color: "#6b7280", label: "Channel" },
|
|
8252
|
+
channels: { icon: import_lucide_react26.ArrowRightLeft, color: "#6b7280", label: "Channel" },
|
|
8253
|
+
data: { icon: import_lucide_react26.Database, color: "#3b82f6", label: "Data" },
|
|
8254
|
+
"data-products": { icon: import_lucide_react26.Package, color: "#6366f1", label: "Data Product" },
|
|
8255
|
+
externalSystem: { icon: import_lucide_react26.Globe, color: "#ec4899", label: "External System" },
|
|
8256
|
+
actor: { icon: import_lucide_react26.User, color: "#eab308", label: "Actor" },
|
|
8257
|
+
view: { icon: import_lucide_react26.MonitorIcon, color: "#8b5cf6", label: "View" },
|
|
8258
|
+
domain: { icon: import_lucide_react26.BoxesIcon, color: "#14b8a6", label: "Domain" },
|
|
8259
|
+
domains: { icon: import_lucide_react26.BoxesIcon, color: "#14b8a6", label: "Domain" }
|
|
8112
8260
|
};
|
|
8113
8261
|
function getNodeMeta(nodeType) {
|
|
8114
8262
|
if (!nodeType) return null;
|
|
@@ -8196,7 +8344,7 @@ function hashStr2(s) {
|
|
|
8196
8344
|
function Avatar2({ name, size = 28 }) {
|
|
8197
8345
|
const initials = name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
|
|
8198
8346
|
const [c1, c2] = AVATAR_PALETTES2[hashStr2(name) % AVATAR_PALETTES2.length];
|
|
8199
|
-
return /* @__PURE__ */ (0,
|
|
8347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8200
8348
|
"div",
|
|
8201
8349
|
{
|
|
8202
8350
|
style: {
|
|
@@ -8209,7 +8357,7 @@ function Avatar2({ name, size = 28 }) {
|
|
|
8209
8357
|
justifyContent: "center",
|
|
8210
8358
|
flexShrink: 0
|
|
8211
8359
|
},
|
|
8212
|
-
children: /* @__PURE__ */ (0,
|
|
8360
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8213
8361
|
"span",
|
|
8214
8362
|
{
|
|
8215
8363
|
style: {
|
|
@@ -8228,7 +8376,7 @@ function PriorityBadge({ priority }) {
|
|
|
8228
8376
|
const p = PRIORITY2[priority.toLowerCase()];
|
|
8229
8377
|
if (!p) return null;
|
|
8230
8378
|
const isUrgent = priority === "high" || priority === "critical";
|
|
8231
|
-
return /* @__PURE__ */ (0,
|
|
8379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8232
8380
|
"span",
|
|
8233
8381
|
{
|
|
8234
8382
|
style: {
|
|
@@ -8247,7 +8395,7 @@ function PriorityBadge({ priority }) {
|
|
|
8247
8395
|
lineHeight: 1.4
|
|
8248
8396
|
},
|
|
8249
8397
|
children: [
|
|
8250
|
-
isUrgent && /* @__PURE__ */ (0,
|
|
8398
|
+
isUrgent && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react26.AlertTriangle, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
|
|
8251
8399
|
p.label
|
|
8252
8400
|
]
|
|
8253
8401
|
}
|
|
@@ -8255,7 +8403,7 @@ function PriorityBadge({ priority }) {
|
|
|
8255
8403
|
}
|
|
8256
8404
|
function NoteCard2({ note, index }) {
|
|
8257
8405
|
const prioStyle = note.priority ? PRIORITY2[note.priority.toLowerCase()] : null;
|
|
8258
|
-
return /* @__PURE__ */ (0,
|
|
8406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8259
8407
|
"div",
|
|
8260
8408
|
{
|
|
8261
8409
|
style: {
|
|
@@ -8267,7 +8415,7 @@ function NoteCard2({ note, index }) {
|
|
|
8267
8415
|
boxShadow: "0 1px 3px rgba(0,0,0,0.04)"
|
|
8268
8416
|
},
|
|
8269
8417
|
children: [
|
|
8270
|
-
prioStyle && /* @__PURE__ */ (0,
|
|
8418
|
+
prioStyle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8271
8419
|
"div",
|
|
8272
8420
|
{
|
|
8273
8421
|
style: {
|
|
@@ -8281,7 +8429,7 @@ function NoteCard2({ note, index }) {
|
|
|
8281
8429
|
}
|
|
8282
8430
|
}
|
|
8283
8431
|
),
|
|
8284
|
-
/* @__PURE__ */ (0,
|
|
8432
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8285
8433
|
"div",
|
|
8286
8434
|
{
|
|
8287
8435
|
style: {
|
|
@@ -8291,7 +8439,7 @@ function NoteCard2({ note, index }) {
|
|
|
8291
8439
|
marginBottom: 8
|
|
8292
8440
|
},
|
|
8293
8441
|
children: [
|
|
8294
|
-
note.author ? /* @__PURE__ */ (0,
|
|
8442
|
+
note.author ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8295
8443
|
"div",
|
|
8296
8444
|
{
|
|
8297
8445
|
style: {
|
|
@@ -8305,10 +8453,10 @@ function NoteCard2({ note, index }) {
|
|
|
8305
8453
|
justifyContent: "center",
|
|
8306
8454
|
flexShrink: 0
|
|
8307
8455
|
},
|
|
8308
|
-
children: /* @__PURE__ */ (0,
|
|
8456
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
|
|
8309
8457
|
}
|
|
8310
8458
|
),
|
|
8311
|
-
/* @__PURE__ */ (0,
|
|
8459
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8312
8460
|
"span",
|
|
8313
8461
|
{
|
|
8314
8462
|
style: {
|
|
@@ -8320,11 +8468,11 @@ function NoteCard2({ note, index }) {
|
|
|
8320
8468
|
children: note.author
|
|
8321
8469
|
}
|
|
8322
8470
|
) }),
|
|
8323
|
-
note.priority && /* @__PURE__ */ (0,
|
|
8471
|
+
note.priority && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PriorityBadge, { priority: note.priority })
|
|
8324
8472
|
]
|
|
8325
8473
|
}
|
|
8326
8474
|
),
|
|
8327
|
-
/* @__PURE__ */ (0,
|
|
8475
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8328
8476
|
"p",
|
|
8329
8477
|
{
|
|
8330
8478
|
style: {
|
|
@@ -8349,12 +8497,12 @@ function AllNotesModal({
|
|
|
8349
8497
|
onClose,
|
|
8350
8498
|
nodes
|
|
8351
8499
|
}) {
|
|
8352
|
-
const { setCenter, getZoom } = (0,
|
|
8353
|
-
const [selectedIdx, setSelectedIdx] = (0,
|
|
8500
|
+
const { setCenter, getZoom } = (0, import_react73.useReactFlow)();
|
|
8501
|
+
const [selectedIdx, setSelectedIdx] = (0, import_react72.useState)(0);
|
|
8354
8502
|
const portalContainer = usePortalContainer();
|
|
8355
8503
|
const totalNotes = noteGroups.reduce((sum, g) => sum + g.notes.length, 0);
|
|
8356
8504
|
const selected = noteGroups[selectedIdx] || noteGroups[0];
|
|
8357
|
-
const handleNavigate = (0,
|
|
8505
|
+
const handleNavigate = (0, import_react72.useCallback)(
|
|
8358
8506
|
(nodeId) => {
|
|
8359
8507
|
const node = nodes.find((n) => n.id === nodeId);
|
|
8360
8508
|
if (!node) return;
|
|
@@ -8368,7 +8516,7 @@ function AllNotesModal({
|
|
|
8368
8516
|
[nodes, setCenter, getZoom, onClose]
|
|
8369
8517
|
);
|
|
8370
8518
|
if (totalNotes === 0) return null;
|
|
8371
|
-
return /* @__PURE__ */ (0,
|
|
8519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8372
8520
|
Dialog4.Root,
|
|
8373
8521
|
{
|
|
8374
8522
|
open: isOpen,
|
|
@@ -8378,13 +8526,13 @@ function AllNotesModal({
|
|
|
8378
8526
|
setSelectedIdx(0);
|
|
8379
8527
|
}
|
|
8380
8528
|
},
|
|
8381
|
-
children: /* @__PURE__ */ (0,
|
|
8529
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8382
8530
|
"div",
|
|
8383
8531
|
{
|
|
8384
8532
|
className: "fixed inset-0 z-[99999]",
|
|
8385
8533
|
style: { isolation: "isolate" },
|
|
8386
8534
|
children: [
|
|
8387
|
-
/* @__PURE__ */ (0,
|
|
8535
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8388
8536
|
Dialog4.Overlay,
|
|
8389
8537
|
{
|
|
8390
8538
|
style: {
|
|
@@ -8395,7 +8543,7 @@ function AllNotesModal({
|
|
|
8395
8543
|
}
|
|
8396
8544
|
}
|
|
8397
8545
|
),
|
|
8398
|
-
/* @__PURE__ */ (0,
|
|
8546
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8399
8547
|
Dialog4.Content,
|
|
8400
8548
|
{
|
|
8401
8549
|
style: {
|
|
@@ -8416,7 +8564,7 @@ function AllNotesModal({
|
|
|
8416
8564
|
outline: "none"
|
|
8417
8565
|
},
|
|
8418
8566
|
children: [
|
|
8419
|
-
/* @__PURE__ */ (0,
|
|
8567
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8420
8568
|
"div",
|
|
8421
8569
|
{
|
|
8422
8570
|
style: {
|
|
@@ -8428,7 +8576,7 @@ function AllNotesModal({
|
|
|
8428
8576
|
flexShrink: 0
|
|
8429
8577
|
},
|
|
8430
8578
|
children: [
|
|
8431
|
-
/* @__PURE__ */ (0,
|
|
8579
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8432
8580
|
"div",
|
|
8433
8581
|
{
|
|
8434
8582
|
style: {
|
|
@@ -8441,8 +8589,8 @@ function AllNotesModal({
|
|
|
8441
8589
|
justifyContent: "center",
|
|
8442
8590
|
flexShrink: 0
|
|
8443
8591
|
},
|
|
8444
|
-
children: /* @__PURE__ */ (0,
|
|
8445
|
-
|
|
8592
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8593
|
+
import_lucide_react26.MessageCircle,
|
|
8446
8594
|
{
|
|
8447
8595
|
style: { width: 16, height: 16, color: "#64748b" },
|
|
8448
8596
|
strokeWidth: 2.5
|
|
@@ -8450,8 +8598,8 @@ function AllNotesModal({
|
|
|
8450
8598
|
)
|
|
8451
8599
|
}
|
|
8452
8600
|
),
|
|
8453
|
-
/* @__PURE__ */ (0,
|
|
8454
|
-
/* @__PURE__ */ (0,
|
|
8601
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
8602
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8455
8603
|
Dialog4.Title,
|
|
8456
8604
|
{
|
|
8457
8605
|
style: {
|
|
@@ -8464,7 +8612,7 @@ function AllNotesModal({
|
|
|
8464
8612
|
children: "Notes"
|
|
8465
8613
|
}
|
|
8466
8614
|
),
|
|
8467
|
-
/* @__PURE__ */ (0,
|
|
8615
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8468
8616
|
Dialog4.Description,
|
|
8469
8617
|
{
|
|
8470
8618
|
style: {
|
|
@@ -8486,7 +8634,7 @@ function AllNotesModal({
|
|
|
8486
8634
|
}
|
|
8487
8635
|
)
|
|
8488
8636
|
] }),
|
|
8489
|
-
/* @__PURE__ */ (0,
|
|
8637
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8490
8638
|
"button",
|
|
8491
8639
|
{
|
|
8492
8640
|
style: {
|
|
@@ -8503,14 +8651,14 @@ function AllNotesModal({
|
|
|
8503
8651
|
flexShrink: 0
|
|
8504
8652
|
},
|
|
8505
8653
|
"aria-label": "Close",
|
|
8506
|
-
children: /* @__PURE__ */ (0,
|
|
8654
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react26.X, { style: { width: 15, height: 15 } })
|
|
8507
8655
|
}
|
|
8508
8656
|
) })
|
|
8509
8657
|
]
|
|
8510
8658
|
}
|
|
8511
8659
|
),
|
|
8512
|
-
/* @__PURE__ */ (0,
|
|
8513
|
-
/* @__PURE__ */ (0,
|
|
8660
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
|
|
8661
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8514
8662
|
"div",
|
|
8515
8663
|
{
|
|
8516
8664
|
style: {
|
|
@@ -8523,9 +8671,9 @@ function AllNotesModal({
|
|
|
8523
8671
|
children: noteGroups.map((group, i) => {
|
|
8524
8672
|
const isActive = i === selectedIdx;
|
|
8525
8673
|
const meta = getNodeMeta(group.nodeType);
|
|
8526
|
-
const IconComp = meta?.icon ||
|
|
8674
|
+
const IconComp = meta?.icon || import_lucide_react26.MessageCircle;
|
|
8527
8675
|
const iconColor = meta?.color || "#64748b";
|
|
8528
|
-
return /* @__PURE__ */ (0,
|
|
8676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8529
8677
|
"button",
|
|
8530
8678
|
{
|
|
8531
8679
|
onClick: () => setSelectedIdx(i),
|
|
@@ -8544,7 +8692,7 @@ function AllNotesModal({
|
|
|
8544
8692
|
transition: "background 0.1s"
|
|
8545
8693
|
},
|
|
8546
8694
|
children: [
|
|
8547
|
-
/* @__PURE__ */ (0,
|
|
8695
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8548
8696
|
"div",
|
|
8549
8697
|
{
|
|
8550
8698
|
style: {
|
|
@@ -8558,7 +8706,7 @@ function AllNotesModal({
|
|
|
8558
8706
|
flexShrink: 0,
|
|
8559
8707
|
transition: "background 0.15s"
|
|
8560
8708
|
},
|
|
8561
|
-
children: /* @__PURE__ */ (0,
|
|
8709
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8562
8710
|
IconComp,
|
|
8563
8711
|
{
|
|
8564
8712
|
style: {
|
|
@@ -8572,8 +8720,8 @@ function AllNotesModal({
|
|
|
8572
8720
|
)
|
|
8573
8721
|
}
|
|
8574
8722
|
),
|
|
8575
|
-
/* @__PURE__ */ (0,
|
|
8576
|
-
/* @__PURE__ */ (0,
|
|
8723
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
8724
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8577
8725
|
"div",
|
|
8578
8726
|
{
|
|
8579
8727
|
style: {
|
|
@@ -8588,7 +8736,7 @@ function AllNotesModal({
|
|
|
8588
8736
|
children: group.name
|
|
8589
8737
|
}
|
|
8590
8738
|
),
|
|
8591
|
-
/* @__PURE__ */ (0,
|
|
8739
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8592
8740
|
"div",
|
|
8593
8741
|
{
|
|
8594
8742
|
style: {
|
|
@@ -8611,8 +8759,8 @@ function AllNotesModal({
|
|
|
8611
8759
|
}
|
|
8612
8760
|
)
|
|
8613
8761
|
] }),
|
|
8614
|
-
/* @__PURE__ */ (0,
|
|
8615
|
-
|
|
8762
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8763
|
+
import_lucide_react26.ChevronRight,
|
|
8616
8764
|
{
|
|
8617
8765
|
style: {
|
|
8618
8766
|
width: 14,
|
|
@@ -8630,7 +8778,7 @@ function AllNotesModal({
|
|
|
8630
8778
|
})
|
|
8631
8779
|
}
|
|
8632
8780
|
),
|
|
8633
|
-
/* @__PURE__ */ (0,
|
|
8781
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8634
8782
|
"div",
|
|
8635
8783
|
{
|
|
8636
8784
|
style: {
|
|
@@ -8639,8 +8787,8 @@ function AllNotesModal({
|
|
|
8639
8787
|
display: "flex",
|
|
8640
8788
|
flexDirection: "column"
|
|
8641
8789
|
},
|
|
8642
|
-
children: selected && /* @__PURE__ */ (0,
|
|
8643
|
-
/* @__PURE__ */ (0,
|
|
8790
|
+
children: selected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
8791
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8644
8792
|
"div",
|
|
8645
8793
|
{
|
|
8646
8794
|
style: {
|
|
@@ -8653,7 +8801,7 @@ function AllNotesModal({
|
|
|
8653
8801
|
background: "#fafbfc"
|
|
8654
8802
|
},
|
|
8655
8803
|
children: [
|
|
8656
|
-
/* @__PURE__ */ (0,
|
|
8804
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8657
8805
|
"div",
|
|
8658
8806
|
{
|
|
8659
8807
|
style: {
|
|
@@ -8664,9 +8812,9 @@ function AllNotesModal({
|
|
|
8664
8812
|
children: [
|
|
8665
8813
|
(() => {
|
|
8666
8814
|
const meta = getNodeMeta(selected.nodeType);
|
|
8667
|
-
const Icon = meta?.icon ||
|
|
8815
|
+
const Icon = meta?.icon || import_lucide_react26.MessageCircle;
|
|
8668
8816
|
const color = meta?.color || "#64748b";
|
|
8669
|
-
return /* @__PURE__ */ (0,
|
|
8817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8670
8818
|
"div",
|
|
8671
8819
|
{
|
|
8672
8820
|
style: {
|
|
@@ -8679,7 +8827,7 @@ function AllNotesModal({
|
|
|
8679
8827
|
justifyContent: "center",
|
|
8680
8828
|
flexShrink: 0
|
|
8681
8829
|
},
|
|
8682
|
-
children: /* @__PURE__ */ (0,
|
|
8830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8683
8831
|
Icon,
|
|
8684
8832
|
{
|
|
8685
8833
|
style: {
|
|
@@ -8693,8 +8841,8 @@ function AllNotesModal({
|
|
|
8693
8841
|
}
|
|
8694
8842
|
);
|
|
8695
8843
|
})(),
|
|
8696
|
-
/* @__PURE__ */ (0,
|
|
8697
|
-
/* @__PURE__ */ (0,
|
|
8844
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
|
|
8845
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8698
8846
|
"div",
|
|
8699
8847
|
{
|
|
8700
8848
|
style: {
|
|
@@ -8706,7 +8854,7 @@ function AllNotesModal({
|
|
|
8706
8854
|
children: selected.name
|
|
8707
8855
|
}
|
|
8708
8856
|
),
|
|
8709
|
-
/* @__PURE__ */ (0,
|
|
8857
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8710
8858
|
"div",
|
|
8711
8859
|
{
|
|
8712
8860
|
style: {
|
|
@@ -8728,7 +8876,7 @@ function AllNotesModal({
|
|
|
8728
8876
|
]
|
|
8729
8877
|
}
|
|
8730
8878
|
),
|
|
8731
|
-
/* @__PURE__ */ (0,
|
|
8879
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8732
8880
|
"button",
|
|
8733
8881
|
{
|
|
8734
8882
|
onClick: () => handleNavigate(selected.nodeId),
|
|
@@ -8755,7 +8903,7 @@ function AllNotesModal({
|
|
|
8755
8903
|
e.currentTarget.style.color = "#475569";
|
|
8756
8904
|
},
|
|
8757
8905
|
children: [
|
|
8758
|
-
/* @__PURE__ */ (0,
|
|
8906
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react26.Locate, { style: { width: 12, height: 12 } }),
|
|
8759
8907
|
"Find on canvas"
|
|
8760
8908
|
]
|
|
8761
8909
|
}
|
|
@@ -8763,7 +8911,7 @@ function AllNotesModal({
|
|
|
8763
8911
|
]
|
|
8764
8912
|
}
|
|
8765
8913
|
),
|
|
8766
|
-
/* @__PURE__ */ (0,
|
|
8914
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8767
8915
|
"div",
|
|
8768
8916
|
{
|
|
8769
8917
|
style: {
|
|
@@ -8774,7 +8922,7 @@ function AllNotesModal({
|
|
|
8774
8922
|
flexDirection: "column",
|
|
8775
8923
|
gap: 10
|
|
8776
8924
|
},
|
|
8777
|
-
children: selected.notes.map((note, i) => /* @__PURE__ */ (0,
|
|
8925
|
+
children: selected.notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NoteCard2, { note, index: i }, i))
|
|
8778
8926
|
}
|
|
8779
8927
|
)
|
|
8780
8928
|
] })
|
|
@@ -8792,7 +8940,7 @@ function AllNotesModal({
|
|
|
8792
8940
|
}
|
|
8793
8941
|
|
|
8794
8942
|
// src/components/NodeGraph.tsx
|
|
8795
|
-
var
|
|
8943
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
8796
8944
|
var POSITION_CHANGE_THRESHOLD = 1;
|
|
8797
8945
|
var NODE_ORIGIN = [0.1, 0.1];
|
|
8798
8946
|
var MINIMAP_STYLE = {
|
|
@@ -8806,25 +8954,25 @@ var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
|
|
|
8806
8954
|
};
|
|
8807
8955
|
var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
|
|
8808
8956
|
var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
|
|
8809
|
-
var LegendPanel = (0,
|
|
8957
|
+
var LegendPanel = (0, import_react74.memo)(function LegendPanel2({
|
|
8810
8958
|
legend,
|
|
8811
8959
|
showMinimap,
|
|
8812
8960
|
onLegendClick
|
|
8813
8961
|
}) {
|
|
8814
|
-
return /* @__PURE__ */ (0,
|
|
8815
|
-
|
|
8962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
8963
|
+
import_react75.Panel,
|
|
8816
8964
|
{
|
|
8817
8965
|
position: "bottom-right",
|
|
8818
8966
|
style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
|
|
8819
|
-
children: /* @__PURE__ */ (0,
|
|
8820
|
-
([key, { count, colorClass, groupId }]) => /* @__PURE__ */ (0,
|
|
8967
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
|
|
8968
|
+
([key, { count, colorClass, groupId }]) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
8821
8969
|
"li",
|
|
8822
8970
|
{
|
|
8823
8971
|
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",
|
|
8824
8972
|
onClick: () => onLegendClick(key, groupId),
|
|
8825
8973
|
children: [
|
|
8826
|
-
/* @__PURE__ */ (0,
|
|
8827
|
-
/* @__PURE__ */ (0,
|
|
8974
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: `w-2 h-2 block ${colorClass}` }),
|
|
8975
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block capitalize", children: [
|
|
8828
8976
|
key,
|
|
8829
8977
|
" (",
|
|
8830
8978
|
count,
|
|
@@ -8868,17 +9016,17 @@ var NodeGraphBuilder = ({
|
|
|
8868
9016
|
onSaveLayout,
|
|
8869
9017
|
onResetLayout
|
|
8870
9018
|
}) => {
|
|
8871
|
-
(0,
|
|
9019
|
+
(0, import_react74.useEffect)(() => {
|
|
8872
9020
|
if (onBuildUrl) {
|
|
8873
9021
|
setBuildUrlFn(onBuildUrl);
|
|
8874
9022
|
}
|
|
8875
9023
|
}, []);
|
|
8876
|
-
const nodeTypes = (0,
|
|
9024
|
+
const nodeTypes = (0, import_react74.useMemo)(() => {
|
|
8877
9025
|
const wrapWithContextMenu = (Component) => {
|
|
8878
|
-
const Wrapped = (0,
|
|
9026
|
+
const Wrapped = (0, import_react74.memo)((props) => {
|
|
8879
9027
|
const items = props.data?.contextMenu;
|
|
8880
|
-
if (!items?.length) return /* @__PURE__ */ (0,
|
|
8881
|
-
return /* @__PURE__ */ (0,
|
|
9028
|
+
if (!items?.length) return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, { ...props });
|
|
9029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NodeContextMenu_default, { items, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, { ...props }) });
|
|
8882
9030
|
});
|
|
8883
9031
|
Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
|
|
8884
9032
|
return Wrapped;
|
|
@@ -8912,10 +9060,11 @@ var NodeGraphBuilder = ({
|
|
|
8912
9060
|
"data-product": wrapWithContextMenu(DataProduct_default),
|
|
8913
9061
|
"data-products": wrapWithContextMenu(DataProduct_default),
|
|
8914
9062
|
group: GroupNode_default,
|
|
8915
|
-
note: (0,
|
|
9063
|
+
note: (0, import_react74.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NoteNode_default, { ...props, readOnly: true })),
|
|
9064
|
+
field: wrapWithContextMenu(FieldNode_default)
|
|
8916
9065
|
};
|
|
8917
9066
|
}, []);
|
|
8918
|
-
const edgeTypes2 = (0,
|
|
9067
|
+
const edgeTypes2 = (0, import_react74.useMemo)(
|
|
8919
9068
|
() => ({
|
|
8920
9069
|
animated: AnimatedMessageEdge_default,
|
|
8921
9070
|
multiline: MultilineEdgeLabel_default,
|
|
@@ -8923,47 +9072,47 @@ var NodeGraphBuilder = ({
|
|
|
8923
9072
|
}),
|
|
8924
9073
|
[]
|
|
8925
9074
|
);
|
|
8926
|
-
const [nodes, setNodes, onNodesChange] = (0,
|
|
8927
|
-
const [edges, setEdges, onEdgesChange] = (0,
|
|
8928
|
-
const { fitView, getNodes } = (0,
|
|
8929
|
-
(0,
|
|
9075
|
+
const [nodes, setNodes, onNodesChange] = (0, import_react75.useNodesState)(initialNodes);
|
|
9076
|
+
const [edges, setEdges, onEdgesChange] = (0, import_react75.useEdgesState)(initialEdges);
|
|
9077
|
+
const { fitView, getNodes } = (0, import_react75.useReactFlow)();
|
|
9078
|
+
(0, import_react74.useEffect)(() => {
|
|
8930
9079
|
setNodes(initialNodes);
|
|
8931
9080
|
setEdges(initialEdges);
|
|
8932
9081
|
requestAnimationFrame(() => {
|
|
8933
9082
|
fitView({ duration: 300, padding: 0.2 });
|
|
8934
9083
|
});
|
|
8935
9084
|
}, [initialNodes, initialEdges, setNodes, setEdges, fitView]);
|
|
8936
|
-
const [animateMessages, setAnimateMessages] = (0,
|
|
8937
|
-
const [_activeStepIndex, _setActiveStepIndex] = (0,
|
|
8938
|
-
const [_isFullscreen, _setIsFullscreen] = (0,
|
|
8939
|
-
const [isShareModalOpen, setIsShareModalOpen] = (0,
|
|
8940
|
-
const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0,
|
|
8941
|
-
const [isMermaidView, setIsMermaidView] = (0,
|
|
8942
|
-
const [showMinimap, setShowMinimap] = (0,
|
|
8943
|
-
const [hasLayoutChanges, setHasLayoutChanges] = (0,
|
|
8944
|
-
const [isSavingLayout, setIsSavingLayout] = (0,
|
|
8945
|
-
const initialPositionsRef = (0,
|
|
9085
|
+
const [animateMessages, setAnimateMessages] = (0, import_react74.useState)(true);
|
|
9086
|
+
const [_activeStepIndex, _setActiveStepIndex] = (0, import_react74.useState)(null);
|
|
9087
|
+
const [_isFullscreen, _setIsFullscreen] = (0, import_react74.useState)(false);
|
|
9088
|
+
const [isShareModalOpen, setIsShareModalOpen] = (0, import_react74.useState)(false);
|
|
9089
|
+
const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react74.useState)(false);
|
|
9090
|
+
const [isMermaidView, setIsMermaidView] = (0, import_react74.useState)(false);
|
|
9091
|
+
const [showMinimap, setShowMinimap] = (0, import_react74.useState)(false);
|
|
9092
|
+
const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react74.useState)(false);
|
|
9093
|
+
const [isSavingLayout, setIsSavingLayout] = (0, import_react74.useState)(false);
|
|
9094
|
+
const initialPositionsRef = (0, import_react74.useRef)(
|
|
8946
9095
|
{}
|
|
8947
9096
|
);
|
|
8948
|
-
const [focusModeOpen, setFocusModeOpen] = (0,
|
|
8949
|
-
const [focusedNodeId, setFocusedNodeId] = (0,
|
|
8950
|
-
const [isNotesModalOpen, setIsNotesModalOpen] = (0,
|
|
8951
|
-
const openNotesModal = (0,
|
|
8952
|
-
const interactionCountRef = (0,
|
|
8953
|
-
const startInteraction = (0,
|
|
9097
|
+
const [focusModeOpen, setFocusModeOpen] = (0, import_react74.useState)(false);
|
|
9098
|
+
const [focusedNodeId, setFocusedNodeId] = (0, import_react74.useState)(null);
|
|
9099
|
+
const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react74.useState)(false);
|
|
9100
|
+
const openNotesModal = (0, import_react74.useCallback)(() => setIsNotesModalOpen(true), []);
|
|
9101
|
+
const interactionCountRef = (0, import_react74.useRef)(0);
|
|
9102
|
+
const startInteraction = (0, import_react74.useCallback)(() => {
|
|
8954
9103
|
interactionCountRef.current += 1;
|
|
8955
9104
|
if (interactionCountRef.current === 1) {
|
|
8956
9105
|
reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
|
|
8957
9106
|
}
|
|
8958
9107
|
}, []);
|
|
8959
|
-
const endInteraction = (0,
|
|
9108
|
+
const endInteraction = (0, import_react74.useCallback)(() => {
|
|
8960
9109
|
interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
|
|
8961
9110
|
if (interactionCountRef.current === 0) {
|
|
8962
9111
|
reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
|
|
8963
9112
|
}
|
|
8964
9113
|
}, []);
|
|
8965
|
-
const hoveredEdgeNodesRef = (0,
|
|
8966
|
-
const handleEdgeMouseEnter = (0,
|
|
9114
|
+
const hoveredEdgeNodesRef = (0, import_react74.useRef)([]);
|
|
9115
|
+
const handleEdgeMouseEnter = (0, import_react74.useCallback)(
|
|
8967
9116
|
(_, edge) => {
|
|
8968
9117
|
const wrapper = reactFlowWrapperRef.current;
|
|
8969
9118
|
if (!wrapper) return;
|
|
@@ -8975,15 +9124,15 @@ var NodeGraphBuilder = ({
|
|
|
8975
9124
|
},
|
|
8976
9125
|
[]
|
|
8977
9126
|
);
|
|
8978
|
-
const handleEdgeMouseLeave = (0,
|
|
9127
|
+
const handleEdgeMouseLeave = (0, import_react74.useCallback)(() => {
|
|
8979
9128
|
hoveredEdgeNodesRef.current.forEach(
|
|
8980
9129
|
(el) => el.classList.remove("ec-edge-hover-node")
|
|
8981
9130
|
);
|
|
8982
9131
|
hoveredEdgeNodesRef.current = [];
|
|
8983
9132
|
}, []);
|
|
8984
|
-
const hoveredNodeEdgesRef = (0,
|
|
8985
|
-
const hoveredNodePeersRef = (0,
|
|
8986
|
-
const handleNodeMouseEnter = (0,
|
|
9133
|
+
const hoveredNodeEdgesRef = (0, import_react74.useRef)([]);
|
|
9134
|
+
const hoveredNodePeersRef = (0, import_react74.useRef)([]);
|
|
9135
|
+
const handleNodeMouseEnter = (0, import_react74.useCallback)(
|
|
8987
9136
|
(_, node) => {
|
|
8988
9137
|
const wrapper = reactFlowWrapperRef.current;
|
|
8989
9138
|
if (!wrapper) return;
|
|
@@ -9012,7 +9161,7 @@ var NodeGraphBuilder = ({
|
|
|
9012
9161
|
},
|
|
9013
9162
|
[]
|
|
9014
9163
|
);
|
|
9015
|
-
const handleNodeMouseLeave = (0,
|
|
9164
|
+
const handleNodeMouseLeave = (0, import_react74.useCallback)(() => {
|
|
9016
9165
|
hoveredNodeEdgesRef.current.forEach(
|
|
9017
9166
|
(el) => el.classList.remove("ec-node-hover-edge")
|
|
9018
9167
|
);
|
|
@@ -9022,7 +9171,7 @@ var NodeGraphBuilder = ({
|
|
|
9022
9171
|
);
|
|
9023
9172
|
hoveredNodePeersRef.current = [];
|
|
9024
9173
|
}, []);
|
|
9025
|
-
const hasChannels = (0,
|
|
9174
|
+
const hasChannels = (0, import_react74.useMemo)(
|
|
9026
9175
|
() => initialNodes.some((node) => node.type === "channels"),
|
|
9027
9176
|
[initialNodes]
|
|
9028
9177
|
);
|
|
@@ -9033,14 +9182,14 @@ var NodeGraphBuilder = ({
|
|
|
9033
9182
|
setEdges,
|
|
9034
9183
|
skipProcessing: !hasChannels
|
|
9035
9184
|
});
|
|
9036
|
-
const searchRef = (0,
|
|
9037
|
-
const reactFlowWrapperRef = (0,
|
|
9038
|
-
const scrollableContainerRef = (0,
|
|
9039
|
-
const nodesRef = (0,
|
|
9185
|
+
const searchRef = (0, import_react74.useRef)(null);
|
|
9186
|
+
const reactFlowWrapperRef = (0, import_react74.useRef)(null);
|
|
9187
|
+
const scrollableContainerRef = (0, import_react74.useRef)(null);
|
|
9188
|
+
const nodesRef = (0, import_react74.useRef)(nodes);
|
|
9040
9189
|
nodesRef.current = nodes;
|
|
9041
|
-
const edgesRef = (0,
|
|
9190
|
+
const edgesRef = (0, import_react74.useRef)(edges);
|
|
9042
9191
|
edgesRef.current = edges;
|
|
9043
|
-
(0,
|
|
9192
|
+
(0, import_react74.useEffect)(() => {
|
|
9044
9193
|
if (isDevMode && initialNodes.length > 0) {
|
|
9045
9194
|
const positions = {};
|
|
9046
9195
|
initialNodes.forEach((node) => {
|
|
@@ -9049,7 +9198,7 @@ var NodeGraphBuilder = ({
|
|
|
9049
9198
|
initialPositionsRef.current = positions;
|
|
9050
9199
|
}
|
|
9051
9200
|
}, [isDevMode, initialNodes]);
|
|
9052
|
-
const checkForLayoutChanges = (0,
|
|
9201
|
+
const checkForLayoutChanges = (0, import_react74.useCallback)(() => {
|
|
9053
9202
|
if (!isDevMode) return;
|
|
9054
9203
|
const initial = initialPositionsRef.current;
|
|
9055
9204
|
if (Object.keys(initial).length === 0) return;
|
|
@@ -9059,7 +9208,7 @@ var NodeGraphBuilder = ({
|
|
|
9059
9208
|
});
|
|
9060
9209
|
setHasLayoutChanges(hasChanges);
|
|
9061
9210
|
}, [isDevMode]);
|
|
9062
|
-
const handleNodesChange = (0,
|
|
9211
|
+
const handleNodesChange = (0, import_react74.useCallback)(
|
|
9063
9212
|
(changes) => {
|
|
9064
9213
|
onNodesChange(changes);
|
|
9065
9214
|
const hasDragEnd = changes.some(
|
|
@@ -9071,7 +9220,7 @@ var NodeGraphBuilder = ({
|
|
|
9071
9220
|
},
|
|
9072
9221
|
[onNodesChange, checkForLayoutChanges]
|
|
9073
9222
|
);
|
|
9074
|
-
const resetNodesAndEdges = (0,
|
|
9223
|
+
const resetNodesAndEdges = (0, import_react74.useCallback)(() => {
|
|
9075
9224
|
setNodes(
|
|
9076
9225
|
(nds) => nds.map((node) => {
|
|
9077
9226
|
node.style = { ...node.style, opacity: 1 };
|
|
@@ -9090,7 +9239,7 @@ var NodeGraphBuilder = ({
|
|
|
9090
9239
|
})
|
|
9091
9240
|
);
|
|
9092
9241
|
}, [setNodes, setEdges, animateMessages]);
|
|
9093
|
-
(0,
|
|
9242
|
+
(0, import_react74.useEffect)(() => {
|
|
9094
9243
|
if (!focusNodeId) return;
|
|
9095
9244
|
const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
|
|
9096
9245
|
if (!targetNode) return;
|
|
@@ -9108,13 +9257,13 @@ var NodeGraphBuilder = ({
|
|
|
9108
9257
|
});
|
|
9109
9258
|
});
|
|
9110
9259
|
}, [focusNodeId, focusRequestId, fitView, setNodes]);
|
|
9111
|
-
(0,
|
|
9260
|
+
(0, import_react74.useEffect)(() => {
|
|
9112
9261
|
if (fitRequestId == null) return;
|
|
9113
9262
|
requestAnimationFrame(() => {
|
|
9114
9263
|
fitView({ duration: 400, padding: 0.2 });
|
|
9115
9264
|
});
|
|
9116
9265
|
}, [fitRequestId, fitView]);
|
|
9117
|
-
const handleNodeClick = (0,
|
|
9266
|
+
const handleNodeClick = (0, import_react74.useCallback)(
|
|
9118
9267
|
(_, node) => {
|
|
9119
9268
|
if (onNodeClick) {
|
|
9120
9269
|
onNodeClick(node);
|
|
@@ -9136,7 +9285,7 @@ var NodeGraphBuilder = ({
|
|
|
9136
9285
|
},
|
|
9137
9286
|
[onNodeClick, linksToVisualiser, onNavigate]
|
|
9138
9287
|
);
|
|
9139
|
-
const toggleAnimateMessages = (0,
|
|
9288
|
+
const toggleAnimateMessages = (0, import_react74.useCallback)(() => {
|
|
9140
9289
|
setAnimateMessages((prev) => {
|
|
9141
9290
|
const next = !prev;
|
|
9142
9291
|
localStorage.setItem(
|
|
@@ -9146,10 +9295,10 @@ var NodeGraphBuilder = ({
|
|
|
9146
9295
|
return next;
|
|
9147
9296
|
});
|
|
9148
9297
|
}, []);
|
|
9149
|
-
const handleFitView = (0,
|
|
9298
|
+
const handleFitView = (0, import_react74.useCallback)(() => {
|
|
9150
9299
|
fitView({ duration: 400, padding: 0.2 });
|
|
9151
9300
|
}, [fitView]);
|
|
9152
|
-
(0,
|
|
9301
|
+
(0, import_react74.useEffect)(() => {
|
|
9153
9302
|
if (animated !== void 0) {
|
|
9154
9303
|
setAnimateMessages(animated);
|
|
9155
9304
|
return;
|
|
@@ -9169,7 +9318,7 @@ var NodeGraphBuilder = ({
|
|
|
9169
9318
|
}
|
|
9170
9319
|
}
|
|
9171
9320
|
}, [animated]);
|
|
9172
|
-
(0,
|
|
9321
|
+
(0, import_react74.useEffect)(() => {
|
|
9173
9322
|
setEdges(
|
|
9174
9323
|
(eds) => eds.map((edge) => ({
|
|
9175
9324
|
...edge,
|
|
@@ -9179,12 +9328,12 @@ var NodeGraphBuilder = ({
|
|
|
9179
9328
|
}))
|
|
9180
9329
|
);
|
|
9181
9330
|
}, [animateMessages]);
|
|
9182
|
-
(0,
|
|
9331
|
+
(0, import_react74.useEffect)(() => {
|
|
9183
9332
|
setTimeout(() => {
|
|
9184
9333
|
fitView({ duration: 800 });
|
|
9185
9334
|
}, 150);
|
|
9186
9335
|
}, []);
|
|
9187
|
-
const generateMermaidCode = (0,
|
|
9336
|
+
const generateMermaidCode = (0, import_react74.useCallback)(() => {
|
|
9188
9337
|
try {
|
|
9189
9338
|
return convertToMermaid(nodesRef.current, edgesRef.current, {
|
|
9190
9339
|
includeStyles: true,
|
|
@@ -9195,7 +9344,7 @@ var NodeGraphBuilder = ({
|
|
|
9195
9344
|
return "";
|
|
9196
9345
|
}
|
|
9197
9346
|
}, []);
|
|
9198
|
-
(0,
|
|
9347
|
+
(0, import_react74.useEffect)(() => {
|
|
9199
9348
|
if (zoomOnScroll) return;
|
|
9200
9349
|
const findScrollableContainer = () => {
|
|
9201
9350
|
const selectors = [
|
|
@@ -9240,34 +9389,34 @@ var NodeGraphBuilder = ({
|
|
|
9240
9389
|
};
|
|
9241
9390
|
}
|
|
9242
9391
|
}, [zoomOnScroll]);
|
|
9243
|
-
const handlePaneClick = (0,
|
|
9392
|
+
const handlePaneClick = (0, import_react74.useCallback)(() => {
|
|
9244
9393
|
searchRef.current?.hideSuggestions();
|
|
9245
9394
|
resetNodesAndEdges();
|
|
9246
9395
|
fitView({ duration: 800 });
|
|
9247
9396
|
}, [resetNodesAndEdges, fitView]);
|
|
9248
|
-
const handleNodeSelect = (0,
|
|
9397
|
+
const handleNodeSelect = (0, import_react74.useCallback)(
|
|
9249
9398
|
(node) => {
|
|
9250
9399
|
handleNodeClick(null, node);
|
|
9251
9400
|
},
|
|
9252
9401
|
[handleNodeClick]
|
|
9253
9402
|
);
|
|
9254
|
-
const handleSearchClear = (0,
|
|
9403
|
+
const handleSearchClear = (0, import_react74.useCallback)(() => {
|
|
9255
9404
|
resetNodesAndEdges();
|
|
9256
9405
|
fitView({ duration: 800 });
|
|
9257
9406
|
}, [resetNodesAndEdges, fitView]);
|
|
9258
|
-
const downloadImage = (0,
|
|
9407
|
+
const downloadImage = (0, import_react74.useCallback)((dataUrl, filename) => {
|
|
9259
9408
|
const a = document.createElement("a");
|
|
9260
9409
|
a.setAttribute("download", `${filename || "eventcatalog"}.png`);
|
|
9261
9410
|
a.setAttribute("href", dataUrl);
|
|
9262
9411
|
a.click();
|
|
9263
9412
|
}, []);
|
|
9264
|
-
const openStudioModal = (0,
|
|
9413
|
+
const openStudioModal = (0, import_react74.useCallback)(() => {
|
|
9265
9414
|
setIsStudioModalOpen(true);
|
|
9266
9415
|
}, [setIsStudioModalOpen]);
|
|
9267
|
-
const openChat = (0,
|
|
9416
|
+
const openChat = (0, import_react74.useCallback)(() => {
|
|
9268
9417
|
window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
|
|
9269
9418
|
}, []);
|
|
9270
|
-
const handleSaveLayout = (0,
|
|
9419
|
+
const handleSaveLayout = (0, import_react74.useCallback)(async () => {
|
|
9271
9420
|
if (!resourceKey || !onSaveLayout) return false;
|
|
9272
9421
|
const positions = {};
|
|
9273
9422
|
nodesRef.current.forEach((node) => {
|
|
@@ -9278,11 +9427,11 @@ var NodeGraphBuilder = ({
|
|
|
9278
9427
|
});
|
|
9279
9428
|
return await onSaveLayout(resourceKey, positions);
|
|
9280
9429
|
}, [resourceKey, onSaveLayout]);
|
|
9281
|
-
const handleResetLayout = (0,
|
|
9430
|
+
const handleResetLayout = (0, import_react74.useCallback)(async () => {
|
|
9282
9431
|
if (!resourceKey || !onResetLayout) return false;
|
|
9283
9432
|
return await onResetLayout(resourceKey);
|
|
9284
9433
|
}, [resourceKey, onResetLayout]);
|
|
9285
|
-
const handleQuickSaveLayout = (0,
|
|
9434
|
+
const handleQuickSaveLayout = (0, import_react74.useCallback)(async () => {
|
|
9286
9435
|
setIsSavingLayout(true);
|
|
9287
9436
|
const success = await handleSaveLayout();
|
|
9288
9437
|
setIsSavingLayout(false);
|
|
@@ -9295,17 +9444,17 @@ var NodeGraphBuilder = ({
|
|
|
9295
9444
|
setHasLayoutChanges(false);
|
|
9296
9445
|
}
|
|
9297
9446
|
}, [handleSaveLayout]);
|
|
9298
|
-
const handleCopyArchitectureCode = (0,
|
|
9447
|
+
const handleCopyArchitectureCode = (0, import_react74.useCallback)(async () => {
|
|
9299
9448
|
const code = generateMermaidCode();
|
|
9300
9449
|
await copyToClipboard(code);
|
|
9301
9450
|
}, [generateMermaidCode]);
|
|
9302
|
-
const handleCopyShareUrl = (0,
|
|
9451
|
+
const handleCopyShareUrl = (0, import_react74.useCallback)(async () => {
|
|
9303
9452
|
const url = typeof window !== "undefined" ? window.location.href : "";
|
|
9304
9453
|
await copyToClipboard(url);
|
|
9305
9454
|
setShareUrlCopySuccess(true);
|
|
9306
9455
|
setTimeout(() => setShareUrlCopySuccess(false), 2e3);
|
|
9307
9456
|
}, []);
|
|
9308
|
-
const toggleFullScreen = (0,
|
|
9457
|
+
const toggleFullScreen = (0, import_react74.useCallback)(() => {
|
|
9309
9458
|
if (!document.fullscreenElement) {
|
|
9310
9459
|
reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
|
|
9311
9460
|
console.error(
|
|
@@ -9316,7 +9465,7 @@ var NodeGraphBuilder = ({
|
|
|
9316
9465
|
document.exitFullscreen();
|
|
9317
9466
|
}
|
|
9318
9467
|
}, []);
|
|
9319
|
-
(0,
|
|
9468
|
+
(0, import_react74.useEffect)(() => {
|
|
9320
9469
|
const handleFullscreenChange = () => {
|
|
9321
9470
|
_setIsFullscreen(!!document.fullscreenElement);
|
|
9322
9471
|
setTimeout(() => {
|
|
@@ -9328,13 +9477,13 @@ var NodeGraphBuilder = ({
|
|
|
9328
9477
|
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
9329
9478
|
};
|
|
9330
9479
|
}, [fitView]);
|
|
9331
|
-
const handleExportVisual = (0,
|
|
9480
|
+
const handleExportVisual = (0, import_react74.useCallback)(() => {
|
|
9332
9481
|
const imageWidth = 1024;
|
|
9333
9482
|
const imageHeight = 768;
|
|
9334
|
-
const nodesBounds = (0,
|
|
9483
|
+
const nodesBounds = (0, import_react75.getNodesBounds)(getNodes());
|
|
9335
9484
|
const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
|
|
9336
9485
|
const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
|
|
9337
|
-
const viewport = (0,
|
|
9486
|
+
const viewport = (0, import_react75.getViewportForBounds)(
|
|
9338
9487
|
nodesBounds,
|
|
9339
9488
|
width,
|
|
9340
9489
|
height,
|
|
@@ -9360,7 +9509,7 @@ var NodeGraphBuilder = ({
|
|
|
9360
9509
|
if (controls) controls.style.display = "block";
|
|
9361
9510
|
});
|
|
9362
9511
|
}, [getNodes, downloadImage, title]);
|
|
9363
|
-
const handleLegendClick = (0,
|
|
9512
|
+
const handleLegendClick = (0, import_react74.useCallback)(
|
|
9364
9513
|
(collectionType, groupId) => {
|
|
9365
9514
|
const updatedNodes = nodes.map((node) => {
|
|
9366
9515
|
if (groupId && node.data.group && node.data.group?.id === groupId) {
|
|
@@ -9391,7 +9540,7 @@ var NodeGraphBuilder = ({
|
|
|
9391
9540
|
},
|
|
9392
9541
|
[nodes, edges, setNodes, setEdges, fitView]
|
|
9393
9542
|
);
|
|
9394
|
-
const getNodesByCollectionWithColors = (0,
|
|
9543
|
+
const getNodesByCollectionWithColors = (0, import_react74.useCallback)((nodes2) => {
|
|
9395
9544
|
const colorClasses = {
|
|
9396
9545
|
events: "bg-orange-600",
|
|
9397
9546
|
services: "bg-pink-600",
|
|
@@ -9403,7 +9552,8 @@ var NodeGraphBuilder = ({
|
|
|
9403
9552
|
actor: "bg-yellow-500",
|
|
9404
9553
|
step: "bg-gray-700",
|
|
9405
9554
|
data: "bg-blue-600",
|
|
9406
|
-
"data-products": "bg-indigo-600"
|
|
9555
|
+
"data-products": "bg-indigo-600",
|
|
9556
|
+
field: "bg-cyan-600"
|
|
9407
9557
|
};
|
|
9408
9558
|
let legendForDomains = {};
|
|
9409
9559
|
const domainGroups = [
|
|
@@ -9442,24 +9592,24 @@ var NodeGraphBuilder = ({
|
|
|
9442
9592
|
);
|
|
9443
9593
|
return { ...legendForDomains, ...legendForNodes };
|
|
9444
9594
|
}, []);
|
|
9445
|
-
const legendKeyRef = (0,
|
|
9595
|
+
const legendKeyRef = (0, import_react74.useRef)("");
|
|
9446
9596
|
const computedLegendKey = nodes.map((n) => `${n.id}:${n.type}:${n.data.group?.id || ""}`).join(",");
|
|
9447
9597
|
if (computedLegendKey !== legendKeyRef.current) {
|
|
9448
9598
|
legendKeyRef.current = computedLegendKey;
|
|
9449
9599
|
}
|
|
9450
9600
|
const legendKey = legendKeyRef.current;
|
|
9451
|
-
const legend = (0,
|
|
9601
|
+
const legend = (0, import_react74.useMemo)(
|
|
9452
9602
|
() => getNodesByCollectionWithColors(nodes),
|
|
9453
9603
|
[getNodesByCollectionWithColors, legendKey]
|
|
9454
9604
|
);
|
|
9455
|
-
const nodeIdsKeyRef = (0,
|
|
9605
|
+
const nodeIdsKeyRef = (0, import_react74.useRef)("");
|
|
9456
9606
|
const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
|
|
9457
9607
|
if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
|
|
9458
9608
|
nodeIdsKeyRef.current = computedNodeIdsKey;
|
|
9459
9609
|
}
|
|
9460
9610
|
const nodeIdsKey = nodeIdsKeyRef.current;
|
|
9461
|
-
const searchNodes = (0,
|
|
9462
|
-
const allNoteGroups = (0,
|
|
9611
|
+
const searchNodes = (0, import_react74.useMemo)(() => nodes, [nodeIdsKey]);
|
|
9612
|
+
const allNoteGroups = (0, import_react74.useMemo)(() => {
|
|
9463
9613
|
const groups = [];
|
|
9464
9614
|
for (const node of nodes) {
|
|
9465
9615
|
const result = getNotesFromNode(node);
|
|
@@ -9474,11 +9624,11 @@ var NodeGraphBuilder = ({
|
|
|
9474
9624
|
}
|
|
9475
9625
|
return groups;
|
|
9476
9626
|
}, [nodeIdsKey]);
|
|
9477
|
-
const totalNotesCount = (0,
|
|
9627
|
+
const totalNotesCount = (0, import_react74.useMemo)(
|
|
9478
9628
|
() => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
|
|
9479
9629
|
[allNoteGroups]
|
|
9480
9630
|
);
|
|
9481
|
-
const handleStepChange = (0,
|
|
9631
|
+
const handleStepChange = (0, import_react74.useCallback)(
|
|
9482
9632
|
(nodeId, highlightPaths, shouldZoomOut) => {
|
|
9483
9633
|
if (nodeId === null) {
|
|
9484
9634
|
resetNodesAndEdges();
|
|
@@ -9553,11 +9703,11 @@ var NodeGraphBuilder = ({
|
|
|
9553
9703
|
},
|
|
9554
9704
|
[nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
|
|
9555
9705
|
);
|
|
9556
|
-
const isFlowVisualization = (0,
|
|
9706
|
+
const isFlowVisualization = (0, import_react74.useMemo)(
|
|
9557
9707
|
() => edges.some((edge) => edge.type === "flow-edge"),
|
|
9558
9708
|
[edges]
|
|
9559
9709
|
);
|
|
9560
|
-
return /* @__PURE__ */ (0,
|
|
9710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9561
9711
|
"div",
|
|
9562
9712
|
{
|
|
9563
9713
|
ref: reactFlowWrapperRef,
|
|
@@ -9568,22 +9718,22 @@ var NodeGraphBuilder = ({
|
|
|
9568
9718
|
display: "flex",
|
|
9569
9719
|
flexDirection: "column"
|
|
9570
9720
|
},
|
|
9571
|
-
children: /* @__PURE__ */ (0,
|
|
9572
|
-
isMermaidView ? /* @__PURE__ */ (0,
|
|
9573
|
-
/* @__PURE__ */ (0,
|
|
9574
|
-
/* @__PURE__ */ (0,
|
|
9575
|
-
/* @__PURE__ */ (0,
|
|
9721
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
|
|
9722
|
+
isMermaidView ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
9723
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("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: [
|
|
9724
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(DropdownMenu2.Root, { children: [
|
|
9725
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9576
9726
|
"button",
|
|
9577
9727
|
{
|
|
9578
9728
|
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",
|
|
9579
9729
|
"aria-label": "Open menu",
|
|
9580
9730
|
children: [
|
|
9581
|
-
title && /* @__PURE__ */ (0,
|
|
9582
|
-
/* @__PURE__ */ (0,
|
|
9731
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
|
|
9732
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.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" })
|
|
9583
9733
|
]
|
|
9584
9734
|
}
|
|
9585
9735
|
) }),
|
|
9586
|
-
/* @__PURE__ */ (0,
|
|
9736
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9587
9737
|
DropdownMenu2.Content,
|
|
9588
9738
|
{
|
|
9589
9739
|
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",
|
|
@@ -9591,8 +9741,8 @@ var NodeGraphBuilder = ({
|
|
|
9591
9741
|
align: "end",
|
|
9592
9742
|
alignOffset: -180,
|
|
9593
9743
|
children: [
|
|
9594
|
-
/* @__PURE__ */ (0,
|
|
9595
|
-
/* @__PURE__ */ (0,
|
|
9744
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
|
|
9745
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9596
9746
|
VisualizerDropdownContent_default,
|
|
9597
9747
|
{
|
|
9598
9748
|
isMermaidView,
|
|
@@ -9622,7 +9772,7 @@ var NodeGraphBuilder = ({
|
|
|
9622
9772
|
}
|
|
9623
9773
|
) })
|
|
9624
9774
|
] }) }),
|
|
9625
|
-
mode === "full" && showSearch && /* @__PURE__ */ (0,
|
|
9775
|
+
mode === "full" && showSearch && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-96", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9626
9776
|
VisualiserSearch_default,
|
|
9627
9777
|
{
|
|
9628
9778
|
ref: searchRef,
|
|
@@ -9632,7 +9782,7 @@ var NodeGraphBuilder = ({
|
|
|
9632
9782
|
}
|
|
9633
9783
|
) }) })
|
|
9634
9784
|
] }),
|
|
9635
|
-
/* @__PURE__ */ (0,
|
|
9785
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9636
9786
|
MermaidView_default,
|
|
9637
9787
|
{
|
|
9638
9788
|
nodes,
|
|
@@ -9640,8 +9790,8 @@ var NodeGraphBuilder = ({
|
|
|
9640
9790
|
maxTextSize
|
|
9641
9791
|
}
|
|
9642
9792
|
) })
|
|
9643
|
-
] }) : /* @__PURE__ */ (0,
|
|
9644
|
-
|
|
9793
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9794
|
+
import_react75.ReactFlow,
|
|
9645
9795
|
{
|
|
9646
9796
|
nodeTypes,
|
|
9647
9797
|
edgeTypes: edgeTypes2,
|
|
@@ -9653,7 +9803,7 @@ var NodeGraphBuilder = ({
|
|
|
9653
9803
|
onEdgesChange,
|
|
9654
9804
|
onEdgeMouseEnter: handleEdgeMouseEnter,
|
|
9655
9805
|
onEdgeMouseLeave: handleEdgeMouseLeave,
|
|
9656
|
-
connectionLineType:
|
|
9806
|
+
connectionLineType: import_react75.ConnectionLineType.SmoothStep,
|
|
9657
9807
|
nodeOrigin: NODE_ORIGIN,
|
|
9658
9808
|
onNodeClick: handleNodeClick,
|
|
9659
9809
|
onNodeMouseEnter: handleNodeMouseEnter,
|
|
@@ -9666,30 +9816,30 @@ var NodeGraphBuilder = ({
|
|
|
9666
9816
|
zoomOnScroll,
|
|
9667
9817
|
className: "relative",
|
|
9668
9818
|
children: [
|
|
9669
|
-
/* @__PURE__ */ (0,
|
|
9670
|
-
|
|
9819
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9820
|
+
import_react75.Panel,
|
|
9671
9821
|
{
|
|
9672
9822
|
position: "top-center",
|
|
9673
9823
|
className: "w-full pr-6 pointer-events-none",
|
|
9674
9824
|
children: [
|
|
9675
|
-
/* @__PURE__ */ (0,
|
|
9676
|
-
/* @__PURE__ */ (0,
|
|
9677
|
-
/* @__PURE__ */ (0,
|
|
9825
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
|
|
9826
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(DropdownMenu2.Root, { children: [
|
|
9827
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9678
9828
|
"button",
|
|
9679
9829
|
{
|
|
9680
9830
|
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",
|
|
9681
9831
|
"aria-label": "Open menu",
|
|
9682
9832
|
children: [
|
|
9683
|
-
title && /* @__PURE__ */ (0,
|
|
9684
|
-
/* @__PURE__ */ (0,
|
|
9833
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
|
|
9834
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.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" })
|
|
9685
9835
|
]
|
|
9686
9836
|
}
|
|
9687
9837
|
) }),
|
|
9688
|
-
/* @__PURE__ */ (0,
|
|
9838
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9689
9839
|
DropdownMenu2.Portal,
|
|
9690
9840
|
{
|
|
9691
9841
|
container: reactFlowWrapperRef.current,
|
|
9692
|
-
children: /* @__PURE__ */ (0,
|
|
9842
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9693
9843
|
DropdownMenu2.Content,
|
|
9694
9844
|
{
|
|
9695
9845
|
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",
|
|
@@ -9697,8 +9847,8 @@ var NodeGraphBuilder = ({
|
|
|
9697
9847
|
align: "end",
|
|
9698
9848
|
alignOffset: -180,
|
|
9699
9849
|
children: [
|
|
9700
|
-
/* @__PURE__ */ (0,
|
|
9701
|
-
/* @__PURE__ */ (0,
|
|
9850
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
|
|
9851
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9702
9852
|
VisualizerDropdownContent_default,
|
|
9703
9853
|
{
|
|
9704
9854
|
isMermaidView,
|
|
@@ -9732,7 +9882,7 @@ var NodeGraphBuilder = ({
|
|
|
9732
9882
|
}
|
|
9733
9883
|
)
|
|
9734
9884
|
] }) }),
|
|
9735
|
-
mode === "full" && showSearch && /* @__PURE__ */ (0,
|
|
9885
|
+
mode === "full" && showSearch && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-96", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9736
9886
|
VisualiserSearch_default,
|
|
9737
9887
|
{
|
|
9738
9888
|
ref: searchRef,
|
|
@@ -9742,9 +9892,9 @@ var NodeGraphBuilder = ({
|
|
|
9742
9892
|
}
|
|
9743
9893
|
) }) })
|
|
9744
9894
|
] }),
|
|
9745
|
-
links.length > 0 && /* @__PURE__ */ (0,
|
|
9746
|
-
/* @__PURE__ */ (0,
|
|
9747
|
-
/* @__PURE__ */ (0,
|
|
9895
|
+
links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative flex items-center -mt-1", children: [
|
|
9896
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
|
|
9897
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9748
9898
|
"select",
|
|
9749
9899
|
{
|
|
9750
9900
|
value: links.find(
|
|
@@ -9759,10 +9909,10 @@ var NodeGraphBuilder = ({
|
|
|
9759
9909
|
},
|
|
9760
9910
|
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))]",
|
|
9761
9911
|
style: { minWidth: 120, height: "26px" },
|
|
9762
|
-
children: links.map((link) => /* @__PURE__ */ (0,
|
|
9912
|
+
children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: link.url, children: link.label }, link.url))
|
|
9763
9913
|
}
|
|
9764
9914
|
),
|
|
9765
|
-
/* @__PURE__ */ (0,
|
|
9915
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9766
9916
|
"svg",
|
|
9767
9917
|
{
|
|
9768
9918
|
className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]",
|
|
@@ -9770,7 +9920,7 @@ var NodeGraphBuilder = ({
|
|
|
9770
9920
|
stroke: "currentColor",
|
|
9771
9921
|
strokeWidth: "2",
|
|
9772
9922
|
viewBox: "0 0 24 24",
|
|
9773
|
-
children: /* @__PURE__ */ (0,
|
|
9923
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9774
9924
|
"path",
|
|
9775
9925
|
{
|
|
9776
9926
|
strokeLinecap: "round",
|
|
@@ -9784,10 +9934,10 @@ var NodeGraphBuilder = ({
|
|
|
9784
9934
|
]
|
|
9785
9935
|
}
|
|
9786
9936
|
),
|
|
9787
|
-
includeBackground && /* @__PURE__ */ (0,
|
|
9788
|
-
includeBackground && /* @__PURE__ */ (0,
|
|
9789
|
-
showMinimap && /* @__PURE__ */ (0,
|
|
9790
|
-
|
|
9937
|
+
includeBackground && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react75.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
|
|
9938
|
+
includeBackground && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react75.Controls, {}),
|
|
9939
|
+
showMinimap && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9940
|
+
import_react75.MiniMap,
|
|
9791
9941
|
{
|
|
9792
9942
|
nodeStrokeWidth: 3,
|
|
9793
9943
|
zoomable: true,
|
|
@@ -9795,7 +9945,7 @@ var NodeGraphBuilder = ({
|
|
|
9795
9945
|
style: MINIMAP_STYLE
|
|
9796
9946
|
}
|
|
9797
9947
|
),
|
|
9798
|
-
isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0,
|
|
9948
|
+
isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react75.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9799
9949
|
StepWalkthrough_default,
|
|
9800
9950
|
{
|
|
9801
9951
|
nodes,
|
|
@@ -9805,14 +9955,14 @@ var NodeGraphBuilder = ({
|
|
|
9805
9955
|
mode
|
|
9806
9956
|
}
|
|
9807
9957
|
) }),
|
|
9808
|
-
isDevMode && hasLayoutChanges && /* @__PURE__ */ (0,
|
|
9809
|
-
|
|
9958
|
+
isDevMode && hasLayoutChanges && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9959
|
+
import_react75.Panel,
|
|
9810
9960
|
{
|
|
9811
9961
|
position: "bottom-left",
|
|
9812
9962
|
style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
|
|
9813
|
-
children: /* @__PURE__ */ (0,
|
|
9814
|
-
/* @__PURE__ */ (0,
|
|
9815
|
-
/* @__PURE__ */ (0,
|
|
9963
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("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: [
|
|
9964
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
|
|
9965
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9816
9966
|
"button",
|
|
9817
9967
|
{
|
|
9818
9968
|
onClick: handleQuickSaveLayout,
|
|
@@ -9824,7 +9974,7 @@ var NodeGraphBuilder = ({
|
|
|
9824
9974
|
] })
|
|
9825
9975
|
}
|
|
9826
9976
|
),
|
|
9827
|
-
includeKey && /* @__PURE__ */ (0,
|
|
9977
|
+
includeKey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9828
9978
|
LegendPanel,
|
|
9829
9979
|
{
|
|
9830
9980
|
legend,
|
|
@@ -9835,14 +9985,14 @@ var NodeGraphBuilder = ({
|
|
|
9835
9985
|
]
|
|
9836
9986
|
}
|
|
9837
9987
|
),
|
|
9838
|
-
/* @__PURE__ */ (0,
|
|
9988
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9839
9989
|
StudioModal_default,
|
|
9840
9990
|
{
|
|
9841
9991
|
isOpen: isStudioModalOpen || false,
|
|
9842
9992
|
onClose: () => setIsStudioModalOpen(false)
|
|
9843
9993
|
}
|
|
9844
9994
|
),
|
|
9845
|
-
/* @__PURE__ */ (0,
|
|
9995
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9846
9996
|
FocusModeModal_default,
|
|
9847
9997
|
{
|
|
9848
9998
|
isOpen: focusModeOpen,
|
|
@@ -9854,7 +10004,7 @@ var NodeGraphBuilder = ({
|
|
|
9854
10004
|
edgeTypes: edgeTypes2
|
|
9855
10005
|
}
|
|
9856
10006
|
),
|
|
9857
|
-
/* @__PURE__ */ (0,
|
|
10007
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9858
10008
|
AllNotesModal,
|
|
9859
10009
|
{
|
|
9860
10010
|
noteGroups: allNoteGroups,
|
|
@@ -9863,8 +10013,8 @@ var NodeGraphBuilder = ({
|
|
|
9863
10013
|
nodes
|
|
9864
10014
|
}
|
|
9865
10015
|
),
|
|
9866
|
-
isShareModalOpen && /* @__PURE__ */ (0,
|
|
9867
|
-
/* @__PURE__ */ (0,
|
|
10016
|
+
isShareModalOpen && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
10017
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9868
10018
|
"div",
|
|
9869
10019
|
{
|
|
9870
10020
|
className: "fixed inset-0 bg-black/20 z-40",
|
|
@@ -9872,13 +10022,13 @@ var NodeGraphBuilder = ({
|
|
|
9872
10022
|
style: { animation: "fadeIn 150ms ease-out" }
|
|
9873
10023
|
}
|
|
9874
10024
|
),
|
|
9875
|
-
/* @__PURE__ */ (0,
|
|
10025
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9876
10026
|
"div",
|
|
9877
10027
|
{
|
|
9878
10028
|
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))]",
|
|
9879
10029
|
style: { animation: "slideInCenter 250ms ease-out" },
|
|
9880
10030
|
children: [
|
|
9881
|
-
/* @__PURE__ */ (0,
|
|
10031
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("style", { children: `
|
|
9882
10032
|
@keyframes fadeIn {
|
|
9883
10033
|
from { opacity: 0; }
|
|
9884
10034
|
to { opacity: 1; }
|
|
@@ -9888,21 +10038,21 @@ var NodeGraphBuilder = ({
|
|
|
9888
10038
|
to { opacity: 1; transform: translate(-50%, -50%); }
|
|
9889
10039
|
}
|
|
9890
10040
|
` }),
|
|
9891
|
-
/* @__PURE__ */ (0,
|
|
9892
|
-
/* @__PURE__ */ (0,
|
|
9893
|
-
/* @__PURE__ */ (0,
|
|
10041
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-between items-start mb-4", children: [
|
|
10042
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
|
|
10043
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9894
10044
|
"button",
|
|
9895
10045
|
{
|
|
9896
10046
|
onClick: () => setIsShareModalOpen(false),
|
|
9897
10047
|
className: "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors",
|
|
9898
10048
|
"aria-label": "Close modal",
|
|
9899
|
-
children: /* @__PURE__ */ (0,
|
|
10049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.ExternalLink, { className: "w-5 h-5 rotate-180" })
|
|
9900
10050
|
}
|
|
9901
10051
|
)
|
|
9902
10052
|
] }),
|
|
9903
|
-
/* @__PURE__ */ (0,
|
|
9904
|
-
/* @__PURE__ */ (0,
|
|
9905
|
-
/* @__PURE__ */ (0,
|
|
10053
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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." }),
|
|
10054
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-2", children: [
|
|
10055
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9906
10056
|
"input",
|
|
9907
10057
|
{
|
|
9908
10058
|
type: "text",
|
|
@@ -9911,15 +10061,15 @@ var NodeGraphBuilder = ({
|
|
|
9911
10061
|
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))]"
|
|
9912
10062
|
}
|
|
9913
10063
|
),
|
|
9914
|
-
/* @__PURE__ */ (0,
|
|
10064
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9915
10065
|
"button",
|
|
9916
10066
|
{
|
|
9917
10067
|
onClick: handleCopyShareUrl,
|
|
9918
10068
|
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"}`,
|
|
9919
10069
|
"aria-label": shareUrlCopySuccess ? "Copied!" : "Copy link",
|
|
9920
10070
|
children: [
|
|
9921
|
-
shareUrlCopySuccess ? /* @__PURE__ */ (0,
|
|
9922
|
-
/* @__PURE__ */ (0,
|
|
10071
|
+
shareUrlCopySuccess ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.CheckIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react27.ClipboardIcon, { className: "w-4 h-4" }),
|
|
10072
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
|
|
9923
10073
|
]
|
|
9924
10074
|
}
|
|
9925
10075
|
)
|
|
@@ -9965,7 +10115,7 @@ var NodeGraph = ({
|
|
|
9965
10115
|
onSaveLayout,
|
|
9966
10116
|
onResetLayout
|
|
9967
10117
|
}) => {
|
|
9968
|
-
const graphLayout = (0,
|
|
10118
|
+
const graphLayout = (0, import_react74.useMemo)(() => {
|
|
9969
10119
|
if (!graph) return null;
|
|
9970
10120
|
return layoutGraph(
|
|
9971
10121
|
graph.nodes,
|
|
@@ -9980,17 +10130,17 @@ var NodeGraph = ({
|
|
|
9980
10130
|
const includeKey = includeKeyProp !== void 0 ? includeKeyProp : graph?.options?.legend !== false;
|
|
9981
10131
|
const showSearch = showSearchProp !== void 0 ? showSearchProp : graph?.options?.search !== false;
|
|
9982
10132
|
const animated = animatedProp ?? graph?.options?.animated;
|
|
9983
|
-
const [elem, setElem] = (0,
|
|
9984
|
-
const [showFooter, setShowFooter] = (0,
|
|
9985
|
-
const [isStudioModalOpen, setIsStudioModalOpen] = (0,
|
|
9986
|
-
const openStudioModal = (0,
|
|
10133
|
+
const [elem, setElem] = (0, import_react74.useState)(null);
|
|
10134
|
+
const [showFooter, setShowFooter] = (0, import_react74.useState)(true);
|
|
10135
|
+
const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react74.useState)(false);
|
|
10136
|
+
const openStudioModal = (0, import_react74.useCallback)(() => {
|
|
9987
10137
|
setIsStudioModalOpen(true);
|
|
9988
10138
|
}, []);
|
|
9989
10139
|
const containerToRenderInto = portalId || `${id}-portal`;
|
|
9990
|
-
(0,
|
|
10140
|
+
(0, import_react74.useEffect)(() => {
|
|
9991
10141
|
setElem(document.getElementById(containerToRenderInto));
|
|
9992
10142
|
}, []);
|
|
9993
|
-
(0,
|
|
10143
|
+
(0, import_react74.useEffect)(() => {
|
|
9994
10144
|
const urlParams = new URLSearchParams(window.location.search);
|
|
9995
10145
|
const embed = urlParams.get("embed");
|
|
9996
10146
|
if (embed === "true") {
|
|
@@ -9998,9 +10148,9 @@ var NodeGraph = ({
|
|
|
9998
10148
|
}
|
|
9999
10149
|
}, []);
|
|
10000
10150
|
if (!elem) return null;
|
|
10001
|
-
return /* @__PURE__ */ (0,
|
|
10002
|
-
/* @__PURE__ */ (0,
|
|
10003
|
-
/* @__PURE__ */ (0,
|
|
10151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: (0, import_react_dom.createPortal)(
|
|
10152
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react75.ReactFlowProvider, { children: [
|
|
10153
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
10004
10154
|
NodeGraphBuilder,
|
|
10005
10155
|
{
|
|
10006
10156
|
edges,
|
|
@@ -10032,11 +10182,11 @@ var NodeGraph = ({
|
|
|
10032
10182
|
onResetLayout
|
|
10033
10183
|
}
|
|
10034
10184
|
),
|
|
10035
|
-
showFooter && /* @__PURE__ */ (0,
|
|
10036
|
-
footerLabel && /* @__PURE__ */ (0,
|
|
10037
|
-
href && /* @__PURE__ */ (0,
|
|
10038
|
-
/* @__PURE__ */ (0,
|
|
10039
|
-
/* @__PURE__ */ (0,
|
|
10185
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-between", id: "visualiser-footer", children: [
|
|
10186
|
+
footerLabel && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
|
|
10187
|
+
href && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "py-2 w-full text-right flex justify-between", children: [
|
|
10188
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", {}),
|
|
10189
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
10040
10190
|
"a",
|
|
10041
10191
|
{
|
|
10042
10192
|
className: " text-sm underline text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]",
|
|
@@ -10067,6 +10217,7 @@ var nodeComponents = {
|
|
|
10067
10217
|
data: DataNode_default,
|
|
10068
10218
|
view: ViewNode_default,
|
|
10069
10219
|
actor: ActorNode_default,
|
|
10220
|
+
field: FieldNode_default,
|
|
10070
10221
|
// Core nodes are available via individual imports
|
|
10071
10222
|
custom: Custom_default,
|
|
10072
10223
|
domain: Domain_default,
|
|
@@ -10082,7 +10233,8 @@ var nodeConfigs = {
|
|
|
10082
10233
|
event: config_default,
|
|
10083
10234
|
data: config_default2,
|
|
10084
10235
|
actor: config_default3,
|
|
10085
|
-
externalSystem: config_default4
|
|
10236
|
+
externalSystem: config_default4,
|
|
10237
|
+
field: config_default5
|
|
10086
10238
|
};
|
|
10087
10239
|
|
|
10088
10240
|
// src/edges/index.ts
|
|
@@ -10110,6 +10262,7 @@ var edgeTypes = {
|
|
|
10110
10262
|
Event,
|
|
10111
10263
|
ExternalSystem,
|
|
10112
10264
|
ExternalSystem2Node,
|
|
10265
|
+
Field,
|
|
10113
10266
|
FlowEdge,
|
|
10114
10267
|
FlowNode,
|
|
10115
10268
|
FocusModeModal,
|
|
@@ -10144,6 +10297,7 @@ var edgeTypes = {
|
|
|
10144
10297
|
eventConfig,
|
|
10145
10298
|
exportNodeGraphForStudio,
|
|
10146
10299
|
externalSystemConfig,
|
|
10300
|
+
fieldConfig,
|
|
10147
10301
|
generateIdForNode,
|
|
10148
10302
|
generateIdForNodes,
|
|
10149
10303
|
generatedIdForEdge,
|