jbrowse-plugin-mafviewer 1.2.3 → 1.3.0

package/src/LinearMafDisplay/components/SetRowHeightDialog/SetRowHeightDialog.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  root: {
+    width: 500,
+  },
+})
+
+const SetRowHeightDialog = observer(function (props: {
+  model: {
+    rowHeight?: number
+    rowProportion?: number
+    setRowHeight: (arg: number) => void
+    setRowProportion: (arg: number) => void
+  }
+  handleClose: () => void
+}) {
+  const { model, handleClose } = props
+  const { classes } = useStyles()
+  const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`)
+  const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`)
+
+  return (
+    <Dialog open onClose={handleClose} title="Set row height">
+      <form
+        onSubmit={event => {
+          event.preventDefault()
+          model.setRowProportion(+rowProportion)
+          model.setRowHeight(+rowHeight)
+          handleClose()
+        }}
+      >
+        <DialogContent className={classes.root}>
+          <Typography>
+            Set row height and the proportion of the row height to use for
+            drawing each row
+          </Typography>
+          <TextField
+            value={rowHeight}
+            helperText="Enter row height"
+            autoFocus
+            onChange={event => {
+              setRowHeight(event.target.value)
+            }}
+          />
+          <TextField
+            value={rowProportion}
+            helperText="Enter row proportion"
+            onChange={event => {
+              setRowProportion(event.target.value)
+            }}
+          />
+          <DialogActions>
+            <Button variant="contained" color="primary" type="submit">
+              Submit
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={() => {
+                handleClose()
+              }}
+            >
+              Cancel
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+})
+export default SetRowHeightDialog

package/src/LinearMafDisplay/components/{ColorLegend.tsx → Sidebar/ColorLegend.tsx}

@@ -2,21 +2,25 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import { LinearMafDisplayModel } from '../stateModel'
 import RectBg from './RectBg'
 import Tree from './Tree'
 
