react-msaview 6.5.0 → 8.0.0

package/src/components/dialogs/InterProScanDialog.tsx

@@ -1,214 +0,0 @@
-import React, { useState } from 'react'
-
-import { Dialog } from '@jbrowse/core/ui'
-import { getSession } from '@jbrowse/core/util'
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
-import { observer } from 'mobx-react'
-import { getUngappedSequence } from 'msa-parsers'
-
-import { launchInterProScan } from '../../launchInterProScan.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const FAMILIES = 'Families, domains, sites & repeats'
-const FEATURES = 'Other sequence features'
-const STRUCTURAL = 'Structural domains'
-const OTHER = 'Other category'
-
-// The analyses the EBI iprscan5 endpoint accepts, all on by default. Static, so
-// it lives out here rather than being rebuilt on every render of the dialog.
-const interProScanPrograms = [
-  {
-    name: 'NCBIfam',
-    category: FAMILIES,
-    description: 'NCBI RefSeq FAMs including TIGRFAMs',
-  },
-  {
-    name: 'SFLD',
-    category: FAMILIES,
-    description: 'Structure function linkage database',
-  },
-  {
-    name: 'Phobius',
-    category: FEATURES,
-    description:
-      'A combined transmembrane topology and signal peptide predictor',
-  },
-  { name: 'SignalP', category: FEATURES },
-  { name: 'SignalP_EUK', category: OTHER },
-  { name: 'SignalP_GRAM_POSITIVE', category: OTHER },
-  { name: 'SignalP_GRAM_NEGATIVE', category: OTHER },
-  { name: 'SuperFamily', category: STRUCTURAL },
-  { name: 'Panther', category: FAMILIES },
-  { name: 'Gene3d', category: STRUCTURAL },
-  { name: 'HAMAP', category: FAMILIES },
-  { name: 'PrositeProfiles', category: FAMILIES },
-  { name: 'PrositePatterns', category: FAMILIES },
-  { name: 'Coils', category: FEATURES },
-  { name: 'SMART', category: FAMILIES },
-  {
-    name: 'CDD',
-    category: FAMILIES,
-    description: 'Conserved Domains Database',
-  },
-  { name: 'PRINTS', category: FAMILIES },
-  { name: 'PfamA', category: FAMILIES },
-  { name: 'MobiDBLite', category: FEATURES },
-  { name: 'PIRSF', category: OTHER },
-  { name: 'TMHMM', category: FEATURES },
-  { name: 'AntiFam', category: OTHER },
-  { name: 'FunFam', category: OTHER },
-  { name: 'PIRSR', category: FAMILIES },
-].map(program => ({ ...program, checked: true }))
-
-const InterProScanDialog = observer(function ({
-  handleClose,
-  model,
-}: {
-  handleClose: () => void
-  model: MsaViewModel
-}) {
-  const [vals, setVals] = useState(interProScanPrograms)
-
-  const programs = vals.filter(e => e.checked).map(e => e.name)
-  const [show, setShow] = useState(false)
-
-  return (
-    <Dialog
-      maxWidth="xl"
-      title="Query InterProScan API for domains"
-      onClose={() => {
-        handleClose()
-      }}
-      open
-    >
-      <DialogContent>
-        <Typography>
-          This will run InterProScan via the InterProScan API on all rows of the
-          current MSA
-        </Typography>
-        <Button
-          onClick={() => {
-            setShow(!show)
-          }}
-        >
-          {show ? 'Hide' : 'Show'} advanced options
-        </Button>
-        {show ? (
-          <div>
-            <Typography>Select algorithms for InterProScan to run</Typography>
-            <div>
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={() => {
-                  setVals(vals.map(v => ({ ...v, checked: false })))
-                }}
-              >
-                Select none
-              </Button>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  setVals(vals.map(v => ({ ...v, checked: true })))
-                }}
-              >
-                Select all
-              </Button>
-            </div>
-            <table>
-              <tbody>
-                {vals
-                  .toSorted((a, b) => a.category.localeCompare(b.category))
-                  .map(({ name, checked, category, description }) => (
-                    <tr key={name}>
-                      <td>
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          onChange={() => {
-                            setVals(
-                              vals.map(e =>
-                                e.name === name
-                                  ? { ...e, checked: !e.checked }
-                                  : e,
-                              ),
-                            )
-                          }}
-                        />
-                      </td>
-                      <td title={description}>{name}</td>
-                      <td>{category}</td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
-        ) : null}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => {
-            handleClose()
-          }}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            const controller = new AbortController()
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                const { rows } = model
-                if (rows.length > 140) {
-                  throw new Error(
-                    'Too many sequences, please run InterProScan offline',
-                  )
-                }
-                await launchInterProScan({
-                  algorithm: 'interproscan',
-                  programs: programs,
-                  seq: rows
-                    .map(row => [row[0], getUngappedSequence(row[1])])
-                    .filter(f => !!f[1])
-                    .map(row => `>${row[0]}\n${row[1]}`)
-                    .join('\n'),
-                  onProgress: arg => {
-                    model.setStatus(
-                      arg
-                        ? {
-                            ...arg,
-                            onCancel: () => {
-                              controller.abort()
-                            },
-                          }
-                        : undefined,
-                    )
-                  },
-                  model,
-                  signal: controller.signal,
-                })
-              } catch (e) {
-                console.error(e)
-                getSession(model).notifyError(`${e}`, e)
-              } finally {
-                model.setStatus()
-              }
-            })()
-            handleClose()
-          }}
-        >
-          Send sequences to InterProScan
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-})
-
-export default InterProScanDialog

