@jbrowse/plugin-alignments 1.7.10 → 2.0.1

package/src/BamAdapter/MismatchParser.ts

@@ -11,8 +11,8 @@ export interface Mismatch {
 }
 const mdRegex = new RegExp(/(\d+|\^[a-z]+|[a-z])/gi)
 const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
-export function parseCigar(cigar: string) {
-  return (cigar || '').split(/([MIDNSHPX=])/)
+export function parseCigar(cigar = '') {
+  return cigar.split(/([MIDNSHPX=])/).slice(0, -1)
 }
 export function cigarToMismatches(
   ops: string[],

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from 'tss-react/mui'
 import { AlignmentsDisplayModel } from '../models/model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   resizeHandle: {
     height: 2,
     position: 'absolute',
@@ -15,7 +15,7 @@ const useStyles = makeStyles(() => ({
 
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model
-  const classes = useStyles()
+  const { classes } = useStyles()
   const top = SNPCoverageDisplay.height
   return (
     <div

package/src/LinearPileupDisplay/components/ColorByModifications.tsx

@@ -3,18 +3,18 @@ import { observer } from 'mobx-react'
 import { ObservableMap } from 'mobx'
 import {
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
   Typography,
-  CircularProgress,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -35,7 +35,7 @@ function ModificationTable({
 }: {
   modifications: [string, string][]
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <table className={classes.table}>
       <tbody>
@@ -64,7 +64,7 @@ function ColorByTagDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { colorBy, modificationTagMap } = model
 

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -9,11 +9,11 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     width: 300,
   },
@@ -29,7 +29,7 @@ function ColorByTagDlg(props: {
   model: { setColorScheme: Function }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)

package/src/LinearPileupDisplay/components/FilterByTag.tsx

@@ -11,12 +11,12 @@ import {
   Paper,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   paper: {
     padding: theme.spacing(2),
     margin: theme.spacing(2),
@@ -93,7 +93,7 @@ function FilterByTagDlg(props: {
   handleClose: () => void
 }) {
   const { model, handleClose } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { filterBy } = model
   const [flagInclude, setFlagInclude] = useState(filterBy?.flagInclude)
   const [flagExclude, setFlagExclude] = useState(filterBy?.flagExclude)

package/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 
 export interface LinearPileupDisplayBlurbProps {
   model: {

package/src/LinearPileupDisplay/components/SetFeatureHeight.tsx

@@ -2,20 +2,20 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  TextField,
-  Typography,
-  IconButton,
+  Checkbox,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  Checkbox,
   FormControlLabel,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -37,7 +37,7 @@ function SetFeatureHeightDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { featureHeightSetting, noSpacing: noSpacingSetting } = model
   const [height, setHeight] = useState(`${featureHeightSetting}`)

package/src/LinearPileupDisplay/components/SetMaxHeight.tsx

@@ -9,11 +9,11 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     width: 500,
   },
@@ -36,7 +36,7 @@ function SetMaxHeightDlg(props: {
   handleClose: () => void
 }) {
   const { model, handleClose } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { maxHeight = '' } = model
   const [max, setMax] = useState(`${maxHeight}`)
 

package/src/LinearPileupDisplay/components/SortByTag.tsx

@@ -9,12 +9,12 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
@@ -31,7 +31,7 @@ function SortByTagDlg(props: {
   model: { setSortedBy: Function }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)

package/src/LinearPileupDisplay/model.ts

@@ -23,12 +23,12 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 
 // icons
-import VisibilityIcon from '@material-ui/icons/Visibility'
+import VisibilityIcon from '@mui/icons-material/Visibility'
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
-import MenuOpenIcon from '@material-ui/icons/MenuOpen'
-import SortIcon from '@material-ui/icons/Sort'
-import PaletteIcon from '@material-ui/icons/Palette'
-import FilterListIcon from '@material-ui/icons/ClearAll'
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
+import SortIcon from '@mui/icons-material/Sort'
+import PaletteIcon from '@mui/icons-material/Palette'
+import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
 import { LinearPileupDisplayConfigModel } from './configSchema'
@@ -178,6 +178,13 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 } = self
                 const { staticBlocks, bpPerPx } = view
 
+                if (!self.estimatedStatsReady) {
+                  return
+                }
+                if (self.regionTooLarge) {
+                  return
+                }
+
                 // continually generate the vc pairing, set and rerender if any
                 // new values seen
                 if (colorBy?.tag) {
@@ -321,16 +328,15 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
         }
         const { refName, assemblyName, offset } = centerLineInfo
         const centerBp = Math.round(offset) + 1
-        const centerRefName = refName
 
-        if (centerBp < 0) {
+        if (centerBp < 0 || !refName) {
           return
         }
 
         self.sortedBy = {
           type,
           pos: centerBp,
-          refName: centerRefName,
+          refName,
           assemblyName,
           tag,
         }
@@ -466,8 +472,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             sortedBy,
             colorBy,
             filterBy: JSON.parse(JSON.stringify(filterBy)),
-            colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
-            modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
+            colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
             showSoftClip: self.showSoftClipping,
             config: self.rendererConfig,
             async onFeatureClick(_: unknown, featureId?: string) {

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -93,35 +93,29 @@ const stateModelFactory = (
             {
               ...configBlob,
               drawInterbaseCounts:
-                self.drawInterbaseCounts === undefined
-                  ? configBlob.drawInterbaseCounts
-                  : self.drawInterbaseCounts,
-              drawIndicators:
-                self.drawIndicators === undefined
-                  ? configBlob.drawIndicators
-                  : self.drawIndicators,
-              drawArcs:
-                self.drawArcs === undefined
-                  ? configBlob.drawArcs
-                  : self.drawArcs,
+                self.drawInterbaseCounts ?? configBlob.drawInterbaseCounts,
+              drawIndicators: self.drawIndicators ?? configBlob.drawIndicators,
+              drawArcs: self.drawArcs ?? configBlob.drawArcs,
             },
             getEnv(self),
           )
         },
         get drawArcsSetting() {
-          return self.drawArcs !== undefined
-            ? self.drawArcs
-            : readConfObject(this.rendererConfig, 'drawArcs')
+          return (
+            self.drawArcs ?? readConfObject(this.rendererConfig, 'drawArcs')
+          )
         },
         get drawInterbaseCountsSetting() {
-          return self.drawInterbaseCounts !== undefined
-            ? self.drawInterbaseCounts
-            : readConfObject(this.rendererConfig, 'drawInterbaseCounts')
+          return (
+            self.drawInterbaseCounts ??
+            readConfObject(this.rendererConfig, 'drawInterbaseCounts')
+          )
         },
         get drawIndicatorsSetting() {
-          return self.drawIndicators !== undefined
-            ? self.drawIndicators
-            : readConfObject(this.rendererConfig, 'drawIndicators')
+          return (
+            self.drawIndicators ??
+            readConfObject(this.rendererConfig, 'drawIndicators')
+          )
         },
 
         get modificationsReady() {
@@ -133,17 +127,16 @@ const stateModelFactory = (
 
         renderProps() {
           const superProps = superRenderProps()
+          const { colorBy, filterBy, modificationTagMap } = self
           return {
             ...superProps,
             notReady: superProps.notReady || !this.modificationsReady,
-            modificationTagMap: JSON.parse(
-              JSON.stringify(self.modificationTagMap),
-            ),
+            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
 
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
-            colorBy: self.colorBy ? getSnapshot(self.colorBy) : undefined,
-            filterBy: self.filterBy ? getSnapshot(self.filterBy) : undefined,
+            colorBy: colorBy ? getSnapshot(colorBy) : undefined,
+            filterBy: filterBy ? getSnapshot(filterBy) : undefined,
           }
         },
       }
@@ -166,6 +159,13 @@ const stateModelFactory = (
               try {
                 const { colorBy } = self
                 const { staticBlocks } = getContainingView(self) as LGV
+
+                if (!self.estimatedStatsReady) {
+                  return
+                }
+                if (self.regionTooLarge) {
+                  return
+                }
                 if (colorBy?.type === 'modifications') {
                   const vals = await getUniqueModificationValues(
                     self,

package/src/PileupRenderer/PileupRenderer.tsx

@@ -1,4 +1,4 @@
-import Color from 'color'
+import { Theme } from '@mui/material/styles'
 import BoxRendererType, {
   RenderArgs,
   RenderArgsSerialized,
@@ -7,7 +7,6 @@ import BoxRendererType, {
   ResultsSerialized,
   ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
-import { Theme } from '@material-ui/core'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import {
   bpSpanPx,
@@ -64,11 +63,13 @@ function fillRect(
 }
 
 function getColorBaseMap(theme: Theme) {
+  // @ts-ignore
+  const { bases } = theme.palette
   return {
-    A: theme.palette.bases.A.main,
-    C: theme.palette.bases.C.main,
-    G: theme.palette.bases.G.main,
-    T: theme.palette.bases.T.main,
+    A: bases.A.main,
+    C: bases.C.main,
+    G: bases.G.main,
+    T: bases.T.main,
     deletion: '#808080', // gray
   }
 }
@@ -137,8 +138,8 @@ interface LayoutFeature {
   feature: Feature
 }
 
-function shouldDrawSNPs(type?: string) {
-  return !['methylation', 'modifications'].includes(type || '')
+function shouldDrawSNPsMuted(type?: string) {
+  return ['methylation', 'modifications'].includes(type || '')
 }
 
 function shouldDrawIndels(type?: string) {
@@ -152,7 +153,7 @@ export default class PileupRenderer extends BoxRendererType {
   // letter M is approximately the height
   getCharWidthHeight(ctx: CanvasRenderingContext2D) {
     const charWidth = measureText('A')
-    const charHeight = measureText('M')
+    const charHeight = measureText('M') - 2
     return { charWidth, charHeight }
   }
 
@@ -244,7 +245,8 @@ export default class PileupRenderer extends BoxRendererType {
     )
 
     return {
-      ...region,
+      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+      ...(region as Omit<typeof region, symbol>),
       start: Math.floor(Math.max(start - bpExpansion, 0)),
       end: Math.ceil(end + bpExpansion),
     }
@@ -453,7 +455,7 @@ export default class PileupRenderer extends BoxRendererType {
     canvasWidth: number
   }) {
     const { feature, topPx, heightPx } = feat
-    const { modificationTagMap = {} } = renderArgs
+    const { Color, modificationTagMap = {} } = renderArgs
 
     const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
 
@@ -481,6 +483,8 @@ export default class PileupRenderer extends BoxRendererType {
     for (let i = 0; i < modifications.length; i++) {
       const { type, positions } = modifications[i]
       const col = modificationTagMap[type] || 'black'
+
+      // @ts-ignore
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
         const r = start + readPos
@@ -826,7 +830,7 @@ export default class PileupRenderer extends BoxRendererType {
     colorForBase,
     contrastForBase,
     canvasWidth,
-    drawSNPs = true,
+    drawSNPsMuted,
     drawIndels = true,
   }: {
     ctx: CanvasRenderingContext2D
@@ -835,15 +839,15 @@ export default class PileupRenderer extends BoxRendererType {
     colorForBase: { [key: string]: string }
     contrastForBase: { [key: string]: string }
     mismatchAlpha?: boolean
-    drawSNPs?: boolean
     drawIndels?: boolean
+    drawSNPsMuted?: boolean
     minSubfeatureWidth: number
     largeInsertionIndicatorScale: number
     charWidth: number
     charHeight: number
     canvasWidth: number
   }) {
-    const { bpPerPx, regions } = renderArgs
+    const { Color, bpPerPx, regions } = renderArgs
     const { heightPx, topPx, feature } = feat
     const [region] = regions
     const start = feature.get('start')
@@ -868,33 +872,39 @@ export default class PileupRenderer extends BoxRendererType {
       const mbase = mismatch.base
       const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
       const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx))
-      if (mismatch.type === 'mismatch' && drawSNPs) {
-        const baseColor = colorForBase[mismatch.base] || '#888'
+      if (mismatch.type === 'mismatch') {
+        if (!drawSNPsMuted) {
+          const baseColor = colorForBase[mismatch.base] || '#888'
 
-        fillRect(
-          ctx,
-          leftPx,
-          topPx,
-          widthPx,
-          heightPx,
-          canvasWidth,
-          !mismatchAlpha
-            ? baseColor
-            : mismatch.qual !== undefined
-            ? Color(baseColor)
-                .alpha(Math.min(1, mismatch.qual / 50))
-                .hsl()
-                .string()
-            : baseColor,
-        )
+          fillRect(
+            ctx,
+            leftPx,
+            topPx,
+            widthPx,
+            heightPx,
+            canvasWidth,
+            !mismatchAlpha
+              ? baseColor
+              : mismatch.qual !== undefined
+              ? // @ts-ignore
+                Color(baseColor)
+                  .alpha(Math.min(1, mismatch.qual / 50))
+                  .hsl()
+                  .string()
+              : baseColor,
+          )
+        }
 
         if (widthPx >= charWidth && heightPx >= heightLim) {
           // normal SNP coloring
-          const contrastColor = contrastForBase[mismatch.base] || 'black'
+          const contrastColor = drawSNPsMuted
+            ? 'black'
+            : contrastForBase[mismatch.base] || 'black'
           ctx.fillStyle = !mismatchAlpha
             ? contrastColor
             : mismatch.qual !== undefined
-            ? Color(contrastColor)
+            ? // @ts-ignore
+              Color(contrastColor)
                 .alpha(Math.min(1, mismatch.qual / 50))
                 .hsl()
                 .string()
@@ -1050,11 +1060,13 @@ export default class PileupRenderer extends BoxRendererType {
     const mismatches: Mismatch[] = feature.get('mismatches')
     const seq = feature.get('seq')
     const { charWidth, charHeight } = this.getCharWidthHeight(ctx)
+    // @ts-ignore
+    const { bases } = theme.palette
     const colorForBase: { [key: string]: string } = {
-      A: theme.palette.bases.A.main,
-      C: theme.palette.bases.C.main,
-      G: theme.palette.bases.G.main,
-      T: theme.palette.bases.T.main,
+      A: bases.A.main,
+      C: bases.C.main,
+      G: bases.G.main,
+      T: bases.T.main,
       deletion: '#808080', // gray
     }
 
@@ -1152,7 +1164,7 @@ export default class PileupRenderer extends BoxRendererType {
     ctx.font = 'bold 10px Courier New,monospace'
 
     const { charWidth, charHeight } = this.getCharWidthHeight(ctx)
-    const drawSNPs = shouldDrawSNPs(colorBy?.type)
+    const drawSNPsMuted = shouldDrawSNPsMuted(colorBy?.type)
     const drawIndels = shouldDrawIndels(colorBy?.type)
     for (let i = 0; i < layoutRecords.length; i++) {
       const feat = layoutRecords[i]
@@ -1176,7 +1188,7 @@ export default class PileupRenderer extends BoxRendererType {
         feat,
         renderArgs,
         mismatchAlpha,
-        drawSNPs,
+        drawSNPsMuted,
         drawIndels,
         largeInsertionIndicatorScale,
         minSubfeatureWidth,
@@ -1279,6 +1291,7 @@ export default class PileupRenderer extends BoxRendererType {
 
     const width = (end - start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)
+    const Color = await import('color').then(f => f.default)
     const res = await renderToAbstractCanvas(
       width,
       height,
@@ -1293,6 +1306,7 @@ export default class PileupRenderer extends BoxRendererType {
             layout,
             features,
             regionSequence,
+            Color,
           },
         }),
     )

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -1,8 +1,8 @@
+import React, { useRef, useState, useEffect } from 'react'
 import { Region } from '@jbrowse/core/util/types'
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { bpSpanPx } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useRef, useState, useEffect } from 'react'
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view'
 
 // used so that user can click-away-from-feature below the laid out features
@@ -91,46 +91,46 @@ function PileupRendering(props: {
     contextMenuFeature,
   ])
 
-  function onMouseDown(event: MouseEvent) {
+  function onMouseDown(event: React.MouseEvent) {
     setMouseIsDown(true)
     setMovedDuringLastMouseDown(false)
     callMouseHandler('MouseDown', event)
   }
 
-  function onMouseEnter(event: MouseEvent) {
+  function onMouseEnter(event: React.MouseEvent) {
     callMouseHandler('MouseEnter', event)
   }
 
-  function onMouseOut(event: MouseEvent) {
+  function onMouseOut(event: React.MouseEvent) {
     callMouseHandler('MouseOut', event)
     callMouseHandler('MouseLeave', event)
   }
 
-  function onMouseOver(event: MouseEvent) {
+  function onMouseOver(event: React.MouseEvent) {
     callMouseHandler('MouseOver', event)
   }
 
-  function onMouseUp(event: MouseEvent) {
+  function onMouseUp(event: React.MouseEvent) {
     setMouseIsDown(false)
     callMouseHandler('MouseUp', event)
   }
 
-  function onClick(event: MouseEvent) {
+  function onClick(event: React.MouseEvent) {
     if (!movedDuringLastMouseDown) {
       callMouseHandler('Click', event)
     }
   }
 
-  function onMouseLeave(event: MouseEvent) {
+  function onMouseLeave(event: React.MouseEvent) {
     callMouseHandler('MouseOut', event)
     callMouseHandler('MouseLeave', event)
   }
 
-  function onContextMenu(event: MouseEvent) {
+  function onContextMenu(event: React.MouseEvent) {
     callMouseHandler('ContextMenu', event)
   }
 
-  function mouseMove(event: MouseEvent) {
+  function mouseMove(event: React.MouseEvent) {
     if (mouseIsDown) {
       setMovedDuringLastMouseDown(true)
     }
@@ -158,7 +158,7 @@ function PileupRendering(props: {
     }
   }
 
-  function callMouseHandler(handlerName: string, event: MouseEvent) {
+  function callMouseHandler(handlerName: string, event: React.MouseEvent) {
     // @ts-ignore
     // eslint-disable-next-line react/destructuring-assignment
     const featureHandler = props[`onFeature${handlerName}`]