@jbrowse/plugin-circular-view 1.5.6 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "1.5.6",
+  "version": "1.6.1",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -49,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f3d36cfd90f7c5bdf86869d6698d8cb68a8e122f"
+  "gitHead": "d6ad1b8e7fbb00000f2ac87f463c82e9db12ea01"
 }

package/src/CircularView/components/CircularView.js

@@ -1,6 +1,11 @@
 import React from 'react'
 import { observer } from 'mobx-react'
+import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
+import { assembleLocString } from '@jbrowse/core/util'
+import { IconButton, makeStyles } from '@material-ui/core'
+import { grey } from '@material-ui/core/colors'
 
+// icons
 import ZoomOut from '@material-ui/icons/ZoomOut'
 import ZoomIn from '@material-ui/icons/ZoomIn'
 import RotateLeft from '@material-ui/icons/RotateLeft'
@@ -9,84 +14,70 @@ import LockOutline from '@material-ui/icons/LockOutlined'
 import LockOpen from '@material-ui/icons/LockOpen'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
-// material-ui stuff
-import { IconButton, makeStyles } from '@material-ui/core'
-
-import { grey } from '@material-ui/core/colors'
-
-import { ResizeHandle } from '@jbrowse/core/ui'
-import { assembleLocString } from '@jbrowse/core/util'
+// locals
 import Ruler from './Ruler'
 import ImportForm from './ImportForm'
 
 const dragHandleHeight = 3
 
-const useStyles = makeStyles(theme => {
-  return {
-    root: {
-      position: 'relative',
-      marginBottom: theme.spacing(1),
-      overflow: 'hidden',
-      background: 'white',
-    },
-    scroller: {
-      overflow: 'auto',
-    },
-    sliceRoot: {
-      background: 'none',
-      // background: theme.palette.background.paper,
-      boxSizing: 'content-box',
-      display: 'block',
-    },
-    iconButton: {
-      padding: '4px',
-      margin: '0 2px 0 2px',
-    },
-    controls: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      position: 'absolute',
-      background: grey[200],
-      boxSizing: 'border-box',
-      borderRight: '1px solid #a2a2a2',
-      borderBottom: '1px solid #a2a2a2',
-      left: 0,
-      top: 0,
-    },
-    importFormContainer: {
-      marginBottom: theme.spacing(4),
-    },
-  }
-})
+const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'relative',
+    marginBottom: theme.spacing(1),
+    overflow: 'hidden',
+    background: 'white',
+  },
+  scroller: {
+    overflow: 'auto',
+  },
+  sliceRoot: {
+    background: 'none',
+    // background: theme.palette.background.paper,
+    boxSizing: 'content-box',
+    display: 'block',
+  },
+  iconButton: {
+    padding: '4px',
+    margin: '0 2px 0 2px',
+  },
+  controls: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    position: 'absolute',
+    background: grey[200],
+    boxSizing: 'border-box',
+    borderRight: '1px solid #a2a2a2',
+    borderBottom: '1px solid #a2a2a2',
+    left: 0,
+    top: 0,
+  },
+  importFormContainer: {
+    marginBottom: theme.spacing(4),
+  },
+}))
 
 const Slices = observer(({ model }) => {
   return (
     <>
-      <>
-        {model.staticSlices.map(slice => {
-          return (
-            <Ruler
-              key={assembleLocString(
-                slice.region.elided ? slice.region.regions[0] : slice.region,
-              )}
-              model={model}
-              slice={slice}
-            />
-          )
-        })}
-      </>
-      <>
-        {model.tracks.map(track => {
-          const display = track.displays[0]
-          return (
-            <display.RenderingComponent
-              key={display.id}
-              display={display}
-              view={model}
-            />
-          )
-        })}
-      </>
+      {model.staticSlices.map(slice => (
+        <Ruler
+          key={assembleLocString(
+            slice.region.elided ? slice.region.regions[0] : slice.region,
+          )}
+          model={model}
+          slice={slice}
+        />
+      ))}
+      {model.tracks.map(track => {
+        const display = track.displays[0]
+        return (
+          <display.RenderingComponent
+            key={display.id}
+            display={display}
+            view={model}
+          />
+        )
+      })}
     </>
   )
 })
