jbrowse-plugin-mafviewer 1.0.8 → 1.1.2

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
 }
 
 /**
@@ -56,6 +70,16 @@ export default function stateModelFactory(
          * #property
          */
         mismatchRendering: true,
+
+        /**
+         * #property
+         */
+        showBranchLen: false,
+
+        /**
+         * #property
+         */
+        treeAreaWidth: 80,
       }),
     )
     .volatile(() => ({
@@ -63,6 +87,14 @@ export default function stateModelFactory(
        * #volatile
        */
       prefersOffset: true,
+      /**
+       * #volatile
+       */
+      volatileSamples: [] as Sample[],
+      /**
+       * #volatile
+       */
+      tree: undefined as any,
     }))
     .actions(self => ({
       /**
@@ -89,26 +121,22 @@ export default function stateModelFactory(
       setMismatchRendering(f: boolean) {
         self.mismatchRendering = 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
+      setSamples({ samples, tree }: { samples: Sample[]; tree: unknown }) {
+        self.volatileSamples = samples
+        self.tree = tree
       },
-
+    }))
+    .views(self => ({
       /**
        * #getter
        */
       get rendererTypeName() {
         return 'LinearMafRenderer'
       },
+
       /**
        * #getter
        */
@@ -125,14 +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 {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
         trackMenuItems: superTrackMenuItems,
-        // eslint-disable-next-line @typescript-eslint/unbound-method
+
         renderProps: superRenderProps,
       } = self
       return {
+        /**
+         * #getter
+         */
+        get treeWidth() {
+          return self.hierarchy ? self.treeAreaWidth : 0
+        },
         /**
          * #method
          */
@@ -193,8 +284,38 @@ export default function stateModelFactory(
         },
       }
     })
+    .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,6 +7,7 @@ import {
   featureSpanPx,
   renderToAbstractCanvas,
 } from '@jbrowse/core/util'
+
 import { getColorBaseMap, getContrastBaseMap } from './util'
 
 interface Sample {
@@ -39,7 +40,7 @@ function makeImageData({
     rowProportion,
     features,
   } = renderArgs
-  const [region] = regions
+  const region = regions[0]!
   const h = rowHeight * rowProportion
   const theme = createJBrowseTheme(configTheme)
   const colorForBase = getColorBaseMap(theme)
@@ -64,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
@@ -107,7 +108,7 @@ function makeImageData({
         if (seq[i] !== '-') {
           if (c !== '-') {
             const l = leftPx + scale * o
-            if (seq[i] !== c) {
+            if (seq[i] !== c && c !== ' ') {
               ctx.fillStyle = mismatchRendering
                 ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                   (colorForBase[c as keyof typeof colorForBase] ?? 'black')
@@ -132,10 +133,12 @@ function makeImageData({
           if (seq[i] !== '-') {
             const l = leftPx + scale * o
             const offset = (scale - charSizeW) / 2 + 1
-            const c = alignment[i]
+            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++
           }
@@ -156,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
@@ -166,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++
@@ -197,8 +200,8 @@ 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(

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/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -1,4 +1,13 @@
 import React, { useState } from 'react'
+
+import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
+import {
+  FileLocation,
+  getSession,
+  isSessionModelWithWidgets,
+  isSessionWithAddTracks,
+} from '@jbrowse/core/util'
+import { AddTrackModel } from '@jbrowse/plugin-data-management'
 import {
   Button,
   FormControl,
@@ -9,16 +18,8 @@ import {
   RadioGroup,
   TextField,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  FileLocation,
-  getSession,
-  isSessionModelWithWidgets,
-  isSessionWithAddTracks,
-} from '@jbrowse/core/util'
-import { AddTrackModel } from '@jbrowse/plugin-data-management'
-import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
 import { getRoot } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()(theme => ({
   textbox: {
@@ -35,15 +36,24 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+type AdapterTypeOptions =
+  | 'BigMafAdapter'
+  | 'MafTabixAdapter'
+  | 'BgzipTaffyAdapter'
+type IndexTypeOptions = 'TBI' | 'CSI'
+
 export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
   const { classes } = useStyles()
   const [samples, setSamples] = useState('')
   const [loc, setLoc] = useState<FileLocation>()
   const [indexLoc, setIndexLoc] = useState<FileLocation>()
+  const [nhLoc, setNhLoc] = useState<FileLocation>()
   const [error, setError] = useState<unknown>()
   const [trackName, setTrackName] = useState('MAF track')
-  const [fileTypeChoice, setFileTypeChoice] = useState('BigMafAdapter')
-  const [indexTypeChoice, setIndexTypeChoice] = useState('TBI')
+  const [fileTypeChoice, setFileTypeChoice] =
+    useState<AdapterTypeOptions>('BigMafAdapter')
+  const [indexTypeChoice, setIndexTypeChoice] =
+    useState<IndexTypeOptions>('TBI')
 
   const rootModel = getRoot<any>(model)
   return (
@@ -55,21 +65,19 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
           <RadioGroup
             value={fileTypeChoice}
             onChange={event => {
-              setFileTypeChoice(event.target.value)
+              setFileTypeChoice(event.target.value as AdapterTypeOptions)
             }}
           >
-            <FormControlLabel
-              value="BigMafAdapter"
-              control={<Radio />}
-              checked={fileTypeChoice === 'BigMafAdapter'}
-              label="bigMaf"
-            />
-            <FormControlLabel
-              value="MafTabixAdapter"
-              control={<Radio />}
-              checked={fileTypeChoice === 'MafTabixAdapter'}
-              label="mafTabix"
-            />
+            {['BigMafAdapter', 'MafTabixAdapter', 'BgzipTaffyAdapter'].map(
+              r => (
+                <FormControlLabel
+                  value={r}
+                  control={<Radio />}
+                  checked={fileTypeChoice === r}
+                  label={r}
+                />
+              ),
+            )}
           </RadioGroup>
         </FormControl>
         {fileTypeChoice === 'BigMafAdapter' ? (
@@ -81,62 +89,88 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
               setLoc(arg)
             }}
           />
-        ) : (
+        ) : fileTypeChoice === 'MafTabixAdapter' ? (
           <>
             <FormControl>
               <FormLabel>Index type</FormLabel>
               <RadioGroup
                 value={fileTypeChoice}
                 onChange={event => {
-                  setIndexTypeChoice(event.target.value)
+                  setIndexTypeChoice(event.target.value as IndexTypeOptions)
                 }}
               >
-                <FormControlLabel
-                  value="TBI"
-                  control={<Radio />}
-                  checked={indexTypeChoice === 'TBI'}
-                  label="TBI"
-                />
-                <FormControlLabel
-                  value="CSI"
-                  control={<Radio />}
-                  checked={indexTypeChoice === 'CSI'}
-                  label="CSI"
-                />
+                {['TBI', 'CSI'].map(r => (
+                  <FormControlLabel
+                    value={r}
+                    control={<Radio />}
+                    checked={fileTypeChoice === r}
+                    label={r}
+                  />
+                ))}
               </RadioGroup>
             </FormControl>
             <FileSelector
               location={loc}
               name="Path to MAF tabix"
+              rootModel={rootModel}
               setLocation={arg => {
                 setLoc(arg)
               }}
-              rootModel={rootModel}
             />
             <FileSelector
               location={indexLoc}
               name="Path to MAF tabix index"
+              rootModel={rootModel}
               setLocation={arg => {
                 setIndexLoc(arg)
               }}
+            />
+          </>
+        ) : (
+          <>
+            <FileSelector
+              location={loc}
+              name="Path to TAF.gz (Bgzipped TAF)"
+              rootModel={rootModel}
+              setLocation={arg => {
+                setLoc(arg)
+              }}
+            />
+            <FileSelector
+              location={indexLoc}
+              name="Path to TAF.gz.tai (TAF index)"
               rootModel={rootModel}
+              setLocation={arg => {
+                setIndexLoc(arg)
+              }}
             />
           </>
         )}
       </Paper>
-      <TextField
-        multiline
-        rows={10}
-        value={samples}
-        onChange={event => {
-          setSamples(event.target.value)
-        }}
-        placeholder={
-          'Enter sample names from the MAF file, one per line, or JSON formatted array of samples'
-        }
-        variant="outlined"
-        fullWidth
-      />
+      <div>
+        <FileSelector
+          location={nhLoc}
+          name="Path to newick tree (.nh)"
+          rootModel={rootModel}
+          setLocation={arg => {
+            setNhLoc(arg)
+          }}
+        />
+        <TextField
+          multiline
+          rows={10}
+          value={samples}
+          onChange={event => {
+            setSamples(event.target.value)
+          }}
+          helperText="Sample names (optional if .nh supplied, required if not)"
+          placeholder={
+            'Enter sample names from the MAF file, one per line, or JSON formatted array of samples'
+          }
+          variant="outlined"
+          fullWidth
+        />
+      </div>
 
       <TextField
         value={trackName}
@@ -172,19 +206,29 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
                 adapter:
                   fileTypeChoice === 'BigMafAdapter'
                     ? {
-                      type: fileTypeChoice,
-                      bigBedLocation: loc,
-                      samples: sampleNames,
-                    }
-                    : {
-                      type: fileTypeChoice,
-                      bedGzLocation: loc,
-                      index: {
-                        indexType: indexTypeChoice,
-                        location: indexLoc,
-                      },
-                      samples: sampleNames,
-                    },
+                        type: fileTypeChoice,
+                        bigBedLocation: loc,
+                        samples: sampleNames,
+                        nhLocation: nhLoc,
+                      }
+                    : fileTypeChoice === 'MafTabixAdapter'
+                      ? {
+                          type: fileTypeChoice,
+                          bedGzLocation: loc,
+                          nhLocation: nhLoc,
+                          index: {
+                            indexType: indexTypeChoice,
+                            location: indexLoc,
+                          },
+                          samples: sampleNames,
+                        }
+                      : {
+                          type: fileTypeChoice,
+                          tafGzLocation: loc,
+                          taiLocation: indexLoc,
+                          nhLocation: nhLoc,
+                          samples: sampleNames,
+                        },
               })
 
               model.view?.showTrack(trackId)

package/src/MafRPC/index.ts

@@ -0,0 +1,39 @@
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
+import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions'
+
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import type { Region } from '@jbrowse/core/util'
+
+export class MafGetSamples extends RpcMethodTypeWithFiltersAndRenameRegions {
+  name = 'MafGetSamples'
+
+  async execute(
+    args: {
+      adapterConfig: AnyConfigurationModel
+      stopToken?: string
+      sessionId: string
+      headers?: Record<string, string>
+      regions: Region[]
+      bpPerPx: number
+    },
+    rpcDriverClassName: string,
+  ) {
+    const pm = this.pluginManager
+    const deserializedArgs = await this.deserializeArguments(
+      args,
+      rpcDriverClassName,
+    )
+    const { regions, adapterConfig, sessionId } = deserializedArgs
+    const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
+
+    // @ts-expect-error
+    return dataAdapter.getSamples(regions, deserializedArgs)
+  }
+}
+
+export default function MafRPCF(pluginManager: PluginManager) {
+  pluginManager.addRpcMethod(() => {
+    return new MafGetSamples(pluginManager)
+  })
+}