@jbrowse/plugin-linear-genome-view 2.1.7 → 2.2.1

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { ErrorMessage } from '@jbrowse/core/ui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
@@ -22,26 +21,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
   },
-  dots: {
-    '&::after': {
-      display: 'inline-block',
-      animation: '$ellipsis 1.5s infinite',
-      content: '"."',
-      width: '1em',
-      textAlign: 'left',
-    },
-  },
-  '@keyframes ellipsis': {
-    '0%': {
-      content: '"."',
-    },
-    '33%': {
-      content: '".."',
-    },
-    '66%': {
-      content: '"..."',
-    },
-  },
 }))
 
 const LinearGenomeView = observer(({ model }: { model: LGV }) => {
@@ -49,11 +28,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const { classes } = useStyles()
 
   if (!initialized && !error) {
-    return (
-      <Typography className={classes.dots} variant="h5">
-        Loading
-      </Typography>
-    )
+    return <LoadingEllipses variant="h5" />
   }
   if (!hasDisplayedRegions || error) {
     return <ImportForm model={model} />
@@ -100,12 +75,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           </Paper>
         ) : (
           tracks.map(track => (
-            <ErrorBoundary
-              key={track.id}
-              FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-            >
-              <TrackContainer model={model} track={track} />
-            </ErrorBoundary>
+            <TrackContainer key={track.id} model={model} track={track} />
           ))
         )}
       </TracksContainer>

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -263,6 +263,7 @@ function SVGTracks({
 // render LGV to SVG
 export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
   await when(() => model.initialized)
+  const { Wrapper = ({ children }) => <>{children}</> } = opts
   const { width, tracks, showCytobands } = model
   const shift = 50
   const offset =
@@ -282,24 +283,26 @@ export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
 
   // the xlink namespace is used for rendering <image> tag
   return renderToStaticMarkup(
-    <svg
-      width={width}
-      height={height}
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox={[0, 0, width + shift * 2, height].toString()}
-    >
-      {/* background white */}
-      <rect width={width + shift * 2} height={height} fill="white" />
+    <Wrapper>
+      <svg
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox={[0, 0, width + shift * 2, height].toString()}
+      >
+        {/* background white */}
+        <rect width={width + shift * 2} height={height} fill="white" />
 
-      <g stroke="none" transform={`translate(${shift} ${fontSize})`}>
-        <SVGHeader model={model} />
-        <SVGTracks
-          model={model}
-          displayResults={displayResults}
-          offset={offset}
-        />
-      </g>
-    </svg>,
+        <g stroke="none" transform={`translate(${shift} ${fontSize})`}>
+          <SVGHeader model={model} />
+          <SVGTracks
+            model={model}
+            displayResults={displayResults}
+            offset={offset}
+          />
+        </g>
+      </svg>
+    </Wrapper>,
   )
 }

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
-import { ResizeHandle } from '@jbrowse/core/ui'
+import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
+import { ErrorBoundary } from 'react-error-boundary'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
 // locals
@@ -92,6 +93,7 @@ function TrackContainer({
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
+  const minimized = track.minimized
   const debouncedOnDragEnter = useDebouncedCallback(() => {
     if (isAlive(display) && dimmed) {
       moveTrack(draggingTrackId, track.id)
@@ -109,36 +111,45 @@ function TrackContainer({
   return (
     <Paper className={classes.root} variant="outlined">
       <TrackContainerLabel model={track} view={model} />
-      <div
-        className={classes.trackRenderingContainer}
-        style={{ height }}
-        onScroll={event => display.setScrollTop(event.currentTarget.scrollTop)}
-        onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
+      <ErrorBoundary
+        key={track.id}
+        FallbackComponent={({ error }) => <ErrorMessage error={error} />}
       >
         <div
-          ref={ref}
-          className={classes.renderingComponentContainer}
-          style={{ transform: `scaleX(${model.scaleFactor})` }}
+          className={classes.trackRenderingContainer}
+          style={{ height: minimized ? 20 : height }}
+          onScroll={evt => display.setScrollTop(evt.currentTarget.scrollTop)}
+          onDragEnter={debouncedOnDragEnter}
+          data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         >
-          <RenderingComponent
-            model={display}
-            onHorizontalScroll={horizontalScroll}
-          />
-        </div>
+          {!minimized ? (
+            <>
+              <div
+                ref={ref}
+                className={classes.renderingComponentContainer}
+                style={{ transform: `scaleX(${model.scaleFactor})` }}
+              >
+                <RenderingComponent
+                  model={display}
+                  onHorizontalScroll={horizontalScroll}
+                />
+              </div>
 
-        {DisplayBlurb ? (
-          <div
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: display.height - 20,
-            }}
-          >
-            <DisplayBlurb model={display} />
-          </div>
-        ) : null}
-      </div>
+              {DisplayBlurb ? (
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: display.height - 20,
+                  }}
+                >
+                  <DisplayBlurb model={display} />
+                </div>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </ErrorBoundary>
       <div
         className={classes.overlay}
         style={{

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -18,6 +18,8 @@ import {
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import DragIcon from '@mui/icons-material/DragIndicator'
 import CloseIcon from '@mui/icons-material/Close'
+import MinimizeIcon from '@mui/icons-material/Minimize'
+import AddIcon from '@mui/icons-material/Add'
 
 import { LinearGenomeViewModel } from '..'
 
@@ -64,6 +66,7 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     const view = getContainingView(track) as LGV
     const session = getSession(track)
     const trackConf = track.configuration
+    const minimized = track.minimized
     const trackId = getConf(track, 'trackId')
     const trackName = getTrackName(trackConf, session)
 
@@ -73,6 +76,11 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     })
 
     const items = [
+      {
+        label: minimized ? 'Restore track' : 'Minimize track',
+        icon: minimized ? AddIcon : MinimizeIcon,
+        onClick: () => track.setMinimized(!minimized),
+      },
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
     ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
@@ -103,12 +111,13 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
         >
           <CloseIcon fontSize="small" />
         </IconButton>
+
         <Typography
           variant="body1"
           component="span"
           className={classes.trackName}
         >
-          {trackName}
+          {trackName + (minimized ? ' (minimized)' : '')}
         </Typography>
         <IconButton
           {...bindTrigger(popupState)}