package/src/components/dialogs/InterProScanFileDialog.tsx

@@ -1,138 +0,0 @@
-import React, { useState } from 'react'
-
-import { Dialog } from '@jbrowse/core/ui'
-import { getSession } from '@jbrowse/core/util'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  FormControl,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { interProScanResponseToAnnotations } from 'msa-parsers'
-
-import { jsonfetch } from '../../fetchUtils.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-import type { InterProScanResponse } from 'msa-parsers'
-
-const InterProScanFileDialog = observer(function ({
-  handleClose,
-  model,
-}: {
-  handleClose: () => void
-  model: MsaViewModel
-}) {
-  const [file, setFile] = useState<File>()
-  const [choice, setChoice] = useState('file')
-  const [interProURL, setInterProURL] = useState('')
-
-  return (
-    <Dialog
-      maxWidth="xl"
-      title="Open InterProScan results"
-      onClose={() => {
-        handleClose()
-      }}
-      open
-    >
-      <DialogContent>
-        <div>
-          <Typography>
-            Open a JSON file of InterProScan results that you run remotely on
-            EBI servers or locally
-          </Typography>
-
-          <div style={{ display: 'flex', margin: 30 }}>
-            <FormControl component="fieldset">
-              <RadioGroup
-                value={choice}
-                onChange={event => {
-                  setChoice(event.target.value)
-                }}
-              >
-                <FormControlLabel value="url" control={<Radio />} label="URL" />
-                <FormControlLabel
-                  value="file"
-                  control={<Radio />}
-                  label="File"
-                />
-              </RadioGroup>
-            </FormControl>
-            {choice === 'url' ? (
-              <div>
-                <Typography>
-                  Open a InterProScan JSON file remote URL
-                </Typography>
-                <TextField
-                  label="URL"
-                  value={interProURL}
-                  onChange={event => {
-                    setInterProURL(event.target.value)
-                  }}
-                />
-              </div>
-            ) : null}
-            {choice === 'file' ? (
-              <div style={{ paddingTop: 20 }}>
-                <Typography>
-                  Open a InterProScan JSON file file from your local drive
-                </Typography>
-                <Button variant="outlined" component="label">
-                  Choose File
-                  <input
-                    type="file"
-                    hidden
-                    onChange={({ target }) => {
-                      const file = target.files?.[0]
-                      if (file) {
-                        setFile(file)
-                      }
-                    }}
-                  />
-                </Button>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                const ret: InterProScanResponse = file
-                  ? JSON.parse(await file.text())
-                  : await jsonfetch(interProURL)
-
-                model.setAnnotations(interProScanResponseToAnnotations(ret))
-                getSession(model).notify(
-                  'Loaded interproscan results',
-                  'success',
-                )
-              } catch (e) {
-                console.error(e)
-                getSession(model).notifyError(`${e}`, e)
-              } finally {
-                model.setStatus()
-              }
-            })()
-            handleClose()
-          }}
-        >
-          Open results
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-})
-
-export default InterProScanFileDialog

