react-kggraph 0.0.35 → 0.0.37

package/lib/index.es3.js

@@ -1,79 +1,79 @@
-import { jsx as f, jsxs as ne } from "react/jsx-runtime";
-import { useRef as C, useState as m, useEffect as T } from "react";
-import z from "cytoscape";
-import Ee from "cytoscape-cose-bilkent";
+import { jsx as g, jsxs as ne } from "react/jsx-runtime";
+import { useRef as k, useState as m, useEffect as T } from "react";
+import C from "cytoscape";
+import Ne from "cytoscape-cose-bilkent";
 import Pe from "cytoscape-cise";
-import Ne from "cytoscape-fcose";
-import je from "storm-layout";
-import we from "./index.es7.js";
+import je from "cytoscape-fcose";
+import we from "storm-layout";
+import Le from "./index.es7.js";
 /* empty css          */
-import { handleCalcPath as Le, resDetailData as Z } from "./index.es8.js";
+import { handleCalcPath as Se, resDetailData as F } from "./index.es8.js";
 import { fixNodesToEdges as Oe, coseBilkentLayout as De } from "./index.es9.js";
-import { edgeNodeStyles as Re, defaultColors as se, nodeSize as Se } from "./index.es10.js";
-import Te from "cytoscape-layout-utilities";
-import { message as h } from "antd";
-import { menuItemsConfig as $e } from "./index.es11.js";
+import { edgeNodeStyles as Re, defaultColors as se, nodeSize as Te } from "./index.es10.js";
+import $e from "cytoscape-layout-utilities";
+import { Spin as Ie, message as j } from "antd";
+import { menuItemsConfig as Be } from "./index.es11.js";
 import { jsonStringify as w } from "./index.es12.js";
