react-kggraph 0.0.28 → 0.0.30

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.
Files changed (41) hide show
  1. package/lib/index.es11.js +1 -1
  2. package/lib/index.es14.js +60 -48
  3. package/lib/index.es16.js +24 -22
  4. package/lib/index.es23.js +33 -30
  5. package/lib/index.es24.js +32 -29
  6. package/lib/index.es25.js +271 -2
  7. package/lib/index.es26.js +1 -1
  8. package/lib/index.es27.js +2 -2
  9. package/lib/index.es28.js +1 -1
  10. package/lib/index.es29.js +1 -1
  11. package/lib/index.es3.js +176 -182
  12. package/lib/index.es30.js +1 -1
  13. package/lib/index.es31.js +1 -1
  14. package/lib/index.es32.js +1 -1
  15. package/lib/index.es33.js +1 -1
  16. package/lib/index.es34.js +1 -1
  17. package/lib/index.es35.js +1 -1
  18. package/lib/index.es36.js +2 -2
  19. package/lib/index.es37.js +4 -0
  20. package/lib/index.es39.js +62 -1045
  21. package/lib/index.es4.js +7 -6
  22. package/lib/index.es40.js +21 -0
  23. package/lib/index.es41.js +43 -0
  24. package/lib/index.es42.js +42 -0
  25. package/lib/index.es43.js +88 -18
  26. package/lib/index.es44.js +54 -39
  27. package/lib/index.es45.js +30 -39
  28. package/lib/index.es47.js +66 -52
  29. package/lib/index.es7.js +176 -169
  30. package/lib/index.es8.js +108 -108
  31. package/lib/index.es9.js +9 -14
  32. package/lib/src/components/Graph/components/GraphListData/index.d.ts +3 -0
  33. package/lib/src/components/Graph/components/NodeInfoDrawer/index.d.ts +4 -1
  34. package/lib/src/components/Graph/utils/layouts.d.ts +1 -1
  35. package/lib/src/components/Graph/utils/tools.d.ts +3 -3
  36. package/lib/style.css +1 -1
  37. package/package.json +1 -1
  38. package/lib/index.es38.js +0 -66
  39. package/lib/index.es46.js +0 -91
  40. package/lib/index.es48.js +0 -33
  41. package/lib/index.es50.js +0 -72
package/lib/index.es8.js CHANGED
@@ -1,86 +1,86 @@
1
1
  import { message as v } from "antd";
