Add assembly name to scalebar in synteny views (#4494)

GMOD · Jul 25, 2024 · e96a76f · e96a76f
1 parent 2dff69d
commit e96a76f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/model.ts b/plugins/linear-comparative-view/src/LinearComparativeView/model.ts
@@ -39,6 +39,8 @@ const ReturnToImportFormDialog = lazy(
  * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pluginManager: PluginManager) {
+  const model = pluginManager.getViewType('LinearGenomeView')
+    .stateModel as LinearGenomeViewStateModel
   return types
     .compose(
       'LinearComparativeView',
@@ -79,8 +81,11 @@ function stateModelFactory(pluginManager: PluginManager) {
          * currently this is limited to an array of two
          */
         views: types.array(
-          pluginManager.getViewType('LinearGenomeView')
-            .stateModel as LinearGenomeViewStateModel,
+          model.views(self => ({
+            scaleBarDisplayPrefix() {
+              return self.assemblyNames[0]
+            },
+          })),
         ),
 
         /**

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/Scalebar.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/Scalebar.tsx
@@ -3,14 +3,16 @@ import { makeStyles } from 'tss-react/mui'
 import { ContentBlock } from '@jbrowse/core/util/blockTypes'
 import { observer } from 'mobx-react'
 import React from 'react'
+import { getTickDisplayStr } from '@jbrowse/core/util'
+
+// locals
 import { LinearGenomeViewModel } from '..'
 import {
   ContentBlock as ContentBlockComponent,
   ElidedBlock as ElidedBlockComponent,
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
-import { getTickDisplayStr } from '@jbrowse/core/util'
 
 type LGV = LinearGenomeViewModel
 
@@ -55,33 +57,44 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
+const RenderedRefNameLabels = observer(function ({ model }: { model: LGV }) {
   const { classes } = useStyles()
+  const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model
 
   // find the block that needs pinning to the left side for context
   let lastLeftBlock = 0
-  model.staticBlocks.forEach((block, i) => {
-    if (block.offsetPx - model.offsetPx < 0) {
+  staticBlocks.forEach((block, i) => {
+    if (block.offsetPx - offsetPx < 0) {
       lastLeftBlock = i
     }
   })
+  const val = scaleBarDisplayPrefix()
   return (
     <>
-      {model.staticBlocks.map((block, index) => {
+      {staticBlocks.blocks[0].type !== 'ContentBlock' && val ? (
+        <Typography
+          style={{ left: 0, zIndex: 100 }}
+          className={classes.refLabel}
+        >
+          {val}
+        </Typography>
+      ) : null}
+      {staticBlocks.map((block, index) => {
         return block.type === 'ContentBlock' &&
           (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (
           <Typography
             key={`refLabel-${block.key}-${index}`}
             style={{
               left:
                 index === lastLeftBlock
-                  ? Math.max(0, -model.offsetPx)
-                  : block.offsetPx - model.offsetPx - 1,
+                  ? Math.max(0, -offsetPx)
+                  : block.offsetPx - offsetPx - 1,
               paddingLeft: index === lastLeftBlock ? 0 : 1,
             }}
             className={classes.refLabel}
             data-testid={`refLabel-${block.refName}`}
           >
+            {index === lastLeftBlock && val ? `${val}:` : ''}
             {block.refName}
           </Typography>
         ) : null
@@ -123,7 +136,7 @@ const RenderedBlockTicks = function ({
   )
 }
 
-const RenderedScalebarLabels = observer(({ model }: { model: LGV }) => {
+const RenderedScalebarLabels = observer(function ({ model }: { model: LGV }) {
   const { staticBlocks, bpPerPx } = model
 
   return (

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/model.ts b/plugins/linear-genome-view/src/LinearGenomeView/model.ts
@@ -283,6 +283,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
       rightOffset: undefined as undefined | BpOffset,
     }))
     .views(self => ({
+      scaleBarDisplayPrefix() {
+        return ''
+      },
       /**
        * #getter
        * this is the effective value of the track labels setting, incorporating