synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
531 lines (530 loc) • 18.1 kB
JavaScript
import { jsxs as p, Fragment as F, jsx as l } from "react/jsx-runtime";
import { convertToConcreteEntityType as W } from "../../utils/functions/EntityTypeUtils.js";
import { InfoTwoTone as O } from "@mui/icons-material";
import { Box as u, Checkbox as R, TextField as I, FormControl as T, Select as S, MenuItem as y, Tooltip as G, Link as H } from "@mui/material";
import b from "@mui/material/FormHelperText";
import { VIEW_CONCRETE_TYPE_VALUES as J } from "@sage-bionetworks/synapse-types";
import { useSetAtom as U, useAtomValue as w } from "jotai";
import { selectAtom as Y } from "jotai/utils";
import { isEqual as k, isArray as N, isEmpty as B } from "lodash-es";
import { useMemo as x } from "react";
import q from "./ColumnModelFormFields/DefaultValueField.js";
import { FieldWithRecommendedMinimum as P } from "./ColumnModelFormFields/FieldWithRecommendedMinimum.js";
import Q from "./ColumnModelFormFields/MultiValueField.js";
import { getAllowedColumnTypes as $, configureFacetsForType as K, getColumnTypeFriendlyName as L, canHaveSize as E, getMaxSizeForType as X, canHaveMaxListLength as Z, canHaveDefault as ee, canHaveRestrictedValues as le, getFacetTypeFriendlyName as oe } from "./TableColumnSchemaEditorUtils.js";
import { HIERARCHY_VERTICAL_LINE_COMPONENT as j } from "./TableColumnSchemaForm.js";
import { tableColumnSchemaFormDataAtom as A } from "./TableColumnSchemaFormReducer.js";
const ne = {
height: "28px",
fontSize: "12px"
}, te = {
height: "38px",
fontSize: "14px"
};
function re(i, t) {
return i == null ? "" : N(i) ? i.map(String).join(", ") : i;
}
function ae(i) {
if (!i || !i.property && !i.direction)
return "";
const t = i.property || "FREQUENCY", r = i.direction || "DESC";
return `${t}_${r}`;
}
function ie(i) {
if (!i)
return;
const [t, r] = i.split("_");
return { property: t, direction: r };
}
const f = !0;
function Ve(i) {
const {
columnModelIndex: t,
jsonSubColumnIndex: r,
entityType: _,
isDefaultColumn: m,
disabled: s = !1,
validationErrors: C = null,
defaultAnnotationModel: v,
originalColumnModel: V
} = i, a = r != null, d = U(A), g = J.includes(
W(_)
), D = x(
() => Y(
A,
(o) => a ? o[t].jsonSubColumns[r] : o[t],
k
),
[t, a, r]
), e = w(D), z = x(
() => $(g, a),
[g, a]
), M = x(
() => K(e.columnType, a),
[e.columnType, a]
), c = x(
() => a ? ne : te,
[a]
), n = x(() => {
if (C && N(C)) {
const o = {};
return C.forEach((h) => {
h.path && (o[h.path[h.path.length - 1]] = h.message);
}), o;
}
return {};
}, [C]);
return /* @__PURE__ */ p(F, { children: [
/* @__PURE__ */ p(
u,
{
sx: {
display: "grid",
gridColumn: "1 / span 11",
gridTemplateColumns: "subgrid"
},
children: [
a && /* @__PURE__ */ l(u, { sx: { gridColumn: "1 / span 1" }, children: j }),
/* @__PURE__ */ l(
u,
{
"data-testid": "ColumnModelForm",
sx: {
display: "flex",
alignItems: "start",
gridColumn: a ? "2 / span 1" : " 1 / span 1",
// Checkbox is offset from top; vertical centering causes issues when validation errors are displayed
mt: a ? "0px" : "5px"
},
children: /* @__PURE__ */ l(
R,
{
checked: e.isSelected,
inputProps: { "aria-label": "Select" },
disabled: s,
onChange: () => {
d({
type: "toggleSelect",
columnModelIndex: t,
jsonSubColumnModelIndex: r
});
}
}
)
}
),
/* @__PURE__ */ l(
u,
{
sx: {
my: m ? "auto" : void 0,
gridColumn: a ? (
/* If this is a JSON Subcolumn, we reduce the width of this grid column to create space to render the visual hierarchical line */
"3 / span 1"
) : (
/* Otherwise, span across both grid columns */
"2 / span 2"
)
},
children: m ? e.name : /* @__PURE__ */ l(
I,
{
value: e.name,
placeholder: a ? "Facet name" : "Column name",
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
name: o.target.value
}
});
},
disabled: s,
fullWidth: !0,
error: !!n.name,
helperText: n.name,
slotProps: {
input: {
disableInjectingGlobalStyles: f,
sx: c,
slotProps: {
input: {
"aria-label": "Name"
}
}
}
}
}
)
}
),
/* @__PURE__ */ l(
u,
{
sx: {
my: m ? "auto" : void 0
},
children: m ? L(e.columnType) : /* @__PURE__ */ p(T, { fullWidth: !0, children: [
/* @__PURE__ */ l(
S,
{
label: "Column Type",
value: e.columnType,
onChange: (o) => {
d({
type: "changeColumnModelType",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
newColumnType: o.target.value
});
},
slotProps: {
input: {
"aria-label": "Column Type"
}
},
sx: c,
disabled: s,
error: !!n.columnType,
children: z.map((o) => /* @__PURE__ */ l(y, { value: o, children: L(o) }, o))
}
),
n.columnType && /* @__PURE__ */ l(b, { color: "error.main", children: n.columnType })
] })
}
),
/* @__PURE__ */ l(
u,
{
sx: {
my: m ? "auto" : void 0
},
children: m ? e.maximumSize ?? "" : /* @__PURE__ */ l(
P,
{
value: e.maximumSize ?? "",
originalValue: V?.maximumSize,
recommendedValue: v?.maximumSize,
columnType: e.columnType,
disabled: s || !E(e.columnType),
InputProps: {
disableInjectingGlobalStyles: f,
slotProps: {
input: {
"aria-label": "Maximum Size",
min: 1,
max: E(e.columnType) ? X(e.columnType) : void 0
}
},
sx: c
},
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
maximumSize: o.target.value
}
});
},
fullWidth: !0,
error: !!n.maximumSize,
helperText: n.maximumSize
}
)
}
),
/* @__PURE__ */ l(
u,
{
sx: {
my: m ? "auto" : void 0
},
children: m ? e.maximumListLength ?? "" : /* @__PURE__ */ l(
P,
{
value: e.maximumListLength ?? "",
originalValue: V?.maximumListLength,
recommendedValue: v?.maximumListLength,
columnType: e.columnType,
disabled: s || !Z(e.columnType),
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
maximumListLength: o.target.value
}
});
},
InputProps: {
disableInjectingGlobalStyles: f,
slotProps: {
input: {
"aria-label": "Maximum List Length"
}
},
sx: c
},
fullWidth: !0,
error: !!n.maximumListLength,
helperText: n.maximumListLength
}
)
}
),
/* @__PURE__ */ l(
u,
{
sx: {
my: m ? "auto" : void 0
},
children: m ? re(
e?.defaultValue,
e.columnType
) : /* @__PURE__ */ l(
q,
{
TextFieldProps: {
InputProps: {
disableInjectingGlobalStyles: f,
slotProps: {
input: {
"aria-label": "Default Value"
}
},
sx: c
},
fullWidth: !0,
error: !!n.defaultValue,
helperText: n.defaultValue
},
SelectProps: {
label: "Default Value",
sx: c,
slotProps: {
input: {
"aria-label": "Default Value"
}
},
error: !!n.defaultValue
},
selectFormHelperText: n.defaultValue,
columnModel: e,
value: e?.defaultValue || null,
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
defaultValue: o || void 0
}
});
},
disabled: s || !ee(e.columnType, g, a)
}
)
}
),
/* @__PURE__ */ l(u, { children: /* @__PURE__ */ l(
Q,
{
value: e?.enumValues,
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
enumValues: o == null || B(o) ? void 0 : o
}
});
},
columnType: e.columnType,
TextFieldProps: {
fullWidth: !0,
disabled: s || !le(
e.columnType,
a
),
InputProps: {
disableInjectingGlobalStyles: f,
// Is readOnly because edits are made with the JSONArrayEditorModal
readOnly: !0,
sx: c,
slotProps: {
input: {
"aria-label": "Restrict Values"
}
}
},
error: !!n.enumValues,
helperText: n.enumValues
}
}
) }),
/* @__PURE__ */ l(u, { children: /* @__PURE__ */ p(T, { fullWidth: !0, children: [
/* @__PURE__ */ l(
S,
{
label: "Facet Type",
value: e.facetType || "",
disabled: s || M === null,
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
facetType: o.target.value
}
});
},
sx: c,
slotProps: {
input: {
"aria-label": "Facet Type"
}
},
error: !!n.facetType,
children: (M ?? []).map((o, h) => /* @__PURE__ */ l(y, { value: o, children: o === void 0 ? "" : oe(o) }, h))
}
),
n.facetType && /* @__PURE__ */ l(b, { color: "error.main", children: n.facetType })
] }) }),
/* @__PURE__ */ l(u, { children: /* @__PURE__ */ p(T, { fullWidth: !0, children: [
/* @__PURE__ */ p(
S,
{
label: "Sort Facet Values",
value: ae(
"facetSortConfig" in e ? e.facetSortConfig : void 0
),
disabled: s || e.facetType !== "enumeration",
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
facetSortConfig: ie(
o.target.value
)
}
});
},
sx: c,
slotProps: {
input: {
"aria-label": "Sort Facet Values"
}
},
error: !!n.facetSortConfig,
children: [
/* @__PURE__ */ l(y, { value: "FREQUENCY_DESC", children: "Frequency Descending" }),
/* @__PURE__ */ l(y, { value: "FREQUENCY_ASC", children: "Frequency Ascending" }),
/* @__PURE__ */ l(y, { value: "VALUE_DESC", children: "Value Descending" }),
/* @__PURE__ */ l(y, { value: "VALUE_ASC", children: "Value Ascending" })
]
}
),
n.facetSortConfig && /* @__PURE__ */ l(b, { color: "error.main", children: n.facetSortConfig })
] }) })
]
}
),
a && /* @__PURE__ */ p(
u,
{
sx: {
display: "grid",
gridColumn: "1 / span 11",
gridTemplateColumns: "subgrid"
},
children: [
/* @__PURE__ */ l(
u,
{
sx: {
gridColumn: "1 / span 1"
},
children: j
}
),
/* @__PURE__ */ l(u, {}),
/* @__PURE__ */ l(
u,
{
sx: {
gridColumn: "3 / span 7"
},
children: /* @__PURE__ */ l(
I,
{
placeholder: "JSON Path",
value: e.jsonPath,
onChange: (o) => {
d({
type: "setColumnModelValue",
columnModelIndex: t,
jsonSubColumnModelIndex: r,
value: {
...e,
jsonPath: o.target.value
}
});
},
disabled: s,
fullWidth: !0,
slotProps: {
input: {
disableInjectingGlobalStyles: f,
sx: c,
endAdornment: /* @__PURE__ */ l(
G,
{
title: /* @__PURE__ */ p(F, { children: [
/* @__PURE__ */ l("p", { children: /* @__PURE__ */ l(
H,
{
href: "https://dev.mysql.com/doc/refman/8.0/en/json.html#json-path-syntax",
children: "Please use a valid JSON Path selector, following this format."
}
) }),
/* @__PURE__ */ l("p", { children: "This field is for linking the sub-column facet to the corresponding location in the JSON data, so that it can be used as facet filter. The correct selector will point to the key referenced in the sub-column JSON Path." })
] }),
children: /* @__PURE__ */ l(O, { sx: { color: "grey.700" } })
}
),
slotProps: {
input: { "aria-label": "JSON Path" }
}
}
},
error: !!n.jsonPath,
helperText: n.jsonPath
}
)
}
)
]
}
)
] });
}
export {
Ve as default
};
//# sourceMappingURL=ColumnModelForm.js.map