package/src/components/minimap/minimapLayout.test.ts

@@ -1,71 +0,0 @@
-// @vitest-environment jsdom
-import { expect, test } from 'vitest'
-
-import MSAModelF from '../../model.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
-
-// wide enough to overflow horizontally, tall enough to raise the vertical
-// scrollbar — which takes 20px out of the width the alignment actually draws on
-function makeModel() {
-  const names = Array.from({ length: 60 }, (_, i) => `s${i}`)
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    height: 400,
-    data: { msa: names.map(n => `>${n}\n${'ACGT'.repeat(50)}`).join('\n') },
-  })
-  model.setWidth(1000)
-  return model
-}
-
-test('the viewport rectangle scales by the canvas width, not the msa area', () => {
-  const model = makeModel()
-  expect(model.showVerticalScrollbar).toBe(true)
-  expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
-
-  const { unit, s, w } = getMinimapLayout(model)
-  expect(unit).toBeCloseTo(model.msaCanvasWidth / model.totalWidth)
-  // unscrolled, the rectangle starts at the left edge and covers the fraction
-  // of the alignment on screen. Sizing it by msaAreaWidth instead overstated
-  // that fraction by the scrollbar's width.
-  expect(s).toBeCloseTo(0)
-  expect(w).toBeCloseTo(
-    (model.msaCanvasWidth / model.totalWidth) * model.msaCanvasWidth,
-  )
-})
-
-test('the rectangle tracks scrollX and the trapezoid spans the bar', () => {
-  const model = makeModel()
-  model.setScrollX(-300)
-
-  const { msaCanvasWidth: width } = model
-  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model)
-  expect(s).toBeCloseTo((300 / model.totalWidth) * width)
-  expect(polygonHeight).toBe(model.minimapHeight - MINIMAP_BAR_HEIGHT)
-  // bottom edge spans the full minimap, top edge is the viewport rectangle
-  expect(
-    polygonPoints.endsWith(`0,${polygonHeight} ${width},${polygonHeight}`),
-  ).toBe(true)
-})
-
-test('an alignment that already fits never overflows the bar', () => {
-  const model = MSAModelF().create({
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    data: { msa: '>a\nACGT\n>b\nACGT' },
-  })
-  model.setWidth(1000)
-  expect(model.totalWidth).toBeLessThan(model.msaCanvasWidth)
-  expect(getMinimapLayout(model).w).toBe(model.msaCanvasWidth)
-})
-
-test('an empty alignment collapses to a zero-width unit instead of dividing by zero', () => {
-  const model = MSAModelF().create({ type: 'MsaView' })
-  model.setWidth(1000)
-  expect(model.totalWidth).toBe(0)
-  const { unit, s, w } = getMinimapLayout(model)
-  expect(unit).toBe(0)
-  expect(s).toBeCloseTo(0)
-  // still clamped to the minimum grabbable width
-  expect(w).toBe(20)
-})

