react-kggraph 0.0.19 → 0.0.21
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/lib/index.es3.js +115 -114
- package/lib/src/components/Graph/types.d.ts +2 -0
- package/lib/style.css +1 -1
- package/package.json +1 -1
package/lib/index.es3.js
CHANGED
|
@@ -1,71 +1,72 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as N, useState as
|
|
1
|
+
import { jsx as c, jsxs as oe } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as N, useState as v, useEffect as D } from "react";
|
|
3
3
|
import k from "cytoscape";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
4
|
+
import Ce from "cytoscape-cose-bilkent";
|
|
5
|
+
import ke from "cytoscape-cise";
|
|
6
|
+
import Ee from "cytoscape-fcose";
|
|
7
|
+
import ze from "storm-layout";
|
|
8
|
+
import we from "./index.es7.js";
|
|
9
9
|
/* empty css */
|
|
10
|
-
import { handleCalcPath as
|
|
11
|
-
import { fixNodesToEdges as
|
|
12
|
-
import { edgeNodeStyles as
|
|
13
|
-
import
|
|
14
|
-
import { message as C } from "antd";
|
|
15
|
-
import { menuItemsConfig as
|
|
10
|
+
import { handleCalcPath as Le, resDetailData as F } from "./index.es8.js";
|
|
11
|
+
import { fixNodesToEdges as Re, coseBilkentLayout as ne } from "./index.es9.js";
|
|
12
|
+
import { edgeNodeStyles as je, defaultColors as se } from "./index.es10.js";
|
|
13
|
+
import Te from "cytoscape-layout-utilities";
|
|
14
|
+
import { Row as $e, Empty as Oe, message as C } from "antd";
|
|
15
|
+
import { menuItemsConfig as Se } from "./index.es11.js";
|
|
16
16
|
import { jsonStringify as R } from "./index.es12.js";
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import { GraphProvider as
|
|
20
|
-
import
|
|
21
|
-
k.use(
|
|
22
|
-
k.use(Ne);
|
|
23
|
-
k.use(Ce);
|
|
17
|
+
import De from "./index.es13.js";
|
|
18
|
+
import Ie from "./index.es14.js";
|
|
19
|
+
import { GraphProvider as Pe } from "./index.es15.js";
|
|
20
|
+
import Be from "./index.es16.js";
|
|
21
|
+
k.use(Te);
|
|
24
22
|
k.use(ke);
|
|
25
|
-
k.use(
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
k.use(Ee);
|
|
24
|
+
k.use(ze);
|
|
25
|
+
k.use(Ce);
|
|
26
|
+
const dt = ({
|
|
27
|
+
data: de,
|
|
28
28
|
getAllGraphData: I,
|
|
29
|
-
highPathAnalysis:
|
|
30
|
-
graphInfo:
|
|
31
|
-
stepNextApi:
|
|
32
|
-
knowledgeCardApi:
|
|
33
|
-
colors:
|
|
34
|
-
actionBar:
|
|
35
|
-
actionCircle:
|
|
29
|
+
highPathAnalysis: E = [],
|
|
30
|
+
graphInfo: h,
|
|
31
|
+
stepNextApi: re,
|
|
32
|
+
knowledgeCardApi: ae,
|
|
33
|
+
colors: z,
|
|
34
|
+
actionBar: ie,
|
|
35
|
+
actionCircle: le,
|
|
36
|
+
noDataDesc: ce = "暂无数据"
|
|
36
37
|
}) => {
|
|
37
|
-
var _, G;
|
|
38
|
-
const j = N(null), [
|
|
39
|
-
|
|
40
|
-
H.current =
|
|
41
|
-
}, [
|
|
42
|
-
const [
|
|
38
|
+
var _, G, ee;
|
|
39
|
+
const j = N(null), [u, P] = v([]), p = N(null), K = N(null), X = 1, [We, J] = v(!1), [w, B] = v({}), [T, W] = v({}), [pe, ue] = v("cose-bilkent"), Q = N(null), V = N(null), [ge, Y] = v(["", ""]), H = N(z);
|
|
40
|
+
D(() => {
|
|
41
|
+
H.current = z;
|
|
42
|
+
}, [z]);
|
|
43
|
+
const [g, L] = v({
|
|
43
44
|
visible: !1,
|
|
44
45
|
x: 0,
|
|
45
46
|
y: 0,
|
|
46
47
|
targetNode: null,
|
|
47
48
|
bgColor: ""
|
|
48
|
-
}), [$, Z] =
|
|
49
|
+
}), [$, Z] = v({
|
|
49
50
|
visible: !1,
|
|
50
51
|
x: 0,
|
|
51
52
|
y: 0,
|
|
52
53
|
content: ""
|
|
53
|
-
}),
|
|
54
|
-
|
|
55
|
-
(
|
|
56
|
-
}, [R(
|
|
57
|
-
I == null || I({ graphData:
|
|
58
|
-
}, [R(
|
|
54
|
+
}), ye = Se({ cyRef: p, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: le });
|
|
55
|
+
D(() => {
|
|
56
|
+
(E == null ? void 0 : E.length) > 1 && Le(p, { pathNodes: E, isGrayed: !1 });
|
|
57
|
+
}, [R(E), R(u)]), D(() => {
|
|
58
|
+
I == null || I({ graphData: u, nodeStatic: w, relationStatic: T });
|
|
59
|
+
}, [R(u), R(w), R(T)]), D(() => {
|
|
59
60
|
var r;
|
|
60
|
-
if (!j.current ||
|
|
61
|
-
const { elements: s, typeListObj: a, relationListObj:
|
|
62
|
-
B(a), P(s), W(
|
|
61
|
+
if (!j.current || p.current) return;
|
|
62
|
+
const { elements: s, typeListObj: a, relationListObj: y } = F(de, { typeObj: w, graphInfo: h });
|
|
63
|
+
B(a), P(s), W(y), document.addEventListener("contextmenu", function(t) {
|
|
63
64
|
t.preventDefault();
|
|
64
65
|
});
|
|
65
66
|
const e = k({
|
|
66
67
|
container: j.current,
|
|
67
68
|
elements: s,
|
|
68
|
-
style:
|
|
69
|
+
style: je({ elements: s, colors: z }),
|
|
69
70
|
autounselectify: !1,
|
|
70
71
|
autolock: !1,
|
|
71
72
|
layout: {
|
|
@@ -73,14 +74,14 @@ const tt = ({
|
|
|
73
74
|
// 使用预设布局，完全依赖 position
|
|
74
75
|
}
|
|
75
76
|
});
|
|
76
|
-
if (
|
|
77
|
-
|
|
77
|
+
if (p.current = e, ((r = h == null ? void 0 : h.searchNodes) == null ? void 0 : r.length) === 2)
|
|
78
|
+
Re(
|
|
78
79
|
e,
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
h.searchNodes[0],
|
|
81
|
+
h.searchNodes[1]
|
|
81
82
|
);
|
|
82
83
|
else {
|
|
83
|
-
const t = e.layout(
|
|
84
|
+
const t = e.layout(ne());
|
|
84
85
|
t.run(), t.on("layoutstop", () => {
|
|
85
86
|
e.fit(void 0, 50), e.center();
|
|
86
87
|
});
|
|
@@ -89,7 +90,7 @@ const tt = ({
|
|
|
89
90
|
var n;
|
|
90
91
|
const o = t.target;
|
|
91
92
|
if (!o.hasClass("path-edge")) {
|
|
92
|
-
const d = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ??
|
|
93
|
+
const d = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? se.edgeHoverColor;
|
|
93
94
|
o.style({
|
|
94
95
|
"line-color": d,
|
|
95
96
|
"target-arrow-color": d,
|
|
@@ -100,7 +101,7 @@ const tt = ({
|
|
|
100
101
|
var n;
|
|
101
102
|
const o = t.target;
|
|
102
103
|
if (!o.hasClass("path-edge")) {
|
|
103
|
-
const d = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ??
|
|
104
|
+
const d = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? se.edgeDefaultColor;
|
|
104
105
|
o.style({
|
|
105
106
|
"line-color": d,
|
|
106
107
|
"target-arrow-color": d,
|
|
@@ -130,7 +131,7 @@ const tt = ({
|
|
|
130
131
|
targetNode: o,
|
|
131
132
|
bgColor: o.style("background-color")
|
|
132
133
|
});
|
|
133
|
-
}),
|
|
134
|
+
}), p.current = e, e.on("click", "node", (t) => {
|
|
134
135
|
const o = t.target;
|
|
135
136
|
e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
|
|
136
137
|
const d = o.neighborhood().nodes().add(o), x = d.edgesWith(d);
|
|
@@ -138,11 +139,11 @@ const tt = ({
|
|
|
138
139
|
}), e.on("tap", (t) => {
|
|
139
140
|
t.target === e && (L((o) => ({ ...o, visible: !1 })), e.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), e.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
|
|
140
141
|
}), () => {
|
|
141
|
-
|
|
142
|
+
p.current && (p.current.destroy(), p.current = null);
|
|
142
143
|
};
|
|
143
144
|
}, []);
|
|
144
|
-
const
|
|
145
|
-
const { id: a, kgId:
|
|
145
|
+
const fe = async (s) => {
|
|
146
|
+
const { id: a, kgId: y } = s, e = p.current;
|
|
146
147
|
if (!e) return;
|
|
147
148
|
const r = e.$(`#${a}`);
|
|
148
149
|
if (!r || r.length === 0) {
|
|
@@ -153,28 +154,28 @@ const tt = ({
|
|
|
153
154
|
if (t.length > 0) {
|
|
154
155
|
const n = t.map((l) => l.id()), d = t.connectedEdges(), x = e.edges().filter(
|
|
155
156
|
(l) => l.data("source") === a && n.includes(l.data("target"))
|
|
156
|
-
),
|
|
157
|
+
), O = e.edges().filter((l) => l.data("appendedBy") === a), M = d.merge(x).merge(O).filter((l) => l.data().zktype === s.zktype);
|
|
157
158
|
t.animate({
|
|
158
159
|
style: { opacity: 0 }
|
|
159
160
|
}, {
|
|
160
161
|
duration: 200,
|
|
161
162
|
complete: () => {
|
|
162
163
|
e.remove(t), e.remove(M), P((l) => {
|
|
163
|
-
const
|
|
164
|
-
var
|
|
165
|
-
const i =
|
|
166
|
-
if (
|
|
164
|
+
const S = l.filter((m) => {
|
|
165
|
+
var b, te;
|
|
166
|
+
const i = m.data.zktype;
|
|
167
|
+
if (m.group === "nodes" && n.includes((b = m.data) == null ? void 0 : b.id) && i && i === s.zktype)
|
|
167
168
|
return !1;
|
|
168
|
-
if (
|
|
169
|
-
const
|
|
170
|
-
const A =
|
|
169
|
+
if (m.group === "edges" && i && i === s.zktype) {
|
|
170
|
+
const ve = Array.from(O).map((Ne) => {
|
|
171
|
+
const A = Ne.data();
|
|
171
172
|
return `${A.source}-${A.target}-${A.label}`;
|
|
172
|
-
}), q =
|
|
173
|
-
return !
|
|
173
|
+
}), q = m.data, be = ve.includes(`${q.source}-${q.target}-${q.label}`), xe = ((te = m.data) == null ? void 0 : te.appendedBy) === a;
|
|
174
|
+
return !be && !xe;
|
|
174
175
|
}
|
|
175
176
|
return !0;
|
|
176
|
-
}), { typeListObj:
|
|
177
|
-
return B(
|
|
177
|
+
}), { typeListObj: f, relationListObj: U } = F({}, { graphData: S, typeObj: {} });
|
|
178
|
+
return B(f), W(U), S;
|
|
178
179
|
}), r.data("appendedNodes", []), r.data("isExpanded", !1);
|
|
179
180
|
}
|
|
180
181
|
}), setTimeout(() => {
|
|
@@ -187,8 +188,8 @@ const tt = ({
|
|
|
187
188
|
content: "正在展开...",
|
|
188
189
|
duration: 0
|
|
189
190
|
});
|
|
190
|
-
const n = await
|
|
191
|
-
if (B(x), W(
|
|
191
|
+
const n = await re({ uri: a, queryType: 1, kgId: y, zktype: s.zktype }), { elements: d, typeListObj: x, relationListObj: O } = F(n.data, { graphData: u, typeObj: w, relationObj: T, zktype: s.zktype });
|
|
192
|
+
if (B(x), W(O), !((d == null ? void 0 : d.length) > 0)) {
|
|
192
193
|
setTimeout(() => {
|
|
193
194
|
C.destroy(), C.warning("暂无数据");
|
|
194
195
|
}, 2e3);
|
|
@@ -196,20 +197,20 @@ const tt = ({
|
|
|
196
197
|
}
|
|
197
198
|
if ((d == null ? void 0 : d.length) > 0) {
|
|
198
199
|
const M = e.layoutUtilities({
|
|
199
|
-
...
|
|
200
|
+
...ne(),
|
|
200
201
|
idealEdgeLength: 80,
|
|
201
202
|
// 与你的期望边长匹配
|
|
202
203
|
offset: 30
|
|
203
204
|
// 随机偏移，避免完全重叠
|
|
204
205
|
}), l = d.map((i) => {
|
|
205
206
|
if (i.group === "nodes") {
|
|
206
|
-
const
|
|
207
|
+
const b = 80 * X;
|
|
207
208
|
return {
|
|
208
209
|
...i,
|
|
209
210
|
style: {
|
|
210
211
|
opacity: 0,
|
|
211
|
-
width:
|
|
212
|
-
height:
|
|
212
|
+
width: b,
|
|
213
|
+
height: b
|
|
213
214
|
},
|
|
214
215
|
data: {
|
|
215
216
|
...i.data,
|
|
@@ -221,8 +222,8 @@ const tt = ({
|
|
|
221
222
|
zktype: s.zktype,
|
|
222
223
|
isAppended: !0,
|
|
223
224
|
// 标记是追加节点
|
|
224
|
-
baseWidth:
|
|
225
|
-
baseHeight:
|
|
225
|
+
baseWidth: b,
|
|
226
|
+
baseHeight: b
|
|
226
227
|
}
|
|
227
228
|
};
|
|
228
229
|
}
|
|
@@ -234,12 +235,12 @@ const tt = ({
|
|
|
234
235
|
zktype: s.zktype
|
|
235
236
|
}
|
|
236
237
|
};
|
|
237
|
-
}),
|
|
238
|
-
P([...
|
|
239
|
-
const
|
|
238
|
+
}), S = e.add(l);
|
|
239
|
+
P([...u, ...l]);
|
|
240
|
+
const f = S.filter(":node"), U = f.map((i) => i.id());
|
|
240
241
|
r.data("appendedNodes", U), r.data("isExpanded", !0);
|
|
241
|
-
const
|
|
242
|
-
|
|
242
|
+
const m = e.nodes().difference(f);
|
|
243
|
+
m.forEach((i) => i.lock()), M.placeNewNodes(f), e.layout({
|
|
243
244
|
name: "cose-bilkent",
|
|
244
245
|
randomize: !1,
|
|
245
246
|
// ⚠️ 这是关键！保持已有节点位置不变
|
|
@@ -255,8 +256,8 @@ const tt = ({
|
|
|
255
256
|
// 可以适当减少，因为只需要微调
|
|
256
257
|
gravity: 0.6
|
|
257
258
|
}).run(), setTimeout(() => {
|
|
258
|
-
|
|
259
|
-
}, 2e3),
|
|
259
|
+
m.forEach((i) => i.unlock());
|
|
260
|
+
}, 2e3), f.animate({
|
|
260
261
|
style: {
|
|
261
262
|
opacity: 1,
|
|
262
263
|
width: 20,
|
|
@@ -266,7 +267,7 @@ const tt = ({
|
|
|
266
267
|
duration: 400,
|
|
267
268
|
easing: "ease-out",
|
|
268
269
|
complete: () => {
|
|
269
|
-
|
|
270
|
+
f.style("opacity", ""), f.style("width", ""), f.style("height", "");
|
|
270
271
|
}
|
|
271
272
|
}), setTimeout(() => {
|
|
272
273
|
r.removed() || (r.style("border-width", ""), r.style("border-color", ""), e.center(r), e.zoom(e.zoom()));
|
|
@@ -280,19 +281,19 @@ const tt = ({
|
|
|
280
281
|
J(!1);
|
|
281
282
|
}
|
|
282
283
|
L({ visible: !1 });
|
|
283
|
-
},
|
|
284
|
+
}, me = {
|
|
284
285
|
expanded: "typed-literal",
|
|
285
286
|
contract: "uri"
|
|
286
|
-
},
|
|
287
|
+
}, he = (s, a) => {
|
|
287
288
|
var e;
|
|
288
289
|
console.log("handleMenuAction:::", s, a);
|
|
289
|
-
const
|
|
290
|
-
if (
|
|
291
|
-
const r = s.ids, t =
|
|
290
|
+
const y = a || g.targetNode;
|
|
291
|
+
if (y) {
|
|
292
|
+
const r = s.ids, t = y.data();
|
|
292
293
|
if (["expanded", "contract"].includes(r))
|
|
293
|
-
|
|
294
|
+
fe({ kgId: 3, ...t, zktype: me[r] });
|
|
294
295
|
else if (r === "nodeInfo") {
|
|
295
|
-
const o =
|
|
296
|
+
const o = y, n = {
|
|
296
297
|
id: o.id(),
|
|
297
298
|
data: o.data(),
|
|
298
299
|
position: o.position(),
|
|
@@ -303,35 +304,35 @@ const tt = ({
|
|
|
303
304
|
style: o.style()
|
|
304
305
|
};
|
|
305
306
|
Q.current.open(n);
|
|
306
|
-
} else r === "knowledgeCard" && V.current.open(
|
|
307
|
-
(e = s.onClick) == null || e.call(s,
|
|
307
|
+
} else r === "knowledgeCard" && V.current.open(y.data());
|
|
308
|
+
(e = s.onClick) == null || e.call(s, y), L({ visible: !1, x: 0, y: 0, targetNode: null });
|
|
308
309
|
}
|
|
309
310
|
};
|
|
310
|
-
return /* @__PURE__ */
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */
|
|
313
|
-
|
|
311
|
+
return ((G = u == null ? void 0 : u.nodes) == null ? void 0 : G.length) > 0 ? /* @__PURE__ */ c(Pe, { value: { pathNodes: ge, setPathNodes: Y, graphInfo: h, graphData: u, layoutType: pe, setLayoutType: ue, knowledgeCardApi: ae }, children: /* @__PURE__ */ oe("div", { className: "cytoscape-container relative", children: [
|
|
312
|
+
/* @__PURE__ */ c("div", { className: "btn-group" }),
|
|
313
|
+
/* @__PURE__ */ c(
|
|
314
|
+
we,
|
|
314
315
|
{
|
|
315
316
|
ref: K,
|
|
316
|
-
cyRef:
|
|
317
|
-
graphInfo:
|
|
317
|
+
cyRef: p,
|
|
318
|
+
graphInfo: h,
|
|
318
319
|
initNodeScale: X,
|
|
319
320
|
cyContainerRef: j,
|
|
320
321
|
typeObj: w,
|
|
321
322
|
relationObj: T,
|
|
322
|
-
colors:
|
|
323
|
-
actionBar:
|
|
323
|
+
colors: z,
|
|
324
|
+
actionBar: ie
|
|
324
325
|
}
|
|
325
326
|
),
|
|
326
|
-
/* @__PURE__ */
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
|
|
327
|
+
/* @__PURE__ */ oe("div", { className: "relative h-100", children: [
|
|
328
|
+
/* @__PURE__ */ c("div", { ref: j, className: "cy-container" }),
|
|
329
|
+
g.visible && g.targetNode && /* @__PURE__ */ c(
|
|
329
330
|
"div",
|
|
330
331
|
{
|
|
331
332
|
style: {
|
|
332
333
|
position: "absolute",
|
|
333
|
-
left: `${
|
|
334
|
-
top: `${
|
|
334
|
+
left: `${g.x}px`,
|
|
335
|
+
top: `${g.y}px`,
|
|
335
336
|
// backgroundColor: 'white',
|
|
336
337
|
// border: '1px solid #ccc',
|
|
337
338
|
// borderRadius: '50%',
|
|
@@ -345,10 +346,10 @@ const tt = ({
|
|
|
345
346
|
overflow: "hidden"
|
|
346
347
|
},
|
|
347
348
|
onClick: (s) => s.stopPropagation(),
|
|
348
|
-
children: /* @__PURE__ */
|
|
349
|
+
children: /* @__PURE__ */ c(De, { items: ye, centerImage: (ee = g == null ? void 0 : g.targetNode) == null ? void 0 : ee.data().image, targetNode: g.targetNode, onClick: (s, a) => he(s, a) })
|
|
349
350
|
}
|
|
350
351
|
),
|
|
351
|
-
$.visible && /* @__PURE__ */
|
|
352
|
+
$.visible && /* @__PURE__ */ c(
|
|
352
353
|
"div",
|
|
353
354
|
{
|
|
354
355
|
style: {
|
|
@@ -372,10 +373,10 @@ const tt = ({
|
|
|
372
373
|
}
|
|
373
374
|
)
|
|
374
375
|
] }),
|
|
375
|
-
/* @__PURE__ */
|
|
376
|
-
/* @__PURE__ */
|
|
377
|
-
] }) });
|
|
376
|
+
/* @__PURE__ */ c(Ie, { ref: Q }),
|
|
377
|
+
/* @__PURE__ */ c(Be, { ref: V })
|
|
378
|
+
] }) }) : /* @__PURE__ */ c($e, { className: "h-100", align: "middle", justify: "center", children: /* @__PURE__ */ c(Oe, { description: ce }) });
|
|
378
379
|
};
|
|
379
380
|
export {
|
|
380
|
-
|
|
381
|
+
dt as default
|
|
381
382
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cytoscape-container{width:100%;
|
|
1
|
+
.cytoscape-container{width:100%;height:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:100%}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:10px 0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:10px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.graph-bar.graph-bar-vertical,.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.path-node{width:380px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}
|