@jbrowse/plugin-linear-genome-view 2.1.3 → 2.1.5

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 import normalizeWheel from 'normalize-wheel'
 
-import { LinearGenomeViewStateModel, SCALE_BAR_HEIGHT } from '..'
+// locals
+import { LinearGenomeViewModel, SCALE_BAR_HEIGHT } from '..'
 import RubberBand from './RubberBand'
 import ScaleBar from './ScaleBar'
 import Gridlines from './Gridlines'
@@ -21,7 +21,7 @@ const useStyles = makeStyles()({
   },
 })
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 type Timer = ReturnType<typeof setTimeout>
 
 function TracksContainer({

package/src/LinearGenomeView/components/__snapshots__/{LinearGenomeView.test.js.snap → LinearGenomeView.test.tsx.snap}

@@ -90,7 +90,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -117,7 +117,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -137,7 +137,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             />
           </button>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -224,7 +224,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                   class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-hdw1oc"
+                    class="css-ihdtdm"
                   >
                     <span
                       class="notranslate"
@@ -335,11 +335,11 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
     >
       <div
         class="tss-17gfnt3-verticalGuidesContainer"
-        style="left: -1024px; width: 2148px;"
+        style="left: -800px; width: 1700px;"
       >
         <div
           class="tss-a9ifge-boundaryPaddingBlock"
-          style="width: 1024px;"
+          style="width: 800px;"
         />
         <div
           class="tss-1dmfa10-contentBlock"
@@ -376,7 +376,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         </div>
         <div
           class="tss-a9ifge-boundaryPaddingBlock"
-          style="width: 1024px;"
+          style="width: 800px;"
         />
       </div>
     </div>
@@ -395,11 +395,11 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         >
           <div
             class="tss-1u2dss8-scaleBar"
-            style="left: -1025px; width: 2148px; height: 17px; box-sizing: border-box;"
+            style="left: -801px; width: 1700px; height: 17px; box-sizing: border-box;"
           >
             <div
               class="tss-a9ifge-boundaryPaddingBlock"
-              style="background: none; width: 1024px;"
+              style="background: none; width: 800px;"
             />
             <div
               class="tss-1dmfa10-contentBlock"
@@ -412,7 +412,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             </div>
             <div
               class="tss-a9ifge-boundaryPaddingBlock"
-              style="background: none; width: 1024px;"
+              style="background: none; width: 800px;"
             />
           </div>
         </div>
@@ -513,23 +513,19 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             <div
               class="tss-d6gpow-linearBlocks"
               data-testid="Blockset"
-              style="left: -1024px;"
+              style="left: -800px;"
             >
               <div
                 class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
+                style="background: none; width: 800px;"
               />
               <div
                 class="tss-1dmfa10-contentBlock"
                 style="width: 100px;"
-              >
-                <div
-                  style="display: flex;"
-                />
-              </div>
+              />
               <div
                 class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
+                style="background: none; width: 800px;"
               />
             </div>
           </div>
@@ -655,7 +651,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -682,7 +678,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -702,7 +698,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -789,7 +785,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-hdw1oc"
+                    class="css-ihdtdm"
                   >
                     <span
                       class="notranslate"
@@ -902,11 +898,11 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
     >
       <div
         class="tss-17gfnt3-verticalGuidesContainer"
-        style="left: -1024px; width: 3150px;"
+        style="left: -800px; width: 1702px;"
       >
         <div
           class="tss-a9ifge-boundaryPaddingBlock"
-          style="width: 1024px;"
+          style="width: 800px;"
         />
         <div
           class="tss-1dmfa10-contentBlock"
@@ -947,7 +943,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         />
         <div
           class="tss-1dmfa10-contentBlock"
-          style="width: 1000px;"
+          style="width: 800px;"
         >
           <div
             class="tss-1nnah7t-tick-majorTick"
@@ -1117,51 +1113,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             class="tss-i794sq-tick-minorTick"
             style="left: 819px;"
           />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 839px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 859px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 879px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 899px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 919px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 939px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 959px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 979px;"
-          />
-          <div
-            class="tss-1nnah7t-tick-majorTick"
-            style="left: 999px;"
-          />
-          <div
-            class="tss-i794sq-tick-minorTick"
-            style="left: 1019px;"
-          />
         </div>
-        <div
-          class="tss-a9ifge-boundaryPaddingBlock"
-          style="width: 1024px;"
-        />
       </div>
     </div>
     <div
@@ -1179,11 +1131,11 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         >
           <div
             class="tss-1u2dss8-scaleBar"
-            style="left: -1025px; width: 3150px; height: 17px; box-sizing: border-box;"
+            style="left: -801px; width: 1702px; height: 17px; box-sizing: border-box;"
           >
             <div
               class="tss-a9ifge-boundaryPaddingBlock"
-              style="background: none; width: 1024px;"
+              style="background: none; width: 800px;"
             />
             <div
               class="tss-1dmfa10-contentBlock"
@@ -1200,7 +1152,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
             <div
               class="tss-1dmfa10-contentBlock"
-              style="width: 1000px;"
+              style="width: 800px;"
             >
               <div
                 class="tss-1f3h2yl-tick"
@@ -1252,21 +1204,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   1,800
                 </p>
               </div>
-              <div
-                class="tss-1f3h2yl-tick"
-                style="left: 999px;"
-              >
-                <p
-                  class="MuiTypography-root MuiTypography-body1 tss-lm3kvf-majorTickLabel css-ahj2mt-MuiTypography-root"
-                >
-                  2,000
-                </p>
-              </div>
             </div>
-            <div
-              class="tss-a9ifge-boundaryPaddingBlock"
-              style="background: none; width: 1024px;"
-            />
           </div>
         </div>
         <p
@@ -1373,11 +1311,11 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             <div
               class="tss-d6gpow-linearBlocks"
               data-testid="Blockset"
-              style="left: -1024px;"
+              style="left: -800px;"
             >
               <div
                 class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
+                style="background: none; width: 800px;"
               />
               <div
                 class="tss-1dmfa10-contentBlock"
@@ -1395,18 +1333,14 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
               <div
                 class="tss-1dmfa10-contentBlock"
-                style="width: 1000px;"
+                style="width: 800px;"
               >
                 <svg
                   data-testid="svgfeatures"
                   height="100"
-                  width="1000"
+                  width="800"
                 />
               </div>
-              <div
-                class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
-              />
             </div>
           </div>
         </div>
@@ -1509,11 +1443,11 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             <div
               class="tss-d6gpow-linearBlocks"
               data-testid="Blockset"
-              style="left: -1024px;"
+              style="left: -800px;"
             >
               <div
                 class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
+                style="background: none; width: 800px;"
               />
               <div
                 class="tss-1dmfa10-contentBlock"
@@ -1531,18 +1465,14 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
               <div
                 class="tss-1dmfa10-contentBlock"
-                style="width: 1000px;"
+                style="width: 800px;"
               >
                 <svg
                   data-testid="svgfeatures"
                   height="100"
-                  width="1000"
+                  width="800"
                 />
               </div>
-              <div
-                class="tss-a9ifge-boundaryPaddingBlock"
-                style="background: none; width: 1024px;"
-              />
             </div>
           </div>
         </div>

package/src/LinearGenomeView/index.test.ts

@@ -636,8 +636,8 @@ test('can perform pxToBp on human genome things with ellided blocks (zoomed out)
 
   // chrX after an ellided block, this tests a specific coord but should just be
   // probably somewhat around here
-  expect(model.pxToBp(1228).coord).toBe(118604872)
-  expect(model.pxToBp(1228).refName).toBe('X')
+  expect(model.pxToBp(1228).coord).toBe(1075410)
+  expect(model.pxToBp(1228).refName).toBe('Y')
 
   // chrY_random at the end
   expect(model.pxToBp(1500).refName).toBe('Y_KI270740v1_random')

package/src/LinearGenomeView/index.tsx

@@ -1,4 +1,4 @@
-import { lazy } from 'react'
+import React, { lazy } from 'react'
 import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { Region } from '@jbrowse/core/util/types'
@@ -15,6 +15,7 @@ import {
   measureText,
   parseLocString,
   springAnimate,
+  isSessionWithAddTracks,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -53,6 +54,10 @@ import { renderToSvg } from './components/LinearGenomeViewSvg'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
 import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
+import MiniControls from './components/MiniControls'
+import Header from './components/Header'
+import ZoomControls from './components/ZoomControls'
+import LinearGenomeView from './components/LinearGenomeView'
 
 const SequenceSearchDialog = lazy(
   () => import('./components/SequenceSearchDialog'),
@@ -192,6 +197,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .views(self => ({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      MiniControlsComponent(): React.FC<any> {
+        return MiniControls
+      },
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      HeaderComponent(): React.FC<any> {
+        return Header
+      },
+
       get assemblyErrors() {
         const { assemblyManager } = getSession(self)
         const { assemblyNames } = self
@@ -636,6 +651,22 @@ export function stateModelFactory(pluginManager: PluginManager) {
       setScaleFactor(factor: number) {
         self.scaleFactor = factor
       },
+      // this "clears the view" and makes the view return to the import form
+      clearView() {
+        this.setDisplayedRegions([])
+        self.tracks.clear()
+        // it is necessary to run these after setting displayed regions empty
+        // or else model.offsetPx gets set to Infinity and breaks
+        // mobx-state-tree snapshot
+        self.scrollTo(0)
+        self.zoomTo(10)
+      },
+      async exportSvg(opts: ExportSvgOptions = {}) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const html = await renderToSvg(self as any, opts)
+        const blob = new Blob([html], { type: 'image/svg+xml' })
+        saveAs(blob, opts.filename || 'image.svg')
+      },
     }))
     .actions(self => {
       let cancelLastAnimation = () => {}
@@ -707,7 +738,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
     .views(self => ({
       menuItems(): MenuItem[] {
         const { canShowCytobands, showCytobands } = self
-
+        const session = getSession(self)
         const menuItems: MenuItem[] = [
           {
             label: 'Return to import form',
@@ -719,15 +750,19 @@ export function stateModelFactory(pluginManager: PluginManager) {
             },
             icon: FolderOpenIcon,
           },
-          {
-            label: 'Sequence search',
-            onClick: () => {
-              getSession(self).queueDialog(handleClose => [
-                SequenceSearchDialog,
-                { model: self, handleClose },
-              ])
-            },
-          },
+          ...(isSessionWithAddTracks(session)
+            ? [
+                {
+                  label: 'Sequence search',
+                  onClick: () => {
+                    getSession(self).queueDialog(handleClose => [
+                      SequenceSearchDialog,
+                      { model: self, handleClose },
+                    ])
+                  },
+                },
+              ]
+            : []),
           {
             label: 'Export SVG',
             icon: PhotoCameraIcon,
@@ -880,16 +915,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
       }
     })
     .actions(self => ({
-      // this "clears the view" and makes the view return to the import form
-      clearView() {
-        self.setDisplayedRegions([])
-        self.tracks.clear()
-        // it is necessary to run these after setting displayed regions empty
-        // or else model.offsetPx gets set to Infinity and breaks
-        // mobx-state-tree snapshot
-        self.scrollTo(0)
-        self.zoomTo(10)
-      },
       setCoarseDynamicBlocks(blocks: BlockSet) {
         self.coarseDynamicBlocks = blocks.contentBlocks
         self.coarseTotalBp = blocks.totalBp
@@ -909,12 +934,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .actions(self => ({
-      async exportSvg(opts: ExportSvgOptions = {}) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const html = await renderToSvg(self as any, opts)
-        const blob = new Blob([html], { type: 'image/svg+xml' })
-        saveAs(blob, opts.filename || 'image.svg')
-      },
       /**
        * offset is the base-pair-offset in the displayed region, index is the index of the
        * displayed region in the linear genome view
@@ -1220,7 +1239,13 @@ export function stateModelFactory(pluginManager: PluginManager) {
     }))
 }
 
-export { renderToSvg, RefNameAutocomplete, SearchBox }
+export {
+  renderToSvg,
+  RefNameAutocomplete,
+  SearchBox,
+  ZoomControls,
+  LinearGenomeView,
+}
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>
 export { default as ReactComponent } from './components/LinearGenomeView'

package/src/index.ts

@@ -29,6 +29,8 @@ import {
   renderToSvg,
   RefNameAutocomplete,
   SearchBox,
+  ZoomControls,
+  LinearGenomeView,
 } from './LinearGenomeView'
 
 import {
@@ -45,6 +47,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
     BaseLinearDisplayComponent,
     BaseLinearDisplay,
     baseLinearDisplayConfigSchema,
+    SearchBox,
+    ZoomControls,
+    LinearGenomeView,
   }
 
   install(pluginManager: PluginManager) {