2
- import j from "./index.es25.js";
3
- import I from "./index.es26.js";
4
- import P from "./index.es27.js";
5
- import D from "./index.es28.js";
6
- import $ from "./index.es29.js";
7
- import J from "./index.es30.js";
8
- import R from "./index.es31.js";
9
- import A from "./index.es32.js";
10
- import G from "./index.es33.js";
11
- import q from "./index.es34.js";
12
- import B from "./index.es35.js";
13
- import L from "./index.es36.js";
14
- import { jsonStringifyParse as T } from "./index.es12.js";
15
- const E = [j, I, P, D, $, J, R, A, G, q], U = (r) => {
2
+ import O from "./index.es26.js";
3
+ import j from "./index.es27.js";
4
+ import I from "./index.es28.js";
5
+ import P from "./index.es29.js";
6
+ import D from "./index.es30.js";
7
+ import $ from "./index.es31.js";
8
+ import J from "./index.es32.js";
9
+ import R from "./index.es33.js";
10
+ import A from "./index.es34.js";
11
+ import q from "./index.es35.js";
12
+ import B from "./index.es36.js";
13
+ import T from "./index.es37.js";
14
+ import { jsonStringifyParse as U } from "./index.es12.js";
15
+ const N = [O, j, I, P, D, $, J, R, A, q], W = (s) => {
16
16
  let o = { _: { count: 0 } };
17
- const l = {}, t = [];
18
- return r.forEach((e) => {
19
- var m;
17
+ const r = {}, t = [];
18
+ return s.forEach((e) => {
19
+ var y;
20
20
  const { group: c } = e;
21
21
  if (c === "nodes") {
22
- const d = e.data, n = (m = d.properties) == null ? void 0 : m.type, a = d.type;
23
- !a && n === "uri" ? o = { ...o, _: { ...o[a], count: o._.count + 1 } } : !t.includes(a) && n === "uri" ? (t.push(a), o = { ...o, [a]: { ...o[a], count: 1, img: d.image } }) : n === "uri" && a && (o = { ...o, [a]: { ...o[a], img: d.image, count: o[a].count + 1 } });
22
+ const d = e.data, a = (y = d.properties) == null ? void 0 : y.type, l = d.type;
23
+ !l && a === "uri" ? o = { ...o, _: { ...o[l], count: o._.count + 1 } } : !t.includes(l) && a === "uri" ? (t.push(l), o = { ...o, [l]: { ...o[l], count: 1, img: d.image } }) : a === "uri" && l && (o = { ...o, [l]: { ...o[l], img: d.image, count: o[l].count + 1 } });
24
24
  } else if (c === "edges") {
25
- const d = e.data, { label: n } = d;
26
- l[n] ? l[n] = l[n] + 1 : l[n] = 1;
25
+ const d = e.data, { label: a } = d;
26
+ r[a] ? r[a] = r[a] + 1 : r[a] = 1;
27
27
  } else
28
28
  console.log("nonono");
29
29
  }), {
30
30
  typeListArr: t,
31
31
  typeListObj: o,
32
- relationListObj: l
32
+ relationListObj: r
33
33
  };
34
- }, ae = (r, { graphData: o = [], typeObj: l, zktype: t, graphInfo: e = {} }) => {
35
- console.log(888, r);
36
- let c = T(l);
37
- const m = Object.keys(l), d = e.searchNodes || [], n = new Set(
38
- (o == null ? void 0 : o.map((p) => {
39
- var i, h, s;
40
- return p.group === "nodes" ? (i = p.data) == null ? void 0 : i.id : ((h = p.data) == null ? void 0 : h.source) + "-" + ((s = p.data) == null ? void 0 : s.target);
34
+ }, ne = (s, { graphData: o = [], typeObj: r, zktype: t, graphInfo: e = {} }) => {
35
+ console.log(888, s);
36
+ let c = U(r);
37
+ const y = Object.keys(r), d = e.searchNodes || [], a = new Set(
38
+ (o == null ? void 0 : o.map((g) => {
39
+ var i, f, n;
40
+ return g.group === "nodes" ? (i = g.data) == null ? void 0 : i.id : ((f = g.data) == null ? void 0 : f.source) + "-" + ((n = g.data) == null ? void 0 : n.target);
41
41
  }).filter(Boolean)) || []
42
- ), { nodes: a = [], links: u = [] } = r || {}, y = [], g = (p) => {
43
- p.forEach((i) => {
44
- var h, s;
45
- if (!n.has(i.id)) {
46
- const x = (h = i.properties) == null ? void 0 : h.type, f = i.type, N = i.label.split("#").pop();
42
+ ), { nodes: l = [], links: p = [] } = s || {}, m = [], h = (g) => {
43
+ g.forEach((i) => {
44
+ var f, n;
45
+ if (!a.has(i.id)) {
46
+ const x = (f = i.properties) == null ? void 0 : f.type, C = i.type, E = i.label.split("#").pop();
47
47
  let w = -1;
48
- if (!f && x === "uri")
49
- w = i.image || E[0];
50
- else if (!m.includes(f) && x === "uri") {
51
- m.push(f);
52
- const O = m.indexOf(f);
53
- w = i.image || E[O] || E[0], c = { ...c, [f]: { ...c[f], img: w } };
54
- } else x === "uri" && f ? w = (s = c[f]) == null ? void 0 : s.img : x === "typed-literal" && (w = B);
55
- const S = {
48
+ if (!C && x === "uri")
49
+ w = i.image || N[0];
50
+ else if (!y.includes(C) && x === "uri") {
51
+ y.push(C);
52
+ const S = y.indexOf(C);
53
+ w = i.image || N[S] || N[0], c = { ...c, [C]: { ...c[C], img: w } };
54
+ } else x === "uri" && C ? w = (n = c[C]) == null ? void 0 : n.img : x === "typed-literal" && (w = B);
55
+ const L = {
56
56
  ...i,
57
- name: N,
57
+ name: E,
58
58
  "properties-type": x,
59
- image: d.includes(N) ? L : w,
59
+ image: d.includes(E) ? T : w,
60
60
  baseWidth: 80,
61
61
  // 保存基础宽度
62
62
  baseHeight: 80
63
63
  // 保存基础高度
64
64
  };
65
- y.push({ group: "nodes", data: S });
65
+ m.push({ group: "nodes", data: L });
66
66
  }
67
67
  });
68
68
  };
69
- ((p) => {
70
- p.forEach((i) => {
71
- const { label: h } = i, s = `${i.source}-${i.target}`;
72
- n.has(s) || y.push({ group: "edges", data: { ...i, name: h, zktype: t } });
69
+ ((g) => {
70
+ g.forEach((i) => {
71
+ const { label: f } = i, n = `${i.source}-${i.target}`;
72
+ a.has(n) || m.push({ group: "edges", data: { ...i, name: f, zktype: t } });
73
73
  });
74
- })(u), g(a);
75
- const { typeListObj: k, relationListObj: C } = U([...y, ...o]);
74
+ })(p), h(l);
75
+ const { typeListObj: k, relationListObj: b } = W([...m, ...o]);
76
76
  return {
77
- elements: y,
77
+ elements: m,
78
78
  typeListObj: k,
79
- relationListObj: C
79
+ relationListObj: b
80
80
  };
81
- }, se = (r, o) => {
82
- const l = r.current;
83
- if (!l) return;
81
+ }, se = (s, o) => {
82
+ const r = s.current;
83
+ if (!r) return;
84
84
  let t = {
85
85
  color: "#000"
86
86
  };
@@ -125,87 +125,87 @@ const E = [j, I, P, D, $, J, R, A, G, q], U = (r) => {
125
125
  };
126
126
  break;
127
127
  }
128
- l.nodes().style(t), l.style().update();
129
- }, W = (r, o) => {
130
- let l = r.collection(), t = r.collection();
131
- o.forEach(({ source: e, target: c, label: m }) => {
132
- const d = e ? r.nodes().filter((a) => a.data("id") === e) : r.collection(), n = c ? r.nodes().filter((a) => a.data("id") === c) : r.collection();
133
- d.length > 0 && n.length > 0 && d.forEach((a) => {
134
- n.forEach((u) => {
135
- let y = a.edgesWith(u).filter((g) => {
136
- const b = g.data("source") === a.id() && g.data("target") === u.id(), k = m ? g.data("label") === m : !0;
137
- return b && k;
128
+ r.nodes().style(t), r.style().update();
129
+ }, G = (s, o, r = !0) => {
130
+ let t = s.collection(), e = s.collection();
131
+ o.forEach(({ source: c, target: y, label: d }) => {
132
+ const a = c ? s.nodes().filter((p) => p.data("id") === c) : s.collection(), l = y ? s.nodes().filter((p) => p.data("id") === y) : s.collection();
133
+ a.length > 0 && l.length > 0 && a.forEach((p) => {
134
+ l.forEach((m) => {
135
+ let h = p.edgesWith(m).filter((u) => {
136
+ const k = u.data("source") === p.id() && u.data("target") === m.id(), b = d ? u.data("label") === d : !0;
137
+ return k && b;
138
138
  });
139
- t = t.union(y), l = l.union(a).union(u);
139
+ e = e.union(h), t = t.union(p).union(m);
140
140
  });
141
141
  });
142
- }), console.log(777, t.length), t.length > 0 ? (l.addClass("path-node"), t.addClass("path-edge"), isGrayed && (r.nodes().not(l).addClass("grayed"), r.edges().not(t).addClass("grayed"))) : v.warning("未找到匹配的路径边!");
143
- }, le = async (r, { pathNodes: o, isGrayed: l = !0, pathLinks: t }) => {
144
- const e = r.current;
142
+ }), console.log(777, e.length), e.length > 0 ? (t.addClass("path-node"), e.addClass("path-edge"), r && (s.nodes().not(t).addClass("grayed"), s.edges().not(e).addClass("grayed"))) : v.warning("未找到匹配的路径边!");
143
+ }, le = async (s, { nodes: o, isGrayed: r = !0, links: t }) => {
144
+ const e = s.current;
145
145
  let c = [];
146
146
  if (!e)
147
147
  return;
148
148
  if (e.nodes().removeClass("path-node").removeClass("grayed"), e.edges().removeClass("path-edge").removeClass("grayed"), (t == null ? void 0 : t.length) > 0) {
149
- W(e, t);
149
+ G(e, t);
150
150
  return;
151
151
  }
152
152
  if (!((o == null ? void 0 : o.length) > 1)) {
153
153
  v.warning("请至少设置 2 个路径节点!");
154
154
  return;
155
155
  }
156
- if ((t == null ? void 0 : t.length) > 0 || (c = o.map((n) => n.id)), console.log(856666, t, c), [...new Set(c)].length !== c.length) {
156
+ if ((t == null ? void 0 : t.length) > 0 || (c = o.map((a) => a.id)), [...new Set(c)].length !== c.length) {
157
157
  v.warning("路径中存在重复节点,请检查!");
158
158
  return;
159
159
  }
160
160
  const d = [];
161
- for (const n of c) {
162
- const a = e.nodes().filter((u) => u.data("name") === n);
163
- if (a.length > 0)
164
- d.push(a.id());
161
+ for (const a of c) {
162
+ const l = e.nodes().filter((p) => p.data("name") === a);
163
+ if (l.length > 0)
164
+ d.push(l.id());
165
165
  else {
166
- e.nodes().removeClass("path-node"), e.edges().removeClass("path-edge"), v.warning(`找不到节点:${n}`);
166
+ e.nodes().removeClass("path-node"), e.edges().removeClass("path-edge"), v.warning(`找不到节点:${a}`);
167
167
  return;
168
168
  }
169
169
  }
170
170
  try {
171
171
  e.nodes().removeClass("path-node").removeClass("grayed"), e.edges().removeClass("path-edge").removeClass("grayed");
172
- let n = e.collection(), a = 0, u = !0;
173
- const y = [];
174
- for (let g = 0; g < d.length - 1; g++) {
175
- const b = d[g], k = d[g + 1], C = e.getElementById(b), p = e.getElementById(k), i = C.edgesWith(p).filter(function(s) {
176
- return s.data("source") === b && s.data("target") === k;
177
- }), h = p.edgesWith(C).filter(function(s) {
178
- return s.data("source") === k && s.data("target") === b;
172
+ let a = e.collection(), l = 0, p = !0;
173
+ const m = [];
174
+ for (let h = 0; h < d.length - 1; h++) {
175
+ const u = d[h], k = d[h + 1], b = e.getElementById(u), g = e.getElementById(k), i = b.edgesWith(g).filter(function(n) {
176
+ return n.data("source") === u && n.data("target") === k;
177
+ }), f = g.edgesWith(b).filter(function(n) {
178
+ return n.data("source") === k && n.data("target") === u;
179
179
  });
180
- if (i.length > 0 || h.length > 0) {
181
- const s = i.add(h);
182
- n = n.union(s).union(C).union(p), a += s.length, C.addClass("path-node"), p.addClass("path-node"), s.addClass("path-edge"), y.push(C.data("name"), p.data("name")), console.log(`找到直接连接的边:正向${i.length}条,反向${h.length}条`);
180
+ if (i.length > 0 || f.length > 0) {
181
+ const n = i.add(f);
182
+ a = a.union(n).union(b).union(g), l += n.length, b.addClass("path-node"), g.addClass("path-node"), n.addClass("path-edge"), m.push(b.data("name"), g.data("name")), console.log(`找到直接连接的边:正向${i.length}条,反向${f.length}条`);
183
183
  } else {
184
- const s = e.elements().aStar({
185
- root: C,
186
- goal: p,
184
+ const n = e.elements().aStar({
185
+ root: b,
186
+ goal: g,
187
187
  directed: !1
188
188
  });
189
- if (s.found && s.path) {
190
- n = n.union(s.path), a += s.distance, s.path.nodes().addClass("path-node"), s.path.edges().addClass("path-edge");
191
- const x = s.path.nodes().map((f) => f.data("name"));
192
- y.push(...x);
189
+ if (n.found && n.path) {
190
+ a = a.union(n.path), l += n.distance, n.path.nodes().addClass("path-node"), n.path.edges().addClass("path-edge");
191
+ const x = n.path.nodes().map((C) => C.data("name"));
192
+ m.push(...x);
193
193
  } else {
194
- u = !1, console.log(`节点 ${c[g]} 和 ${c[g + 1]} 之间没有路径`);
194
+ p = !1, console.log(`节点 ${c[h]} 和 ${c[h + 1]} 之间没有路径`);
195
195
  break;
196
196
  }
197
197
  }
198
198
  }
199
- if (u && n.length > 0) {
200
- const g = n.nodes(), b = n.edges();
201
- g.addClass("path-node"), b.addClass("path-edge"), l && (e.nodes().not(g).addClass("grayed"), e.edges().not(b).addClass("grayed"));
199
+ if (p && a.length > 0) {
200
+ const h = a.nodes(), u = a.edges();
201
+ h.addClass("path-node"), u.addClass("path-edge"), r && (e.nodes().not(h).addClass("grayed"), e.edges().not(u).addClass("grayed"));
202
202
  } else
203
203
  v.warning("无法找到完整的路径!");
204
- } catch (n) {
205
- console.error(2e3, "计算路径时出错:", n), v.warning("计算路径时出错,请重试!");
204
+ } catch (a) {
205
+ console.error(2e3, "计算路径时出错:", a), v.warning("计算路径时出错,请重试!");
206
206
  }
207
- }, M = (r) => {
208
- const o = r.nodes().map((e) => ({
207
+ }, M = (s) => {
208
+ const o = s.nodes().map((e) => ({
209
209
  data: e.data(),
210
210
  position: e.position(),
211
211
  style: {
@@ -213,7 +213,7 @@ const E = [j, I, P, D, $, J, R, A, G, q], U = (r) => {
213
213
  height: e.style("height"),
214
214
  backgroundColor: e.style("background-color")
215
215
  }
216
- })), l = r.edges().map((e) => ({
216
+ })), r = s.edges().map((e) => ({
217
217
  data: e.data(),
218
218
  style: {
219
219
  width: e.style("width"),
@@ -221,9 +221,9 @@ const E = [j, I, P, D, $, J, R, A, G, q], U = (r) => {
221
221
  "target-arrow-color": e.style("target-arrow-color")
222
222
  }
223
223
  }));
224
- return { nodes: o, edges: l };
225
- }, re = (r) => {
226
- const o = M(r), l = new Blob([JSON.stringify(o, null, 2)], { type: "application/json" }), t = URL.createObjectURL(l), e = document.createElement("a");
224
+ return { nodes: o, edges: r };
225
+ }, re = (s) => {
226
+ const o = M(s), r = new Blob([JSON.stringify(o, null, 2)], { type: "application/json" }), t = URL.createObjectURL(r), e = document.createElement("a");
227
227
  e.href = t, e.download = `graph-data-${Date.now()}.json`, e.click(), URL.revokeObjectURL(t);
228
228
  }, ie = [
229
229
  {
@@ -336,10 +336,10 @@ export {
336
336
  ge as downloadData,
337
337
  M as getCyData,
338
338
  le as handleCalcPath,
339
- E as imageMap,
339
+ N as imageMap,
340
340
  ie as layoutCongig,
341
341
  ce as linkAnalysis,
342
- ae as resDetailData,
342
+ ne as resDetailData,
343
343
  se as textLayout,
344
344
  pe as textPositionConfig
345
345
  };
package/lib/index.es9.js CHANGED
@@ -43,32 +43,27 @@ const I = (e, n, r, o = 20) => {
43
43
  return console.log("fixNodesToEdges: 完成"), !0;
44
44
  }, c = () => ({
45
45
  name: "cose-bilkent",
46
- // 核心优化
47
- nodeRepulsion: 1005e3,
48
- // 大幅增加斥力,让节点分散
46
+ // 核心优化 — 降低迭代和斥力以大幅提速
47
+ nodeRepulsion: 5e5,
48
+ // 降低斥力(原1005000),迭代收敛更快
49
49
  idealEdgeLength: 100,
50
- // 拉长边长,避免拥挤
51
50
  edgeElasticity: 0.3,
52
- // 适度弹性,保持边距
53
- numIter: 2500,
54
- // 保持迭代次数
51
+ numIter: 500,
52
+ // 大幅减少迭代次数(原2500),5x提速
55
53
  // 布局对齐
56
54
  fit: !0,
57
55
  padding: 50,
58
- // 增加内边距
59
56
  randomize: !1,
60
- animate: "end",
61
- //fit、none
62
- animationDuration: 1e3,
57
+ animate: !1,
58
+ // 关闭动画,避免额外开销
59
+ animationDuration: 500,
63
60
  // 辅助优化
64
61
  nodeDimensionsIncludeLabels: !0,
65
- // 让节点自动适应标签长度
66
62
  tile: !0,
67
63
  tilingPaddingVertical: 15,
68
64
  tilingPaddingHorizontal: 15,
69
65
  gravity: 0.6,
70
- // 稍强的向心力,避免过于分散
71
- // 其他保持默认
66
+ // 其他
72
67
  nestingFactor: 0.1,
73
68
  gravityRange: 3,
74
69
  gravityRangeCompound: 1.5,
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const GraphDataTable: React.FC;
3
+ export default GraphDataTable;
@@ -1,3 +1,6 @@
1
1
  import { default as React } from 'react';
2
- declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
2
+ interface NodeInfoDrawerProps {
3
+ cyRef: React.MutableRefObject<any>;
4
+ }
5
+ declare const _default: React.ForwardRefExoticComponent<NodeInfoDrawerProps & React.RefAttributes<unknown>>;
3
6
  export default _default;
@@ -9,7 +9,7 @@ export declare const coseBilkentLayout: () => {
9
9
  fit: boolean;
10
10
  padding: number;
11
11
  randomize: boolean;
12
- animate: string;
12
+ animate: boolean;
13
13
  animationDuration: number;
14
14
  nodeDimensionsIncludeLabels: boolean;
15
15
  tile: boolean;
@@ -5,10 +5,10 @@ export declare const resDetailData: (data: any, { graphData: graphData, typeObj,
5
5
  relationListObj: any;
6
6
  };
7
7
  export declare const textLayout: (cyRef: any, type: string) => any;
8
- export declare const handleCalcPath: (cyRef: any, { pathNodes, isGrayed, pathLinks }: {
9
- pathNodes: any;
8
+ export declare const handleCalcPath: (cyRef: any, { nodes, isGrayed, links }: {
9
+ nodes: any;
10
10
  isGrayed?: boolean | undefined;
11
- pathLinks: any;
11
+ links: any;
12
12
  }) => Promise<void>;
13
13
  export declare const typeListFunc: (data?: never[]) => any[];
14
14
  export declare const getCyData: (cy: any) => {
package/lib/style.css CHANGED
@@ -1 +1 @@
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:0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:4px;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-expand-wrapper-vertical{overflow:hidden;max-height:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper{overflow:hidden;max-width:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper.collapsed{max-width:0;opacity:0;margin:0!important}.graph-bar .graph-bar-expand-wrapper-vertical.collapsed-vertical{max-height:0;opacity:0;margin:0!important}.graph-bar .graph-bar-min:not(.graph-bar-min-vertical) .graph-bar-expand-wrapper{display:flex;align-items:center;gap:10px;margin-left:10px;margin-right:10px}.graph-bar.graph-bar-vertical{flex-direction:column}.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column;align-items:flex-start;position:relative;padding-bottom:0!important}.graph-bar.graph-bar-vertical .graph-bar-expand-wrapper{flex-direction:column;width:100%}.graph-bar.graph-bar-vertical .cursor{align-self:flex-end;flex-shrink:0;position:relative}.graph-bar.graph-bar-vertical .cursor:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.graph-bar .bar-item{color:#999;font-size:12px;margin:8px 0}.graph-bar .oprate-btn{width:76px;color:#145afd;border-right:1px solid #f0f0f0}.graph-bar .oprate-btn-vertical{width:76px;padding:10px 0;color:#145afd;border-top:1px solid #f0f0f0}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px 20px 20px;box-sizing:border-box;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}.static-wraper{font-size:12px;color:#666}.color-333{color:#333}.rounded-50{border-radius:50%!important}.text-666{color:#666;font-size:12px}.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)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}
1
+ *{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.cytoscape-container{width:100%;height:100%}.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:0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:4px;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-expand-wrapper-vertical{overflow:hidden;max-height:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper{overflow:hidden;max-width:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper.collapsed{max-width:0;opacity:0;margin:0!important}.graph-bar .graph-bar-expand-wrapper-vertical.collapsed-vertical{max-height:0;opacity:0;margin:0!important}.graph-bar .graph-bar-min:not(.graph-bar-min-vertical) .graph-bar-expand-wrapper{display:flex;align-items:center;gap:10px;margin-left:10px;margin-right:10px}.graph-bar.graph-bar-vertical{flex-direction:column}.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column;align-items:flex-start;position:relative;padding-bottom:0!important}.graph-bar.graph-bar-vertical .graph-bar-expand-wrapper{flex-direction:column;width:100%}.graph-bar.graph-bar-vertical .cursor{align-self:flex-end;flex-shrink:0;position:relative}.graph-bar.graph-bar-vertical .cursor:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.graph-bar .bar-item{color:#999;font-size:12px;margin:12px 0}.graph-bar .oprate-btn{width:76px;color:#145afd;border-right:1px solid #f0f0f0}.graph-bar .oprate-btn-vertical{width:76px;padding:10px 0;color:#145afd;border-top:1px solid #f0f0f0}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px 20px 20px;box-sizing:border-box;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.font-12{font-size:12px}.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}.static-wraper{font-size:12px;color:#666}.color-333{color:#333}.rounded-50{border-radius:50%!important}.text-666{color:#666;font-size:12px}.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)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-kggraph",
3
- "version": "0.0.28",
3
+ "version": "0.0.30",
4
4
  "description": "A knowledge graph visualization component based on Cytoscape",
5
5
  "type": "module",
6
6
  "main": "./lib/index.es.js",
package/lib/index.es38.js DELETED
@@ -1,66 +0,0 @@
1
- import { jsxs as c, jsx as r, Fragment as o } from "react/jsx-runtime";
2
- import N from "./index.es43.js";
3
- import k from "./index.es44.js";
4
- import y from "./index.es45.js";
5
- import C from "./index.es46.js";
6
- import S from "./index.es47.js";
7
- import v from "./index.es48.js";
8
- import { Row as x, Col as f, Empty as q } from "antd";
9
- /* empty css */
10
- const i = (e) => {
11
- const n = document.getElementById(e);
12
- if (n) {
13
- const d = n.closest(".knowledge-card-content");
14
- d && d.scrollTo({
15
- top: n.offsetTop - 20,
16
- behavior: "smooth"
17
- });
18
- }
19
- }, K = ({ detailData: e = {}, drawerInfo: n = {}, loading: d }) => {
20
- var t, l, s, m, a, p, h, u, g, w;
21
- return /* @__PURE__ */ c(x, { className: "knowledge-card-click", wrap: !1, children: [
22
- /* @__PURE__ */ c(f, { flex: "80px", className: "card-item-click", children: [
23
- e.property && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-property"), children: "知识详情" }),
24
- ((t = e.document) == null ? void 0 : t.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-document"), children: "关联文档" }),
25
- ((l = e.image) == null ? void 0 : l.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-image"), children: "关联图片" }),
26
- ((s = e.video) == null ? void 0 : s.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-video"), children: "关联视频" }),
27
- ((m = e.audio) == null ? void 0 : m.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-audio"), children: "关联音频" }),
28
- ((a = e.relation) == null ? void 0 : a.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-relation"), children: "关联知识" })
29
- ] }),
30
- /* @__PURE__ */ c(f, { flex: "auto", className: "knowledge-card-content", children: [
31
- e.property ? /* @__PURE__ */ c(o, { children: [
32
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-property", children: "知识详情" }),
33
- /* @__PURE__ */ r(
34
- N,
35
- {
36
- properties: e.property || [],
37
- excludedKeys: ["id"]
38
- }
39
- )
40
- ] }) : !d && /* @__PURE__ */ r(q, {}),
41
- ((p = e.document) == null ? void 0 : p.length) > 0 && /* @__PURE__ */ c(o, { children: [
42
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-document", children: "关联文档" }),
43
- /* @__PURE__ */ r(k, { documents: e.document, source: "qa-card" })
44
- ] }),
45
- ((h = e.image) == null ? void 0 : h.length) > 0 && /* @__PURE__ */ c(o, { children: [
46
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-image", children: "关联图片" }),
47
- /* @__PURE__ */ r(y, { images: e.image, source: "qa-card" })
48
- ] }),
49
- ((u = e.video) == null ? void 0 : u.length) > 0 && /* @__PURE__ */ c(o, { children: [
50
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-video", children: "关联视频" }),
51
- /* @__PURE__ */ r(C, { videos: e.video, source: "qa-card" })
52
- ] }),
53
- ((g = e.audio) == null ? void 0 : g.length) > 0 && /* @__PURE__ */ c(o, { children: [
54
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-audio", children: "关联音频" }),
55
- /* @__PURE__ */ r(S, { audios: e.audio, source: "qa-card" })
56
- ] }),
57
- ((w = e.relation) == null ? void 0 : w.length) > 0 && /* @__PURE__ */ c(o, { children: [
58
- /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-relation", children: "关联知识" }),
59
- /* @__PURE__ */ r(v, { relations: e.relation, kgIds: n.kgId, source: "qa-card" })
60
- ] })
61
- ] })
62
- ] });
63
- };
64
- export {
65
- K as default
66
- };
package/lib/index.es46.js DELETED
@@ -1,91 +0,0 @@
1
- import { jsxs as m, Fragment as x, jsx as a } from "react/jsx-runtime";
2
- import { useState as u, useRef as p, useEffect as f } from "react";
3
- import { Modal as C } from "antd";
4
- const R = ({ videos: c, forceSingleColumn: V = !1, source: j = "" }) => {
5
- const [n, l] = u(null), [i, h] = u({}), v = p({}), s = p(null), g = () => {
6
- s.current && (s.current.pause(), s.current.currentTime = 0), l(null);
7
- };
8
- f(() => {
9
- n && s.current && s.current.play().catch(() => {
10
- });
11
- }, [n]);
12
- const y = (t, r) => {
13
- if (i[r]) return;
14
- const e = document.createElement("video");
15
- e.src = t, e.crossOrigin = "anonymous", e.muted = !0, e.preload = "metadata", e.onloadeddata = () => {
16
- e.currentTime = 0.1;
17
- }, e.onseeked = () => {
18
- const o = document.createElement("canvas");
19
- o.width = e.videoWidth, o.height = e.videoHeight;
20
- const d = o.getContext("2d");
21
- if (d) {
22
- d.drawImage(e, 0, 0, o.width, o.height);
23
- const w = o.toDataURL("image/jpeg", 0.8);
24
- h((N) => ({ ...N, [r]: w }));
25
- }
26
- e.src = "";
27
- }, e.onerror = () => {
28
- e.src = "";
29
- };
30
- };
31
- return f(() => {
32
- c.forEach((t, r) => {
33
- y(t.propertyValue, r);
34
- });
35
- }, [c]), /* @__PURE__ */ m(x, { children: [
36
- /* @__PURE__ */ a("div", { className: "video-wraper", children: c.map((t, r) => {
37
- t.propertyValue.split("/").pop();
38
- const e = i[r];
39
- return /* @__PURE__ */ a("div", { className: "rounded-lg overflow-hidden transition-shadow", children: /* @__PURE__ */ m("div", { className: "video-item", children: [
40
- /* @__PURE__ */ a(
41
- "video",
42
- {
43
- ref: (o) => {
44
- v.current[r] = o;
45
- },
46
- src: t.propertyValue,
47
- poster: e,
48
- className: "video-item-video",
49
- muted: !0,
50
- playsInline: !0,
51
- preload: "metadata",
52
- onClick: () => l(t.propertyValue)
53
- }
54
- ),
55
- !n && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a(
56
- "div",
57
- {
58
- className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform",
59
- onClick: () => l(t.propertyValue),
60
- children: /* @__PURE__ */ a("span", { className: "w-24px h-24px i-custom-video-play inline-block" })
61
- }
62
- ) })
63
- ] }) }, r);
64
- }) }),
65
- /* @__PURE__ */ a(
66
- C,
67
- {
68
- open: !!n,
69
- footer: null,
70
- onCancel: g,
71
- width: "auto",
72
- centered: !0,
73
- className: "video-modal",
74
- wrapClassName: "modal-wrapClassName",
75
- getContainer: () => document.getElementById("root"),
76
- children: n && /* @__PURE__ */ a(
77
- "video",
78
- {
79
- ref: s,
80
- src: n,
81
- controls: !0,
82
- className: "max-w-[80vw] max-h-[80vh] mt-10px"
83
- }
84
- )
85
- }
86
- )
87
- ] });
88
- };
89
- export {
90
- R as default
91
- };