@jbrowse/plugin-config 2.18.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ConfigurationEditorWidget/components/BooleanEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/BooleanEditor.js +4 -9
- package/dist/ConfigurationEditorWidget/components/CallbackEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/CallbackEditor.js +16 -49
- package/dist/ConfigurationEditorWidget/components/ColorEditor.d.ts +2 -3
- package/dist/ConfigurationEditorWidget/components/ColorEditor.js +10 -36
- package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js +10 -21
- package/dist/ConfigurationEditorWidget/components/ConfigurationTextField.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/ConfigurationTextField.js +2 -5
- package/dist/ConfigurationEditorWidget/components/HeadingComponent.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/HeadingComponent.js +2 -5
- package/dist/ConfigurationEditorWidget/components/JsonEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/JsonEditor.js +11 -37
- package/dist/ConfigurationEditorWidget/components/NumberEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/NumberEditor.js +3 -25
- package/dist/ConfigurationEditorWidget/components/NumberMapEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/NumberMapEditor.js +19 -52
- package/dist/ConfigurationEditorWidget/components/SlotEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/SlotEditor.js +10 -36
- package/dist/ConfigurationEditorWidget/components/StringArrayEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/StringArrayEditor.js +26 -61
- package/dist/ConfigurationEditorWidget/components/StringArrayMapEditor.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/StringArrayMapEditor.js +27 -60
- package/dist/ConfigurationEditorWidget/components/TypeSelector.d.ts +1 -2
- package/dist/ConfigurationEditorWidget/components/TypeSelector.js +2 -7
- package/dist/ConfigurationEditorWidget/index.js +17 -7
- package/dist/FromConfigAdapter/index.js +17 -7
- package/dist/FromConfigRegionsAdapter/index.js +17 -7
- package/dist/FromConfigSequenceAdapter/index.js +17 -7
- package/dist/NcbiSequenceReportAliasAdapter/index.js +17 -7
- package/dist/RefNameAliasAdapter/index.js +17 -7
- package/dist/index.d.ts +1 -1
- package/dist/index.js +17 -7
- package/esm/ConfigurationEditorWidget/components/BooleanEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/BooleanEditor.js +4 -6
- package/esm/ConfigurationEditorWidget/components/CallbackEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/CallbackEditor.js +16 -26
- package/esm/ConfigurationEditorWidget/components/ColorEditor.d.ts +2 -3
- package/esm/ConfigurationEditorWidget/components/ColorEditor.js +10 -13
- package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js +10 -21
- package/esm/ConfigurationEditorWidget/components/ConfigurationTextField.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/ConfigurationTextField.js +2 -2
- package/esm/ConfigurationEditorWidget/components/HeadingComponent.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/HeadingComponent.js +2 -2
- package/esm/ConfigurationEditorWidget/components/JsonEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/JsonEditor.js +11 -14
- package/esm/ConfigurationEditorWidget/components/NumberEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/NumberEditor.js +3 -2
- package/esm/ConfigurationEditorWidget/components/NumberMapEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/NumberMapEditor.js +19 -29
- package/esm/ConfigurationEditorWidget/components/SlotEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/SlotEditor.js +10 -13
- package/esm/ConfigurationEditorWidget/components/StringArrayEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/StringArrayEditor.js +26 -38
- package/esm/ConfigurationEditorWidget/components/StringArrayMapEditor.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/StringArrayMapEditor.js +27 -37
- package/esm/ConfigurationEditorWidget/components/TypeSelector.d.ts +1 -2
- package/esm/ConfigurationEditorWidget/components/TypeSelector.js +2 -4
- package/esm/index.d.ts +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const CallbackEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
set: (arg: string) => void;
|
|
@@ -7,5 +6,5 @@ declare const CallbackEditor: ({ slot, }: {
|
|
|
7
6
|
value: string;
|
|
8
7
|
contextVariable: string;
|
|
9
8
|
};
|
|
10
|
-
}) =>
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
10
|
export default CallbackEditor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { useDebounce } from '@jbrowse/core/util';
|
|
3
4
|
import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
|
|
4
5
|
import HelpIcon from '@mui/icons-material/Help';
|
|
@@ -49,30 +50,19 @@ const CallbackEditor = observer(function ({ slot, }) {
|
|
|
49
50
|
setCodeError(e);
|
|
50
51
|
}
|
|
51
52
|
}, [debouncedCode, slot]);
|
|
52
|
-
return (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"Callbacks are written in Jexl format. Click to learn more.",
|
|
67
|
-
React.createElement("br", null),
|
|
68
|
-
" Names of available context items: ",
|
|
69
|
-
slot.contextVariable), arrow: true },
|
|
70
|
-
React.createElement(IconButton, { color: "primary", onClick: () => {
|
|
71
|
-
const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
|
|
72
|
-
if (newWindow) {
|
|
73
|
-
newWindow.opener = null;
|
|
74
|
-
}
|
|
75
|
-
} },
|
|
76
|
-
React.createElement(HelpIcon, null))))));
|
|
53
|
+
return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
|
|
54
|
+
setCode(event.target.value);
|
|
55
|
+
}, style: { background: error ? '#fdd' : undefined }, slotProps: {
|
|
56
|
+
input: {
|
|
57
|
+
classes: {
|
|
58
|
+
input: classes.textAreaFont,
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
} }), _jsx("p", { children: slot.description }), _jsx(Tooltip, { title: _jsxs("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", _jsx("br", {}), " Names of available context items: ", slot.contextVariable] }), arrow: true, children: _jsx(IconButton, { color: "primary", onClick: () => {
|
|
62
|
+
const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
|
|
63
|
+
if (newWindow) {
|
|
64
|
+
newWindow.opener = null;
|
|
65
|
+
}
|
|
66
|
+
}, children: _jsx(HelpIcon, {}) }) })] })] }));
|
|
77
67
|
});
|
|
78
68
|
export default CallbackEditor;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
export declare const ColorSlot: (props: {
|
|
3
2
|
value: string;
|
|
4
3
|
label?: string;
|
|
@@ -7,7 +6,7 @@ export declare const ColorSlot: (props: {
|
|
|
7
6
|
fullWidth: boolean;
|
|
8
7
|
};
|
|
9
8
|
onChange: (arg: string) => void;
|
|
10
|
-
}) =>
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
10
|
declare const ColorEditor: (props: {
|
|
12
11
|
slot: {
|
|
13
12
|
name: string;
|
|
@@ -15,5 +14,5 @@ declare const ColorEditor: (props: {
|
|
|
15
14
|
description: string;
|
|
16
15
|
set: (arg: string) => void;
|
|
17
16
|
};
|
|
18
|
-
}) =>
|
|
17
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
19
18
|
export default ColorEditor;
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Suspense, useState } from 'react';
|
|
2
3
|
import ColorPicker from '@jbrowse/core/ui/ColorPicker';
|
|
3
4
|
import { TextField } from '@mui/material';
|
|
4
5
|
import { observer } from 'mobx-react';
|
|
5
6
|
export const ColorSlot = (props) => {
|
|
6
7
|
const { value = '#000', label = '', TextFieldProps = {}, onChange } = props;
|
|
7
8
|
const [displayed, setDisplayed] = useState(false);
|
|
8
|
-
return (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
onChange
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
React.createElement(React.Suspense, { fallback: null },
|
|
16
|
-
React.createElement(ColorPicker, { color: value, onChange: event => {
|
|
17
|
-
onChange(event);
|
|
18
|
-
} })))));
|
|
9
|
+
return (_jsxs("div", { style: { display: 'flex' }, children: [_jsx(TextField, { value: value, label: label, onClick: () => {
|
|
10
|
+
setDisplayed(!displayed);
|
|
11
|
+
}, onChange: event => {
|
|
12
|
+
onChange(event.target.value);
|
|
13
|
+
}, ...TextFieldProps }), _jsx("div", { style: { marginTop: 10 }, children: _jsx(Suspense, { fallback: null, children: _jsx(ColorPicker, { color: value, onChange: event => {
|
|
14
|
+
onChange(event);
|
|
15
|
+
} }) }) })] }));
|
|
19
16
|
};
|
|
20
17
|
const ColorEditor = observer(function (props) {
|
|
21
18
|
const { slot } = props;
|
|
22
|
-
return (
|
|
19
|
+
return (_jsx(ColorSlot, { label: slot.name, value: slot.value, onChange: color => {
|
|
23
20
|
slot.set(color);
|
|
24
21
|
}, TextFieldProps: {
|
|
25
22
|
helperText: slot.description,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
|
|
3
2
|
import type { AbstractSessionModel } from '@jbrowse/core/util';
|
|
4
3
|
declare const ConfigurationEditor: ({ model, }: {
|
|
@@ -6,5 +5,5 @@ declare const ConfigurationEditor: ({ model, }: {
|
|
|
6
5
|
target: AnyConfigurationModel;
|
|
7
6
|
};
|
|
8
7
|
session?: AbstractSessionModel;
|
|
9
|
-
}) =>
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
export default ConfigurationEditor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, readConfObject, } from '@jbrowse/core/configuration';
|
|
3
3
|
import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
|
|
4
4
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
@@ -34,24 +34,18 @@ const Member = observer(function (props) {
|
|
|
34
34
|
const key = subslot.type
|
|
35
35
|
? `${singular(slotName)} ${subslot.type}`
|
|
36
36
|
: `${singular(slotName)} ${slotIndex + 1}`;
|
|
37
|
-
return
|
|
37
|
+
return _jsx(Member, { ...props, slot: subslot, slotName: key }, key);
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema);
|
|
41
|
-
return (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if (evt.target.value !== slot.type) {
|
|
47
|
-
schema.setSubschema(slotName, { type: evt.target.value });
|
|
48
|
-
}
|
|
49
|
-
} })) : null,
|
|
50
|
-
React.createElement(FormGroup, { className: classes.noOverflow },
|
|
51
|
-
React.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
|
|
41
|
+
return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
|
|
42
|
+
if (evt.target.value !== slot.type) {
|
|
43
|
+
schema.setSubschema(slotName, { type: evt.target.value });
|
|
44
|
+
}
|
|
45
|
+
} })) : null, _jsx(FormGroup, { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
|
|
52
46
|
}
|
|
53
47
|
else if (isConfigurationSlotType(slotSchema)) {
|
|
54
|
-
return
|
|
48
|
+
return _jsx(SlotEditor, { slot: slot, slotSchema: slotSchema }, slotName);
|
|
55
49
|
}
|
|
56
50
|
else {
|
|
57
51
|
return null;
|
|
@@ -59,18 +53,13 @@ const Member = observer(function (props) {
|
|
|
59
53
|
});
|
|
60
54
|
const Schema = observer(function ({ schema, path = [], }) {
|
|
61
55
|
const properties = getMembers(schema).properties;
|
|
62
|
-
return (
|
|
56
|
+
return (_jsx(_Fragment, { children: Object.entries(properties).map(([slotName, slotSchema]) => (_jsx(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }, slotName))) }));
|
|
63
57
|
});
|
|
64
58
|
const ConfigurationEditor = observer(function ({ model, }) {
|
|
65
59
|
const { classes } = useStyles();
|
|
66
60
|
const { target } = model;
|
|
67
61
|
const key = readConfObject(target, 'trackId');
|
|
68
62
|
const name = readConfObject(target, 'name');
|
|
69
|
-
return (
|
|
70
|
-
React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.icon }) },
|
|
71
|
-
React.createElement(Typography, null,
|
|
72
|
-
React.createElement(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }))),
|
|
73
|
-
React.createElement(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" },
|
|
74
|
-
React.createElement(Schema, { schema: target }))));
|
|
63
|
+
return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: _jsx(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }) }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: _jsx(Schema, { schema: target }) })] }, key));
|
|
75
64
|
});
|
|
76
65
|
export default ConfigurationEditor;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SanitizedHTML } from '@jbrowse/core/ui';
|
|
3
3
|
import { TextField } from '@mui/material';
|
|
4
4
|
export default function ConfigurationTextField(props) {
|
|
5
5
|
const { helperText } = props;
|
|
6
|
-
return (
|
|
6
|
+
return (_jsx(TextField, { ...props, helperText: _jsx(SanitizedHTML, { html: helperText || '' }), fullWidth: true, slotProps: {
|
|
7
7
|
formHelperText: {
|
|
8
8
|
component: 'div',
|
|
9
9
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import { getType, isStateTreeNode } from 'mobx-state-tree';
|
|
4
4
|
const HeadingComponent = observer(function ({ model, }) {
|
|
@@ -13,6 +13,6 @@ const HeadingComponent = observer(function ({ model, }) {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
return
|
|
16
|
+
return _jsx(_Fragment, { children: "Settings" });
|
|
17
17
|
});
|
|
18
18
|
export default HeadingComponent;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const JsonEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
name: string;
|
|
@@ -6,5 +5,5 @@ declare const JsonEditor: ({ slot, }: {
|
|
|
6
5
|
value: unknown;
|
|
7
6
|
set: (arg: unknown) => void;
|
|
8
7
|
};
|
|
9
|
-
}) =>
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
export default JsonEditor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { InputLabel, TextField } from '@mui/material';
|
|
3
4
|
import { observer } from 'mobx-react';
|
|
4
5
|
import { makeStyles } from 'tss-react/mui';
|
|
@@ -39,18 +40,14 @@ const JsonEditor = observer(function JsonEditor({ slot, }) {
|
|
|
39
40
|
setError(e);
|
|
40
41
|
}
|
|
41
42
|
}, [contents, slot]);
|
|
42
|
-
return (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
input: classes.textAreaFont,
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
} }))));
|
|
43
|
+
return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(InputLabel, { shrink: true, htmlFor: "json-editor", children: slot.name }), _jsx(TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => {
|
|
44
|
+
setContents(event.target.value);
|
|
45
|
+
}, style: { background: error ? '#fdd' : undefined }, slotProps: {
|
|
46
|
+
input: {
|
|
47
|
+
classes: {
|
|
48
|
+
input: classes.textAreaFont,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
} })] })] }));
|
|
55
52
|
});
|
|
56
53
|
export default JsonEditor;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const NumberEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
name?: string;
|
|
@@ -7,5 +6,5 @@ declare const NumberEditor: ({ slot, }: {
|
|
|
7
6
|
set: (val: number) => void;
|
|
8
7
|
reset?: () => void;
|
|
9
8
|
};
|
|
10
|
-
}) =>
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
10
|
export default NumberEditor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { observer } from 'mobx-react';
|
|
3
4
|
import ConfigurationTextField from './ConfigurationTextField';
|
|
4
5
|
const NumberEditor = observer(function ({ slot, }) {
|
|
@@ -13,7 +14,7 @@ const NumberEditor = observer(function ({ slot, }) {
|
|
|
13
14
|
slot.set(num);
|
|
14
15
|
}
|
|
15
16
|
}, [slot, val]);
|
|
16
|
-
return (
|
|
17
|
+
return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
|
|
17
18
|
setVal(evt.target.value);
|
|
18
19
|
} }));
|
|
19
20
|
});
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const NumberMapEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
name: string;
|
|
@@ -7,5 +6,5 @@ declare const NumberMapEditor: ({ slot, }: {
|
|
|
7
6
|
add: (key: string, val: number) => void;
|
|
8
7
|
description: string;
|
|
9
8
|
};
|
|
10
|
-
}) =>
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
10
|
export default NumberMapEditor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import AddIcon from '@mui/icons-material/Add';
|
|
3
4
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
4
5
|
import { Card, CardContent, CardHeader, FormHelperText, IconButton, InputAdornment, InputLabel, TextField, } from '@mui/material';
|
|
@@ -13,33 +14,22 @@ const useStyles = makeStyles()(theme => ({
|
|
|
13
14
|
const NumberMapEditor = observer(function ({ slot, }) {
|
|
14
15
|
const { classes } = useStyles();
|
|
15
16
|
const [value, setValue] = useState('');
|
|
16
|
-
return (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}, slotProps: {
|
|
34
|
-
input: {
|
|
35
|
-
endAdornment: (React.createElement(InputAdornment, { position: "end" },
|
|
36
|
-
React.createElement(IconButton, { disabled: value === '', onClick: () => {
|
|
37
|
-
slot.add(value, 0);
|
|
38
|
-
setValue('');
|
|
39
|
-
} },
|
|
40
|
-
React.createElement(AddIcon, null)))),
|
|
41
|
-
},
|
|
42
|
-
} }) })),
|
|
43
|
-
React.createElement(FormHelperText, null, slot.description)));
|
|
17
|
+
return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: slot.name }), [...slot.value].map(([key, val]) => (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: key, action: _jsx(IconButton, { onClick: () => {
|
|
18
|
+
slot.remove(key);
|
|
19
|
+
}, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: _jsx(NumberEditor, { slot: {
|
|
20
|
+
value: val,
|
|
21
|
+
set: (val) => {
|
|
22
|
+
slot.add(key, val);
|
|
23
|
+
},
|
|
24
|
+
} }) })] }, key))), _jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
|
|
25
|
+
setValue(event.target.value);
|
|
26
|
+
}, slotProps: {
|
|
27
|
+
input: {
|
|
28
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: value === '', onClick: () => {
|
|
29
|
+
slot.add(value, 0);
|
|
30
|
+
setValue('');
|
|
31
|
+
}, children: _jsx(AddIcon, {}) }) })),
|
|
32
|
+
},
|
|
33
|
+
} }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
|
|
44
34
|
});
|
|
45
35
|
export default NumberMapEditor;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { IAnyType } from 'mobx-state-tree';
|
|
3
2
|
declare const SlotEditor: ({ slot, slotSchema, }: {
|
|
4
3
|
slot: any;
|
|
5
4
|
slotSchema: IAnyType;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default SlotEditor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { FileSelector } from '@jbrowse/core/ui';
|
|
3
4
|
import { getEnv } from '@jbrowse/core/util';
|
|
4
5
|
import { getSubType, getUnionSubTypes } from '@jbrowse/core/util/mst-reflection';
|
|
@@ -17,17 +18,16 @@ import StringArrayEditor from './StringArrayEditor';
|
|
|
17
18
|
import StringArrayMapEditor from './StringArrayMapEditor';
|
|
18
19
|
import { useSlotEditorStyles } from './useSlotEditorStyles';
|
|
19
20
|
const StringEditor = observer(function ({ slot, }) {
|
|
20
|
-
return (
|
|
21
|
+
return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
|
|
21
22
|
slot.set(evt.target.value);
|
|
22
23
|
} }));
|
|
23
24
|
});
|
|
24
25
|
const TextEditor = observer(function ({ slot, }) {
|
|
25
|
-
return (
|
|
26
|
+
return (_jsx(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
|
|
26
27
|
slot.set(evt.target.value);
|
|
27
28
|
} }));
|
|
28
29
|
});
|
|
29
|
-
const SvgCheckbox = () => (
|
|
30
|
-
React.createElement("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" })));
|
|
30
|
+
const SvgCheckbox = () => (_jsx(SvgIcon, { children: _jsx("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" }) }));
|
|
31
31
|
const IntegerEditor = observer(function ({ slot, }) {
|
|
32
32
|
const [val, setVal] = useState(slot.value);
|
|
33
33
|
useEffect(() => {
|
|
@@ -36,20 +36,20 @@ const IntegerEditor = observer(function ({ slot, }) {
|
|
|
36
36
|
slot.set(num);
|
|
37
37
|
}
|
|
38
38
|
}, [slot, val]);
|
|
39
|
-
return (
|
|
39
|
+
return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
|
|
40
40
|
setVal(evt.target.value);
|
|
41
41
|
} }));
|
|
42
42
|
});
|
|
43
43
|
const StringEnumEditor = observer(function ({ slot, slotSchema, }) {
|
|
44
44
|
const p = getPropertyMembers(getSubType(slotSchema));
|
|
45
45
|
const choices = getUnionSubTypes(getUnionSubTypes(getSubType(p.properties.value))[1]).map(t => t.value);
|
|
46
|
-
return (
|
|
46
|
+
return (_jsx(ConfigurationTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
|
|
47
47
|
slot.set(evt.target.value);
|
|
48
|
-
}
|
|
48
|
+
}, children: choices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
|
|
49
49
|
});
|
|
50
50
|
const FileSelectorWrapper = observer(function ({ slot, }) {
|
|
51
51
|
var _a;
|
|
52
|
-
return (
|
|
52
|
+
return (_jsx(FileSelector, { location: slot.value, setLocation: location => {
|
|
53
53
|
slot.set(location);
|
|
54
54
|
}, name: slot.name, description: slot.description, rootModel: (_a = getEnv(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.rootModel }));
|
|
55
55
|
});
|
|
@@ -82,9 +82,6 @@ const SlotEditor = observer(function ({ slot, slotSchema, }) {
|
|
|
82
82
|
if (!(type in valueComponents)) {
|
|
83
83
|
console.warn(`SlotEditor needs to implement ${type}`);
|
|
84
84
|
}
|
|
85
|
-
return (
|
|
86
|
-
React.createElement("div", { className: classes.paperContent },
|
|
87
|
-
React.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
|
|
88
|
-
React.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (React.createElement(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}` }, slot.isCallback ? React.createElement(SvgCheckbox, null) : React.createElement(RadioButtonUncheckedIcon, null))) : null)));
|
|
85
|
+
return (_jsxs(Paper, { className: classes.paper, children: [_jsx("div", { className: classes.paperContent, children: _jsx(ValueComponent, { slot: slot, slotSchema: slotSchema }) }), _jsx("div", { className: classes.slotModeSwitch, children: slot.contextVariable.length ? (_jsx(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, children: slot.isCallback ? _jsx(SvgCheckbox, {}) : _jsx(RadioButtonUncheckedIcon, {}) })) : null })] }));
|
|
89
86
|
});
|
|
90
87
|
export default SlotEditor;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const StringArrayEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
name: string;
|
|
@@ -8,5 +7,5 @@ declare const StringArrayEditor: ({ slot, }: {
|
|
|
8
7
|
add: (arg: string) => void;
|
|
9
8
|
description: string;
|
|
10
9
|
};
|
|
11
|
-
}) =>
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
12
11
|
export default StringArrayEditor;
|
|
@@ -1,46 +1,34 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
3
4
|
import { Button, FormHelperText, IconButton, InputAdornment, InputLabel, List, ListItem, TextField, } from '@mui/material';
|
|
4
5
|
import { observer } from 'mobx-react';
|
|
5
6
|
const StringArrayEditor = observer(function ({ slot, }) {
|
|
6
7
|
const [value, setValue] = useState('');
|
|
7
8
|
const [addNew, setAddNew] = useState(false);
|
|
8
|
-
return (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
slot.add(value);
|
|
33
|
-
setValue('');
|
|
34
|
-
} }, "OK"),
|
|
35
|
-
React.createElement(Button, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => {
|
|
36
|
-
setAddNew(false);
|
|
37
|
-
setValue('');
|
|
38
|
-
} }, "Cancel")))),
|
|
39
|
-
},
|
|
40
|
-
} }))) : null,
|
|
41
|
-
React.createElement(Button, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: addNew, onClick: () => {
|
|
42
|
-
setAddNew(true);
|
|
43
|
-
} }, "Add item")),
|
|
44
|
-
React.createElement(FormHelperText, null, slot.description)));
|
|
9
|
+
return (_jsxs(_Fragment, { children: [slot.name ? _jsx(InputLabel, { children: slot.name }) : null, _jsxs(List, { disablePadding: true, children: [slot.value.map((val, idx) => (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: val, onChange: evt => {
|
|
10
|
+
slot.setAtIndex(idx, evt.target.value);
|
|
11
|
+
}, slotProps: {
|
|
12
|
+
input: {
|
|
13
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
|
|
14
|
+
slot.removeAtIndex(idx);
|
|
15
|
+
}, children: _jsx(DeleteIcon, {}) }) })),
|
|
16
|
+
},
|
|
17
|
+
} }) }, `${JSON.stringify(val)}-${idx}`))), addNew ? (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: value, placeholder: "add new", onChange: event => {
|
|
18
|
+
setValue(event.target.value);
|
|
19
|
+
}, slotProps: {
|
|
20
|
+
input: {
|
|
21
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, "data-testid": `stringArrayAdd-${slot.name}`, onClick: () => {
|
|
22
|
+
setAddNew(false);
|
|
23
|
+
slot.add(value);
|
|
24
|
+
setValue('');
|
|
25
|
+
}, children: "OK" }), _jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => {
|
|
26
|
+
setAddNew(false);
|
|
27
|
+
setValue('');
|
|
28
|
+
}, children: "Cancel" })] }) })),
|
|
29
|
+
},
|
|
30
|
+
} }) })) : null, _jsx(Button, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: addNew, onClick: () => {
|
|
31
|
+
setAddNew(true);
|
|
32
|
+
}, children: "Add item" })] }), _jsx(FormHelperText, { children: slot.description })] }));
|
|
45
33
|
});
|
|
46
34
|
export default StringArrayEditor;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const StringArrayMapEditor: ({ slot, }: {
|
|
3
2
|
slot: {
|
|
4
3
|
name: string;
|
|
@@ -10,5 +9,5 @@ declare const StringArrayMapEditor: ({ slot, }: {
|
|
|
10
9
|
removeAtKeyIndex: (key: string, idx: number) => void;
|
|
11
10
|
addToKey: (key: string, val: string) => void;
|
|
12
11
|
};
|
|
13
|
-
}) =>
|
|
12
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
14
13
|
export default StringArrayMapEditor;
|