react-kggraph 0.0.20 → 0.0.22

package/lib/index.es3.js

@@ -1,72 +1,72 @@
-import { jsx as c, jsxs as te } from "react/jsx-runtime";
-import { useRef as N, useState as h, useEffect as S } from "react";
+import { jsx as m, jsxs as oe } from "react/jsx-runtime";
+import { useRef as N, useState as v, useEffect as S } from "react";
 import k from "cytoscape";
 import Ne from "cytoscape-cose-bilkent";
 import Ce from "cytoscape-cise";
 import ke from "cytoscape-fcose";
-import Ee from "storm-layout";
-import ze from "./index.es7.js";
+import ze from "storm-layout";
+import Ee from "./index.es7.js";
 /* empty css          */
 import { handleCalcPath as we, resDetailData as F } from "./index.es8.js";
-import { fixNodesToEdges as Le, coseBilkentLayout as oe } from "./index.es9.js";
-import { edgeNodeStyles as Re, defaultColors as ne } from "./index.es10.js";
+import { fixNodesToEdges as Le, coseBilkentLayout as ne } from "./index.es9.js";
+import { edgeNodeStyles as Re, defaultColors as se } from "./index.es10.js";
 import je from "cytoscape-layout-utilities";
-import { Row as Te, Empty as $e, message as C } from "antd";
-import { menuItemsConfig as De } from "./index.es11.js";
+import { message as C } from "antd";
+import { menuItemsConfig as Te } from "./index.es11.js";
 import { jsonStringify as R } from "./index.es12.js";
-import Oe from "./index.es13.js";
-import Se from "./index.es14.js";
-import { GraphProvider as Ie } from "./index.es15.js";
-import Pe from "./index.es16.js";
+import $e from "./index.es13.js";
+import De from "./index.es14.js";
+import { GraphProvider as Oe } from "./index.es15.js";
+import Se from "./index.es16.js";
 k.use(je);
 k.use(Ce);
 k.use(ke);
-k.use(Ee);
+k.use(ze);
 k.use(Ne);
