@jbrowse/plugin-linear-genome-view 1.4.4 → 1.5.3

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -17,52 +17,54 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 800px; left: 0px;"
+            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="color: rgb(153, 102, 0); z-index: 100;"
+              style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              20
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              40
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              60
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              80
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
             >
-              100
-            </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                20
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                40
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                60
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                80
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                100
+              </p>
+            </div>
           </div>
           <div
             class="makeStyles-scaleBarContig"
@@ -77,7 +79,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       <svg
         class="makeStyles-overviewSvg"
         height="48"
-        width="100%"
       >
         <polygon
           fill="rgba(121, 134, 203, 0.3)"
@@ -206,6 +207,29 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                       d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                     />
                   </svg>
+                  <button
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <div
                   class="MuiAutocomplete-endAdornment"
@@ -563,182 +587,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
 </div>
 `;
 
-exports[`<LinearGenomeView /> renders setup wizard 1`] = `
-<div>
-  <div
-    class="MuiContainer-root makeStyles-importFormContainer MuiContainer-maxWidthLg"
-  >
-    <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-    >
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <div
-          class="MuiFormControl-root MuiTextField-root makeStyles-importFormEntry MuiFormControl-marginNormal"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
-            data-shrink="true"
-          >
-            Assembly
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
-          >
-            <div
-              aria-haspopup="listbox"
-              class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-              role="button"
-              tabindex="0"
-            >
-              volMyt1
-            </div>
-            <input
-              aria-hidden="true"
-              class="MuiSelect-nativeInput"
-              data-testid="assembly-selector"
-              tabindex="-1"
-              value="volMyt1"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled PrivateNotchedOutline-legendNotched"
-              >
-                <span>
-                  Assembly
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
-          >
-            Select assembly to view
-          </p>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <div
-          aria-expanded="false"
-          class="MuiAutocomplete-root"
-          data-testid="autocomplete"
-          role="combobox"
-          style="width: 200px;"
-        >
-          <div
-            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-          >
-            <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="refNameAutocomplete-lgv-helper-text"
-                aria-invalid="false"
-                autocapitalize="none"
-                autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-                id="refNameAutocomplete-lgv"
-                placeholder="Search for location"
-                spellcheck="false"
-                type="text"
-                value="ctgA"
-              />
-              <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
-                style="margin-right: 7px;"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                  />
-                </svg>
-              </div>
-              <div
-                class="MuiAutocomplete-endAdornment"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
-                style="padding-left: 8px;"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legend"
-                  style="width: 0.01px;"
-                >
-                  <span>
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
-              id="refNameAutocomplete-lgv-helper-text"
-            >
-              Enter a sequence or location
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item"
-      >
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedPrimary"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Open
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedSecondary"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Show all regions in assembly
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
 <div
   style="position: relative;"
@@ -756,67 +604,70 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 580px; left: 0px;"
+            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 0px; width: 72.72727272727273px; border-color: rgb(153, 102, 0);"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="color: rgb(153, 102, 0); z-index: 100;"
+              style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 0px; width: 72.72727272727273px; border-color: rgb(153, 102, 0);"
+            />
           </div>
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 72.72727272727273px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 72.72727272727273px; width: 727.2727272727273px;"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="z-index: 100;"
+              style="left: 75.72727272727273px;"
             >
               ctgB
             </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 145.0909090909091px; pointer-events: none;"
-            >
-              1,200
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 290.1818181818182px; pointer-events: none;"
-            >
-              1,400
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 435.27272727272725px; pointer-events: none;"
-            >
-              1,600
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 580.3636363636364px; pointer-events: none;"
-            >
-              1,800
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 725.4545454545454px; pointer-events: none;"
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 72.72727272727273px; width: 727.2727272727273px;"
             >
-              2,000
-            </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 145.0909090909091px; pointer-events: none;"
+              >
+                1,200
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 290.1818181818182px; pointer-events: none;"
+              >
+                1,400
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 435.27272727272725px; pointer-events: none;"
+              >
+                1,600
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 580.3636363636364px; pointer-events: none;"
+              >
+                1,800
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 725.4545454545454px; pointer-events: none;"
+              >
+                2,000
+              </p>
+            </div>
           </div>
           <div
             class="makeStyles-scaleBarContig"
@@ -831,7 +682,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       <svg
         class="makeStyles-overviewSvg"
         height="48"
-        width="100%"
       >
         <polygon
           fill="rgba(121, 134, 203, 0.3)"
@@ -924,7 +774,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             class="MuiAutocomplete-root"
             data-testid="autocomplete"
             role="combobox"
-            style="width: 235.22500000000002px;"
+            style="width: 255.22500000000002px;"
           >
             <div
               class="MuiFormControl-root MuiTextField-root makeStyles-headerRefName MuiFormControl-fullWidth"
@@ -960,6 +810,29 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                       d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                     />
                   </svg>
+                  <button
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <div
                   class="MuiAutocomplete-endAdornment"

package/src/LinearGenomeView/components/util.ts

@@ -0,0 +1,10 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+export function dedupe(
+  results: BaseResult[] = [],
+  cb: (result: BaseResult) => string,
+) {
+  return results.filter(
+    (elt, idx, self) => idx === self.findIndex(t => cb(t) === cb(elt)),
+  )
+}

package/src/LinearGenomeView/index.tsx