package/src/components/msa/ColumnStats.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const pct = (n: number) => `${Math.round(n * 100)}%`
-
-const ColumnStats = observer(function ({ model }: { model: MsaViewModel }) {
-  const stats = model.mouseOverColumnStats
-  if (!stats) {
-    return null
-  }
-  const {
-    col,
-    total,
-    conservation,
-    propertyConservation,
-    consensusLetter,
-    consensusFraction,
-    gapFraction,
-    distribution,
-  } = stats
-  const top = distribution.slice(0, 6)
-  return (
-    <div>
-      <b>Column {col + 1}</b> ({total} seqs)
-      <br />
-      Consensus: {consensusLetter || '-'} ({pct(consensusFraction)})
-      <br />
-      Conservation: {conservation.toFixed(2)}
-      {propertyConservation === undefined ? null : (
-        <>
-          <br />
-          Property conservation: {propertyConservation.toFixed(2)}
-        </>
-      )}
-      <br />
-      Gaps: {pct(gapFraction)}
-      {top.length > 0 ? (
-        <>
-          <br />
-          {top.map(([letter, count]) => (
-            <span key={letter} style={{ marginRight: 8 }}>
-              {letter} {pct(count / total)}
-            </span>
-          ))}
-        </>
-      ) : null}
-    </div>
-  )
-})
-
-export default ColumnStats

package/src/components/msa/msaRaster.test.ts

