synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
369 lines (368 loc) • 10.2 kB
JavaScript
import { jsx as o, jsxs as T, Fragment as D } from "react/jsx-runtime";
import K from "../../assets/icons/AddToList.js";
import { useGetDefaultColumnModels as Z, useGetAnnotationColumnModels as oo } from "../../synapse-queries/table/useColumnModel.js";
import { convertToConcreteEntityType as eo, entityTypeToFriendlyName as no } from "../../utils/functions/EntityTypeUtils.js";
import { AddCircleTwoTone as L } from "@mui/icons-material";
import { Box as s, Button as F, styled as to } from "@mui/material";
import { VIEW_CONCRETE_TYPE_VALUES as lo, ColumnTypeEnum as B } from "@sage-bionetworks/synapse-types";
import { Provider as ro, useAtomValue as U, atom as ao, useSetAtom as W } from "jotai";
import { useAtomCallback as so, selectAtom as io } from "jotai/utils";
import { noop as mo, omit as uo, groupBy as Y, times as co, isEqual as po } from "lodash-es";
import Co from "pluralize";
import { forwardRef as J, useMemo as N, useState as fo, useCallback as A, useEffect as ho, useImperativeHandle as To } from "react";
import { SynapseSpinner as H } from "../LoadingScreen/LoadingScreen.js";
import { displayToast as j } from "../ToastMessage/ToastMessage.js";
import P from "./ColumnModelForm.js";
import go from "./ImportTableColumnsButton.js";
import { transformColumnModelsToFormData as G, getAllowedColumnTypes as bo, findMatchingColumnModel as $ } from "./TableColumnSchemaEditorUtils.js";
import { TableColumnSchemaFormActions as yo } from "./TableColumnSchemaFormActions.js";
import { tableColumnSchemaFormDataAtom as M } from "./TableColumnSchemaFormReducer.js";
import { validateColumnModelFormData as Ao } from "./Validators/ColumnModelValidator.js";
const Mo = "18px 18px 1.75fr 1.75fr 0.75fr 1fr 1.25fr 1.25fr 1fr 1.25fr", Eo = 6, zo = /* @__PURE__ */ o(
s,
{
sx: {
width: "1px",
height: `calc(100% + 2 * ${Eo}px)`,
backgroundColor: "grey.400",
marginLeft: "8px"
}
}
), So = /* @__PURE__ */ o(
s,
{
sx: (m) => ({
width: "50%",
height: "60%",
borderLeft: `1px solid ${m.palette.grey[400]}`,
borderBottom: `1px solid ${m.palette.grey[400]}`,
marginLeft: "8px",
marginBottom: "auto",
marginRight: "0",
borderBottomLeftRadius: "5px"
})
}
), a = to(s, {
label: "ColumnHeader"
})({
fontWeight: 700
}), xo = "Add All Annotations";
function Io(m, t) {
const {
initialData: u,
entityType: d,
viewScope: i,
onSubmit: g = mo,
isSubmitting: r = !1,
originalColumnModels: _
} = m, l = U(
N(() => ao((e) => e(M).length), [])
), p = W(M), [b, E] = fo(
null
), c = so(
A((e) => e(M), [])
), C = eo(d), n = lo.includes(
C
), R = n, w = n, { data: f, isLoading: S } = Z(
i?.viewEntityType,
i?.viewTypeMask,
{
enabled: w,
staleTime: 1 / 0
// The default column models will never change
}
), O = oo(
{
viewScope: i,
includeDerivedAnnotations: !0,
concreteType: "org.sagebionetworks.repo.model.table.ViewColumnModelRequest"
},
{
enabled: R
}
), {
data: x,
isLoading: V
} = O;
ho(() => {
u && !S && p({
type: "setValue",
value: G(
u,
f ?? []
)
});
}, [S]);
const I = A(() => {
const e = Ao(c());
return e.success ? E(null) : E(e.error), e;
}, [c]);
To(
t,
() => ({
submit() {
const e = I();
e.success && g(e.data);
},
getEditedColumnModels() {
const e = I();
if (!e.success)
throw new Error("Column models were not valid");
return e.data;
},
validate() {
return I().success;
}
}),
[g, I]
);
const y = A(
(e) => {
const k = c();
let h = e.filter(
(v) => bo(n, !1).includes(
v.columnType
) ? !k.find((Q) => Q.name === v.name) : !1
);
h = h.map((v) => uo(v, ["id"])), h.length > 0 ? (p({
type: "setValue",
value: [
...k,
...G(
h,
f
)
]
}), j(
`${h.length} ${Co(
"column",
h.length
)} added to schema.`,
"success"
)) : j(
"No columns added. All columns to add are present in the column schema.",
"info"
);
},
[f, p, n, c]
), q = A(() => {
f && y(f);
}, [f, y]), z = A(() => {
x && y(x);
}, [x, y]), X = N(() => b ? Y(b.errors, (e) => e.path[0]) : {}, [b]);
return /* @__PURE__ */ T(
s,
{
component: "form",
sx: {
py: 2.5
},
children: [
/* @__PURE__ */ o(
yo,
{
disabled: r,
annotationColumnModelsQuery: O
}
),
/* @__PURE__ */ T(
s,
{
sx: {
display: "grid",
gap: "8px",
gridTemplateColumns: Mo,
py: 2.5
},
children: [
/* @__PURE__ */ o(a, {}),
/* @__PURE__ */ o(a, { sx: { gridColumn: "2 / span 2" }, children: "Column Name" }),
/* @__PURE__ */ o(a, { children: "Column Type" }),
/* @__PURE__ */ o(a, { children: "Size" }),
/* @__PURE__ */ o(a, { children: "Max List Length" }),
/* @__PURE__ */ o(a, { children: "Default Value" }),
/* @__PURE__ */ o(a, { children: "Restrict Values" }),
/* @__PURE__ */ o(a, { children: "Facet" }),
/* @__PURE__ */ o(a, { children: "Sort Facet Values" }),
/* @__PURE__ */ o(
s,
{
sx: {
gridColumn: "1 / span 11",
backgroundColor: "grey.300",
height: "2px"
}
}
),
co(l, (e) => /* @__PURE__ */ o(
vo,
{
entityType: d,
columnModelIndex: e,
disabled: r,
columnModelValidationErrors: X[e],
annotationColumnModels: x,
originalColumnModels: _
},
e
))
]
}
),
/* @__PURE__ */ T(
s,
{
sx: {
display: "flex",
gap: 1
},
children: [
/* @__PURE__ */ o(
F,
{
variant: "outlined",
onClick: () => {
p({ type: "appendColumn" });
},
startIcon: /* @__PURE__ */ o(L, {}),
disabled: r,
children: "Add Column"
}
),
w && /* @__PURE__ */ T(
F,
{
variant: "outlined",
startIcon: S ? /* @__PURE__ */ o(H, {}) : /* @__PURE__ */ o(L, {}),
onClick: () => {
q();
},
disabled: S || r,
children: [
"Add Default ",
no(d),
" Columns"
]
}
),
R && /* @__PURE__ */ o(
F,
{
variant: "outlined",
startIcon: V ? /* @__PURE__ */ o(H, {}) : /* @__PURE__ */ o(L, {}),
disabled: V || r,
onClick: () => {
z();
},
children: xo
}
),
/* @__PURE__ */ o(
go,
{
onAddColumns: (e) => {
y(e);
},
disabled: r
}
)
]
}
)
]
}
);
}
function vo(m) {
const {
columnModelIndex: t,
entityType: u,
disabled: d,
columnModelValidationErrors: i = null,
annotationColumnModels: g,
originalColumnModels: r
} = m, _ = W(M), l = U(
N(
() => io(
M,
(C) => C[t],
po
),
[t]
)
), p = r ? $(r, l) : void 0, b = g ? $(g, l) : void 0, E = N(() => {
if (i) {
const C = i.filter((n) => n.path[0] === t && n.path[1] == "jsonSubColumns");
return Y(C, (n) => n.path[2]);
}
return {};
}, [t, i]);
if (!l)
return /* @__PURE__ */ o(D, {});
const c = l.isOriginallyDefaultColumn;
return /* @__PURE__ */ T(D, { children: [
/* @__PURE__ */ o(
P,
{
entityType: u,
columnModelIndex: t,
isDefaultColumn: c,
disabled: d,
validationErrors: i,
defaultAnnotationModel: b,
originalColumnModel: p
}
),
l.columnType === B.JSON && l.jsonSubColumns && l.jsonSubColumns.map((C, n) => /* @__PURE__ */ o(
P,
{
entityType: u,
columnModelIndex: t,
jsonSubColumnIndex: n,
isDefaultColumn: c,
disabled: d,
validationErrors: E[n]
},
n
)),
l.columnType === B.JSON && /* @__PURE__ */ T(D, { children: [
/* @__PURE__ */ o(
s,
{
sx: {
gridColumn: "1 / span 2"
},
children: So
}
),
/* @__PURE__ */ o(
s,
{
sx: {
gridColumn: "3 / span 5"
},
children: /* @__PURE__ */ o(
F,
{
startIcon: /* @__PURE__ */ o(K, {}),
variant: "text",
disabled: d,
onClick: () => _({ type: "appendJsonSubColumn", columnModelIndex: t }),
children: "Add sub-column"
}
)
}
)
] })
] });
}
const Fo = J(Io), Xo = J(function(t, u) {
return /* @__PURE__ */ o(ro, { children: /* @__PURE__ */ o(Fo, { ...t, ref: u }) });
});
export {
xo as ADD_ALL_ANNOTATIONS_BUTTON_TEXT,
So as HIERARCHY_END_COMPONENT,
zo as HIERARCHY_VERTICAL_LINE_COMPONENT,
Xo as default
};
//# sourceMappingURL=TableColumnSchemaForm.js.map