@jbrowse/plugin-alignments 2.18.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/dist/AlignmentsFeatureDetail/AlignmentsFeatureDetail.d.ts +1 -2
  2. package/dist/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js +20 -13
  3. package/dist/AlignmentsFeatureDetail/Flags.d.ts +1 -2
  4. package/dist/AlignmentsFeatureDetail/Flags.js +6 -8
  5. package/dist/AlignmentsFeatureDetail/Formatter.d.ts +1 -2
  6. package/dist/AlignmentsFeatureDetail/Formatter.js +11 -36
  7. package/dist/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.d.ts +1 -2
  8. package/dist/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.js +44 -47
  9. package/dist/AlignmentsFeatureDetail/LaunchSupplementaryAlignmentBreakpointSplitViewPanel.d.ts +1 -2
  10. package/dist/AlignmentsFeatureDetail/LaunchSupplementaryAlignmentBreakpointSplitViewPanel.js +27 -31
  11. package/dist/AlignmentsFeatureDetail/LinkedPairedAlignments.d.ts +1 -2
  12. package/dist/AlignmentsFeatureDetail/LinkedPairedAlignments.js +2 -2
  13. package/dist/AlignmentsFeatureDetail/PairLink.d.ts +1 -2
  14. package/dist/AlignmentsFeatureDetail/PairLink.js +3 -6
  15. package/dist/AlignmentsFeatureDetail/SupplementaryAlignments.d.ts +1 -2
  16. package/dist/AlignmentsFeatureDetail/SupplementaryAlignments.js +2 -4
  17. package/dist/AlignmentsFeatureDetail/SupplementaryAlignmentsLocStrings.d.ts +1 -2
  18. package/dist/AlignmentsFeatureDetail/SupplementaryAlignmentsLocStrings.js +21 -27
  19. package/dist/AlignmentsFeatureDetail/index.js +17 -7
  20. package/dist/BamAdapter/index.js +17 -7
  21. package/dist/CramAdapter/CramAdapter.js +7 -2
  22. package/dist/CramAdapter/CramTestAdapters.d.ts +1 -1
  23. package/dist/CramAdapter/CramTestAdapters.js +2 -1
  24. package/dist/CramAdapter/index.js +17 -7
  25. package/dist/GuessAlignmentsTypes/index.js +19 -34
  26. package/dist/HtsgetBamAdapter/index.js +17 -7
  27. package/dist/LinearAlignmentsDisplay/components/AlignmentsDisplay.d.ts +1 -2
  28. package/dist/LinearAlignmentsDisplay/components/AlignmentsDisplay.js +8 -16
  29. package/dist/LinearAlignmentsDisplay/model.d.ts +1 -2
  30. package/dist/LinearAlignmentsDisplay/model.js +5 -7
  31. package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts +21 -7
  32. package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js +40 -15
  33. package/dist/LinearPileupDisplay/components/ColorByTagDialog.d.ts +1 -2
  34. package/dist/LinearPileupDisplay/components/ColorByTagDialog.js +10 -39
  35. package/dist/LinearPileupDisplay/components/GroupByDialog.d.ts +1 -2
  36. package/dist/LinearPileupDisplay/components/GroupByDialog.js +82 -121
  37. package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.d.ts +1 -2
  38. package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js +2 -6
  39. package/dist/LinearPileupDisplay/components/SetFeatureHeightDialog.d.ts +1 -2
  40. package/dist/LinearPileupDisplay/components/SetFeatureHeightDialog.js +13 -42
  41. package/dist/LinearPileupDisplay/components/SetMaxHeightDialog.d.ts +1 -2
  42. package/dist/LinearPileupDisplay/components/SetMaxHeightDialog.js +10 -38
  43. package/dist/LinearPileupDisplay/components/SortByTagDialog.d.ts +1 -2
  44. package/dist/LinearPileupDisplay/components/SortByTagDialog.js +15 -44
  45. package/dist/LinearPileupDisplay/model.d.ts +21 -7
  46. package/dist/LinearPileupDisplay/model.js +19 -8
  47. package/dist/LinearReadArcsDisplay/components/ReactComponent.d.ts +1 -2
  48. package/dist/LinearReadArcsDisplay/components/ReactComponent.js +4 -27
  49. package/dist/LinearReadArcsDisplay/index.js +17 -7
  50. package/dist/LinearReadArcsDisplay/model.d.ts +1 -1
  51. package/dist/LinearReadArcsDisplay/model.js +17 -7
  52. package/dist/LinearReadCloudDisplay/components/ReactComponent.d.ts +1 -2
  53. package/dist/LinearReadCloudDisplay/components/ReactComponent.js +4 -27
  54. package/dist/LinearReadCloudDisplay/index.js +17 -7
  55. package/dist/LinearReadCloudDisplay/model.d.ts +1 -1
  56. package/dist/LinearReadCloudDisplay/model.js +17 -7
  57. package/dist/LinearSNPCoverageDisplay/components/Tooltip.d.ts +1 -2
  58. package/dist/LinearSNPCoverageDisplay/components/Tooltip.js +15 -54
  59. package/dist/LinearSNPCoverageDisplay/model.d.ts +4 -4
  60. package/dist/LinearSNPCoverageDisplay/model.js +49 -35
  61. package/dist/MismatchParser/cigarToMismatches.d.ts +1 -2
  62. package/dist/MismatchParser/index.d.ts +1 -2
  63. package/dist/MismatchParser/mdToMismatches.d.ts +1 -2
  64. package/dist/PileupRenderer/PileupRenderer.d.ts +4 -4
  65. package/dist/PileupRenderer/PileupRenderer.js +17 -7
  66. package/dist/PileupRenderer/components/PileupRendering.d.ts +1 -2
  67. package/dist/PileupRenderer/components/PileupRendering.js +15 -40
  68. package/dist/PileupRenderer/configSchema.d.ts +5 -0
  69. package/dist/PileupRenderer/configSchema.js +5 -0
  70. package/dist/PileupRenderer/makeImageData.js +2 -0
  71. package/dist/PileupRenderer/renderMismatches.d.ts +2 -1
  72. package/dist/PileupRenderer/renderMismatches.js +18 -13
  73. package/dist/SNPCoverageAdapter/index.js +17 -7
  74. package/dist/SNPCoverageAdapter/processModifications.js +1 -1
  75. package/dist/SNPCoverageRenderer/SNPCoverageRenderer.d.ts +1 -18
  76. package/dist/SNPCoverageRenderer/SNPCoverageRenderer.js +35 -264
  77. package/dist/SNPCoverageRenderer/configSchema.d.ts +3 -3
  78. package/dist/SNPCoverageRenderer/configSchema.js +3 -3
  79. package/dist/SNPCoverageRenderer/makeImage.d.ts +2 -0
  80. package/dist/SNPCoverageRenderer/makeImage.js +270 -0
  81. package/dist/SNPCoverageRenderer/types.d.ts +19 -0
  82. package/dist/SNPCoverageRenderer/types.js +2 -0
  83. package/dist/index.js +17 -7
  84. package/dist/shared/components/BaseDisplayComponent.d.ts +1 -2
  85. package/dist/shared/components/BaseDisplayComponent.js +6 -13
  86. package/dist/shared/components/FilterByTagDialog.d.ts +1 -2
  87. package/dist/shared/components/FilterByTagDialog.js +42 -92
  88. package/dist/shared/renderSvgUtil.d.ts +1 -2
  89. package/dist/shared/renderSvgUtil.js +20 -17
  90. package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.d.ts +1 -2
  91. package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js +3 -6
  92. package/esm/AlignmentsFeatureDetail/Flags.d.ts +1 -2
  93. package/esm/AlignmentsFeatureDetail/Flags.js +6 -8
  94. package/esm/AlignmentsFeatureDetail/Formatter.d.ts +1 -2
  95. package/esm/AlignmentsFeatureDetail/Formatter.js +11 -13
  96. package/esm/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.d.ts +1 -2
  97. package/esm/AlignmentsFeatureDetail/LaunchPairedEndBreakpointSplitViewPanel.js +27 -40
  98. package/esm/AlignmentsFeatureDetail/LaunchSupplementaryAlignmentBreakpointSplitViewPanel.d.ts +1 -2
  99. package/esm/AlignmentsFeatureDetail/LaunchSupplementaryAlignmentBreakpointSplitViewPanel.js +10 -24
  100. package/esm/AlignmentsFeatureDetail/LinkedPairedAlignments.d.ts +1 -2
  101. package/esm/AlignmentsFeatureDetail/LinkedPairedAlignments.js +2 -2
  102. package/esm/AlignmentsFeatureDetail/PairLink.d.ts +1 -2
  103. package/esm/AlignmentsFeatureDetail/PairLink.js +3 -3
  104. package/esm/AlignmentsFeatureDetail/SupplementaryAlignments.d.ts +1 -2
  105. package/esm/AlignmentsFeatureDetail/SupplementaryAlignments.js +2 -4
  106. package/esm/AlignmentsFeatureDetail/SupplementaryAlignmentsLocStrings.d.ts +1 -2
  107. package/esm/AlignmentsFeatureDetail/SupplementaryAlignmentsLocStrings.js +21 -24
  108. package/esm/CramAdapter/CramAdapter.js +7 -2
  109. package/esm/CramAdapter/CramTestAdapters.d.ts +1 -1
  110. package/esm/CramAdapter/CramTestAdapters.js +2 -1
  111. package/esm/GuessAlignmentsTypes/index.js +19 -34
  112. package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.d.ts +1 -2
  113. package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.js +8 -13
  114. package/esm/LinearAlignmentsDisplay/model.d.ts +1 -2
  115. package/esm/LinearAlignmentsDisplay/model.js +5 -7
  116. package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts +21 -7
  117. package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js +23 -8
  118. package/esm/LinearPileupDisplay/components/ColorByTagDialog.d.ts +1 -2
  119. package/esm/LinearPileupDisplay/components/ColorByTagDialog.js +10 -16
  120. package/esm/LinearPileupDisplay/components/GroupByDialog.d.ts +1 -2
  121. package/esm/LinearPileupDisplay/components/GroupByDialog.js +82 -98
  122. package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.d.ts +1 -2
  123. package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js +2 -3
  124. package/esm/LinearPileupDisplay/components/SetFeatureHeightDialog.d.ts +1 -2
  125. package/esm/LinearPileupDisplay/components/SetFeatureHeightDialog.js +13 -19
  126. package/esm/LinearPileupDisplay/components/SetMaxHeightDialog.d.ts +1 -2
  127. package/esm/LinearPileupDisplay/components/SetMaxHeightDialog.js +10 -15
  128. package/esm/LinearPileupDisplay/components/SortByTagDialog.d.ts +1 -2
  129. package/esm/LinearPileupDisplay/components/SortByTagDialog.js +15 -21
  130. package/esm/LinearPileupDisplay/model.d.ts +21 -7
  131. package/esm/LinearPileupDisplay/model.js +2 -1
  132. package/esm/LinearReadArcsDisplay/components/ReactComponent.d.ts +1 -2
  133. package/esm/LinearReadArcsDisplay/components/ReactComponent.js +4 -4
  134. package/esm/LinearReadArcsDisplay/model.d.ts +1 -1
  135. package/esm/LinearReadCloudDisplay/components/ReactComponent.d.ts +1 -2
  136. package/esm/LinearReadCloudDisplay/components/ReactComponent.js +4 -4
  137. package/esm/LinearReadCloudDisplay/model.d.ts +1 -1
  138. package/esm/LinearSNPCoverageDisplay/components/Tooltip.d.ts +1 -2
  139. package/esm/LinearSNPCoverageDisplay/components/Tooltip.js +15 -51
  140. package/esm/LinearSNPCoverageDisplay/model.d.ts +4 -4
  141. package/esm/LinearSNPCoverageDisplay/model.js +32 -28
  142. package/esm/MismatchParser/cigarToMismatches.d.ts +1 -2
  143. package/esm/MismatchParser/index.d.ts +1 -2
  144. package/esm/MismatchParser/mdToMismatches.d.ts +1 -2
  145. package/esm/PileupRenderer/PileupRenderer.d.ts +4 -4
  146. package/esm/PileupRenderer/components/PileupRendering.d.ts +1 -2
  147. package/esm/PileupRenderer/components/PileupRendering.js +15 -17
  148. package/esm/PileupRenderer/configSchema.d.ts +5 -0
  149. package/esm/PileupRenderer/configSchema.js +5 -0
  150. package/esm/PileupRenderer/makeImageData.js +2 -0
  151. package/esm/PileupRenderer/renderMismatches.d.ts +2 -1
  152. package/esm/PileupRenderer/renderMismatches.js +18 -13
  153. package/esm/SNPCoverageAdapter/processModifications.js +1 -1
  154. package/esm/SNPCoverageRenderer/SNPCoverageRenderer.d.ts +1 -18
  155. package/esm/SNPCoverageRenderer/SNPCoverageRenderer.js +3 -265
  156. package/esm/SNPCoverageRenderer/configSchema.d.ts +3 -3
  157. package/esm/SNPCoverageRenderer/configSchema.js +3 -3
  158. package/esm/SNPCoverageRenderer/makeImage.d.ts +2 -0
  159. package/esm/SNPCoverageRenderer/makeImage.js +267 -0
  160. package/esm/SNPCoverageRenderer/types.d.ts +19 -0
  161. package/esm/SNPCoverageRenderer/types.js +1 -0
  162. package/esm/shared/components/BaseDisplayComponent.d.ts +1 -2
  163. package/esm/shared/components/BaseDisplayComponent.js +6 -10
  164. package/esm/shared/components/FilterByTagDialog.d.ts +1 -2
  165. package/esm/shared/components/FilterByTagDialog.js +42 -69
  166. package/esm/shared/renderSvgUtil.d.ts +1 -2
  167. package/esm/shared/renderSvgUtil.js +3 -7
  168. package/package.json +13 -13
