@jbrowse/plugin-circular-view 2.3.1 → 2.3.2

package/src/CircularView/components/CircularView.tsx

@@ -1,22 +1,12 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { IconButton } from '@mui/material'
-import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
+import { ResizeHandle } from '@jbrowse/core/ui'
 import { assembleLocString } from '@jbrowse/core/util'
 import { makeStyles } from 'tss-react/mui'
-import { grey } from '@mui/material/colors'
-
-// icons
-import ZoomOutIcon from '@mui/icons-material/ZoomOut'
-import ZoomInIcon from '@mui/icons-material/ZoomIn'
-import RotateLeftIcon from '@mui/icons-material/RotateLeft'
-import RotateRightIcon from '@mui/icons-material/RotateRight'
-import LockOpenIcon from '@mui/icons-material/LockOpen'
-import LockIcon from '@mui/icons-material/Lock'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
 // locals
 import Ruler from './Ruler'
+import Controls from './Controls'
 import ImportForm from './ImportForm'
 import { CircularViewModel } from '../models/CircularView'
 
@@ -38,24 +28,6 @@ const useStyles = makeStyles()(theme => ({
     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 }: { model: CircularViewModel }) => {
@@ -85,163 +57,84 @@ const Slices = observer(({ model }: { model: CircularViewModel }) => {
   )
 })
 
-const Controls = observer(function ({
-  model,
-  showingFigure,
-}: {
-  model: CircularViewModel
-  showingFigure: boolean
-}) {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.controls}>
-      <IconButton
-        onClick={model.zoomOutButton}
-        className={classes.iconButton}
-        title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
-        disabled={
-          !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow
-        }
-        color="secondary"
-      >
-        <ZoomOutIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.zoomInButton}
-        className={classes.iconButton}
-        title="zoom in"
-        disabled={!showingFigure || model.atMinBpPerPx}
-        color="secondary"
-      >
-        <ZoomInIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.rotateCounterClockwiseButton}
-        className={classes.iconButton}
-        title="rotate counter-clockwise"
-        disabled={!showingFigure}
-        color="secondary"
-      >
-        <RotateLeftIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.rotateClockwiseButton}
-        className={classes.iconButton}
-        title="rotate clockwise"
-        disabled={!showingFigure}
-        color="secondary"
-      >
-        <RotateRightIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.toggleFitToWindowLock}
-        className={classes.iconButton}
-        title={
-          model.lockedFitToWindow
-            ? 'locked model to window size'
-            : 'unlocked model to zoom further'
-        }
-        disabled={model.tooSmallToLock}
-        color="secondary"
-      >
-        {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
-      </IconButton>
-
-      {model.hideTrackSelectorButton ? null : (
-        <IconButton
-          onClick={model.activateTrackSelector}
-          title="Open track selector"
-          data-testid="circular_track_select"
-          color="secondary"
-        >
-          <TrackSelectorIcon />
-        </IconButton>
-      )}
-    </div>
-  )
-})
-
 const CircularView = observer(({ model }: { model: CircularViewModel }) => {
-  const { classes } = useStyles()
   const initialized =
     !!model.displayedRegions.length &&
     !!model.figureWidth &&
-    !!model.figureHeight
+    !!model.figureHeight &&
+    model.initialized
 
   const showImportForm = !initialized && !model.disableImportForm
   const showFigure = initialized && !showImportForm
 
   return (
-    <div
-      className={classes.root}
-      style={{
-        width: model.width,
-        height: model.height,
-      }}
-      data-testid={model.id}
-    >
-      {model.error ? (
-        <ErrorMessage error={model.error} />
-      ) : (
-        <>
-          {showImportForm ? <ImportForm model={model} /> : null}
-          <>
-            {!showFigure ? null : (
-              <div
-                className={classes.scroller}
-                style={{
-                  width: model.width,
-                  height: model.height,
-                }}
-              >
-                <div
-                  style={{
-                    transform: [`rotate(${model.offsetRadians}rad)`].join(' '),
-                    transition: 'transform 0.5s',
-                    transformOrigin: model.centerXY
-                      .map(x => `${x}px`)
-                      .join(' '),
-                  }}
-                >
-                  <svg
-                    style={{
-                      position: 'absolute',
-                      left: 0,
-                      top: 0,
-                    }}
-                    className={classes.sliceRoot}
-                    width={`${model.figureWidth}px`}
-                    height={`${model.figureHeight}px`}
-                    version="1.1"
-                  >
-                    <g transform={`translate(${model.centerXY})`}>
-                      <Slices model={model} />
-                    </g>
-                  </svg>
-                </div>
-              </div>
-            )}
-            <Controls model={model} showingFigure={showFigure} />
-            {model.hideVerticalResizeHandle ? null : (
-              <ResizeHandle
-                onDrag={model.resizeHeight}
-                style={{
-                  height: dragHandleHeight,
-                  position: 'absolute',
-                  bottom: 0,
-                  left: 0,
-                  background: '#ccc',
-                  boxSizing: 'border-box',
-                  borderTop: '1px solid #fafafa',
-                }}
-              />
-            )}
-          </>
-        </>
+    <>
+      {showImportForm || model.error ? (
+        <ImportForm model={model} />
+      ) : showFigure ? (
+        <CircularViewLoaded model={model} />
+      ) : null}
+    </>
+  )
+})
+
+const CircularViewLoaded = observer(function ({
+  model,
+}: {
+  model: CircularViewModel
+}) {
+  const {
+    width,
+    height,
+    id,
+    offsetRadians,
+    centerXY,
+    figureWidth,
+    figureHeight,
+    hideVerticalResizeHandle,
+  } = model
+  const { classes } = useStyles()
+  return (
+    <div className={classes.root} style={{ width, height }} data-testid={id}>
+      <div className={classes.scroller} style={{ width, height }}>
+        <div
+          style={{
+            transform: [`rotate(${offsetRadians}rad)`].join(' '),
+            transition: 'transform 0.5s',
+            transformOrigin: centerXY.map(x => `${x}px`).join(' '),
+          }}
+        >
+          <svg
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+            }}
+            className={classes.sliceRoot}
+            width={figureWidth + 'px'}
+            height={figureHeight + 'px'}
+            version="1.1"
+          >
+            <g transform={`translate(${centerXY})`}>
+              <Slices model={model} />
+            </g>
+          </svg>
+        </div>
+      </div>
+      <Controls model={model} />
+      {hideVerticalResizeHandle ? null : (
+        <ResizeHandle
+          onDrag={model.resizeHeight}
+          style={{
+            height: dragHandleHeight,
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            background: '#ccc',
+            boxSizing: 'border-box',
+            borderTop: '1px solid #fafafa',
+          }}
+        />
       )}
     </div>
   )

package/src/CircularView/components/Controls.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { grey } from '@mui/material/colors'
+
+// icons
+import ZoomOutIcon from '@mui/icons-material/ZoomOut'
+import ZoomInIcon from '@mui/icons-material/ZoomIn'
+import RotateLeftIcon from '@mui/icons-material/RotateLeft'
+import RotateRightIcon from '@mui/icons-material/RotateRight'
+import LockOpenIcon from '@mui/icons-material/LockOpen'
+import LockIcon from '@mui/icons-material/Lock'
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+
+// locals
+import { CircularViewModel } from '../models/CircularView'
+
+const useStyles = makeStyles()({
+  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,
+  },
+})
+
+const Controls = observer(function ({ model }: { model: CircularViewModel }) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.controls}>
+      <IconButton
+        onClick={model.zoomOutButton}
+        className={classes.iconButton}
+        title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
+        disabled={model.atMaxBpPerPx || model.lockedFitToWindow}
+        color="secondary"
+      >
+        <ZoomOutIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={model.zoomInButton}
+        className={classes.iconButton}
+        title="zoom in"
+        disabled={model.atMinBpPerPx}
+        color="secondary"
+      >
+        <ZoomInIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={model.rotateCounterClockwiseButton}
+        className={classes.iconButton}
+        title="rotate counter-clockwise"
+        color="secondary"
+      >
+        <RotateLeftIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={model.rotateClockwiseButton}
+        className={classes.iconButton}
+        title="rotate clockwise"
+        color="secondary"
+      >
+        <RotateRightIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={model.toggleFitToWindowLock}
+        className={classes.iconButton}
+        title={
+          model.lockedFitToWindow
+            ? 'locked model to window size'
+            : 'unlocked model to zoom further'
+        }
+        disabled={model.tooSmallToLock}
+        color="secondary"
+      >
+        {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
+      </IconButton>
+
+      {model.hideTrackSelectorButton ? null : (
+        <IconButton
+          onClick={model.activateTrackSelector}
+          title="Open track selector"
+          data-testid="circular_track_select"
+          color="secondary"
+        >
+          <TrackSelectorIcon />
+        </IconButton>
+      )}
+    </div>
+  )
+})
+export default Controls

