taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
909 lines (908 loc) • 32 kB
JavaScript
import { jsx as t, jsxs as h, Fragment as x } from "react/jsx-runtime";
import { A as ae, z as re, G as ne, H as j, I as oe, J as Re, b5 as w, T as N, cn as G, co as Ie, X as Fe, o as v, aR as Oe, c0 as U, m as E, u as ie, bY as ze, c as $, a6 as He, a7 as T, cp as De, a as se, b$ as V, bN as z, by as le, aw as Ue, B, P as ce, cq as Ve, c6 as We, s as A, cr as qe, F as Be } from "./JBrowsePanel-uJIA-L6s.js";
import { S as Je } from "./SanitizedHTML-BVL8NCSg.js";
import { A as de, a as ue, E as pe } from "./ExpandMore-DnyR9BQr.js";
import { c as _e } from "./_commonjs-dynamic-modules-BpilXLfW.js";
import * as me from "react";
import { useState as y, useEffect as W, Suspense as Ge } from "react";
import { F as Ke } from "./FormControlLabel-CwjOxa71.js";
import { C as Xe } from "./Checkbox-BG4jcGUl.js";
import { j as Ye } from "./jexlStrings-CYmOwnYU.js";
import { a as Ze } from "./ColorPicker-BkeYpg1W.js";
import { D as J } from "./Delete-bchuKNyZ.js";
import { C as H, a as he } from "./CardContent-G_V1s50Q.js";
import { c as Qe, d as fe } from "./index-dFotuATn.js";
import s from "prop-types";
import { L as K } from "./ListItem-shOX3Ebz.js";
import { M as ge } from "./MenuItem-D4Mw907e.js";
function et(e) {
return ae("MuiAccordionDetails", e);
}
re("MuiAccordionDetails", ["root"]);
const tt = (e) => {
const {
classes: a
} = e;
return oe({
root: ["root"]
}, et, a);
}, at = j("div", {
name: "MuiAccordionDetails",
slot: "Root"
})(Re(({
theme: e
}) => ({
padding: e.spacing(1, 2, 2)
}))), _ = /* @__PURE__ */ me.forwardRef(function(a, r) {
const o = ne({
props: a,
name: "MuiAccordionDetails"
}), {
className: n,
...l
} = o, d = o, u = tt(d);
return /* @__PURE__ */ t(at, {
className: Qe(u.root, n),
ref: r,
ownerState: d,
...l
});
});
fe.process.env.NODE_ENV !== "production" && (_.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: s.node,
/**
* Override or extend the styles applied to the component.
*/
classes: s.object,
/**
* @ignore
*/
className: s.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: s.oneOfType([s.arrayOf(s.oneOfType([s.func, s.object, s.bool])), s.func, s.object])
});
function rt(e) {
return ae("MuiCardHeader", e);
}
const D = re("MuiCardHeader", ["root", "avatar", "action", "content", "title", "subheader"]), nt = (e) => {
const {
classes: a
} = e;
return oe({
root: ["root"],
avatar: ["avatar"],
action: ["action"],
content: ["content"],
title: ["title"],
subheader: ["subheader"]
}, rt, a);
}, ot = j("div", {
name: "MuiCardHeader",
slot: "Root",
overridesResolver: (e, a) => [{
[`& .${D.title}`]: a.title
}, {
[`& .${D.subheader}`]: a.subheader
}, a.root]
})({
display: "flex",
alignItems: "center",
padding: 16
}), it = j("div", {
name: "MuiCardHeader",
slot: "Avatar"
})({
display: "flex",
flex: "0 0 auto",
marginRight: 16
}), st = j("div", {
name: "MuiCardHeader",
slot: "Action"
})({
flex: "0 0 auto",
alignSelf: "flex-start",
marginTop: -4,
marginRight: -8,
marginBottom: -4
}), lt = j("div", {
name: "MuiCardHeader",
slot: "Content"
})({
flex: "1 1 auto",
[`.${G.root}:where(& .${D.title})`]: {
display: "block"
},
[`.${G.root}:where(& .${D.subheader})`]: {
display: "block"
}
}), M = /* @__PURE__ */ me.forwardRef(function(a, r) {
const o = ne({
props: a,
name: "MuiCardHeader"
}), {
action: n,
avatar: l,
component: d = "div",
disableTypography: u = !1,
subheader: p,
subheaderTypographyProps: k,
title: S,
titleTypographyProps: L,
slots: R = {},
slotProps: I = {},
...f
} = o, i = {
...o,
component: d,
disableTypography: u
}, c = nt(i), g = {
slots: R,
slotProps: {
title: L,
subheader: k,
...I
}
};
let m = S;
const [b, C] = w("title", {
className: c.title,
elementType: N,
externalForwardedProps: g,
ownerState: i,
additionalProps: {
variant: l ? "body2" : "h5",
component: "span"
}
});
m != null && m.type !== N && !u && (m = /* @__PURE__ */ t(b, {
...C,
children: m
}));
let P = p;
const [Se, we] = w("subheader", {
className: c.subheader,
elementType: N,
externalForwardedProps: g,
ownerState: i,
additionalProps: {
variant: l ? "body2" : "body1",
color: "textSecondary",
component: "span"
}
});
P != null && P.type !== N && !u && (P = /* @__PURE__ */ t(Se, {
...we,
children: P
}));
const [Ne, Ee] = w("root", {
ref: r,
className: c.root,
elementType: ot,
externalForwardedProps: {
...g,
...f,
component: d
},
ownerState: i
}), [ke, Pe] = w("avatar", {
className: c.avatar,
elementType: it,
externalForwardedProps: g,
ownerState: i
}), [Ae, Me] = w("content", {
className: c.content,
elementType: lt,
externalForwardedProps: g,
ownerState: i
}), [je, Le] = w("action", {
className: c.action,
elementType: st,
externalForwardedProps: g,
ownerState: i
});
return /* @__PURE__ */ h(Ne, {
...Ee,
children: [l && /* @__PURE__ */ t(ke, {
...Pe,
children: l
}), /* @__PURE__ */ h(Ae, {
...Me,
children: [m, P]
}), n && /* @__PURE__ */ t(je, {
...Le,
children: n
})]
});
});
fe.process.env.NODE_ENV !== "production" && (M.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The action to display in the card header.
*/
action: s.node,
/**
* The Avatar element to display.
*/
avatar: s.node,
/**
* @ignore
*/
children: s.node,
/**
* Override or extend the styles applied to the component.
*/
classes: s.object,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: s.elementType,
/**
* If `true`, `subheader` and `title` won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping
* the `title` text, and optional `subheader` text
* with the Typography component.
* @default false
*/
disableTypography: s.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: s.shape({
action: s.oneOfType([s.func, s.object]),
avatar: s.oneOfType([s.func, s.object]),
content: s.oneOfType([s.func, s.object]),
root: s.oneOfType([s.func, s.object]),
subheader: s.oneOfType([s.func, s.object]),
title: s.oneOfType([s.func, s.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: s.shape({
action: s.elementType,
avatar: s.elementType,
content: s.elementType,
root: s.elementType,
subheader: s.elementType,
title: s.elementType
}),
/**
* The content of the component.
*/
subheader: s.node,
/**
* These props will be forwarded to the subheader
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.subheader` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
subheaderTypographyProps: s.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: s.oneOfType([s.arrayOf(s.oneOfType([s.func, s.object, s.bool])), s.func, s.object]),
/**
* The content of the component.
*/
title: s.node,
/**
* These props will be forwarded to the title
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.title` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
titleTypographyProps: s.object
});
var O = { exports: {} }, ct = O.exports, X;
function dt() {
return X || (X = 1, function(e, a) {
(function(r, o) {
typeof _e == "function" ? e.exports = o() : r.pluralize = o();
})(ct, function() {
var r = [], o = [], n = {}, l = {}, d = {};
function u(i) {
return typeof i == "string" ? new RegExp("^" + i + "$", "i") : i;
}
function p(i, c) {
return i === c ? c : i === i.toLowerCase() ? c.toLowerCase() : i === i.toUpperCase() ? c.toUpperCase() : i[0] === i[0].toUpperCase() ? c.charAt(0).toUpperCase() + c.substr(1).toLowerCase() : c.toLowerCase();
}
function k(i, c) {
return i.replace(/\$(\d{1,2})/g, function(g, m) {
return c[m] || "";
});
}
function S(i, c) {
return i.replace(c[0], function(g, m) {
var b = k(c[1], arguments);
return p(g === "" ? i[m - 1] : g, b);
});
}
function L(i, c, g) {
if (!i.length || n.hasOwnProperty(i))
return c;
for (var m = g.length; m--; ) {
var b = g[m];
if (b[0].test(c)) return S(c, b);
}
return c;
}
function R(i, c, g) {
return function(m) {
var b = m.toLowerCase();
return c.hasOwnProperty(b) ? p(m, b) : i.hasOwnProperty(b) ? p(m, i[b]) : L(b, m, g);
};
}
function I(i, c, g, m) {
return function(b) {
var C = b.toLowerCase();
return c.hasOwnProperty(C) ? !0 : i.hasOwnProperty(C) ? !1 : L(C, C, g) === C;
};
}
function f(i, c, g) {
var m = c === 1 ? f.singular(i) : f.plural(i);
return (g ? c + " " : "") + m;
}
return f.plural = R(
d,
l,
r
), f.isPlural = I(
d,
l,
r
), f.singular = R(
l,
d,
o
), f.isSingular = I(
l,
d,
o
), f.addPluralRule = function(i, c) {
r.push([u(i), c]);
}, f.addSingularRule = function(i, c) {
o.push([u(i), c]);
}, f.addUncountableRule = function(i) {
if (typeof i == "string") {
n[i.toLowerCase()] = !0;
return;
}
f.addPluralRule(i, "$0"), f.addSingularRule(i, "$0");
}, f.addIrregularRule = function(i, c) {
c = c.toLowerCase(), i = i.toLowerCase(), d[i] = c, l[c] = i;
}, [
// Pronouns.
["I", "we"],
["me", "us"],
["he", "they"],
["she", "they"],
["them", "them"],
["myself", "ourselves"],
["yourself", "yourselves"],
["itself", "themselves"],
["herself", "themselves"],
["himself", "themselves"],
["themself", "themselves"],
["is", "are"],
["was", "were"],
["has", "have"],
["this", "these"],
["that", "those"],
// Words ending in with a consonant and `o`.
["echo", "echoes"],
["dingo", "dingoes"],
["volcano", "volcanoes"],
["tornado", "tornadoes"],
["torpedo", "torpedoes"],
// Ends with `us`.
["genus", "genera"],
["viscus", "viscera"],
// Ends with `ma`.
["stigma", "stigmata"],
["stoma", "stomata"],
["dogma", "dogmata"],
["lemma", "lemmata"],
["schema", "schemata"],
["anathema", "anathemata"],
// Other irregular rules.
["ox", "oxen"],
["axe", "axes"],
["die", "dice"],
["yes", "yeses"],
["foot", "feet"],
["eave", "eaves"],
["goose", "geese"],
["tooth", "teeth"],
["quiz", "quizzes"],
["human", "humans"],
["proof", "proofs"],
["carve", "carves"],
["valve", "valves"],
["looey", "looies"],
["thief", "thieves"],
["groove", "grooves"],
["pickaxe", "pickaxes"],
["passerby", "passersby"]
].forEach(function(i) {
return f.addIrregularRule(i[0], i[1]);
}), [
[/s?$/i, "s"],
[/[^\u0000-\u007F]$/i, "$0"],
[/([^aeiou]ese)$/i, "$1"],
[/(ax|test)is$/i, "$1es"],
[/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
[/(e[mn]u)s?$/i, "$1s"],
[/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
[/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
[/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
[/(seraph|cherub)(?:im)?$/i, "$1im"],
[/(her|at|gr)o$/i, "$1oes"],
[/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
[/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
[/sis$/i, "ses"],
[/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
[/([^aeiouy]|qu)y$/i, "$1ies"],
[/([^ch][ieo][ln])ey$/i, "$1ies"],
[/(x|ch|ss|sh|zz)$/i, "$1es"],
[/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
[/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
[/(pe)(?:rson|ople)$/i, "$1ople"],
[/(child)(?:ren)?$/i, "$1ren"],
[/eaux$/i, "$0"],
[/m[ae]n$/i, "men"],
["thou", "you"]
].forEach(function(i) {
return f.addPluralRule(i[0], i[1]);
}), [
[/s$/i, ""],
[/(ss)$/i, "$1"],
[/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
[/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
[/ies$/i, "y"],
[/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
[/\b(mon|smil)ies$/i, "$1ey"],
[/\b((?:tit)?m|l)ice$/i, "$1ouse"],
[/(seraph|cherub)im$/i, "$1"],
[/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
[/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
[/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
[/(test)(?:is|es)$/i, "$1is"],
[/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
[/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
[/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
[/(alumn|alg|vertebr)ae$/i, "$1a"],
[/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
[/(matr|append)ices$/i, "$1ix"],
[/(pe)(rson|ople)$/i, "$1rson"],
[/(child)ren$/i, "$1"],
[/(eau)x?$/i, "$1"],
[/men$/i, "man"]
].forEach(function(i) {
return f.addSingularRule(i[0], i[1]);
}), [
// Singular words with no plurals.
"adulthood",
"advice",
"agenda",
"aid",
"aircraft",
"alcohol",
"ammo",
"analytics",
"anime",
"athletics",
"audio",
"bison",
"blood",
"bream",
"buffalo",
"butter",
"carp",
"cash",
"chassis",
"chess",
"clothing",
"cod",
"commerce",
"cooperation",
"corps",
"debris",
"diabetes",
"digestion",
"elk",
"energy",
"equipment",
"excretion",
"expertise",
"firmware",
"flounder",
"fun",
"gallows",
"garbage",
"graffiti",
"hardware",
"headquarters",
"health",
"herpes",
"highjinks",
"homework",
"housework",
"information",
"jeans",
"justice",
"kudos",
"labour",
"literature",
"machinery",
"mackerel",
"mail",
"media",
"mews",
"moose",
"music",
"mud",
"manga",
"news",
"only",
"personnel",
"pike",
"plankton",
"pliers",
"police",
"pollution",
"premises",
"rain",
"research",
"rice",
"salmon",
"scissors",
"series",
"sewage",
"shambles",
"shrimp",
"software",
"species",
"staff",
"swine",
"tennis",
"traffic",
"transportation",
"trout",
"tuna",
"wealth",
"welfare",
"whiting",
"wildebeest",
"wildlife",
"you",
/pok[eé]mon$/i,
// Regexes.
/[^aeiou]ese$/i,
// "chinese", "japanese"
/deer$/i,
// "deer", "reindeer"
/fish$/i,
// "fish", "blowfish", "angelfish"
/measles$/i,
/o[iu]s$/i,
// "carnivorous"
/pox$/i,
// "chickpox", "smallpox"
/sheep$/i
].forEach(f.addUncountableRule), f;
});
}(O)), O.exports;
}
var Y = dt(), F = Ie();
const ut = Fe(/* @__PURE__ */ t("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
}), "RadioButtonUnchecked"), pt = v(function({ slot: e }) {
return h(Oe, { children: [t(Ke, { label: e.name, control: t(Xe, { checked: e.value, onChange: (a) => {
e.set(a.target.checked);
} }) }), t(U, { children: e.description })] });
}), Z = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace', mt = E()((e) => ({
callbackEditor: {
marginTop: "16px",
borderBottom: `1px solid ${e.palette.divider}`,
width: "100%",
fontFamily: Z
},
textAreaFont: {
fontFamily: Z
},
callbackContainer: {
width: "100%",
overflowX: "auto"
},
error: {
color: "red",
fontSize: "0.8em"
}
})), ht = v(function({ slot: e }) {
const { classes: a } = mt(), [r, o] = y(e.value), [n, l] = y(), d = ie.useDebounce(r, 400);
return W(() => {
var u;
try {
const p = d.startsWith("jexl:") ? d : `jexl:${d}`;
if (p === "jexl:")
throw new Error("Empty jexl expression is not valid");
Ye.stringToJexlExpression(p, (u = ze(e).pluginManager) === null || u === void 0 ? void 0 : u.jexl), e.set(p), l(void 0);
} catch (p) {
console.error({ e: p }), l(p);
}
}, [d, e]), h(x, { children: [n ? t("p", { className: a.error, children: `${n}` }) : null, h("div", { className: a.callbackContainer, children: [t($, { multiline: !0, className: a.callbackEditor, value: r.startsWith("jexl:") ? r.split("jexl:")[1] : r, onChange: (u) => {
o(u.target.value);
}, style: { background: n ? "#fdd" : void 0 }, slotProps: {
input: {
classes: {
input: a.textAreaFont
}
}
} }), t("p", { children: e.description }), t(He, { title: h("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", t("br", {}), " Names of available context items: ", e.contextVariable] }), arrow: !0, children: t(T, { color: "primary", onClick: () => {
const u = window.open("https://github.com/TomFrost/Jexl", "_blank", "noopener,noreferrer");
u && (u.opener = null);
}, children: t(De, {}) }) })] })] });
}), ft = (e) => {
const { value: a = "#000", label: r = "", TextFieldProps: o = {}, onChange: n } = e, [l, d] = y(!1);
return h("div", { style: { display: "flex" }, children: [t($, { value: a, label: r, onClick: () => {
d(!l);
}, onChange: (u) => {
n(u.target.value);
}, ...o }), t("div", { style: { marginTop: 10 }, children: t(Ge, { fallback: null, children: t(Ze, { color: a, onChange: (u) => {
n(u);
} }) }) })] });
}, gt = v(function(e) {
const { slot: a } = e;
return t(ft, { label: a.name, value: a.value, onChange: (r) => {
a.set(r);
}, TextFieldProps: {
helperText: a.description,
fullWidth: !0
} });
});
function q(e) {
const { helperText: a } = e;
return t($, { ...e, helperText: t(se.SanitizedHTML, { html: a || "" }), fullWidth: !0, slotProps: {
formHelperText: {
component: "div"
}
} });
}
const vt = "12px", Q = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace', bt = E()((e) => ({
error: {
color: "red",
fontSize: "0.8em"
},
callbackEditor: {
fontFamily: Q,
fontSize: vt,
background: e.palette.background.default,
width: 800,
marginTop: "16px",
border: "1px solid rgba(0,0,0,0.42)"
},
callbackContainer: {
width: "100%",
overflowX: "auto"
},
textAreaFont: {
fontFamily: Q
}
})), ee = v(function({ slot: a }) {
const { classes: r } = bt(), [o, n] = y(JSON.stringify(a.value, null, 2)), [l, d] = y();
return W(() => {
try {
d(void 0), a.set(JSON.parse(o));
} catch (u) {
console.error({ e: u }), d(u);
}
}, [o, a]), h(x, { children: [l ? t("p", { className: r.error, children: `${l}` }) : null, h("div", { className: r.callbackContainer, children: [t(V, { shrink: !0, htmlFor: "json-editor", children: a.name }), t($, { id: "json-editor", className: r.callbackEditor, value: o, helperText: a.description, multiline: !0, onChange: (u) => {
n(u.target.value);
}, style: { background: l ? "#fdd" : void 0 }, slotProps: {
input: {
classes: {
input: r.textAreaFont
}
}
} })] })] });
}), ve = v(function({ slot: e }) {
const [a, r] = y(e.value);
return W(() => {
var o;
const n = Number.parseFloat(a);
Number.isNaN(n) ? (o = e.reset) === null || o === void 0 || o.call(e) : e.set(n);
}, [e, a]), t(q, { label: e.name, helperText: e.description, value: a, type: "number", onChange: (o) => {
r(o.target.value);
} });
}), yt = E()((e) => ({
card: {
marginTop: e.spacing(1)
}
})), $t = v(function({ slot: e }) {
const { classes: a } = yt(), [r, o] = y("");
return h(x, { children: [t(V, { children: e.name }), [...e.value].map(([n, l]) => h(H, { raised: !0, className: a.card, children: [t(M, { title: n, action: t(T, { onClick: () => {
e.remove(n);
}, children: t(J, {}) }) }), t(he, { children: t(ve, { slot: {
value: l,
set: (d) => {
e.add(n, d);
}
} }) })] }, n)), t(H, { raised: !0, className: a.card, children: t(M, { disableTypography: !0, title: t($, { fullWidth: !0, value: r, placeholder: "add new", onChange: (n) => {
o(n.target.value);
}, slotProps: {
input: {
endAdornment: t(z, { position: "end", children: t(T, { disabled: r === "", onClick: () => {
e.add(r, 0), o("");
}, children: t(le, {}) }) })
}
} }) }) }), t(U, { children: e.description })] });
}), be = v(function({ slot: e }) {
const [a, r] = y(""), [o, n] = y(!1);
return h(x, { children: [e.name ? t(V, { children: e.name }) : null, h(Ue, { disablePadding: !0, children: [e.value.map((l, d) => t(K, { disableGutters: !0, children: t($, { value: l, onChange: (u) => {
e.setAtIndex(d, u.target.value);
}, slotProps: {
input: {
endAdornment: t(z, { position: "end", children: t(T, { onClick: () => {
e.removeAtIndex(d);
}, children: t(J, {}) }) })
}
} }) }, `${JSON.stringify(l)}-${d}`)), o ? t(K, { disableGutters: !0, children: t($, { value: a, placeholder: "add new", onChange: (l) => {
r(l.target.value);
}, slotProps: {
input: {
endAdornment: t(z, { position: "end", children: h(x, { children: [t(B, { color: "primary", variant: "contained", style: { margin: 2 }, "data-testid": `stringArrayAdd-${e.name}`, onClick: () => {
n(!1), e.add(a), r("");
}, children: "OK" }), t(B, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => {
n(!1), r("");
}, children: "Cancel" })] }) })
}
} }) }) : null, t(B, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: o, onClick: () => {
n(!0);
}, children: "Add item" })] }), t(U, { children: e.description })] });
}), Ct = E()((e) => ({
card: {
marginTop: e.spacing(1)
}
})), xt = v(function({ slot: e }) {
const { classes: a } = Ct(), [r, o] = y("");
return h(x, { children: [t(V, { children: e.name }), [...e.value].map(([n, l]) => h(H, { raised: !0, className: a.card, children: [t(M, { title: n, action: t(T, { onClick: () => {
e.remove(n);
}, children: t(J, {}) }) }), t(he, { children: t(be, { slot: {
name: e.name,
value: l,
description: `Values associated with entry ${n}`,
setAtIndex: (d, u) => {
e.setAtKeyIndex(n, d, u);
},
removeAtIndex: (d) => {
e.removeAtKeyIndex(n, d);
},
add: (d) => {
e.addToKey(n, d);
}
} }) })] }, n)), t(H, { raised: !0, className: a.card, children: t(M, { disableTypography: !0, title: t($, { fullWidth: !0, value: r, placeholder: "add new", onChange: (n) => {
o(n.target.value);
}, slotProps: {
input: {
endAdornment: t(z, { position: "end", children: t(T, { disabled: r === "", onClick: () => {
e.add(r, []), o("");
}, children: t(le, {}) }) })
}
} }) }) }), t(U, { children: e.description })] });
}), ye = E()((e) => ({
paper: {
display: "flex",
marginBottom: e.spacing(2),
position: "relative"
},
paperContent: {
width: "100%"
},
slotModeSwitch: {
width: 24,
background: e.palette.secondary.light,
display: "flex",
justifyContent: "center",
alignItems: "center"
}
})), $e = v(function({ slot: e }) {
return t(q, { label: e.name, helperText: e.description, value: e.value, onChange: (a) => {
e.set(a.target.value);
} });
}), Tt = v(function({ slot: e }) {
return t($, { label: e.name, helperText: e.description, multiline: !0, value: e.value, onChange: (a) => {
e.set(a.target.value);
} });
}), St = () => t(We, { children: t("path", { d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" }) }), wt = v(function({ slot: e }) {
const [a, r] = y(e.value);
return W(() => {
const o = Number.parseInt(a, 10);
Number.isNaN(o) || e.set(o);
}, [e, a]), t(q, { label: e.name, helperText: e.description, value: a, type: "number", onChange: (o) => {
r(o.target.value);
} });
}), Nt = v(function({ slot: e, slotSchema: a }) {
const r = Ve(F.getSubType(a)), o = F.getUnionSubTypes(F.getUnionSubTypes(F.getSubType(r.properties.value))[1]).map((n) => n.value);
return t(q, { value: e.value, label: e.name, select: !0, helperText: e.description, onChange: (n) => {
e.set(n.target.value);
}, children: o.map((n) => t(ge, { value: n, children: n }, n)) });
}), Et = v(function({ slot: e }) {
var a;
return t(se.FileSelector, { location: e.value, setLocation: (r) => {
e.set(r);
}, name: e.name, description: e.description, rootModel: (a = ie.getEnv(e).pluginManager) === null || a === void 0 ? void 0 : a.rootModel });
}), te = {
string: $e,
text: Tt,
fileLocation: Et,
stringArray: be,
stringArrayMap: xt,
numberMap: $t,
number: ve,
integer: wt,
color: gt,
stringEnum: Nt,
boolean: pt,
frozen: ee,
configRelationships: ee
}, kt = v(function({ slot: e, slotSchema: a }) {
const { classes: r } = ye(), { type: o } = e;
let n = e.isCallback ? ht : te[o];
return n || (console.warn(`no slot editor defined for ${o}, editing as string`), n = $e), o in te || console.warn(`SlotEditor needs to implement ${o}`), h(ce, { className: r.paper, children: [t("div", { className: r.paperContent, children: t(n, { slot: e, slotSchema: a }) }), t("div", { className: r.slotModeSwitch, children: e.contextVariable.length ? t(T, { onClick: () => e.isCallback ? e.convertToValue() : e.convertToCallback(), title: `convert to ${e.isCallback ? "regular value" : "callback"}`, children: e.isCallback ? t(St, {}) : t(ut, {}) }) : null })] });
}), Pt = v(function({ typeNameChoices: e, slot: a, slotName: r, onChange: o }) {
const { classes: n } = ye();
return t(ce, { className: n.paper, children: t("div", { className: n.paperContent, children: t($, { value: a.type, label: "Type", select: !0, helperText: `Type of ${r} to use`, fullWidth: !0, onChange: o, children: e.map((l) => t(ge, { value: l, children: l }, l)) }) }) });
}), Ce = E()((e) => ({
icon: {
color: e.palette.tertiary.contrastText || "#fff"
},
expansionPanelDetails: {
display: "block",
padding: e.spacing(1)
},
accordion: {
border: `1px solid ${e.palette.text.primary}`
},
noOverflow: {
width: "100%",
overflowX: "auto"
}
})), xe = v(function(e) {
const { classes: a } = Ce(), { slotName: r, slotSchema: o, schema: n, slot: l = n[r], path: d = [] } = e;
if (A.isConfigurationSchemaType(o)) {
if (l.length)
return l.map((p, k) => {
const S = p.type ? `${Y.singular(r)} ${p.type}` : `${Y.singular(r)} ${k + 1}`;
return t(xe, { ...e, slot: p, slotName: S }, S);
});
const u = A.getTypeNamesFromExplicitlyTypedUnion(o);
return h(de, { defaultExpanded: !0, className: a.accordion, children: [t(ue, { expandIcon: t(pe, { className: a.icon }), children: t(N, { children: [...d, r].join("➔") }) }), h(_, { className: a.expansionPanelDetails, children: [u.length ? t(Pt, { typeNameChoices: u, slotName: r, slot: l, onChange: (p) => {
p.target.value !== l.type && n.setSubschema(r, {
type: p.target.value
});
} }) : null, t(Be, { className: a.noOverflow, children: t(Te, { schema: l, path: [...d, r] }) })] })] });
} else return A.isConfigurationSlotType(o) ? t(kt, { slot: l, slotSchema: o }, r) : null;
}), Te = v(function({ schema: e, path: a = [] }) {
const r = qe(e).properties;
return t(x, { children: Object.entries(r).map(([o, n]) => t(xe, { slotName: o, slotSchema: n, path: a, schema: e }, o)) });
}), Jt = v(function({ model: e }) {
const { classes: a } = Ce(), { target: r } = e, o = A.readConfObject(r, "trackId"), n = A.readConfObject(r, "name");
return h(de, { defaultExpanded: !0, className: a.accordion, children: [t(ue, { expandIcon: t(pe, { className: a.icon }), children: t(N, { children: t(Je, { html: n ?? "Configuration" }) }) }), t(_, { className: a.expansionPanelDetails, "data-testid": "configEditor", children: t(Te, { schema: r }) })] }, o);
});
export {
Jt as default
};
//# sourceMappingURL=ConfigurationEditor-DmnQhqEQ.js.map