@@ -1,4 +1,5 @@
1
- import React, { useEffect, useRef, useState } from 'react';
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useRef, useState } from 'react';
2
3
  import { PrerenderedCanvas } from '@jbrowse/core/ui';
3
4
  import { bpSpanPx } from '@jbrowse/core/util';
4
5
  import { observer } from 'mobx-react';
@@ -91,7 +92,7 @@ const PileupRendering = observer(function (props) {
91
92
  }
92
93
  }
93
94
  const canvasWidth = Math.ceil(width);
94
- return (React.createElement("div", { ref: ref, "data-testid": [
95
+ return (_jsxs("div", { ref: ref, "data-testid": [
95
96
  'pileup-overlay',
96
97
  sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type,
97
98
  colorBy === null || colorBy === void 0 ? void 0 : colorBy.type,
@@ -117,20 +118,17 @@ const PileupRendering = observer(function (props) {
117
118
  onClick(event);
118
119
  }, onContextMenu: event => {
119
120
  onContextMenu(event);
120
- }, onFocus: () => { }, onBlur: () => { } },
121
- React.createElement(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
122
- firstRender && highlight ? (React.createElement("div", { style: {
123
- position: 'absolute',
124
- backgroundColor: '#0003',
125
- pointerEvents: 'none',
126
- ...highlight,
127
- } })) : null,
128
- firstRender && selected ? (React.createElement("div", { style: {
129
- position: 'absolute',
130
- border: '2px solid #00b8ff',
131
- boxSizing: 'content-box',
132
- pointerEvents: 'none',
133
- ...selected,
134
- } })) : null));
121
+ }, onFocus: () => { }, onBlur: () => { }, children: [_jsx(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }), firstRender && highlight ? (_jsx("div", { style: {
122
+ position: 'absolute',
123
+ backgroundColor: '#0003',
124
+ pointerEvents: 'none',
125
+ ...highlight,
126
+ } })) : null, firstRender && selected ? (_jsx("div", { style: {
127
+ position: 'absolute',
128
+ border: '2px solid #00b8ff',
129
+ boxSizing: 'content-box',
130
+ pointerEvents: 'none',
131
+ ...selected,
132
+ } })) : null] }));
135
133
  });
