react-msaview 6.0.0 → 6.1.0

package/dist/components/tracks/renderTracksSvg.js

@@ -1,126 +0,0 @@
-import { setFontSize } from '../../setFontSize.js';
-import { visibleColRange } from '../msa/visibleColRange.js';
-export function drawConservationBars({ ctx, values, color, colWidth, trackHeight, offsetX, blockSize, }) {
-    const { xStart, xEnd } = visibleColRange({
-        offsetX,
-        blockWidth: blockSize,
-        colWidth,
-    });
-    ctx.fillStyle = color;
-    for (let i = xStart; i < xEnd && i < values.length; i++) {
-        const value = values[i];
-        const barHeight = value * trackHeight;
-        const x = i * colWidth;
-        ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight);
-    }
-}
-// the bar-track values live on model getters (kept off the plain track object so
-// the live canvas autorun stays reactive); select the right one by track id
-export function barTrackValues(model, trackId) {
-    return trackId === 'property-conservation'
-        ? model.propertyConservation
-        : model.conservation;
-}
-export function drawTextTrackContent({ ctx, data, colorScheme, contrastScheme, bgColor, textColor, colWidth, rowHeight, offsetX, blockSize, }) {
-    const { xStart, xEnd } = visibleColRange({
-        offsetX,
-        blockWidth: blockSize,
-        colWidth,
-    });
-    const str = data?.slice(xStart, xEnd);
-    const drawLetters = rowHeight >= 10 && colWidth >= rowHeight / 2;
-    for (let i = 0; str && i < str.length; i++) {
-        const letter = str[i];
-        const upper = letter.toUpperCase();
-        const color = colorScheme[upper];
-        const x = (xStart + i) * colWidth;
-        const filled = bgColor && !!color;
-        if (filled) {
-            ctx.fillStyle = color;
-            ctx.fillRect(x, 0, colWidth, rowHeight);
-        }
-        if (drawLetters) {
-            // a letter on a colored tile needs the tile's contrast color; otherwise it
-            // sits on the plain background and takes the theme's text color
-            ctx.fillStyle = filled ? (contrastScheme[upper] ?? 'black') : textColor;
-            ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1);
-        }
-    }
-}
-export function renderConservationTrack({ model, ctx, track, offsetX, offsetY, trackHeight, blockSizeXOverride, highResScaleFactorOverride, }) {
-    const { blockSize, colWidth, highResScaleFactor } = model;
-    const bx = blockSizeXOverride ?? blockSize;
-    const k = highResScaleFactorOverride ?? highResScaleFactor;
-    ctx.resetTransform();
-    ctx.scale(k, k);
-    ctx.translate(-offsetX, offsetY);
-    drawConservationBars({
-        ctx,
-        values: barTrackValues(model, track.model.id),
-        color: track.model.barColor ?? 'gray',
-        colWidth,
-        trackHeight,
-        offsetX,
-        blockSize: bx,
-    });
-    ctx.resetTransform();
-}
-export function renderTextTrack({ model, ctx, track, offsetX, offsetY, contrastScheme, theme, blockSizeXOverride, highResScaleFactorOverride, }) {
-    const { blockSize, bgColor, colorScheme: modelColorScheme, colWidth, fontSize, rowHeight, highResScaleFactor, } = model;
-    const { customColorScheme, data } = track.model;
-    const colorScheme = customColorScheme ?? modelColorScheme;
-    const bx = blockSizeXOverride ?? blockSize;
-    const k = highResScaleFactorOverride ?? highResScaleFactor;
-    ctx.resetTransform();
-    ctx.scale(k, k);
-    ctx.translate(-offsetX, offsetY);
-    ctx.textAlign = 'center';
-    setFontSize(ctx, fontSize);
-    drawTextTrackContent({
-        ctx,
-        data,
-        colorScheme,
-        contrastScheme,
-        bgColor,
-        textColor: theme.palette.text.primary,
-        colWidth,
-        rowHeight,
-        offsetX,
-        blockSize: bx,
-    });
-    ctx.resetTransform();
-}
-export function renderAllTracks({ model, ctx, offsetX, contrastScheme, theme, blockSizeXOverride, highResScaleFactorOverride, }) {
-    const { turnedOnTracks } = model;
-    let currentY = 0;
-    for (const track of turnedOnTracks) {
-        const trackHeight = track.model.height;
-        if (track.model.barColor !== undefined) {
-            renderConservationTrack({
-                model,
-                ctx,
-                track,
-                offsetX,
-                offsetY: currentY,
-                trackHeight,
-                blockSizeXOverride,
-                highResScaleFactorOverride,
-            });
-        }
-        else {
-            renderTextTrack({
-                model,
-                ctx,
-                track,
-                offsetX,
-                offsetY: currentY,
-                contrastScheme,
-                theme,
-                blockSizeXOverride,
-                highResScaleFactorOverride,
-            });
-        }
-        currentY += trackHeight;
-    }
-}
-//# sourceMappingURL=renderTracksSvg.js.map

