Lint

Author: cmdcolin

products/jbrowse-desktop/src/components/StartScreen/GenomesPanel.tsx renamed to products/jbrowse-desktop/src/components/StartScreen/FavoriteGenomesPanel.tsx

@@ -1,13 +1,11 @@
 import { useState } from 'react'
 
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
-import { useLocalStorage } from '@jbrowse/core/util'
 import { Button, Checkbox, Typography } from '@mui/material'
 import deepmerge from 'deepmerge'
 import useSWR from 'swr'
 import { makeStyles } from 'tss-react/mui'
 
-import AllGenomesDialog from './AllGenomesDialog'
 import { addRelativeUris, fetchjson, loadPluginManager } from './util'
 
 import type { JBrowseConfig } from './types'
@@ -17,6 +15,8 @@ const { ipcRenderer } = window.require('electron')
 
 const useStyles = makeStyles()(theme => ({
   button: {
+    float: 'right',
+    height: '3em',
     margin: theme.spacing(2),
   },
   panel: {
@@ -32,24 +32,19 @@ const useStyles = makeStyles()(theme => ({
   },
   table: {
     width: '100%',
-    borderCollapse: 'collapse',
   },
 }))
 
 function GenomesPanel({
   setPluginManager,
+  favorites,
 }: {
   setPluginManager: (arg0: PluginManager) => void
+  favorites: string[]
 }) {
   const { classes } = useStyles()
   const [error, setError] = useState<unknown>()
   const [selected, setSelected] = useState({} as Record<string, boolean>)
-  const [showAll, setShowAll] = useState(false)
-  const [favorites, setFavorites] = useLocalStorage<string[]>(
-    'jbrowse-genome-favorites',
-    ['hs1', 'hg38', 'hg19', 'mm39', 'mm10'],
-  )
-
   const { data: list, error: fetchError } = useSWR(
     'quickstarts',
     () =>
@@ -90,7 +85,9 @@ function GenomesPanel({
     <div>
       {e ? <ErrorMessage error={e} /> : null}
       <Typography variant="h6" className={classes.mb}>
-        Favorite genomes{' '}
+        Favorite genomes
+      </Typography>
+      <div>
         <Button
           className={classes.button}
           variant="contained"
@@ -106,15 +103,8 @@ function GenomesPanel({
         >
           Go
         </Button>
-        <Button
-          variant="contained"
-          onClick={() => {
-            setShowAll(true)
-          }}
-        >
-          Show all available genomes
-        </Button>
-      </Typography>
+      </div>
+
       <div className={classes.panel}>
         {list ? (
           <table className={classes.table}>
@@ -124,9 +114,9 @@ function GenomesPanel({
                 .slice(0, 10)
                 .map(([name, val]) => (
                   <tr key={name}>
-                    <td>
+                    <td style={{ width: 40 }}>
                       <Checkbox
-                        style={{ padding: 2 }}
+                        style={{ padding: 0 }}
                         checked={selected[name] || false}
                         onChange={() => {
                           setSelected({
@@ -146,16 +136,6 @@ function GenomesPanel({
           <LoadingEllipses />
         )}
       </div>
-      {showAll ? (
-        <AllGenomesDialog
-          favorites={favorites}
-          setFavorites={setFavorites}
-          launch={launchMainBrowsers}
-          onClose={() => {
-            setShowAll(false)
-          }}
-        />
-      ) : null}
     </div>
   )
 }

products/jbrowse-desktop/src/components/StartScreen/GenArkDataTable.tsx

@@ -53,6 +53,7 @@ const useStyles = makeStyles()(theme => ({
   span: {
     gap: 10,
     display: 'flex',
+    marginBottom: 20,
   },
 
   panel: {

products/jbrowse-desktop/src/components/StartScreen/LauncherPanel.tsx

@@ -1,13 +1,26 @@
+import { useState } from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { useLocalStorage } from '@jbrowse/core/util'
+import deepmerge from 'deepmerge'
 import { makeStyles } from 'tss-react/mui'
 
-import GenomesPanel from './GenomesPanel'
+import FavoriteGenomesPanel from './FavoriteGenomesPanel'
 import OpenSequencePanel from './OpenSequencePanel'
+import QuickstartPanel from './QuickstartPanel'
+import { fetchjson, loadPluginManager } from './util'
 
+import type { JBrowseConfig } from './types'
 import type PluginManager from '@jbrowse/core/PluginManager'
 
+const { ipcRenderer } = window.require('electron')
+
 const useStyles = makeStyles()(theme => ({
   form: {
     marginTop: theme.spacing(4),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
   },
 }))
 
@@ -17,11 +30,52 @@ export default function LauncherPanel({
   setPluginManager: (arg0: PluginManager) => void
 }) {
   const { classes } = useStyles()
+  const [error, setError] = useState<unknown>()
+  const [favorites, setFavorites] = useLocalStorage<string[]>(
+    'jbrowse-genome-favorites',
+    ['hs1', 'hg38', 'hg19', 'mm39', 'mm10'],
+  )
+
+  async function launch(sel: string[]) {
+    try {
+      setError(undefined)
+      const config = deepmerge.all(
+        await Promise.all(
+          sel.map(async entry => {
+            const ret = (await fetchjson(entry)) as JBrowseConfig
+            // @ts-expect-error
+            addRelativeUris(ret as Record<string, unknown>, new URL(entry))
+            return ret
+          }),
+        ),
+      )
+
+      const path = await ipcRenderer.invoke('createInitialAutosaveFile', {
+        ...config,
+        defaultSession: {
+          name: `New session ${new Date().toLocaleString('en-US')}`,
+        },
+      })
+      setPluginManager(await loadPluginManager(path))
+    } catch (e) {
+      console.error(e)
+      setError(e)
+    }
+  }
   return (
     <div className={classes.form}>
-      <OpenSequencePanel setPluginManager={setPluginManager} />
-
-      <GenomesPanel setPluginManager={setPluginManager} />
+      {error ? <ErrorMessage error={error} /> : null}
+      <OpenSequencePanel
+        setPluginManager={setPluginManager}
+        favorites={favorites}
+        setFavorites={setFavorites}
+        launch={launch}
+      />
+      <FavoriteGenomesPanel
+        favorites={favorites}
+        setPluginManager={setPluginManager}
+      />
+      <QuickstartPanel setPluginManager={setPluginManager} />
     </div>
   )
 }

products/jbrowse-desktop/src/components/StartScreen/MainGenomesDialogPanel.tsx

@@ -26,6 +26,9 @@ import { fetchjson } from './util'
 import type { UCSCListGenome } from './types'
 
 const useStyles = makeStyles()(theme => ({
+  button: {
+    margin: 5,
+  },
   ml: {
     marginLeft: 10,
   },
@@ -129,7 +132,7 @@ export default function MainGenomesDialogPanel({
               setFavorites(['hs1', 'hg38', 'hg19', 'mm39', 'mm10'])
             }}
           >
-            Reset favorites
+            Reset favorites list to defaults
           </Button>
           <Checkbox2
             className={classes.ml}

products/jbrowse-desktop/src/components/StartScreen/OpenSequencePanel.tsx

@@ -4,31 +4,36 @@ import { Button, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 import OpenSequenceDialog from '../OpenSequenceDialog'
+import AllGenomesDialog from './AllGenomesDialog'
 import { loadPluginManager } from './util'
 
 import type PluginManager from '@jbrowse/core/PluginManager'
 
 const { ipcRenderer } = window.require('electron')
 
 const useStyles = makeStyles()(() => ({
-  container: {
-    marginBottom: 50,
-  },
   button: {
     margin: 5,
   },
 }))
 
 export default function OpenSequencePanel({
   setPluginManager,
+  favorites,
+  setFavorites,
+  launch,
 }: {
   setPluginManager: (arg0: PluginManager) => void
+  favorites: string[]
+  setFavorites: (arg: string[]) => void
+  launch: (arg: any) => void
 }) {
   const { classes } = useStyles()
   const [sequenceDialogOpen, setSequenceDialogOpen] = useState(false)
+  const [showAll, setShowAll] = useState(false)
 
   return (
-    <div className={classes.container}>
+    <div>
       <Typography variant="h6" style={{ marginBottom: 5 }}>
         Select a sequence file e.g. reference genome FASTA file
       </Typography>
@@ -42,6 +47,14 @@ export default function OpenSequencePanel({
       >
         Open sequence file(s)
       </Button>
+      <Button
+        variant="contained"
+        onClick={() => {
+          setShowAll(true)
+        }}
+      >
+        Show all available genomes
+      </Button>
 
       {sequenceDialogOpen ? (
         <OpenSequenceDialog
@@ -64,6 +77,17 @@ export default function OpenSequencePanel({
           }}
         />
       ) : null}
+
+      {showAll ? (
+        <AllGenomesDialog
+          favorites={favorites}
+          setFavorites={setFavorites}
+          launch={launch}
+          onClose={() => {
+            setShowAll(false)
+          }}
+        />
+      ) : null}
     </div>
   )
 }