New file

GMOD · Jan 6, 2024 · 0c8bff4 · 0c8bff4
1 parent 22a2e90
commit 0c8bff4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git a/lib/src/components/MSAView.tsx b/lib/src/components/MSAView.tsx
@@ -5,16 +5,14 @@ import { Typography } from '@mui/material'
 
 // locals
 import ImportForm from './ImportForm'
-import Rubberband from './Rubberband'
-import Ruler from './Ruler'
 import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
-
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
 import { MsaViewModel } from '../model'
 import MSAPanel from './MSAPanel'
 import TreePanel from './TreePanel'
+import Minimap from './Minimap'
 
 const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'))
 
@@ -34,44 +32,15 @@ const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const { scrollX, msaAreaWidth: W, colWidth, numColumns } = model
-  const unit = W / numColumns
-  const start = -scrollX / colWidth
-  const end = -scrollX / colWidth + W / colWidth
-  const s = start * unit
-  const e = end * unit
-  const HEIGHT = 56
-  const TOP = 10
-  const fill = 'rgba(66, 119, 127, 0.3)'
-  return (
-    <svg height={HEIGHT} style={{ width: '100%' }}>
-      <rect x={0} y={0} width={W} height={TOP} stroke="black" fill="none" />
-      <rect x={s} y={0} width={e - s} height={TOP} fill={fill} />
-      <polygon
-        fill={fill}
-        points={[
-          [e, TOP],
-          [s, TOP],
-          [0, HEIGHT],
-          [W, HEIGHT],
-        ].toString()}
-      />
-    </svg>
-  )
-})
-
 const MSAView2 = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth, height, turnedOnTracks } = model
+  const { height, turnedOnTracks } = model
   return (
     <div>
       <div style={{ height, overflow: 'hidden' }}>
         <Header model={model} />
         <div style={{ position: 'relative' }}>
           <div style={{ display: 'flex' }}>
-            <div style={{ flexShrink: 0, width: treeAreaWidth }}>
-              <TreeRuler model={model} />
-            </div>
+            <TreeRuler model={model} />
             <Minimap model={model} />
           </div>
           {turnedOnTracks?.map(track => (

diff --git a/lib/src/components/Minimap.tsx b/lib/src/components/Minimap.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { MsaViewModel } from '../model'
+
+const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
+  const { scrollX, msaAreaWidth: W, colWidth, numColumns } = model
+  const unit = W / numColumns
+  const start = -scrollX / colWidth
+  const end = -scrollX / colWidth + W / colWidth
+  const s = start * unit
+  const e = end * unit
+  const HEIGHT = 56
+  const TOP = 10
+  const fill = 'rgba(66, 119, 127, 0.3)'
+  return (
+    <svg height={HEIGHT} style={{ width: '100%' }}>
+      <rect x={0} y={0} width={W} height={TOP} stroke="black" fill="none" />
+      <rect x={s} y={0} width={e - s} height={TOP} fill={fill} />
+      <polygon
+        fill={fill}
+        points={[
+          [e, TOP],
+          [s, TOP],
+          [0, HEIGHT],
+          [W, HEIGHT],
+        ].toString()}
+      />
+    </svg>
+  )
+})
+
+export default Minimap
diff --git a/lib/src/components/TreePanel/TreeRuler.tsx b/lib/src/components/TreePanel/TreeRuler.tsx
@@ -5,8 +5,8 @@ import { observer } from 'mobx-react'
 import { MsaViewModel } from '../../model'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeWidth } = model
-  return <div style={{ width: treeWidth }} />
+  const { treeAreaWidth } = model
+  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
 })
 
 export default TreeRuler