@jbrowse/plugin-linear-genome-view 1.6.1 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.1",
+  "version": "1.6.5",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d6ad1b8e7fbb00000f2ac87f463c82e9db12ea01"
+  "gitHead": "ab41f017840ffef09f5d60b008281cedaa5abe26"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -96,9 +96,7 @@ const Tooltip = observer(
           {...attributes.popper}
         >
           <TooltipContents
-            ref={(elt: HTMLDivElement) =>
-              setWidth(elt?.getBoundingClientRect().width || 0)
-            }
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
             message={contents}
           />
         </div>

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,7 +1,7 @@
+import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { getContainingView } from '@jbrowse/core/util'
-import { observer, PropTypes } from 'mobx-react'
-import React from 'react'
+import { observer } from 'mobx-react'
 import {
   ContentBlock,
   ElidedBlock,
@@ -14,6 +14,7 @@ import {
   ElidedBlock as ElidedBlockComponent,
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from './Block'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
 const useStyles = makeStyles({
   linearBlocks: {
@@ -96,8 +97,7 @@ const RenderedBlocks = observer(
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   const classes = useStyles()
   const { blockDefinitions } = model
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewModel = getContainingView(model) as any
+  const viewModel = getContainingView(model) as LinearGenomeViewModel
   return (
     <div
       data-testid="Blockset"
@@ -111,9 +111,5 @@ function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   )
 }
 
-LinearBlocks.propTypes = {
-  model: PropTypes.observableObject.isRequired,
-}
-
 export { RenderedBlocks, useStyles }
 export default observer(LinearBlocks)

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -387,7 +387,10 @@ export const BaseLinearDisplay = types
         self.setError()
         const aborter = new AbortController()
         const view = getContainingView(self) as LGV
-        if (!view.initialized) {
+
+        // extra check for contentBlocks.length
+        // https://github.com/GMOD/jbrowse-components/issues/2694
+        if (!view.initialized || !view.staticBlocks.contentBlocks.length) {
           return
         }
 
@@ -411,7 +414,7 @@ export const BaseLinearDisplay = types
       afterAttach() {
         // this autorun performs stats estimation
         //
-        // the chain of events calls estimateRegionStats against the data
+        // the chain of events calls estimateRegionsStats against the data
         // adapter which by default uses featureDensity, but can also respond
         // with a byte size estimate and fetch size limit (data adapter can
         // define what is too much data)

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -102,7 +102,10 @@ const TrackLabel = React.forwardRef(
       handleClose()
     }
 
-    const items = track.trackMenuItems()
+    const items = [
+      ...session.getTrackActionMenuItems?.(trackConf),
+      ...track.trackMenuItems(),
+    ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
     return (
       <>
@@ -148,10 +151,7 @@ const TrackLabel = React.forwardRef(
           onMenuItemClick={handleMenuItemClick}
           open={Boolean(anchorEl)}
           onClose={handleClose}
-          menuItems={[
-            ...session.getTrackActionMenuItems?.(trackConf),
-            ...items,
-          ].sort((a, b) => (b.priority || 0) - (a.priority || 0))}
+          menuItems={items}
         />
       </>
     )

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

@@ -505,10 +505,9 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -525,6 +524,9 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div
@@ -1397,10 +1399,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -1417,6 +1418,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div
@@ -1551,10 +1555,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -1571,6 +1574,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div

package/src/LinearGenomeView/index.tsx

@@ -104,6 +104,12 @@ export const INTER_REGION_PADDING_WIDTH = 2
 export const WIDGET_HEIGHT = 32
 export const SPACING = 7
 
+function localStorageGetItem(item: string) {
+  return typeof localStorage !== 'undefined'
+    ? localStorage.getItem(item)
+    : undefined
+}
+
 export function stateModelFactory(pluginManager: PluginManager) {
   return types
     .compose(
@@ -128,15 +134,15 @@ export function stateModelFactory(pluginManager: PluginManager) {
         ),
         trackLabels: types.optional(
           types.string,
-          () => localStorage.getItem('lgv-trackLabels') || 'overlapping',
+          () => localStorageGetItem('lgv-trackLabels') || 'overlapping',
         ),
         showCenterLine: types.optional(types.boolean, () => {
-          const setting = localStorage.getItem('lgv-showCenterLine')
-          return setting !== undefined ? !!setting : false
+          const setting = localStorageGetItem('lgv-showCenterLine')
+          return setting !== undefined && setting !== null ? !!+setting : false
         }),
         showCytobandsSetting: types.optional(types.boolean, () => {
-          const setting = localStorage.getItem('lgv-showCytobands')
-          return setting !== undefined ? !!setting : true
+          const setting = localStorageGetItem('lgv-showCytobands')
+          return setting !== undefined && setting !== null ? !!+setting : true
         }),
       }),
     )
@@ -1214,127 +1220,128 @@ export function stateModelFactory(pluginManager: PluginManager) {
           : 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).queueDialog((doneCallback: Function) => [
-                  ReturnToImportFormDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
-              icon: FolderOpenIcon,
-            },
-            {
-              label: 'Export SVG',
-              icon: PhotoCameraIcon,
-              onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
-                  ExportSvgDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
-            },
-            {
-              label: 'Open track selector',
-              onClick: self.activateTrackSelector,
-              icon: TrackSelectorIcon,
-            },
-            {
-              label: 'Horizontally flip',
-              icon: SyncAltIcon,
-              onClick: self.horizontallyFlip,
-            },
-            { type: 'divider' },
-            {
-              label: 'Show all regions in assembly',
-              icon: VisibilityIcon,
-              onClick: self.showAllRegionsInAssembly,
-            },
-            {
-              label: 'Show center line',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: self.showCenterLine,
-              onClick: self.toggleCenterLine,
-            },
-            {
-              label: 'Show header',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: !self.hideHeader,
-              onClick: self.toggleHeader,
+    .views(self => ({
+      menuItems(): MenuItem[] {
+        const { canShowCytobands, showCytobands } = self
+
+        const menuItems: MenuItem[] = [
+          {
+            label: 'Return to import form',
+            onClick: () => {
+              getSession(self).queueDialog((doneCallback: Function) => [
+                ReturnToImportFormDlg,
+                { model: self, handleClose: doneCallback },
+              ])
             },
-            {
-              label: 'Show header overview',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: !self.hideHeaderOverview,
-              onClick: self.toggleHeaderOverview,
-              disabled: self.hideHeader,
+            icon: FolderOpenIcon,
+          },
+          {
+            label: 'Export SVG',
+            icon: PhotoCameraIcon,
+            onClick: () => {
+              getSession(self).queueDialog((doneCallback: Function) => [
+                ExportSvgDlg,
+                { model: self, handleClose: doneCallback },
+              ])
             },
-            {
-              label: 'Track labels',
-              icon: LabelIcon,
-              subMenu: [
-                {
-                  label: 'Overlapping',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'overlapping',
-                  onClick: () => self.setTrackLabels('overlapping'),
-                },
-                {
-                  label: 'Offset',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'offset',
-                  onClick: () => self.setTrackLabels('offset'),
-                },
+          },
+          {
+            label: 'Open track selector',
+            onClick: self.activateTrackSelector,
+            icon: TrackSelectorIcon,
+          },
+          {
+            label: 'Horizontally flip',
+            icon: SyncAltIcon,
+            onClick: self.horizontallyFlip,
+          },
+          { type: 'divider' },
+          {
+            label: 'Show all regions in assembly',
+            icon: VisibilityIcon,
+            onClick: self.showAllRegionsInAssembly,
+          },
+          {
+            label: 'Show center line',
+            icon: VisibilityIcon,
+            type: 'checkbox',
+            checked: self.showCenterLine,
+            onClick: self.toggleCenterLine,
+          },
+          {
+            label: 'Show header',
+            icon: VisibilityIcon,
+            type: 'checkbox',
+            checked: !self.hideHeader,
+            onClick: self.toggleHeader,
+          },
+          {
+            label: 'Show header overview',
+            icon: VisibilityIcon,
+            type: 'checkbox',
+            checked: !self.hideHeaderOverview,
+            onClick: self.toggleHeaderOverview,
+            disabled: self.hideHeader,
+          },
+          {
+            label: 'Track labels',
+            icon: LabelIcon,
+            subMenu: [
+              {
+                label: 'Overlapping',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'overlapping',
+                onClick: () => self.setTrackLabels('overlapping'),
+              },
+              {
+                label: 'Offset',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'offset',
+                onClick: () => self.setTrackLabels('offset'),
+              },
+              {
+                label: 'Hidden',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'hidden',
+                onClick: () => self.setTrackLabels('hidden'),
+              },
+            ],
+          },
+          ...(canShowCytobands
+            ? [
                 {
-                  label: 'Hidden',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'hidden',
-                  onClick: () => self.setTrackLabels('hidden'),
-                },
-              ],
-            },
-            ...(canShowCytobands
-              ? [
-                  {
-                    label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
-                    onClick: () => {
-                      self.setShowCytobands(!showCytobands)
-                    },
+                  label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+                  onClick: () => {
+                    self.setShowCytobands(!showCytobands)
                   },
-                ]
-              : []),
-          ]
+                },
+              ]
+            : []),
+        ]
 
-          // add track's view level menu options
-          for (const [key, value] of self.trackTypeActions.entries()) {
-            if (value.length) {
-              menuItems.push(
-                { type: 'divider' },
-                { type: 'subHeader', label: key },
-              )
-              value.forEach(action => {
-                menuItems.push(action)
-              })
-            }
+        // add track's view level menu options
+        for (const [key, value] of self.trackTypeActions.entries()) {
+          if (value.length) {
+            menuItems.push(
+              { type: 'divider' },
+              { type: 'subHeader', label: key },
+            )
+            value.forEach(action => {
+              menuItems.push(action)
+            })
           }
+        }
 
-          return menuItems
-        },
-
+        return menuItems
+      },
+    }))
+    .views(self => {
+      let currentlyCalculatedStaticBlocks: BlockSet | undefined
+      let stringifiedCurrentlyCalculatedStaticBlocks = ''
+      return {
         get staticBlocks() {
           const ret = calculateStaticBlocks(self)
           const sret = JSON.stringify(ret)