136
134
  export default PileupRendering;
@@ -22,6 +22,11 @@ declare const PileupRenderer: import("@jbrowse/core/configuration/configurationS
22
22
  description: string;
23
23
  defaultValue: number;
24
24
  };
25
+ hideSmallIndels: {
26
+ type: string;
27
+ description: string;
28
+ defaultValue: boolean;
29
+ };
25
30
  maxHeight: {
26
31
  type: string;
27
32
  description: string;
@@ -29,6 +29,11 @@ const PileupRenderer = ConfigurationSchema('PileupRenderer', {
29
29
  description: 'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1',
30
30
  defaultValue: 1,
31
31
  },
32
+ hideSmallIndels: {
33
+ type: 'boolean',
34
+ description: 'Hides small indels, sometimes occurring in long read sequencing',
35
+ defaultValue: false,
36
+ },
32
37
  maxHeight: {
33
38
  type: 'integer',
34
39
  description: 'the maximum height to be used in a pileup rendering',
@@ -10,6 +10,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
10
10
  const mismatchAlpha = readConfObject(config, 'mismatchAlpha');
11
11
  const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth');
12
12
  const largeInsertionIndicatorScale = readConfObject(config, 'largeInsertionIndicatorScale');
13
+ const hideSmallIndels = readConfObject(config, 'hideSmallIndels');
13
14
  const defaultColor = readConfObject(config, 'color') === '#f0f';
14
15
  const theme = createJBrowseTheme(configTheme);
15
16
  const colorForBase = getColorBaseMap(theme);
@@ -39,6 +40,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
39
40
  ctx,
40
41
  feat,
41
42
  renderArgs,
43
+ hideSmallIndels,
42
44
  mismatchAlpha,
43
45
  drawSNPsMuted,
44
46
  drawIndels,
@@ -1,6 +1,6 @@
1
1
  import type { ProcessedRenderArgs } from './types';
2
2
  import type { LayoutFeature } from './util';
3
- export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels, }: {
3
+ export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels, }: {
4
4
  ctx: CanvasRenderingContext2D;
5
5
  feat: LayoutFeature;
6
6
  renderArgs: ProcessedRenderArgs;
@@ -11,6 +11,7 @@ export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureW
11
11
  drawSNPsMuted?: boolean;
12
12
  minSubfeatureWidth: number;
13
13
  largeInsertionIndicatorScale: number;
14
+ hideSmallIndels: boolean;
14
15
  charWidth: number;
15
16
  charHeight: number;
16
17
  canvasWidth: number;
@@ -1,7 +1,7 @@
1
1
  import { bpSpanPx, measureText } from '@jbrowse/core/util';
2
2
  import { colord } from '@jbrowse/core/util/colord';
3
3
  import { fillRect } from './util';
4
- export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
4
+ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
5
5
  const { bpPerPx, regions } = renderArgs;
6
6
  const { heightPx, topPx, feature } = feat;
7
7
  const region = regions[0];
@@ -43,12 +43,15 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
43
43
  }
44
44
  }
45
45
  else if (mismatch.type === 'deletion' && drawIndels) {
46
- fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
47
- const txt = `${mismatch.length}`;
48
- const rwidth = measureText(txt, 10);
49
- if (widthPx >= rwidth && heightPx >= heightLim) {
50
- ctx.fillStyle = contrastForBase.deletion;
51
- ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
46
+ const len = mismatch.length;
47
+ if (!hideSmallIndels || len >= 10) {
48
+ fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
49
+ const txt = `${mismatch.length}`;
50
+ const rwidth = measureText(txt, 10);
51
+ if (widthPx >= rwidth && heightPx >= heightLim) {
52
+ ctx.fillStyle = contrastForBase.deletion;
53
+ ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
54
+ }
52
55
  }
53
56
  }
54
57
  else if (mismatch.type === 'insertion' && drawIndels) {
@@ -56,12 +59,14 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
56
59
  const len = +mismatch.base || mismatch.length;
57
60
  const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx));
58
61
  if (len < 10) {
59
- fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
60
- if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
61
- const l = pos - insW;
62
- fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth);
63
- fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
64
- ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
62
+ if (!hideSmallIndels) {
63
+ fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
64
+ if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
65
+ const l = Math.round(pos - insW);
66
+ fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth);
67
+ fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
68
+ ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
69
+ }
65
70
  }
