@jbrowse/app-core 2.7.0 → 2.7.2
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.
|
@@ -31,26 +31,14 @@ const material_1 = require("@mui/material");
|
|
|
31
31
|
const mui_1 = require("tss-react/mui");
|
|
32
32
|
const mobx_react_1 = require("mobx-react");
|
|
33
33
|
const util_1 = require("@jbrowse/core/util");
|
|
34
|
-
const clsx_1 = __importDefault(require("clsx"));
|
|
35
|
-
// icons
|
|
36
|
-
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
37
|
-
const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
|
|
38
|
-
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
|
|
39
34
|
// locals
|
|
40
|
-
const
|
|
41
|
-
const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
|
|
35
|
+
const ViewHeader_1 = __importDefault(require("./ViewHeader"));
|
|
42
36
|
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
43
37
|
viewContainer: {
|
|
44
38
|
overflow: 'hidden',
|
|
45
39
|
margin: theme.spacing(0.5),
|
|
46
40
|
padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
|
|
47
41
|
},
|
|
48
|
-
icon: {
|
|
49
|
-
color: theme.palette.secondary.contrastText,
|
|
50
|
-
},
|
|
51
|
-
grow: {
|
|
52
|
-
flexGrow: 1,
|
|
53
|
-
},
|
|
54
42
|
focusedView: {
|
|
55
43
|
background: theme.palette.secondary.main,
|
|
56
44
|
},
|
|
@@ -59,17 +47,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
59
47
|
},
|
|
60
48
|
}));
|
|
61
49
|
const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
|
|
62
|
-
const { classes } = useStyles();
|
|
63
50
|
const theme = (0, material_1.useTheme)();
|
|
64
51
|
const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
|
|
65
|
-
const
|
|
52
|
+
const { classes, cx } = useStyles();
|
|
66
53
|
const session = (0, util_1.getSession)(view);
|
|
67
|
-
// scroll the view into view when first mounted. note: this effect will run
|
|
68
|
-
// only once, because of the empty array second param
|
|
69
|
-
(0, react_1.useEffect)(() => {
|
|
70
|
-
var _a, _b;
|
|
71
|
-
(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
|
|
72
|
-
}, []);
|
|
73
54
|
(0, react_1.useEffect)(() => {
|
|
74
55
|
function handleSelectView(e) {
|
|
75
56
|
if (e.target instanceof Element) {
|
|
@@ -85,17 +66,10 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
|
|
|
85
66
|
document.removeEventListener('keydown', handleSelectView);
|
|
86
67
|
};
|
|
87
68
|
}, [ref, session, view]);
|
|
88
|
-
return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: (
|
|
69
|
+
return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: cx(classes.viewContainer, session.focusedViewId === view.id
|
|
89
70
|
? classes.focusedView
|
|
90
71
|
: classes.unfocusedView) },
|
|
91
|
-
react_1.default.createElement(
|
|
92
|
-
react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
|
|
93
|
-
react_1.default.createElement("div", { className: classes.grow }),
|
|
94
|
-
react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
|
|
95
|
-
react_1.default.createElement("div", { className: classes.grow }),
|
|
96
|
-
react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
|
|
97
|
-
react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
|
|
98
|
-
react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
|
|
72
|
+
react_1.default.createElement(ViewHeader_1.default, { view: view, onClose: onClose, onMinimize: onMinimize }),
|
|
99
73
|
react_1.default.createElement(material_1.Paper, null, children)));
|
|
100
74
|
});
|
|
101
75
|
exports.default = ViewContainer;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
|
|
3
|
+
declare const ViewHeader: ({ view, onClose, onMinimize, }: {
|
|
4
|
+
view: IBaseViewModel;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onMinimize: () => void;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
|
+
export default ViewHeader;
|
|
@@ -0,0 +1,69 @@
|
|
|
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 mui_1 = require("tss-react/mui");
|
|
32
|
+
const mobx_react_1 = require("mobx-react");
|
|
33
|
+
// icons
|
|
34
|
+
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
35
|
+
const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
|
|
36
|
+
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
|
|
37
|
+
// locals
|
|
38
|
+
const ViewMenu_1 = __importDefault(require("./ViewMenu"));
|
|
39
|
+
const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
|
|
40
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
41
|
+
icon: {
|
|
42
|
+
color: theme.palette.secondary.contrastText,
|
|
43
|
+
},
|
|
44
|
+
grow: {
|
|
45
|
+
flexGrow: 1,
|
|
46
|
+
},
|
|
47
|
+
viewHeader: {
|
|
48
|
+
display: 'flex',
|
|
49
|
+
},
|
|
50
|
+
}));
|
|
51
|
+
const ViewHeader = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, }) {
|
|
52
|
+
const { classes } = useStyles();
|
|
53
|
+
const scrollRef = (0, react_1.useRef)(null);
|
|
54
|
+
// scroll the view into view when first mounted. note: this effect will run
|
|
55
|
+
// only once, because of the empty array second param
|
|
56
|
+
(0, react_1.useEffect)(() => {
|
|
57
|
+
var _a, _b;
|
|
58
|
+
(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
|
|
59
|
+
}, []);
|
|
60
|
+
return (react_1.default.createElement("div", { ref: scrollRef, className: classes.viewHeader },
|
|
61
|
+
react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
|
|
62
|
+
react_1.default.createElement("div", { className: classes.grow }),
|
|
63
|
+
react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
|
|
64
|
+
react_1.default.createElement("div", { className: classes.grow }),
|
|
65
|
+
react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
|
|
66
|
+
react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
|
|
67
|
+
react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))));
|
|
68
|
+
});
|
|
69
|
+
exports.default = ViewHeader;
|
|
@@ -1,28 +1,16 @@
|
|
|
1
|
-
import React, { useEffect
|
|
2
|
-
import {
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import { Paper, useTheme } from '@mui/material';
|
|
3
3
|
import { makeStyles } from 'tss-react/mui';
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
import { getSession, useWidthSetter } from '@jbrowse/core/util';
|
|
6
|
-
import clsx from 'clsx';
|
|
7
|
-
// icons
|
|
8
|
-
import CloseIcon from '@mui/icons-material/Close';
|
|
9
|
-
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
10
|
-
import AddIcon from '@mui/icons-material/Add';
|
|
11
6
|
// locals
|
|
12
|
-
import
|
|
13
|
-
import ViewContainerTitle from './ViewContainerTitle';
|
|
7
|
+
import ViewHeader from './ViewHeader';
|
|
14
8
|
const useStyles = makeStyles()(theme => ({
|
|
15
9
|
viewContainer: {
|
|
16
10
|
overflow: 'hidden',
|
|
17
11
|
margin: theme.spacing(0.5),
|
|
18
12
|
padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
|
|
19
13
|
},
|
|
20
|
-
icon: {
|
|
21
|
-
color: theme.palette.secondary.contrastText,
|
|
22
|
-
},
|
|
23
|
-
grow: {
|
|
24
|
-
flexGrow: 1,
|
|
25
|
-
},
|
|
26
14
|
focusedView: {
|
|
27
15
|
background: theme.palette.secondary.main,
|
|
28
16
|
},
|
|
@@ -31,17 +19,10 @@ const useStyles = makeStyles()(theme => ({
|
|
|
31
19
|
},
|
|
32
20
|
}));
|
|
33
21
|
const ViewContainer = observer(function ({ view, onClose, onMinimize, children, }) {
|
|
34
|
-
const { classes } = useStyles();
|
|
35
22
|
const theme = useTheme();
|
|
36
23
|
const ref = useWidthSetter(view, theme.spacing(1));
|
|
37
|
-
const
|
|
24
|
+
const { classes, cx } = useStyles();
|
|
38
25
|
const session = getSession(view);
|
|
39
|
-
// scroll the view into view when first mounted. note: this effect will run
|
|
40
|
-
// only once, because of the empty array second param
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
var _a, _b;
|
|
43
|
-
(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
|
|
44
|
-
}, []);
|
|
45
26
|
useEffect(() => {
|
|
46
27
|
function handleSelectView(e) {
|
|
47
28
|
if (e.target instanceof Element) {
|
|
@@ -57,17 +38,10 @@ const ViewContainer = observer(function ({ view, onClose, onMinimize, children,
|
|
|
57
38
|
document.removeEventListener('keydown', handleSelectView);
|
|
58
39
|
};
|
|
59
40
|
}, [ref, session, view]);
|
|
60
|
-
return (React.createElement(Paper, { ref: ref, elevation: 12, className:
|
|
41
|
+
return (React.createElement(Paper, { ref: ref, elevation: 12, className: cx(classes.viewContainer, session.focusedViewId === view.id
|
|
61
42
|
? classes.focusedView
|
|
62
43
|
: classes.unfocusedView) },
|
|
63
|
-
React.createElement(
|
|
64
|
-
React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
|
|
65
|
-
React.createElement("div", { className: classes.grow }),
|
|
66
|
-
React.createElement(ViewContainerTitle, { view: view }),
|
|
67
|
-
React.createElement("div", { className: classes.grow }),
|
|
68
|
-
React.createElement(IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (React.createElement(AddIcon, { className: classes.icon, fontSize: "small" })) : (React.createElement(MinimizeIcon, { className: classes.icon, fontSize: "small" }))),
|
|
69
|
-
React.createElement(IconButton, { "data-testid": "close_view", onClick: onClose },
|
|
70
|
-
React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))),
|
|
44
|
+
React.createElement(ViewHeader, { view: view, onClose: onClose, onMinimize: onMinimize }),
|
|
71
45
|
React.createElement(Paper, null, children)));
|
|
72
46
|
});
|
|
73
47
|
export default ViewContainer;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
|
|
3
|
+
declare const ViewHeader: ({ view, onClose, onMinimize, }: {
|
|
4
|
+
view: IBaseViewModel;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onMinimize: () => void;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
|
+
export default ViewHeader;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { IconButton } from '@mui/material';
|
|
3
|
+
import { makeStyles } from 'tss-react/mui';
|
|
4
|
+
import { observer } from 'mobx-react';
|
|
5
|
+
// icons
|
|
6
|
+
import CloseIcon from '@mui/icons-material/Close';
|
|
7
|
+
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
8
|
+
import AddIcon from '@mui/icons-material/Add';
|
|
9
|
+
// locals
|
|
10
|
+
import ViewMenu from './ViewMenu';
|
|
11
|
+
import ViewContainerTitle from './ViewContainerTitle';
|
|
12
|
+
const useStyles = makeStyles()(theme => ({
|
|
13
|
+
icon: {
|
|
14
|
+
color: theme.palette.secondary.contrastText,
|
|
15
|
+
},
|
|
16
|
+
grow: {
|
|
17
|
+
flexGrow: 1,
|
|
18
|
+
},
|
|
19
|
+
viewHeader: {
|
|
20
|
+
display: 'flex',
|
|
21
|
+
},
|
|
22
|
+
}));
|
|
23
|
+
const ViewHeader = observer(function ({ view, onClose, onMinimize, }) {
|
|
24
|
+
const { classes } = useStyles();
|
|
25
|
+
const scrollRef = useRef(null);
|
|
26
|
+
// scroll the view into view when first mounted. note: this effect will run
|
|
27
|
+
// only once, because of the empty array second param
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
var _a, _b;
|
|
30
|
+
(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
|
|
31
|
+
}, []);
|
|
32
|
+
return (React.createElement("div", { ref: scrollRef, className: classes.viewHeader },
|
|
33
|
+
React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
|
|
34
|
+
React.createElement("div", { className: classes.grow }),
|
|
35
|
+
React.createElement(ViewContainerTitle, { view: view }),
|
|
36
|
+
React.createElement("div", { className: classes.grow }),
|
|
37
|
+
React.createElement(IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (React.createElement(AddIcon, { className: classes.icon, fontSize: "small" })) : (React.createElement(MinimizeIcon, { className: classes.icon, fontSize: "small" }))),
|
|
38
|
+
React.createElement(IconButton, { "data-testid": "close_view", onClick: onClose },
|
|
39
|
+
React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))));
|
|
40
|
+
});
|
|
41
|
+
export default ViewHeader;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/app-core",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.2",
|
|
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.7.
|
|
45
|
+
"@jbrowse/product-core": "^2.7.2",
|
|
46
46
|
"@mui/icons-material": "^5.0.0",
|
|
47
47
|
"@mui/material": "^5.10.17",
|
|
48
48
|
"clsx": "^2.0.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "9052b295f2d322e729254457ed9fe2231fb22cce"
|
|
65
65
|
}
|