+import type { LinearMafDisplayModel } from '../../stateModel'
+
 const ColorLegend = observer(function ({
   model,
-  labelWidth,
-  svgFontSize,
 }: {
   model: LinearMafDisplayModel
-  svgFontSize: number
-  labelWidth: number
 }) {
-  const { totalHeight, treeWidth, samples = [], rowHeight } = model
-  const canDisplayLabel = rowHeight >= 8
+  const {
+    labelWidth,
+    canDisplayLabel,
+    totalHeight,
+    treeWidth,
+    samples = [],
+    rowHeight,
+    svgFontSize,
+  } = model
   const boxHeight = Math.min(20, rowHeight)
 
   return (

package/src/LinearMafDisplay/components/{SvgWrapper.tsx → Sidebar/SvgWrapper.tsx}

@@ -3,8 +3,8 @@ import React from 'react'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-// locals
-import { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../../stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const SvgWrapper = observer(function ({
   children,
@@ -19,15 +19,17 @@ const SvgWrapper = observer(function ({
     return <>{children}</>
   } else {
     const { totalHeight } = model
+    const { width } = getContainingView(model) as LinearGenomeViewModel
     return (
       <svg
         style={{
           position: 'absolute',
+          userSelect: 'none',
           top: 0,
           left: 0,
           pointerEvents: 'none',
           height: totalHeight,
-          width: getContainingView(model).width,
+          width,
         }}
       >
         {children}

package/src/LinearMafDisplay/components/{Tree.tsx → Sidebar/Tree.tsx}

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-const Tree = observer(function ({ model }: { model: any }) {
+import type { LinearMafDisplayModel } from '../../stateModel'
+
+const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
   const {
     // this is needed for redrawing after zoom change, similar to react-msaview
     // renderTreeCanvas
@@ -20,7 +22,9 @@ const Tree = observer(function ({ model }: { model: any }) {
             const { source, target } = link
             const sy = source.x!
             const ty = target.x!
+            // @ts-expect-error
             const tx = showBranchLen ? target.len : target.y
+            // @ts-expect-error
             const sx = showBranchLen ? source.len : source.y
 
             // 1d line intersection to check if line crosses block at all, this is

package/src/LinearMafDisplay/components/Sidebar/YScaleBars.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import ColorLegend from './ColorLegend'
+import SvgWrapper from './SvgWrapper'
+
+import type { LinearMafDisplayModel } from '../../stateModel'
+
+export const YScaleBars = observer(function (props: {
+  model: LinearMafDisplayModel
+  orientation?: string
+  exportSVG?: boolean
+}) {
+  const { model } = props
+  return (
+    <SvgWrapper {...props}>
+      <ColorLegend model={model} />
+    </SvgWrapper>
+  )
+})
+
+export default YScaleBars

package/src/LinearMafDisplay/index.ts

@@ -1,7 +1,7 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
 
-import ReactComponent from './components/ReactComponent'
+import ReactComponent from './components/LinearMafDisplayComponent'
 import configSchemaF from './configSchema'
 import stateModelFactory from './stateModel'
 

package/src/LinearMafDisplay/renderSvg.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { getContainingView } from '@jbrowse/core/util'
 
-import YScaleBars from './components/YScaleBars'
+import YScaleBars from './components/Sidebar/YScaleBars'
 
 import type { LinearMafDisplayModel } from './stateModel'
 import type {

package/src/LinearMafDisplay/stateModel.ts

@@ -1,5 +1,7 @@
+import { lazy } from 'react'
+
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { getEnv, getSession } from '@jbrowse/core/util'
+import { getEnv, getSession, max, measureText } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
@@ -7,11 +9,10 @@ import deepEqual from 'fast-deep-equal'
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types } from 'mobx-state-tree'
 
-import SetRowHeightDialog from './components/SetRowHeight'
-import { maxLength, setBrLength } from './types'
+import { maxLength, setBrLength } from './util'
 import { normalize } from '../util'
 
-import type { NodeWithIds, NodeWithIdsAndLength } from './types'
+import type { NodeWithIds, NodeWithIdsAndLength, Sample } from './types'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type {
   AnyConfigurationModel,
@@ -21,11 +22,9 @@ import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-interface Sample {
-  id: string
-  label: string
-  color?: string
-}
+const SetRowHeightDialog = lazy(
+  () => import('./components/SetRowHeightDialog/SetRowHeightDialog'),
+)
 
 /**
  * #stateModel LinearMafDisplay
@@ -79,6 +78,10 @@ export default function stateModelFactory(
          * #property
          */
         treeAreaWidth: 80,
+        /**
+         * #property
+         */
+        showAsUpperCase: true,
       }),
     )
     .volatile(() => ({
@@ -131,6 +134,12 @@ export default function stateModelFactory(
           self.volatileTree = tree
         }
       },
+      /**
+       * #action
+       */
+      setShowAsUpperCase(arg: boolean) {
+        self.showAsUpperCase = arg
+      },
     }))
     .views(self => ({
       /**
@@ -193,8 +202,20 @@ export default function stateModelFactory(
        * #getter
        */
       get samples() {
-        return this.rowNames ? normalize(this.rowNames) : self.volatileSamples
+        if (this.rowNames) {
+          const volatileSamplesMap = self.volatileSamples
+            ? Object.fromEntries(self.volatileSamples.map(e => [e.id, e]))
+            : undefined
+          return normalize(this.rowNames).map(r => ({
+            ...r,
+            label: volatileSamplesMap?.[r.id]?.label || r.label,
+            color: volatileSamplesMap?.[r.id]?.color || r.color,
+          }))
+        } else {
+          return self.volatileSamples
+        }
       },
+
       /**
        * #getter
        */
@@ -239,6 +260,7 @@ export default function stateModelFactory(
             rowHeight,
             rowProportion,
             mismatchRendering,
+            showAsUpperCase,
           } = self
           const s = superRenderProps()
           return {
@@ -251,6 +273,7 @@ export default function stateModelFactory(
             rowProportion,
             showAllLetters,
             mismatchRendering,
+            showAsUpperCase,
           }
         },
         /**
@@ -291,6 +314,14 @@ export default function stateModelFactory(
                 },
               ],
             },
+            {
+              label: 'Use upper-case',
+              type: 'checkbox',
+              checked: self.showAsUpperCase,
+              onClick: () => {
+                self.setShowAsUpperCase(!self.showAsUpperCase)
+              },
+            },
             {
               label: 'Show all letters',
               type: 'checkbox',
@@ -311,6 +342,32 @@ export default function stateModelFactory(
         },
       }
     })
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get svgFontSize() {
+        return Math.min(Math.max(self.rowHeight, 8), 14)
+      },
+      /**
+       * #getter
+       */
+      get canDisplayLabel() {
+        return self.rowHeight >= 7
+      },
+      /**
+       * #getter
+       */
+      get labelWidth() {
+        const minWidth = 20
+        return max(
+          self.samples
+            ?.map(s => measureText(s.label, this.svgFontSize))
+            .map(width => (this.canDisplayLabel ? width : minWidth)) || [],
+          0,
+        )
+      },
+    }))
     .actions(self => ({
       afterCreate() {
         addDisposer(
@@ -319,11 +376,8 @@ export default function stateModelFactory(
             try {
               const { rpcManager } = getSession(self)
               const sessionId = getRpcSessionId(self)
-
-              const results = (await rpcManager.call(
-                sessionId,
-                'MafGetSamples',
-                {
+              self.setSamples(
+                (await rpcManager.call(sessionId, 'MafGetSamples', {
                   sessionId,
                   adapterConfig: self.adapterConfig,
                   statusCallback: (message: string) => {
@@ -331,9 +385,8 @@ export default function stateModelFactory(
                       self.setMessage(message)
                     }
                   },
-                },
-              )) as any
-              self.setSamples(results)
+                })) as { samples: Sample[]; tree: unknown },
+              )
             } catch (e) {
               console.error(e)
               getSession(self).notifyError(`${e}`, e)

package/src/LinearMafDisplay/types.ts

@@ -1,7 +1,3 @@
-import { max } from 'd3-array'
-
-import type { HierarchyNode } from 'd3-hierarchy'
-
 export interface NodeWithIds {
   id: string
   name: string
@@ -18,24 +14,8 @@ export interface NodeWithIdsAndLength {
   length: number
 }
 
-// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
-export function maxLength(d: HierarchyNode<NodeWithIds>): number {
-  return (
-    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
-  )
-}
-// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
-export function setBrLength(
-  d: HierarchyNode<NodeWithIds>,
-  y0: number,
-  k: number,
-) {
-  // @ts-expect-error
-  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
-
-  if (d.children) {
-    d.children.forEach(d => {
-      setBrLength(d, y0, k)
-    })
-  }
+export interface Sample {
+  id: string
+  label?: string
+  color?: string
 }

package/src/LinearMafDisplay/util.ts

@@ -0,0 +1,27 @@
+import { max } from 'd3-array'
+
+import type { NodeWithIds } from './types'
+import type { HierarchyNode } from 'd3-hierarchy'
+
+// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
+export function maxLength(d: HierarchyNode<NodeWithIds>): number {
+  return (
+    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
+  )
+}
+
+// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
+export function setBrLength(
+  d: HierarchyNode<NodeWithIds>,
+  y0: number,
+  k: number,
+) {
+  // @ts-expect-error
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+
+  if (d.children) {
+    d.children.forEach(d => {
+      setBrLength(d, y0, k)
+    })
+  }
+}

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -19,6 +19,7 @@ interface RenderArgs extends RenderArgsDeserialized {
   showAllLetters: boolean
   mismatchRendering: boolean
   statusCallback?: (arg: string) => void
+  showAsUpperCase: boolean
 }
 
 export default class LinearMafRenderer extends FeatureRendererType {
@@ -45,22 +46,17 @@ export default class LinearMafRenderer extends FeatureRendererType {
     const height = samples.length * rowHeight + 100
     const width = (region.end - region.start) / bpPerPx
     const features = await this.getFeatures(renderProps)
-    const res = await renderToAbstractCanvas(
-      width,
-      height,
-      renderProps,
-      async ctx => {
-        await updateStatus('Rendering alignment', statusCallback, () => {
-          makeImageData({
-            ctx,
-            renderArgs: {
-              ...renderProps,
-              features,
-            },
-          })
+    const res = await updateStatus('Rendering alignment', statusCallback, () =>
+      renderToAbstractCanvas(width, height, renderProps, ctx => {
+        makeImageData({
+          ctx,
+          renderArgs: {
+            ...renderProps,
+            features,
+          },
         })
         return undefined
-      },
+      }),
     )
     const results = await super.render({
       ...renderProps,

package/src/LinearMafRenderer/makeImageData.ts

@@ -21,6 +21,11 @@ interface RenderArgs extends RenderArgsDeserialized {
   mismatchRendering: boolean
   features: Map<string, Feature>
   statusCallback?: (arg: string) => void
+  showAsUpperCase: boolean
+}
+
+function getLetter(a: string, showAsUpperCase: boolean) {
+  return showAsUpperCase ? a.toUpperCase() : a
 }
 
 export function makeImageData({
@@ -40,6 +45,7 @@ export function makeImageData({
     samples,
     rowProportion,
     features,
+    showAsUpperCase,
   } = renderArgs
   const region = regions[0]!
   const canvasWidth = (region.end - region.start) / bpPerPx
@@ -61,11 +67,11 @@ export function makeImageData({
 
   for (const feature of features.values()) {
     const [leftPx] = featureSpanPx(feature, region, bpPerPx)
-    const vals = feature.get('alignments') as Record<string, { data: string }>
+    const vals = feature.get('alignments') as Record<string, { seq: string }>
     const seq = feature.get('seq').toLowerCase()
     const r = Object.entries(vals)
     for (const [sample, val] of r) {
-      const origAlignment = val.data
+      const origAlignment = val.seq
       const alignment = origAlignment.toLowerCase()
 
       const row = sampleToRowMap.get(sample)
@@ -74,11 +80,12 @@ export function makeImageData({
       }
 
       const t = rowHeight * row
+      const t2 = offset + t
 
       // gaps
       ctx.beginPath()
       ctx.fillStyle = 'black'
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         if (seq[i] !== '-') {
           if (alignment[i] === '-') {
             const l = leftPx + scale * o
@@ -93,12 +100,12 @@ export function makeImageData({
       if (!showAllLetters) {
         // matches
         ctx.fillStyle = 'lightgrey'
-        for (let i = 0, o = 0; i < alignment.length; i++) {
+        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
           if (seq[i] !== '-') {
             const c = alignment[i]
             const l = leftPx + scale * o
             if (seq[i] === c && c !== '-' && c !== ' ') {
-              fillRect(ctx, l, offset + t, scale + f, h, canvasWidth)
+              fillRect(ctx, l, t2, scale + f, h, canvasWidth)
             }
             o++
           }
@@ -106,7 +113,7 @@ export function makeImageData({
       }
 
       // mismatches
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         const c = alignment[i]
         if (seq[i] !== '-') {
           if (c !== '-') {
@@ -115,7 +122,7 @@ export function makeImageData({
               fillRect(
                 ctx,
                 l,
-                offset + t,
+                t2,
                 scale + f,
                 h,
                 canvasWidth,
@@ -128,7 +135,7 @@ export function makeImageData({
               fillRect(
                 ctx,
                 l,
-                offset + t,
+                t2,
                 scale + f,
                 h,
                 canvasWidth,
@@ -146,7 +153,7 @@ export function makeImageData({
       // font
       const charSizeW = 10
       if (scale >= charSizeW) {
-        for (let i = 0, o = 0; i < alignment.length; i++) {
+        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
           if (seq[i] !== '-') {
             const l = leftPx + scale * o
             const offset = (scale - charSizeW) / 2 + 1
@@ -156,7 +163,11 @@ export function makeImageData({
                 ? (contrastForBase[c] ?? 'white')
                 : 'black'
               if (rowHeight > charHeight) {
-                ctx.fillText(origAlignment[i] || '', l + offset, hp2 + t + 3)
+                ctx.fillText(
+                  getLetter(origAlignment[i] || '', showAsUpperCase),
+                  l + offset,
+                  hp2 + t + 3,
+                )
               }
             }
             o++
@@ -170,11 +181,11 @@ export function makeImageData({
   // insertions are always 'on top' of the other features
   for (const feature of features.values()) {
     const [leftPx] = featureSpanPx(feature, region, bpPerPx)
-    const vals = feature.get('alignments') as Record<string, { data: string }>
+    const vals = feature.get('alignments') as Record<string, { seq: string }>
     const seq = feature.get('seq').toLowerCase()
 
     for (const [sample, val] of Object.entries(vals)) {
-      const origAlignment = val.data
+      const origAlignment = val.seq
       const alignment = origAlignment.toLowerCase()
       const row = sampleToRowMap.get(sample)
       if (row === undefined) {
@@ -182,8 +193,8 @@ export function makeImageData({
       }
 
       const t = rowHeight * row
-
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      const t2 = offset + t
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         let ins = ''
         while (seq[i] === '-') {
           if (alignment[i] !== '-' && alignment[i] !== ' ') {
@@ -197,14 +208,14 @@ export function makeImageData({
           if (ins.length > 10) {
             const txt = `${ins.length}`
             if (bpPerPx > 10) {
-              fillRect(ctx, l - 1, t, 2, h, canvasWidth, 'purple')
+              fillRect(ctx, l - 1, t2, 2, h, canvasWidth, 'purple')
             } else if (h > charHeight) {
-              const rwidth = measureText(txt)
-              const padding = 5
+              const rwidth = measureText(txt, 10)
+              const padding = 2
               fillRect(
                 ctx,
                 l - rwidth / 2 - padding,
-                t,
+                t2,
                 rwidth + 2 * padding,
                 h,
                 canvasWidth,
@@ -217,7 +228,7 @@ export function makeImageData({
               fillRect(
                 ctx,
                 l - padding,
-                t,
+                t2,
                 2 * padding,
                 h,
                 canvasWidth,
@@ -225,10 +236,10 @@ export function makeImageData({
               )
             }
           } else {
-            fillRect(ctx, l, offset + t, 1, h, canvasWidth, 'purple')
+            fillRect(ctx, l, t2, 1, h, canvasWidth, 'purple')
             if (bpPerPx < 0.2 && rowHeight > 5) {
-              fillRect(ctx, l - 2, offset + t, 5, 1, canvasWidth)
-              fillRect(ctx, l - 2, offset + t + h - 1, 5, 1, canvasWidth)
+              fillRect(ctx, l - 2, t2, 5, 1, canvasWidth)
+              fillRect(ctx, l - 2, t2 + h - 1, 5, 1, canvasWidth)
             }
           }
         }

package/src/MafAddTrackWorkflow/index.ts

@@ -2,7 +2,6 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
 import { types } from 'mobx-state-tree'
 
-// locals
 import MultiMAFWidget from './AddTrackWorkflow'
 
 export default function MafAddTrackWorkflowF(pluginManager: PluginManager) {