react-msaview 4.4.5 → 4.5.0

package/src/renderToSvg.tsx

@@ -7,6 +7,7 @@ import { when } from 'mobx'
 import MinimapSVG from './components/minimap/MinimapSVG'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
 import { renderMSABlock } from './components/msa/renderMSABlock'
+import { renderAllTracks } from './components/tracks/renderTracksSvg'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
 import { colorContrast } from './util'
 
@@ -16,33 +17,41 @@ import type { Theme } from '@mui/material'
 export interface ExportSvgOptions {
   theme: Theme
   includeMinimap?: boolean
+  includeTracks?: boolean
   exportType: string
 }
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
   await when(() => !!model.dataInitialized)
-  const { width, height, scrollX, scrollY } = model
-  const { exportType, theme, includeMinimap } = opts
+  const { width, height, scrollX, scrollY, totalTrackAreaHeight } = model
+  const { exportType, theme, includeMinimap, includeTracks } = opts
+  const trackHeight = includeTracks ? totalTrackAreaHeight : 0
 
   if (exportType === 'entire') {
     return render({
       width: model.totalWidth + model.treeAreaWidth,
-      height: model.totalHeight,
+      height: model.totalHeight + trackHeight,
+      contentHeight: model.totalHeight,
+      trackHeight,
       theme,
       model,
       offsetY: 0,
       offsetX: 0,
       includeMinimap,
+      includeTracks,
     })
   }
   if (exportType === 'viewport') {
     return render({
       width,
-      height,
+      height: height + (includeMinimap ? model.minimapHeight : 0) + trackHeight,
+      contentHeight: height,
+      trackHeight,
       theme,
       model,
-      offsetY: scrollY,
+      offsetY: -scrollY,
       offsetX: -scrollX,
       includeMinimap,
+      includeTracks,
     })
   }
   throw new Error('unknown export type')
