Renames

lib/src/components/Header.tsx

@@ -14,10 +14,10 @@ import List from '@mui/icons-material/List'
 import ZoomControls from './ZoomControls'
 import MultiAlignmentSelector from './MultiAlignmentSelector'
 
-const SettingsDialog = lazy(() => import('./dialogs/SettingsDlg'))
-const AboutDialog = lazy(() => import('./dialogs/AboutDlg'))
-const MetadataDialog = lazy(() => import('./dialogs/MetadataDlg'))
-const TracklistDialog = lazy(() => import('./dialogs/TracklistDlg'))
+const SettingsDialog = lazy(() => import('./dialogs/SettingsDialog'))
+const AboutDialog = lazy(() => import('./dialogs/AboutDialog'))
+const MetadataDialog = lazy(() => import('./dialogs/MetadataDialog'))
+const TracklistDialog = lazy(() => import('./dialogs/TracklistDialog'))
 
 const InfoArea = observer(({ model }: { model: MsaViewModel }) => {
   const { mouseOverRowName, mouseCol } = model

lib/src/components/Rubberband.tsx

@@ -11,7 +11,7 @@ import AssignmentIcon from '@mui/icons-material/Assignment'
 import { MsaViewModel } from '../model'
 import VerticalGuide from './VerticalGuide'
 
-const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'))
+const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDialog'))
 
 const useStyles = makeStyles()(theme => {
   const background =

lib/src/components/Track.tsx

@@ -10,7 +10,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 // locals
 import { MsaViewModel } from '../model'
 
-const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDlg'))
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog'))
 
 const useStyles = makeStyles()({
   button: {
@@ -27,7 +27,7 @@ export const TrackLabel = observer(function ({
   track: any
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
-  const [trackInfoDlgOpen, setTrackInfoDlgOpen] = useState(false)
+  const [trackInfoDialogOpen, setTrackInfoDialogOpen] = useState(false)
   const { rowHeight, treeAreaWidth: width } = model
   const {
     height,
@@ -76,19 +76,19 @@ export const TrackLabel = observer(function ({
           <MenuItem
             dense
             onClick={() => {
-              setTrackInfoDlgOpen(true)
+              setTrackInfoDialogOpen(true)
               setAnchorEl(undefined)
             }}
           >
             Get info
           </MenuItem>
         </Menu>
       ) : null}
-      {trackInfoDlgOpen ? (
+      {trackInfoDialogOpen ? (
         <Suspense fallback={null}>
           <TrackInfoDialog
             model={track.model}
-            onClose={() => setTrackInfoDlgOpen(false)}
+            onClose={() => setTrackInfoDialogOpen(false)}
           />
         </Suspense>
       ) : null}

lib/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 import RBush from 'rbush'
@@ -33,29 +33,34 @@ const TreeCanvasBlock = observer(function ({
   model: MsaViewModel
   offsetY: number
 }) {
-  const ref = useRef<HTMLCanvasElement>(null)
+  const ref = useRef<HTMLCanvasElement>()
   const clickMap = useRef(new RBush<ClickEntry>())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()
   const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
   const [hoverElt, setHoverElt] = useState<ClickEntry>()
 
-  const {
-    scrollY,
-    treeAreaWidth,
-    treeWidth,
-    margin,
-    blockSize,
-    highResScaleFactor,
-  } = model
+  const { scrollY, treeAreaWidth, margin, blockSize, highResScaleFactor } =
+    model
 
+  const width = treeAreaWidth + padding
+  const height = blockSize
+
+  const vref = useCallback(
+    (arg: HTMLCanvasElement) => {
+      model.incrementRef()
+      ref.current = arg
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
   useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
     return autorun(() => {
-      const ctx = ref.current?.getContext('2d')
-      if (!ctx) {
-        return
-      }
-      console.log('t1')
       renderTreeCanvas({
         ctx,
         model,
@@ -72,7 +77,7 @@ const TreeCanvasBlock = observer(function ({
     }
 
     ctx.resetTransform()
-    ctx.clearRect(0, 0, treeWidth + padding, blockSize)
+    ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize)
     ctx.translate(margin.left, -offsetY)
 
     if (hoverElt) {
@@ -81,7 +86,7 @@ const TreeCanvasBlock = observer(function ({
       ctx.fillStyle = 'rgba(0,0,0,0.1)'
       ctx.fillRect(minX, minY, maxX - minX, maxY - minY)
     }
-  }, [hoverElt, margin.left, offsetY, blockSize, treeWidth])
+  }, [hoverElt, margin.left, offsetY, blockSize, treeAreaWidth])
 
   function hoverBranchClickMap(event: React.MouseEvent) {
     const x = event.nativeEvent.offsetX - margin.left
@@ -133,10 +138,10 @@ const TreeCanvasBlock = observer(function ({
       ) : null}
 
       <canvas
-        width={(treeWidth + padding) * highResScaleFactor}
+        width={(treeAreaWidth + padding) * highResScaleFactor}
         height={blockSize * highResScaleFactor}
         style={{
-          width: treeWidth + padding,
+          width: treeAreaWidth + padding,
           height: blockSize,
           top: scrollY + offsetY,
           left: 0,
@@ -164,19 +169,19 @@ const TreeCanvasBlock = observer(function ({
             setToggleNodeMenu({ ...data2, x, y })
           }
         }}
-        ref={ref}
+        ref={vref}
       />
       <canvas
         style={{
-          width: treeWidth + padding,
+          width: treeAreaWidth + padding,
           height: blockSize,
           top: scrollY + offsetY,
           left: 0,
           position: 'absolute',
           pointerEvents: 'none',
           zIndex: 100,
         }}
-        width={treeWidth + padding}
+        width={treeAreaWidth + padding}
         height={blockSize}
         ref={mouseoverRef}
       />

lib/src/components/TreePanel/renderTreeCanvas.ts

@@ -216,6 +216,8 @@ export function renderTreeCanvas({
     margin,
     blockSize,
     rowHeight,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    nref,
   } = model
 
   ctx.resetTransform()

lib/src/model.ts

@@ -239,13 +239,30 @@ const model = types
     }),
   )
   .volatile(() => ({
+    /**
+     * #volatile
+     * a dummy variable that is incremented when ref changes so autorun for
+     * drawing canvas commands will run
+     */
+    nref: 0,
+    /**
+     * #volatile
+     */
     minimapHeight: 56,
+    /**
+     * #volatile
+     */
     error: undefined as unknown,
+    /**
+     * #volatile
+     */
     margin: {
       left: 20,
       top: 20,
     },
-    // annotations
+    /**
+     * #volatile
+     */
     annotPos: undefined as { left: number; right: number } | undefined,
   }))
   .actions(self => ({
@@ -1089,6 +1106,12 @@ const model = types
     clearAnnotationClickBoundaries() {
       self.annotPos = undefined
     },
+    /**
+     * #action
+     */
+    incrementRef() {
+      self.nref++
+    },
   }))
   .views(self => ({
     /**

yarn.lock

@@ -1737,9 +1737,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001565:
-  version "1.0.30001575"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001575.tgz#da7cf3785bd6ad75621d2e82b05a015eacf78d2b"
-  integrity sha512-VE+TSRJsWdtwTheYnrQikhGWlvJp+4lunXBadY66YIc+itIHm7y9d0NSA150Eh6mNY6d1S/B+fitPr9OzHJc6Q==
+  version "1.0.30001576"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
+  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
 
 canvas-sequencer@^3.1.0:
   version "3.1.0"