jbrowse-plugin-mafviewer 1.0.6 → 1.1.1

package/src/LinearMafDisplay/stateModel.ts

@@ -1,4 +1,4 @@
-import { Instance, types } from 'mobx-state-tree'
+import PluginManager from '@jbrowse/core/PluginManager'
 import {
   AnyConfigurationModel,
   AnyConfigurationSchemaType,
@@ -6,12 +6,26 @@ import {
   getConf,
 } from '@jbrowse/core/configuration'
 import { getEnv, getSession } from '@jbrowse/core/util'
-import PluginManager from '@jbrowse/core/PluginManager'
+import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view'
+import { ascending } from 'd3-array'
+import { type HierarchyNode, cluster, hierarchy } from 'd3-hierarchy'
+import { autorun } from 'mobx'
+import { Instance, addDisposer, isAlive, types } from 'mobx-state-tree'
+
 import SetRowHeightDialog from './components/SetRowHeight'
+import {
+  NodeWithIds,
+  NodeWithIdsAndLength,
+  maxLength,
+  setBrLength,
+} from './types'
+import { normalize } from '../util'
 
-function isStrs(array: unknown[]): array is string[] {
-  return typeof array[0] === 'string'
+interface Sample {
+  id: string
+  label: string
+  color?: string
 }
 
 /**
@@ -52,10 +66,35 @@ export default function stateModelFactory(
          * #property
          */
         showAllLetters: false,
+        /**
+         * #property
+         */
+        mismatchRendering: true,
+
+        /**
+         * #property
+         */
+        showBranchLen: false,
+
+        /**
+         * #property
+         */
+        treeAreaWidth: 80,
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
       prefersOffset: true,
+      /**
+       * #volatile
+       */
+      volatileSamples: [] as Sample[],
+      /**
+       * #volatile
+       */
+      tree: undefined as any,
     }))
     .actions(self => ({
       /**
@@ -76,26 +115,28 @@ export default function stateModelFactory(
       setShowAllLetters(f: boolean) {
         self.showAllLetters = f
       },
-    }))
-    .views(self => ({
       /**
-       * #getter
+       * #action
        */
-      get samples() {
-        const r = self.adapterConfig.samples as
-          | string[]
-          | { id: string; label: string; color?: string }[]
-        return isStrs(r)
-          ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
-          : r
+      setMismatchRendering(f: boolean) {
+        self.mismatchRendering = f
       },
-
+      /**
+       * #action
+       */
+      setSamples({ samples, tree }: { samples: Sample[]; tree: unknown }) {
+        self.volatileSamples = samples
+        self.tree = tree
+      },
+    }))
+    .views(self => ({
       /**
        * #getter
        */
       get rendererTypeName() {
         return 'LinearMafRenderer'
       },
+
       /**
        * #getter
        */
@@ -112,12 +153,77 @@ export default function stateModelFactory(
         )
       },
     }))
