synapse-react-client/dist/components/ProvenanceGraph/ProvenanceGraph.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as l } from "react/jsx-runtime";
import * as S from "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { USED_ENTITY_CONCRETE_TYPE_VALUE as q } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as h, useCallback as N, useEffect as C } from "react";
import { useSynapseContext as $ } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { CircularProgress as J } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetEntityHeaders as K } from "../../synapse-queries/entity/useGetEntityHeaders.js";
import { useErrorHandler as Q } from "react-error-boundary";
import tt, { ReactFlowProvider as et, useNodesState as ot, useEdgesState as it, useReactFlow as nt, getConnectedEdges as st, Controls as rt } from "reactflow";
import { SynapseErrorBoundary as dt } from "../error/ErrorBanner.js";
import { displayToast as at } from "../ToastMessage/ToastMessage.js";
import { addEntityNode as ct, isRootEntity as k, addExpandNode as lt, addUndefinedNode as pt, findEntityNode as mt, addActivityNode as yt, addExternalNode as ut, addEntityPlaceholderNode as ft } from "./ProvenanceGraphUtils.js";
import { NodeType as Et, getLayoutedElements as gt, isArrayEqual as X } from "./ProvenanceUtils.js";
import "reactflow/dist/style.css";
const R = 400, A = 0.85, ht = (P) => {
  const {
    entityRefs: u,
    containerHeight: Y = "200px",
    initialNodes: M = [],
    initialEdges: W = [],
    onNodesChangedListener: v,
    onEdgesChangedListener: w
  } = P, { accessToken: m } = $(), [a, b] = h(M), [c, F] = h(W), [p, I] = ot([]), [H, _] = it([]), [y, D] = h(), z = Q(), { data: T, isSuccess: V } = K(
    u,
    { throwOnError: !0 }
  );
  if (V && T && T.totalNumberOfResults == 0) {
    const e = u.map((t) => t.targetId).join(",");
    z(
      `Unable to load provenance for the given Synapse IDs: ${e}`
    );
  }
  const r = T?.results, [x, Z] = h(!1), f = nt(), j = N((e, t) => {
    D(t);
  }, []), E = N(
    async (e) => {
      const { entityHeader: t, nodesCopy: o, edgesCopy: s, usedInActivity: i } = e;
      ct({
        entityHeader: t,
        activity: i,
        nodesCopy: o,
        edgesCopy: s
      });
      try {
        const n = await S.getActivityForEntity(
          t.id,
          t.versionNumber,
          m
        );
        (!k({ entityHeader: t, rootEntityHeaders: r }) || n.used && n.used.length >= R) && lt({
          entityHeader: t,
          itemCount: n.used?.length,
          nodesCopy: o,
          edgesCopy: s
        });
      } catch (n) {
        console.error(n), k({
          entityHeader: t,
          rootEntityHeaders: r
        }) && pt({
          entityHeader: t,
          nodesCopy: o,
          edgesCopy: s
        });
      }
    },
    [m, r]
  );
  C(() => {
    !x && p.length > 0 && setTimeout(() => {
      if (r) {
        const e = mt(r[0], p);
        if (e) {
          const t = f.getZoom(), o = t > A ? A : t;
          f?.setCenter(
            e.position.x + 150,
            e.position.y - 30,
            { zoom: o, duration: 0 }
          );
        }
        Z(!0);
      }
    });
  }, [x, p, f, r]);
  const g = N(
    async (e) => {
      const { entityHeader: t, nodesCopy: o, edgesCopy: s } = e;
      try {
        const i = await S.getActivityForEntity(
          t.id,
          t.versionNumber,
          m
        );
        if (yt({
          activity: i,
          entityHeader: t,
          nodesCopy: o,
          edgesCopy: s
        }), i.used && i.used.length < R) {
          const n = [];
          i.used.forEach((d) => {
            d.concreteType == q ? n.push(d.reference) : ut({ usedURL: d, activity: i, nodesCopy: o, edgesCopy: s });
          });
          const G = await S.getEntityHeaders(
            n,
            m
          ), { results: L } = G;
          n.filter((d) => L.find((U) => U.id == d.targetId) == null).forEach((d) => {
            ft({ ref: d, activity: i, nodesCopy: o, edgesCopy: s });
          });
          const O = [];
          L.forEach((d) => {
            O.push(
              E({
                entityHeader: d,
                nodesCopy: o,
                edgesCopy: s,
                usedInActivity: i
              })
            );
          }), await Promise.allSettled(O);
        }
      } catch (i) {
        console.error(i);
      }
    },
    [m, E]
  );
  C(() => {
    if (r && a.length == 0) {
      const e = [...a], t = [...c], o = [];
      r.forEach((s) => {
        const i = E({
          entityHeader: s,
          nodesCopy: e,
          edgesCopy: t
        });
        o.push(i);
        const n = g({
          entityHeader: s,
          nodesCopy: e,
          edgesCopy: t
        });
        o.push(n);
      }), Promise.allSettled(o).finally(() => {
        b(e), F(t);
      });
    }
  }, [
    E,
    z,
    g,
    r,
    u,
    c,
    a
  ]), C(() => {
    const e = y?.data;
    if (y && e?.type == Et.EXPAND) {
      const t = e.props;
      if (t.itemCount > R) {
        at(
          "Web visualization does not support expanding this many items at this time.",
          "danger"
        );
        return;
      } else {
        e.label = /* @__PURE__ */ l(J, { size: 30 });
        const o = a.filter(
          (n) => n.id != y.id
        ), s = st([y], c)[0], i = c.filter(
          (n) => n != s
        );
        g({
          entityHeader: t.entityHeader,
          nodesCopy: o,
          edgesCopy: i
        }).finally(() => {
          b(o), F(i);
        });
      }
      D(void 0);
    }
  }, [y, a, c, g]), C(() => {
    const { nodes: e, edges: t } = gt(
      a,
      c,
      "TB"
    );
    X(e, p) || (I(e), v && v(e)), X(t, H) || (_(t), w && w(t));
  }, [
    a,
    c,
    p,
    H,
    I,
    _,
    x,
    f,
    u,
    v,
    w
  ]);
  const B = N(
    (e) => {
      e && typeof e.deltaX < "u" && typeof e.deltaY < "u" && window.scrollTo(
        window.scrollX + e.deltaX,
        window.scrollY + e.deltaY
      );
    },
    []
  );
  return /* @__PURE__ */ l(
    "div",
    {
      className: "ProvenanceWidget",
      role: "graphics-doc",
      style: { width: "100%", height: Y },
      children: /* @__PURE__ */ l(
        tt,
        {
          defaultViewport: { x: 0, y: 0, zoom: A },
          nodes: p,
          edges: H,
          onNodeClick: j,
          attributionPosition: "bottom-right",
          onConnect: void 0,
          zoomOnScroll: !1,
          onPaneScroll: B,
          children: /* @__PURE__ */ l(rt, {})
        }
      )
    }
  );
}, ie = (P) => /* @__PURE__ */ l(dt, { children: /* @__PURE__ */ l(et, { children: /* @__PURE__ */ l(ht, { ...P }) }) });
export {
  ie as default
};
//# sourceMappingURL=ProvenanceGraph.js.map