synapse-react-client/dist/components/EntityFinder/tree/VirtualizedTree.js

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

import { jsx as i, Fragment as k, jsxs as b } from "react/jsx-runtime";
import { getEntityChildren as W } 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 "@sage-bionetworks/synapse-types";
import { getEntityTypeFromHeader as S, isContainerType as F } from "../../../utils/functions/EntityTypeUtils.js";
import "../../../utils/SynapseConstants.js";
import { cloneDeep as M } from "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../../utils/PermissionLevelToAccessType.js";
import { useState as _, useRef as V, useEffect as O, useCallback as E } from "react";
import { useSynapseContext as R } from "../../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { useQueryClient as q } from "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { Skeleton as z, Typography as U, Tooltip as j } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import "../../../utils/types/IsType.js";
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 { SynapseSpinner as Q } from "../../LoadingScreen/LoadingScreen.js";
import "react-router";
import { formatDate as G } from "../../../utils/functions/DateFormatter.js";
import { ExpandMore as K, ChevronRight as $ } from "@mui/icons-material";
import J from "dayjs";
import { useInView as X } from "react-intersection-observer";
import Y from "react-virtualized-auto-sizer";
import { VariableSizeTree as Z } from "react-vtree";
import { EntityBadgeIcons as ee } from "../../EntityBadgeIcons/EntityBadgeIcons.js";
import { EntityTypeIcon as te } from "../../EntityIcon.js";
import { UserBadge as ie } from "../../UserCard/UserBadge.js";
var ne = /* @__PURE__ */ ((e) => (e[e.SINGLE_PANE = 0] = "SINGLE_PANE", e[e.DUAL_PANE = 1] = "DUAL_PANE", e))(ne || {});
function I(e) {
  return "__paginationNode" in e ? "pagination" : "id" in e ? "entityHeader" : "rootNodeConfiguration";
}
function T(e) {
  return I(e) === "pagination";
}
function v(e) {
  return I(e) === "entityHeader";
}
function N(e) {
  return I(e) === "rootNodeConfiguration";
}
function D(e) {
  return T(e) ? !1 : N(e) ? e.hasNextPage : e.children == null || e.childrenNextPageToken != null;
}
function B(e) {
  return T(e) ? !0 : N(e) ? !1 : (
    // Entity is not a container
    !F(S(e)) || // OR Children have been fetched (nonnull) and there are 0 children
    e.children != null && e.children.length === 0
  );
}
function re(e) {
  return T(e) ? !1 : N(e) ? e.children.length > 0 || e.hasNextPage : !B(e);
}
const H = (e) => {
  const {
    node: t,
    nestingLevel: a,
    getNextPageOfChildren: s,
    setSelectedId: c,
    treeNodeType: f,
    selected: p,
    selectableTypes: d,
    autoExpand: u,
    defaultHeight: m,
    currentContainer: n
  } = e;
  if (T(t))
    throw new Error("Cannot create data for a pagination node");
  const r = N(t) ? "root" : t.id, l = f === 0 ? p.has(r) : n === r, g = !N(t) && !d.includes(S(t)), h = u(r);
  return h && t.children == null && D(t) && s(), {
    data: {
      node: t,
      getNextPageOfChildren: s,
      id: r,
      isLeaf: B(t),
      isOpenByDefault: h,
      nestingLevel: a,
      setSelectedId: c,
      treeNodeType: f,
      isSelected: l,
      isDisabled: g,
      defaultHeight: m
    },
    nestingLevel: a,
    node: t
  };
};
function oe(e) {
  const {
    data: {
      node: t,
      getNextPageOfChildren: a,
      isLeaf: s,
      id: c,
      nestingLevel: f,
      setSelectedId: p,
      treeNodeType: d,
      isSelected: u,
      isDisabled: m
    },
    isOpen: n,
    style: r,
    setOpen: l
  } = e, [g, h] = _(!1), x = v(t) ? /* @__PURE__ */ i("span", { children: t.name }) : N(t) ? /* @__PURE__ */ i("span", { children: t.nodeText }) : (
    // Pagination node
    /* @__PURE__ */ i(z, { width: 100 })
  ), { ref: w, inView: L } = X();
  O(() => {
    T(t) && L && a();
  }, [t, L, a]);
  const o = E(async () => {
    D(t) ? (h(!0), await a(), await l(!n), h(!1)) : await l(!n);
  }, [a, t, n, l]);
  if (O(() => {
    d === 1 && u && !n && o();
  }, [u]), "height" in r && r.height === 0)
    return /* @__PURE__ */ i(k, {});
  let C = "";
  v(t) && (C = /* @__PURE__ */ i("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ b(
    U,
    {
      component: "span",
      variant: "smallText1",
      sx: {
        display: "inline"
      },
      children: [
        t.name,
        /* @__PURE__ */ i("br", {}),
        /* @__PURE__ */ i("b", { children: "ID: " }),
        t.id,
        "modifiedBy" in t && /* @__PURE__ */ b(k, { children: [
          /* @__PURE__ */ i("br", {}),
          /* @__PURE__ */ i("b", { children: "Modified By: " }),
          /* @__PURE__ */ i(
            ie,
            {
              userId: t.modifiedBy.toString(),
              showFullName: !0,
              disableLink: !0,
              showCardOnHover: !1
            }
          )
        ] }),
        "modifiedOn" in t && /* @__PURE__ */ b(k, { children: [
          /* @__PURE__ */ i("br", {}),
          /* @__PURE__ */ i("b", { children: "Modified On: " }),
          G(J(t.modifiedOn))
        ] })
      ]
    }
  ) }));
  const P = n ? K : $;
  return /* @__PURE__ */ b(
    "div",
    {
      className: `Node ${d === 0 ? "SelectNode" : "BrowseNode"}`,
      "aria-selected": u,
      "aria-disabled": m,
      onClick: (y) => {
        y.stopPropagation(), m || p(c);
      },
      style: {
        ...r,
        paddingLeft: `${f * 20}px`
      },
      children: [
        !s && /* @__PURE__ */ i(k, { children: g ? /* @__PURE__ */ i(Q, { size: 10 }) : /* @__PURE__ */ i(
          "button",
          {
            "aria-label": n ? "Collapse" : "Expand",
            onClick: (y) => {
              y.stopPropagation(), o();
            },
            children: /* @__PURE__ */ i(P, { className: "ExpandButton" })
          }
        ) }),
        d === 0 && // SWC-5592
        /* @__PURE__ */ i("div", { className: "EntityIcon", children: v(t) && /* @__PURE__ */ i(te, { type: S(t) }) }),
        /* @__PURE__ */ i(j, { title: C, placement: "right", children: /* @__PURE__ */ i("div", { className: "EntityName", ref: w, children: x }) }),
        d === 0 && /* @__PURE__ */ i(
          ee,
          {
            entityId: c,
            showHasDiscussionThread: !1,
            showHasWiki: !1,
            showUnlink: !1,
            canOpenModal: !1
          }
        )
      ]
    }
  );
}
function ae(e, t, a, s, c, f, p, d, u) {
  return function* () {
    for (yield H({
      node: e,
      nestingLevel: 0,
      getNextPageOfChildren: e.fetchNextPage,
      setSelectedId: t,
      treeNodeType: a,
      selected: s,
      selectableTypes: c,
      autoExpand: f,
      defaultHeight: p(),
      currentContainer: d
    }); ; ) {
      const n = yield;
      if (re(n.node)) {
        if (n.node.children)
          for (let r = 0; r < n.node.children.length; r++) {
            const l = n.node.children[r];
            yield H({
              node: l,
              nestingLevel: n.nestingLevel + 1,
              getNextPageOfChildren: () => u(l),
              setSelectedId: t,
              treeNodeType: a,
              selected: s,
              selectableTypes: c,
              autoExpand: f,
              defaultHeight: p(),
              currentContainer: d
            });
          }
        if (D(n.node)) {
          const r = {
            __paginationNode: !0
          };
          yield {
            data: {
              id: n.data.id + "-pagination",
              node: r,
              isOpenByDefault: !1,
              getNextPageOfChildren: n.data.getNextPageOfChildren,
              isLeaf: !0,
              isSelected: !1,
              defaultHeight: p(),
              isDisabled: !0,
              nestingLevel: n.nestingLevel + 1,
              setSelectedId: () => {
              },
              treeNodeType: a
            },
            nestingLevel: n.nestingLevel + 1,
            node: {
              __paginationNode: !0
            }
          };
        }
      }
    }
  };
}
const Qe = (e) => {
  const {
    rootNodeConfiguration: t,
    setSelectedId: a,
    treeNodeType: s,
    selected: c,
    currentContainer: f,
    selectableTypes: p,
    visibleTypes: d,
    autoExpand: u
  } = e, { accessToken: m, keyFactory: n } = R(), r = q(), [l, g] = _(
    t
  ), h = V(null);
  O(() => {
    g(t);
  }, [t, t.children]);
  const x = E(
    (o) => o === 0 && !t.show ? 0 : s === 1 ? 30 : 60,
    [s, t.show]
  ), w = E(
    // Because we update the root node with a copy at the end of this function, we can write to the node under update.
    async (o) => {
      const C = {
        parentId: o.id,
        nextPageToken: o.childrenNextPageToken,
        includeTypes: d
      }, P = await r.fetchQuery({
        queryKey: n.getEntityChildrenQueryKey(
          C,
          !1
        ),
        queryFn: () => W(C, m)
      });
      if (o.children)
        for (const y of P.page)
          o.children.find((A) => A.id == y.id) || o.children.push(y);
      else
        o.children = P.page;
      o.childrenNextPageToken = P.nextPageToken, h.current && await h.current.recomputeTree({
        [o.id]: {
          open: !0
        }
      }), g(M(l));
    },
    [d, r, n, l, m]
  ), L = E(
    ae(
      l,
      a,
      s,
      c,
      p,
      u,
      x,
      f,
      w
    ),
    [
      l,
      a,
      s,
      c,
      p,
      u,
      f,
      w,
      x
    ]
  );
  return /* @__PURE__ */ i(Y, { disableWidth: !0, children: ({ height: o }) => /* @__PURE__ */ i(
    Z,
    {
      ref: h,
      treeWalker: L,
      itemSize: x,
      height: o,
      async: !0,
      width: "100%",
      children: oe
    }
  ) });
};
export {
  ne as EntityTreeNodeType,
  oe as Node,
  Qe as VirtualizedTree,
  H as getNodeData,
  ae as getTreeWalkerFunction
};
//# sourceMappingURL=VirtualizedTree.js.map