@jbrowse/embedded-core 2.6.1 → 2.6.3
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/package.json +6 -7
- package/src/index.ts +0 -2
- package/src/ui/EmbeddedViewContainer.tsx +0 -64
- package/src/ui/ModalWidget.tsx +0 -74
- package/src/ui/VersionAboutDialog.tsx +0 -79
- package/src/ui/ViewMenu.tsx +0 -30
- package/src/ui/ViewTitle.tsx +0 -76
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/embedded-core",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.3",
|
|
4
4
|
"description": "JBrowse 2 code shared between embedded products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -26,13 +26,12 @@
|
|
|
26
26
|
"module": "esm/index.js",
|
|
27
27
|
"files": [
|
|
28
28
|
"dist",
|
|
29
|
-
"esm"
|
|
30
|
-
"src"
|
|
29
|
+
"esm"
|
|
31
30
|
],
|
|
32
31
|
"scripts": {
|
|
33
32
|
"build:esm": "tsc --build tsconfig.build.esm.json",
|
|
34
|
-
"build:
|
|
35
|
-
"build": "npm run build:esm && npm run build:
|
|
33
|
+
"build:commonjs": "tsc --build tsconfig.build.commonjs.json",
|
|
34
|
+
"build": "npm run build:esm && npm run build:commonjs",
|
|
36
35
|
"test": "cd ../..; jest packages/embedded-core",
|
|
37
36
|
"clean": "rimraf dist esm *.tsbuildinfo",
|
|
38
37
|
"prebuild": "yarn clean",
|
|
@@ -43,7 +42,7 @@
|
|
|
43
42
|
},
|
|
44
43
|
"dependencies": {
|
|
45
44
|
"@babel/runtime": "^7.16.3",
|
|
46
|
-
"@jbrowse/product-core": "^2.6.
|
|
45
|
+
"@jbrowse/product-core": "^2.6.3",
|
|
47
46
|
"@mui/icons-material": "^5.0.0",
|
|
48
47
|
"@mui/material": "^5.10.17",
|
|
49
48
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -62,5 +61,5 @@
|
|
|
62
61
|
"publishConfig": {
|
|
63
62
|
"access": "public"
|
|
64
63
|
},
|
|
65
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
|
|
66
65
|
}
|
package/src/index.ts
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React, { Suspense } from 'react'
|
|
2
|
-
import { Paper, ScopedCssBaseline, useTheme } from '@mui/material'
|
|
3
|
-
import { makeStyles } from 'tss-react/mui'
|
|
4
|
-
import { observer } from 'mobx-react'
|
|
5
|
-
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
|
|
6
|
-
import { getSession, useWidthSetter } from '@jbrowse/core/util'
|
|
7
|
-
import ViewTitle from './ViewTitle'
|
|
8
|
-
|
|
9
|
-
const useStyles = makeStyles()(theme => ({
|
|
10
|
-
// avoid parent styles getting into this div
|
|
11
|
-
// https://css-tricks.com/almanac/properties/a/all/
|
|
12
|
-
avoidParentStyle: {
|
|
13
|
-
all: 'initial',
|
|
14
|
-
},
|
|
15
|
-
viewContainer: {
|
|
16
|
-
overflow: 'hidden',
|
|
17
|
-
background: theme.palette.secondary.main,
|
|
18
|
-
margin: theme.spacing(0.5),
|
|
19
|
-
padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
|
|
20
|
-
},
|
|
21
|
-
}))
|
|
22
|
-
|
|
23
|
-
const ViewContainer = observer(function ({
|
|
24
|
-
view,
|
|
25
|
-
children,
|
|
26
|
-
}: {
|
|
27
|
-
view: IBaseViewModel
|
|
28
|
-
children: React.ReactNode
|
|
29
|
-
}) {
|
|
30
|
-
const { classes } = useStyles()
|
|
31
|
-
const session = getSession(view)
|
|
32
|
-
const theme = useTheme()
|
|
33
|
-
const ref = useWidthSetter(view, theme.spacing(1))
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<Paper elevation={12} ref={ref} className={classes.viewContainer}>
|
|
37
|
-
{session.DialogComponent ? (
|
|
38
|
-
<Suspense fallback={<div />}>
|
|
39
|
-
<session.DialogComponent {...session.DialogProps} />
|
|
40
|
-
</Suspense>
|
|
41
|
-
) : null}
|
|
42
|
-
<ViewTitle view={view} />
|
|
43
|
-
<Paper>{children}</Paper>
|
|
44
|
-
</Paper>
|
|
45
|
-
)
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
const ViewContainerWrapper = observer(function ({
|
|
49
|
-
view,
|
|
50
|
-
children,
|
|
51
|
-
}: {
|
|
52
|
-
view: IBaseViewModel
|
|
53
|
-
children: React.ReactNode
|
|
54
|
-
}) {
|
|
55
|
-
const { classes } = useStyles()
|
|
56
|
-
return (
|
|
57
|
-
<div className={classes.avoidParentStyle}>
|
|
58
|
-
<ScopedCssBaseline>
|
|
59
|
-
<ViewContainer view={view}>{children}</ViewContainer>
|
|
60
|
-
</ScopedCssBaseline>
|
|
61
|
-
</div>
|
|
62
|
-
)
|
|
63
|
-
})
|
|
64
|
-
export default ViewContainerWrapper
|
package/src/ui/ModalWidget.tsx
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React, { Suspense } from 'react'
|
|
2
|
-
import { AppBar, 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
|
-
import { SessionWithWidgets } from '@jbrowse/core/util'
|
|
8
|
-
|
|
9
|
-
const useStyles = makeStyles()({
|
|
10
|
-
paper: {
|
|
11
|
-
overflow: 'auto',
|
|
12
|
-
},
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
export default observer(function ({
|
|
16
|
-
session,
|
|
17
|
-
}: {
|
|
18
|
-
session: SessionWithWidgets
|
|
19
|
-
}) {
|
|
20
|
-
const { classes } = useStyles()
|
|
21
|
-
const { visibleWidget } = session
|
|
22
|
-
const { pluginManager } = getEnv(session)
|
|
23
|
-
|
|
24
|
-
if (!visibleWidget) {
|
|
25
|
-
return null
|
|
26
|
-
}
|
|
27
|
-
const { ReactComponent, HeadingComponent, heading } =
|
|
28
|
-
pluginManager.getWidgetType(visibleWidget.type)
|
|
29
|
-
|
|
30
|
-
const Component = visibleWidget
|
|
31
|
-
? (pluginManager.evaluateExtensionPoint(
|
|
32
|
-
'Core-replaceWidget',
|
|
33
|
-
ReactComponent,
|
|
34
|
-
{
|
|
35
|
-
session,
|
|
36
|
-
model: visibleWidget,
|
|
37
|
-
},
|
|
38
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
39
|
-
) as React.FC<any>)
|
|
40
|
-
: null
|
|
41
|
-
return (
|
|
42
|
-
<Dialog
|
|
43
|
-
open
|
|
44
|
-
onClose={() => session.hideAllWidgets()}
|
|
45
|
-
maxWidth="xl"
|
|
46
|
-
header={
|
|
47
|
-
<AppBar position="static">
|
|
48
|
-
<Toolbar>
|
|
49
|
-
{HeadingComponent ? (
|
|
50
|
-
<HeadingComponent model={visibleWidget} />
|
|
51
|
-
) : (
|
|
52
|
-
<Typography variant="h6">{heading}</Typography>
|
|
53
|
-
)}
|
|
54
|
-
</Toolbar>
|
|
55
|
-
</AppBar>
|
|
56
|
-
}
|
|
57
|
-
>
|
|
58
|
-
{Component ? (
|
|
59
|
-
<Suspense fallback={<div>Loading...</div>}>
|
|
60
|
-
<Paper className={classes.paper}>
|
|
61
|
-
<Component
|
|
62
|
-
model={visibleWidget}
|
|
63
|
-
session={session}
|
|
64
|
-
overrideDimensions={{
|
|
65
|
-
height: (window.innerHeight * 5) / 8,
|
|
66
|
-
width: 800,
|
|
67
|
-
}}
|
|
68
|
-
/>
|
|
69
|
-
</Paper>
|
|
70
|
-
</Suspense>
|
|
71
|
-
) : null}
|
|
72
|
-
</Dialog>
|
|
73
|
-
)
|
|
74
|
-
})
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { DialogContent, Link, Typography } from '@mui/material'
|
|
3
|
-
import { Dialog } from '@jbrowse/core/ui'
|
|
4
|
-
import { makeStyles } from 'tss-react/mui'
|
|
5
|
-
|
|
6
|
-
const useStyles = makeStyles()({
|
|
7
|
-
content: {
|
|
8
|
-
minWidth: 800,
|
|
9
|
-
},
|
|
10
|
-
})
|
|
11
|
-
|
|
12
|
-
export default function AboutDialog({
|
|
13
|
-
open,
|
|
14
|
-
version,
|
|
15
|
-
onClose,
|
|
16
|
-
}: {
|
|
17
|
-
open: boolean
|
|
18
|
-
version: string
|
|
19
|
-
onClose: () => void
|
|
20
|
-
}) {
|
|
21
|
-
const { classes } = useStyles()
|
|
22
|
-
return (
|
|
23
|
-
<Dialog
|
|
24
|
-
open={open}
|
|
25
|
-
onClose={onClose}
|
|
26
|
-
maxWidth="xl"
|
|
27
|
-
title={`JBrowse v${version}`}
|
|
28
|
-
>
|
|
29
|
-
<DialogContent className={classes.content}>
|
|
30
|
-
<Typography>
|
|
31
|
-
JBrowse is a GMOD project © 2019-2021, The Evolutionary Software
|
|
32
|
-
Foundation
|
|
33
|
-
</Typography>
|
|
34
|
-
<Typography>
|
|
35
|
-
Here are some resources and documentation. Please report the version
|
|
36
|
-
number above when asking questions. Thanks!
|
|
37
|
-
</Typography>
|
|
38
|
-
<ul>
|
|
39
|
-
<li>
|
|
40
|
-
<Link
|
|
41
|
-
href="https://github.com/GMOD/jbrowse-components/discussions"
|
|
42
|
-
target="_blank"
|
|
43
|
-
rel="noopener noreferrer"
|
|
44
|
-
>
|
|
45
|
-
Question & answer forum
|
|
46
|
-
</Link>
|
|
47
|
-
</li>
|
|
48
|
-
<li>
|
|
49
|
-
<Link
|
|
50
|
-
href="https://github.com/GMOD/jbrowse-components/issues/new/choose"
|
|
51
|
-
target="_blank"
|
|
52
|
-
rel="noopener noreferrer"
|
|
53
|
-
>
|
|
54
|
-
Report a bug
|
|
55
|
-
</Link>
|
|
56
|
-
</li>
|
|
57
|
-
<li>
|
|
58
|
-
<Link
|
|
59
|
-
href="https://jbrowse.org/jb2/docs/user_guide"
|
|
60
|
-
target="_blank"
|
|
61
|
-
rel="noopener noreferrer"
|
|
62
|
-
>
|
|
63
|
-
User guide
|
|
64
|
-
</Link>
|
|
65
|
-
</li>
|
|
66
|
-
<li>
|
|
67
|
-
<Link
|
|
68
|
-
href="https://jbrowse.org/jb2/docs/"
|
|
69
|
-
target="_blank"
|
|
70
|
-
rel="noopener noreferrer"
|
|
71
|
-
>
|
|
72
|
-
Documentation
|
|
73
|
-
</Link>
|
|
74
|
-
</li>
|
|
75
|
-
</ul>
|
|
76
|
-
</DialogContent>
|
|
77
|
-
</Dialog>
|
|
78
|
-
)
|
|
79
|
-
}
|
package/src/ui/ViewMenu.tsx
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import {
|
|
3
|
-
IconButtonProps as IconButtonPropsType,
|
|
4
|
-
SvgIconProps,
|
|
5
|
-
} from '@mui/material'
|
|
6
|
-
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
|
|
7
|
-
import { observer } from 'mobx-react'
|
|
8
|
-
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
|
|
9
|
-
|
|
10
|
-
// icons
|
|
11
|
-
import MenuIcon from '@mui/icons-material/Menu'
|
|
12
|
-
|
|
13
|
-
const ViewMenu = observer(function ({
|
|
14
|
-
model,
|
|
15
|
-
IconButtonProps,
|
|
16
|
-
IconProps,
|
|
17
|
-
}: {
|
|
18
|
-
model: IBaseViewModel
|
|
19
|
-
IconButtonProps: IconButtonPropsType
|
|
20
|
-
IconProps: SvgIconProps
|
|
21
|
-
}) {
|
|
22
|
-
const items = model.menuItems()
|
|
23
|
-
return items.length ? (
|
|
24
|
-
<CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
|
|
25
|
-
<MenuIcon {...IconProps} />
|
|
26
|
-
</CascadingMenuButton>
|
|
27
|
-
) : null
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
export default ViewMenu
|
package/src/ui/ViewTitle.tsx
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import React, { Suspense, lazy, useState } from 'react'
|
|
2
|
-
import { IconButton, Typography, alpha } from '@mui/material'
|
|
3
|
-
import { observer } from 'mobx-react'
|
|
4
|
-
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
|
|
5
|
-
import { Logomark } from '@jbrowse/core/ui'
|
|
6
|
-
import { makeStyles } from 'tss-react/mui'
|
|
7
|
-
import { getSession } from '@jbrowse/core/util'
|
|
8
|
-
|
|
9
|
-
// locals
|
|
10
|
-
import ViewMenu from './ViewMenu'
|
|
11
|
-
|
|
12
|
-
const VersionAboutDialog = lazy(() => import('./VersionAboutDialog'))
|
|
13
|
-
|
|
14
|
-
const useStyles = makeStyles()(theme => ({
|
|
15
|
-
icon: {
|
|
16
|
-
color: theme.palette.secondary.contrastText,
|
|
17
|
-
},
|
|
18
|
-
displayName: {
|
|
19
|
-
marginTop: 2,
|
|
20
|
-
color: theme.palette.secondary.contrastText,
|
|
21
|
-
},
|
|
22
|
-
grow: {
|
|
23
|
-
flexGrow: 1,
|
|
24
|
-
},
|
|
25
|
-
iconRoot: {
|
|
26
|
-
'&:hover': {
|
|
27
|
-
backgroundColor: alpha(
|
|
28
|
-
theme.palette.secondary.contrastText,
|
|
29
|
-
theme.palette.action.hoverOpacity,
|
|
30
|
-
),
|
|
31
|
-
'@media (hover: none)': {
|
|
32
|
-
backgroundColor: 'transparent',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
}))
|
|
37
|
-
|
|
38
|
-
export default observer(({ view }: { view: IBaseViewModel }) => {
|
|
39
|
-
const { classes } = useStyles()
|
|
40
|
-
const { displayName } = view
|
|
41
|
-
const [dlgOpen, setDlgOpen] = useState(false)
|
|
42
|
-
const session = getSession(view)
|
|
43
|
-
return (
|
|
44
|
-
<div style={{ display: 'flex' }}>
|
|
45
|
-
<ViewMenu
|
|
46
|
-
model={view}
|
|
47
|
-
IconButtonProps={{
|
|
48
|
-
classes: { root: classes.iconRoot },
|
|
49
|
-
edge: 'start',
|
|
50
|
-
}}
|
|
51
|
-
IconProps={{ className: classes.icon }}
|
|
52
|
-
/>
|
|
53
|
-
<div className={classes.grow} />
|
|
54
|
-
{displayName ? (
|
|
55
|
-
<Typography variant="body2" className={classes.displayName}>
|
|
56
|
-
{displayName}
|
|
57
|
-
</Typography>
|
|
58
|
-
) : null}
|
|
59
|
-
<div className={classes.grow} />
|
|
60
|
-
<IconButton onClick={() => setDlgOpen(true)}>
|
|
61
|
-
<div style={{ width: 22, height: 22 }}>
|
|
62
|
-
<Logomark variant="white" />
|
|
63
|
-
</div>
|
|
64
|
-
</IconButton>
|
|
65
|
-
{dlgOpen ? (
|
|
66
|
-
<Suspense fallback={<div />}>
|
|
67
|
-
<VersionAboutDialog
|
|
68
|
-
open
|
|
69
|
-
onClose={() => setDlgOpen(false)}
|
|
70
|
-
version={session.version}
|
|
71
|
-
/>
|
|
72
|
-
</Suspense>
|
|
73
|
-
) : null}
|
|
74
|
-
</div>
|
|
75
|
-
)
|
|
76
|
-
})
|