Add version

GMOD · Aug 25, 2022 · a4ff642 · a4ff642
1 parent d76cb10
commit a4ff642
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 15 deletions.
diff --git a/products/jbrowse-react-circular-genome-view/output-version.js b/products/jbrowse-react-circular-genome-view/output-version.js
@@ -0,0 +1,8 @@
+// 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')
+console.log(
+  `export const version = "${
+    JSON.parse(fs.readFileSync('package.json')).version
+  }"`,
+)
diff --git a/products/jbrowse-react-circular-genome-view/package.json b/products/jbrowse-react-circular-genome-view/package.json
@@ -27,6 +27,7 @@
     "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",
     "build:esm": "tsc -b tsconfig.build.esm.json",
     "build:es5": "tsc -b tsconfig.build.es5.json",
     "build:webpack": "npm-run-all build:webpack:*",

diff --git a/products/jbrowse-react-circular-genome-view/src/JBrowseCircularGenomeView/AboutDialog.tsx b/products/jbrowse-react-circular-genome-view/src/JBrowseCircularGenomeView/AboutDialog.tsx
@@ -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>
+  )
+}
diff --git a/products/jbrowse-react-circular-genome-view/src/JBrowseCircularGenomeView/ViewContainer.tsx b/products/jbrowse-react-circular-genome-view/src/JBrowseCircularGenomeView/ViewContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Suspense } from 'react'
+import React, { lazy, useEffect, useState, Suspense } from 'react'
 import {
   IconButton,
   IconButtonProps as IconButtonPropsType,
@@ -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',
@@ -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)
 
@@ -131,11 +134,15 @@ const ViewContainer = observer(
             </Typography>
           ) : null}
           <div className={classes.grow} />
-          <div style={{ width: 20, height: 20 }}>
+          <div
+            style={{ width: 20, height: 20 }}
+            onClick={() => setDlgOpen(true)}
+          >
             <Logomark variant="white" />
           </div>
         </div>
         <Paper>{children}</Paper>
+        <AboutDialog open={dlgOpen} onClose={() => setDlgOpen(false)} />
       </Paper>
     )
   },

diff --git a/products/jbrowse-react-circular-genome-view/src/createModel/createSessionModel.ts b/products/jbrowse-react-circular-genome-view/src/createModel/createSessionModel.ts
@@ -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
@@ -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]

diff --git a/products/jbrowse-react-circular-genome-view/src/version.js b/products/jbrowse-react-circular-genome-view/src/version.js
@@ -0,0 +1 @@
+export const version = "2.1.2"
diff --git a/products/jbrowse-react-linear-genome-view/output-version.js b/products/jbrowse-react-linear-genome-view/output-version.js
@@ -2,7 +2,7 @@
 // this avoids bundlers having to know how to import ../../package.json or similar for downstream consumers
 const fs = require('fs')
 console.log(
-  `export const version = ${
+  `export const version = "${
     JSON.parse(fs.readFileSync('package.json')).version
-  }`,
+  }"`,
 )
diff --git a/products/jbrowse-react-linear-genome-view/package.json b/products/jbrowse-react-linear-genome-view/package.json
@@ -27,7 +27,7 @@
     "start:umd": "cross-env NODE_ENV=development webpack-dev-server",
     "prebuild": "npm run clean",
     "build": "npm-run-all build:*",
-    "postbuild": "node output-version.js> src/version.js",
+    "postversion": "node output-version.js> src/version.js",
     "build:esm": "tsc --build tsconfig.build.esm.json",
     "build:es5": "tsc --build tsconfig.build.es5.json",
     "build:webpack": "npm-run-all build:webpack:*",

diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/AboutDialog.tsx b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/AboutDialog.tsx
@@ -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>
+  )
+}
diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/ViewContainer.tsx b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/ViewContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Suspense } from 'react'
+import React, { lazy, useEffect, useState, Suspense } from 'react'
 import {
   IconButton,
   IconButtonProps as IconButtonPropsType,
@@ -17,10 +17,11 @@ 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',
-    background: theme.palette.secondary.main + ' !important',
+    background: theme.palette.secondary.main,
     margin: theme.spacing(0.5),
   },
   icon: {
@@ -58,8 +59,7 @@ const ViewMenu = observer(
   }) => {
     const [anchorEl, setAnchorEl] = useState<HTMLElement>()
 
-    const items = model.menuItems?.()
-    if (!items?.length) {
+    if (!model.menuItems()?.length) {
       return null
     }
 
@@ -70,7 +70,6 @@ const ViewMenu = observer(
           aria-label="more"
           aria-controls="view-menu"
           aria-haspopup="true"
-          style={{ padding: 3 }}
           onClick={event => setAnchorEl(event.currentTarget)}
           data-testid="view_menu_icon"
         >
@@ -84,7 +83,7 @@ const ViewMenu = observer(
             setAnchorEl(undefined)
           }}
           onClose={() => setAnchorEl(undefined)}
-          menuItems={items}
+          menuItems={model.menuItems()}
         />
       </>
     )
@@ -93,10 +92,11 @@ const ViewMenu = observer(
 
 const ViewContainer = observer(
   ({ view, children }: { view: IBaseViewModel; children: React.ReactNode }) => {
-    const [ref, { width }] = useMeasure()
     const { classes } = useStyles()
     const theme = useTheme()
     const session = getSession(view)
+    const [dlgOpen, setDlgOpen] = useState(false)
+    const [ref, { width }] = useMeasure()
     const padWidth = theme.spacing(1)
 
     useEffect(() => {
@@ -133,11 +133,19 @@ const ViewContainer = observer(
             </Typography>
           ) : null}
           <div className={classes.grow} />
-          <div style={{ width: 20, height: 20 }}>
+          <div
+            style={{ width: 20, height: 20 }}
+            onClick={() => setDlgOpen(true)}
+          >
             <Logomark variant="white" />
           </div>
         </div>
         <Paper>{children}</Paper>
+        {dlgOpen ? (
+          <Suspense fallback={<div />}>
+            <AboutDialog open onClose={() => setDlgOpen(false)} />
+          </Suspense>
+        ) : null}
       </Paper>
     )
   },

diff --git a/products/jbrowse-react-linear-genome-view/src/version.js b/products/jbrowse-react-linear-genome-view/src/version.js
@@ -1 +1 @@
-export const version = 2.1.2
+export const version = '2.1.2'