-import Ie from "./index.es13.js";
-import Be from "./index.es14.js";
-import { GraphProvider as Me } from "./index.es15.js";
-import Ae from "./index.es16.js";
-import We from "./index.es17.js";
-z.use(Te);
-z.use(Pe);
-z.use(Ne);
-z.use(je);
-z.use(Ee);
-const ct = ({
-  data: E,
+import Me from "./index.es13.js";
+import Ae from "./index.es14.js";
+import { GraphProvider as We } from "./index.es15.js";
+import He from "./index.es16.js";
+import Ze from "./index.es17.js";
+C.use($e);
+C.use(Pe);
+C.use(je);
+C.use(we);
+C.use(Ne);
+const pt = ({
+  data: z,
   getAllGraphData: $,
-  highPathAnalysis: F = [],
-  graphInfo: g,
+  highPathAnalysis: X = [],
+  graphInfo: u,
   stepNextApi: ae,
   knowledgeCardApi: re,
-  colors: P,
+  colors: E,
   actionBar: ie,
   actionCircle: de,
   queryStatisticsConfig: le = [{ label: "实体", key: "entity" }, { label: "关系", key: "relation" }],
   className: ce,
-  noDataDesc: He = "暂无数据"
+  noDataDesc: Fe = "暂无数据"
 }) => {
   var V, G;
-  const L = C(null), [v, X] = m([]), c = C(null), q = C(null), K = 1, [Ze, U] = m(!1), [b, I] = m({}), [O, B] = m({}), [pe, ge] = m("cose-bilkent"), Y = C(null), _ = C(null), [ue, J] = m(["", ""]), M = C(P);
+  const L = k(null), [h, q] = m([]), c = k(null), K = k(null), U = 1, [pe, I] = m(!1), [v, B] = m({}), [S, M] = m({}), [ge, ue] = m("cose-bilkent"), Y = k(null), _ = k(null), [fe, J] = m(["", ""]), A = k(E);
   T(() => {
-    M.current = P;
-  }, [P]);
-  const [u, N] = m({
+    A.current = E;
+  }, [E]);
+  const [f, N] = m({
     visible: !1,
     x: 0,
     y: 0,
     targetNode: null,
     bgColor: ""
-  }), [D, Q] = m({
+  }), [O, Q] = m({
     visible: !1,
     x: 0,
     y: 0,
     content: ""
-  }), fe = $e({ cyRef: c, setContextMenu: N, onPathAnalysis: (V = q.current) == null ? void 0 : V.onPathAnalysis, setPathNodes: J, actionCircle: de });
+  }), ye = Be({ cyRef: c, setContextMenu: N, onPathAnalysis: (V = K.current) == null ? void 0 : V.onPathAnalysis, setPathNodes: J, actionCircle: de });
   T(() => {
-    const { nodes: e, links: t } = F || {};
-    ((e == null ? void 0 : e.length) > 0 || (t == null ? void 0 : t.length) > 0) && Le(c, { nodes: e, links: t, isGrayed: !1 });
-  }, [w(F), w(v)]), T(() => {
+    const { nodes: e, links: t } = X || {};
+    ((e == null ? void 0 : e.length) > 0 || (t == null ? void 0 : t.length) > 0) && Se(c, { nodes: e, links: t, isGrayed: !1 });
+  }, [w(X), w(h)]), T(() => {
     const e = [], t = [];
-    v.forEach((d) => {
+    h.forEach((d) => {
       d.group === "nodes" ? e.push(d.data) : d.group === "edges" && t.push(d.data);
-    }), $ == null || $({ graphData: v, nodeStatic: b, relationStatic: O, data: { nodes: e, links: t }, paths: E.paths, data2: E.data2, logId: E.logId, costtime: E.costtime });
-  }, [w(v), w(b), w(O)]), T(() => {
+    }), $ == null || $({ graphData: h, nodeStatic: v, relationStatic: S, data: { nodes: e, links: t }, paths: z.paths, data2: z.data2, logId: z.logId, costtime: z.costtime });
+  }, [w(h), w(v), w(S)]), T(() => {
     var i;
     if (!L.current || c.current) return;
-    const { elements: e, typeListObj: t, relationListObj: d } = Z(E, { typeObj: b, graphInfo: g });
-    I(t), X(e), B(d), document.addEventListener("contextmenu", function(a) {
+    const { elements: e, typeListObj: t, relationListObj: d } = F(z, { typeObj: v, graphInfo: u });
+    B(t), q(e), M(d), document.addEventListener("contextmenu", function(a) {
       a.preventDefault();
     });
-    const s = z({
+    const s = C({
       container: L.current,
       elements: e,
-      style: Re({ elements: e, colors: P }),
+      style: Re({ elements: e, colors: E }),
       autounselectify: !1,
       autolock: !1,
       maxZoom: 1,
@@ -82,11 +82,11 @@ const ct = ({
         // 使用预设布局，完全依赖 position
       }
     });
-    if (c.current = s, ((i = g == null ? void 0 : g.searchNodes) == null ? void 0 : i.length) === 2)
+    if (c.current = s, ((i = u == null ? void 0 : u.searchNodes) == null ? void 0 : i.length) === 2)
       Oe(
         s,
-        g.searchNodes[0],
-        g.searchNodes[1]
+        u.searchNodes[0],
+        u.searchNodes[1]
       );
     else {
       const a = s.layout(De());
@@ -98,7 +98,7 @@ const ct = ({
       var n;
       const o = a.target;
       if (!o.hasClass("path-edge")) {
-        const r = ((n = M.current) == null ? void 0 : n.edgeHoverColor) ?? se.edgeHoverColor;
+        const r = ((n = A.current) == null ? void 0 : n.edgeHoverColor) ?? se.edgeHoverColor;
         o.style({
           "line-color": r,
           "target-arrow-color": r,
@@ -109,7 +109,7 @@ const ct = ({
       var n;
       const o = a.target;
       if (!o.hasClass("path-edge")) {
-        const r = ((n = M.current) == null ? void 0 : n.edgeDefaultColor) ?? se.edgeDefaultColor;
+        const r = ((n = A.current) == null ? void 0 : n.edgeDefaultColor) ?? se.edgeDefaultColor;
         o.style({
           "line-color": r,
           "target-arrow-color": r,
@@ -150,15 +150,15 @@ const ct = ({
       c.current && (c.current.destroy(), c.current = null);
     };
   }, []);
-  const ye = ({ addedNodes: e, currentNode: t, cy: d, currentZoom: s }) => {
+  const me = ({ addedNodes: e, currentNode: t, cy: d, currentZoom: s }) => {
     const i = e == null ? void 0 : e.length;
     t.data("originalPosition") || t.data("originalPosition", { ...t.position() });
     const a = Math.max(0.1, 18 / (i || 1)), o = d.layout({
       name: "concentric",
       spacingFactor: a,
       // 节点越多间距越小，防止溢出
-      eles: e.union(t),
-      // 只布局新节点+当前节点，不重算全图
+      // eles: addedNodes.union(currentNode),           // 只布局新节点+当前节点，不重算全图
+      // eles: addedNodes,           // 只布局新节点+当前节点，不重算全图
       minNodeSpacing: 0,
       // 最小间距设为0
       fit: !1,
@@ -176,10 +176,10 @@ const ct = ({
       // },
       // 添加随机偏移，打破完美圆环
       transform: function(n, r) {
-        const p = (Math.random() - 0.5) * 40, x = (Math.random() - 0.5) * 10;
+        const p = (Math.random() - 0.5) * 40, b = (Math.random() - 0.5) * 10;
         return {
           x: r.x + p,
-          y: r.y + x
+          y: r.y + b
         };
       }
     });
@@ -202,9 +202,9 @@ const ct = ({
             easing: "ease-out"
           });
         }
-      })), h.destroy();
+      })), I(!1);
     }), o.run(), d.nodes().forEach((n) => n.unlock());
-  }, me = async (e) => {
+  }, he = async (e) => {
     const { id: t, kgId: d } = e, s = c.current;
     if (!s) return;
     const i = s.$id(t);
@@ -216,28 +216,28 @@ const ct = ({
     if (a.length > 0) {
       const n = a.map((l) => l.id()), r = a.connectedEdges(), p = s.edges().filter(
         (l) => l.data("source") === t && n.includes(l.data("target"))
-      ), x = s.edges().filter((l) => l.data("appendedBy") === t), A = r.merge(p).merge(x).filter((l) => l.data().zktype === e.zktype);
+      ), b = s.edges().filter((l) => l.data("appendedBy") === t), W = r.merge(p).merge(b).filter((l) => l.data().zktype === e.zktype);
       a.animate({
         style: { opacity: 0 }
       }, {
         duration: 200,
         complete: () => {
-          s.remove(a), s.remove(A), X((ee) => {
-            const j = ee.filter((k) => {
+          s.remove(a), s.remove(W), q((ee) => {
+            const P = ee.filter((x) => {
               var te, oe;
-              const S = k.data.zktype;
-              if (k.group === "nodes" && n.includes((te = k.data) == null ? void 0 : te.id) && S && S === e.zktype)
+              const R = x.data.zktype;
+              if (x.group === "nodes" && n.includes((te = x.data) == null ? void 0 : te.id) && R && R === e.zktype)
                 return !1;
-              if (k.group === "edges" && S && S === e.zktype) {
-                const xe = Array.from(x).map((ze) => {
-                  const H = ze.data();
-                  return `${H.source}-${H.target}-${H.label}`;
-                }), W = k.data, ke = xe.includes(`${W.source}-${W.target}-${W.label}`), Ce = ((oe = k.data) == null ? void 0 : oe.appendedBy) === t;
-                return !ke && !Ce;
+              if (x.group === "edges" && R && R === e.zktype) {
+                const ke = Array.from(b).map((Ee) => {
+                  const Z = Ee.data();
+                  return `${Z.source}-${Z.target}-${Z.label}`;
+                }), H = x.data, Ce = ke.includes(`${H.source}-${H.target}-${H.label}`), ze = ((oe = x.data) == null ? void 0 : oe.appendedBy) === t;
+                return !Ce && !ze;
               }
               return !0;
-            }), { typeListObj: y, relationListObj: R } = Z({}, { graphData: j, typeObj: {} });
-            return I(y), B(R), j;
+            }), { typeListObj: y, relationListObj: D } = F({}, { graphData: P, typeObj: {} });
+            return B(y), M(D), P;
           }), i.data("appendedNodes", []), i.data("isExpanded", !1);
           const l = i.data("originalPosition");
           l && (i.animate({
@@ -249,27 +249,23 @@ const ct = ({
       }, 300);
     } else {
       try {
-        U(!0), h.open({
-          type: "loading",
-          content: "正在展开...",
-          duration: 0
-        });
-        const n = await ae({ uri: t, queryType: 1, kgId: d, zktype: e.zktype }), { elements: r, typeListObj: p, relationListObj: x } = Z(n.data, { graphData: v, typeObj: b, relationObj: O, zktype: e.zktype });
-        if (I(p), B(x), !((r == null ? void 0 : r.length) > 0)) {
+        I(!0);
+        const n = await ae({ uri: t, queryType: 1, kgId: d, zktype: e.zktype }), { elements: r, typeListObj: p, relationListObj: b } = F(n.data, { graphData: h, typeObj: v, relationObj: S, zktype: e.zktype });
+        if (B(p), M(b), !((r == null ? void 0 : r.length) > 0)) {
           setTimeout(() => {
-            h.destroy(), h.warning("暂无数据");
+            j.destroy(), j.warning("暂无数据");
           }, 2e3);
           return;
         }
-        const A = s.zoom();
+        const W = s.zoom();
         if ((r == null ? void 0 : r.length) > 0) {
           const l = r.map((y) => {
             if (y.group === "nodes") {
-              const R = Se * K;
+              const D = Te * U;
               return {
                 ...y,
                 // position,
-                style: { opacity: 0, width: R, height: R },
+                style: { opacity: 0, width: D, height: D },
                 data: {
                   ...y.data,
                   parentId: t,
@@ -287,29 +283,29 @@ const ct = ({
               data: { ...y.data, appendedBy: t, zktype: e.zktype }
             };
           });
-          console.log(888, l), s.nodes().lock(), i.unlock();
-          const j = s.add(l).filter(":node");
-          j.style("opacity", 0), ye({ addedNodes: j, currentNode: i, cy: s, currentZoom: A });
+          s.nodes().lock(), i.unlock();
+          const P = s.add(l).filter(":node");
+          P.style("opacity", 0), me({ addedNodes: P, currentNode: i, cy: s, currentZoom: W });
         } else
           console.log("没有找到相关节点数据");
-        h.destroy();
+        j.destroy();
       } catch (n) {
-        h.destroy(), h.error("请求接口失败"), console.error("22请求接口失败:", n);
+        j.destroy(), j.error("请求接口失败"), console.error("22请求接口失败:", n);
       }
-      U(!1);
+      I(!1);
     }
     N({ visible: !1 });
-  }, he = {
+  }, ve = {
     expanded: "typed-literal",
     contract: "uri"
-  }, ve = (e, t) => {
+  }, be = (e, t) => {
     var s;
     console.log("handleMenuAction:::", e, t);
-    const d = t || u.targetNode;
+    const d = t || f.targetNode;
     if (d) {
       const i = e.ids, a = d.data();
       if (["expanded", "contract"].includes(i))
-        me({ kgId: g.kgId, ...a, zktype: he[i] });
+        he({ kgId: u.kgId, ...a, zktype: ve[i] });
       else if (i === "nodeInfo") {
         const o = d, n = {
           id: o.id(),
@@ -325,36 +321,36 @@ const ct = ({
       } else i === "knowledgeCard" && _.current.open(d.data());
       (s = e.onClick) == null || s.call(e, d), N({ visible: !1, x: 0, y: 0, targetNode: null });
     }
-  }, be = () => {
+  }, xe = () => {
     const e = {};
-    return Object.keys(b).forEach((t) => {
-      t !== "_" && (e[t] = b[t]);
+    return Object.keys(v).forEach((t) => {
+      t !== "_" && (e[t] = v[t]);
     }), e;
   };
-  return /* @__PURE__ */ f(Me, { value: { pathNodes: ue, setPathNodes: J, graphInfo: g, graphData: v, layoutType: pe, setLayoutType: ge, knowledgeCardApi: re, queryStatisticsConfig: le, actionBar: ie }, children: /* @__PURE__ */ ne("div", { className: We("cytoscape-container relative", ce), children: [
-    /* @__PURE__ */ f("div", { className: "btn-group" }),
-    /* @__PURE__ */ f(
-      we,
+  return /* @__PURE__ */ g(We, { value: { pathNodes: fe, setPathNodes: J, graphInfo: u, graphData: h, layoutType: ge, setLayoutType: ue, knowledgeCardApi: re, queryStatisticsConfig: le, actionBar: ie }, children: /* @__PURE__ */ ne("div", { className: Ze("cytoscape-container relative", ce), children: [
+    /* @__PURE__ */ g("div", { className: "btn-group" }),
+    /* @__PURE__ */ g(
+      Le,
       {
-        ref: q,
+        ref: K,
         cyRef: c,
-        graphInfo: g,
-        initNodeScale: K,
+        graphInfo: u,
+        initNodeScale: U,
         cyContainerRef: L,
-        typeObj: be(),
-        relationObj: O,
-        colors: P
+        typeObj: xe(),
+        relationObj: S,
+        colors: E
       }
     ),
     /* @__PURE__ */ ne("div", { className: "relative h-100", children: [
-      /* @__PURE__ */ f("div", { ref: L, className: "cy-container" }),
-      u.visible && u.targetNode && /* @__PURE__ */ f(
+      /* @__PURE__ */ g("div", { ref: L, className: "cy-container" }),
+      f.visible && f.targetNode && /* @__PURE__ */ g(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${u.x}px`,
-            top: `${u.y}px`,
+            left: `${f.x}px`,
+            top: `${f.y}px`,
             // backgroundColor: 'white',
             // border: '1px solid #ccc',
             // borderRadius: '50%',
@@ -368,16 +364,16 @@ const ct = ({
             overflow: "hidden"
           },
           onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ f(Ie, { items: fe, centerImage: (G = u == null ? void 0 : u.targetNode) == null ? void 0 : G.data().image, targetNode: u.targetNode, onClick: (e, t) => ve(e, t) })
+          children: /* @__PURE__ */ g(Me, { items: ye, centerImage: (G = f == null ? void 0 : f.targetNode) == null ? void 0 : G.data().image, targetNode: f.targetNode, onClick: (e, t) => be(e, t) })
         }
       ),
-      D.visible && /* @__PURE__ */ f(
+      O.visible && /* @__PURE__ */ g(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${D.x}px`,
-            top: `${D.y}px`,
+            left: `${O.x}px`,
+            top: `${O.y}px`,
             transform: "translateX(-50%)",
             backgroundColor: "rgba(0, 0, 0, 0.85)",
             color: "#fff",
@@ -391,14 +387,15 @@ const ct = ({
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: D.content
+          children: O.content
         }
       )
     ] }),
-    /* @__PURE__ */ f(Be, { ref: Y, cyRef: c }),
-    /* @__PURE__ */ f(Ae, { ref: _ })
+    /* @__PURE__ */ g(Ae, { ref: Y, cyRef: c }),
+    /* @__PURE__ */ g(He, { ref: _ }),
+    /* @__PURE__ */ g(Ie, { spinning: pe, className: "Spin-loading", description: "Loading", size: "large", fullscreen: !0 })
   ] }) });
 };
 export {
-  ct as default
+  pt as default
 };

package/lib/style.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}.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}
+*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}.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%}.Spin-loading{width:100%;height:100%;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#0000000d}.Spin-loading .ant-spin-section,.Spin-loading .ant-spin-section .ant-spin-description{color:#1677ff}.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

@@ -1,6 +1,6 @@
 {
   "name": "react-kggraph",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "A knowledge graph visualization component based on Cytoscape",
   "type": "module",
   "main": "./lib/index.es.js",