@@ -51,19 +60,25 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
 async function render({
   width,
   height,
+  contentHeight,
+  trackHeight,
   offsetX,
   offsetY,
   theme,
   model,
   includeMinimap,
+  includeTracks,
 }: {
   width: number
   height: number
+  contentHeight: number
+  trackHeight: number
   offsetX: number
   offsetY: number
   theme: Theme
   model: MsaViewModel
   includeMinimap?: boolean
+  includeTracks?: boolean
 }) {
   const { Context } = await import('svgcanvas')
   const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
@@ -71,15 +86,31 @@ async function render({
   return renderToStaticMarkup(
     <SvgWrapper width={width} height={height}>
       <Wrapper model={model}>
-        <CoreRendering
-          Context={Context}
-          model={model}
-          theme={theme}
-          offsetX={offsetX}
-          offsetY={offsetY}
-          width={width}
-          height={height}
-        />
+        {includeTracks && trackHeight > 0 ? (
+          <TrackRendering
+            Context={Context}
+            model={model}
+            theme={theme}
+            offsetX={offsetX}
+            width={width}
+            trackHeight={trackHeight}
+          />
+        ) : null}
+        <g
+          transform={
+            trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined
+          }
+        >
+          <CoreRendering
+            Context={Context}
+            model={model}
+            theme={theme}
+            offsetX={offsetX}
+            offsetY={offsetY}
+            width={width}
+            contentHeight={contentHeight}
+          />
+        </g>
       </Wrapper>
     </SvgWrapper>,
   )
@@ -89,7 +120,7 @@ function CoreRendering({
   model,
   theme,
   width,
-  height,
+  contentHeight,
   offsetX,
   offsetY,
   Context,
@@ -97,7 +128,7 @@ function CoreRendering({
   model: MsaViewModel
   theme: Theme
   width: number
-  height: number
+  contentHeight: number
   offsetX: number
   offsetY: number
   Context: (
@@ -105,18 +136,18 @@ function CoreRendering({
     height: number,
   ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
 }) {
-  const clipId1 = 'tree'
-  const clipId2 = 'msa'
-  const { treeAreaWidth, colorScheme } = model
+  const { treeAreaWidth, colorScheme, id } = model
+  const clipId1 = `tree-${id}`
+  const clipId2 = `msa-${id}`
   const contrastScheme = colorContrast(colorScheme, theme)
-  const ctx1 = Context(width, height)
-  const ctx2 = Context(width, height)
+  const ctx1 = Context(width, contentHeight)
+  const ctx2 = Context(width, contentHeight)
   renderBoxFeatureCanvasBlock({
     ctx: ctx2,
     offsetX,
     offsetY,
     model,
-    blockSizeYOverride: height,
+    blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
   const msaAreaWidth = width - treeAreaWidth
@@ -125,7 +156,7 @@ function CoreRendering({
     offsetY,
     ctx: ctx1,
     theme,
-    blockSizeYOverride: height,
+    blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
   renderMSABlock({
@@ -136,19 +167,19 @@ function CoreRendering({
     contrastScheme,
     ctx: ctx2,
     blockSizeXOverride: msaAreaWidth,
-    blockSizeYOverride: height,
+    blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
   return (
     <>
       <defs>
         <clipPath id={clipId1}>
-          <rect x={0} y={0} width={treeAreaWidth} height={height} />
+          <rect x={0} y={0} width={treeAreaWidth} height={contentHeight} />
         </clipPath>
       </defs>
       <defs>
         <clipPath id={clipId2}>
-          <rect x={0} y={0} width={msaAreaWidth} height={height} />
+          <rect x={0} y={0} width={msaAreaWidth} height={contentHeight} />
         </clipPath>
       </defs>
 
@@ -165,6 +196,54 @@ function CoreRendering({
   )
 }
 
+function TrackRendering({
+  model,
+  theme,
+  width,
+  trackHeight,
+  offsetX,
+  Context,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+  trackHeight: number
+  offsetX: number
+  Context: (
+    width: number,
+    height: number,
+  ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
+}) {
+  const { treeAreaWidth, colorScheme, id } = model
+  const clipId = `tracks-${id}`
+  const contrastScheme = colorContrast(colorScheme, theme)
+  const msaAreaWidth = width - treeAreaWidth
+  const ctx = Context(msaAreaWidth, trackHeight)
+
+  renderAllTracks({
+    model,
+    ctx,
+    offsetX,
+    contrastScheme,
+    blockSizeXOverride: msaAreaWidth,
+    highResScaleFactorOverride: 1,
+  })
+
+  return (
+    <g transform={`translate(${treeAreaWidth} 0)`}>
+      <defs>
+        <clipPath id={clipId}>
+          <rect x={0} y={0} width={msaAreaWidth} height={trackHeight} />
+        </clipPath>
+      </defs>
+      <g
+        clipPath={`url(#${clipId})`}
+        dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
+      />
+    </g>
+  )
+}
+
 function MinimapWrapper({
   model,
   children,

package/src/rowCoordinateCalculations.test.ts

@@ -90,11 +90,24 @@ test('with gaps in sequence', () => {
   expect(globalCoordToRowSpecificCoord(sequence, 0)).toBe(0)
   expect(globalCoordToRowSpecificCoord(sequence, 1)).toBe(1)
   expect(globalCoordToRowSpecificCoord(sequence, 2)).toBe(2)
-  // Position 3 in global coordinates is after the gap
+  // Position 2 is a gap, so count before it is 2
   expect(globalCoordToRowSpecificCoord(sequence, 3)).toBe(2)
   expect(globalCoordToRowSpecificCoord(sequence, 4)).toBe(3)
   expect(globalCoordToRowSpecificCoord(sequence, 5)).toBe(4)
-  // Position 6 in global coordinates is after the gap
+  // Position 5 is a gap, so count before it is 4
+  expect(globalCoordToRowSpecificCoord(sequence, 6)).toBe(4)
+})
+
+test('with mixed gap characters (- and .)', () => {
+  const sequence = 'AC.GT-A'
+  expect(globalCoordToRowSpecificCoord(sequence, 0)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 1)).toBe(1)
+  // Position 2 is a gap (.), so count before it is 2
+  expect(globalCoordToRowSpecificCoord(sequence, 2)).toBe(2)
+  expect(globalCoordToRowSpecificCoord(sequence, 3)).toBe(2)
+  expect(globalCoordToRowSpecificCoord(sequence, 4)).toBe(3)
+  // Position 5 is a gap (-), so count before it is 4
+  expect(globalCoordToRowSpecificCoord(sequence, 5)).toBe(4)
   expect(globalCoordToRowSpecificCoord(sequence, 6)).toBe(4)
 })
 

package/src/rowCoordinateCalculations.ts

@@ -12,6 +12,8 @@ export function mouseOverCoordToGlobalCoord(
   // Iterate until we reach the target mouse position
   while (mousePosition < position) {
     // Skip any blank positions in the sequence
+    // Check if the next position (globalPosition + 1) is blank by comparing
+    // blanks[blankArrayIndex] - 1 with current globalPosition
     while (
       blankArrayIndex < blanksLen &&
       blanks[blankArrayIndex]! - 1 === globalPosition
@@ -38,13 +40,9 @@ export function globalCoordToRowSpecificCoord(seq: string, position: number) {
   // Iterate until we reach the target position or end of sequence
   while (currentPosition < position && currentPosition < sequenceLength) {
     // If current character is not a gap, increment the non-gap counter
-    if (seq[currentPosition] !== '-') {
+    if (!isBlank(seq[currentPosition])) {
       nonGapCount++
     }
-    // If we've reached the target position in non-gap coordinates, break
-    else if (nonGapCount >= position) {
-      break
-    }
     currentPosition++
   }
 

package/src/seqCoordToRowSpecificGlobalCoord.test.ts

@@ -19,13 +19,13 @@ describe('seqCoordToRowSpecificGlobalCoord', () => {
     expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
 
     // Position 1 (T after first gap) -> Global index 2
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(2)
 
     // Position 3 (C after second gap) -> Global index 5
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(4)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(5)
 
     // Position 5 (T after third gap) -> Global index 8
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 5 })).toBe(7)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 5 })).toBe(8)
 
     // Position 8 (end of sequence) -> Global index 11
     expect(seqCoordToRowSpecificGlobalCoord({ row, position: 8 })).toBe(11)
@@ -46,8 +46,8 @@ describe('seqCoordToRowSpecificGlobalCoord', () => {
     // Sequence positions: A(0) G(1) C(2)
 
     expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 2 })).toBe(4)
-    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(6)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(3)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 2 })).toBe(5)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(7)
   })
 })

package/src/seqCoordToRowSpecificGlobalCoord.ts

@@ -9,12 +9,17 @@ export function seqCoordToRowSpecificGlobalCoord({
 }) {
   let k = 0
   let i = 0
-  for (; k < position; i++) {
+  // Find the position-th non-gap character
+  while (i < row.length) {
     if (!isBlank(row[i])) {
+      if (k === position) {
+        return i
+      }
       k++
-    } else if (k >= position) {
-      break
     }
+    i++
   }
-  return i
+  // If position is 0 and we didn't find any non-gap character, return 0
+  // Otherwise return i (which is row.length at this point)
+  return position === 0 ? 0 : i
 }

package/src/types.ts

@@ -12,16 +12,14 @@ export interface BasicTrackModel {
 
 export interface TextTrackModel extends BasicTrackModel {
   customColorScheme?: Record<string, string>
-  data: string
+  data?: string
 }
 
-export interface ITextTrack {
+export interface BasicTrack {
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
 
-export type BasicTrack = ITextTrack
-
 export interface Node {
   children?: Node[]
   name?: string

package/src/util.ts

@@ -44,16 +44,29 @@ export function colorContrast(
 }
 
 export function skipBlanks(blanks: number[], arg: string | string[]) {
-  let s = ''
-  let b = 0
-  for (let j = 0, l = arg.length; j < l; j++) {
-    if (j === blanks[b]) {
-      b++
-    } else {
-      s += arg[j]
+  if (blanks.length === 0) {
+    return typeof arg === 'string' ? arg : arg.join('')
+  }
+  const chunks = []
+  let lastEnd = 0
+  for (const blankIdx of blanks) {
+    if (blankIdx > lastEnd) {
+      chunks.push(
+        typeof arg === 'string'
+          ? arg.slice(lastEnd, blankIdx)
+          : arg.slice(lastEnd, blankIdx).join(''),
+      )
     }
+    lastEnd = blankIdx + 1
+  }
+  if (lastEnd < arg.length) {
+    chunks.push(
+      typeof arg === 'string'
+        ? arg.slice(lastEnd)
+        : arg.slice(lastEnd).join(''),
+    )
   }
-  return s
+  return chunks.join('')
 }
 
 // basically same as setRadius from https://observablehq.com/@d3/tree-of-life

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.4.5'
+export const version = '4.4.7'

package/dist/components/dialogs/TracklistDialog.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model';
-declare const TracklistDialog: ({ model, onClose, }: {
-    model: MsaViewModel;
-    onClose: () => void;
-}) => React.JSX.Element;
-export default TracklistDialog;

package/dist/components/dialogs/TracklistDialog.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
-const TracklistDialog = observer(function ({ model, onClose, }) {
-    const { tracks } = model;
-    return (React.createElement(Dialog, { onClose: () => {
-            onClose();
-        }, open: true, title: "Add track" },
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null, "Open relevant per-alignment tracks e.g. protein domains"),
-            React.createElement(FormGroup, null, tracks.map(track => {
-                return (React.createElement(FormControlLabel, { key: track.model.id, control: React.createElement(Checkbox, { checked: !model.turnedOffTracks.has(track.model.id), onChange: () => {
-                            model.toggleTrack(track.model.id);
-                        } }), label: track.model.name }));
-            })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: () => {
-                        onClose();
-                    }, variant: "contained", color: "primary" }, "Close")))));
-});
-export default TracklistDialog;
-//# sourceMappingURL=TracklistDialog.js.map

package/dist/components/dialogs/TracklistDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TracklistDialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/TracklistDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,eAAe,GAAG,QAAQ,CAAC,UAAU,EACzC,KAAK,EACL,OAAO,GAIR;IACC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,CAAA;QACX,CAAC,EACD,IAAI,QACJ,KAAK,EAAC,WAAW;QAEjB,oBAAC,aAAa;YACZ,oBAAC,UAAU,kEAEE;YAEb,oBAAC,SAAS,QACP,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBAClB,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EACnB,OAAO,EACL,oBAAC,QAAQ,IACP,OAAO,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,EACnD,QAAQ,EAAE,GAAG,EAAE;4BACb,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;wBACnC,CAAC,GACD,EAEJ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,GACvB,CACH,CAAA;YACH,CAAC,CAAC,CACQ;YACZ,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,EAAE,CAAA;oBACX,CAAC,EACD,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,YAGR,CACK,CACF,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/src/components/dialogs/TracklistDialog.tsx

@@ -1,73 +0,0 @@
-import React from 'react'
-
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  Checkbox,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model'
-
-const TracklistDialog = observer(function ({
-  model,
-  onClose,
-}: {
-  model: MsaViewModel
-  onClose: () => void
-}) {
-  const { tracks } = model
-
-  return (
-    <Dialog
-      onClose={() => {
-        onClose()
-      }}
-      open
-      title="Add track"
-    >
-      <DialogContent>
-        <Typography>
-          Open relevant per-alignment tracks e.g. protein domains
-        </Typography>
-
-        <FormGroup>
-          {tracks.map(track => {
-            return (
-              <FormControlLabel
-                key={track.model.id}
-                control={
-                  <Checkbox
-                    checked={!model.turnedOffTracks.has(track.model.id)}
-                    onChange={() => {
-                      model.toggleTrack(track.model.id)
-                    }}
-                  />
-                }
-                label={track.model.name}
-              />
-            )
-          })}
-        </FormGroup>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              onClose()
-            }}
-            variant="contained"
-            color="primary"
-          >
-            Close
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-})
-
-export default TracklistDialog