From 0c564c9620313fed773848daf01ef2c27aefa03c Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 20 May 2024 19:18:10 -0400
Subject: [PATCH] Alt

---
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../src/ui/AboutDialogContents.tsx            | 51 +++++++++-----
 ...ameInfoPanel.tsx => RefNameInfoDialog.tsx} | 69 ++++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  1 -
 .../VariantFeatureWidget.test.tsx.snap        |  1 -
 5 files changed, 72 insertions(+), 54 deletions(-)
 rename packages/product-core/src/ui/{RefNameInfoPanel.tsx => RefNameInfoDialog.tsx} (62%)

diff --git a/packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap b/packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap
index 834b741137..77380841b7 100644
--- a/packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap
+++ b/packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap
@@ -16,9 +16,7 @@ exports[`open up a widget 1`] = `
       >
         <span
           class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
-        >
-           
-        </span>
+        />
       </div>
       <div
         class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
diff --git a/packages/product-core/src/ui/AboutDialogContents.tsx b/packages/product-core/src/ui/AboutDialogContents.tsx
index f45e0a323d..67a8e058b5 100644
--- a/packages/product-core/src/ui/AboutDialogContents.tsx
+++ b/packages/product-core/src/ui/AboutDialogContents.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { observer } from 'mobx-react'
 import clone from 'clone'
 import copy from 'copy-to-clipboard'
 import { Button } from '@mui/material'
@@ -14,7 +15,7 @@ import {
   Attributes,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import FileInfoPanel from './FileInfoPanel'
-import RefNamePanel from './RefNameInfoPanel'
+import RefNameInfoDialog from './RefNameInfoDialog'
 
 const useStyles = makeStyles()({
   content: {
@@ -36,7 +37,7 @@ function removeAttr(obj: Record<string, unknown>, attr: string) {
   return obj
 }
 
-export default function AboutContents({
+const AboutDialogContents = observer(function ({
   config,
 }: {
   config: AnyConfigurationModel
@@ -45,6 +46,7 @@ export default function AboutContents({
   const conf = readConfObject(config)
   const session = getSession(config)
   const { classes } = useStyles()
+  const [showRefNames, setShowRefNames] = useState(false)
 
   const hideUris =
     getConf(session, ['formatAbout', 'hideUris']) ||
@@ -75,18 +77,28 @@ export default function AboutContents({
     <div className={classes.content}>
       <BaseCard title="Configuration">
         {!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>
+          <span className={classes.button}>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={() => {
+                setShowRefNames(true)
+              }}
+            >
+              Show ref names
+            </Button>
+            <Button
+              variant="contained"
+              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>
+          </span>
         ) : null}
         <Attributes
           attributes={confPostExt}
@@ -100,7 +112,14 @@ export default function AboutContents({
         </BaseCard>
       ) : null}
       <FileInfoPanel config={config} />
-      <RefNamePanel config={config} />
+      {showRefNames ? (
+        <RefNameInfoDialog
+          config={config}
+          onClose={() => setShowRefNames(false)}
+        />
+      ) : null}
     </div>
   )
-}
+})
+
+export default AboutDialogContents
diff --git a/packages/product-core/src/ui/RefNameInfoPanel.tsx b/packages/product-core/src/ui/RefNameInfoDialog.tsx
similarity index 62%
rename from packages/product-core/src/ui/RefNameInfoPanel.tsx
rename to packages/product-core/src/ui/RefNameInfoDialog.tsx
index 1989599fdc..d0ed9cd074 100644
--- a/packages/product-core/src/ui/RefNameInfoPanel.tsx
+++ b/packages/product-core/src/ui/RefNameInfoDialog.tsx
@@ -1,35 +1,36 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Typography } from '@mui/material'
+import { Button, DialogContent, Typography } from '@mui/material'
 import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
+import { Dialog, LoadingEllipses } from '@jbrowse/core/ui'
 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 copy from 'copy-to-clipboard'
 
 const MAX_REF_NAMES = 10_000
 
 const useStyles = makeStyles()(theme => ({
+  container: {
+    minWidth: 800,
+  },
   refNames: {
     maxHeight: 300,
+    width: '100%',
     overflow: 'auto',
     flexGrow: 1,
     background: theme.palette.background.default,
   },
-  button: {
-    float: 'right',
-  },
 }))
 
-const RefNamePanel = observer(function ({
+const RefNameInfoDialog = observer(function ({
   config,
+  onClose,
 }: {
   config: AnyConfigurationModel
+  onClose: () => void
 }) {
   const [error, setError] = useState<unknown>()
   const [refNames, setRefNames] = useState<string[]>()
@@ -72,37 +73,39 @@ 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" />
+    <Dialog
+      open
+      title="Reference sequence names used in track"
+      onClose={onClose}
+    >
+      <DialogContent className={classes.container}>
+        {error ? (
+          <Typography color="error">{`${error}`}</Typography>
+        ) : refNames === undefined ? (
+          <LoadingEllipses message="Loading refNames" />
+        ) : (
+          <>
+            <Button
+              variant="contained"
+              onClick={() => {
+                copy(JSON.stringify(refNames.join('\n'), null, 2))
+                setCopied(true)
+                setTimeout(() => setCopied(false), 1000)
+              }}
+            >
+              {copied ? 'Copied to clipboard!' : 'Copy ref names'}
+            </Button>
             <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>
-        </>
-      )}
-    </BaseCard>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 })
 
-export default RefNamePanel
+export default RefNameInfoDialog
diff --git a/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap b/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap
index 2ae866665c..938d2b1179 100644
--- a/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap
+++ b/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`open up a widget 1`] = `
           <span
             class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
           >
-             
             ctgA_3_555_0:0:0_2:0... - match
           </span>
         </div>
diff --git a/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.tsx.snap b/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.tsx.snap
index a11dee23c9..0f17aac7ba 100644
--- a/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.tsx.snap
+++ b/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`renders with just the required model elements 1`] = `
           <span
             class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
           >
-             
             rs123
           </span>
         </div>