synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
326 lines (325 loc) • 10.7 kB
JavaScript
import { jsx as e, jsxs as a } from "react/jsx-runtime";
import * as ae 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 { parseSynId as le } from "../../utils/functions/RegularExpressions.js";
import "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import { useSynapseContext as ce } from "../../utils/context/SynapseContext.js";
import { getEntityTypeFromHeader as me } from "../../utils/functions/EntityTypeUtils.js";
import de from "@mui/icons-material/Clear";
import pe from "@mui/icons-material/Search";
import { Box as ue, Tabs as fe, Tab as G, Stack as he, Chip as ye, TextField as Ee, InputAdornment as q, IconButton as Se } from "@mui/material";
import { EntityType as c } from "@sage-bionetworks/synapse-client";
import { Map as Te } from "immutable";
import xe, { useState as i, useMemo as K, useCallback as C, useEffect as g } from "react";
import { useErrorHandler as be } from "react-error-boundary";
import { ReflexContainer as Ce, ReflexElement as Q, ReflexSplitter as ge } from "react-reflex";
import "react-reflex/styles.css";
import { SynapseErrorBoundary as f } from "../error/ErrorBanner.js";
import { Breadcrumbs as Ae } from "./Breadcrumbs.js";
import { EntityDetailsListDataConfigurationType as h, EntityDetailsList as A } from "./details/EntityDetailsList.js";
import { EntityTree as W } from "./tree/EntityTree.js";
import { EntityTreeNodeType as $ } from "./tree/VirtualizedTree.js";
import { useEntitySelection as ve } from "./useEntitySelection.js";
import { VersionSelectionType as we } from "./VersionSelectionType.js";
const Ie = Object.values(c), Pe = Object.values(c), Re = [c.project, c.folder], _e = (m) => Object.values(c).filter((s) => !m.includes(s)).map((s) => ({
key: "node_type",
value: s.toString(),
not: !0
}));
function ot({
initialScope: m,
projectId: y,
initialContainer: d = null,
selectMultiple: s,
onSelectedChange: v,
versionSelection: w = we.TRACKED,
selectableTypes: n = Ie,
visibleTypesInList: I = Pe,
visibleTypesInTree: p = Re,
treeOnly: P = !1,
initialSelected: E
}) {
const { accessToken: R } = ce(), [S, _] = xe.useState(
0
/* BROWSE */
), [u, L] = i(!1), [D, B] = i(""), [l, N] = i(), [J, F] = i({
items: []
}), [T, k] = i([]), [X, Z] = i({
type: h.PROMPT
}), ee = K(
() => [...p, ...n],
[p, n]
), te = K(
() => [...I, ...n],
[I, n]
), [V, x] = i(d), j = be(), re = C(
(t) => {
F({
items: t
});
},
[F]
), { selectedEntities: o, toggleSelection: b, setSelection: O, setInitialVersion: z } = ve(s);
g(() => {
if (E) {
let t = Te();
t = t.withMutations((r) => {
E.forEach((Y) => {
r.set(Y.targetId, Y);
});
}), O(t);
}
}, [E, O]);
const [ne, oe] = i(o), H = C(
(t) => o.has(t.id),
[o]
), M = C(
(t) => {
const r = me(t);
return n.includes(r);
},
[n]
);
g(() => {
v(Array.from(o.values()));
}, [o, v]), g(() => {
if (l?.length === 1) {
const t = le(l[0]);
t && ae.getEntityHeaders([t], R).then((r) => {
k(r.results);
}).catch((r) => j(r));
} else
k([]);
}, [R, l, j]);
const se = (t, r) => {
oe(o), _(r);
}, ie = u ? "MainPanelSearch" : P ? "MainPanelSinglePane" : "MainPanelDualPane", U = {
configuration: X,
versionSelection: w,
selected: o,
isIdSelected: H,
isSelectable: M,
visibleTypes: te,
selectableTypes: n,
selectColumnType: s ? "checkbox" : "none",
toggleSelection: b,
setInitialVersion: z,
enableSelectAll: s,
setCurrentContainer: x
};
return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a("div", { className: "EntityFinder", children: [
/* @__PURE__ */ a(
ue,
{
sx: {
display: "flex",
justifyContent: "space-between",
mb: 2.5,
rowGap: 2,
columnGap: 4,
flexWrap: { xs: "wrap", md: "nowrap" }
},
children: [
/* @__PURE__ */ a(
fe,
{
value: S,
onChange: se,
sx: { flex: "none" },
children: [
/* @__PURE__ */ e(G, { value: 0, label: "Browse" }),
/* @__PURE__ */ e(
G,
{
value: 1,
label: /* @__PURE__ */ a(
he,
{
direction: "row",
sx: {
gap: 0.5,
alignItems: "center"
},
children: [
/* @__PURE__ */ e("span", { children: "Selected" }),
/* @__PURE__ */ e(
ye,
{
size: "small",
label: o.size.toLocaleString(),
sx: {
backgroundColor: "tertiary.500",
color: "grey.900",
height: "21px"
}
}
)
]
}
)
}
)
]
}
),
/* @__PURE__ */ e(
Ee,
{
size: "small",
placeholder: "Search by name, wiki content, or SynID",
value: D,
onChange: (t) => {
B(t.target.value);
},
onKeyDown: (t) => {
if (t.key === "Enter") {
const r = t.target.value.trim();
L(!!r), r && (N(r.split(/\s+/)), _(
0
/* BROWSE */
));
}
},
sx: {
maxWidth: { xs: "100%", md: "350px" },
flex: "1 1 350px"
},
slotProps: {
input: {
startAdornment: /* @__PURE__ */ e(q, { position: "start", children: /* @__PURE__ */ e(pe, {}) }),
endAdornment: l ? /* @__PURE__ */ e(q, { position: "end", children: /* @__PURE__ */ e(
Se,
{
size: "small",
onClick: () => {
B(""), N(void 0), L(!1);
},
"aria-label": "Clear Search",
disabled: !D && !u,
children: /* @__PURE__ */ e(de, {})
}
) }) : void 0
}
}
}
)
]
}
),
/* @__PURE__ */ a(
"div",
{
role: "tabpanel",
className: `EntityFinder__MainPanel ${ie}`,
style: {
display: S === 0 ? "block" : "none"
},
children: [
u && /* @__PURE__ */ e(
A,
{
configuration: T && T.length > 0 ? {
type: h.HEADER_LIST,
headerList: T
} : {
type: h.ENTITY_SEARCH,
query: {
queryTerm: l,
booleanQuery: _e(n)
}
},
versionSelection: w,
selectColumnType: s ? "checkbox" : "none",
selected: o,
isIdSelected: H,
isSelectable: M,
visibleTypes: n,
selectableTypes: n,
toggleSelection: b,
setInitialVersion: z,
enableSelectAll: s,
setCurrentContainer: void 0
}
),
/* @__PURE__ */ e("div", { style: u ? { display: "none" } : {}, children: P ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
W,
{
toggleSelection: b,
showDropdown: !0,
visibleTypes: ee,
initialScope: m,
selectedEntities: o,
projectId: y,
initialContainer: d,
currentContainer: V,
setCurrentContainer: x,
showScopeAsRootNode: !1,
treeNodeType: $.SINGLE_PANE,
selectableTypes: n
}
) }) }) : /* @__PURE__ */ e("div", { className: "EntityFinderReflexContainer", children: /* @__PURE__ */ a(Ce, { orientation: "vertical", windowResizeAware: !0, children: [
/* @__PURE__ */ e(
Q,
{
className: "TreeViewReflexElement",
flex: 0.24,
children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
W,
{
selectedEntities: o,
setDetailsViewConfiguration: Z,
showDropdown: !0,
visibleTypes: p,
initialScope: m,
projectId: y,
initialContainer: d,
currentContainer: V,
setCurrentContainer: x,
treeNodeType: $.DUAL_PANE,
setBreadcrumbItems: re,
selectableTypes: p
}
) })
}
),
/* @__PURE__ */ e(ge, {}),
/* @__PURE__ */ e(Q, { className: "DetailsViewReflexElement", children: /* @__PURE__ */ a(f, { children: [
/* @__PURE__ */ e(A, { ...U }),
/* @__PURE__ */ e(Ae, { ...J })
] }) })
] }) }) })
]
}
),
/* @__PURE__ */ e(
"div",
{
role: "tabpanel",
className: "MainPanelSelected",
style: {
display: S === 1 ? "block" : "none"
},
children: /* @__PURE__ */ e(
A,
{
...U,
configuration: {
type: h.REFERENCE_LIST,
referenceList: Array.from(ne.values())
}
}
)
}
)
] }) });
}
export {
ot as EntityFinder,
ot as default
};
//# sourceMappingURL=EntityFinder.js.map