@@ -183,7 +174,7 @@ const CircularView = observer(({ model }) => {
       data-testid={model.id}
     >
       {model.error ? (
-        <p style={{ color: 'red' }}>{model.error.message}</p>
+        <ErrorMessage error={model.error} />
       ) : (
         <>
           {showImportForm ? <ImportForm model={model} /> : null}

package/src/CircularView/components/ImportForm.tsx

@@ -1,15 +1,8 @@
 import React, { useState } from 'react'
+import { Button, Container, Grid, makeStyles } from '@material-ui/core'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-
-// material-ui stuff
-import {
-  Button,
-  Container,
-  Grid,
-  Typography,
-  makeStyles,
-} from '@material-ui/core'
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
 
 const useStyles = makeStyles(theme => ({
@@ -18,14 +11,6 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const ErrorDisplay = observer(({ error }: { error?: Error | string }) => {
-  return (
-    <Typography variant="h6" color="error">
-      {`${error}`}
-    </Typography>
-  )
-})
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ImportForm = observer(({ model }: { model: any }) => {
   const classes = useStyles()
@@ -42,45 +27,38 @@ const ImportForm = observer(({ model }: { model: any }) => {
   const err = assemblyError || error
 
   return (
-    <>
-      <Container className={classes.importFormContainer}>
-        {err ? (
-          <Grid
-            container
-            spacing={1}
-            justifyContent="center"
-            alignItems="center"
-          >
-            <Grid item>
-              <ErrorDisplay error={err} />
-            </Grid>
-          </Grid>
-        ) : null}
+    <Container className={classes.importFormContainer}>
+      {err ? (
         <Grid container spacing={1} justifyContent="center" alignItems="center">
           <Grid item>
-            <AssemblySelector
-              onChange={val => {
-                setError(undefined)
-                setSelectedAsm(val)
-              }}
-              session={session}
-              selected={selectedAsm}
-            />
+            <ErrorMessage error={err} />
           </Grid>
+        </Grid>
+      ) : null}
+      <Grid container spacing={1} justifyContent="center" alignItems="center">
+        <Grid item>
+          <AssemblySelector
+            onChange={val => {
+              setError(undefined)
+              setSelectedAsm(val)
+            }}
+            session={session}
+            selected={selectedAsm}
+          />
+        </Grid>
 
-          <Grid item>
-            <Button
-              disabled={!(regions && regions.length)}
-              onClick={() => model.setDisplayedRegions(regions)}
-              variant="contained"
-              color="primary"
-            >
-              {regions.length ? 'Open' : 'Loading…'}
-            </Button>
-          </Grid>
+        <Grid item>
+          <Button
+            disabled={!regions?.length}
+            onClick={() => model.setDisplayedRegions(regions)}
+            variant="contained"
+            color="primary"
+          >
+            {regions.length ? 'Open' : 'Loading…'}
+          </Button>
         </Grid>
-      </Container>
-    </>
+      </Grid>
+    </Container>
   )
 })
 

package/src/CircularView/models/CircularView.ts

@@ -58,7 +58,7 @@ export default function CircularView(pluginManager: PluginManager) {
         trackSelectorType: 'hierarchical',
       })
       .volatile(() => ({
-        width: 800,
+        width: 0,
       }))
       .views(self => ({
         get staticSlices() {
@@ -203,20 +203,16 @@ export default function CircularView(pluginManager: PluginManager) {
           // it to be loaded. this is done by looking in the assemblyManager's
           // assembly list, and then waiting on it's initialized state which is
           // updated later
-          const assembliesInitialized = this.assemblyNames.every(
-            assemblyName => {
-              if (
-                assemblyManager.assemblyList
-                  ?.map(asm => asm.name)
-                  .includes(assemblyName)
-              ) {
-                return (assemblyManager.get(assemblyName) || {}).initialized
-              }
-              return true
-            },
-          )
-
-          return assembliesInitialized
+          return this.assemblyNames.every(assemblyName => {
+            if (
+              assemblyManager.assemblyList
+                ?.map(asm => asm.name)
+                .includes(assemblyName)
+            ) {
+              return assemblyManager.get(assemblyName)?.initialized
+            }
+            return true
+          })
         },
       }))
       .volatile(() => ({

package/src/index.ts

@@ -1,10 +1,15 @@
 import { lazy } from 'react'
+import { when } from 'mobx'
 import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import Plugin from '@jbrowse/core/Plugin'
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
 import DataUsageIcon from '@material-ui/icons/DataUsage'
-import stateModelFactory from './CircularView/models/CircularView'
+import stateModelFactory, {
+  CircularViewModel,
+} from './CircularView/models/CircularView'
+
+type CGV = CircularViewModel
 
 export default class CircularViewPlugin extends Plugin {
   name = 'CircularViewPlugin'
@@ -20,6 +25,44 @@ export default class CircularViewPlugin extends Plugin {
           name: 'CircularView',
         }),
     )
+
+    pluginManager.addToExtensionPoint(
+      'LaunchView-CircularView',
+      // @ts-ignore
+      async ({
+        session,
+        assembly,
+        loc,
+        tracks = [],
+      }: {
+        session: AbstractSessionModel
+        assembly?: string
+        loc: string
+        tracks?: string[]
+      }) => {
+        const { assemblyManager } = session
+        const view = session.addView('CircularView', {}) as CGV
+
+        await when(() => view.initialized)
+
+        if (!assembly) {
+          throw new Error(
+            'No assembly provided when launching circular genome view',
+          )
+        }
+
+        const asm = await assemblyManager.waitForAssembly(assembly)
+        if (!asm) {
+          throw new Error(
+            `Assembly "${assembly}" not found when launching circular genome view`,
+          )
+        }
+
+        view.setDisplayedRegions(asm.regions || [])
+
+        tracks.forEach(track => view.showTrack(track))
+      },
+    )
   }
 
   configure(pluginManager: PluginManager) {