jbrowse-plugin-mafviewer 1.0.8 → 1.1.1

package/src/BigMafAdapter/BigMafAdapter.ts

@@ -1,7 +1,7 @@
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
-import { getSnapshot } from 'mobx-state-tree'
 import { Feature, Region, SimpleFeature } from '@jbrowse/core/util'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
+import { getSnapshot } from 'mobx-state-tree'
 import { firstValueFrom, toArray } from 'rxjs'
 
 interface OrganismRecord {
@@ -63,30 +63,30 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
         for (const block of blocks) {
           if (block.startsWith('s')) {
             if (aln) {
-              alns.push(block.split(/ +/)[6])
+              alns.push(block.split(/ +/)[6]!)
               blocks2.push(block)
             } else {
               aln = block.split(/ +/)[6]
-              alns.push(aln)
+              alns.push(aln!)
               blocks2.push(block)
             }
           }
         }
 
         for (let i = 0; i < blocks2.length; i++) {
-          const elt = blocks2[i]
+          const elt = blocks2[i]!
           const ad = elt.split(/ +/)
-          const y = ad[1].split('.')
-          const org = y[0]
-          const chr = y[1]
+          const y = ad[1]!.split('.')
+          const org = y[0]!
+          const chr = y[1]!
 
           alignments[org] = {
             chr: chr,
-            start: +ad[1],
-            srcSize: +ad[2],
+            start: +ad[1]!,
+            srcSize: +ad[2]!,
             strand: ad[3] === '+' ? 1 : -1,
-            unknown: +ad[4],
-            data: alns[i],
+            unknown: +ad[4]!,
+            data: alns[i]!,
           }
         }
         observer.next(

package/src/BigMafAdapter/configSchema.ts

@@ -27,6 +27,17 @@ const configSchema = ConfigurationSchema(
         locationType: 'UriLocation',
       },
     },
+    /**
+     * #slot
+     */
+    nhLocation: {
+      type: 'fileLocation',
+      description: 'newick tree',
+      defaultValue: {
+        uri: '/path/to/my.nh',
+        locationType: 'UriLocation',
+      },
+    },
   },
   { explicitlyTyped: true },
 )

package/src/BigMafAdapter/index.ts

@@ -1,7 +1,8 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { AdapterType } from '@jbrowse/core/pluggableElementTypes'
-import configSchema from './configSchema'
+
 import BigMafAdapter from './BigMafAdapter'
