Skip to content

Commit

Permalink
Add about dialog with version number for embedded components (#3162)
Browse files Browse the repository at this point in the history
* Output version

* Add version

* Use IconButton

* Update snaps

* Only bundle after postversion so that we get the proper version bundled in the app
  • Loading branch information
cmdcolin committed Sep 14, 2022
1 parent a36bc5a commit 34870ab
Show file tree
Hide file tree
Showing 14 changed files with 325 additions and 76 deletions.
10 changes: 10 additions & 0 deletions products/jbrowse-react-circular-genome-view/output-version.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// used to output a version.js file to the src folder
// this avoids bundlers having to know how to import ../../package.json or similar for downstream consumers
const fs = require('fs')

// eslint-disable-next-line no-console
console.log(
`export const version = '${
JSON.parse(fs.readFileSync('package.json')).version
}'`,
)
7 changes: 4 additions & 3 deletions products/jbrowse-react-circular-genome-view/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@
"start:umd": "cross-env NODE_ENV=development webpack-dev-server",
"prebuild": "npm run clean",
"build": "npm-run-all build:*",
"postversion": "node output-version.js> src/version.js && npm run bundle",
"build:esm": "tsc -b tsconfig.build.esm.json",
"build:es5": "tsc -b tsconfig.build.es5.json",
"build:webpack": "npm-run-all build:webpack:*",
"build:webpack:dev": "cross-env NODE_ENV=development webpack",
"build:webpack:prod": "cross-env NODE_ENV=production webpack",
"bundle": "npm-run-all bundle:webpack:*",
"bundle:webpack:dev": "cross-env NODE_ENV=development webpack",
"bundle:webpack:prod": "cross-env NODE_ENV=production webpack",
"clean": "rimraf esm dist *.tsbuildinfo",
"prepack": "npm run build",
"storybook": "start-storybook --static-dir public --port 6006",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react'
import { version } from '../version'
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
Link,
Typography,
} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { makeStyles } from 'tss-react/mui'

const useStyles = makeStyles()(theme => ({
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
content: {
minWidth: 800,
},
}))