-const rt = ({
-  data: re,
+const nt = ({
+  data: de,
   getAllGraphData: I,
-  highPathAnalysis: E = [],
-  graphInfo: m,
-  stepNextApi: se,
-  knowledgeCardApi: de,
-  colors: z,
-  actionBar: ae,
-  actionCircle: ie,
-  noDataDesc: le = "暂无数据"
+  highPathAnalysis: z = [],
+  graphInfo: h,
+  stepNextApi: re,
+  knowledgeCardApi: ae,
+  colors: E,
+  actionBar: ie,
+  actionCircle: le,
+  noDataDesc: Ie = "暂无数据"
 }) => {
-  var _, G;
-  const j = N(null), [v, P] = h([]), p = N(null), K = N(null), X = 1, [Be, J] = h(!1), [w, B] = h({}), [T, W] = h({}), [ce, pe] = h("cose-bilkent"), Q = N(null), V = N(null), [ue, Y] = h(["", ""]), H = N(z);
+  var _, G, ee;
+  const j = N(null), [c, P] = v([]), p = N(null), K = N(null), X = 1, [Pe, J] = v(!1), [w, B] = v({}), [T, W] = v({}), [ce, pe] = v("cose-bilkent"), Q = N(null), V = N(null), [ue, Y] = v(["", ""]), H = N(E);
   S(() => {
-    H.current = z;
-  }, [z]);
-  const [u, L] = h({
+    H.current = E;
+  }, [E]);
+  const [u, L] = v({
     visible: !1,
     x: 0,
     y: 0,
     targetNode: null,
     bgColor: ""
-  }), [$, Z] = h({
+  }), [$, Z] = v({
     visible: !1,
     x: 0,
     y: 0,
     content: ""
-  }), ge = De({ cyRef: p, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: ie });
+  }), ge = Te({ cyRef: p, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: le });
   S(() => {
-    (E == null ? void 0 : E.length) > 1 && we(p, { pathNodes: E, isGrayed: !1 });
-  }, [R(E), R(v)]), S(() => {
-    I == null || I({ graphData: v, nodeStatic: w, relationStatic: T });
-  }, [R(v), R(w), R(T)]), S(() => {
-    var d;
+    (z == null ? void 0 : z.length) > 1 && we(p, { pathNodes: z, isGrayed: !1 });
+  }, [R(z), R(c)]), S(() => {
+    I == null || I({ graphData: c, nodeStatic: w, relationStatic: T });
+  }, [R(c), R(w), R(T)]), S(() => {
+    var r;
     if (!j.current || p.current) return;
-    const { elements: r, typeListObj: a, relationListObj: g } = F(re, { typeObj: w, graphInfo: m });
-    B(a), P(r), W(g), document.addEventListener("contextmenu", function(t) {
+    const { elements: s, typeListObj: a, relationListObj: g } = F(de, { typeObj: w, graphInfo: h });
+    B(a), P(s), W(g), document.addEventListener("contextmenu", function(t) {
       t.preventDefault();
     });
     const e = k({
       container: j.current,
-      elements: r,
-      style: Re({ elements: r, colors: z }),
+      elements: s,
+      style: Re({ elements: s, colors: E }),
       autounselectify: !1,
       autolock: !1,
       layout: {
@@ -74,14 +74,14 @@ const rt = ({
         // 使用预设布局，完全依赖 position
       }
     });
-    if (p.current = e, ((d = m == null ? void 0 : m.searchNodes) == null ? void 0 : d.length) === 2)
+    if (p.current = e, ((r = h == null ? void 0 : h.searchNodes) == null ? void 0 : r.length) === 2)
       Le(
         e,
-        m.searchNodes[0],
-        m.searchNodes[1]
+        h.searchNodes[0],
+        h.searchNodes[1]
       );
     else {
-      const t = e.layout(oe());
+      const t = e.layout(ne());
       t.run(), t.on("layoutstop", () => {
         e.fit(void 0, 50), e.center();
       });
@@ -90,10 +90,10 @@ const rt = ({
       var n;
       const o = t.target;
       if (!o.hasClass("path-edge")) {
-        const s = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? ne.edgeHoverColor;
+        const d = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? se.edgeHoverColor;
         o.style({
-          "line-color": s,
-          "target-arrow-color": s,
+          "line-color": d,
+          "target-arrow-color": d,
           opacity: 0.8
         });
       }
@@ -101,10 +101,10 @@ const rt = ({
       var n;
       const o = t.target;
       if (!o.hasClass("path-edge")) {
-        const s = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? ne.edgeDefaultColor;
+        const d = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? se.edgeDefaultColor;
         o.style({
-          "line-color": s,
-          "target-arrow-color": s,
+          "line-color": d,
+          "target-arrow-color": d,
           opacity: 1
         });
       }
@@ -112,12 +112,12 @@ const rt = ({
       const o = t.target;
       o.hasClass("selected") || o.addClass("hover");
     }), e.on("mouseover", "node", (t) => {
-      const o = t.target, n = o.renderedPosition(), s = o.data("name") || "";
+      const o = t.target, n = o.renderedPosition(), d = o.data("name") || "";
       o.addClass("hover"), Z({
         visible: !0,
         x: n.x,
         y: n.y - 60,
-        content: s
+        content: d
       });
     }), e.on("mouseout", "node", (t) => {
       t.target.removeClass("hover"), Z((n) => ({ ...n, visible: !1 }));
@@ -134,27 +134,27 @@ const rt = ({
     }), p.current = e, e.on("click", "node", (t) => {
       const o = t.target;
       e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
-      const s = o.neighborhood().nodes().add(o), x = s.edgesWith(s);
-      console.log("cy.nodes().not(relatedNodes):::", s), e.nodes().not(s).addClass("grayed"), e.edges().not(x).addClass("grayed"), s.addClass("highlighted"), x.addClass("highlighted");
+      const d = o.neighborhood().nodes().add(o), x = d.edgesWith(d);
+      console.log("cy.nodes().not(relatedNodes):::", d), e.nodes().not(d).addClass("grayed"), e.edges().not(x).addClass("grayed"), d.addClass("highlighted"), x.addClass("highlighted");
     }), e.on("tap", (t) => {
       t.target === e && (L((o) => ({ ...o, visible: !1 })), e.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), e.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
     }), () => {
       p.current && (p.current.destroy(), p.current = null);
     };
   }, []);
-  const ye = async (r) => {
-    const { id: a, kgId: g } = r, e = p.current;
+  const ye = async (s) => {
+    const { id: a, kgId: g } = s, e = p.current;
     if (!e) return;
-    const d = e.$(`#${a}`);
-    if (!d || d.length === 0) {
+    const r = e.$(`#${a}`);
+    if (!r || r.length === 0) {
       console.error("当前节点不存在");
       return;
     }
-    const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === a || n.data("idLabel") === `${a}-${n.data("name")}`) && n.data("zktype") === r.zktype : !1);
+    const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === a || n.data("idLabel") === `${a}-${n.data("name")}`) && n.data("zktype") === s.zktype : !1);
     if (t.length > 0) {
-      const n = t.map((l) => l.id()), s = t.connectedEdges(), x = e.edges().filter(
+      const n = t.map((l) => l.id()), d = t.connectedEdges(), x = e.edges().filter(
         (l) => l.data("source") === a && n.includes(l.data("target"))
-      ), D = e.edges().filter((l) => l.data("appendedBy") === a), M = s.merge(x).merge(D).filter((l) => l.data().zktype === r.zktype);
+      ), D = e.edges().filter((l) => l.data("appendedBy") === a), M = d.merge(x).merge(D).filter((l) => l.data().zktype === s.zktype);
       t.animate({
         style: { opacity: 0 }
       }, {
@@ -162,24 +162,24 @@ const rt = ({
         complete: () => {
           e.remove(t), e.remove(M), P((l) => {
             const O = l.filter((f) => {
-              var b, ee;
+              var b, te;
               const i = f.data.zktype;
-              if (f.group === "nodes" && n.includes((b = f.data) == null ? void 0 : b.id) && i && i === r.zktype)
+              if (f.group === "nodes" && n.includes((b = f.data) == null ? void 0 : b.id) && i && i === s.zktype)
                 return !1;
-              if (f.group === "edges" && i && i === r.zktype) {
+              if (f.group === "edges" && i && i === s.zktype) {
                 const he = Array.from(D).map((xe) => {
                   const A = xe.data();
                   return `${A.source}-${A.target}-${A.label}`;
-                }), q = f.data, ve = he.includes(`${q.source}-${q.target}-${q.label}`), be = ((ee = f.data) == null ? void 0 : ee.appendedBy) === a;
+                }), q = f.data, ve = he.includes(`${q.source}-${q.target}-${q.label}`), be = ((te = f.data) == null ? void 0 : te.appendedBy) === a;
                 return !ve && !be;
               }
               return !0;
             }), { typeListObj: y, relationListObj: U } = F({}, { graphData: O, typeObj: {} });
             return B(y), W(U), O;
-          }), d.data("appendedNodes", []), d.data("isExpanded", !1);
+          }), r.data("appendedNodes", []), r.data("isExpanded", !1);
         }
       }), setTimeout(() => {
-        d.removed() || (d.style("border-width", ""), d.style("border-color", ""));
+        r.removed() || (r.style("border-width", ""), r.style("border-color", ""));
       }, 300);
     } else {
       try {
@@ -188,21 +188,21 @@ const rt = ({
           content: "正在展开...",
           duration: 0
         });
-        const n = await se({ uri: a, queryType: 1, kgId: g, zktype: r.zktype }), { elements: s, typeListObj: x, relationListObj: D } = F(n.data, { graphData: v, typeObj: w, relationObj: T, zktype: r.zktype });
-        if (B(x), W(D), !((s == null ? void 0 : s.length) > 0)) {
+        const n = await re({ uri: a, queryType: 1, kgId: g, zktype: s.zktype }), { elements: d, typeListObj: x, relationListObj: D } = F(n.data, { graphData: c, typeObj: w, relationObj: T, zktype: s.zktype });
+        if (B(x), W(D), !((d == null ? void 0 : d.length) > 0)) {
           setTimeout(() => {
             C.destroy(), C.warning("暂无数据");
           }, 2e3);
           return;
         }
-        if ((s == null ? void 0 : s.length) > 0) {
+        if ((d == null ? void 0 : d.length) > 0) {
           const M = e.layoutUtilities({
-            ...oe(),
+            ...ne(),
             idealEdgeLength: 80,
             // 与你的期望边长匹配
             offset: 30
             // 随机偏移，避免完全重叠
-          }), l = s.map((i) => {
+          }), l = d.map((i) => {
             if (i.group === "nodes") {
               const b = 80 * X;
               return {
@@ -219,7 +219,7 @@ const rt = ({
                   appendedBy: a,
                   // 标记由谁追加
                   idLabel: a + "-" + i.data.label,
-                  zktype: r.zktype,
+                  zktype: s.zktype,
                   isAppended: !0,
                   // 标记是追加节点
                   baseWidth: b,
@@ -232,13 +232,13 @@ const rt = ({
               data: {
                 ...i.data,
                 appendedBy: a,
-                zktype: r.zktype
+                zktype: s.zktype
               }
             };
           }), O = e.add(l);
-          P([...v, ...l]);
+          P([...c, ...l]);
           const y = O.filter(":node"), U = y.map((i) => i.id());
-          d.data("appendedNodes", U), d.data("isExpanded", !0);
+          r.data("appendedNodes", U), r.data("isExpanded", !0);
           const f = e.nodes().difference(y);
           f.forEach((i) => i.lock()), M.placeNewNodes(y), e.layout({
             name: "cose-bilkent",
@@ -270,7 +270,7 @@ const rt = ({
               y.style("opacity", ""), y.style("width", ""), y.style("height", "");
             }
           }), setTimeout(() => {
-            d.removed() || (d.style("border-width", ""), d.style("border-color", ""), e.center(d), e.zoom(e.zoom()));
+            r.removed() || (r.style("border-width", ""), r.style("border-color", ""), e.center(r), e.zoom(e.zoom()));
           }, 600);
         } else
           console.log("没有找到相关节点数据");
@@ -284,15 +284,15 @@ const rt = ({
   }, fe = {
     expanded: "typed-literal",
     contract: "uri"
-  }, me = (r, a) => {
+  }, me = (s, a) => {
     var e;
-    console.log("handleMenuAction:::", r, a);
+    console.log("handleMenuAction:::", s, a);
     const g = a || u.targetNode;
     if (g) {
-      const d = r.ids, t = g.data();
-      if (["expanded", "contract"].includes(d))
-        ye({ kgId: 3, ...t, zktype: fe[d] });
-      else if (d === "nodeInfo") {
+      const r = s.ids, t = g.data();
+      if (["expanded", "contract"].includes(r))
+        ye({ kgId: 3, ...t, zktype: fe[r] });
+      else if (r === "nodeInfo") {
         const o = g, n = {
           id: o.id(),
           data: o.data(),
@@ -304,29 +304,29 @@ const rt = ({
           style: o.style()
         };
         Q.current.open(n);
-      } else d === "knowledgeCard" && V.current.open(g.data());
-      (e = r.onClick) == null || e.call(r, g), L({ visible: !1, x: 0, y: 0, targetNode: null });
+      } else r === "knowledgeCard" && V.current.open(g.data());
+      (e = s.onClick) == null || e.call(s, g), L({ visible: !1, x: 0, y: 0, targetNode: null });
     }
   };
-  return v.length < 1 ? /* @__PURE__ */ c(Te, { className: "h-100", align: "middle", justify: "center", children: /* @__PURE__ */ c($e, { description: le }) }) : /* @__PURE__ */ c(Ie, { value: { pathNodes: ue, setPathNodes: Y, graphInfo: m, graphData: v, layoutType: ce, setLayoutType: pe, knowledgeCardApi: de }, children: /* @__PURE__ */ te("div", { className: "cytoscape-container relative", children: [
-    /* @__PURE__ */ c("div", { className: "btn-group" }),
-    /* @__PURE__ */ c(
-      ze,
+  return console.log(111, !(((G = c == null ? void 0 : c.nodes) == null ? void 0 : G.length) > 0), c), /* @__PURE__ */ m(Oe, { value: { pathNodes: ue, setPathNodes: Y, graphInfo: h, graphData: c, layoutType: ce, setLayoutType: pe, knowledgeCardApi: ae }, children: /* @__PURE__ */ oe("div", { className: "cytoscape-container relative", children: [
+    /* @__PURE__ */ m("div", { className: "btn-group" }),
+    /* @__PURE__ */ m(
+      Ee,
       {
         ref: K,
         cyRef: p,
-        graphInfo: m,
+        graphInfo: h,
         initNodeScale: X,
         cyContainerRef: j,
         typeObj: w,
         relationObj: T,
-        colors: z,
-        actionBar: ae
+        colors: E,
+        actionBar: ie
       }
     ),
-    /* @__PURE__ */ te("div", { className: "relative h-100", children: [
-      /* @__PURE__ */ c("div", { ref: j, className: "cy-container" }),
-      u.visible && u.targetNode && /* @__PURE__ */ c(
+    /* @__PURE__ */ oe("div", { className: "relative h-100", children: [
+      /* @__PURE__ */ m("div", { ref: j, className: "cy-container" }),
+      u.visible && u.targetNode && /* @__PURE__ */ m(
         "div",
         {
           style: {
@@ -345,11 +345,11 @@ const rt = ({
             height: "200px",
             overflow: "hidden"
           },
-          onClick: (r) => r.stopPropagation(),
-          children: /* @__PURE__ */ c(Oe, { items: ge, centerImage: (G = u == null ? void 0 : u.targetNode) == null ? void 0 : G.data().image, targetNode: u.targetNode, onClick: (r, a) => me(r, a) })
+          onClick: (s) => s.stopPropagation(),
+          children: /* @__PURE__ */ m($e, { items: ge, centerImage: (ee = u == null ? void 0 : u.targetNode) == null ? void 0 : ee.data().image, targetNode: u.targetNode, onClick: (s, a) => me(s, a) })
         }
       ),
-      $.visible && /* @__PURE__ */ c(
+      $.visible && /* @__PURE__ */ m(
         "div",
         {
           style: {
@@ -373,10 +373,10 @@ const rt = ({
         }
       )
     ] }),
-    /* @__PURE__ */ c(Se, { ref: Q }),
-    /* @__PURE__ */ c(Pe, { ref: V })
+    /* @__PURE__ */ m(De, { ref: Q }),
+    /* @__PURE__ */ m(Se, { ref: V })
   ] }) });
 };
 export {
-  rt as default
+  nt as default
 };

package/package.json

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