@jbrowse/plugin-config 2.6.3 → 2.7.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 +2 -2
- package/dist/ConfigurationEditorWidget/components/BooleanEditor.js +2 -1
- package/dist/ConfigurationEditorWidget/components/CallbackEditor.d.ts +3 -4
- package/dist/ConfigurationEditorWidget/components/CallbackEditor.js +3 -3
- package/dist/ConfigurationEditorWidget/components/ColorEditor.d.ts +3 -4
- package/dist/ConfigurationEditorWidget/components/ColorEditor.js +3 -3
- package/dist/ConfigurationEditorWidget/components/HeadingComponent.d.ts +9 -0
- package/dist/ConfigurationEditorWidget/components/HeadingComponent.js +23 -0
- package/dist/ConfigurationEditorWidget/components/JsonEditor.d.ts +3 -4
- package/dist/ConfigurationEditorWidget/components/JsonEditor.js +3 -3
- package/dist/ConfigurationEditorWidget/components/NumberEditor.d.ts +2 -2
- package/dist/ConfigurationEditorWidget/components/NumberEditor.js +2 -1
- package/dist/ConfigurationEditorWidget/components/NumberMapEditor.d.ts +2 -2
- package/dist/ConfigurationEditorWidget/components/NumberMapEditor.js +2 -1
- package/dist/ConfigurationEditorWidget/components/SlotEditor.d.ts +1 -10
- package/dist/ConfigurationEditorWidget/components/SlotEditor.js +11 -29
- package/dist/ConfigurationEditorWidget/components/StringArrayEditor.js +1 -1
- package/dist/ConfigurationEditorWidget/components/StringArrayMapEditor.d.ts +2 -2
- package/dist/ConfigurationEditorWidget/components/StringArrayMapEditor.js +2 -1
- package/dist/ConfigurationEditorWidget/components/TypeSelector.js +3 -3
- package/dist/ConfigurationEditorWidget/components/useSlotEditorStyles.d.ts +9 -0
- package/dist/ConfigurationEditorWidget/components/useSlotEditorStyles.js +21 -0
- package/dist/ConfigurationEditorWidget/index.d.ts +2 -10
- package/dist/ConfigurationEditorWidget/index.js +41 -21
- package/dist/FromConfigAdapter/FromConfigAdapter.js +4 -5
- package/dist/index.js +2 -11
- package/esm/ConfigurationEditorWidget/components/BooleanEditor.d.ts +2 -2
- package/esm/ConfigurationEditorWidget/components/BooleanEditor.js +2 -1
- package/esm/ConfigurationEditorWidget/components/CallbackEditor.d.ts +3 -4
- package/esm/ConfigurationEditorWidget/components/CallbackEditor.js +3 -3
- package/esm/ConfigurationEditorWidget/components/ColorEditor.d.ts +3 -4
- package/esm/ConfigurationEditorWidget/components/ColorEditor.js +3 -3
- package/esm/ConfigurationEditorWidget/components/HeadingComponent.d.ts +9 -0
- package/esm/ConfigurationEditorWidget/components/HeadingComponent.js +18 -0
- package/esm/ConfigurationEditorWidget/components/JsonEditor.d.ts +3 -4
- package/esm/ConfigurationEditorWidget/components/JsonEditor.js +3 -3
- package/esm/ConfigurationEditorWidget/components/NumberEditor.d.ts +2 -2
- package/esm/ConfigurationEditorWidget/components/NumberEditor.js +2 -1
- package/esm/ConfigurationEditorWidget/components/NumberMapEditor.d.ts +2 -2
- package/esm/ConfigurationEditorWidget/components/NumberMapEditor.js +2 -1
- package/esm/ConfigurationEditorWidget/components/SlotEditor.d.ts +1 -10
- package/esm/ConfigurationEditorWidget/components/SlotEditor.js +10 -27
- package/esm/ConfigurationEditorWidget/components/StringArrayEditor.js +1 -1
- package/esm/ConfigurationEditorWidget/components/StringArrayMapEditor.d.ts +2 -2
- package/esm/ConfigurationEditorWidget/components/StringArrayMapEditor.js +2 -1
- package/esm/ConfigurationEditorWidget/components/TypeSelector.js +2 -2
- package/esm/ConfigurationEditorWidget/components/useSlotEditorStyles.d.ts +9 -0
- package/esm/ConfigurationEditorWidget/components/useSlotEditorStyles.js +18 -0
- package/esm/ConfigurationEditorWidget/index.d.ts +2 -10
- package/esm/ConfigurationEditorWidget/index.js +17 -19
- package/esm/FromConfigAdapter/FromConfigAdapter.js +4 -5
- package/esm/index.js +2 -11
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const BooleanEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: boolean;
|
|
@@ -7,4 +7,4 @@ declare const _default: ({ slot, }: {
|
|
|
7
7
|
description: string;
|
|
8
8
|
};
|
|
9
9
|
}) => React.JSX.Element;
|
|
10
|
-
export default
|
|
10
|
+
export default BooleanEditor;
|
|
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const mobx_react_1 = require("mobx-react");
|
|
8
8
|
const material_1 = require("@mui/material");
|
|
9
|
-
|
|
9
|
+
const BooleanEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
10
10
|
return (react_1.default.createElement(material_1.FormControl, null,
|
|
11
11
|
react_1.default.createElement(material_1.FormControlLabel, { label: slot.name, control: react_1.default.createElement(material_1.Checkbox, { checked: slot.value, onChange: evt => slot.set(evt.target.checked) }) }),
|
|
12
12
|
react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
|
|
13
13
|
});
|
|
14
|
+
exports.default = BooleanEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare
|
|
2
|
+
declare const CallbackEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
set: (arg: string) => void;
|
|
5
5
|
description: string;
|
|
@@ -7,6 +7,5 @@ declare function CallbackEditor({ slot, }: {
|
|
|
7
7
|
value: string;
|
|
8
8
|
contextVariable: string;
|
|
9
9
|
};
|
|
10
|
-
})
|
|
11
|
-
|
|
12
|
-
export default _default;
|
|
10
|
+
}) => React.JSX.Element;
|
|
11
|
+
export default CallbackEditor;
|
|
@@ -57,7 +57,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
57
57
|
fontSize: '0.8em',
|
|
58
58
|
},
|
|
59
59
|
}));
|
|
60
|
-
|
|
60
|
+
const CallbackEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
61
61
|
const { classes } = useStyles();
|
|
62
62
|
const [code, setCode] = (0, react_1.useState)(slot.value);
|
|
63
63
|
const [error, setCodeError] = (0, react_1.useState)();
|
|
@@ -103,5 +103,5 @@ function CallbackEditor({ slot, }) {
|
|
|
103
103
|
}
|
|
104
104
|
} },
|
|
105
105
|
react_1.default.createElement(Help_1.default, null))))));
|
|
106
|
-
}
|
|
107
|
-
exports.default =
|
|
106
|
+
});
|
|
107
|
+
exports.default = CallbackEditor;
|
|
@@ -8,13 +8,12 @@ export declare const ColorSlot: (props: {
|
|
|
8
8
|
} | undefined;
|
|
9
9
|
onChange: (arg: string) => void;
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
declare
|
|
11
|
+
declare const ColorEditor: (props: {
|
|
12
12
|
slot: {
|
|
13
13
|
name: string;
|
|
14
14
|
value: string;
|
|
15
15
|
description: string;
|
|
16
16
|
set: (arg: string) => void;
|
|
17
17
|
};
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
export default _default;
|
|
18
|
+
}) => React.JSX.Element;
|
|
19
|
+
export default ColorEditor;
|
|
@@ -38,11 +38,11 @@ const ColorSlot = (props) => {
|
|
|
38
38
|
react_1.default.createElement(ColorPicker, { color: value, onChange: event => onChange(event) })))));
|
|
39
39
|
};
|
|
40
40
|
exports.ColorSlot = ColorSlot;
|
|
41
|
-
function
|
|
41
|
+
const ColorEditor = (0, mobx_react_1.observer)(function (props) {
|
|
42
42
|
const { slot } = props;
|
|
43
43
|
return (react_1.default.createElement(exports.ColorSlot, { label: slot.name, value: slot.value, onChange: color => slot.set(color), TextFieldProps: {
|
|
44
44
|
helperText: slot.description,
|
|
45
45
|
fullWidth: true,
|
|
46
46
|
} }));
|
|
47
|
-
}
|
|
48
|
-
exports.default =
|
|
47
|
+
});
|
|
48
|
+
exports.default = ColorEditor;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const mobx_react_1 = require("mobx-react");
|
|
8
|
+
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
9
|
+
const HeadingComponent = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
10
|
+
if (model === null || model === void 0 ? void 0 : model.target) {
|
|
11
|
+
if (model.target.type) {
|
|
12
|
+
return react_1.default.createElement(react_1.default.Fragment, null, `${model.target.type} settings`);
|
|
13
|
+
}
|
|
14
|
+
if ((0, mobx_state_tree_1.isStateTreeNode)(model.target)) {
|
|
15
|
+
const type = (0, mobx_state_tree_1.getType)(model.target);
|
|
16
|
+
if (type === null || type === void 0 ? void 0 : type.name) {
|
|
17
|
+
return react_1.default.createElement(react_1.default.Fragment, null, `${type.name.replace('ConfigurationSchema', '')} settings`);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return react_1.default.createElement(react_1.default.Fragment, null, "Settings");
|
|
22
|
+
});
|
|
23
|
+
exports.default = HeadingComponent;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare
|
|
2
|
+
declare const JsonEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
description: string;
|
|
6
6
|
value: unknown;
|
|
7
7
|
set: (arg: unknown) => void;
|
|
8
8
|
};
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
export default _default;
|
|
9
|
+
}) => React.JSX.Element;
|
|
10
|
+
export default JsonEditor;
|
|
@@ -52,7 +52,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
52
52
|
fontFamily,
|
|
53
53
|
},
|
|
54
54
|
}));
|
|
55
|
-
function JsonEditor({ slot, }) {
|
|
55
|
+
const JsonEditor = (0, mobx_react_1.observer)(function JsonEditor({ slot, }) {
|
|
56
56
|
const { classes } = useStyles();
|
|
57
57
|
const [contents, setContents] = (0, react_1.useState)(JSON.stringify(slot.value, null, 2));
|
|
58
58
|
const [error, setError] = (0, react_1.useState)();
|
|
@@ -75,5 +75,5 @@ function JsonEditor({ slot, }) {
|
|
|
75
75
|
input: classes.textAreaFont,
|
|
76
76
|
},
|
|
77
77
|
} }))));
|
|
78
|
-
}
|
|
79
|
-
exports.default =
|
|
78
|
+
});
|
|
79
|
+
exports.default = JsonEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const NumberEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name?: string | undefined;
|
|
5
5
|
value: string;
|
|
@@ -8,4 +8,4 @@ declare const _default: ({ slot, }: {
|
|
|
8
8
|
reset?: (() => void) | undefined;
|
|
9
9
|
};
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
export default
|
|
11
|
+
export default NumberEditor;
|
|
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
const react_1 = __importStar(require("react"));
|
|
30
30
|
const mobx_react_1 = require("mobx-react");
|
|
31
31
|
const ConfigurationTextField_1 = __importDefault(require("./ConfigurationTextField"));
|
|
32
|
-
|
|
32
|
+
const NumberEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
33
33
|
const [val, setVal] = (0, react_1.useState)(slot.value);
|
|
34
34
|
(0, react_1.useEffect)(() => {
|
|
35
35
|
var _a;
|
|
@@ -43,3 +43,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
|
43
43
|
}, [slot, val]);
|
|
44
44
|
return (react_1.default.createElement(ConfigurationTextField_1.default, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => setVal(evt.target.value) }));
|
|
45
45
|
});
|
|
46
|
+
exports.default = NumberEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const NumberMapEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: Map<string, string>;
|
|
@@ -8,4 +8,4 @@ declare const _default: ({ slot, }: {
|
|
|
8
8
|
description: string;
|
|
9
9
|
};
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
export default
|
|
11
|
+
export default NumberMapEditor;
|
|
@@ -39,7 +39,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
39
39
|
marginTop: theme.spacing(1),
|
|
40
40
|
},
|
|
41
41
|
}));
|
|
42
|
-
|
|
42
|
+
const NumberMapEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
43
43
|
const { classes } = useStyles();
|
|
44
44
|
const [value, setValue] = (0, react_1.useState)('');
|
|
45
45
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -63,3 +63,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
|
63
63
|
} }) })),
|
|
64
64
|
react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
|
|
65
65
|
});
|
|
66
|
+
exports.default = NumberMapEditor;
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IAnyType } from 'mobx-state-tree';
|
|
3
|
-
|
|
4
|
-
props: any;
|
|
5
|
-
ownerState?: Record<string, unknown> | undefined;
|
|
6
|
-
} | undefined) => {
|
|
7
|
-
classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
|
|
8
|
-
theme: import("@mui/material").Theme;
|
|
9
|
-
css: import("tss-react").Css;
|
|
10
|
-
cx: import("tss-react").Cx;
|
|
11
|
-
};
|
|
12
|
-
declare const SlotEditor: ({ slot, slotSchema }: {
|
|
3
|
+
declare const SlotEditor: ({ slot, slotSchema, }: {
|
|
13
4
|
slot: any;
|
|
14
5
|
slotSchema: IAnyType;
|
|
15
6
|
}) => React.JSX.Element;
|
|
@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.useSlotEditorStyles = void 0;
|
|
30
29
|
const react_1 = __importStar(require("react"));
|
|
31
30
|
const mobx_react_1 = require("mobx-react");
|
|
32
31
|
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
@@ -34,7 +33,6 @@ const util_1 = require("@jbrowse/core/util");
|
|
|
34
33
|
const ui_1 = require("@jbrowse/core/ui");
|
|
35
34
|
const mst_reflection_1 = require("@jbrowse/core/util/mst-reflection");
|
|
36
35
|
const material_1 = require("@mui/material");
|
|
37
|
-
const mui_1 = require("tss-react/mui");
|
|
38
36
|
// icons
|
|
39
37
|
const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
|
|
40
38
|
// locals
|
|
@@ -47,12 +45,17 @@ const ConfigurationTextField_1 = __importDefault(require("./ConfigurationTextFie
|
|
|
47
45
|
const NumberMapEditor_1 = __importDefault(require("./NumberMapEditor"));
|
|
48
46
|
const NumberEditor_1 = __importDefault(require("./NumberEditor"));
|
|
49
47
|
const BooleanEditor_1 = __importDefault(require("./BooleanEditor"));
|
|
50
|
-
const
|
|
51
|
-
const
|
|
48
|
+
const useSlotEditorStyles_1 = require("./useSlotEditorStyles");
|
|
49
|
+
const StringEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
50
|
+
return (react_1.default.createElement(ConfigurationTextField_1.default, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => slot.set(evt.target.value) }));
|
|
51
|
+
});
|
|
52
|
+
const TextEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
53
|
+
return (react_1.default.createElement(material_1.TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => slot.set(evt.target.value) }));
|
|
54
|
+
});
|
|
52
55
|
// checked checkbox, looks like a styled (x)
|
|
53
56
|
const SvgCheckbox = () => (react_1.default.createElement(material_1.SvgIcon, null,
|
|
54
57
|
react_1.default.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" })));
|
|
55
|
-
const IntegerEditor = (0, mobx_react_1.observer)(({ slot, })
|
|
58
|
+
const IntegerEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
56
59
|
const [val, setVal] = (0, react_1.useState)(slot.value);
|
|
57
60
|
(0, react_1.useEffect)(() => {
|
|
58
61
|
const num = Number.parseInt(val, 10);
|
|
@@ -86,27 +89,8 @@ const valueComponents = {
|
|
|
86
89
|
frozen: JsonEditor_1.default,
|
|
87
90
|
configRelationships: JsonEditor_1.default,
|
|
88
91
|
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
display: 'flex',
|
|
92
|
-
marginBottom: theme.spacing(2),
|
|
93
|
-
position: 'relative',
|
|
94
|
-
},
|
|
95
|
-
paperContent: {
|
|
96
|
-
width: '100%',
|
|
97
|
-
},
|
|
98
|
-
slotModeSwitch: {
|
|
99
|
-
width: 24,
|
|
100
|
-
background: theme.palette.secondary.light,
|
|
101
|
-
display: 'flex',
|
|
102
|
-
justifyContent: 'center',
|
|
103
|
-
alignItems: 'center',
|
|
104
|
-
},
|
|
105
|
-
}));
|
|
106
|
-
const SlotEditor = (0, mobx_react_1.observer)(
|
|
107
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
108
|
-
({ slot, slotSchema }) => {
|
|
109
|
-
const { classes } = (0, exports.useSlotEditorStyles)();
|
|
92
|
+
const SlotEditor = (0, mobx_react_1.observer)(function ({ slot, slotSchema, }) {
|
|
93
|
+
const { classes } = (0, useSlotEditorStyles_1.useSlotEditorStyles)();
|
|
110
94
|
const { type } = slot;
|
|
111
95
|
let ValueComponent = slot.isCallback
|
|
112
96
|
? CallbackEditor_1.default
|
|
@@ -122,8 +106,6 @@ const SlotEditor = (0, mobx_react_1.observer)(
|
|
|
122
106
|
return (react_1.default.createElement(material_1.Paper, { className: classes.paper },
|
|
123
107
|
react_1.default.createElement("div", { className: classes.paperContent },
|
|
124
108
|
react_1.default.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
|
|
125
|
-
react_1.default.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (react_1.default.createElement(material_1.IconButton, { onClick: () => slot.isCallback
|
|
126
|
-
? slot.convertToValue()
|
|
127
|
-
: slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}` }, slot.isCallback ? react_1.default.createElement(SvgCheckbox, null) : react_1.default.createElement(RadioButtonUnchecked_1.default, null))) : null)));
|
|
109
|
+
react_1.default.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (react_1.default.createElement(material_1.IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}` }, slot.isCallback ? react_1.default.createElement(SvgCheckbox, null) : react_1.default.createElement(RadioButtonUnchecked_1.default, null))) : null)));
|
|
128
110
|
});
|
|
129
111
|
exports.default = SlotEditor;
|
|
@@ -31,7 +31,7 @@ const mobx_react_1 = require("mobx-react");
|
|
|
31
31
|
const material_1 = require("@mui/material");
|
|
32
32
|
// icons
|
|
33
33
|
const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
|
|
34
|
-
const StringArrayEditor = (0, mobx_react_1.observer)(({ slot, })
|
|
34
|
+
const StringArrayEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
35
35
|
const [value, setValue] = (0, react_1.useState)('');
|
|
36
36
|
const [addNew, setAddNew] = (0, react_1.useState)(false);
|
|
37
37
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const StringArrayMapEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: Map<string, string[]>;
|
|
@@ -11,4 +11,4 @@ declare const _default: ({ slot, }: {
|
|
|
11
11
|
addToKey: (key: string, val: string) => void;
|
|
12
12
|
};
|
|
13
13
|
}) => React.JSX.Element;
|
|
14
|
-
export default
|
|
14
|
+
export default StringArrayMapEditor;
|
|
@@ -40,7 +40,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
40
40
|
marginTop: theme.spacing(1),
|
|
41
41
|
},
|
|
42
42
|
}));
|
|
43
|
-
|
|
43
|
+
const StringArrayMapEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
44
44
|
const { classes } = useStyles();
|
|
45
45
|
const [value, setValue] = (0, react_1.useState)('');
|
|
46
46
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -68,3 +68,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ slot, }) {
|
|
|
68
68
|
} }) })),
|
|
69
69
|
react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
|
|
70
70
|
});
|
|
71
|
+
exports.default = StringArrayMapEditor;
|
|
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const material_1 = require("@mui/material");
|
|
8
8
|
const mobx_react_1 = require("mobx-react");
|
|
9
|
-
const
|
|
10
|
-
const TypeSelector = (0, mobx_react_1.observer)(({ typeNameChoices, slot, slotName, onChange, })
|
|
11
|
-
const { classes } = (0,
|
|
9
|
+
const useSlotEditorStyles_1 = require("./useSlotEditorStyles");
|
|
10
|
+
const TypeSelector = (0, mobx_react_1.observer)(function ({ typeNameChoices, slot, slotName, onChange, }) {
|
|
11
|
+
const { classes } = (0, useSlotEditorStyles_1.useSlotEditorStyles)();
|
|
12
12
|
return (react_1.default.createElement(material_1.Paper, { className: classes.paper },
|
|
13
13
|
react_1.default.createElement("div", { className: classes.paperContent },
|
|
14
14
|
react_1.default.createElement(material_1.TextField, { value: slot.type, label: "Type", select: true, helperText: `Type of ${slotName} to use`, fullWidth: true, onChange: onChange }, typeNameChoices.map(str => (react_1.default.createElement(material_1.MenuItem, { key: str, value: str }, str)))))));
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const useSlotEditorStyles: (params: void, muiStyleOverridesParams?: {
|
|
2
|
+
props: Record<string, unknown>;
|
|
3
|
+
ownerState?: Record<string, unknown> | undefined;
|
|
4
|
+
} | undefined) => {
|
|
5
|
+
classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
|
|
6
|
+
theme: import("@mui/material").Theme;
|
|
7
|
+
css: import("tss-react").Css;
|
|
8
|
+
cx: import("tss-react").Cx;
|
|
9
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useSlotEditorStyles = void 0;
|
|
4
|
+
const mui_1 = require("tss-react/mui");
|
|
5
|
+
exports.useSlotEditorStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
6
|
+
paper: {
|
|
7
|
+
display: 'flex',
|
|
8
|
+
marginBottom: theme.spacing(2),
|
|
9
|
+
position: 'relative',
|
|
10
|
+
},
|
|
11
|
+
paperContent: {
|
|
12
|
+
width: '100%',
|
|
13
|
+
},
|
|
14
|
+
slotModeSwitch: {
|
|
15
|
+
width: 24,
|
|
16
|
+
background: theme.palette.secondary.light,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
justifyContent: 'center',
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
},
|
|
21
|
+
}));
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export
|
|
3
|
-
export declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
|
|
4
|
-
export declare const HeadingComponent: ({ model }: {
|
|
5
|
-
model?: {
|
|
6
|
-
target: {
|
|
7
|
-
type: string;
|
|
8
|
-
};
|
|
9
|
-
} | undefined;
|
|
10
|
-
}) => React.JSX.Element;
|
|
1
|
+
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
+
export default function registerConfigurationEditorWidget(pluginManager: PluginManager): void;
|
|
@@ -1,27 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
27
|
};
|
|
5
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const mobx_react_1 = require("mobx-react");
|
|
9
|
-
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
29
|
+
const react_1 = require("react");
|
|
10
30
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
31
|
+
const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
|
|
32
|
+
const model_1 = __importDefault(require("./model"));
|
|
33
|
+
const HeadingComponent_1 = __importDefault(require("./components/HeadingComponent"));
|
|
34
|
+
const configSchema = (0, configuration_1.ConfigurationSchema)('ConfigurationEditorWidget', {});
|
|
35
|
+
const LazyConfigurationEditorComponent = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ConfigurationEditor'))));
|
|
36
|
+
function registerConfigurationEditorWidget(pluginManager) {
|
|
37
|
+
pluginManager.addWidgetType(() => {
|
|
38
|
+
return new pluggableElementTypes_1.WidgetType({
|
|
39
|
+
name: 'ConfigurationEditorWidget',
|
|
40
|
+
HeadingComponent: HeadingComponent_1.default,
|
|
41
|
+
configSchema,
|
|
42
|
+
stateModel: (0, model_1.default)(pluginManager),
|
|
43
|
+
ReactComponent: LazyConfigurationEditorComponent,
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
exports.default = registerConfigurationEditorWidget;
|
|
@@ -20,9 +20,9 @@ class FromConfigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
|
|
|
20
20
|
}
|
|
21
21
|
static makeFeatures(fdata) {
|
|
22
22
|
const features = new Map();
|
|
23
|
-
for (
|
|
24
|
-
if (
|
|
25
|
-
const f = this.makeFeature(
|
|
23
|
+
for (const entry of fdata) {
|
|
24
|
+
if (entry) {
|
|
25
|
+
const f = this.makeFeature(entry);
|
|
26
26
|
const refName = f.get('refName');
|
|
27
27
|
let bucket = features.get(refName);
|
|
28
28
|
if (!bucket) {
|
|
@@ -54,8 +54,7 @@ class FromConfigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
|
|
|
54
54
|
const { refName, start, end } = region;
|
|
55
55
|
return (0, rxjs_1.ObservableCreate)(async (observer) => {
|
|
56
56
|
const features = this.features.get(refName) || [];
|
|
57
|
-
for (
|
|
58
|
-
const f = features[i];
|
|
57
|
+
for (const f of features) {
|
|
59
58
|
if (f.get('end') > start && f.get('start') < end) {
|
|
60
59
|
observer.next(f);
|
|
61
60
|
}
|
package/dist/index.js
CHANGED
|
@@ -28,13 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.ConfigurationEditor = exports.JsonEditor = void 0;
|
|
30
30
|
const react_1 = require("react");
|
|
31
|
-
const WidgetType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/WidgetType"));
|
|
32
31
|
const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
|
|
33
|
-
const ConfigurationEditorWidget_1 = require("./ConfigurationEditorWidget");
|
|
34
32
|
const FromConfigAdapter_1 = __importDefault(require("./FromConfigAdapter"));
|
|
35
33
|
const FromConfigRegionsAdapter_1 = __importDefault(require("./FromConfigRegionsAdapter"));
|
|
36
34
|
const FromConfigSequenceAdapter_1 = __importDefault(require("./FromConfigSequenceAdapter"));
|
|
37
35
|
const RefNameAliasAdapter_1 = __importDefault(require("./RefNameAliasAdapter"));
|
|
36
|
+
const ConfigurationEditorWidget_1 = __importDefault(require("./ConfigurationEditorWidget"));
|
|
38
37
|
const LazyConfigurationEditorComponent = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ConfigurationEditorWidget/components/ConfigurationEditor'))));
|
|
39
38
|
exports.ConfigurationEditor = LazyConfigurationEditorComponent;
|
|
40
39
|
class default_1 extends Plugin_1.default {
|
|
@@ -47,15 +46,7 @@ class default_1 extends Plugin_1.default {
|
|
|
47
46
|
(0, FromConfigRegionsAdapter_1.default)(pluginManager);
|
|
48
47
|
(0, FromConfigSequenceAdapter_1.default)(pluginManager);
|
|
49
48
|
(0, RefNameAliasAdapter_1.default)(pluginManager);
|
|
50
|
-
|
|
51
|
-
return new WidgetType_1.default({
|
|
52
|
-
name: 'ConfigurationEditorWidget',
|
|
53
|
-
HeadingComponent: ConfigurationEditorWidget_1.HeadingComponent,
|
|
54
|
-
configSchema: ConfigurationEditorWidget_1.configSchema,
|
|
55
|
-
stateModel: (0, ConfigurationEditorWidget_1.stateModelFactory)(pluginManager),
|
|
56
|
-
ReactComponent: LazyConfigurationEditorComponent,
|
|
57
|
-
});
|
|
58
|
-
});
|
|
49
|
+
(0, ConfigurationEditorWidget_1.default)(pluginManager);
|
|
59
50
|
}
|
|
60
51
|
}
|
|
61
52
|
exports.default = default_1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const BooleanEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: boolean;
|
|
@@ -7,4 +7,4 @@ declare const _default: ({ slot, }: {
|
|
|
7
7
|
description: string;
|
|
8
8
|
};
|
|
9
9
|
}) => React.JSX.Element;
|
|
10
|
-
export default
|
|
10
|
+
export default BooleanEditor;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import { Checkbox, FormControl, FormControlLabel, FormHelperText, } from '@mui/material';
|
|
4
|
-
|
|
4
|
+
const BooleanEditor = observer(function ({ slot, }) {
|
|
5
5
|
return (React.createElement(FormControl, null,
|
|
6
6
|
React.createElement(FormControlLabel, { label: slot.name, control: React.createElement(Checkbox, { checked: slot.value, onChange: evt => slot.set(evt.target.checked) }) }),
|
|
7
7
|
React.createElement(FormHelperText, null, slot.description)));
|
|
8
8
|
});
|
|
9
|
+
export default BooleanEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare
|
|
2
|
+
declare const CallbackEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
set: (arg: string) => void;
|
|
5
5
|
description: string;
|
|
@@ -7,6 +7,5 @@ declare function CallbackEditor({ slot, }: {
|
|
|
7
7
|
value: string;
|
|
8
8
|
contextVariable: string;
|
|
9
9
|
};
|
|
10
|
-
})
|
|
11
|
-
|
|
12
|
-
export default _default;
|
|
10
|
+
}) => React.JSX.Element;
|
|
11
|
+
export default CallbackEditor;
|
|
@@ -29,7 +29,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
29
29
|
fontSize: '0.8em',
|
|
30
30
|
},
|
|
31
31
|
}));
|
|
32
|
-
|
|
32
|
+
const CallbackEditor = observer(function ({ slot, }) {
|
|
33
33
|
const { classes } = useStyles();
|
|
34
34
|
const [code, setCode] = useState(slot.value);
|
|
35
35
|
const [error, setCodeError] = useState();
|
|
@@ -75,5 +75,5 @@ function CallbackEditor({ slot, }) {
|
|
|
75
75
|
}
|
|
76
76
|
} },
|
|
77
77
|
React.createElement(HelpIcon, null))))));
|
|
78
|
-
}
|
|
79
|
-
export default
|
|
78
|
+
});
|
|
79
|
+
export default CallbackEditor;
|
|
@@ -8,13 +8,12 @@ export declare const ColorSlot: (props: {
|
|
|
8
8
|
} | undefined;
|
|
9
9
|
onChange: (arg: string) => void;
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
declare
|
|
11
|
+
declare const ColorEditor: (props: {
|
|
12
12
|
slot: {
|
|
13
13
|
name: string;
|
|
14
14
|
value: string;
|
|
15
15
|
description: string;
|
|
16
16
|
set: (arg: string) => void;
|
|
17
17
|
};
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
export default _default;
|
|
18
|
+
}) => React.JSX.Element;
|
|
19
|
+
export default ColorEditor;
|
|
@@ -11,11 +11,11 @@ export const ColorSlot = (props) => {
|
|
|
11
11
|
React.createElement(React.Suspense, { fallback: React.createElement("div", null) },
|
|
12
12
|
React.createElement(ColorPicker, { color: value, onChange: event => onChange(event) })))));
|
|
13
13
|
};
|
|
14
|
-
function
|
|
14
|
+
const ColorEditor = observer(function (props) {
|
|
15
15
|
const { slot } = props;
|
|
16
16
|
return (React.createElement(ColorSlot, { label: slot.name, value: slot.value, onChange: color => slot.set(color), TextFieldProps: {
|
|
17
17
|
helperText: slot.description,
|
|
18
18
|
fullWidth: true,
|
|
19
19
|
} }));
|
|
20
|
-
}
|
|
21
|
-
export default
|
|
20
|
+
});
|
|
21
|
+
export default ColorEditor;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { observer } from 'mobx-react';
|
|
3
|
+
import { isStateTreeNode, getType } from 'mobx-state-tree';
|
|
4
|
+
const HeadingComponent = observer(function ({ model, }) {
|
|
5
|
+
if (model === null || model === void 0 ? void 0 : model.target) {
|
|
6
|
+
if (model.target.type) {
|
|
7
|
+
return React.createElement(React.Fragment, null, `${model.target.type} settings`);
|
|
8
|
+
}
|
|
9
|
+
if (isStateTreeNode(model.target)) {
|
|
10
|
+
const type = getType(model.target);
|
|
11
|
+
if (type === null || type === void 0 ? void 0 : type.name) {
|
|
12
|
+
return React.createElement(React.Fragment, null, `${type.name.replace('ConfigurationSchema', '')} settings`);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return React.createElement(React.Fragment, null, "Settings");
|
|
17
|
+
});
|
|
18
|
+
export default HeadingComponent;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare
|
|
2
|
+
declare const JsonEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
description: string;
|
|
6
6
|
value: unknown;
|
|
7
7
|
set: (arg: unknown) => void;
|
|
8
8
|
};
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
export default _default;
|
|
9
|
+
}) => React.JSX.Element;
|
|
10
|
+
export default JsonEditor;
|
|
@@ -27,7 +27,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
27
27
|
fontFamily,
|
|
28
28
|
},
|
|
29
29
|
}));
|
|
30
|
-
function JsonEditor({ slot, }) {
|
|
30
|
+
const JsonEditor = observer(function JsonEditor({ slot, }) {
|
|
31
31
|
const { classes } = useStyles();
|
|
32
32
|
const [contents, setContents] = useState(JSON.stringify(slot.value, null, 2));
|
|
33
33
|
const [error, setError] = useState();
|
|
@@ -50,5 +50,5 @@ function JsonEditor({ slot, }) {
|
|
|
50
50
|
input: classes.textAreaFont,
|
|
51
51
|
},
|
|
52
52
|
} }))));
|
|
53
|
-
}
|
|
54
|
-
export default
|
|
53
|
+
});
|
|
54
|
+
export default JsonEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const NumberEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name?: string | undefined;
|
|
5
5
|
value: string;
|
|
@@ -8,4 +8,4 @@ declare const _default: ({ slot, }: {
|
|
|
8
8
|
reset?: (() => void) | undefined;
|
|
9
9
|
};
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
export default
|
|
11
|
+
export default NumberEditor;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import ConfigurationTextField from './ConfigurationTextField';
|
|
4
|
-
|
|
4
|
+
const NumberEditor = observer(function ({ slot, }) {
|
|
5
5
|
const [val, setVal] = useState(slot.value);
|
|
6
6
|
useEffect(() => {
|
|
7
7
|
var _a;
|
|
@@ -15,3 +15,4 @@ export default observer(function ({ slot, }) {
|
|
|
15
15
|
}, [slot, val]);
|
|
16
16
|
return (React.createElement(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => setVal(evt.target.value) }));
|
|
17
17
|
});
|
|
18
|
+
export default NumberEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const NumberMapEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: Map<string, string>;
|
|
@@ -8,4 +8,4 @@ declare const _default: ({ slot, }: {
|
|
|
8
8
|
description: string;
|
|
9
9
|
};
|
|
10
10
|
}) => React.JSX.Element;
|
|
11
|
-
export default
|
|
11
|
+
export default NumberMapEditor;
|
|
@@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
11
11
|
marginTop: theme.spacing(1),
|
|
12
12
|
},
|
|
13
13
|
}));
|
|
14
|
-
|
|
14
|
+
const NumberMapEditor = observer(function ({ slot, }) {
|
|
15
15
|
const { classes } = useStyles();
|
|
16
16
|
const [value, setValue] = useState('');
|
|
17
17
|
return (React.createElement(React.Fragment, null,
|
|
@@ -35,3 +35,4 @@ export default observer(function ({ slot, }) {
|
|
|
35
35
|
} }) })),
|
|
36
36
|
React.createElement(FormHelperText, null, slot.description)));
|
|
37
37
|
});
|
|
38
|
+
export default NumberMapEditor;
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IAnyType } from 'mobx-state-tree';
|
|
3
|
-
|
|
4
|
-
props: any;
|
|
5
|
-
ownerState?: Record<string, unknown> | undefined;
|
|
6
|
-
} | undefined) => {
|
|
7
|
-
classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
|
|
8
|
-
theme: import("@mui/material").Theme;
|
|
9
|
-
css: import("tss-react").Css;
|
|
10
|
-
cx: import("tss-react").Cx;
|
|
11
|
-
};
|
|
12
|
-
declare const SlotEditor: ({ slot, slotSchema }: {
|
|
3
|
+
declare const SlotEditor: ({ slot, slotSchema, }: {
|
|
13
4
|
slot: any;
|
|
14
5
|
slotSchema: IAnyType;
|
|
15
6
|
}) => React.JSX.Element;
|
|
@@ -5,7 +5,6 @@ import { getEnv } from '@jbrowse/core/util';
|
|
|
5
5
|
import { FileSelector } from '@jbrowse/core/ui';
|
|
6
6
|
import { getSubType, getUnionSubTypes, } from '@jbrowse/core/util/mst-reflection';
|
|
7
7
|
import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material';
|
|
8
|
-
import { makeStyles } from 'tss-react/mui';
|
|
9
8
|
// icons
|
|
10
9
|
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
|
|
11
10
|
// locals
|
|
@@ -18,12 +17,17 @@ import ConfigurationTextField from './ConfigurationTextField';
|
|
|
18
17
|
import NumberMapEditor from './NumberMapEditor';
|
|
19
18
|
import NumberEditor from './NumberEditor';
|
|
20
19
|
import BooleanEditor from './BooleanEditor';
|
|
21
|
-
|
|
22
|
-
const
|
|
20
|
+
import { useSlotEditorStyles } from './useSlotEditorStyles';
|
|
21
|
+
const StringEditor = observer(function ({ slot, }) {
|
|
22
|
+
return (React.createElement(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => slot.set(evt.target.value) }));
|
|
23
|
+
});
|
|
24
|
+
const TextEditor = observer(function ({ slot, }) {
|
|
25
|
+
return (React.createElement(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => slot.set(evt.target.value) }));
|
|
26
|
+
});
|
|
23
27
|
// checked checkbox, looks like a styled (x)
|
|
24
28
|
const SvgCheckbox = () => (React.createElement(SvgIcon, null,
|
|
25
29
|
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" })));
|
|
26
|
-
const IntegerEditor = observer(({ slot, })
|
|
30
|
+
const IntegerEditor = observer(function ({ slot, }) {
|
|
27
31
|
const [val, setVal] = useState(slot.value);
|
|
28
32
|
useEffect(() => {
|
|
29
33
|
const num = Number.parseInt(val, 10);
|
|
@@ -57,26 +61,7 @@ const valueComponents = {
|
|
|
57
61
|
frozen: JsonEditor,
|
|
58
62
|
configRelationships: JsonEditor,
|
|
59
63
|
};
|
|
60
|
-
|
|
61
|
-
paper: {
|
|
62
|
-
display: 'flex',
|
|
63
|
-
marginBottom: theme.spacing(2),
|
|
64
|
-
position: 'relative',
|
|
65
|
-
},
|
|
66
|
-
paperContent: {
|
|
67
|
-
width: '100%',
|
|
68
|
-
},
|
|
69
|
-
slotModeSwitch: {
|
|
70
|
-
width: 24,
|
|
71
|
-
background: theme.palette.secondary.light,
|
|
72
|
-
display: 'flex',
|
|
73
|
-
justifyContent: 'center',
|
|
74
|
-
alignItems: 'center',
|
|
75
|
-
},
|
|
76
|
-
}));
|
|
77
|
-
const SlotEditor = observer(
|
|
78
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
79
|
-
({ slot, slotSchema }) => {
|
|
64
|
+
const SlotEditor = observer(function ({ slot, slotSchema, }) {
|
|
80
65
|
const { classes } = useSlotEditorStyles();
|
|
81
66
|
const { type } = slot;
|
|
82
67
|
let ValueComponent = slot.isCallback
|
|
@@ -93,8 +78,6 @@ const SlotEditor = observer(
|
|
|
93
78
|
return (React.createElement(Paper, { className: classes.paper },
|
|
94
79
|
React.createElement("div", { className: classes.paperContent },
|
|
95
80
|
React.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
|
|
96
|
-
React.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (React.createElement(IconButton, { onClick: () => slot.isCallback
|
|
97
|
-
? slot.convertToValue()
|
|
98
|
-
: slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}` }, slot.isCallback ? React.createElement(SvgCheckbox, null) : React.createElement(RadioButtonUncheckedIcon, null))) : null)));
|
|
81
|
+
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)));
|
|
99
82
|
});
|
|
100
83
|
export default SlotEditor;
|
|
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
|
|
|
3
3
|
import { Button, FormHelperText, IconButton, InputAdornment, InputLabel, List, ListItem, TextField, } from '@mui/material';
|
|
4
4
|
// icons
|
|
5
5
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
6
|
-
const StringArrayEditor = observer(({ slot, })
|
|
6
|
+
const StringArrayEditor = observer(function ({ slot, }) {
|
|
7
7
|
const [value, setValue] = useState('');
|
|
8
8
|
const [addNew, setAddNew] = useState(false);
|
|
9
9
|
return (React.createElement(React.Fragment, null,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const StringArrayMapEditor: ({ slot, }: {
|
|
3
3
|
slot: {
|
|
4
4
|
name: string;
|
|
5
5
|
value: Map<string, string[]>;
|
|
@@ -11,4 +11,4 @@ declare const _default: ({ slot, }: {
|
|
|
11
11
|
addToKey: (key: string, val: string) => void;
|
|
12
12
|
};
|
|
13
13
|
}) => React.JSX.Element;
|
|
14
|
-
export default
|
|
14
|
+
export default StringArrayMapEditor;
|
|
@@ -12,7 +12,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
12
12
|
marginTop: theme.spacing(1),
|
|
13
13
|
},
|
|
14
14
|
}));
|
|
15
|
-
|
|
15
|
+
const StringArrayMapEditor = observer(function ({ slot, }) {
|
|
16
16
|
const { classes } = useStyles();
|
|
17
17
|
const [value, setValue] = useState('');
|
|
18
18
|
return (React.createElement(React.Fragment, null,
|
|
@@ -40,3 +40,4 @@ export default observer(function ({ slot, }) {
|
|
|
40
40
|
} }) })),
|
|
41
41
|
React.createElement(FormHelperText, null, slot.description)));
|
|
42
42
|
});
|
|
43
|
+
export default StringArrayMapEditor;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MenuItem, Paper, TextField } from '@mui/material';
|
|
3
3
|
import { observer } from 'mobx-react';
|
|
4
|
-
import { useSlotEditorStyles } from './
|
|
5
|
-
const TypeSelector = observer(({ typeNameChoices, slot, slotName, onChange, })
|
|
4
|
+
import { useSlotEditorStyles } from './useSlotEditorStyles';
|
|
5
|
+
const TypeSelector = observer(function ({ typeNameChoices, slot, slotName, onChange, }) {
|
|
6
6
|
const { classes } = useSlotEditorStyles();
|
|
7
7
|
return (React.createElement(Paper, { className: classes.paper },
|
|
8
8
|
React.createElement("div", { className: classes.paperContent },
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const useSlotEditorStyles: (params: void, muiStyleOverridesParams?: {
|
|
2
|
+
props: Record<string, unknown>;
|
|
3
|
+
ownerState?: Record<string, unknown> | undefined;
|
|
4
|
+
} | undefined) => {
|
|
5
|
+
classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
|
|
6
|
+
theme: import("@mui/material").Theme;
|
|
7
|
+
css: import("tss-react").Css;
|
|
8
|
+
cx: import("tss-react").Cx;
|
|
9
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { makeStyles } from 'tss-react/mui';
|
|
2
|
+
export const useSlotEditorStyles = makeStyles()(theme => ({
|
|
3
|
+
paper: {
|
|
4
|
+
display: 'flex',
|
|
5
|
+
marginBottom: theme.spacing(2),
|
|
6
|
+
position: 'relative',
|
|
7
|
+
},
|
|
8
|
+
paperContent: {
|
|
9
|
+
width: '100%',
|
|
10
|
+
},
|
|
11
|
+
slotModeSwitch: {
|
|
12
|
+
width: 24,
|
|
13
|
+
background: theme.palette.secondary.light,
|
|
14
|
+
display: 'flex',
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
},
|
|
18
|
+
}));
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export
|
|
3
|
-
export declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
|
|
4
|
-
export declare const HeadingComponent: ({ model }: {
|
|
5
|
-
model?: {
|
|
6
|
-
target: {
|
|
7
|
-
type: string;
|
|
8
|
-
};
|
|
9
|
-
} | undefined;
|
|
10
|
-
}) => React.JSX.Element;
|
|
1
|
+
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
+
export default function registerConfigurationEditorWidget(pluginManager: PluginManager): void;
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { observer } from 'mobx-react';
|
|
3
|
-
import { isStateTreeNode, getType } from 'mobx-state-tree';
|
|
1
|
+
import { lazy } from 'react';
|
|
4
2
|
import { ConfigurationSchema } from '@jbrowse/core/configuration';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
3
|
+
import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
|
|
4
|
+
import stateModelFactory from './model';
|
|
5
|
+
import HeadingComponent from './components/HeadingComponent';
|
|
6
|
+
const configSchema = ConfigurationSchema('ConfigurationEditorWidget', {});
|
|
7
|
+
const LazyConfigurationEditorComponent = lazy(() => import('./components/ConfigurationEditor'));
|
|
8
|
+
export default function registerConfigurationEditorWidget(pluginManager) {
|
|
9
|
+
pluginManager.addWidgetType(() => {
|
|
10
|
+
return new WidgetType({
|
|
11
|
+
name: 'ConfigurationEditorWidget',
|
|
12
|
+
HeadingComponent,
|
|
13
|
+
configSchema,
|
|
14
|
+
stateModel: stateModelFactory(pluginManager),
|
|
15
|
+
ReactComponent: LazyConfigurationEditorComponent,
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
}
|
|
@@ -15,9 +15,9 @@ export default class FromConfigAdapter extends BaseFeatureDataAdapter {
|
|
|
15
15
|
}
|
|
16
16
|
static makeFeatures(fdata) {
|
|
17
17
|
const features = new Map();
|
|
18
|
-
for (
|
|
19
|
-
if (
|
|
20
|
-
const f = this.makeFeature(
|
|
18
|
+
for (const entry of fdata) {
|
|
19
|
+
if (entry) {
|
|
20
|
+
const f = this.makeFeature(entry);
|
|
21
21
|
const refName = f.get('refName');
|
|
22
22
|
let bucket = features.get(refName);
|
|
23
23
|
if (!bucket) {
|
|
@@ -49,8 +49,7 @@ export default class FromConfigAdapter extends BaseFeatureDataAdapter {
|
|
|
49
49
|
const { refName, start, end } = region;
|
|
50
50
|
return ObservableCreate(async (observer) => {
|
|
51
51
|
const features = this.features.get(refName) || [];
|
|
52
|
-
for (
|
|
53
|
-
const f = features[i];
|
|
52
|
+
for (const f of features) {
|
|
54
53
|
if (f.get('end') > start && f.get('start') < end) {
|
|
55
54
|
observer.next(f);
|
|
56
55
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { lazy } from 'react';
|
|
2
|
-
import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
|
|
3
2
|
import Plugin from '@jbrowse/core/Plugin';
|
|
4
|
-
import { configSchema as ConfigurationEditorConfigSchema, HeadingComponent as ConfigurationEditorHeadingComponent, stateModelFactory as ConfigurationEditorStateModelFactory, } from './ConfigurationEditorWidget';
|
|
5
3
|
import FromConfigAdapterF from './FromConfigAdapter';
|
|
6
4
|
import FromConfigRegionsAdapterF from './FromConfigRegionsAdapter';
|
|
7
5
|
import FromConfigSequenceAdapterF from './FromConfigSequenceAdapter';
|
|
8
6
|
import RefNameAliasAdapterF from './RefNameAliasAdapter';
|
|
7
|
+
import ConfigurationEditorWidgetF from './ConfigurationEditorWidget';
|
|
9
8
|
const LazyConfigurationEditorComponent = lazy(() => import('./ConfigurationEditorWidget/components/ConfigurationEditor'));
|
|
10
9
|
export default class extends Plugin {
|
|
11
10
|
constructor() {
|
|
@@ -17,15 +16,7 @@ export default class extends Plugin {
|
|
|
17
16
|
FromConfigRegionsAdapterF(pluginManager);
|
|
18
17
|
FromConfigSequenceAdapterF(pluginManager);
|
|
19
18
|
RefNameAliasAdapterF(pluginManager);
|
|
20
|
-
pluginManager
|
|
21
|
-
return new WidgetType({
|
|
22
|
-
name: 'ConfigurationEditorWidget',
|
|
23
|
-
HeadingComponent: ConfigurationEditorHeadingComponent,
|
|
24
|
-
configSchema: ConfigurationEditorConfigSchema,
|
|
25
|
-
stateModel: ConfigurationEditorStateModelFactory(pluginManager),
|
|
26
|
-
ReactComponent: LazyConfigurationEditorComponent,
|
|
27
|
-
});
|
|
28
|
-
});
|
|
19
|
+
ConfigurationEditorWidgetF(pluginManager);
|
|
29
20
|
}
|
|
30
21
|
}
|
|
31
22
|
export { default as JsonEditor } from './ConfigurationEditorWidget/components/JsonEditor';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-config",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
4
4
|
"description": "JBrowse 2 config utilities",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@jbrowse/core": "^2.0.0",
|
|
44
44
|
"@mui/material": "^5.0.0",
|
|
45
45
|
"mobx": "^6.0.0",
|
|
46
|
-
"mobx-react": "^
|
|
46
|
+
"mobx-react": "^9.0.0",
|
|
47
47
|
"mobx-state-tree": "^5.0.0",
|
|
48
48
|
"react": ">=16.8.0",
|
|
49
49
|
"react-dom": ">=16.8.0",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"distModule": "esm/index.js",
|
|
57
57
|
"srcModule": "src/index.ts",
|
|
58
58
|
"module": "esm/index.js",
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
|
|
60
60
|
}
|