Rename panel to separate dialog

GMOD · Apr 12, 2024 · 0b4f58e · 0b4f58e
1 parent a8bce7a
commit 0b4f58e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 51 deletions.
diff --git a/packages/product-core/src/ui/AboutDialog.tsx b/packages/product-core/src/ui/AboutDialog.tsx
@@ -3,7 +3,9 @@ import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import Dialog from '@jbrowse/core/ui/Dialog'
 import { getSession, getEnv } from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
-import AboutContents from './AboutDialogContents'
+
+// locals
+import AboutDialogContents from './AboutDialogContents'
 
 export function AboutDialog({
   config,
@@ -18,7 +20,7 @@ export function AboutDialog({
 
   const AboutComponent = pluginManager.evaluateExtensionPoint(
     'Core-replaceAbout',
-    AboutContents,
+    AboutDialogContents,
     { session, config },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ) as React.FC<any>

diff --git a/packages/product-core/src/ui/AboutDialogContents.tsx b/packages/product-core/src/ui/AboutDialogContents.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Suspense, lazy, useState } from 'react'
 import clone from 'clone'
 import copy from 'copy-to-clipboard'
 import { Button } from '@mui/material'
@@ -13,8 +13,12 @@ import {
   BaseCard,
   Attributes,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+// locals
 import FileInfoPanel from './FileInfoPanel'
-import RefNamePanel from './RefNameInfoPanel'
+
+// lazies
+const RefNameDialog = lazy(() => import('./RefNameInfoDialog'))
 
 const useStyles = makeStyles()({
   content: {
@@ -36,7 +40,7 @@ function removeAttr(obj: Record<string, unknown>, attr: string) {
   return obj
 }
 
-export default function AboutContents({
+export default function AboutDialogContents({
   config,
 }: {
   config: AnyConfigurationModel
@@ -45,7 +49,7 @@ export default function AboutContents({
   const conf = readConfObject(config)
   const session = getSession(config)
   const { classes } = useStyles()
-
+  const [shown, setShown] = useState(false)
   const hideUris =
     getConf(session, ['formatAbout', 'hideUris']) ||
     readConfObject(config, ['formatAbout', 'hideUris'])
@@ -74,20 +78,29 @@ export default function AboutContents({
   return (
     <div className={classes.content}>
       <BaseCard title="Configuration">
-        {!hideUris ? (
+        <div className={classes.button}>
+          {!hideUris ? (
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={() => {
+                const snap = removeAttr(clone(conf), 'baseUri')
+                copy(JSON.stringify(snap, null, 2))
+                setCopied(true)
+                setTimeout(() => setCopied(false), 1000)
+              }}
+            >
+              {copied ? 'Copied to clipboard!' : 'Copy config'}
+            </Button>
+          ) : null}
           <Button
             variant="contained"
-            className={classes.button}
-            onClick={() => {
-              const snap = removeAttr(clone(conf), 'baseUri')
-              copy(JSON.stringify(snap, null, 2))
-              setCopied(true)
-              setTimeout(() => setCopied(false), 1000)
-            }}
+            color="secondary"
+            onClick={() => setShown(true)}
           >
-            {copied ? 'Copied to clipboard!' : 'Copy config'}
+            Show ref names
           </Button>
-        ) : null}
+        </div>
         <Attributes
           attributes={confPostExt}
           omit={['displays', 'baseUri', 'refNames', 'formatAbout']}
@@ -100,7 +113,11 @@ export default function AboutContents({
         </BaseCard>
       ) : null}
       <FileInfoPanel config={config} />
-      <RefNamePanel config={config} />
+      {shown ? (
+        <Suspense fallback={null}>
+          <RefNameDialog config={config} handleClose={() => setShown(false)} />
+        </Suspense>
+      ) : null}
     </div>
   )
 }
diff --git a/.../product-core/src/ui/RefNameInfoPanel.tsx → ...product-core/src/ui/RefNameInfoDialog.tsx b/.../product-core/src/ui/RefNameInfoPanel.tsx → ...product-core/src/ui/RefNameInfoDialog.tsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Typography } from '@mui/material'
+import { Button, DialogContent, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { getSession } from '@jbrowse/core/util'
 import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
-import { getSession } from '@jbrowse/core/util'
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 import FieldName from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FieldName'
+import { Dialog } from '@jbrowse/core/ui'
 import copy from 'copy-to-clipboard'
 
 const MAX_REF_NAMES = 10_000
@@ -24,12 +24,17 @@ const useStyles = makeStyles()(theme => ({
   button: {
     float: 'right',
   },
+  content: {
+    minWidth: 800,
+  },
 }))
 
 const RefNamePanel = observer(function ({
   config,
+  handleClose,
 }: {
   config: AnyConfigurationModel
+  handleClose: () => void
 }) {
   const [error, setError] = useState<unknown>()
   const [refNames, setRefNames] = useState<string[]>()
@@ -72,36 +77,48 @@ const RefNamePanel = observer(function ({
   }, [config, rpcManager])
 
   return (
-    <BaseCard title="Reference sequences in track">
-      {error ? (
-        <Typography color="error">{`${error}`}</Typography>
-      ) : refNames === undefined ? (
-        <LoadingEllipses message="Loading refNames" />
-      ) : (
-        <>
-          <Button
-            variant="contained"
-            className={classes.button}
-            onClick={() => {
-              copy(JSON.stringify(refNames.join('\n'), null, 2))
-              setCopied(true)
-              setTimeout(() => setCopied(false), 1000)
-            }}
-          >
-            {copied ? 'Copied to clipboard!' : 'Copy ref names'}
-          </Button>
-          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-            <FieldName name="refNames" />
-            <pre className={classes.refNames}>
-              {refNames.slice(0, MAX_REF_NAMES).join('\n')}
-              {refNames.length > MAX_REF_NAMES
-                ? '\nToo many refNames to show in browser, use "Copy ref names" button to copy to clipboard'
-                : ''}
-            </pre>
+    <Dialog
+      open
+      title="Reference sequences in track"
+      onClose={handleClose}
+      maxWidth="xl"
+    >
+      <DialogContent className={classes.content}>
+        {error ? (
+          <Typography color="error">{`${error}`}</Typography>
+        ) : refNames === undefined ? (
+          <LoadingEllipses message="Loading refNames" />
+        ) : (
+          <div>
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={() => {
+                copy(JSON.stringify(refNames.join('\n'), null, 2))
+                setCopied(true)
+                setTimeout(() => setCopied(false), 1000)
+              }}
+            >
+              {copied ? 'Copied to clipboard!' : 'Copy ref names'}
+            </Button>
+            <Typography>
+              Reference sequence names used in track, listed one per line
+            </Typography>
+            <div>
+              <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                <FieldName name="refNames" />
+                <pre className={classes.refNames}>
+                  {refNames.slice(0, MAX_REF_NAMES).join('\n')}
+                  {refNames.length > MAX_REF_NAMES
+                    ? '\nToo many refNames to show in browser, use "Copy ref names" button to copy to clipboard'
+                    : ''}
+                </pre>
+              </div>
+            </div>
           </div>
-        </>
-      )}
-    </BaseCard>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 })