@@ -10,29 +10,34 @@ import {
   getContainingView,
   getSession,
   isViewContainer,
+  isSessionModelWithWidgets,
+  measureText,
   parseLocString,
   springAnimate,
-  isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks'
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-// misc
 import { transaction, autorun } from 'mobx'
 import {
-  getSnapshot,
-  types,
+  addDisposer,
   cast,
-  Instance,
+  getSnapshot,
   getRoot,
   resolveIdentifier,
-  addDisposer,
+  types,
+  Instance,
 } from 'mobx-state-tree'
 
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 import PluginManager from '@jbrowse/core/PluginManager'
+import clone from 'clone'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import { saveAs } from 'file-saver'
+
+// icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import SyncAltIcon from '@material-ui/icons/SyncAlt'
 import VisibilityIcon from '@material-ui/icons/Visibility'
@@ -41,15 +46,13 @@ import FolderOpenIcon from '@material-ui/icons/FolderOpen'
 import PhotoCameraIcon from '@material-ui/icons/PhotoCamera'
 import ZoomInIcon from '@material-ui/icons/ZoomIn'
 import MenuOpenIcon from '@material-ui/icons/MenuOpen'
-import clone from 'clone'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-import { saveAs } from 'file-saver'
-import { renderToSvg } from './components/LinearGenomeView'
+
+// locals
+import { renderToSvg } from './components/LinearGenomeViewSvg'
+import RefNameAutocomplete from './components/RefNameAutocomplete'
 import ExportSvgDlg from './components/ExportSvgDialog'
 import ReturnToImportFormDlg from './components/ReturnToImportFormDialog'
 
-export { default as ReactComponent } from './components/LinearGenomeView'
-
 export interface BpOffset {
   refName?: string
   index: number
@@ -121,6 +124,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         ),
         trackLabels: 'overlapping' as 'overlapping' | 'hidden' | 'offset',
         showCenterLine: false,
+        showCytobandsSetting: true,
       }),
     )
     .volatile(() => ({
@@ -468,6 +472,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .actions(self => ({
+      setShowCytobands(flag: boolean) {
+        self.showCytobandsSetting = flag
+      },
       setWidth(newWidth: number) {
         self.volatileWidth = newWidth
       },
@@ -551,9 +558,8 @@ export function stateModelFactory(pluginManager: PluginManager) {
         initialSnapshot = {},
         displayInitialSnapshot = {},
       ) {
-        const trackConfigSchema = pluginManager.pluggableConfigSchemaType(
-          'track',
-        )
+        const trackConfigSchema =
+          pluginManager.pluggableConfigSchemaType('track')
         const configuration = resolveIdentifier(
           trackConfigSchema,
           getRoot(self),
@@ -602,9 +608,8 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
 
       hideTrack(trackId: string) {
-        const trackConfigSchema = pluginManager.pluggableConfigSchemaType(
-          'track',
-        )
+        const trackConfigSchema =
+          pluginManager.pluggableConfigSchemaType('track')
         const configuration = resolveIdentifier(
           trackConfigSchema,
           getRoot(self),
@@ -1216,18 +1221,42 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
       return { zoom }
     })
+    .views(self => ({
+      get canShowCytobands() {
+        return self.displayedRegions.length === 1 && this.anyCytobandsExist
+      },
+      get showCytobands() {
+        return this.canShowCytobands && self.showCytobandsSetting
+      },
+      get anyCytobandsExist() {
+        const { assemblyManager } = getSession(self)
+        const { assemblyNames } = self
+        return assemblyNames.some(
+          asm => assemblyManager.get(asm)?.cytobands?.length,
+        )
+      },
+
+      get cytobandOffset() {
+        return this.showCytobands
+          ? measureText(self.displayedRegions[0].refName, 12) + 15
+          : 0
+      },
+    }))
     .views(self => {
       let currentlyCalculatedStaticBlocks: BlockSet | undefined
       let stringifiedCurrentlyCalculatedStaticBlocks = ''
       return {
         menuItems(): MenuItem[] {
+          const { canShowCytobands, showCytobands } = self
+
           const menuItems: MenuItem[] = [
             {
               label: 'Return to import form',
               onClick: () => {
-                getSession(self).setDialogComponent(ReturnToImportFormDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  ReturnToImportFormDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
               icon: FolderOpenIcon,
             },
@@ -1235,9 +1264,10 @@ export function stateModelFactory(pluginManager: PluginManager) {
               label: 'Export SVG',
               icon: PhotoCameraIcon,
               onClick: () => {
-                getSession(self).setDialogComponent(ExportSvgDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  ExportSvgDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
             {
@@ -1305,6 +1335,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
                 },
               ],
             },
+            ...(canShowCytobands
+              ? [
+                  {
+                    label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+                    onClick: () => {
+                      self.setShowCytobands(!showCytobands)
+                    },
+                  },
+                ]
+              : []),
           ]
 
           // add track's view level menu options
@@ -1398,8 +1438,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
             label: 'Zoom to region',
             icon: ZoomInIcon,
             onClick: () => {
-              if (self.leftOffset && self.rightOffset) {
-                self.moveTo(self.leftOffset, self.rightOffset)
+              const { leftOffset, rightOffset } = self
+              if (leftOffset && rightOffset) {
+                self.moveTo(leftOffset, rightOffset)
               }
             },
           },
@@ -1415,6 +1456,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
     }))
 }
 
-export { renderToSvg }
+export { renderToSvg, RefNameAutocomplete }
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>
+export { default as ReactComponent } from './components/LinearGenomeView'