synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
436 lines (435 loc) • 13.6 kB
JavaScript
import { jsx as n, Fragment as B, jsxs as r } from "react/jsx-runtime";
import L from "../../assets/icons/AddAd.js";
import { StyledTableContainer as re } from "../styled/StyledTableContainer.js";
import { useGetEntityHeaders as se } from "../../synapse-queries/entity/useGetEntityHeaders.js";
import { entityTypeToFriendlyName as le, getEntityTypeFromHeader as ae, normalizeSynPrefix as V } from "../../utils/functions/EntityTypeUtils.js";
import { SYNAPSE_ENTITY_ID_REGEX as j } from "../../utils/functions/RegularExpressions.js";
import { AddCircleTwoTone as ce } from "@mui/icons-material";
import { Box as a, Typography as O, Button as M, IconButton as U, InputLabel as de, TextField as me, Tooltip as pe, Alert as ue, AlertTitle as ge } from "@mui/material";
import { useReactTable as ye, getFacetedMinMaxValues as he, getFacetedUniqueValues as fe, getFacetedRowModel as xe, getSortedRowModel as Ce, getFilteredRowModel as we, getCoreRowModel as Se, flexRender as _ } from "@tanstack/react-table";
import { noop as Ie, upperFirst as Ee } from "lodash-es";
import Fe from "papaparse";
import Re from "pluralize";
import { useState as $, useCallback as E, useMemo as F, useEffect as De, Fragment as Te } from "react";
import { EntityFinderModal as be } from "../EntityFinder/EntityFinderModal.js";
import { FinderScope as ve } from "../EntityFinder/tree/EntityTree.js";
import { VersionSelectionType as Me } from "../EntityFinder/VersionSelectionType.js";
import Ae from "../IconSvg/IconSvg.js";
import "@mui/material/Skeleton";
import { SkeletonTable as He } from "../Skeleton/SkeletonTable.js";
import { CheckBoxCell as ke, CheckBoxHeader as ze, EntityHeaderNameCell as Ne, EntityHeaderIDCell as Pe, EntityHeaderTypeCell as Be } from "./EntityHeaderTableCellRenderers.js";
import { Filter as Le } from "./Filter.js";
import { useEntityHeaderTableState as Ve } from "./useEntityHeaderTableState.js";
const { parse: je } = Fe, Oe = {
selectMultiple: !0,
versionSelection: Me.DISALLOWED,
initialScope: ve.ALL_PROJECTS,
initialContainer: "root"
}, Ue = 10, mt = (G) => {
const {
references: W,
isEditable: p,
disabled: u,
onUpdate: A = Ie,
removeSelectedRowsButtonText: q = "Remove Selected Rows",
onUpdateEntityIDsTextbox: J,
objectNameCopy: Y = "entity",
hideTextFieldToPasteValue: R = !1,
entityFinderConfiguration: X = Oe
} = G, [K, Q] = $([]), [Z, h] = $(!1), {
rowSelection: f,
setRowSelection: ee,
refsInState: s,
setRefsInState: g,
newEntityIDs: i,
setNewEntityIDs: x,
parseErrors: C,
setParseErrors: y
} = Ve(W, J, A), D = E(
(t) => {
y([`Invalid Synapse ID(s): ${t.join(",")}`]);
},
[y]
), T = E(
(t) => {
const e = t.map((o) => ({
targetId: o.trim()
}));
g([...s, ...e]);
},
[s, g]
), te = E(() => {
i ? i.includes(",") ? je(i, {
complete: (t) => {
if (t.errors.length > 0) {
const e = t.errors.map(
(o) => o.message
);
y(e);
} else {
const e = t.data[0], o = e.filter(
(d) => !d.trim().match(j)
);
o.length > 0 ? D(o) : T(e);
}
}
}) : i.trim().match(j) ? T([i]) : D([i]) : (y([]), x(""));
}, [
T,
i,
D,
x,
y
]), m = Ee(Re(Y)), H = F(
() => [
{
id: "select",
header: ze,
cell: ke
}
],
[]
), b = F(
() => [
{
accessorFn: (t) => t.name,
id: "name",
cell: Ne,
header: "Name"
},
{
accessorFn: (t) => t.id,
id: "id",
cell: Pe,
header: "SynID"
},
{
accessorFn: (t) => t.isDummy ? "-" : le(ae(t)),
id: "type",
header: "Type",
cell: Be,
filterFn: "includesString"
}
],
[]
), ne = F(
() => p ? H.concat(b) : b,
[b, p, H]
), k = Object.keys(f).length, {
data: v,
isSuccess: oe,
isLoading: z
} = se(s, {
throwOnError: !0
}), w = F(() => {
const t = v ? v?.results : [], e = /* @__PURE__ */ new Set();
t.forEach(
(l) => e.add(V(l.id))
);
const d = s.filter(
(l) => !e.has(V(l.targetId))
).map((l) => ({
id: l.targetId,
name: l.targetId,
benefactorId: -1,
type: "org.sagebionetworks.repo.model.Project",
createdOn: "",
modifiedOn: "",
createdBy: "",
modifiedBy: "",
isLatestVersion: !0,
isDummy: !0
}));
return t.concat(d);
}, [s, v]), c = ye({
data: w,
columns: ne,
state: {
rowSelection: f,
columnFilters: K
},
enableRowSelection: p,
onRowSelectionChange: ee,
onColumnFiltersChange: Q,
getCoreRowModel: Se(),
getFilteredRowModel: we(),
getSortedRowModel: Ce(),
getFacetedRowModel: xe(),
getFacetedUniqueValues: fe(),
getFacetedMinMaxValues: he(),
// debugTable: true,
// debugHeaders: true,
// debugColumns: false,
columnResizeMode: "onChange"
}), ie = E(() => {
const e = w.filter(
(o, d) => f[d] !== !0
).map((o) => ({
targetId: o.id
}));
g(e);
}, [w, f, g]), N = k > 0, S = w.length, P = c.getPrePaginationRowModel().rows.length, I = S > Ue;
return De(
function() {
I || c.setColumnFilters([]);
},
[c, I]
), z ? /* @__PURE__ */ n(He, { numCols: 3, numRows: Math.min(10, s.length) }) : oe ? /* @__PURE__ */ r("div", { children: [
/* @__PURE__ */ r(
a,
{
sx: {
display: "flex",
justifyContent: "space-between",
p: "12px 10px 10px 5px"
},
children: [
I && /* @__PURE__ */ r(O, { variant: "body1", sx: { marginBottom: "10px" }, children: [
S,
" ",
m,
" ",
P < S ? `(${P} visible)` : "",
N && /* @__PURE__ */ n("span", { children: ` (${k} selected)` })
] }),
p && s.length > 0 && /* @__PURE__ */ n(
M,
{
variant: "contained",
disabled: !N || u,
onClick: ie,
children: q
}
)
]
}
),
/* @__PURE__ */ n(
a,
{
sx: {
display: "flex",
pb: 2
},
children: c.getHeaderGroups().map(
(t) => t.headers.map((e) => e.isPlaceholder ? null : /* @__PURE__ */ n(Te, { children: e.column.getCanFilter() && I ? /* @__PURE__ */ n(a, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ n(Le, { column: e.column, table: c }) }) : null }, e.column.id))
)
}
),
S > 0 && /* @__PURE__ */ n(
re,
{
sx: {
th: {
zIndex: 100,
maxHeight: "250px"
}
},
children: /* @__PURE__ */ r("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [
/* @__PURE__ */ n("thead", { children: c.getHeaderGroups().map((t) => /* @__PURE__ */ n("tr", { children: t.headers.map((e) => {
let o = "5%";
switch (e.id) {
case "name":
o = "50%";
break;
case "id":
o = "22%";
break;
case "type":
o = "22%";
break;
}
return /* @__PURE__ */ r(
"th",
{
colSpan: e.colSpan,
style: {
width: o,
position: "sticky",
top: "0px"
},
children: [
e.isPlaceholder ? null : /* @__PURE__ */ r(
a,
{
sx: {
display: "flex",
alignItems: "center"
},
children: [
_(
e.column.columnDef.header,
e.getContext()
),
/* @__PURE__ */ n(
a,
{
sx: {
mx: "auto"
}
}
),
e.column.getCanSort() && /* @__PURE__ */ n(
U,
{
onClick: e.column.getToggleSortingHandler(),
size: "small",
sx: {
marginLeft: "auto",
marginRight: "16px"
},
children: /* @__PURE__ */ n(
Ae,
{
icon: e.column.getIsSorted() === "asc" ? "sortUp" : "sortDown",
wrap: !1,
fontSize: "inherit",
sx: {
color: e.column.getIsSorted() ? "primary.main" : "grey.700",
backgroundColor: "none"
}
}
)
}
)
]
}
),
e.column.getCanResize() && /* @__PURE__ */ n(
"div",
{
className: `resizer ${e.column.getIsResizing() ? "isResizing" : ""}`,
onMouseDown: e.getResizeHandler(),
onTouchStart: e.getResizeHandler()
}
)
]
},
e.id
);
}) }, t.id)) }),
/* @__PURE__ */ n("tbody", { children: c.getRowModel().rows.map((t) => /* @__PURE__ */ n("tr", { style: { height: "30px" }, children: t.getVisibleCells().map((e) => /* @__PURE__ */ n(
"td",
{
style: {
width: e.column.getSize()
},
children: _(
e.column.columnDef.cell,
e.getContext()
)
},
e.id
)) }, t.id)) })
] })
}
),
/* @__PURE__ */ n(
be,
{
configuration: X,
promptCopy: `Select ${m} to add to the Synapse ID list`,
show: Z,
title: `Select ${m}`,
confirmButtonCopy: `Add ${m}`,
onConfirm: (t) => {
if (R) {
const e = [...s, ...t];
g(e), A(e);
} else {
const e = t.map((l) => l.targetId), d = (i.trim().length > 0 ? i.concat(",") : i).concat(
e.join(",")
);
x(d);
}
h(!1);
},
onCancel: () => h(!1)
}
),
p && /* @__PURE__ */ r(a, { sx: { marginTop: "10px" }, children: [
R && /* @__PURE__ */ r(
M,
{
variant: "outlined",
onClick: () => {
h(!0);
},
startIcon: /* @__PURE__ */ n(L, {}),
disabled: u,
children: [
"Add ",
m
]
}
),
!R && /* @__PURE__ */ r(B, { children: [
/* @__PURE__ */ n(de, { htmlFor: "synIDs", children: "Add Synapse IDs" }),
/* @__PURE__ */ r(
a,
{
sx: { display: "grid", gridTemplateColumns: "auto 50px 150px" },
children: [
/* @__PURE__ */ n(
me,
{
id: "synIDs",
name: "synIDs",
fullWidth: !0,
onChange: (t) => {
x(t.target.value);
},
value: i,
placeholder: "Enter a list of Synapse IDs (i.e. 'syn123, syn456')",
disabled: u
}
),
/* @__PURE__ */ n(a, { sx: { padding: "5px 0px 0px 5px" }, children: /* @__PURE__ */ n(pe, { title: "Add a Synapse ID to the list via the Entity Finder", children: /* @__PURE__ */ n(
U,
{
disabled: u,
onClick: () => {
h(!0);
},
children: /* @__PURE__ */ n(L, {})
}
) }) }),
/* @__PURE__ */ r(
M,
{
variant: "outlined",
onClick: te,
disabled: z || i.trim().length == 0 || u,
startIcon: /* @__PURE__ */ n(ce, {}),
children: [
"Add ",
m
]
}
)
]
}
)
] }),
C && C.length > 0 && /* @__PURE__ */ r(ue, { severity: "error", sx: { my: 2 }, children: [
/* @__PURE__ */ n(ge, { children: "Parsing errors encountered:" }),
/* @__PURE__ */ n("ul", { children: C.map((t, e) => /* @__PURE__ */ n(
O,
{
component: C.length > 1 ? "li" : "span",
variant: "smallText1",
sx: {
lineHeight: 1.5
},
children: t
},
e
)) })
] })
] })
] }) : /* @__PURE__ */ n(B, {});
};
export {
mt as EntityHeaderTable
};
//# sourceMappingURL=EntityHeaderTable.js.map