@jbrowse/app-core 2.11.2 → 2.12.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/ui/App/DrawerControls.d.ts +6 -0
- package/dist/ui/App/DrawerControls.js +56 -0
- package/dist/ui/App/DrawerHeader.d.ts +2 -1
- package/dist/ui/App/DrawerHeader.js +11 -92
- package/dist/ui/App/DrawerWidget.js +9 -6
- package/dist/ui/App/DrawerWidgetSelector.d.ts +6 -0
- package/dist/ui/App/DrawerWidgetSelector.js +55 -0
- package/dist/ui/App/ModalWidget.d.ts +7 -0
- package/dist/ui/App/ModalWidget.js +83 -0
- package/esm/ui/App/DrawerControls.d.ts +6 -0
- package/esm/ui/App/DrawerControls.js +28 -0
- package/esm/ui/App/DrawerHeader.d.ts +2 -1
- package/esm/ui/App/DrawerHeader.js +10 -68
- package/esm/ui/App/DrawerWidget.js +9 -6
- package/esm/ui/App/DrawerWidgetSelector.d.ts +6 -0
- package/esm/ui/App/DrawerWidgetSelector.js +50 -0
- package/esm/ui/App/ModalWidget.d.ts +7 -0
- package/esm/ui/App/ModalWidget.js +55 -0
- package/package.json +3 -3
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
+
declare const DrawerControls: ({ session, }: {
|
|
4
|
+
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
|
+
}) => React.JSX.Element;
|
|
6
|
+
export default DrawerControls;
|
|
@@ -0,0 +1,56 @@
|
|
|
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
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const material_1 = require("@mui/material");
|
|
31
|
+
const mobx_react_1 = require("mobx-react");
|
|
32
|
+
// icons
|
|
33
|
+
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
34
|
+
const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
|
|
35
|
+
const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
|
|
36
|
+
const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
37
|
+
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
38
|
+
const { drawerPosition, visibleWidget } = session;
|
|
39
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
40
|
+
react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
|
|
41
|
+
react_1.default.createElement(MoreVert_1.default, null)),
|
|
42
|
+
react_1.default.createElement(material_1.Tooltip, { title: "Minimize drawer" },
|
|
43
|
+
react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
|
|
44
|
+
session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
|
|
45
|
+
session.minimizeWidgetDrawer();
|
|
46
|
+
} },
|
|
47
|
+
react_1.default.createElement(Minimize_1.default, null))),
|
|
48
|
+
react_1.default.createElement(material_1.Tooltip, { title: "Close drawer" },
|
|
49
|
+
react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
|
|
50
|
+
react_1.default.createElement(Close_1.default, null))),
|
|
51
|
+
react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
|
|
52
|
+
session.setDrawerPosition(option);
|
|
53
|
+
setAnchorEl(null);
|
|
54
|
+
} }, option))))));
|
|
55
|
+
});
|
|
56
|
+
exports.default = DrawerControls;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
-
declare const DrawerHeader: ({ session, setToolbarHeight, }: {
|
|
3
|
+
declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
|
|
4
4
|
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
5
|
setToolbarHeight: (arg: number) => void;
|
|
6
|
+
onPopoutDrawer: () => void;
|
|
6
7
|
}) => React.JSX.Element;
|
|
7
8
|
export default DrawerHeader;
|
|
@@ -1,55 +1,21 @@
|
|
|
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
|
-
};
|
|
25
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
4
|
};
|
|
28
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const react_1 =
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
30
7
|
const material_1 = require("@mui/material");
|
|
31
8
|
const mui_1 = require("tss-react/mui");
|
|
32
9
|
const mobx_react_1 = require("mobx-react");
|
|
33
|
-
|
|
10
|
+
// locals
|
|
11
|
+
const DrawerWidgetSelector_1 = __importDefault(require("./DrawerWidgetSelector"));
|
|
12
|
+
const DrawerControls_1 = __importDefault(require("./DrawerControls"));
|
|
34
13
|
// icons
|
|
35
|
-
const
|
|
36
|
-
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
37
|
-
const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
|
|
38
|
-
const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
|
|
14
|
+
const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
|
|
39
15
|
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
40
|
-
formControl: {
|
|
41
|
-
margin: 0,
|
|
42
|
-
},
|
|
43
16
|
spacer: {
|
|
44
17
|
flexGrow: 1,
|
|
45
18
|
},
|
|
46
|
-
drawerSelect: {
|
|
47
|
-
margin: 0,
|
|
48
|
-
color: theme.palette.secondary.contrastText,
|
|
49
|
-
},
|
|
50
|
-
dropDownIcon: {
|
|
51
|
-
color: theme.palette.secondary.contrastText,
|
|
52
|
-
},
|
|
53
19
|
headerFocused: {
|
|
54
20
|
background: theme.palette.secondary.main,
|
|
55
21
|
},
|
|
@@ -57,7 +23,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
57
23
|
background: theme.palette.secondary.dark,
|
|
58
24
|
},
|
|
59
25
|
}));
|
|
60
|
-
const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
|
|
26
|
+
const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, onPopoutDrawer, }) {
|
|
61
27
|
var _a, _b;
|
|
62
28
|
const { classes } = useStyles();
|
|
63
29
|
const focusedViewId = session.focusedViewId;
|
|
@@ -67,58 +33,11 @@ const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarH
|
|
|
67
33
|
? classes.headerFocused
|
|
68
34
|
: classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
|
|
69
35
|
react_1.default.createElement(material_1.Toolbar, { disableGutters: true },
|
|
70
|
-
react_1.default.createElement(
|
|
36
|
+
react_1.default.createElement(DrawerWidgetSelector_1.default, { session: session }),
|
|
37
|
+
react_1.default.createElement(material_1.Tooltip, { title: "Open drawer in dialog" },
|
|
38
|
+
react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => onPopoutDrawer() },
|
|
39
|
+
react_1.default.createElement(Launch_1.default, null))),
|
|
71
40
|
react_1.default.createElement("div", { className: classes.spacer }),
|
|
72
|
-
react_1.default.createElement(
|
|
73
|
-
});
|
|
74
|
-
const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
75
|
-
const { visibleWidget, activeWidgets } = session;
|
|
76
|
-
const { classes } = useStyles();
|
|
77
|
-
const { pluginManager } = (0, util_1.getEnv)(session);
|
|
78
|
-
return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
79
|
-
react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
|
|
80
|
-
const widget = session.activeWidgets.get(widgetId);
|
|
81
|
-
if (!widget) {
|
|
82
|
-
return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
|
|
83
|
-
}
|
|
84
|
-
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
85
|
-
const { HeadingComponent, heading } = widgetType;
|
|
86
|
-
return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
|
|
87
|
-
}, onChange: e => {
|
|
88
|
-
const w = session.activeWidgets.get(e.target.value);
|
|
89
|
-
if (w) {
|
|
90
|
-
session.showWidget(w);
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
session.notify(`Widget not found ${e.target.value}`, 'warning');
|
|
94
|
-
}
|
|
95
|
-
} }, [...activeWidgets.values()].map(widget => {
|
|
96
|
-
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
97
|
-
const { HeadingComponent, heading } = widgetType;
|
|
98
|
-
return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
|
|
99
|
-
HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading)),
|
|
100
|
-
react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
|
|
101
|
-
react_1.default.createElement(Delete_1.default, null))));
|
|
102
|
-
}))));
|
|
103
|
-
});
|
|
104
|
-
const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
105
|
-
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
106
|
-
const { drawerPosition, visibleWidget } = session;
|
|
107
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
108
|
-
react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
|
|
109
|
-
react_1.default.createElement(MoreVert_1.default, null)),
|
|
110
|
-
react_1.default.createElement(material_1.Tooltip, { title: "Minimize drawer" },
|
|
111
|
-
react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
|
|
112
|
-
session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
|
|
113
|
-
session.minimizeWidgetDrawer();
|
|
114
|
-
} },
|
|
115
|
-
react_1.default.createElement(Minimize_1.default, null))),
|
|
116
|
-
react_1.default.createElement(material_1.Tooltip, { title: "Close drawer" },
|
|
117
|
-
react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
|
|
118
|
-
react_1.default.createElement(Close_1.default, null))),
|
|
119
|
-
react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
|
|
120
|
-
session.setDrawerPosition(option);
|
|
121
|
-
setAnchorEl(null);
|
|
122
|
-
} }, option))))));
|
|
41
|
+
react_1.default.createElement(DrawerControls_1.default, { session: session }))));
|
|
123
42
|
});
|
|
124
43
|
exports.default = DrawerHeader;
|
|
@@ -30,11 +30,11 @@ const react_1 = __importStar(require("react"));
|
|
|
30
30
|
const react_error_boundary_1 = require("react-error-boundary");
|
|
31
31
|
const mobx_react_1 = require("mobx-react");
|
|
32
32
|
const util_1 = require("@jbrowse/core/util");
|
|
33
|
-
const
|
|
34
|
-
const ErrorMessage_1 = __importDefault(require("@jbrowse/core/ui/ErrorMessage"));
|
|
33
|
+
const ui_1 = require("@jbrowse/core/ui");
|
|
35
34
|
// locals
|
|
36
35
|
const Drawer_1 = __importDefault(require("./Drawer"));
|
|
37
36
|
const DrawerHeader_1 = __importDefault(require("./DrawerHeader"));
|
|
37
|
+
const ModalWidget = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ModalWidget'))));
|
|
38
38
|
const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
39
39
|
const { visibleWidget } = session;
|
|
40
40
|
const { pluginManager } = (0, util_1.getEnv)(session);
|
|
@@ -48,11 +48,14 @@ const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
|
48
48
|
// height want to be able to fill the contained, minus the toolbar height
|
|
49
49
|
// (the position static/sticky is included in AutoSizer estimates)
|
|
50
50
|
const [toolbarHeight, setToolbarHeight] = (0, react_1.useState)(0);
|
|
51
|
+
const [popoutDrawer, setPopoutDrawer] = (0, react_1.useState)(false);
|
|
51
52
|
return (react_1.default.createElement(Drawer_1.default, { session: session },
|
|
52
|
-
react_1.default.createElement(DrawerHeader_1.default, { session: session, setToolbarHeight: setToolbarHeight }),
|
|
53
|
-
react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(
|
|
54
|
-
react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(
|
|
53
|
+
react_1.default.createElement(DrawerHeader_1.default, { onPopoutDrawer: () => setPopoutDrawer(true), session: session, setToolbarHeight: setToolbarHeight }),
|
|
54
|
+
react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
|
|
55
|
+
react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ui_1.ErrorMessage, { error: error }) }, DrawerComponent ? (popoutDrawer ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
56
|
+
react_1.default.createElement("div", null, "Opened in dialog..."),
|
|
57
|
+
react_1.default.createElement(ModalWidget, { session: session, onClose: () => setPopoutDrawer(false) }))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
55
58
|
react_1.default.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
|
|
56
|
-
react_1.default.createElement("div", { style: { height: 300 } }))) : null))));
|
|
59
|
+
react_1.default.createElement("div", { style: { height: 300 } })))) : null))));
|
|
57
60
|
});
|
|
58
61
|
exports.default = DrawerWidget;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
+
declare const DrawerWidgetSelector: ({ session, }: {
|
|
4
|
+
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
|
+
}) => React.JSX.Element;
|
|
6
|
+
export default DrawerWidgetSelector;
|
|
@@ -0,0 +1,55 @@
|
|
|
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 material_1 = require("@mui/material");
|
|
8
|
+
const mui_1 = require("tss-react/mui");
|
|
9
|
+
const mobx_react_1 = require("mobx-react");
|
|
10
|
+
const util_1 = require("@jbrowse/core/util");
|
|
11
|
+
// icons
|
|
12
|
+
const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
|
|
13
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
14
|
+
formControl: {
|
|
15
|
+
margin: 0,
|
|
16
|
+
},
|
|
17
|
+
drawerSelect: {
|
|
18
|
+
margin: 0,
|
|
19
|
+
color: theme.palette.secondary.contrastText,
|
|
20
|
+
},
|
|
21
|
+
dropDownIcon: {
|
|
22
|
+
color: theme.palette.secondary.contrastText,
|
|
23
|
+
},
|
|
24
|
+
}));
|
|
25
|
+
const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, }) {
|
|
26
|
+
const { visibleWidget, activeWidgets } = session;
|
|
27
|
+
const { classes } = useStyles();
|
|
28
|
+
const { pluginManager } = (0, util_1.getEnv)(session);
|
|
29
|
+
return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
30
|
+
react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
|
|
31
|
+
const widget = session.activeWidgets.get(widgetId);
|
|
32
|
+
if (!widget) {
|
|
33
|
+
return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
|
|
34
|
+
}
|
|
35
|
+
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
36
|
+
const { HeadingComponent, heading } = widgetType;
|
|
37
|
+
return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
|
|
38
|
+
}, onChange: e => {
|
|
39
|
+
const w = session.activeWidgets.get(e.target.value);
|
|
40
|
+
if (w) {
|
|
41
|
+
session.showWidget(w);
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
session.notify(`Widget not found ${e.target.value}`, 'warning');
|
|
45
|
+
}
|
|
46
|
+
} }, [...activeWidgets.values()].map(widget => {
|
|
47
|
+
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
48
|
+
const { HeadingComponent, heading } = widgetType;
|
|
49
|
+
return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
|
|
50
|
+
HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading)),
|
|
51
|
+
react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
|
|
52
|
+
react_1.default.createElement(Delete_1.default, null))));
|
|
53
|
+
}))));
|
|
54
|
+
});
|
|
55
|
+
exports.default = DrawerWidgetSelector;
|
|
@@ -0,0 +1,83 @@
|
|
|
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
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const material_1 = require("@mui/material");
|
|
31
|
+
const ui_1 = require("@jbrowse/core/ui");
|
|
32
|
+
const mui_1 = require("tss-react/mui");
|
|
33
|
+
const mobx_react_1 = require("mobx-react");
|
|
34
|
+
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
35
|
+
// icons
|
|
36
|
+
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
37
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
38
|
+
paper: {
|
|
39
|
+
overflow: 'auto',
|
|
40
|
+
minWidth: 800,
|
|
41
|
+
},
|
|
42
|
+
closeButton: {
|
|
43
|
+
position: 'absolute',
|
|
44
|
+
right: theme.spacing(1),
|
|
45
|
+
top: theme.spacing(1),
|
|
46
|
+
color: theme.palette.grey[500],
|
|
47
|
+
},
|
|
48
|
+
}));
|
|
49
|
+
const DrawerAppBar = (0, mobx_react_1.observer)(function DrawerAppBar({ session, onClose, }) {
|
|
50
|
+
const { classes } = useStyles();
|
|
51
|
+
const { visibleWidget } = session;
|
|
52
|
+
const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
|
|
53
|
+
if (!visibleWidget) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
|
|
57
|
+
return (react_1.default.createElement(material_1.AppBar, { position: "static" },
|
|
58
|
+
react_1.default.createElement(material_1.Toolbar, null, HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: visibleWidget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6" }, heading))),
|
|
59
|
+
react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: onClose },
|
|
60
|
+
react_1.default.createElement(Close_1.default, null))));
|
|
61
|
+
});
|
|
62
|
+
const ModalWidget = (0, mobx_react_1.observer)(function ({ session, onClose, }) {
|
|
63
|
+
const { classes } = useStyles();
|
|
64
|
+
const { visibleWidget } = session;
|
|
65
|
+
const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
|
|
66
|
+
if (!visibleWidget) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
|
|
70
|
+
const Component = visibleWidget
|
|
71
|
+
? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
|
|
72
|
+
session,
|
|
73
|
+
model: visibleWidget,
|
|
74
|
+
})
|
|
75
|
+
: null;
|
|
76
|
+
return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: react_1.default.createElement(DrawerAppBar, { onClose: onClose, session: session }) }, Component ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading...") },
|
|
77
|
+
react_1.default.createElement(material_1.Paper, { className: classes.paper },
|
|
78
|
+
react_1.default.createElement(Component, { model: visibleWidget, session: session, modal: true, overrideDimensions: {
|
|
79
|
+
height: (window.innerHeight * 5) / 8,
|
|
80
|
+
width: 800,
|
|
81
|
+
} })))) : null));
|
|
82
|
+
});
|
|
83
|
+
exports.default = ModalWidget;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
+
declare const DrawerControls: ({ session, }: {
|
|
4
|
+
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
|
+
}) => React.JSX.Element;
|
|
6
|
+
export default DrawerControls;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
|
|
3
|
+
import { observer } from 'mobx-react';
|
|
4
|
+
// icons
|
|
5
|
+
import CloseIcon from '@mui/icons-material/Close';
|
|
6
|
+
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
7
|
+
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
8
|
+
const DrawerControls = observer(function ({ session, }) {
|
|
9
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
10
|
+
const { drawerPosition, visibleWidget } = session;
|
|
11
|
+
return (React.createElement(React.Fragment, null,
|
|
12
|
+
React.createElement(IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
|
|
13
|
+
React.createElement(MoreVertIcon, null)),
|
|
14
|
+
React.createElement(Tooltip, { title: "Minimize drawer" },
|
|
15
|
+
React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
|
|
16
|
+
session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
|
|
17
|
+
session.minimizeWidgetDrawer();
|
|
18
|
+
} },
|
|
19
|
+
React.createElement(MinimizeIcon, null))),
|
|
20
|
+
React.createElement(Tooltip, { title: "Close drawer" },
|
|
21
|
+
React.createElement(IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
|
|
22
|
+
React.createElement(CloseIcon, null))),
|
|
23
|
+
React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
|
|
24
|
+
session.setDrawerPosition(option);
|
|
25
|
+
setAnchorEl(null);
|
|
26
|
+
} }, option))))));
|
|
27
|
+
});
|
|
28
|
+
export default DrawerControls;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
-
declare const DrawerHeader: ({ session, setToolbarHeight, }: {
|
|
3
|
+
declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
|
|
4
4
|
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
5
|
setToolbarHeight: (arg: number) => void;
|
|
6
|
+
onPopoutDrawer: () => void;
|
|
6
7
|
}) => React.JSX.Element;
|
|
7
8
|
export default DrawerHeader;
|
|
@@ -1,27 +1,16 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import { AppBar,
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material';
|
|
3
3
|
import { makeStyles } from 'tss-react/mui';
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
|
-
|
|
5
|
+
// locals
|
|
6
|
+
import DrawerWidgetSelector from './DrawerWidgetSelector';
|
|
7
|
+
import DrawerControls from './DrawerControls';
|
|
6
8
|
// icons
|
|
7
|
-
import
|
|
8
|
-
import CloseIcon from '@mui/icons-material/Close';
|
|
9
|
-
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
10
|
-
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
9
|
+
import LaunchIcon from '@mui/icons-material/Launch';
|
|
11
10
|
const useStyles = makeStyles()(theme => ({
|
|
12
|
-
formControl: {
|
|
13
|
-
margin: 0,
|
|
14
|
-
},
|
|
15
11
|
spacer: {
|
|
16
12
|
flexGrow: 1,
|
|
17
13
|
},
|
|
18
|
-
drawerSelect: {
|
|
19
|
-
margin: 0,
|
|
20
|
-
color: theme.palette.secondary.contrastText,
|
|
21
|
-
},
|
|
22
|
-
dropDownIcon: {
|
|
23
|
-
color: theme.palette.secondary.contrastText,
|
|
24
|
-
},
|
|
25
14
|
headerFocused: {
|
|
26
15
|
background: theme.palette.secondary.main,
|
|
27
16
|
},
|
|
@@ -29,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
29
18
|
background: theme.palette.secondary.dark,
|
|
30
19
|
},
|
|
31
20
|
}));
|
|
32
|
-
const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
|
|
21
|
+
const DrawerHeader = observer(function ({ session, setToolbarHeight, onPopoutDrawer, }) {
|
|
33
22
|
var _a, _b;
|
|
34
23
|
const { classes } = useStyles();
|
|
35
24
|
const focusedViewId = session.focusedViewId;
|
|
@@ -40,57 +29,10 @@ const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
|
|
|
40
29
|
: classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
|
|
41
30
|
React.createElement(Toolbar, { disableGutters: true },
|
|
42
31
|
React.createElement(DrawerWidgetSelector, { session: session }),
|
|
32
|
+
React.createElement(Tooltip, { title: "Open drawer in dialog" },
|
|
33
|
+
React.createElement(IconButton, { color: "inherit", onClick: () => onPopoutDrawer() },
|
|
34
|
+
React.createElement(LaunchIcon, null))),
|
|
43
35
|
React.createElement("div", { className: classes.spacer }),
|
|
44
36
|
React.createElement(DrawerControls, { session: session }))));
|
|
45
37
|
});
|
|
46
|
-
const DrawerWidgetSelector = observer(function ({ session, }) {
|
|
47
|
-
const { visibleWidget, activeWidgets } = session;
|
|
48
|
-
const { classes } = useStyles();
|
|
49
|
-
const { pluginManager } = getEnv(session);
|
|
50
|
-
return (React.createElement(FormControl, { className: classes.formControl },
|
|
51
|
-
React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
|
|
52
|
-
const widget = session.activeWidgets.get(widgetId);
|
|
53
|
-
if (!widget) {
|
|
54
|
-
return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
|
|
55
|
-
}
|
|
56
|
-
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
57
|
-
const { HeadingComponent, heading } = widgetType;
|
|
58
|
-
return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
|
|
59
|
-
}, onChange: e => {
|
|
60
|
-
const w = session.activeWidgets.get(e.target.value);
|
|
61
|
-
if (w) {
|
|
62
|
-
session.showWidget(w);
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
session.notify(`Widget not found ${e.target.value}`, 'warning');
|
|
66
|
-
}
|
|
67
|
-
} }, [...activeWidgets.values()].map(widget => {
|
|
68
|
-
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
69
|
-
const { HeadingComponent, heading } = widgetType;
|
|
70
|
-
return (React.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
|
|
71
|
-
HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
|
|
72
|
-
React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
|
|
73
|
-
React.createElement(DeleteIcon, null))));
|
|
74
|
-
}))));
|
|
75
|
-
});
|
|
76
|
-
const DrawerControls = observer(function ({ session, }) {
|
|
77
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
78
|
-
const { drawerPosition, visibleWidget } = session;
|
|
79
|
-
return (React.createElement(React.Fragment, null,
|
|
80
|
-
React.createElement(IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
|
|
81
|
-
React.createElement(MoreVertIcon, null)),
|
|
82
|
-
React.createElement(Tooltip, { title: "Minimize drawer" },
|
|
83
|
-
React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
|
|
84
|
-
session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
|
|
85
|
-
session.minimizeWidgetDrawer();
|
|
86
|
-
} },
|
|
87
|
-
React.createElement(MinimizeIcon, null))),
|
|
88
|
-
React.createElement(Tooltip, { title: "Close drawer" },
|
|
89
|
-
React.createElement(IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
|
|
90
|
-
React.createElement(CloseIcon, null))),
|
|
91
|
-
React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
|
|
92
|
-
session.setDrawerPosition(option);
|
|
93
|
-
setAnchorEl(null);
|
|
94
|
-
} }, option))))));
|
|
95
|
-
});
|
|
96
38
|
export default DrawerHeader;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React, { Suspense, useState } from 'react';
|
|
1
|
+
import React, { Suspense, lazy, useState } from 'react';
|
|
2
2
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
3
3
|
import { observer } from 'mobx-react';
|
|
4
4
|
import { getEnv } from '@jbrowse/core/util';
|
|
5
|
-
import LoadingEllipses from '@jbrowse/core/ui
|
|
6
|
-
import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
|
|
5
|
+
import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
|
|
7
6
|
// locals
|
|
8
7
|
import Drawer from './Drawer';
|
|
9
8
|
import DrawerHeader from './DrawerHeader';
|
|
9
|
+
const ModalWidget = lazy(() => import('./ModalWidget'));
|
|
10
10
|
const DrawerWidget = observer(function ({ session, }) {
|
|
11
11
|
const { visibleWidget } = session;
|
|
12
12
|
const { pluginManager } = getEnv(session);
|
|
@@ -20,11 +20,14 @@ const DrawerWidget = observer(function ({ session, }) {
|
|
|
20
20
|
// height want to be able to fill the contained, minus the toolbar height
|
|
21
21
|
// (the position static/sticky is included in AutoSizer estimates)
|
|
22
22
|
const [toolbarHeight, setToolbarHeight] = useState(0);
|
|
23
|
+
const [popoutDrawer, setPopoutDrawer] = useState(false);
|
|
23
24
|
return (React.createElement(Drawer, { session: session },
|
|
24
|
-
React.createElement(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }),
|
|
25
|
+
React.createElement(DrawerHeader, { onPopoutDrawer: () => setPopoutDrawer(true), session: session, setToolbarHeight: setToolbarHeight }),
|
|
25
26
|
React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
|
|
26
|
-
React.createElement(ErrorBoundary, { FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) }, DrawerComponent ? (React.createElement(React.Fragment, null,
|
|
27
|
+
React.createElement(ErrorBoundary, { FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) }, DrawerComponent ? (popoutDrawer ? (React.createElement(React.Fragment, null,
|
|
28
|
+
React.createElement("div", null, "Opened in dialog..."),
|
|
29
|
+
React.createElement(ModalWidget, { session: session, onClose: () => setPopoutDrawer(false) }))) : (React.createElement(React.Fragment, null,
|
|
27
30
|
React.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
|
|
28
|
-
React.createElement("div", { style: { height: 300 } }))) : null))));
|
|
31
|
+
React.createElement("div", { style: { height: 300 } })))) : null))));
|
|
29
32
|
});
|
|
30
33
|
export default DrawerWidget;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
|
|
3
|
+
declare const DrawerWidgetSelector: ({ session, }: {
|
|
4
|
+
session: SessionWithFocusedViewAndDrawerWidgets;
|
|
5
|
+
}) => React.JSX.Element;
|
|
6
|
+
export default DrawerWidgetSelector;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormControl, IconButton, MenuItem, Select, Typography, } from '@mui/material';
|
|
3
|
+
import { makeStyles } from 'tss-react/mui';
|
|
4
|
+
import { observer } from 'mobx-react';
|
|
5
|
+
import { getEnv } from '@jbrowse/core/util';
|
|
6
|
+
// icons
|
|
7
|
+
import DeleteIcon from '@mui/icons-material/Delete';
|
|
8
|
+
const useStyles = makeStyles()(theme => ({
|
|
9
|
+
formControl: {
|
|
10
|
+
margin: 0,
|
|
11
|
+
},
|
|
12
|
+
drawerSelect: {
|
|
13
|
+
margin: 0,
|
|
14
|
+
color: theme.palette.secondary.contrastText,
|
|
15
|
+
},
|
|
16
|
+
dropDownIcon: {
|
|
17
|
+
color: theme.palette.secondary.contrastText,
|
|
18
|
+
},
|
|
19
|
+
}));
|
|
20
|
+
const DrawerWidgetSelector = observer(function ({ session, }) {
|
|
21
|
+
const { visibleWidget, activeWidgets } = session;
|
|
22
|
+
const { classes } = useStyles();
|
|
23
|
+
const { pluginManager } = getEnv(session);
|
|
24
|
+
return (React.createElement(FormControl, { className: classes.formControl },
|
|
25
|
+
React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
|
|
26
|
+
const widget = session.activeWidgets.get(widgetId);
|
|
27
|
+
if (!widget) {
|
|
28
|
+
return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
|
|
29
|
+
}
|
|
30
|
+
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
31
|
+
const { HeadingComponent, heading } = widgetType;
|
|
32
|
+
return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
|
|
33
|
+
}, onChange: e => {
|
|
34
|
+
const w = session.activeWidgets.get(e.target.value);
|
|
35
|
+
if (w) {
|
|
36
|
+
session.showWidget(w);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
session.notify(`Widget not found ${e.target.value}`, 'warning');
|
|
40
|
+
}
|
|
41
|
+
} }, [...activeWidgets.values()].map(widget => {
|
|
42
|
+
const widgetType = pluginManager.getWidgetType(widget.type);
|
|
43
|
+
const { HeadingComponent, heading } = widgetType;
|
|
44
|
+
return (React.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
|
|
45
|
+
HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
|
|
46
|
+
React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
|
|
47
|
+
React.createElement(DeleteIcon, null))));
|
|
48
|
+
}))));
|
|
49
|
+
});
|
|
50
|
+
export default DrawerWidgetSelector;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { Suspense } from 'react';
|
|
2
|
+
import { AppBar, IconButton, Paper, Toolbar, Typography } from '@mui/material';
|
|
3
|
+
import { Dialog } from '@jbrowse/core/ui';
|
|
4
|
+
import { makeStyles } from 'tss-react/mui';
|
|
5
|
+
import { observer } from 'mobx-react';
|
|
6
|
+
import { getEnv } from 'mobx-state-tree';
|
|
7
|
+
// icons
|
|
8
|
+
import CloseIcon from '@mui/icons-material/Close';
|
|
9
|
+
const useStyles = makeStyles()(theme => ({
|
|
10
|
+
paper: {
|
|
11
|
+
overflow: 'auto',
|
|
12
|
+
minWidth: 800,
|
|
13
|
+
},
|
|
14
|
+
closeButton: {
|
|
15
|
+
position: 'absolute',
|
|
16
|
+
right: theme.spacing(1),
|
|
17
|
+
top: theme.spacing(1),
|
|
18
|
+
color: theme.palette.grey[500],
|
|
19
|
+
},
|
|
20
|
+
}));
|
|
21
|
+
const DrawerAppBar = observer(function DrawerAppBar({ session, onClose, }) {
|
|
22
|
+
const { classes } = useStyles();
|
|
23
|
+
const { visibleWidget } = session;
|
|
24
|
+
const { pluginManager } = getEnv(session);
|
|
25
|
+
if (!visibleWidget) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
|
|
29
|
+
return (React.createElement(AppBar, { position: "static" },
|
|
30
|
+
React.createElement(Toolbar, null, HeadingComponent ? (React.createElement(HeadingComponent, { model: visibleWidget })) : (React.createElement(Typography, { variant: "h6" }, heading))),
|
|
31
|
+
React.createElement(IconButton, { className: classes.closeButton, onClick: onClose },
|
|
32
|
+
React.createElement(CloseIcon, null))));
|
|
33
|
+
});
|
|
34
|
+
const ModalWidget = observer(function ({ session, onClose, }) {
|
|
35
|
+
const { classes } = useStyles();
|
|
36
|
+
const { visibleWidget } = session;
|
|
37
|
+
const { pluginManager } = getEnv(session);
|
|
38
|
+
if (!visibleWidget) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
|
|
42
|
+
const Component = visibleWidget
|
|
43
|
+
? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
|
|
44
|
+
session,
|
|
45
|
+
model: visibleWidget,
|
|
46
|
+
})
|
|
47
|
+
: null;
|
|
48
|
+
return (React.createElement(Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: React.createElement(DrawerAppBar, { onClose: onClose, session: session }) }, Component ? (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading...") },
|
|
49
|
+
React.createElement(Paper, { className: classes.paper },
|
|
50
|
+
React.createElement(Component, { model: visibleWidget, session: session, modal: true, overrideDimensions: {
|
|
51
|
+
height: (window.innerHeight * 5) / 8,
|
|
52
|
+
width: 800,
|
|
53
|
+
} })))) : null));
|
|
54
|
+
});
|
|
55
|
+
export default ModalWidget;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/app-core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.0",
|
|
4
4
|
"description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@babel/runtime": "^7.16.3",
|
|
45
|
-
"@jbrowse/product-core": "^2.
|
|
45
|
+
"@jbrowse/product-core": "^2.12.0",
|
|
46
46
|
"@mui/icons-material": "^5.0.0",
|
|
47
47
|
"@mui/material": "^5.10.17",
|
|
48
48
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "935f2602d29abc737bb1f493a922b6218d023ae2"
|
|
64
64
|
}
|