Move logic to the feature label itself

GMOD · Mar 24, 2022 · 454f8aa · 454f8aa
1 parent 6d41c1e
commit 454f8aa
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 33 deletions.
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.tsx b/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.tsx
@@ -38,10 +38,6 @@ function FeatureGlyph(props: {
     description,
     shouldShowName,
     shouldShowDescription,
-    reversed,
-    viewOffsetPx,
-    viewEnd,
-    viewStart,
   } = props
 
   const featureLayout = rootLayout.getSubRecord(String(feature.id()))
@@ -51,21 +47,6 @@ function FeatureGlyph(props: {
   const { GlyphComponent } = featureLayout.data || {}
 
   let x = rootLayout.getSubRecord('nameLabel')?.absolute.left || 0
-  const viewLeft = reversed ? viewEnd : viewStart
-
-  const fstart = feature.get('start')
-  const fend = feature.get('end')
-  // const [fstart, fend] = reversed ? [end, start] : [start, end]
-  const w = featureLayout.width
-  if (reversed) {
-    if (fstart < viewLeft + w && viewLeft - w < fend) {
-      x = viewOffsetPx
-    }
-  } else {
-    if (fstart < viewLeft + w && viewLeft - w < fend) {
-      x = viewOffsetPx
-    }
-  }
 
   return (
     <g>

diff --git a/plugins/svg/src/SvgFeatureRenderer/components/FeatureLabel.tsx b/plugins/svg/src/SvgFeatureRenderer/components/FeatureLabel.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { measureText } from '@jbrowse/core/util'
+import { isStateTreeNode } from 'mobx-state-tree'
+import { measureText, getViewParams } from '@jbrowse/core/util'
 import { DisplayModel } from './util'
 
 export default observer(
@@ -13,6 +14,10 @@ export default observer(
     fontHeight = 13,
     featureWidth = 0,
     allowedWidthExpansion = 0,
+    feature,
+    viewStart,
+    viewEnd,
+    viewOffsetPx,
     displayModel = {},
   }: {
     text: string
@@ -28,6 +33,29 @@ export default observer(
     const totalWidth = featureWidth + allowedWidthExpansion
     const measuredTextWidth = measureText(text, fontHeight)
 
+    console.log('here')
+    if (isStateTreeNode(displayModel)) {
+      const params = getViewParams(displayModel)
+      viewStart = params.viewStart
+      viewEnd = params.viewEnd
+      viewOffsetPx = params.viewOffsetPx
+    }
+    const viewLeft = reversed ? viewEnd : viewStart
+
+    const fstart = feature.get('start')
+    const fend = feature.get('end')
+    // const [fstart, fend] = reversed ? [end, start] : [start, end]
+    const w = featureWidth
+    if (reversed) {
+      if (fstart < viewLeft + w && viewLeft - w < fend) {
+        x = viewOffsetPx
+      }
+    } else {
+      if (fstart < viewLeft + w && viewLeft - w < fend) {
+        x = viewOffsetPx
+      }
+    }
+
     return (
       <text x={x} y={y + fontHeight} fill={color} fontSize={fontHeight}>
         {measuredTextWidth > totalWidth

diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx b/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx
@@ -151,18 +151,12 @@ const RenderedFeatures = observer(
     region: Region
     extraGlyphs: ExtraGlyphValidator[]
     layout: BaseLayout<unknown>
-    viewOffsetPx?: number
-    viewStart?: number
-    viewEnd?: number
+    viewOffsetPx: number
+    viewStart: number
+    viewEnd: number
     [key: string]: unknown
   }) => {
-    const { displayModel, features = new Map(), isFeatureDisplayed } = props
-    let { viewStart = 0, viewEnd = 0, viewOffsetPx = 0 } = props
-
-    if (isStateTreeNode(displayModel)) {
-      ;({ viewOffsetPx, viewStart, viewEnd } = getViewParams(displayModel))
-    }
-
+    const { features = new Map(), isFeatureDisplayed } = props
     return (
       <>
         {[...features.values()]
@@ -171,9 +165,6 @@ const RenderedFeatures = observer(
             <RenderedFeatureGlyph
               key={feature.id()}
               feature={feature}
-              viewStart={viewStart}
-              viewEnd={viewEnd}
-              viewOffsetPx={viewOffsetPx}
               {...props}
             />
           ))}
@@ -191,6 +182,9 @@ function SvgFeatureRendering(props: {
   features: Map<string, Feature>
   displayModel: DisplayModel
   exportSVG: boolean
+  viewStart: number
+  viewEnd: number
+  viewOffsetPx: number
   featureDisplayHandler: (f: Feature) => boolean
   extraGlyphs: ExtraGlyphValidator[]
   onMouseOut?: React.MouseEventHandler