66
71
  }
67
72
  }
@@ -18,7 +18,6 @@ export function processModifications({ feature, colorBy, region, bins, regionSeq
18
18
  bins[epos] = {
19
19
  depth: 0,
20
20
  readsCounted: 0,
21
- refbase: regionSequence[epos],
22
21
  snps: {},
23
22
  ref: {
24
23
  probabilities: [],
@@ -35,6 +34,7 @@ export function processModifications({ feature, colorBy, region, bins, regionSeq
35
34
  }
36
35
  const s = 1 - sum(allProbs);
37
36
  const bin = bins[epos];
37
+ bin.refbase = regionSequence[epos];
38
38
  if (twoColor && s > max(allProbs)) {
39
39
  incWithProbabilities(bin, fstrand, 'nonmods', `nonmod_${type}`, s);
40
40
  }
@@ -1,22 +1,5 @@
1
1
  import { WiggleBaseRenderer } from '@jbrowse/plugin-wiggle';
2
- import type { ModificationTypeWithColor } from '../shared/types';
3
- import type { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
4
- import type { Feature } from '@jbrowse/core/util';
5
- import type { ScaleOpts } from '@jbrowse/plugin-wiggle';
6
- export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
7
- bpPerPx: number;
8
- height: number;
9
- highResolutionScaling: number;
10
- scaleOpts: ScaleOpts;
11
- }
12
- export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
13
- features: Map<string, Feature>;
14
- ticks: {
15
- values: number[];
16
- };
17
- displayCrossHatches: boolean;
18
- visibleModifications?: Record<string, ModificationTypeWithColor>;
19
- }
2
+ import type { RenderArgsDeserializedWithFeatures } from './types';
20
3
  export default class SNPCoverageRenderer extends WiggleBaseRenderer {
21
4
  draw(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<undefined>;
22
5
  }
@@ -1,270 +1,8 @@
1
- import { readConfObject } from '@jbrowse/core/configuration';
2
- import { createJBrowseTheme } from '@jbrowse/core/ui';
3
- import { bpSpanPx, featureSpanPx } from '@jbrowse/core/util';
4
- import { checkStopToken } from '@jbrowse/core/util/stopToken';
5
- import { WiggleBaseRenderer, YSCALEBAR_LABEL_OFFSET, getOrigin, getScale, } from '@jbrowse/plugin-wiggle';
6
- import { alphaColor } from '../shared/util';
7
- const INTERBASE_INDICATOR_WIDTH = 7;
8
- const INTERBASE_INDICATOR_HEIGHT = 4.5;
9
- const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
10
- const complementBase = {
11
- C: 'G',
12
- G: 'C',
13
- A: 'T',
14
- T: 'A',
15
- };
16
- const fudgeFactor = 0.6;
1
+ import { WiggleBaseRenderer } from '@jbrowse/plugin-wiggle';
17
2
  export default class SNPCoverageRenderer extends WiggleBaseRenderer {
18
3
  async draw(ctx, props) {
19
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
20
- const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
21
- const theme = createJBrowseTheme(configTheme);
22
- const region = regions[0];
23
- const width = (region.end - region.start) / bpPerPx;
24
- const offset = YSCALEBAR_LABEL_OFFSET;
25
- const height = unadjustedHeight - offset * 2;
26
- const opts = { ...scaleOpts, range: [0, height] };
27
- const viewScale = getScale(opts);
28
- const indicatorViewScale = getScale({
29
- ...opts,
30
- range: [0, height / 2],
31
- scaleType: 'linear',
32
- });
33
- const originY = getOrigin(scaleOpts.scaleType);
34
- const originLinear = getOrigin('linear');
35
- const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold');
36
- const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts');
37
- const drawArcs = readConfObject(cfg, 'drawArcs');
38
- const drawIndicators = readConfObject(cfg, 'drawIndicators');
39
- const toY = (n) => height - (viewScale(n) || 0) + offset;
40
- const toHeight = (n) => toY(originY) - toY(n);
41
- const toY2 = (n) => height - (indicatorViewScale(n) || 0) + offset;
42
- const toHeight2 = (n) => toY2(originLinear) - toY2(n);
43
- const { bases } = theme.palette;
44
- const colorForBase = {
45
- A: bases.A.main,
46
- C: bases.C.main,
47
- G: bases.G.main,
48
- T: bases.T.main,
49
- insertion: 'purple',
50
- softclip: 'blue',
51
- hardclip: 'red',
52
- total: readConfObject(cfg, 'color'),
53
- mod_NONE: 'blue',
54
- cpg_meth: 'red',
55
- cpg_unmeth: 'blue',
56
- };
57
- const feats = [...features.values()];
58
- ctx.fillStyle = colorForBase.total;
59
- let start = performance.now();
60
- for (const feature of feats) {
61
- if (feature.get('type') === 'skip') {
62
- continue;
63
- }
64
- const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
65
- const w = rightPx - leftPx + fudgeFactor;
66
- const score = feature.get('score');
67
- ctx.fillRect(leftPx, toY(score), w, toHeight(score));
68
- if (performance.now() - start > 400) {
69
- checkStopToken(stopToken);
70
- start = performance.now();
71
- }
72
- }
73
- let prevTotal = 0;
74
- const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
75
- const drawingModifications = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications';
76
- const drawingMethylation = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation';
77
- const isolatedModification = (_a = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
78
- start = performance.now();
79
- for (const feature of feats) {
80
- const now = performance.now();
81
- if (now - start > 400) {
82
- checkStopToken(stopToken);
83
- }
84
- if (feature.get('type') === 'skip') {
85
- continue;
86
- }
87
- const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
88
- const snpinfo = feature.get('snpinfo');
89
- const w = Math.max(rightPx - leftPx, 1);
90
- const score0 = feature.get('score');
91
- if (drawingModifications) {
92
- let curr = 0;
93
- const refbase = (_b = snpinfo.refbase) === null || _b === void 0 ? void 0 : _b.toUpperCase();
94
- const { nonmods, mods, snps, ref } = snpinfo;
95
- for (const m of Object.keys(nonmods).sort().reverse()) {
96
- const mod = visibleModifications[m.replace('nonmod_', '')] ||
97
- visibleModifications[m.replace('mod_', '')];
98
- if (!mod) {
99
- console.warn(`${m} not known yet`);
100
- continue;
101
- }
102
- if (isolatedModification && mod.type !== isolatedModification) {
103
- continue;
104
- }
105
- const cmp = complementBase[mod.base];
106
- const detectable = mod.base === 'N'
107
- ? score0
108
- : (((_c = snps[mod.base]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
109
- (((_d = snps[cmp]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
110
- (refbase === mod.base ? ref['1'] : 0) +
111
- (refbase === cmp ? ref['-1'] : 0);
112
- const modifiable = mod.base === 'N'
113
- ? score0
114
- : (((_e = snps[mod.base]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
115
- (((_f = snps[cmp]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
116
- (refbase === mod.base ? ref.entryDepth : 0) +
117
- (refbase === cmp ? ref.entryDepth : 0);
118
- const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
119
- const modFraction = (modifiable / score0) * (entryDepth / detectable);
120
- const nonModColor = 'blue';
121
- const c = alphaColor(nonModColor, avgProbability);
122
- const height = toHeight(score0);
123
- const bottom = toY(score0) + height;
124
- ctx.fillStyle = c;
125
- ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
126
- curr += modFraction * height;
127
- }
128
- for (const m of Object.keys(mods).sort().reverse()) {
129
- const mod = visibleModifications[m.replace('mod_', '')];
130
- if (!mod) {
131
- console.warn(`${m} not known yet`);
132
- continue;
133
- }
134
- if (isolatedModification && mod.type !== isolatedModification) {
135
- continue;
136
- }
137
- const cmp = complementBase[mod.base];
138
- const detectable = mod.base === 'N'
139
- ? score0
140
- : (((_g = snps[mod.base]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
141
- (((_h = snps[cmp]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
142
- (refbase === mod.base ? ref['1'] : 0) +
143
- (refbase === cmp ? ref['-1'] : 0);
144
- const modifiable = mod.base === 'N'
145
- ? score0
146
- : (((_j = snps[mod.base]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
147
- (((_k = snps[cmp]) === null || _k === void 0 ? void 0 : _k.entryDepth) || 0) +
148
- (refbase === mod.base ? ref.entryDepth : 0) +
149
- (refbase === cmp ? ref.entryDepth : 0);
150
- const { entryDepth, avgProbability = 0 } = mods[m];
151
- const modFraction = (modifiable / score0) * (entryDepth / detectable);
152
- const baseColor = mod.color || 'black';
153
- const c = alphaColor(baseColor, avgProbability);
154
- const height = toHeight(score0);
155
- const bottom = toY(score0) + height;
156
- ctx.fillStyle = c;
157
- ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
158
- curr += modFraction * height;
159
- }
160
- }
161
- else if (drawingMethylation) {
162
- const { depth, nonmods, mods } = snpinfo;
163
- let curr = 0;
164
- for (const base of Object.keys(mods).sort().reverse()) {
165
- const { entryDepth } = mods[base];
166
- const height = toHeight(score0);
167
- const bottom = toY(score0) + height;
168
- ctx.fillStyle = colorForBase[base] || 'black';
169
- ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
170
- curr += entryDepth;
171
- }
172
- for (const base of Object.keys(nonmods).sort().reverse()) {
173
- const { entryDepth } = nonmods[base];
174
- const height = toHeight(score0);
175
- const bottom = toY(score0) + height;
176
- ctx.fillStyle = colorForBase[base] || 'black';
177
- ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
178
- curr += entryDepth;
179
- }
180
- }
181
- else {
182
- const { depth, snps } = snpinfo;
183
- let curr = 0;
184
- for (const base of Object.keys(snps).sort().reverse()) {
185
- const { entryDepth } = snps[base];
186
- const height = toHeight(score0);
187
- const bottom = toY(score0) + height;
188
- ctx.fillStyle = colorForBase[base] || 'black';
189
- ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
190
- curr += entryDepth;
191
- }
192
- }
193
- const interbaseEvents = Object.keys(snpinfo.noncov);
194
- if (drawInterbaseCounts) {
195
- let curr = 0;
196
- for (const base of interbaseEvents) {
197
- const { entryDepth } = snpinfo.noncov[base];
198
- const r = 0.6;
199
- ctx.fillStyle = colorForBase[base];
200
- ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, INTERBASE_INDICATOR_HEIGHT + toHeight2(curr), r * 2, toHeight2(entryDepth));
201
- curr += entryDepth;
202
- }
203
- }
204
- if (drawIndicators) {
205
- let accum = 0;
206
- let max = 0;
207
- let maxBase = '';
208
- for (const base of interbaseEvents) {
209
- const { entryDepth } = snpinfo.noncov[base];
210
- accum += entryDepth;
211
- if (entryDepth > max) {
212
- max = entryDepth;
213
- maxBase = base;
214
- }
215
- }
216
- const indicatorComparatorScore = Math.max(score0, prevTotal);
217
- if (accum > indicatorComparatorScore * indicatorThreshold &&
218
- indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
219
- ctx.fillStyle = colorForBase[maxBase];
220
- ctx.beginPath();
221
- const l = leftPx + extraHorizontallyFlippedOffset;
222
- ctx.moveTo(l - INTERBASE_INDICATOR_WIDTH / 2, 0);
223
- ctx.lineTo(l + INTERBASE_INDICATOR_WIDTH / 2, 0);
224
- ctx.lineTo(l, INTERBASE_INDICATOR_HEIGHT);
225
- ctx.fill();
226
- }
227
- }
228
- prevTotal = score0;
229
- }
230
- if (drawArcs) {
231
- for (const f of feats) {
232
- if (f.get('type') !== 'skip') {
233
- continue;
234
- }
235
- const s = f.get('start');
236
- const e = f.get('end');
237
- const [left, right] = bpSpanPx(s, e, region, bpPerPx);
238
- ctx.beginPath();
239
- const effectiveStrand = f.get('effectiveStrand');
240
- const pos = 'rgba(255,200,200,0.7)';
241
- const neg = 'rgba(200,200,255,0.7)';
242
- const neutral = 'rgba(200,200,200,0.7)';
243
- if (effectiveStrand === 1) {
244
- ctx.strokeStyle = pos;
245
- }
246
- else if (effectiveStrand === -1) {
247
- ctx.strokeStyle = neg;
248
- }
249
- else {
250
- ctx.strokeStyle = neutral;
251
- }
252
- ctx.lineWidth = Math.log(f.get('score') + 1);
253
- ctx.moveTo(left, height - offset * 2);
254
- ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
255
- ctx.stroke();
256
- }
257
- }
258
- if (displayCrossHatches) {
259
- ctx.lineWidth = 1;
260
- ctx.strokeStyle = 'rgba(140,140,140,0.8)';
261
- for (const tick of ticks.values) {
262
- ctx.beginPath();
263
- ctx.moveTo(0, Math.round(toY(tick)));
264
- ctx.lineTo(width, Math.round(toY(tick)));
265
- ctx.stroke();
266
- }
267
- }
4
+ const { makeImage } = await import('./makeImage');
5
+ await makeImage(ctx, props);
268
6
  return undefined;
269
7
  }
270
8
  }
@@ -9,17 +9,17 @@ declare const SNPCoverageRenderer: import("@jbrowse/core/configuration/configura
9
9
  description: string;
10
10
  defaultValue: number;
11
11
  };
12
- drawArcs: {
12
+ showArcs: {
13
13
  type: string;
14
14
  description: string;
15
15
  defaultValue: boolean;
16
16
  };
17
- drawInterbaseCounts: {
17
+ showInterbaseCounts: {
18
18
  type: string;
19
19
  description: string;
20
20
  defaultValue: boolean;
21
21
  };
22
- drawIndicators: {
22
+ showInterbaseIndicators: {
23
23
  type: string;
24
24
  description: string;
25
25
  defaultValue: boolean;
@@ -11,17 +11,17 @@ const SNPCoverageRenderer = ConfigurationSchema('SNPCoverageRenderer', {
11
11
  description: 'the proportion of reads containing a insertion/clip indicator',
12
12
  defaultValue: 0.4,
13
13
  },
14
- drawArcs: {
14
+ showArcs: {
15
15
  type: 'boolean',
16
16
  description: 'Draw sashimi-style arcs for intron features',
17
17
  defaultValue: true,
18
18
  },
19
- drawInterbaseCounts: {
19
+ showInterbaseCounts: {
20
20
  type: 'boolean',
21
21
  description: 'draw count "upsidedown histogram" of the interbase events that don\'t contribute to the coverage count so are not drawn in the normal histogram',
22
22
  defaultValue: true,
23
23
  },
24
- drawIndicators: {
24
+ showInterbaseIndicators: {
25
25
  type: 'boolean',
26
26
  description: 'draw a triangular indicator where an event has been detected',
27
27
  defaultValue: true,
@@ -0,0 +1,2 @@
1
+ import type { RenderArgsDeserializedWithFeatures } from './types';
2
+ export declare function makeImage(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<void>;