package/dist/components/tracks/renderTracksSvg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderTracksSvg.js","sourceRoot":"","sources":["../../../src/components/tracks/renderTracksSvg.ts"],"names":[],"mappings":"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"}

package/src/components/ConservationTrack.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-
-import { observer } from 'mobx-react'
-
-import { useCanvasAutorun } from '../useCanvasAutorun.ts'
-import { ConservationTrackResizeHandle } from './ResizeHandles.tsx'
-import {
-  barTrackValues,
-  drawConservationBars,
-} from './tracks/renderTracksSvg.ts'
-
-import type { MsaViewModel } from '../model.ts'
-import type { BasicTrack } from '../types.ts'
-
-const ConservationBlock = observer(function ({
-  model,
-  track,
-  offsetX,
-  trackHeight,
-}: {
-  model: MsaViewModel
-  track: BasicTrack
-  offsetX: number
-  trackHeight: number
-}) {
-  const { blockSize, scrollX, highResScaleFactor } = model
-
-  const ref = useCanvasAutorun({
-    draw: ctx => {
-      const { colWidth } = model
-      ctx.resetTransform()
-      ctx.scale(highResScaleFactor, highResScaleFactor)
-      ctx.clearRect(0, 0, blockSize, trackHeight)
-      ctx.translate(-offsetX, 0)
-
-      drawConservationBars({
-        ctx,
-        values: barTrackValues(model, track.model.id),
-        color: track.model.barColor ?? 'gray',
-        colWidth,
-        trackHeight,
-        offsetX,
-        blockSize,
-      })
-    },
-    width: blockSize * highResScaleFactor,
-    height: trackHeight * highResScaleFactor,
-    deps: [model, track, offsetX, trackHeight],
-  })
-
-  return (
-    <canvas
-      ref={ref}
-      height={trackHeight * highResScaleFactor}
-      width={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: trackHeight,
-      }}
-    />
-  )
-})
-
-const ConservationTrack = observer(function ({
-  model,
-  track,
-}: {
-  model: MsaViewModel
-  track: BasicTrack
-}) {
-  const { blocksX, msaAreaWidth } = model
-  const trackHeight = track.model.height
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height: trackHeight,
-        width: msaAreaWidth,
-        overflow: 'hidden',
-      }}
-    >
-      {blocksX.map(bx => (
-        <ConservationBlock
-          key={bx}
-          model={model}
-          track={track}
-          offsetX={bx}
-          trackHeight={trackHeight}
-        />
-      ))}
-      <ConservationTrackResizeHandle model={model} />
-    </div>
-  )
-})
-
-export default ConservationTrack

package/src/components/ScrollbarThumb.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react'
-
-import { useDragScroll } from '../useDragScroll.ts'
-
-export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
-const scrollbarThumbFillHovered = 'rgba(66,119,127,0.6)'
-
-/**
- * The draggable thumb shared by the horizontal Minimap and the
- * VerticalScrollbar. `getStart` is read at mousedown and handed back to
- * `onDrag` alongside the pixel delta since, so a caller only supplies the
- * scroll offset it drives and where the thumb sits.
- */
-export default function ScrollbarThumb({
-  axis,
-  getStart,
-  onDrag,
-  style,
-}: {
-  axis: 'x' | 'y'
-  getStart: () => number
-  onDrag: (delta: number, startValue: number) => void
-  style: React.CSSProperties
-}) {
-  const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(axis, onDrag)
-
-  return (
-    <div
-      onMouseOver={() => {
-        setHovered(true)
-      }}
-      onMouseOut={() => {
-        setHovered(false)
-      }}
-      onMouseDown={event => {
-        startDrag(event, getStart())
-      }}
-      style={{
-        position: 'absolute',
-        zIndex: 100,
-        cursor: 'pointer',
-        background: hovered ? scrollbarThumbFillHovered : scrollbarThumbFill,
-        ...style,
-      }}
-    />
-  )
-}

