New jbrowse-desktop start screen design

.eslintignore

@@ -10,3 +10,4 @@
 products/jbrowse-web/scripts/**
 /config/
 /products/jbrowse-web/config/
+products/jbrowse-desktop/public/electron.js

packages/core/assemblyManager/assemblyManager.ts

@@ -37,7 +37,7 @@ export default function assemblyManagerFactory(
         // hence the union with {name:string}
         const {
           jbrowse: { assemblies },
-          session: { sessionAssemblies = [] },
+          session: { sessionAssemblies = [] } = {},
         } = getParent(self)
         return [
           ...assemblies,

packages/core/ui/App.js

@@ -1,5 +1,16 @@
-import React, { Suspense } from 'react'
-import { AppBar, Fab, Toolbar, Tooltip, makeStyles } from '@material-ui/core'
+import React, { useState, Suspense } from 'react'
+import {
+  AppBar,
+  Button,
+  Fab,
+  MenuItem,
+  Paper,
+  Select,
+  Toolbar,
+  Tooltip,
+  Typography,
+  makeStyles,
+} from '@material-ui/core'
 import LaunchIcon from '@material-ui/icons/Launch'
 import { observer } from 'mobx-react'
 import { getEnv } from 'mobx-state-tree'
@@ -76,6 +87,10 @@ const useStyles = makeStyles(theme => ({
     borderColor: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.light,
   },
+
+  selectPaper: {
+    padding: theme.spacing(4),
+  },
 }))
 
 const Logo = observer(({ session }) => {
@@ -88,9 +103,11 @@ const Logo = observer(({ session }) => {
   }
 })
 
-const App = observer(({ session, HeaderButtons }) => {
+const App = observer(({ session, HeaderButtons = null }) => {
   const classes = useStyles()
   const { pluginManager } = getEnv(session)
+  const viewTypes = pluginManager.getElementTypeRecord('view').all()
+  const [value, setValue] = useState(viewTypes[0]?.name)
   const {
     visibleWidget,
     drawerWidth,
@@ -164,28 +181,55 @@ const App = observer(({ session, HeaderButtons }) => {
           </AppBar>
         </div>
         <div className={classes.components}>
-          {views.map(view => {
-            const viewType = pluginManager.getViewType(view.type)
-            if (!viewType) {
-              throw new Error(`unknown view type ${view.type}`)
-            }
-            const { ReactComponent } = viewType
-            return (
-              <ViewContainer
-                key={`view-${view.id}`}
-                view={view}
-                onClose={() => session.removeView(view)}
+          {views.length ? (
+            views.map(view => {
+              const viewType = pluginManager.getViewType(view.type)
+              if (!viewType) {
+                throw new Error(`unknown view type ${view.type}`)
+              }
+              const { ReactComponent } = viewType
+              return (
+                <ViewContainer
+                  key={`view-${view.id}`}
+                  view={view}
+                  onClose={() => session.removeView(view)}
+                >
+                  <Suspense fallback={<div>Loading...</div>}>
+                    <ReactComponent
+                      model={view}
+                      session={session}
+                      getTrackType={pluginManager.getTrackType}
+                    />
+                  </Suspense>
+                </ViewContainer>
+              )
+            })
+          ) : (
+            <Paper className={classes.selectPaper}>
+              <Typography>Select a view to launch</Typography>
+              <Select
+                value={value}
+                onChange={event => setValue(event.target.value)}
+              >
+                {viewTypes.map(({ name }) => {
+                  return (
+                    <MenuItem key={name} value={name}>
+                      {name}
+                    </MenuItem>
+                  )
+                })}
+              </Select>
+              <Button
+                onClick={() => {
+                  session.addView(value, {})
+                }}
+                variant="contained"
+                color="primary"
               >
-                <Suspense fallback={<div>Loading...</div>}>
-                  <ReactComponent
-                    model={view}
-                    session={session}
-                    getTrackType={pluginManager.getTrackType}
-                  />
-                </Suspense>
-              </ViewContainer>
-            )
-          })}
+                Launch view
+              </Button>
+            </Paper>
+          )}
 
           {/* blank space at the bottom of screen allows scroll */}
           <div style={{ height: 300 }} />

packages/core/ui/NewSessionCards.tsx

@@ -70,24 +70,28 @@ interface RootModel {
   setSession: Function
 }
 
-export function NewEmptySession({ root }: { root: RootModel }) {
+export function NewEmptySession({ rootModel }: { rootModel: RootModel }) {
   return (
     <NewSessionCard
       name="Empty"
       onClick={() => {
-        root.setSession(emptySessionSnapshot)
+        rootModel.setSession(emptySessionSnapshot)
       }}
       image={emptyIcon}
     />
   )
 }
 
-export function NewLinearGenomeViewSession({ root }: { root: RootModel }) {
+export function NewLinearGenomeViewSession({
+  rootModel,
+}: {
+  rootModel: RootModel
+}) {
   return (
     <NewSessionCard
       name="Linear Genome View"
       onClick={() => {
-        root.setSession({
+        rootModel.setSession({
           ...emptySessionSnapshot,
           name: `New session ${new Date().toLocaleString()}`,
           views: [{ type: 'LinearGenomeView' }],
@@ -98,12 +102,12 @@ export function NewLinearGenomeViewSession({ root }: { root: RootModel }) {
   )
 }
 
-export function NewSVInspectorSession({ root }: { root: RootModel }) {
+export function NewSVInspectorSession({ rootModel }: { rootModel: RootModel }) {
   return (
     <NewSessionCard
       name="Structural Variant Inspector"
       onClick={() => {
-        root.setSession({
+        rootModel.setSession({
           ...emptySessionSnapshot,
           name: `New session ${new Date().toLocaleString()}`,
           views: [{ type: 'SvInspectorView' }],

plugins/data-management/src/AssemblyManager/AssemblyAddForm.tsx

@@ -8,35 +8,31 @@ import {
   MenuItem,
   Paper,
   TextField,
-  Theme,
   makeStyles,
-  createStyles,
 } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      overflow: 'hidden',
-      padding: theme.spacing(0, 3),
-    },
-    paper: {
-      margin: `${theme.spacing(1)}px auto`,
-      padding: theme.spacing(2),
-    },
-    createButton: {
-      marginTop: '1em',
-      justifyContent: 'center',
-    },
-    paperContent: {
-      flex: 'auto',
-      margin: `${theme.spacing(1)}px auto`,
-      padding: theme.spacing(1),
-      overflow: 'auto',
-    },
-  }),
-)
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+    overflow: 'hidden',
+    padding: theme.spacing(0, 3),
+  },
+  paper: {
+    margin: `${theme.spacing(1)}px auto`,
+    padding: theme.spacing(2),
+  },
+  createButton: {
+    marginTop: '1em',
+    justifyContent: 'center',
+  },
+  paperContent: {
+    flex: 'auto',
+    margin: `${theme.spacing(1)}px auto`,
+    padding: theme.spacing(1),
+    overflow: 'auto',
+  },
+}))
 
 const AdapterSelector = observer(
   ({
@@ -46,7 +42,7 @@ const AdapterSelector = observer(
   }: {
     adapterSelection: string
     setAdapterSelection: Function
-    adapterTypes: Array<string>
+    adapterTypes: string[]
   }) => {
     return (
       <TextField