export default function AboutDialog({
open,
onClose,
}: {
open: boolean
onClose: () => void
}) {
const { classes } = useStyles()
return (
<Dialog open={open} onClose={onClose} maxWidth="xl">
<DialogTitle>
JBrowse v{version}
<IconButton
className={classes.closeButton}
onClick={() => onClose()}
size="large"
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent className={classes.content}>
<Typography>
JBrowse is a GMOD project © 2019-2021, The Evolutionary Software
Foundation
</Typography>
<Typography>
Here are some resources and documentation. Please report the version
number above when asking questions. Thanks!
</Typography>
<ul>
<li>
<Link
href="https://github.com/GMOD/jbrowse-components/discussions"
target="_blank"
rel="noopener noreferrer"
>
Question & answer forum
</Link>
</li>
<li>
<Link
href="https://github.com/GMOD/jbrowse-components/issues/new/choose"
target="_blank"
rel="noopener noreferrer"
>
Report a bug
</Link>
</li>
<li>
<Link
href="https://jbrowse.org/jb2/docs/user_guide"
target="_blank"
rel="noopener noreferrer"
>
User guide
</Link>
</li>
<li>
<Link
href="https://jbrowse.org/jb2/docs/"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</Link>
</li>
</ul>
</DialogContent>
</Dialog>
)
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, Suspense } from 'react'
import React, { lazy, useEffect, useState, Suspense } from 'react'
import {
IconButton,
IconButtonProps as IconButtonPropsType,
Expand All @@ -17,6 +17,8 @@ import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseV
import { Menu, Logomark } from '@jbrowse/core/ui'
import { getSession } from '@jbrowse/core/util'

const AboutDialog = lazy(() => import('./AboutDialog'))

const useStyles = makeStyles()(theme => ({
viewContainer: {
overflow: 'hidden',
Expand Down Expand Up @@ -94,6 +96,7 @@ const ViewContainer = observer(
const { classes } = useStyles()
const theme = useTheme()
const session = getSession(view)
const [dlgOpen, setDlgOpen] = useState(false)
const [ref, { width }] = useMeasure()
const padWidth = theme.spacing(1)

Expand Down Expand Up @@ -131,11 +134,14 @@ const ViewContainer = observer(
</Typography>
) : null}
<div className={classes.grow} />
<div style={{ width: 20, height: 20 }}>
<Logomark variant="white" />
</div>
<IconButton onClick={() => setDlgOpen(true)}>
<div style={{ width: 22, height: 22 }}>
<Logomark variant="white" />
</div>
</IconButton>
</div>
<Paper>{children}</Paper>
<AboutDialog open={dlgOpen} onClose={() => setDlgOpen(false)} />
</Paper>
)
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
exports[`<JBrowseCircularGenomeView /> renders successfully 1`] = `
<div
class="tss-jn2cxo-avoidParentStyle"
style=""
>
<div
class="MuiScopedCssBaseline-root mui-1pa2gw3-MuiScopedCssBaseline-root"
Expand All @@ -20,34 +21,43 @@ exports[`<JBrowseCircularGenomeView /> renders successfully 1`] = `
<div
class="tss-122lw0e-grow"
/>
<div
style="width: 20px; height: 20px;"
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall mui-zubjuh-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
viewBox="0 0 175 175"
<div
style="width: 22px; height: 22px;"
>
<path
d="M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z"
style="fill: #ffffff;"
/>
<path
d="M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z"
style="fill: #e6e6e6;"
/>
<path
d="M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z"
style="fill: #cccccc;"
/>
<path
d="M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z"
style="fill: #b3b3b3;"
/>
<path
d="M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z"
style="fill: #999999;"
/>
</svg>
</div>
<svg
viewBox="0 0 175 175"
>
<path
d="M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z"
style="fill: #ffffff;"
/>
<path
d="M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z"
style="fill: #e6e6e6;"
/>
<path
d="M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z"
style="fill: #cccccc;"
/>
<path
d="M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z"
style="fill: #b3b3b3;"
/>
<path
d="M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z"
style="fill: #999999;"
/>
</svg>
</div>
<span
class="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
import InfoIcon from '@mui/icons-material/Info'
import addSnackbarToModel from '@jbrowse/core/ui/SnackbarModel'
import { ReferringNode } from '../types'
import { version } from '../version'

export default function sessionModelFactory(pluginManager: PluginManager) {
const model = types
Expand Down Expand Up @@ -104,7 +105,7 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
return getParent<any>(self).assemblyManager
},
get version() {
return ''
return version
},
get views() {
return [self.view]
Expand Down
1 change: 1 addition & 0 deletions products/jbrowse-react-circular-genome-view/src/version.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const version = '2.1.2'
10 changes: 10 additions & 0 deletions products/jbrowse-react-linear-genome-view/output-version.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// used to output a version.js file to the src folder
// this avoids bundlers having to know how to import ../../package.json or similar for downstream consumers
const fs = require('fs')

// eslint-disable-next-line no-console
console.log(
`export const version = '${
JSON.parse(fs.readFileSync('package.json')).version
}'`,
)
7 changes: 4 additions & 3 deletions products/jbrowse-react-linear-genome-view/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@
"start:umd": "cross-env NODE_ENV=development webpack-dev-server",
"prebuild": "npm run clean",
"build": "npm-run-all build:*",
"postversion": "node output-version.js> src/version.js && npm run bundle",
"build:esm": "tsc --build tsconfig.build.esm.json",
"build:es5": "tsc --build tsconfig.build.es5.json",
"build:webpack": "npm-run-all build:webpack:*",
"build:webpack:dev": "cross-env NODE_ENV=development webpack",
"build:webpack:prod": "cross-env NODE_ENV=production webpack",
"bundle": "npm-run-all bundle:webpack:*",
"bundle:webpack:dev": "cross-env NODE_ENV=development webpack",
"bundle:webpack:prod": "cross-env NODE_ENV=production webpack",
"clean": "rimraf dist esm *.tsbuildinfo",
"prepack": "npm run build",
"storybook": "start-storybook --static-dir public --port 6006",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react'
import { version } from '../version'
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
Link,
Typography,
} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { makeStyles } from 'tss-react/mui'

const useStyles = makeStyles()(theme => ({
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
content: {
minWidth: 800,
},
}))

export default function AboutDialog({
open,
onClose,
}: {
open: boolean
onClose: () => void
}) {
const { classes } = useStyles()
return (
<Dialog open={open} onClose={onClose} maxWidth="xl">
<DialogTitle>
JBrowse v{version}
<IconButton
className={classes.closeButton}
onClick={() => onClose()}
size="large"
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent className={classes.content}>
<Typography>
JBrowse is a GMOD project © 2019-2021, The Evolutionary Software
Foundation
</Typography>
<Typography>
Here are some resources and documentation. Please report the version
number above when asking questions. Thanks!
</Typography>
<ul>
<li>
<Link
href="https://github.com/GMOD/jbrowse-components/discussions"
target="_blank"
rel="noopener noreferrer"
>
Question & answer forum
</Link>
</li>
<li>
<Link
href="https://github.com/GMOD/jbrowse-components/issues/new/choose"
target="_blank"
rel="noopener noreferrer"
>
Report a bug
</Link>
</li>
<li>
<Link
href="https://jbrowse.org/jb2/docs/user_guide"
target="_blank"
rel="noopener noreferrer"
>
User guide
</Link>
</li>
<li>
<Link
href="https://jbrowse.org/jb2/docs/"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</Link>
</li>
</ul>
</DialogContent>
</Dialog>
)
}
Loading

0 comments on commit 34870ab

Please sign in to comment.