@@ -1,145 +0,0 @@
-// @vitest-environment jsdom
-import { beforeAll, expect, test } from 'vitest'
-
-import MSAModelF from '../../model.ts'
-import { drawMsaRaster, rasterPixels } from './msaRaster.ts'
-
-import type { RasterSpec } from './msaRaster.ts'
-
-// the stub context resolves a color by parsing '#rrggbb', so every color the
-// raster asks about in this file is written that way
-function hexBytes(css: string) {
-  const hex = css.replace('#', '')
-  return [
-    Number.parseInt(hex.slice(0, 2), 16),
-    Number.parseInt(hex.slice(2, 4), 16),
-    Number.parseInt(hex.slice(4, 6), 16),
-    255,
-  ]
-}
-
-const drawn: unknown[] = []
-
-beforeAll(() => {
-  HTMLCanvasElement.prototype.getContext = function () {
-    let fillStyle = '#000000'
-    return {
-      get fillStyle() {
-        return fillStyle
-      },
-      set fillStyle(v: string) {
-        fillStyle = v
-      },
-      imageSmoothingEnabled: true,
-      font: '10px sans-serif',
-      measureText: (t: string) => ({ width: t.length * 6 }),
-      clearRect: () => {},
-      fillRect: () => {},
-      resetTransform: () => {},
-      scale: () => {},
-      translate: () => {},
-      getImageData: () => ({
-        data: Uint8ClampedArray.from(hexBytes(fillStyle)),
-      }),
-      createImageData: (width: number, height: number) => ({
-        data: new Uint8ClampedArray(width * height * 4),
-        width,
-        height,
-      }),
-      putImageData: () => {},
-      drawImage: (image: unknown) => {
-        drawn.push(image)
-      },
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
-})
-
-const spec: RasterSpec = {
-  rowNames: ['a', 'b', 'c'],
-  columns: new Map([
-    ['a', 'MKL'],
-    ['b', 'MKL'],
-    ['c', 'MK'],
-  ]),
-  relativeTo: 'a',
-  colorAt: (_col, letter) => (letter === 'M' ? '#ff0000' : undefined),
-  bg: '#000000',
-  hover: '#00ff00',
-}
-
-const ids: Record<string, number> = { '#ff0000': 1, '#000000': 2, '#00ff00': 3 }
-const toPixel = (css: string) => ids[css]!
-
-test('one pixel per cell, reference matches and short rows', () => {
-  const px = rasterPixels({
-    spec,
-    col0: 0,
-    row0: 0,
-    width: 3,
-    height: 4,
-    toPixel,
-  })
-
-  // the reference row itself keeps its scheme colors
-  expect([...px.slice(0, 3)]).toEqual([1, 2, 2])
-  // every cell of an identical row reads as a match
-  expect([...px.slice(3, 6)]).toEqual([3, 3, 3])
-  // past the end of a short row, and past the last row, stays transparent
-  expect([...px.slice(6, 9)]).toEqual([3, 3, 0])
-  expect([...px.slice(9, 12)]).toEqual([0, 0, 0])
-})
-
-test('sampling steps over columns and rows', () => {
-  const px = rasterPixels({
-    spec,
-    col0: 0,
-    row0: 0,
-    width: 2,
-    height: 2,
-    colStep: 2,
-    rowStep: 2,
-    toPixel,
-  })
-  // the second sampled column falls past the end of the short row 'c'
-  expect([...px]).toEqual([1, 2, 3, 0])
-})
-
-function make() {
-  const model = MSAModelF().create({
-    id: 'raster',
-    type: 'MsaView',
-    msaFormat: 'fasta',
-    data: { msa: '>a\nMKLVIL\n>b\nMRLVIL\n>c\nMKLAIL' },
-  })
-  model.setWidth(1000)
-  return model
-}
-
-function tilesFor(model: ReturnType<typeof make>) {
-  drawn.length = 0
-  const ctx = document.createElement('canvas').getContext('2d')!
-  drawMsaRaster({ ctx, model, theme: theme(), offsetX: 0, offsetY: 0 })
-  return [...drawn]
-}
-
-// only the two palette entries the raster reads
-const theme = () =>
-  ({
-    palette: {
-      action: { hover: '#00ff00' },
-      background: { default: '#ffffff' },
-    },
-  }) as never
-
-test('a zoom reuses the tiles, a recolor rebuilds them', () => {
-  const model = make()
-  const tile = tilesFor(model)[0]
-  expect(tile).toBeDefined()
-
-  model.setColWidth(3)
-  model.setRowHeight(2)
-  expect(tilesFor(model)[0]).toBe(tile)
-
-  model.setColorSchemeName('clustalx_protein_dynamic')
-  expect(tilesFor(model)[0]).not.toBe(tile)
-})

package/src/components/msa/renderBoxFeatureCanvasBlock.test.ts

@@ -1,51 +0,0 @@
-import { expect, test } from 'vitest'
-
-import stateModelFactory from '../../model.ts'
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
-
-import type { RenderCtx } from '../renderCtx.ts'
-
-const row = 'ACDEFGHIKLMNPQRSTVWY'.repeat(3)
-
-// only `human` carries the gene model; `mouse` is there to push it off the top
-// of the block
-const msa = `>mouse\n${row}\n>human\n${row}`
-
-const gff = `##gff-version 3
-human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
-human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
-human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3`
-
-function drawnLabels() {
-  const model = stateModelFactory().create({
-    type: 'MsaView',
-    data: { msa },
-  })
-  model.setWidth(1000)
-  model.setRowHeight(20)
-  // segment numbers are drawn in place of residue letters, never on top of them
-  model.setDrawMsaLetters(false)
-  model.applyGFFText(gff)
-  expect(model.rowNames).toEqual(['mouse', 'human'])
-
-  const labels: string[] = []
-  const ctx = {
-    font: '12px sans-serif',
-    resetTransform() {},
-    scale() {},
-    translate() {},
-    fillRect() {},
-    strokeRect() {},
-    measureText: (text: string) => ({ width: text.length * 6 }),
-    fillText(text: string) {
-      labels.push(text)
-    },
-  } as unknown as RenderCtx
-
-  renderBoxFeatureCanvasBlock({ model, ctx, offsetX: 0, offsetY: 0 })
-  return labels
-}
-
-test('segment numbers are drawn once each, even when row 0 has no gene model', () => {
-  expect(drawnLabels()).toEqual(['1', '2', '3'])
-})