@jbrowse/plugin-linear-genome-view 2.4.2 → 2.6.1

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -14,6 +14,7 @@ import Gridlines from './Gridlines'
 import CenterLine from './CenterLine'
 import VerticalGuide from './VerticalGuide'
 import RubberbandSpan from './RubberbandSpan'
+import { getEnv } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()({
   tracksContainer: {
@@ -32,6 +33,7 @@ export default observer(function TracksContainer({
   model: LGV
 }) {
   const { classes } = useStyles()
+  const { pluginManager } = getEnv(model)
   const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model)
   const ref = useRef<HTMLDivElement>(null)
   const {
@@ -51,17 +53,17 @@ export default observer(function TracksContainer({
   } = useRangeSelect(ref, model, true)
   useWheelScroll(ref, model)
 
+  const additional = pluginManager.evaluateExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    undefined,
+    { model },
+  ) as React.ReactNode
+
   return (
     <div
       ref={ref}
       data-testid="trackContainer"
       className={classes.tracksContainer}
-      onClick={event => {
-        if (event.detail === 2) {
-          const left = ref.current?.getBoundingClientRect().left || 0
-          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
-        }
-      }}
       onMouseDown={event => {
         mouseDown1(event)
         mouseDown2(event)
@@ -105,6 +107,7 @@ export default observer(function TracksContainer({
           />
         }
       />
+      {additional}
       {children}
     </div>
   )

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

@@ -77,7 +77,7 @@ exports[`renders one track, one region 1`] = `
         class="css-1fs11k8-overview"
       >
         <svg
-          class="css-1fsr3xw-overviewSvg"
+          class="css-191b84s-overviewSvg"
           height="48"
         >
           <polygon
@@ -157,7 +157,7 @@ exports[`renders one track, one region 1`] = `
               />
             </button>
             <div
-              class="MuiAutocomplete-root css-l3ln04-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1h51icj-MuiAutocomplete-root"
               data-testid="autocomplete"
               style="width: 175px;"
             >
@@ -166,7 +166,7 @@ exports[`renders one track, one region 1`] = `
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -175,7 +175,7 @@ exports[`renders one track, one region 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
                     id="mui-7"
                     placeholder="Search for location"
                     role="combobox"
@@ -184,7 +184,7 @@ exports[`renders one track, one region 1`] = `
                     value="ctgA:1..100"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg
@@ -484,7 +484,7 @@ exports[`renders one track, one region 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
@@ -651,7 +651,7 @@ exports[`renders two tracks, two regions 1`] = `
         class="css-1fs11k8-overview"
       >
         <svg
-          class="css-1fsr3xw-overviewSvg"
+          class="css-191b84s-overviewSvg"
           height="48"
         >
           <polygon
@@ -731,16 +731,16 @@ exports[`renders two tracks, two regions 1`] = `
               />
             </button>
             <div
-              class="MuiAutocomplete-root css-l3ln04-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1h51icj-MuiAutocomplete-root"
               data-testid="autocomplete"
-              style="width: 260.27500000000003px;"
+              style="width: 283.990625px;"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -749,7 +749,7 @@ exports[`renders two tracks, two regions 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
                     id="mui-9"
                     placeholder="Search for location"
                     role="combobox"
@@ -758,7 +758,7 @@ exports[`renders two tracks, two regions 1`] = `
                     value="ctgA:1..100 ctgB:1,001..1,698"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg
@@ -1303,7 +1303,7 @@ exports[`renders two tracks, two regions 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
@@ -1435,7 +1435,7 @@ exports[`renders two tracks, two regions 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"

package/src/LinearGenomeView/components/util.ts

@@ -65,7 +65,8 @@ export function getCytobands(assembly: Assembly | undefined, refName: string) {
   return (
     assembly?.cytobands
       ?.map(f => ({
-        refName: assembly.getCanonicalRefName(f.get('refName')),
+        refName:
+          assembly.getCanonicalRefName(f.get('refName')) || f.get('refName'),
         start: f.get('start'),
         end: f.get('end'),
         type: f.get('type'),

package/src/LinearGenomeView/index.test.ts

@@ -234,29 +234,27 @@ test('can instantiate a model that tests navTo/moveTo', async () => {
   expect(model.bpPerPx).toBe(0.125)
 
   expect(() => model.navTo({ refName: 'ctgA', start: 200, end: 100 })).toThrow(
-    'start "201" is greater than end "100"',
+    /start greater than end/,
   )
 
-  expect(() =>
-    model.navTo({ refName: 'ctgDoesNotExist', start: 0, end: 100 }),
-  ).toThrow('could not find a region with refName "ctgDoesNotExist"')
+  expect(() => model.navTo({ refName: 'noExist', start: 0, end: 100 })).toThrow(
+    /could not find a region/,
+  )
 
   expect(() => model.navTo({ refName: 'ctgA', end: 20100 })).toThrow(
-    'could not find a region with refName "ctgA" that contained an end position 20100',
+    /could not find a region/,
   )
 
   expect(() => model.navTo({ refName: 'ctgA', start: 20000 })).toThrow(
-    'could not find a region with refName "ctgA" that contained a start position 20001',
+    /could not find a region/,
   )
 
   expect(() =>
     model.navTo({ refName: 'ctgA', start: 20000, end: 20100 }),
-  ).toThrow(
-    'could not find a region that completely contained "ctgA:20,001..20,100"',
-  )
+  ).toThrow(/could not find a region/)
 
   expect(() => model.navTo({ refName: 'ctgA', start: 0, end: 20000 })).toThrow(
-    'could not find a region that completely contained "ctgA:1..20,000"',
+    /could not find a region/,
   )
 })
 
@@ -304,8 +302,8 @@ test('can navToMultiple', () => {
     { refName: 'ctgA', start: 5000, end: 10000 },
     { refName: 'ctgC', start: 0, end: 5000 },
   ])
-  expect(model.offsetPx).toBe(2793)
-  expect(model.bpPerPx).toBeCloseTo(12.531)
+  expect(model.offsetPx).toBe(199)
+  expect(model.bpPerPx).toBeCloseTo(25.12562)
 })
 
 describe('Zoom to selected displayed regions', () => {