+import configSchema from './configSchema'
 
 export default function BigMafAdapterF(pluginManager: PluginManager) {
   return pluginManager.addAdapterType(

package/src/LinearMafDisplay/components/ColorLegend.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
+
 import { observer } from 'mobx-react'
 
 // locals
 import { LinearMafDisplayModel } from '../stateModel'
 import RectBg from './RectBg'
+import Tree from './Tree'
 
 const ColorLegend = observer(function ({
   model,
@@ -14,35 +16,44 @@ const ColorLegend = observer(function ({
   svgFontSize: number
   labelWidth: number
 }) {
-  const { samples, rowHeight } = model
-  const canDisplayLabel = rowHeight >= 10
+  const { totalHeight, treeWidth, samples, rowHeight } = model
+  const canDisplayLabel = rowHeight >= 8
   const boxHeight = Math.min(20, rowHeight)
 
   return (
     <>
-      {samples.map((sample, idx) => (
-        <RectBg
-          key={`${sample.id}-${idx}`}
-          y={idx * rowHeight}
-          x={0}
-          width={labelWidth + 5}
-          height={boxHeight}
-          color={sample.color}
-        />
-      ))}
-      {canDisplayLabel
-        ? samples.map((sample, idx) => (
-            <text
-              key={`${sample.id}-${idx}`}
-              y={idx * rowHeight + rowHeight / 2}
-              dominantBaseline="middle"
-              x={2}
-              fontSize={svgFontSize}
-            >
-              {sample.label}
-            </text>
-          ))
-        : null}
+      <RectBg
+        y={0}
+        x={0}
+        width={labelWidth + 5 + treeWidth}
+        height={totalHeight}
+      />
+      <Tree model={model} />
+      <g transform={`translate(${treeWidth + 5},0)`}>
+        {samples.map((sample, idx) => (
+          <RectBg
+            key={`${sample.id}-${idx}`}
+            y={idx * rowHeight}
+            x={0}
+            width={labelWidth + 5}
+            height={boxHeight}
+            color={sample.color}
+          />
+        ))}
+        {canDisplayLabel
+          ? samples.map((sample, idx) => (
+              <text
+                key={`${sample.id}-${idx}`}
+                y={idx * rowHeight + rowHeight / 2}
+                dominantBaseline="middle"
+                x={2}
+                fontSize={svgFontSize}
+              >
+                {sample.label}
+              </text>
+            ))
+          : null}
+      </g>
     </>
   )
 })

package/src/LinearMafDisplay/components/ReactComponent.tsx

@@ -1,24 +1,89 @@
-import React from 'react'
-import { getEnv } from '@jbrowse/core/util'
+import React, { useRef, useState } from 'react'
+
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
+import { getContainingView, getEnv } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
 import YScaleBars from './YScaleBars'
 import { LinearMafDisplayModel } from '../stateModel'
 
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  cursor: {
+    pointerEvents: 'none',
+  },
+})
+
 const LinearMafDisplay = observer(function (props: {
   model: LinearMafDisplayModel
 }) {
   const { model } = props
+  const { classes } = useStyles()
   const { pluginManager } = getEnv(model)
+  const { rowHeight, height, scrollTop, samples: sources } = model
+  const ref = useRef<HTMLDivElement>(null)
 
   const LinearGenomePlugin = pluginManager.getPlugin(
     'LinearGenomeViewPlugin',
   ) as import('@jbrowse/plugin-linear-genome-view').default
   const { BaseLinearDisplayComponent } = LinearGenomePlugin.exports
 
+  const [mouseY, setMouseY] = useState<number>()
+  const [mouseX, setMouseX] = useState<number>()
+  const { width } = getContainingView(model) as LinearGenomeViewModel
+
   return (
-    <div>
+    <div
+      ref={ref}
+      onMouseMove={event => {
+        const rect = ref.current?.getBoundingClientRect()
+        const top = rect?.top || 0
+        const left = rect?.left || 0
+        setMouseY(event.clientY - top)
+        setMouseX(event.clientX - left)
+      }}
+      onMouseLeave={() => {
+        setMouseY(undefined)
+        setMouseX(undefined)
+      }}
+    >
       <BaseLinearDisplayComponent {...props} />
       <YScaleBars model={model} />
+      {mouseY ? (
+        <div style={{ position: 'relative' }}>
+          <svg
+            className={classes.cursor}
+            width={width}
+            height={height}
+            style={{
+              position: 'absolute',
+              top: scrollTop,
+            }}
+          >
+            <line
+              x1={0}
+              x2={width}
+              y1={mouseY - scrollTop}
+              y2={mouseY - scrollTop}
+              stroke="black"
+            />
+            <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
+          </svg>
+          <BaseTooltip>
+            <SanitizedHTML
+              html={Object.entries(
+                sources[Math.floor(mouseY / rowHeight)] || {},
+              )
+                .filter(([key]) => key !== 'color' && key !== 'id')
+                .map(([key, value]) => `${key}:${value}`)
+                .join('\n')}
+            />
+          </BaseTooltip>
+        </div>
+      ) : null}
     </div>
   )
 })

package/src/LinearMafDisplay/components/SetRowHeight.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { observer } from 'mobx-react'
+
+import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
   DialogActions,
@@ -7,7 +8,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()({
@@ -31,7 +32,7 @@ const SetRowHeightDialog = observer(function (props: {
   const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`)
 
   return (
-    <Dialog open onClose={handleClose} title="Filter options">
+    <Dialog open onClose={handleClose} title="Set row height">
       <DialogContent className={classes.root}>
         <Typography>
           Set row height and the proportion of the row height to use for drawing
@@ -39,17 +40,17 @@ const SetRowHeightDialog = observer(function (props: {
         </Typography>
         <TextField
           value={rowHeight}
+          helperText="Enter row height"
           onChange={event => {
             setRowHeight(event.target.value)
           }}
-          placeholder="Enter row height"
         />
         <TextField
           value={rowProportion}
+          helperText="Enter row proportion"
           onChange={event => {
             setRowProportion(event.target.value)
           }}
-          placeholder="Enter row proportion"
         />
         <DialogActions>
           <Button

package/src/LinearMafDisplay/components/SvgWrapper.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { getContainingView } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+
+// locals
+import { LinearMafDisplayModel } from '../stateModel'
+
+const SvgWrapper = observer(function ({
+  children,
+  model,
+  exportSVG,
+}: {
+  model: LinearMafDisplayModel
+  children: React.ReactNode
+  exportSVG?: boolean
+}) {
+  if (exportSVG) {
+    return <>{children}</>
+  } else {
+    const { rowHeight, samples } = model
+    return (
+      <svg
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          pointerEvents: 'none',
+          height: samples.length * rowHeight,
+          width: getContainingView(model).width,
+        }}
+      >
+        {children}
+      </svg>
+    )
+  }
+})
+
+export default SvgWrapper

package/src/LinearMafDisplay/components/Tree.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+const Tree = observer(function ({ model }: { model: any }) {
+  const { hierarchy, showBranchLen } = model
+
+  return (
+    <>
+      {hierarchy
+        ? [...hierarchy.links()].map(link => {
+            const { source, target } = link
+            const sy = source.x!
+            const ty = target.x!
+            const tx = showBranchLen ? target.len : target.y
+            const sx = showBranchLen ? source.len : source.y
+
+            // 1d line intersection to check if line crosses block at all, this is
+            // an optimization that allows us to skip drawing most tree links
+            // outside the block
+            return (
+              <React.Fragment key={[sy, ty, tx, sx].join('-')}>
+                <line stroke="black" x1={sx} y1={sy} x2={sx} y2={ty} />
+                <line stroke="black" x1={sx} y1={ty} x2={tx} y2={ty} />
+              </React.Fragment>
+            )
+          })
+        : null}
+    </>
+  )
+})
+
+export default Tree

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -1,48 +1,13 @@
 import React from 'react'
-import { measureText, getContainingView } from '@jbrowse/core/util'
+
+import { measureText } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
 // locals
 import { LinearMafDisplayModel } from '../stateModel'
 import ColorLegend from './ColorLegend'
-
-const Wrapper = observer(function ({
-  children,
-  model,
-  exportSVG,
-}: {
-  model: LinearMafDisplayModel
-  children: React.ReactNode
-  exportSVG?: boolean
-}) {
-  if (exportSVG) {
-    return <>{children}</>
-  } else {
-    const { rowHeight, samples } = model
-    return (
-      <svg
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          pointerEvents: 'none',
-          height: samples.length * rowHeight,
-          width: getContainingView(model).width,
-        }}
-      >
-        {children}
-      </svg>
-    )
-  }
-})
-
-export function max(arr: number[], init = Number.NEGATIVE_INFINITY) {
-  let max = init
-  for (const entry of arr) {
-    max = Math.max(entry, max)
-  }
-  return max
-}
+import SvgWrapper from './SvgWrapper'
+import { max } from './util'
 
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel
@@ -51,8 +16,8 @@ export const YScaleBars = observer(function (props: {
 }) {
   const { model } = props
   const { rowHeight, samples } = model
-  const svgFontSize = Math.min(Math.max(rowHeight, 10), 14)
-  const canDisplayLabel = rowHeight >= 10
+  const svgFontSize = Math.min(Math.max(rowHeight, 8), 14)
+  const canDisplayLabel = rowHeight >= 8
   const minWidth = 20
 
   const labelWidth = max(
@@ -62,13 +27,13 @@ export const YScaleBars = observer(function (props: {
   )
 
   return (
-    <Wrapper {...props}>
+    <SvgWrapper {...props}>
       <ColorLegend
         model={model}
         labelWidth={labelWidth}
         svgFontSize={svgFontSize}
       />
-    </Wrapper>
+    </SvgWrapper>
   )
 })
 

package/src/LinearMafDisplay/components/util.ts

@@ -0,0 +1,7 @@
+export function max(arr: number[], init = Number.NEGATIVE_INFINITY) {
+  let max = init
+  for (const entry of arr) {
+    max = Math.max(entry, max)
+  }
+  return max
+}

package/src/LinearMafDisplay/index.ts

@@ -1,8 +1,9 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+
+import ReactComponent from './components/ReactComponent'
 import configSchemaF from './configSchema'
 import stateModelFactory from './stateModel'
-import ReactComponent from './components/ReactComponent'
 
 export default function LinearMafDisplayF(pluginManager: PluginManager) {
   pluginManager.addDisplayType(() => {

package/src/LinearMafDisplay/renderSvg.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { getContainingView } from '@jbrowse/core/util'
 import {
   ExportSvgDisplayOptions,
@@ -6,8 +7,8 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 
 // locals
-import { LinearMafDisplayModel } from './stateModel'
 import YScaleBars from './components/YScaleBars'
+import { LinearMafDisplayModel } from './stateModel'
 
 export async function renderSvg(
   self: LinearMafDisplayModel,