package/src/components/TextTrack.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-
-import { observer } from 'mobx-react'
-
-import { setFontSize } from '../setFontSize.ts'
-import { useCanvasAutorun } from '../useCanvasAutorun.ts'
-import { useColorContrast } from '../useColorContrast.ts'
-import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
-
-import type { MsaViewModel } from '../model.ts'
-import type { BasicTrack } from '../types.ts'
-
-const AnnotationBlock = observer(function ({
-  track,
-  model,
-  offsetX,
-}: {
-  track: BasicTrack
-  model: MsaViewModel
-  offsetX: number
-}) {
-  const {
-    blockSize,
-    scrollX,
-    colorScheme: modelColorScheme,
-    rowHeight,
-    highResScaleFactor,
-  } = model
-  const {
-    model: { customColorScheme, data },
-  } = track
-
-  const colorScheme = customColorScheme ?? modelColorScheme
-  const { theme, contrastScheme } = useColorContrast(colorScheme)
-  const ref = useCanvasAutorun({
-    draw: ctx => {
-      const { bgColor, colWidth, fontSize } = model
-      ctx.resetTransform()
-      ctx.scale(highResScaleFactor, highResScaleFactor)
-      ctx.clearRect(0, 0, blockSize, rowHeight)
-      ctx.translate(-offsetX, 0)
-      ctx.textAlign = 'center'
-      setFontSize(ctx, fontSize)
-
-      drawTextTrackContent({
-        ctx,
-        data,
-        colorScheme,
-        contrastScheme,
-        bgColor,
-        textColor: theme.palette.text.primary,
-        colWidth,
-        rowHeight,
-        offsetX,
-        blockSize,
-      })
-    },
-    width: blockSize * highResScaleFactor,
-    height: rowHeight * highResScaleFactor,
-    deps: [model, offsetX, theme, contrastScheme, colorScheme, data],
-  })
-  return (
-    <canvas
-      ref={ref}
-      height={rowHeight * highResScaleFactor}
-      width={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: rowHeight,
-      }}
-    />
-  )
-})
-const AnnotationTrack = observer(function ({
-  track,
-  model,
-}: {
-  track: BasicTrack
-  model: MsaViewModel
-}) {
-  const { blocksX, msaAreaWidth, rowHeight } = model
-  if (!track.model.data) {
-    return null
-  }
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height: rowHeight,
-        width: msaAreaWidth,
-        overflow: 'hidden',
-      }}
-    >
-      {blocksX.map(bx => (
-        <AnnotationBlock key={bx} track={track} model={model} offsetX={bx} />
-      ))}
-    </div>
-  )
-})
-
-export default AnnotationTrack

package/src/components/tracks/renderTracksSvg.ts

