@jbrowse/plugin-linear-genome-view 2.3.4 → 2.4.1

package/esm/index.js

@@ -3,10 +3,10 @@ import { isAbstractMenuManager } from '@jbrowse/core/util';
 // icons
 import LineStyleIcon from '@mui/icons-material/LineStyle';
 // locals
-import { BaseLinearDisplay, BaseLinearDisplayComponent, BlockMsg, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
-import LinearBareDisplayF, { configSchemaFactory as linearBareDisplayConfigSchemaFactory, } from './LinearBareDisplay';
-import LinearGenomeViewF, { renderToSvg, RefNameAutocomplete, SearchBox, ZoomControls, LinearGenomeView, } from './LinearGenomeView';
-import LinearBasicDisplayF, { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
+import { BaseLinearDisplay, BaseLinearDisplayComponent, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
+import LinearBareDisplayF from './LinearBareDisplay';
+import LinearGenomeViewF, { SearchBox, ZoomControls, LinearGenomeView, } from './LinearGenomeView';
+import LinearBasicDisplayF from './LinearBasicDisplay';
 import FeatureTrackF from './FeatureTrack';
 import BasicTrackF from './BasicTrack';
 import LaunchLinearGenomeViewF from './LaunchLinearGenomeView';
@@ -43,5 +43,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
         }
     }
 }
