synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
477 lines (476 loc) • 14 kB
JavaScript
import { jsxs as ae, jsx as n } from "react/jsx-runtime";
import { getEntityVersions as ce } from "../../../../synapse-client/SynapseClient.js";
import { useSynapseContext as de } from "../../../../utils/context/SynapseContext.js";
import { getEntityTypeFromHeader as S, isVersionableEntityType as q, isTableType as me, isContainerType as ue } from "../../../../utils/functions/EntityTypeUtils.js";
import { TABLE_VERSION_IN_PROGRESS as fe } from "../../../../utils/SynapseConstants.js";
import { Checkbox as ge, Tooltip as j } from "@mui/material";
import { EntityType as N } from "@sage-bionetworks/synapse-client";
import { useQueryClient as pe } from "@tanstack/react-query";
import { useReactTable as ye, getCoreRowModel as be, createColumnHelper as he } from "@tanstack/react-table";
import { useVirtualizer as Se } from "@tanstack/react-virtual";
import { useState as K, useEffect as U, useMemo as V, useRef as Ce, useCallback as Ee } from "react";
import { BlockingLoader as Te, SynapseSpinner as ze } from "../../../LoadingScreen/LoadingScreen.js";
import h from "../../../TanStackTable/ColumnHeader.js";
import Ne from "../../../TanStackTable/StyledVirtualTanStackTable.js";
import { VersionSelectionType as R } from "../../VersionSelectionType.js";
import { AddFileToDownloadListCell as Re } from "./table/AddToDownloadListCell.js";
import { CreatedOnCell as ve } from "./table/CreatedOnCell.js";
import { EntityBadgeIconsCell as De } from "./table/EntityBadgeIconsCell.js";
import { EntityFinderCheckboxCell as Oe } from "./table/EntityFinderCheckboxCell.js";
import { EntityFinderVersionCell as Ae } from "./table/EntityFinderVersionCell.js";
import { EntityTypeCell as Fe } from "./table/EntityTypeCell.js";
import { FileEntityDirectDownloadCell as Ie } from "./table/FileEntityDirectDownloadCell.js";
import { FileEntityMD5Cell as Ve } from "./table/FileEntityMD5Cell.js";
import { FileEntitySizeCell as we } from "./table/FileEntitySizeCell.js";
import { ModifiedByCell as Le } from "./table/ModifiedByCell.js";
import { ModifiedOnCell as xe } from "./table/ModifiedOnCell.js";
import { VersionColumnHeader as Pe } from "./VersionColumnHeader.js";
function w(i, r) {
return me(i) && "versionLabel" in r && r.versionLabel === fe;
}
var ke = /* @__PURE__ */ ((i) => (i.NAME = "name", i.ENTITY_TYPE = "entityType", i.ID = "id", i.CREATED_ON = "createdOn", i.MODIFIED_ON = "modifiedOn", i.MODIFIED_BY = "modifiedBy", i.ADD_TO_DOWNLOAD_CART = "addToDownloadCart", i.DIRECT_DOWNLOAD = "directDownload", i.SELECTED = "selected", i.VERSION = "version", i.SIZE = "size", i.MD5 = "md5", i.BADGES = "badges", i))(ke || {});
const m = he();
function Me(i) {
const { context: r, setCurrentContainer: u } = i, { row: c, getValue: o } = r, f = o();
return u && ue(c.original.entityType) ? /* @__PURE__ */ n(
"span",
{
role: "link",
className: "EntityFinderTableCellContainerLink",
onClick: (d) => {
d.stopPropagation(), u(c.original.id);
},
children: /* @__PURE__ */ n(j, { title: f, children: /* @__PURE__ */ n("span", { className: "nameColumnCell", children: f }) })
}
) : /* @__PURE__ */ n(j, { title: f, children: /* @__PURE__ */ n("span", { className: "nameColumnCell", children: f }) });
}
function _e(i) {
const { isVisible: r, disabled: u, checked: c, onSelectAll: o } = i;
return r ? /* @__PURE__ */ n(
ge,
{
inputProps: { "aria-label": "Select All" },
checked: c,
disabled: u,
onChange: () => {
o();
}
}
) : null;
}
function Be(i) {
const {
setCurrentContainer: r,
isSelectAllVisible: u,
isSelectAllDisabled: c,
isSelectAllChecked: o,
onSelectAll: f,
versionSelection: d,
toggleSelection: v,
setInitialVersion: y,
sortableColumns: s = []
} = i;
return [
m.display({
id: "selected",
minSize: 50,
maxSize: 50,
size: 50,
header: () => /* @__PURE__ */ n(
_e,
{
isVisible: u,
disabled: c,
checked: o,
onSelectAll: f
}
),
cell: Oe
}),
m.accessor("entityType", {
minSize: 45,
maxSize: 45,
size: 45,
header: () => null,
enableResizing: !1,
cell: Fe,
meta: {
textAlign: "center"
}
}),
m.accessor("name", {
size: 300,
enableSorting: s.includes(
"name"
/* NAME */
),
// sortable: sort != null,
// resizable: true,
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Name" }),
cell: (t) => /* @__PURE__ */ n(
Me,
{
context: t,
setCurrentContainer: r
}
),
enableColumnFilter: !1
}),
m.display({
id: "badges",
minSize: 75,
maxSize: 75,
size: 75,
header: () => null,
cell: De
}),
m.accessor("id", {
size: 130,
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "ID" }),
minSize: 130,
enableColumnFilter: !1,
enableSorting: s.includes(
"id"
/* ID */
)
}),
m.display({
id: "version",
minSize: 150,
size: 200,
header: () => /* @__PURE__ */ n(Pe, { versionSelection: d }),
cell: (t) => /* @__PURE__ */ n(
Ae,
{
versionSelection: d,
toggleSelection: v,
setInitialVersion: y,
context: t
}
)
}),
m.accessor("createdOn", {
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Created On" }),
size: 220,
minSize: 170,
cell: ve,
enableColumnFilter: !1,
enableSorting: s.includes(
"createdOn"
/* CREATED_ON */
)
}),
m.accessor("modifiedOn", {
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Modified On" }),
size: 220,
minSize: 170,
enableColumnFilter: !1,
cell: xe,
enableSorting: s.includes(
"modifiedOn"
/* MODIFIED_ON */
)
}),
m.accessor("modifiedBy", {
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Modified By" }),
size: 250,
enableResizing: !0,
cell: Le,
enableColumnFilter: !1,
enableSorting: s.includes(
"modifiedBy"
/* MODIFIED_BY */
)
}),
m.display({
id: "size",
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Size" }),
size: 120,
minSize: 85,
enableSorting: !1,
enableResizing: !0,
cell: we
}),
m.display({
id: "md5",
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "MD5" }),
size: 200,
enableSorting: !1,
enableResizing: !0,
cell: Ve
}),
m.display({
id: "addToDownloadCart",
header: () => null,
size: 45,
minSize: 45,
enableSorting: !1,
enableResizing: !1,
cell: Re
}),
m.display({
id: "directDownload",
header: (t) => /* @__PURE__ */ n(h, { ...t, title: "Actions" }),
size: 75,
minSize: 75,
enableSorting: !1,
enableResizing: !1,
cell: Ie
})
];
}
const Qe = (i) => {
const { visibleTypes: r, selectableTypes: u, selected: c, entity: o } = i;
return r.includes(S(o)) ? u.includes(S(o)) ? c.has(o.id) ? "selected" : "default" : "disabled" : "hidden";
}, He = [
"directDownload"
/* DIRECT_DOWNLOAD */
];
function bi(i) {
const {
entities: r,
isLoading: u,
hasNextPage: c,
fetchNextPage: o,
isFetchingNextPage: f,
versionSelection: d,
selectColumnType: v,
selected: y,
visibleTypes: s,
selectableTypes: t,
toggleSelection: C,
setInitialVersion: L,
enableSorting: W,
enableMultiSort: Y,
sortableColumns: x,
sorting: $,
onSortingChange: G,
noResultsPlaceholder: Z,
enableSelectAll: J,
selectAllIsChecked: E = !1,
getChildrenInfiniteRequestObject: X,
totalEntities: T,
setCurrentContainer: P,
hiddenColumns: k = He
} = i, D = pe(), { accessToken: M, keyFactory: O } = de(), ee = v !== "none", [_, A] = K(!1), [ie, z] = K(!1), te = () => {
D.cancelQueries({
queryKey: O.getEntityChildrenQueryKey(
X,
!0
)
}), z(!1), A(!1);
};
U(() => {
async function l() {
_ && (c && o ? (z(!0), f || o()) : (C(
E ? r.filter((e) => y.has(e.id)).map((e) => y.get(e.id)) : await Promise.all(
r.filter((e) => {
const a = S(e);
return !y.has(e.id) && t.includes(a) && s.includes(a);
}).map(async (e) => {
let a;
const g = S(e);
if (d === R.REQUIRED && q(g) && (Object.prototype.hasOwnProperty.call(
e,
"versionNumber"
) && !w(
g,
e
) && (a = e.versionNumber), !a)) {
z(!0);
const b = 0, p = 1;
a = (await D.fetchQuery({
queryKey: O.getPaginatedEntityVersionsQueryKey(
e.id,
p,
b
),
queryFn: () => ce(
e.id,
M,
b,
p
)
})).results[0]?.versionNumber;
}
return {
targetId: e.id,
targetVersionNumber: a
};
})
)
), A(!1), z(!1)));
}
l();
}, [
M,
r,
o,
c,
d,
D,
f,
E,
t,
y,
_,
C,
s,
O
]);
const le = V(
() => r.reduce((l, e) => {
const a = Qe({
visibleTypes: s,
selectableTypes: t,
selected: y,
entity: e
});
if (a !== "hidden") {
const g = S(e), b = y.get(
e.id
)?.targetVersionNumber;
let p;
"versionNumber" in e && (b != null ? p = b : d === R.REQUIRED && (w(g, e) || (p = e.versionNumber))), l.push({
...e,
entityId: e.id,
versionNumber: p,
entityType: g,
isSelected: a === "selected",
isDisabled: a === "disabled",
isVersionableEntity: q(g),
currentSelectedVersion: b
});
}
return l;
}, []),
[r, t, y, d, s]
), B = J, Q = !(c || r.filter(
(l) => t.includes(S(l)) && s.includes(S(l))
).length > 0), ne = V(
() => Be({
setCurrentContainer: P,
isSelectAllVisible: B,
isSelectAllDisabled: Q,
isSelectAllChecked: E,
onSelectAll: () => {
A(!0);
},
versionSelection: d,
toggleSelection: C,
setInitialVersion: L,
sortableColumns: x
}),
[
Q,
B,
E,
P,
L,
x,
C,
d
]
), re = V(() => k.reduce(
(l, e) => (l[e] = !1, l),
{}
), [k]), H = ye({
data: le,
columns: ne,
getCoreRowModel: be(),
columnResizeMode: "onChange",
manualSorting: !0,
enableSorting: W,
enableMultiSort: Y,
onSortingChange: G,
state: {
sorting: $,
columnVisibility: {
selected: ee,
version: d !== R.DISALLOWED,
size: s.includes(N.file),
md5: s.includes(N.file),
addToDownloadCart: s.includes(
N.file
),
directDownload: s.includes(
N.file
),
...re
}
}
}), F = Ce(null), oe = Se({
count: T ?? H.getRowModel().rows.length,
estimateSize: () => 40,
// estimate row height for accurate scrollbar dragging
getScrollElement: () => F.current,
// measure dynamic row height, except in firefox because it measures table border height incorrectly
measureElement: typeof window < "u" && navigator.userAgent.indexOf("Firefox") === -1 ? (l) => l?.getBoundingClientRect().height : void 0,
overscan: 5
});
function se(l) {
const { id: e, isDisabled: a, isVersionableEntity: g, entityType: b } = l;
let { currentSelectedVersion: p } = l;
a || (g && d === R.REQUIRED && p == null && Object.prototype.hasOwnProperty.call(l, "versionNumber") && (w(b, l) || (p = l.versionNumber)), C({
targetId: e,
targetVersionNumber: p
}));
}
const I = Ee(
(l) => {
if (l) {
const { scrollHeight: e, scrollTop: a, clientHeight: g } = l;
e - a - g < 500 && !f && c && o && o();
}
},
[o, f, c]
);
return U(() => {
I(F.current);
}, [r, I]), /* @__PURE__ */ ae("div", { className: "EntityFinderDetailsView", children: [
/* @__PURE__ */ n(
Te,
{
show: ie,
currentProgress: r.length,
totalProgress: T,
hintText: T ? `${r.length.toLocaleString()} of ${T?.toLocaleString()}` : `Fetching ${r.length.toLocaleString()}`,
headlineText: "Fetching selected items",
onCancel: te
}
),
!u && r.length > 0 && /* @__PURE__ */ n(
Ne,
{
styledTableContainerProps: {
className: "DetailsViewTable",
ref: F,
height: "100%"
},
onTableContainerScroll: (l) => I(l),
table: H,
rowVirtualizer: oe,
slotProps: {
Tr: (l) => {
const { tableRow: e } = l;
return {
className: "EntityFinderDetailsViewRow",
"aria-selected": e?.original.isSelected,
"aria-disabled": e?.original.isDisabled,
onClick: () => {
e && se(e.original);
}
};
}
}
}
),
u && /* @__PURE__ */ n("div", { className: "EntityFinderDetailsViewPlaceholder", children: /* @__PURE__ */ n(ze, { size: 30 }) }),
!u && r.length === 0 && /* @__PURE__ */ n("div", { className: "EntityFinderDetailsViewPlaceholder", children: Z || /* @__PURE__ */ n("div", { children: "Empty" }) })
] });
}
export {
bi as DetailsView,
ke as DetailsViewColumn
};
//# sourceMappingURL=DetailsView.js.map