Add resize handle

GMOD · Feb 19, 2025 · 006862c · 006862c
1 parent b10317d
commit 006862c
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/...src/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.tsx b/...src/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.tsx
@@ -1,12 +1,23 @@
 import { useState } from 'react'
 
+import { ResizeHandle } from '@jbrowse/core/ui'
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
 import type { MultiLinearVariantMatrixDisplayModel } from '../model'
 import type { Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+const useStyles = makeStyles()({
+  resizeHandle: {
+    height: 4,
+    background: '#ccc',
+    boxSizing: 'border-box',
+    borderTop: '1px solid #fafafa',
+  },
+})
+
 const Wrapper = observer(function ({
   children,
   model,
@@ -43,6 +54,7 @@ const LinesConnectingMatrixToGenomicPosition = observer(function ({
   model: MultiLinearVariantMatrixDisplayModel
   exportSVG?: boolean
 }) {
+  const { classes } = useStyles()
   const { assemblyManager } = getSession(model)
   const view = getContainingView(model) as LinearGenomeViewModel
   const [mouseOverLine, setMouseOverLine] = useState<{
@@ -56,23 +68,37 @@ const LinesConnectingMatrixToGenomicPosition = observer(function ({
   const b0 = dynamicBlocks.contentBlocks[0]?.widthPx || 0
   const w = b0 / (featuresVolatile?.length || 1)
   return assembly && featuresVolatile ? (
-    <Wrapper exportSVG={exportSVG} model={model}>
-      <AllLines model={model} setMouseOverLine={setMouseOverLine} />
-      {mouseOverLine ? (
-        <line
-          stroke="#f00c"
-          strokeWidth={3}
-          key={mouseOverLine.f.id()}
-          x1={mouseOverLine.idx * w + w / 2}
-          x2={mouseOverLine.c}
-          y1={lineZoneHeight}
-          y2={0}
-          onMouseLeave={() => {
-            setMouseOverLine(undefined)
+    <>
+      <Wrapper exportSVG={exportSVG} model={model}>
+        <AllLines model={model} setMouseOverLine={setMouseOverLine} />
+        {mouseOverLine ? (
+          <line
+            stroke="#f00c"
+            strokeWidth={2}
+            style={{
+              pointerEvents: 'none',
+            }}
+            x1={mouseOverLine.idx * w + w / 2}
+            x2={mouseOverLine.c}
+            y1={lineZoneHeight}
+            y2={0}
+            onMouseLeave={() => {
+              setMouseOverLine(undefined)
+            }}
+          />
+        ) : null}
+      </Wrapper>
+      {!exportSVG ? (
+        <ResizeHandle
+          style={{
+            position: 'absolute',
+            top: lineZoneHeight - 4,
           }}
+          onDrag={n => model.setLineZoneHeight(lineZoneHeight + n)}
+          className={classes.resizeHandle}
         />
       ) : null}
-    </Wrapper>
+    </>
   ) : null
 })
 

diff --git a/plugins/variants/src/MultiLinearVariantMatrixDisplay/model.ts b/plugins/variants/src/MultiLinearVariantMatrixDisplay/model.ts
@@ -1,4 +1,4 @@
-import { getSession } from '@jbrowse/core/util'
+import { clamp, getSession } from '@jbrowse/core/util'
 import { isAlive, types } from 'mobx-state-tree'
 
 import MultiVariantBaseModelF from '../shared/MultiVariantBaseModel'
@@ -29,15 +29,12 @@ export default function stateModelFactory(
          * #property
          */
         rowHeightSetting: types.optional(types.number, 1),
+        /**
+         * #property
+         */
+        lineZoneHeight: 20,
       }),
     )
-
-    .volatile(() => ({
-      /**
-       * #volatile
-       */
-      lineZoneHeight: 20,
-    }))
     .views(self => ({
       get nrow() {
         return self.sources?.length || 1
@@ -90,9 +87,25 @@ export default function stateModelFactory(
         return self.rowHeight > 8 && self.showSidebarLabelsSetting
       },
     }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setLineZoneHeight(n: number) {
+        self.lineZoneHeight = clamp(n, 10, 1000)
+        return self.lineZoneHeight
+      },
+    }))
     .actions(self => {
       const { renderSvg: superRenderSvg } = self
       return {
+        /**
+         * #action
+         */
+        setLineZoneHeight(n: number) {
+          self.lineZoneHeight = clamp(n, 10, 1000)
+          return self.lineZoneHeight
+        },
         afterAttach() {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           ;(async () => {