@@ -1,247 +0,0 @@
-import { setFontSize } from '../../setFontSize.ts'
-import { visibleColRange } from '../msa/visibleColRange.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-import type { BasicTrack } from '../../types.ts'
-import type { RenderCtx } from '../renderCtx.ts'
-import type { Theme } from '@mui/material'
-
-export function drawConservationBars({
-  ctx,
-  values,
-  color,
-  colWidth,
-  trackHeight,
-  offsetX,
-  blockSize,
-}: {
-  ctx: RenderCtx
-  values: number[]
-  color: string
-  colWidth: number
-  trackHeight: number
-  offsetX: number
-  blockSize: number
-}) {
-  const { xStart, xEnd } = visibleColRange({
-    offsetX,
-    blockWidth: blockSize,
-    colWidth,
-  })
-
-  ctx.fillStyle = color
-  for (let i = xStart; i < xEnd && i < values.length; i++) {
-    const value = values[i]!
-    const barHeight = value * trackHeight
-    const x = i * colWidth
-    ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
-  }
-}
-
-// the bar-track values live on model getters (kept off the plain track object so
-// the live canvas autorun stays reactive); select the right one by track id
-export function barTrackValues(model: MsaViewModel, trackId: string) {
-  return trackId === 'property-conservation'
-    ? model.propertyConservation
-    : model.conservation
-}
-
-export function drawTextTrackContent({
-  ctx,
-  data,
-  colorScheme,
-  contrastScheme,
-  bgColor,
-  textColor,
-  colWidth,
-  rowHeight,
-  offsetX,
-  blockSize,
-}: {
-  ctx: RenderCtx
-  data: string | undefined
-  colorScheme: Record<string, string>
-  contrastScheme: Record<string, string>
-  bgColor: boolean
-  textColor: string
-  colWidth: number
-  rowHeight: number
-  offsetX: number
-  blockSize: number
-}) {
-  const { xStart, xEnd } = visibleColRange({
-    offsetX,
-    blockWidth: blockSize,
-    colWidth,
-  })
-  const str = data?.slice(xStart, xEnd)
-  const drawLetters = rowHeight >= 10 && colWidth >= rowHeight / 2
-
-  for (let i = 0; str && i < str.length; i++) {
-    const letter = str[i]!
-    const upper = letter.toUpperCase()
-    const color = colorScheme[upper]
-    const x = (xStart + i) * colWidth
-    const filled = bgColor && !!color
-    if (filled) {
-      ctx.fillStyle = color!
-      ctx.fillRect(x, 0, colWidth, rowHeight)
-    }
-    if (drawLetters) {
-      // a letter on a colored tile needs the tile's contrast color; otherwise it
-      // sits on the plain background and takes the theme's text color
-      ctx.fillStyle = filled ? (contrastScheme[upper] ?? 'black') : textColor
-      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
-    }
-  }
-}
-
-export function renderConservationTrack({
-  model,
-  ctx,
-  track,
-  offsetX,
-  offsetY,
-  trackHeight,
-  blockSizeXOverride,
-  highResScaleFactorOverride,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  track: BasicTrack
-  offsetX: number
-  offsetY: number
-  trackHeight: number
-  blockSizeXOverride?: number
-  highResScaleFactorOverride?: number
-}) {
-  const { blockSize, colWidth, highResScaleFactor } = model
-  const bx = blockSizeXOverride ?? blockSize
-  const k = highResScaleFactorOverride ?? highResScaleFactor
-
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, offsetY)
-
-  drawConservationBars({
-    ctx,
-    values: barTrackValues(model, track.model.id),
-    color: track.model.barColor ?? 'gray',
-    colWidth,
-    trackHeight,
-    offsetX,
-    blockSize: bx,
-  })
-
-  ctx.resetTransform()
-}
-
-export function renderTextTrack({
-  model,
-  ctx,
-  track,
-  offsetX,
-  offsetY,
-  contrastScheme,
-  theme,
-  blockSizeXOverride,
-  highResScaleFactorOverride,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  track: BasicTrack
-  offsetX: number
-  offsetY: number
-  contrastScheme: Record<string, string>
-  theme: Theme
-  blockSizeXOverride?: number
-  highResScaleFactorOverride?: number
-}) {
-  const {
-    blockSize,
-    bgColor,
-    colorScheme: modelColorScheme,
-    colWidth,
-    fontSize,
-    rowHeight,
-    highResScaleFactor,
-  } = model
-
-  const { customColorScheme, data } = track.model
-  const colorScheme = customColorScheme ?? modelColorScheme
-  const bx = blockSizeXOverride ?? blockSize
-  const k = highResScaleFactorOverride ?? highResScaleFactor
-
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, offsetY)
-  ctx.textAlign = 'center'
-  setFontSize(ctx, fontSize)
-
-  drawTextTrackContent({
-    ctx,
-    data,
-    colorScheme,
-    contrastScheme,
-    bgColor,
-    textColor: theme.palette.text.primary,
-    colWidth,
-    rowHeight,
-    offsetX,
-    blockSize: bx,
-  })
-
-  ctx.resetTransform()
-}
-
-export function renderAllTracks({
-  model,
-  ctx,
-  offsetX,
-  contrastScheme,
-  theme,
-  blockSizeXOverride,
-  highResScaleFactorOverride,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  offsetX: number
-  contrastScheme: Record<string, string>
-  theme: Theme
-  blockSizeXOverride?: number
-  highResScaleFactorOverride?: number
-}) {
-  const { turnedOnTracks } = model
-  let currentY = 0
-
-  for (const track of turnedOnTracks) {
-    const trackHeight = track.model.height
-
-    if (track.model.barColor !== undefined) {
-      renderConservationTrack({
-        model,
-        ctx,
-        track,
-        offsetX,
-        offsetY: currentY,
-        trackHeight,
-        blockSizeXOverride,
-        highResScaleFactorOverride,
-      })
-    } else {
-      renderTextTrack({
-        model,
-        ctx,
-        track,
-        offsetX,
-        offsetY: currentY,
-        contrastScheme,
-        theme,
-        blockSizeXOverride,
-        highResScaleFactorOverride,
-      })
-    }
-
-    currentY += trackHeight
-  }
-}