react-msaview 5.6.1 → 5.6.2
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.
- package/bundle/index.js +95 -95
- package/bundle/index.js.map +4 -4
- package/dist/clustalX.d.ts +4 -3
- package/dist/clustalX.js +25 -4
- package/dist/clustalX.js.map +1 -1
- package/dist/columnCounts.d.ts +37 -0
- package/dist/columnCounts.js +148 -0
- package/dist/columnCounts.js.map +1 -0
- package/dist/components/MSAView.js +1 -8
- package/dist/components/MSAView.js.map +1 -1
- package/dist/components/getVisibleLeaves.d.ts +6 -0
- package/dist/components/getVisibleLeaves.js.map +1 -0
- package/dist/components/msa/MSACanvasBlock.js +17 -54
- package/dist/components/msa/MSACanvasBlock.js.map +1 -1
- package/dist/components/msa/renderBoxFeatureCanvasBlock.d.ts +2 -1
- package/dist/components/msa/renderBoxFeatureCanvasBlock.js +21 -19
- package/dist/components/msa/renderBoxFeatureCanvasBlock.js.map +1 -1
- package/dist/components/msa/renderMSABlock.js +97 -96
- package/dist/components/msa/renderMSABlock.js.map +1 -1
- package/dist/components/msa/renderMSAMouseover.js +9 -32
- package/dist/components/msa/renderMSAMouseover.js.map +1 -1
- package/dist/components/msa/useMsaBlockMouse.d.ts +23 -0
- package/dist/components/msa/useMsaBlockMouse.js +45 -0
- package/dist/components/msa/useMsaBlockMouse.js.map +1 -0
- package/dist/components/tree/TreeCanvas.js +14 -19
- package/dist/components/tree/TreeCanvas.js.map +1 -1
- package/dist/components/tree/TreeCanvasBlock.js +40 -111
- package/dist/components/tree/TreeCanvasBlock.js.map +1 -1
- package/dist/components/tree/renderTreeCanvas.d.ts +2 -0
- package/dist/components/tree/renderTreeCanvas.js +15 -3
- package/dist/components/tree/renderTreeCanvas.js.map +1 -1
- package/dist/components/tree/useTreeHover.d.ts +24 -0
- package/dist/components/tree/useTreeHover.js +44 -0
- package/dist/components/tree/useTreeHover.js.map +1 -0
- package/dist/hierarchy.js +15 -9
- package/dist/hierarchy.js.map +1 -1
- package/dist/model/msaModel.js +4 -3
- package/dist/model/msaModel.js.map +1 -1
- package/dist/model/treeModel.js +9 -8
- package/dist/model/treeModel.js.map +1 -1
- package/dist/model.d.ts +52 -10
- package/dist/model.js +208 -93
- package/dist/model.js.map +1 -1
- package/dist/propertyConservation.d.ts +2 -1
- package/dist/propertyConservation.js +36 -25
- package/dist/propertyConservation.js.map +1 -1
- package/dist/seqPosToGlobalCol.d.ts +7 -0
- package/dist/seqPosToGlobalCol.js +17 -0
- package/dist/seqPosToGlobalCol.js.map +1 -1
- package/dist/stripDefault.d.ts +21 -0
- package/dist/stripDefault.js +26 -0
- package/dist/stripDefault.js.map +1 -0
- package/dist/types.d.ts +16 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +3 -3
- package/src/clustalX.test.ts +9 -11
- package/src/clustalX.ts +27 -28
- package/src/columnCounts.test.ts +58 -0
- package/src/columnCounts.ts +170 -0
- package/src/components/MSAView.tsx +1 -9
- package/src/components/{msa/getVisibleLeaves.ts → getVisibleLeaves.ts} +1 -1
- package/src/components/msa/MSACanvasBlock.tsx +42 -110
- package/src/components/msa/renderBoxFeatureCanvasBlock.ts +25 -18
- package/src/components/msa/renderMSABlock.ts +113 -125
- package/src/components/msa/renderMSAMouseover.ts +11 -34
- package/src/components/msa/useMsaBlockMouse.ts +81 -0
- package/src/components/tree/TreeCanvas.tsx +16 -23
- package/src/components/tree/TreeCanvasBlock.tsx +62 -143
- package/src/components/tree/renderTreeCanvas.test.ts +100 -190
- package/src/components/tree/renderTreeCanvas.ts +14 -3
- package/src/components/tree/useTreeHover.ts +69 -0
- package/src/domainBands.test.ts +98 -0
- package/src/hierarchy.ts +15 -9
- package/src/model/msaModel.ts +4 -6
- package/src/model/treeModel.ts +9 -14
- package/src/model.ts +241 -112
- package/src/propertyConservation.test.ts +2 -13
- package/src/propertyConservation.ts +40 -31
- package/src/rowSpace.test.ts +46 -0
- package/src/seqPosToGlobalCol.ts +18 -0
- package/src/stripDefault.test.ts +48 -0
- package/src/stripDefault.ts +35 -0
- package/src/types.ts +23 -0
- package/src/version.ts +1 -1
- package/dist/components/msa/getVisibleLeaves.d.ts +0 -6
- package/dist/components/msa/getVisibleLeaves.js.map +0 -1
- package/dist/useDevicePixelRatio.d.ts +0 -1
- package/dist/useDevicePixelRatio.js +0 -27
- package/dist/useDevicePixelRatio.js.map +0 -1
- package/src/useDevicePixelRatio.ts +0 -29
- /package/dist/components/{msa/getVisibleLeaves.js → getVisibleLeaves.js} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { getVisibleLeaves } from "./getVisibleLeaves.js";
|
|
2
1
|
import { visibleColRange } from "./visibleColRange.js";
|
|
3
2
|
import { setFontSize } from "../../setFontSize.js";
|
|
4
3
|
import { adjustColorForContrast } from "../../util.js";
|
|
4
|
+
import { getVisibleLeaves } from "../getVisibleLeaves.js";
|
|
5
5
|
export function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, theme, highResScaleFactorOverride, blockSizeXOverride, blockSizeYOverride, }) {
|
|
6
6
|
const { colWidth, blockSize, rowHeight, fontSize, highResScaleFactor, actuallyShowDomains, bgColor, } = model;
|
|
7
7
|
const k = highResScaleFactorOverride ?? highResScaleFactor;
|
|
@@ -23,28 +23,19 @@ export function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, t
|
|
|
23
23
|
const referenceSeq = relativeTo
|
|
24
24
|
? columns.get(relativeTo)?.slice(xStart, xEnd)
|
|
25
25
|
: null;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
drawText({
|
|
40
|
-
model,
|
|
41
|
-
ctx,
|
|
42
|
-
xStart,
|
|
43
|
-
xEnd,
|
|
44
|
-
visibleLeaves,
|
|
45
|
-
referenceSeq,
|
|
46
|
-
});
|
|
47
|
-
}
|
|
26
|
+
drawTilesAndText({
|
|
27
|
+
model,
|
|
28
|
+
ctx,
|
|
29
|
+
theme,
|
|
30
|
+
contrastScheme,
|
|
31
|
+
xStart,
|
|
32
|
+
xEnd,
|
|
33
|
+
visibleLeaves,
|
|
34
|
+
referenceSeq,
|
|
35
|
+
// when domains are shown the background tiles come from
|
|
36
|
+
// renderBoxFeatureCanvasBlock, so only the letters are drawn here
|
|
37
|
+
drawTiles: !actuallyShowDomains,
|
|
38
|
+
});
|
|
48
39
|
drawInsertionIndicators({
|
|
49
40
|
model,
|
|
50
41
|
ctx,
|
|
@@ -54,82 +45,92 @@ export function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, t
|
|
|
54
45
|
});
|
|
55
46
|
ctx.resetTransform();
|
|
56
47
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
// Per-cell tile color for the active scheme. The scheme is fixed for the whole
|
|
49
|
+
// block, so resolve which rule applies once rather than re-testing the scheme
|
|
50
|
+
// name inside the innermost loop.
|
|
51
|
+
function tileColorFn(model) {
|
|
52
|
+
const { colorSchemeName, colorScheme, colClustalX, colConsensus } = model;
|
|
53
|
+
if (colorSchemeName === 'clustalx_protein_dynamic') {
|
|
54
|
+
return (col, letter) => colClustalX[col][letter];
|
|
63
55
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
const { name } = node.data;
|
|
70
|
-
const y = node.x;
|
|
71
|
-
const str = columns.get(name)?.slice(xStart, xEnd);
|
|
72
|
-
if (!str) {
|
|
73
|
-
continue;
|
|
74
|
-
}
|
|
75
|
-
const tileY = y - rowHeight;
|
|
76
|
-
const textY = y - quarterRowHeight;
|
|
77
|
-
for (let j = 0, l2 = str.length; j < l2; j++) {
|
|
78
|
-
const letter = str[j];
|
|
79
|
-
const x = j * colWidth + offsetXAligned;
|
|
80
|
-
const isMatchingReference = referenceSeq && name !== relativeTo && letter === referenceSeq[j];
|
|
81
|
-
let color;
|
|
82
|
-
if (isClustalX) {
|
|
83
|
-
color = colClustalX[xStart + j][letter];
|
|
84
|
-
}
|
|
85
|
-
else if (isPercentIdentity) {
|
|
86
|
-
const consensus = colConsensus[xStart + j];
|
|
87
|
-
color = letter === consensus.letter ? consensus.color : undefined;
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
color = colorScheme[letter];
|
|
91
|
-
}
|
|
92
|
-
if (bgColor) {
|
|
93
|
-
ctx.fillStyle = isMatchingReference
|
|
94
|
-
? theme.palette.action.hover
|
|
95
|
-
: color || theme.palette.background.default;
|
|
96
|
-
ctx.fillRect(x, tileY, colWidth, rowHeight);
|
|
97
|
-
}
|
|
98
|
-
if (showMsaLetters) {
|
|
99
|
-
ctx.fillStyle = bgColor
|
|
100
|
-
? (contrastScheme[letter] ?? 'black')
|
|
101
|
-
: color
|
|
102
|
-
? adjustColorForContrast(color, theme.palette.background.default)
|
|
103
|
-
: theme.palette.text.primary;
|
|
104
|
-
ctx.fillText(isMatchingReference ? '.' : letter, x + halfColWidth, textY);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
56
|
+
if (colorSchemeName === 'percent_identity_dynamic') {
|
|
57
|
+
return (col, letter) => {
|
|
58
|
+
const consensus = colConsensus[col];
|
|
59
|
+
return letter === consensus.letter ? consensus.color : undefined;
|
|
60
|
+
};
|
|
107
61
|
}
|
|
62
|
+
return (_col, letter) => colorScheme[letter];
|
|
108
63
|
}
|
|
109
|
-
//
|
|
110
|
-
//
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
const
|
|
123
|
-
const
|
|
124
|
-
const
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
64
|
+
// Letter color to use over a domain box, keyed by accession. Domain fills come
|
|
65
|
+
// from a categorical palette that has no fixed lightness, so ask the theme for a
|
|
66
|
+
// readable text color per fill instead of assuming dark-on-light.
|
|
67
|
+
function domainLetterColors(model, theme) {
|
|
68
|
+
return new Map(Object.entries(model.fillPalette).map(([accession, fill]) => [
|
|
69
|
+
accession,
|
|
70
|
+
theme.palette.getContrastText(fill),
|
|
71
|
+
]));
|
|
72
|
+
}
|
|
73
|
+
function drawTilesAndText({ model, ctx, theme, contrastScheme, visibleLeaves, xStart, xEnd, referenceSeq, drawTiles, }) {
|
|
74
|
+
const { bgColor, columns, colWidth, rowHeight, relativeTo, showMsaLetters, subFeatureRows, domainBandsByStart, } = model;
|
|
75
|
+
const tiles = drawTiles && bgColor;
|
|
76
|
+
if (tiles || showMsaLetters) {
|
|
77
|
+
const tileColor = tileColorFn(model);
|
|
78
|
+
const offsetXAligned = xStart * colWidth;
|
|
79
|
+
const halfColWidth = colWidth / 2;
|
|
80
|
+
// note: -rowHeight/4 matches +rowHeight/4 in tree
|
|
81
|
+
const quarterRowHeight = rowHeight / 4;
|
|
82
|
+
// with the tiles coming from the domain overlay instead, letters sit either
|
|
83
|
+
// on a domain box or on the plain background; sub-row layout stacks the boxes
|
|
84
|
+
// above the letters, so those rows are all plain background
|
|
85
|
+
const overDomains = !drawTiles && !subFeatureRows;
|
|
86
|
+
const domainColors = overDomains
|
|
87
|
+
? domainLetterColors(model, theme)
|
|
88
|
+
: undefined;
|
|
89
|
+
for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
|
|
90
|
+
const node = visibleLeaves[i];
|
|
91
|
+
const { name } = node.data;
|
|
92
|
+
const y = node.x;
|
|
93
|
+
const str = columns.get(name)?.slice(xStart, xEnd);
|
|
94
|
+
if (str) {
|
|
95
|
+
const tileY = y - rowHeight;
|
|
96
|
+
const textY = y - quarterRowHeight;
|
|
97
|
+
const bands = overDomains ? domainBandsByStart.get(name) : undefined;
|
|
98
|
+
let band = 0;
|
|
99
|
+
for (let j = 0, l2 = str.length; j < l2; j++) {
|
|
100
|
+
const col = xStart + j;
|
|
101
|
+
const letter = str[j];
|
|
102
|
+
const x = j * colWidth + offsetXAligned;
|
|
103
|
+
const isMatchingReference = referenceSeq && name !== relativeTo && letter === referenceSeq[j];
|
|
104
|
+
const color = tileColor(col, letter);
|
|
105
|
+
if (tiles) {
|
|
106
|
+
ctx.fillStyle = isMatchingReference
|
|
107
|
+
? theme.palette.action.hover
|
|
108
|
+
: color || theme.palette.background.default;
|
|
109
|
+
ctx.fillRect(x, tileY, colWidth, rowHeight);
|
|
110
|
+
}
|
|
111
|
+
if (showMsaLetters) {
|
|
112
|
+
// bands are sorted by start column and the sweep is left to right,
|
|
113
|
+
// so one forward-only cursor finds the band covering each column
|
|
114
|
+
while (bands && band < bands.length && bands[band].endCol <= col) {
|
|
115
|
+
band++;
|
|
116
|
+
}
|
|
117
|
+
const covering = bands?.[band];
|
|
118
|
+
ctx.fillStyle =
|
|
119
|
+
covering && covering.startCol <= col
|
|
120
|
+
? // on top of a domain box: contrast against the box fill
|
|
121
|
+
domainColors.get(covering.annotation.accession)
|
|
122
|
+
: tiles
|
|
123
|
+
? // on top of a colored tile
|
|
124
|
+
(contrastScheme[letter] ?? 'black')
|
|
125
|
+
: !drawTiles || !color
|
|
126
|
+
? // plain background, uncolored letters
|
|
127
|
+
theme.palette.text.primary
|
|
128
|
+
: // letter-color mode: darken/lighten to stay readable
|
|
129
|
+
adjustColorForContrast(color, theme.palette.background.default);
|
|
130
|
+
ctx.fillText(isMatchingReference ? '.' : letter, x + halfColWidth, textY);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
133
134
|
}
|
|
134
135
|
}
|
|
135
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderMSABlock.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSABlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"renderMSABlock.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSABlock.ts"],"names":[],"mappings":"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"}
|
|
@@ -6,52 +6,29 @@ const highlightColor = 'rgba(128,128,0,0.2)';
|
|
|
6
6
|
// faint hover-style wash alone is invisible against clustalx coloring)
|
|
7
7
|
const highlightColumnsFill = 'rgba(255,140,0,0.28)';
|
|
8
8
|
const highlightColumnsBorder = 'rgba(210,90,0,0.95)';
|
|
9
|
-
// Collapse sorted column indices into contiguous [start,end] runs so a run of
|
|
10
|
-
// highlighted columns draws as one bordered band rather than per-column slices
|
|
11
|
-
// (which would draw internal borders).
|
|
12
|
-
function contiguousRuns(columns) {
|
|
13
|
-
const sorted = [...columns].sort((a, b) => a - b);
|
|
14
|
-
const runs = [];
|
|
15
|
-
for (const col of sorted) {
|
|
16
|
-
const last = runs.at(-1);
|
|
17
|
-
if (last && col === last.end + 1) {
|
|
18
|
-
last.end = col;
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
runs.push({ start: col, end: col });
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return runs;
|
|
25
|
-
}
|
|
26
9
|
export function renderMouseover({ ctx, model, }) {
|
|
27
|
-
const { mouseCol, colWidth, msaAreaWidth, verticalScrollbarWidth, height, rowHeight, scrollX, scrollY, mouseRow, mouseClickRow, mouseClickCol,
|
|
10
|
+
const { mouseCol, colWidth, msaAreaWidth, verticalScrollbarWidth, height, rowHeight, scrollX, scrollY, mouseRow, mouseClickRow, mouseClickCol, highResScaleFactor, referenceRowIndex, hoveredRowIndices, highlightedColumnRuns, } = model;
|
|
28
11
|
const width = msaAreaWidth - verticalScrollbarWidth;
|
|
29
12
|
ctx.resetTransform();
|
|
30
13
|
ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor);
|
|
31
14
|
ctx.scale(highResScaleFactor, highResScaleFactor);
|
|
32
15
|
// Highlight reference row (relativeTo) persistently
|
|
33
|
-
if (
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
ctx.fillStyle = referenceColor;
|
|
37
|
-
ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight);
|
|
38
|
-
}
|
|
16
|
+
if (referenceRowIndex !== undefined) {
|
|
17
|
+
ctx.fillStyle = referenceColor;
|
|
18
|
+
ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight);
|
|
39
19
|
}
|
|
40
20
|
// Highlight multiple rows when hovering over tree nodes with children
|
|
41
|
-
if (
|
|
21
|
+
if (hoveredRowIndices.length > 0) {
|
|
42
22
|
ctx.fillStyle = multiRowHoverColor;
|
|
43
|
-
for (const
|
|
44
|
-
|
|
45
|
-
if (rowIndex !== undefined) {
|
|
46
|
-
ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight);
|
|
47
|
-
}
|
|
23
|
+
for (const rowIndex of hoveredRowIndices) {
|
|
24
|
+
ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight);
|
|
48
25
|
}
|
|
49
26
|
}
|
|
50
27
|
// Highlight multiple columns — draw each contiguous run as a filled, bordered
|
|
51
28
|
// band so a domain/motif highlight is clearly visible over the alignment
|
|
52
|
-
if (
|
|
29
|
+
if (highlightedColumnRuns.length > 0) {
|
|
53
30
|
ctx.lineWidth = 2;
|
|
54
|
-
for (const { start, end } of
|
|
31
|
+
for (const { start, end } of highlightedColumnRuns) {
|
|
55
32
|
const x = start * colWidth + scrollX;
|
|
56
33
|
const w = (end - start + 1) * colWidth;
|
|
57
34
|
ctx.fillStyle = highlightColumnsFill;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderMSAMouseover.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSAMouseover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIxE,MAAM,UAAU,GAAG,kBAAkB,CAAA;AACrC,MAAM,cAAc,GAAG,qBAAqB,CAAA;AAC5C,+EAA+E;AAC/E,6EAA6E;AAC7E,uEAAuE;AACvE,MAAM,oBAAoB,GAAG,sBAAsB,CAAA;AACnD,MAAM,sBAAsB,GAAG,qBAAqB,CAAA;AAEpD,
|
|
1
|
+
{"version":3,"file":"renderMSAMouseover.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSAMouseover.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { MsaViewModel } from '../../model.ts';
|
|
3
|
+
/**
|
|
4
|
+
* Translates pointer events over one MSA block into model column/row hover and
|
|
5
|
+
* click state, and reports where a tooltip should be anchored.
|
|
6
|
+
*
|
|
7
|
+
* The anchor is only tracked when there is something to show (an insertion, a
|
|
8
|
+
* domain under the cursor, or column stats), so plain mouse movement over the
|
|
9
|
+
* alignment updates the canvas overlay without re-rendering this component.
|
|
10
|
+
*/
|
|
11
|
+
export declare function useMsaBlockMouse({ model, offsetX, offsetY, }: {
|
|
12
|
+
model: MsaViewModel;
|
|
13
|
+
offsetX: number;
|
|
14
|
+
offsetY: number;
|
|
15
|
+
}): {
|
|
16
|
+
tooltipPoint: {
|
|
17
|
+
x: number;
|
|
18
|
+
y: number;
|
|
19
|
+
} | undefined;
|
|
20
|
+
onMouseMove: (event: React.MouseEvent, el: HTMLElement) => void;
|
|
21
|
+
onClick: (event: React.MouseEvent, el: HTMLElement) => void;
|
|
22
|
+
onMouseLeave: () => void;
|
|
23
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
function eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight, }) {
|
|
3
|
+
const { left, top } = el.getBoundingClientRect();
|
|
4
|
+
return {
|
|
5
|
+
col: Math.floor((event.clientX - left + offsetX) / colWidth),
|
|
6
|
+
row: Math.floor((event.clientY - top + offsetY) / rowHeight),
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Translates pointer events over one MSA block into model column/row hover and
|
|
11
|
+
* click state, and reports where a tooltip should be anchored.
|
|
12
|
+
*
|
|
13
|
+
* The anchor is only tracked when there is something to show (an insertion, a
|
|
14
|
+
* domain under the cursor, or column stats), so plain mouse movement over the
|
|
15
|
+
* alignment updates the canvas overlay without re-rendering this component.
|
|
16
|
+
*/
|
|
17
|
+
export function useMsaBlockMouse({ model, offsetX, offsetY, }) {
|
|
18
|
+
const [tooltipPoint, setTooltipPoint] = useState();
|
|
19
|
+
function colRow(event, el) {
|
|
20
|
+
const { colWidth, rowHeight } = model;
|
|
21
|
+
return eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight });
|
|
22
|
+
}
|
|
23
|
+
function onMouseMove(event, el) {
|
|
24
|
+
const { col, row } = colRow(event, el);
|
|
25
|
+
const inBounds = col >= 0 && col < model.numColumns && row >= 0 && row < model.numRows;
|
|
26
|
+
model.setMousePos(inBounds ? col : undefined, inBounds ? row : undefined);
|
|
27
|
+
const hasTooltip = !!model.hoveredInsertion ||
|
|
28
|
+
model.mouseOverDomains.length > 0 ||
|
|
29
|
+
(model.showColumnStats && !!model.mouseOverColumnStats);
|
|
30
|
+
setTooltipPoint(hasTooltip ? { x: event.clientX, y: event.clientY } : undefined);
|
|
31
|
+
}
|
|
32
|
+
function onClick(event, el) {
|
|
33
|
+
const { col, row } = colRow(event, el);
|
|
34
|
+
const { mouseClickCol, mouseClickRow } = model;
|
|
35
|
+
// clicking the same cell again clears the pinned crosshair
|
|
36
|
+
const same = col === mouseClickCol && row === mouseClickRow;
|
|
37
|
+
model.setMouseClickPos(same ? undefined : col, same ? undefined : row);
|
|
38
|
+
}
|
|
39
|
+
function onMouseLeave() {
|
|
40
|
+
model.setMousePos();
|
|
41
|
+
setTooltipPoint(undefined);
|
|
42
|
+
}
|
|
43
|
+
return { tooltipPoint, onMouseMove, onClick, onMouseLeave };
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=useMsaBlockMouse.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMsaBlockMouse.js","sourceRoot":"","sources":["../../../src/components/msa/useMsaBlockMouse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAKhC,SAAS,aAAa,CAAC,EACrB,KAAK,EACL,EAAE,EACF,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,GAQV;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;IAChD,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC5D,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC,GAAG,SAAS,CAAC;KAC7D,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,OAAO,GAKR;IACC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAA4B,CAAA;IAE5E,SAAS,MAAM,CAAC,KAAuB,EAAE,EAAe;QACtD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;QACrC,OAAO,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAA;IAC5E,CAAC;IAED,SAAS,WAAW,CAAC,KAAuB,EAAE,EAAe;QAC3D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QACtC,MAAM,QAAQ,GACZ,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,KAAK,CAAC,UAAU,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,CAAA;QACvE,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAEzE,MAAM,UAAU,GACd,CAAC,CAAC,KAAK,CAAC,gBAAgB;YACxB,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC;YACjC,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAA;QACzD,eAAe,CACb,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAChE,CAAA;IACH,CAAC;IAED,SAAS,OAAO,CAAC,KAAuB,EAAE,EAAe;QACvD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QACtC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;QAC9C,2DAA2D;QAC3D,MAAM,IAAI,GAAG,GAAG,KAAK,aAAa,IAAI,GAAG,KAAK,aAAa,CAAA;QAC3D,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IACxE,CAAC;IAED,SAAS,YAAY;QACnB,KAAK,CAAC,WAAW,EAAE,CAAA;QACnB,eAAe,CAAC,SAAS,CAAC,CAAA;IAC5B,CAAC;IAED,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,CAAA;AAC7D,CAAC"}
|
|
@@ -15,31 +15,26 @@ const TreeCanvas = observer(function ({ model }) {
|
|
|
15
15
|
const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY });
|
|
16
16
|
const mouseoverRef = useCanvasAutorun(ctx => {
|
|
17
17
|
if (isAlive(model)) {
|
|
18
|
-
const {
|
|
18
|
+
const { rowHeight, treeAreaWidth: w, height: h, scrollY: sy, mouseRow, referenceRowIndex, hoveredRowIndices, } = model;
|
|
19
19
|
ctx.resetTransform();
|
|
20
20
|
ctx.clearRect(0, 0, w, h);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
ctx.fillRect(0, leaf.x + sy - rowHeight / 2, w, rowHeight);
|
|
26
|
-
}
|
|
21
|
+
// rows are laid out at a fixed pitch, so a row index is all that is
|
|
22
|
+
// needed to place its band (leaf.x is rowHeight*(index+0.5))
|
|
23
|
+
const fillRow = (index) => {
|
|
24
|
+
ctx.fillRect(0, index * rowHeight + sy, w, rowHeight);
|
|
27
25
|
};
|
|
28
|
-
if (
|
|
26
|
+
if (referenceRowIndex !== undefined) {
|
|
29
27
|
ctx.fillStyle = referenceColor;
|
|
30
|
-
fillRow(
|
|
28
|
+
fillRow(referenceRowIndex);
|
|
31
29
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
fillRow(descendantName);
|
|
36
|
-
}
|
|
30
|
+
ctx.fillStyle = treeHoverColor;
|
|
31
|
+
for (const index of hoveredRowIndices) {
|
|
32
|
+
fillRow(index);
|
|
37
33
|
}
|
|
38
|
-
if (
|
|
39
|
-
|
|
40
|
-
!
|
|
41
|
-
|
|
42
|
-
fillRow(mouseOverRowName);
|
|
34
|
+
if (mouseRow !== undefined &&
|
|
35
|
+
mouseRow !== referenceRowIndex &&
|
|
36
|
+
!hoveredRowIndices.includes(mouseRow)) {
|
|
37
|
+
fillRow(mouseRow);
|
|
43
38
|
}
|
|
44
39
|
}
|
|
45
40
|
}, [model]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeCanvas.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,eAAe,MAAM,sBAAuB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIpE,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC3D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAA;IAErE,MAAM,YAAY,GAAG,gBAAgB,CACnC,GAAG,CAAC,EAAE;QACJ,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACnB,MAAM,EACJ,
|
|
1
|
+
{"version":3,"file":"TreeCanvas.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvas.tsx"],"names":[],"mappings":"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"}
|