Reduce re-renderings (#467)

Author: cmdcolin

packages/linear-genome-view/src/BasicTrack/components/Block.js

@@ -1,9 +1,10 @@
-import { withStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/styles'
 import classnames from 'classnames'
+import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const styles = (/* theme */) => ({
+const useStyles = makeStyles((/* theme */) => ({
   block: {
     position: 'absolute',
     minHeight: '100%',
@@ -20,15 +21,19 @@ const styles = (/* theme */) => ({
     borderRight: `2px solid #333`,
     // borderRight: `2px solid ${theme.palette.divider}`,
   },
-})
+}))
 
-function Block({ classes, offset, children, width, leftBorder, rightBorder }) {
+function Block({ block, model, children }) {
+  const classes = useStyles()
   return (
     <div
-      style={{ left: `${offset}px`, width: `${width}px` }}
+      style={{
+        left: `${block.offsetPx - model.offsetPx}px`,
+        width: `${block.widthPx}px`,
+      }}
       className={classnames(classes.block, {
-        [classes.leftBorder]: leftBorder,
-        [classes.rightBorder]: rightBorder,
+        [classes.leftBorder]: block.isLeftEndOfDisplayedRegion,
+        [classes.rightBorder]: block.isRightEndOfDisplayedRegion,
       })}
     >
       {children}
@@ -38,19 +43,14 @@ function Block({ classes, offset, children, width, leftBorder, rightBorder }) {
 
 Block.defaultProps = {
   children: undefined,
-  leftBorder: false,
-  rightBorder: false,
 }
 Block.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
-  offset: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
+  model: PropTypes.shape().isRequired,
+  block: PropTypes.shape().isRequired,
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
-  leftBorder: PropTypes.bool,
-  rightBorder: PropTypes.bool,
 }
 
-export default withStyles(styles)(Block)
+export default observer(Block)

packages/linear-genome-view/src/BasicTrack/components/BlockBasedTrack.js

@@ -1,5 +1,6 @@
 import { getConf } from '@gmod/jbrowse-core/configuration'
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
+import { getParent } from 'mobx-state-tree'
 import PropTypes from 'prop-types'
 import React from 'react'
 import Track from './Track'
@@ -12,7 +13,11 @@ function BlockBasedTrack(props) {
       {model.trackMessageComponent ? (
         <model.trackMessageComponent model={model} />
       ) : (
-        <TrackBlocks {...props} blockState={model.blockState} />
+        <TrackBlocks
+          {...props}
+          viewModel={getParent(getParent(model))}
+          blockState={model.blockState}
+        />
       )}
       {children}
     </Track>

packages/linear-genome-view/src/BasicTrack/components/TrackBlocks.js

@@ -49,25 +49,15 @@ const ElidedBlockMarker = withStyles(styles)(function ElidedBlockMarker({
   )
 })
 
-function TrackBlocks({ classes, model, offsetPx, bpPerPx, blockState }) {
+function TrackBlocks({ classes, model, viewModel, blockState }) {
   const { blockDefinitions } = model
   return (
     <div data-testid="Block" className={classes.trackBlocks}>
       {blockDefinitions.map(block => {
         if (block instanceof ContentBlock) {
           const state = blockState.get(block.key)
           return (
-            <Block
-              leftBorder={block.isLeftEndOfDisplayedRegion}
-              rightBorder={block.isRightEndOfDisplayedRegion}
-              start={block.start}
-              end={block.end}
-              refName={block.refName}
-              width={block.widthPx}
-              key={block.key}
-              offset={block.offsetPx - offsetPx}
-              bpPerPx={bpPerPx}
-            >
+            <Block key={block.offsetPx} block={block} model={viewModel}>
               {state && state.reactComponent ? (
                 <state.reactComponent model={state} />
               ) : null}
@@ -90,7 +80,7 @@ function TrackBlocks({ classes, model, offsetPx, bpPerPx, blockState }) {
             <ElidedBlockMarker
               key={block.key}
               width={block.widthPx}
-              offset={block.offsetPx - offsetPx}
+              offset={block.offsetPx - viewModel.offsetPx}
             />
           )
         }
@@ -102,10 +92,9 @@ function TrackBlocks({ classes, model, offsetPx, bpPerPx, blockState }) {
 
 TrackBlocks.propTypes = {
   classes: ReactPropTypes.objectOf(ReactPropTypes.string).isRequired,
-  offsetPx: ReactPropTypes.number.isRequired,
-  bpPerPx: ReactPropTypes.number.isRequired,
   blockState: PropTypes.observableMap.isRequired,
   model: PropTypes.observableObject.isRequired,
+  viewModel: PropTypes.observableObject.isRequired,
 }
 
 export default withStyles(styles)(observer(TrackBlocks))

packages/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.js

@@ -408,17 +408,7 @@ function LinearGenomeView(props) {
           bpPerPx={bpPerPx}
           model={model}
         >
-          <ScaleBar
-            style={{
-              gridColumn: 'blocks',
-              gridRow: 'scale-bar',
-            }}
-            height={32}
-            bpPerPx={bpPerPx}
-            blocks={staticBlocks}
-            offsetPx={offsetPx}
-            horizontallyFlipped={model.horizontallyFlipped}
-          />
+          <ScaleBar model={model} height={32} />
         </Rubberband>
 
         {model.hideHeader ? (

packages/linear-genome-view/src/LinearGenomeView/components/Ruler.js

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/styles'
+import { observer } from 'mobx-react'
 import React, { Fragment } from 'react'
 import ReactPropTypes from 'prop-types'
 import { PropTypes } from '@gmod/jbrowse-core/mst-types'
@@ -77,7 +78,7 @@ export function* makeTicks(
   }
 }
 
-const styles = (/* theme */) => ({
+const useStyles = makeStyles((/* theme */) => ({
   majorTickLabel: {
     fontSize: '11px',
     // fill: theme.palette.text.primary,
@@ -103,18 +104,11 @@ const styles = (/* theme */) => ({
     fillOpacity: 0.75,
     filter: 'url(#dilate)',
   },
-})
+}))
 
 function Ruler(props) {
-  const {
-    region,
-    bpPerPx,
-    flipped,
-    major,
-    minor,
-    showRefNameLabel,
-    classes,
-  } = props
+  const { region, bpPerPx, flipped, major, minor, showRefNameLabel } = props
+  const classes = useStyles()
   const ticks = []
   const labels = []
   for (const tick of makeTicks(region, bpPerPx, major, minor)) {
@@ -189,7 +183,6 @@ function Ruler(props) {
 }
 
 Ruler.propTypes = {
-  classes: ReactPropTypes.objectOf(ReactPropTypes.string).isRequired,
   region: PropTypes.Region.isRequired,
   bpPerPx: ReactPropTypes.number.isRequired,
   flipped: ReactPropTypes.bool,
@@ -203,4 +196,4 @@ Ruler.defaultProps = {
   minor: true,
 }
 
-export default withStyles(styles)(Ruler)
+export default observer(Ruler)

packages/linear-genome-view/src/LinearGenomeView/components/ScaleBar.js

@@ -1,5 +1,6 @@
 import { withStyles } from '@material-ui/core'
 import React from 'react'
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import PropTypes from 'prop-types'
 import Block from '../../BasicTrack/components/Block'
 
@@ -14,7 +15,7 @@ const styles = (/* theme */) => ({
     background: '#555',
     // background: theme.palette.background.default,
     overflow: 'hidden',
-    height: '100%',
+    height: 32,
   },
   refLabel: {
     fontSize: '16px',
@@ -37,48 +38,26 @@ function findBlockContainingLeftSideOfView(offsetPx, blockSet) {
   return undefined
 }
 
-function ScaleBar({
-  classes,
-  style,
-  height,
-  blocks,
-  offsetPx,
-  bpPerPx,
-  horizontallyFlipped,
-}) {
-  const finalStyle = Object.assign({}, style, {
-    height: `${height}px`,
-  })
-
+function ScaleBar({ classes, model, height }) {
   const blockContainingLeftEndOfView = findBlockContainingLeftSideOfView(
-    offsetPx,
-    blocks,
+    model.offsetPx,
+    model.staticBlocks,
   )
 
   return (
-    <div style={finalStyle} className={classes.scaleBar}>
-      {blocks.map(block => {
+    <div className={classes.scaleBar}>
+      {model.staticBlocks.map(block => {
         return (
-          <Block
-            leftBorder={block.isLeftEndOfDisplayedRegion}
-            rightBorder={block.isRightEndOfDisplayedRegion}
-            refName={block.refName}
-            start={block.start}
-            end={block.end}
-            width={block.widthPx}
-            key={block.key}
-            offset={block.offsetPx - offsetPx}
-            bpPerPx={bpPerPx}
-          >
+          <Block key={block.offsetPx} block={block} model={model}>
             <svg height={height} width={block.widthPx}>
               <Ruler
                 region={block}
                 showRefNameLabel={
                   !!block.isLeftEndOfDisplayedRegion &&
                   block !== blockContainingLeftEndOfView
                 }
-                bpPerPx={bpPerPx}
-                flipped={horizontallyFlipped}
+                bpPerPx={model.bpPerPx}
+                flipped={model.horizontallyFlipped}
               />
             </svg>
           </Block>
@@ -95,20 +74,11 @@ function ScaleBar({
 }
 ScaleBar.defaultProps = {
   style: {},
-  blocks: [],
-  horizontallyFlipped: false,
 }
 ScaleBar.propTypes = {
+  model: MobxPropTypes.objectOrObservableObject.isRequired,
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
-  style: PropTypes.objectOf(PropTypes.any),
   height: PropTypes.number.isRequired,
-  blocks: PropTypes.shape({
-    map: PropTypes.func.isRequired,
-    getBlocks: PropTypes.func.isRequired,
-  }),
-  bpPerPx: PropTypes.number.isRequired,
-  offsetPx: PropTypes.number.isRequired,
-  horizontallyFlipped: PropTypes.bool,
 }
 
-export default withStyles(styles)(ScaleBar)
+export default withStyles(styles)(observer(ScaleBar))