package/src/CircularView/components/ImportForm.tsx

@@ -7,7 +7,7 @@ import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 
 const useStyles = makeStyles()(theme => ({
   importFormContainer: {
-    marginBottom: theme.spacing(4),
+    padding: theme.spacing(6),
   },
 }))
 
@@ -15,10 +15,9 @@ const useStyles = makeStyles()(theme => ({
 const ImportForm = observer(({ model }: { model: any }) => {
   const { classes } = useStyles()
   const session = getSession(model)
-  const { error: modelError } = model
+  const { error } = model
   const { assemblyNames, assemblyManager } = session
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [error, setError] = useState<Error | undefined>(modelError)
   const assembly = assemblyManager.get(selectedAsm)
   const assemblyError = assemblyNames.length
     ? assembly?.error
@@ -39,7 +38,7 @@ const ImportForm = observer(({ model }: { model: any }) => {
         <Grid item>
           <AssemblySelector
             onChange={val => {
-              setError(undefined)
+              model.setError(undefined)
               setSelectedAsm(val)
             }}
             session={session}
@@ -50,11 +49,15 @@ const ImportForm = observer(({ model }: { model: any }) => {
         <Grid item>
           <Button
             disabled={!regions?.length}
-            onClick={() => model.setDisplayedRegions(regions)}
+            onClick={() => {
+              model.setError(undefined)
+              model.setDisplayedRegions(regions)
+            }}
             variant="contained"
             color="primary"
           >
-            {regions.length ? 'Open' : 'Loading&hellip;'}
+            {/* if there's an error, it's not actively loading  so just display open */}
+            {regions.length || err ? 'Open' : 'Loading...'}
           </Button>
         </Grid>
       </Grid>