+
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get root() {
+        return self.tree
+          ? hierarchy(self.tree, d => d.children)
+              // todo: investigate whether needed, typescript says children always true
+              .sum(d => (d.children ? 0 : 1))
+              .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
+          : undefined
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       * generates a new tree that is clustered with x,y positions
+       */
+      get hierarchy(): HierarchyNode<NodeWithIdsAndLength> | undefined {
+        const r = self.root
+        if (r) {
+          const width = self.treeAreaWidth
+          const clust = cluster<NodeWithIds>()
+            .size([this.totalHeight, width])
+            .separation(() => 1)
+          clust(r)
+          setBrLength(r, (r.data.length = 0), width / maxLength(r))
+          return r as HierarchyNode<NodeWithIdsAndLength>
+        } else {
+          return undefined
+        }
+      },
+      /**
+       * #getter
+       */
+      get samples() {
+        return this.rowNames ? normalize(this.rowNames) : self.volatileSamples
+      },
+      /**
+       * #getter
+       */
+      get totalHeight() {
+        return this.samples.length * self.rowHeight
+      },
+      /**
+       * #getter
+       */
+      get leaves() {
+        return self.root?.leaves()
+      },
+      /**
+       * #getter
+       */
+      get rowNames(): string[] | undefined {
+        return this.leaves?.map(n => n.data.name)
+      },
+    }))
     .views(self => {
       const {
         trackMenuItems: superTrackMenuItems,
+
         renderProps: superRenderProps,
       } = self
       return {
+        /**
+         * #getter
+         */
+        get treeWidth() {
+          return self.hierarchy ? self.treeAreaWidth : 0
+        },
         /**
          * #method
          */
@@ -128,6 +234,7 @@ export default function stateModelFactory(
             samples,
             rowHeight,
             rowProportion,
+            mismatchRendering,
           } = self
           return {
             ...superRenderProps(),
@@ -136,6 +243,7 @@ export default function stateModelFactory(
             rowHeight,
             rowProportion,
             showAllLetters,
+            mismatchRendering,
           }
         },
         /**
@@ -149,7 +257,10 @@ export default function stateModelFactory(
               onClick: () => {
                 getSession(self).queueDialog(handleClose => [
                   SetRowHeightDialog,
-                  { model: self, handleClose },
+                  {
+                    model: self,
+                    handleClose,
+                  },
                 ])
               },
             },
@@ -157,14 +268,54 @@ export default function stateModelFactory(
               label: 'Show all letters',
               type: 'checkbox',
               checked: self.showAllLetters,
-              onClick: () => self.setShowAllLetters(!self.showAllLetters),
+              onClick: () => {
+                self.setShowAllLetters(!self.showAllLetters)
+              },
+            },
+            {
+              label: 'Draw mismatches as single color',
+              type: 'checkbox',
+              checked: !self.mismatchRendering,
+              onClick: () => {
+                self.setMismatchRendering(!self.mismatchRendering)
+              },
             },
           ]
         },
       }
     })
+    .actions(self => ({
+      afterCreate() {
+        addDisposer(
+          self,
+          autorun(async () => {
+            try {
+              const { rpcManager } = getSession(self)
+              const sessionId = getRpcSessionId(self)
+
+              const results = (await rpcManager.call(
+                sessionId,
+                'MafGetSamples',
+                {
+                  sessionId,
+                  adapterConfig: self.adapterConfig,
+                  statusCallback: (message: string) => {
+                    if (isAlive(self)) {
+                      self.setMessage(message)
+                    }
+                  },
+                },
+              )) as any
+              self.setSamples(results)
+            } catch (e) {
+              console.error(e)
+              getSession(self).notifyError(`${e}`, e)
+            }
+          }),
+        )
+      },
+    }))
     .actions(self => {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { renderSvg: superRenderSvg } = self
       return {
         /**

package/src/LinearMafDisplay/types.ts

@@ -0,0 +1,41 @@
+import { max } from 'd3-array'
+
+import type { HierarchyNode } from 'd3-hierarchy'
+
+export interface NodeWithIds {
+  id: string
+  name: string
+  children: NodeWithIds[]
+  length?: number
+  noTree?: boolean
+}
+
+export interface NodeWithIdsAndLength {
+  id: string
+  name: string
+  children: NodeWithIdsAndLength[]
+  noTree?: boolean
+  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)
+    })
+  }
+}

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -7,33 +7,21 @@ import {
   featureSpanPx,
   renderToAbstractCanvas,
 } from '@jbrowse/core/util'
-import { Theme } from '@mui/material'
-
-export function getContrastBaseMap(theme: Theme) {
-  return Object.fromEntries(
-    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
-      key,
-      theme.palette.getContrastText(value),
-    ]),
-  )
-}
 
+import { getColorBaseMap, getContrastBaseMap } from './util'
+
+interface Sample {
+  id: string
+  color?: string
+}
 interface RenderArgs extends RenderArgsDeserialized {
-  samples: { id: string; color?: string }[]
+  samples: Sample[]
   rowHeight: number
   rowProportion: number
   showAllLetters: boolean
+  mismatchRendering: boolean
 }
 
-export function getColorBaseMap(theme: Theme) {
-  const { bases } = theme.palette
-  return {
-    a: bases.A.main,
-    c: bases.C.main,
-    g: bases.G.main,
-    t: bases.T.main,
-  }
-}
 function makeImageData({
   ctx,
   renderArgs,
@@ -47,11 +35,12 @@ function makeImageData({
     rowHeight,
     showAllLetters,
     theme: configTheme,
+    mismatchRendering,
     samples,
     rowProportion,
     features,
   } = renderArgs
-  const [region] = regions
+  const region = regions[0]!
   const h = rowHeight * rowProportion
   const theme = createJBrowseTheme(configTheme)
   const colorForBase = getColorBaseMap(theme)
@@ -76,7 +65,7 @@ function makeImageData({
 
       const row = sampleToRowMap.get(sample)
       if (row === undefined) {
-        throw new Error(`unknown sample encountered: ${sample}`)
+        continue
       }
 
       const t = rowHeight * row
@@ -117,27 +106,39 @@ function makeImageData({
       for (let i = 0, o = 0; i < alignment.length; i++) {
         const c = alignment[i]
         if (seq[i] !== '-') {
-          if ((showAllLetters || seq[i] !== c) && c !== '-') {
+          if (c !== '-') {
             const l = leftPx + scale * o
-            ctx.fillStyle =
-              colorForBase[c as keyof typeof colorForBase] ?? 'black'
-            ctx.fillRect(l, offset + t, scale + f, h)
+            if (seq[i] !== c && c !== ' ') {
+              ctx.fillStyle = mismatchRendering
+                ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                : 'orange'
+              ctx.fillRect(l, offset + t, scale + f, h)
+            } else if (showAllLetters) {
+              ctx.fillStyle = mismatchRendering
+                ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                : 'lightblue'
+              ctx.fillRect(l, offset + t, scale + f, h)
+            }
           }
           o++
         }
       }
 
       // font
-      const charSize = { w: 10 }
-      if (scale >= charSize.w) {
+      const charSizeW = 10
+      if (scale >= charSizeW) {
         for (let i = 0, o = 0; i < alignment.length; i++) {
           if (seq[i] !== '-') {
             const l = leftPx + scale * o
-            const offset = (scale - charSize.w) / 2 + 1
-            const c = alignment[i]
+            const offset = (scale - charSizeW) / 2 + 1
+            const c = alignment[i]!
             if ((showAllLetters || seq[i] !== c) && c !== '-') {
-              ctx.fillStyle = contrastForBase[c] ?? 'white'
-              ctx.fillText(origAlignment[i], l + offset, hp2 + t + 3)
+              ctx.fillStyle = mismatchRendering
+                ? (contrastForBase[c] ?? 'white')
+                : 'black'
+              ctx.fillText(origAlignment[i] || '', l + offset, hp2 + t + 3)
             }
             o++
           }
@@ -158,7 +159,7 @@ function makeImageData({
       const alignment = origAlignment.toLowerCase()
       const row = sampleToRowMap.get(sample)
       if (row === undefined) {
-        throw new Error(`unknown sample encountered: ${sample}`)
+        continue
       }
 
       const t = rowHeight * row
@@ -168,7 +169,7 @@ function makeImageData({
       for (let i = 0, o = 0; i < alignment.length; i++) {
         let ins = ''
         while (seq[i] === '-') {
-          if (alignment[i] !== '-') {
+          if (alignment[i] !== '-' && alignment[i] !== ' ') {
             ins += alignment[i]
           }
           i++
@@ -199,18 +200,24 @@ export default class LinearMafRenderer extends FeatureRendererType {
   }
   async render(renderProps: RenderArgs) {
     const { regions, bpPerPx, samples, rowHeight } = renderProps
-    const [region] = regions
-    const height = samples.length * rowHeight + 100
+    const region = regions[0]!
+    const height = samples.length * (rowHeight + 1) + 100
     const width = (region.end - region.start) / bpPerPx
     const features = await this.getFeatures(renderProps)
-    const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
-      makeImageData({
-        ctx,
-        renderArgs: {
-          ...renderProps,
-          features,
-        },
-      }),
+    const res = await renderToAbstractCanvas(
+      width,
+      height,
+      renderProps,
+      ctx => {
+        makeImageData({
+          ctx,
+          renderArgs: {
+            ...renderProps,
+            features,
+          },
+        })
+        return undefined
+      },
     )
     const results = await super.render({
       ...renderProps,

package/src/LinearMafRenderer/components/ReactComponent.tsx

@@ -1,6 +1,7 @@
+import React from 'react'
+
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
-import React from 'react'
 
 const LinearMafRendering = observer(function (props: {
   width: number

package/src/LinearMafRenderer/index.ts

@@ -1,7 +1,8 @@
 import PluginManager from '@jbrowse/core/PluginManager'
-import configSchema from './configSchema'
+
 import LinearMafRenderer from './LinearMafRenderer'
 import ReactComponent from './components/ReactComponent'
+import configSchema from './configSchema'
 
 export default function LinearMafRendererF(pluginManager: PluginManager) {
   pluginManager.addRendererType(

package/src/LinearMafRenderer/util.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@mui/material'
+
+export function getContrastBaseMap(theme: Theme) {
+  return Object.fromEntries(
+    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+      key,
+      theme.palette.getContrastText(value),
+    ]),
+  )
+}
+
+export function getColorBaseMap(theme: Theme) {
+  const { bases } = theme.palette
+  return {
+    a: bases.A.main,
+    c: bases.C.main,
+    g: bases.G.main,
+    t: bases.T.main,
+  }
+}