-export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, BlockMsg, };
+export { configSchemaFactory as linearBareDisplayConfigSchemaFactory } from './LinearBareDisplay';
+export { BlockMsg, baseLinearDisplayConfigSchema, BaseLinearDisplayComponent, BaseLinearDisplay, } from './BaseLinearDisplay';
+export { RefNameAutocomplete, SearchBox, } from './LinearGenomeView';
+export { renderToSvg, SVGTracks, totalHeight, SVGRuler, } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView';
+export { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAE1B,QAAQ,EACR,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,EAAE,EACzB,mBAAmB,IAAI,oCAAoC,GAC5D,MAAM,qBAAqB,CAAA;AAC5B,OAAO,iBAAiB,EAAE,EACxB,WAAW,EAGX,mBAAmB,EACnB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,EAAE,EAC1B,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA;AAE7B,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,6BAA6B,EAC7B,oCAAoC,EACpC,qCAAqC,EACrC,8BAA8B,EAC9B,WAAW,EACX,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,QAAQ,GACT,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,iBAAiB,EAAE,EACxB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AAEtD,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAID,OAAO,EAAE,mBAAmB,IAAI,oCAAoC,EAAE,MAAM,qBAAqB,CAAA;AACjG,OAAO,EACL,QAAQ,EACR,6BAA6B,EAC7B,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAEL,mBAAmB,EAEnB,SAAS,GACV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,sDAAsD,CAAA;AAC7D,OAAO,EACL,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -47,7 +47,7 @@
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
-    "material-ui-popup-state": "^3.0.0",
+    "material-ui-popup-state": "^5.0.0",
     "normalize-wheel": "^1.0.1",
     "react-error-boundary": "^3.0.0",
     "react-popper": "^2.0.0"
@@ -66,5 +66,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "98ae48be91ee2371e1b2768a907b4997995e9915"
+  "gitHead": "747c50c4edc0184827efa4f8dfc576ca9a72caeb"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -6,8 +6,7 @@ import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
 
 // locals
-import Tooltip from './Tooltip'
-import BlockMsg from './BlockMsg'
+
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
@@ -113,4 +112,6 @@ const BaseLinearDisplay = observer(function (props: {
 })
 
 export default BaseLinearDisplay
-export { Tooltip, BlockMsg }
+
+export { default as Tooltip } from './Tooltip'
+export { default as BlockMsg } from './BlockMsg'

package/src/BaseLinearDisplay/components/Block.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
   },
   interRegionPaddingBlock: {
     minHeight: '100%',
-    backgroundColor: theme.palette.text.primary,
+    backgroundColor: theme.palette.text.disabled,
   },
   boundaryPaddingBlock: {
     minHeight: '100%',

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -10,18 +10,17 @@ import RefreshIcon from '@mui/icons-material/Refresh'
 // locals
 import BlockMsg from './BlockMsg'
 
-const useStyles = makeStyles()(theme => ({
-  loading: {
-    paddingLeft: '0.6em',
-    backgroundColor: theme.palette.action.disabledBackground,
-    backgroundImage:
-      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-}))
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      textAlign: 'center',
+    },
+  }
+})
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingMessage = observer(({ model }: { model: any }) => {

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -13,6 +13,7 @@ import {
   isSessionModelWithWidgets,
   isFeature,
   Feature,
+  ReactRendering,
 } from '@jbrowse/core/util'
 import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -33,6 +34,7 @@ import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
 import TooLargeMessage from '../components/TooLargeMessage'
 import BlockState, { renderBlockData } from './serverSideRenderedBlock'
+import { ThemeOptions } from '@mui/material'
 
 type LGV = LinearGenomeViewModel
 
@@ -55,9 +57,9 @@ type LayoutRecord = [number, number, number, number]
 function getDisplayStr(totalBytes: number) {
   let displayBp
   if (Math.floor(totalBytes / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
   } else if (Math.floor(totalBytes / 1000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
   } else {
     displayBp = `${Math.floor(totalBytes)} bytes`
   }
@@ -65,7 +67,6 @@ function getDisplayStr(totalBytes: number) {
 }
 
 const minDisplayHeight = 20
-const defaultDisplayHeight = 100
 
 /**
  * #stateModel BaseLinearDisplay
@@ -80,13 +81,12 @@ function stateModelFactory() {
         /**
          * #property
          */
-        height: types.optional(
+        heightPreConfig: types.maybe(
           types.refinement(
             'displayHeight',
             types.number,
             n => n >= minDisplayHeight,
           ),
-          defaultDisplayHeight,
         ),
         /**
          * #property
@@ -113,6 +113,9 @@ function stateModelFactory() {
       estimatedRegionStats: undefined as undefined | Stats,
     }))
     .views(self => ({
+      get height() {
+        return self.heightPreConfig ?? (getConf(self, 'height') as number)
+      },
       /**
        * #getter
        */
@@ -364,11 +367,8 @@ function stateModelFactory() {
        * #action
        */
       setHeight(displayHeight: number) {
-        if (displayHeight > minDisplayHeight) {
-          self.height = displayHeight
-        } else {
-          self.height = minDisplayHeight
-        }
+        self.heightPreConfig =
+          displayHeight > minDisplayHeight ? displayHeight : minDisplayHeight
         return self.height
       },
       /**
@@ -657,7 +657,7 @@ function stateModelFactory() {
       renderProps() {
         const view = getContainingView(self) as LGV
         return {
-          ...(getParentRenderProps(self) as any),
+          ...getParentRenderProps(self),
           notReady:
             self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
           rpcDriverName: self.rpcDriverName,
@@ -706,14 +706,19 @@ function stateModelFactory() {
       /**
        * #method
        */
-      async renderSvg(opts: ExportSvgOptions & { overrideHeight: number }) {
+      async renderSvg(
+        opts: ExportSvgOptions & {
+          overrideHeight: number
+          theme: ThemeOptions
+        },
+      ) {
         const { height, id } = self
         const { overrideHeight } = opts
         const view = getContainingView(self) as LGV
         const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view
 
         const renderings = await Promise.all(
-          roundedDynamicBlocks.map(block => {
+          roundedDynamicBlocks.map(async block => {
             const blockState = BlockState.create({
               key: block.key,
               region: block,
@@ -726,34 +731,41 @@ function stateModelFactory() {
               self.regionCannotBeRendered(block)
 
             if (cannotBeRenderedReason) {
-              return {
-                reactElement: (
-                  <>
-                    <rect x={0} y={0} width={width} height={20} fill="#aaa" />
-                    <text x={0} y={15}>
-                      {cannotBeRenderedReason}
-                    </text>
-                  </>
-                ),
-              }
+              return [
+                block,
+                {
+                  reactElement: (
+                    <>
+                      <rect x={0} y={0} width={width} height={20} fill="#aaa" />
+                      <text x={0} y={15}>
+                        {cannotBeRenderedReason}
+                      </text>
+                    </>
+                  ),
+                },
+              ] as const
             }
 
             const { rpcManager, renderArgs, renderProps, rendererType } =
               renderBlockData(blockState, self)
 
-            return rendererType.renderInClient(rpcManager, {
-              ...renderArgs,
-              ...renderProps,
-              viewParams: getViewParams(self, true),
-              exportSVG: opts,
-            })
+            return [
+              block,
+              await rendererType.renderInClient(rpcManager, {
+                ...renderArgs,
+                ...renderProps,
+                viewParams: getViewParams(self, true),
+                exportSVG: opts,
+                theme: opts.theme || renderProps.theme,
+              }),
+            ] as const
           }),
         )
 
         return (
           <>
-            {renderings.map((rendering, index) => {
-              const { offsetPx } = roundedDynamicBlocks[index]
+            {renderings.map(([block, rendering], index) => {
+              const { offsetPx, widthPx } = block
               const offset = offsetPx - viewOffsetPx
               const clipid = getId(id, index)
 
@@ -764,21 +776,14 @@ function stateModelFactory() {
                       <rect
                         x={0}
                         y={0}
-                        width={width}
+                        width={widthPx}
                         height={overrideHeight || height}
                       />
                     </clipPath>
                   </defs>
                   <g transform={`translate(${offset} 0)`}>
                     <g clipPath={`url(#${clipid})`}>
-                      {React.isValidElement(rendering.reactElement) ? (
-                        rendering.reactElement
-                      ) : (
-                        <g
-                          /* eslint-disable-next-line react/no-danger */
-                          dangerouslySetInnerHTML={{ __html: rendering.html }}
-                        />
-                      )}
+                      <ReactRendering rendering={rendering} />
                     </g>
                   </g>
                 </React.Fragment>
@@ -788,6 +793,16 @@ function stateModelFactory() {
         )
       },
     }))
+    .preProcessSnapshot(snap => {
+      if (!snap) {
+        return snap
+      }
+      // rewrite "height" from older snapshots to "heightPreConfig", this allows
+      // us to maintain a height "getter" going forward
+      // @ts-expect-error
+      const { height, ...rest } = snap
+      return { heightPreConfig: height, ...rest }
+    })
     .postProcessSnapshot(self => {
       // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
       const r = self as Omit<typeof self, symbol>

package/src/BaseLinearDisplay/models/configSchema.ts

@@ -29,6 +29,14 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema(
       description:
         "maximum data to attempt to download for a given track, used if adapter doesn't specify one",
     },
+    /**
+     * #slot
+     */
+    height: {
+      type: 'number',
+      defaultValue: 100,
+      description: 'default height for the track',
+    },
   },
   {
     /**

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -29,6 +29,7 @@ import {
   getRpcSessionId,
 } from '@jbrowse/core/util/tracks'
 
+// locals
 import ServerSideRenderedBlockContent from '../components/ServerSideRenderedBlockContent'
 
 // the MST state of a single server-side-rendered block in a display
@@ -65,7 +66,7 @@ const blockState = types
         makeAbortableReaction(
           self as any,
           renderBlockData,
-          renderBlockEffect as any, // reaction doesn't expect async here
+          renderBlockEffect, // reaction doesn't expect async here
           {
             name: `${display.id}/${assembleLocString(self.region)} rendering`,
             delay: display.renderDelay,
@@ -80,10 +81,11 @@ const blockState = types
         self.status = message
       },
       setLoading(abortController: AbortController) {
-        if (renderInProgress !== undefined) {
-          if (!renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
+        if (
+          renderInProgress !== undefined &&
+          !renderInProgress.signal.aborted
+        ) {
+          renderInProgress.abort()
         }
         self.filled = false
         self.message = undefined
@@ -140,7 +142,7 @@ const blockState = types
         self.renderProps = renderProps
         renderInProgress = undefined
       },
-      setError(error: Error | unknown) {
+      setError(error: unknown) {
         console.error(error)
         if (renderInProgress && !renderInProgress.signal.aborted) {
           renderInProgress.abort()
@@ -214,7 +216,7 @@ export function renderBlockData(
     const regionAsm = self.region.assemblyName
     if (
       !assemblyNames.includes(regionAsm) &&
-      !assemblyNames.find(name => assemblyManager.get(name)?.hasName(regionAsm))
+      !assemblyNames.some(name => assemblyManager.get(name)?.hasName(regionAsm))
     ) {
       throw new Error(
         `region assembly (${regionAsm}) does not match track assemblies (${assemblyNames})`,
@@ -260,24 +262,14 @@ export function renderBlockData(
   }
 }
 
-interface RenderProps {
-  displayError: Error
-  rendererType: any
-  renderProps: { [key: string]: any }
-  rpcManager: { call: Function }
-  cannotBeRenderedReason: string
-  renderArgs: { [key: string]: any }
-}
-
-interface ErrorProps {
-  displayError: string
-}
-
 async function renderBlockEffect(
-  props: RenderProps | ErrorProps,
+  props: ReturnType<typeof renderBlockData> | undefined,
   signal: AbortSignal,
   self: BlockModel,
 ) {
+  if (!props) {
+    return
+  }
   const {
     rendererType,
     renderProps,
@@ -285,7 +277,7 @@ async function renderBlockEffect(
     renderArgs,
     cannotBeRenderedReason,
     displayError,
-  } = props as RenderProps
+  } = props
   if (!isAlive(self)) {
     return undefined
   }
@@ -315,5 +307,6 @@ async function renderBlockEffect(
     features,
     layout,
     maxHeightReached,
+    renderProps,
   }
 }

package/src/BaseLinearDisplay/models/util.ts

@@ -14,9 +14,9 @@ export interface ErrorProps {
 export function getDisplayStr(totalBytes: number) {
   let displayBp
   if (Math.floor(totalBytes / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
   } else if (Math.floor(totalBytes / 1000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
   } else {
     displayBp = `${Math.floor(totalBytes)} bytes`
   }

package/src/LaunchLinearGenomeView/index.ts

@@ -7,7 +7,7 @@ type LGV = LinearGenomeViewModel
 export default (pluginManager: PluginManager) => {
   pluginManager.addToExtensionPoint(
     'LaunchView-LinearGenomeView',
-    // @ts-ignore
+    // @ts-expect-error
     async ({
       session,
       assembly,

package/src/LinearBareDisplay/index.ts

@@ -20,4 +20,5 @@ export default (pluginManager: PluginManager) => {
   })
 }
 
-export { configSchemaFactory, stateModelFactory }
+export { configSchemaFactory } from './configSchema'
+export { stateModelFactory } from './model'

package/src/LinearBasicDisplay/index.ts

@@ -21,4 +21,5 @@ export default (pluginManager: PluginManager) => {
   })
 }
 
-export { modelFactory, configSchema }
+export { default as modelFactory } from './model'
+export { default as configSchema } from './configSchema'

package/src/LinearGenomeView/components/CenterLine.tsx

@@ -5,13 +5,13 @@ import { LinearGenomeViewModel } from '..'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   centerLineContainer: {
     background: 'transparent',
     height: '100%',
     zIndex: 5, // above the track but under menu
     position: 'absolute',
-    border: '1px black dashed',
+    border: `1px ${theme.palette.action.active} dashed`,
     borderTop: 'none',
     borderBottom: 'none',
     pointerEvents: 'none',

package/src/LinearGenomeView/components/Cytobands.tsx

@@ -0,0 +1,154 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+// core
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
+import { ContentBlock } from '@jbrowse/core/util/blockTypes'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+
+// locals
+import { HEADER_OVERVIEW_HEIGHT } from '..'
+import { getCytobands } from './util'
+
+// rounded rect from https://stackoverflow.com/a/45889603/2129219
+// prettier-ignore
+function rightRoundedRect(x: number, y: number, width: number, height: number, radius: number) {
+  return "M" + x + "," + y
+       + "h" + (width - radius)
+       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
+       + "v" + (height - 2 * radius)
+       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
+       + "h" + (radius - width)
+       + "z";
+}
+
+// prettier-ignore
+function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
+  return "M" + (x + radius) + "," + y
+       + "h" + (width - radius)
+       + "v" + height
+       + "h" + (radius - width)
+       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
+       + "v" + (2 * radius - height)
+       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
+       + "z";
+}
+
+const colorMap: { [key: string]: string | undefined } = {
+  gneg: 'rgb(227,227,227)',
+  gpos25: 'rgb(142,142,142)',
+  gpos50: 'rgb(85,85,85)',
+  gpos100: 'rgb(0,0,0)',
+  gpos75: 'rgb(57,57,57)',
+  gvar: 'rgb(0,0,0)',
+  stalk: 'rgb(127,127,127)',
+  acen: '#800',
+}
+
+export default observer(function Cytobands({
+  overview,
+  block,
+  assembly,
+}: {
+  overview: Base1DViewModel
+  assembly?: Assembly
+  block: ContentBlock
+}) {
+  const { offsetPx, reversed } = block
+  const cytobands = getCytobands(assembly, block.refName)
+  const coords = cytobands.map(f => {
+    const { refName, start, end, type } = f
+    return [
+      overview.bpToPx({
+        refName,
+        coord: start,
+      }),
+      overview.bpToPx({
+        refName,
+        coord: end,
+      }),
+      type,
+    ]
+  })
+
+  const arr = cytobands || []
+  const lcap = reversed ? arr.length - 1 : 0
+  const rcap = reversed ? 0 : arr.length - 1
+
+  let firstCent = true
+  return (
+    <g transform={`translate(-${offsetPx})`}>
+      {coords.map(([start, end, type], index) => {
+        const key = `${start}-${end}-${type}`
+        if (type === 'acen' && firstCent) {
+          firstCent = false
+          return (
+            <polygon
+              key={key}
+              points={[
+                [start, 0],
+                [end, HEADER_OVERVIEW_HEIGHT / 2],
+                [start, HEADER_OVERVIEW_HEIGHT],
+              ].toString()}
+              fill={colorMap[type]}
+            />
+          )
+        }
+        if (type === 'acen' && !firstCent) {
+          return (
+            <polygon
+              key={key}
+              points={[
+                [start, HEADER_OVERVIEW_HEIGHT / 2],
+                [end, 0],
+                [end, HEADER_OVERVIEW_HEIGHT],
+              ].toString()}
+              fill={colorMap[type]}
+            />
+          )
+        }
+
+        if (lcap === index) {
+          return (
+            <path
+              key={key}
+              d={leftRoundedRect(
+                Math.min(start, end),
+                0,
+                Math.abs(end - start),
+                HEADER_OVERVIEW_HEIGHT,
+                8,
+              )}
+              fill={colorMap[type]}
+            />
+          )
+        } else if (rcap === index) {
+          return (
+            <path
+              key={key}
+              d={rightRoundedRect(
+                Math.min(start, end),
+                0,
+                Math.abs(end - start) - 2,
+                HEADER_OVERVIEW_HEIGHT,
+                8,
+              )}
+              fill={colorMap[type]}
+            />
+          )
+        } else {
+          return (
+            <rect
+              key={key}
+              x={Math.min(start, end)}
+              y={0}
+              width={Math.abs(end - start)}
+              height={HEADER_OVERVIEW_HEIGHT}
+              fill={colorMap[type]}
+            />
+          )
+        }
+      })}
+    </g>
+  )
+})