Misc

lib/src/components/BoxTrackBlock.tsx

@@ -26,6 +26,7 @@ const BoxTrackBlock = observer(function ({
     blanks,
     rowHeight,
     highResScaleFactor,
+    fontSize,
     scrollX,
   } = model
   const { height, features, associatedRowName } = track.model
@@ -75,7 +76,7 @@ const BoxTrackBlock = observer(function ({
     ctx.clearRect(0, 0, blockSize, height)
     ctx.translate(-offsetX, 0)
     ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
     const xStart = Math.max(0, Math.floor(offsetX / colWidth))
     ctx.fillStyle = 'goldenrod'
@@ -91,6 +92,7 @@ const BoxTrackBlock = observer(function ({
     })
   }, [
     associatedRowName,
+    fontSize,
     blockSize,
     colWidth,
     layout.rectangles,

lib/src/components/Header.tsx

@@ -20,12 +20,10 @@ const MetadataDialog = lazy(() => import('./dialogs/MetadataDialog'))
 const TracklistDialog = lazy(() => import('./dialogs/TracklistDialog'))
 
 const InfoArea = observer(({ model }: { model: MsaViewModel }) => {
-  const { mouseOverRowName, mouseCol } = model
+  const { mouseOverRowName } = model
   return (
     <div>
       <Typography display="inline">Row name: {mouseOverRowName}</Typography>
-      <span style={{ marginLeft: 10 }} />
-      <Typography display="inline">Position: {mouseCol}</Typography>
     </div>
   )
 })

lib/src/components/MSAPanel/renderMSABlock.ts

@@ -25,14 +25,15 @@ export function renderBlock({
     blockSize,
     colWidth,
     rowHeight,
+    fontSize,
     highResScaleFactor,
   } = model
   ctx.resetTransform()
   ctx.scale(highResScaleFactor, highResScaleFactor)
   ctx.clearRect(0, 0, blockSize, blockSize)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
   const leaves = hierarchy.leaves()
   const b = blockSize

lib/src/components/Minimap.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
 import { MsaViewModel } from '../model'
-import OverviewRubberband from './OverviewRubberband'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const [mouseDownCoordX, setMouseDownCoordX] = useState<number>()
-  const [mouseCurrCoordX, setMouseCurrCoordX] = useState<number>()
-  const ref = useRef<SVGSVGElement>(null)
+  const [mouseDown, setMouseDown] = useState<{
+    clientX: number
+    scrollX: number
+  }>()
+  const [hovered, setHovered] = useState(false)
   const {
     scrollX,
     msaAreaWidth: W,
@@ -19,37 +20,55 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const right = left + W
   const s = left * unit
   const e = right * unit
-  const TOP = 10
   const fill = 'rgba(66, 119, 127, 0.3)'
 
   useEffect(() => {
-    if (mouseDownCoordX !== undefined) {
+    if (mouseDown !== undefined) {
       function fn(event: MouseEvent) {
-        setMouseCurrCoordX(event.clientX)
+        if (mouseDown !== undefined) {
+          model.setScrollX(
+            mouseDown.scrollX - (event.clientX - mouseDown.clientX) / unit,
+          )
+        }
+      }
+      function fn2() {
+        setMouseDown(undefined)
       }
       document.addEventListener('mousemove', fn)
+      document.addEventListener('mouseup', fn2)
       return () => {
         document.removeEventListener('mousemove', fn)
+        document.removeEventListener('mousemove', fn2)
       }
     }
-  }, [mouseDownCoordX])
+  }, [model, unit, mouseDown])
 
-  const rect = ref.current?.getBoundingClientRect()
-  const l = (mouseDownCoordX || 0) - (rect?.left || 0)
-  const r = (mouseCurrCoordX || 0) - (rect?.left || 0)
-  const l2 = Math.min(l, r)
-  const r2 = Math.max(l, r)
   return (
-    <div style={{ width: '100%' }}>
-      <OverviewRubberband
-        model={model}
-        ControlComponent={<div style={{ background: '#f00c', height: 12 }} />}
+    <div style={{ position: 'relative', width: '100%' }}>
+      <div style={{ height: 12 }} />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: Math.max(0, s),
+          background: hovered ? 'rgba(66,119,127,0.6)' : fill,
+          cursor: 'pointer',
+          border: '1px solid #555',
+          height: 12,
+          width: e - s,
+          zIndex: 100,
+        }}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+        onMouseDown={event => {
+          setMouseDown({
+            clientX: event.clientX,
+            scrollX: model.scrollX,
+          })
+        }}
       />
-      <rect x={s} y={0} width={e - s} height={TOP} fill={fill} />
-      {mouseDownCoordX !== undefined && mouseCurrCoordX !== undefined ? (
-        <rect x={l2} y={0} width={r2 - l2} height={TOP} fill={'black'} />
-      ) : null}
-      <svg ref={ref} height={H} style={{ width: '100%' }}>
+
+      <svg height={H} style={{ width: '100%' }}>
         <polygon
           fill={fill}
           points={[

lib/src/components/TextTrack.tsx

@@ -20,6 +20,7 @@ const AnnotationBlock = observer(function ({
     bgColor,
     colorScheme: modelColorScheme,
     colWidth,
+    fontSize,
     rowHeight,
     highResScaleFactor,
   } = model
@@ -50,7 +51,7 @@ const AnnotationBlock = observer(function ({
     ctx.clearRect(0, 0, blockSize, rowHeight)
     ctx.translate(-offsetX, 0)
     ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
     const xStart = Math.max(0, Math.floor(offsetX / colWidth))
     const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
@@ -69,6 +70,7 @@ const AnnotationBlock = observer(function ({
       }
     }
   }, [
+    fontSize,
     bgColor,
     blockSize,
     colWidth,

lib/src/components/dialogs/SettingsDialog.tsx

@@ -91,7 +91,7 @@ const SettingsDialog = observer(function ({
               onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
             />
           }
-          label="Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)"
+          label="Labels align right"
         />
 
         <div>

lib/src/model.ts

@@ -354,12 +354,7 @@ const model = types
     setScrollY(n: number) {
       self.scrollY = n
     },
-    /**
-     * #action
-     */
-    setScrollX(n: number) {
-      self.scrollX = n
-    },
+
     /**
      * #action
      */
@@ -831,6 +826,16 @@ const model = types
         0,
       )
     },
+    /**
+     * #action
+     */
+    setScrollX(n: number) {
+      self.scrollX = clamp(
+        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
+        n,
+        0,
+      )
+    },
     /**
      * #action
      */
@@ -868,13 +873,14 @@ const model = types
      */
     get labelsWidth() {
       let x = 0
-      if (self.rowHeight > 5) {
-        for (const node of self.hierarchy.leaves()) {
+      const { rowHeight, hierarchy, treeMetadata, fontSize } = self
+      if (rowHeight > 5) {
+        for (const node of hierarchy.leaves()) {
           const {
             data: { name },
           } = node
-          const displayName = self.treeMetadata[name]?.genome || name
-          x = Math.max(measureText(displayName, self.fontSize), x)
+          const displayName = treeMetadata[name]?.genome || name
+          x = Math.max(measureText(displayName, fontSize), x)
         }
       }
       return x
@@ -1159,7 +1165,7 @@ const model = types
         autorun(async () => {
           if (self.treeWidthMatchesArea) {
             self.setTreeWidth(
-              Math.max(50, self.treeAreaWidth - self.labelsWidth),
+              Math.max(50, self.treeAreaWidth - self.labelsWidth - 20),
             )
           }
         }),