react-msaview 1.3.2 → 2.1.0

package/dist/StructureModel.d.ts

@@ -0,0 +1,9 @@
+export declare const StructureModel: import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    structure: import("mobx-state-tree").IModelType<{
+        pdb: import("mobx-state-tree").ISimpleType<string>;
+        startPos: import("mobx-state-tree").ISimpleType<number>;
+        endPos: import("mobx-state-tree").ISimpleType<number>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+    range: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+}, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/StructureModel.js

@@ -0,0 +1,11 @@
+import { types } from 'mobx-state-tree';
+export const StructureModel = types.model({
+    id: types.identifier,
+    structure: types.model({
+        pdb: types.string,
+        startPos: types.number,
+        endPos: types.number,
+    }),
+    range: types.maybe(types.string),
+});
+//# sourceMappingURL=StructureModel.js.map

package/dist/StructureModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructureModel.js","sourceRoot":"","sources":["../src/StructureModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC;IACxC,EAAE,EAAE,KAAK,CAAC,UAAU;IACpB,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC;QACrB,GAAG,EAAE,KAAK,CAAC,MAAM;QACjB,QAAQ,EAAE,KAAK,CAAC,MAAM;QACtB,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;CACjC,CAAC,CAAA"}

package/dist/UniprotTrack.d.ts

@@ -0,0 +1,27 @@
+export declare const UniprotTrack: import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    accession: import("mobx-state-tree").ISimpleType<string>;
+    name: import("mobx-state-tree").ISimpleType<string>;
+    associatedRowName: import("mobx-state-tree").ISimpleType<string>;
+    height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, {
+    error: unknown;
+    data: string | undefined;
+} & {
+    setError(error: unknown): void;
+    setData(data: string): void;
+} & {
+    afterCreate(): void;
+} & {
+    readonly loading: boolean;
+    readonly features: {
+        seq_id: string;
+        source: string;
+        type: string;
+        start: number;
+        end: number;
+        score: number;
+        strand: string;
+        phase: string;
+    }[] | undefined;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/UniprotTrack.js

@@ -0,0 +1,53 @@
+import { types, addDisposer } from 'mobx-state-tree';
+import { autorun } from 'mobx';
+// locals
+import { parseGFF } from './util';
+export const UniprotTrack = types
+    .model({
+    id: types.string,
+    accession: types.string,
+    name: types.string,
+    associatedRowName: types.string,
+    height: types.optional(types.number, 100),
+})
+    .volatile(() => ({
+    error: undefined,
+    data: undefined,
+}))
+    .actions(self => ({
+    setError(error) {
+        self.error = error;
+    },
+    setData(data) {
+        self.data = data;
+    },
+}))
+    .actions(self => ({
+    afterCreate() {
+        addDisposer(self, autorun(async () => {
+            try {
+                const { accession } = self;
+                const accessionSansVersion = accession === null || accession === void 0 ? void 0 : accession.replace(/\.[^/.]+$/, '');
+                const url = `https://rest.uniprot.org/uniprotkb/${accessionSansVersion}.gff`;
+                const res = await fetch(url);
+                if (!res.ok) {
+                    throw new Error(`HTTP ${res.status} fetching ${url}: ${await res.text()}`);
+                }
+                self.setData(await res.text());
+            }
+            catch (e) {
+                console.error(e);
+                self.setError(e);
+            }
+        }));
+    },
+}))
+    .views(self => ({
+    get loading() {
+        return !self.data;
+    },
+    get features() {
+        return parseGFF(self.data);
+    },
+}));
+//# sourceMappingURL=UniprotTrack.js.map

package/dist/UniprotTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniprotTrack.js","sourceRoot":"","sources":["../src/UniprotTrack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAE9B,SAAS;AACT,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK;KAC9B,KAAK,CAAC;IACL,EAAE,EAAE,KAAK,CAAC,MAAM;IAChB,SAAS,EAAE,KAAK,CAAC,MAAM;IACvB,IAAI,EAAE,KAAK,CAAC,MAAM;IAClB,iBAAiB,EAAE,KAAK,CAAC,MAAM;IAC/B,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC;CAC1C,CAAC;KACD,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IACf,KAAK,EAAE,SAAoB;IAC3B,IAAI,EAAE,SAA+B;CACtC,CAAC,CAAC;KACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,KAAc;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;IACD,OAAO,CAAC,IAAY;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAClB,CAAC;CACF,CAAC,CAAC;KACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChB,WAAW;QACT,WAAW,CACT,IAAI,EACJ,OAAO,CAAC,KAAK,IAAI,EAAE;YACjB,IAAI;gBACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;gBAC1B,MAAM,oBAAoB,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;gBAChE,MAAM,GAAG,GAAG,sCAAsC,oBAAoB,MAAM,CAAA;gBAC5E,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;gBAC5B,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;oBACX,MAAM,IAAI,KAAK,CACb,QAAQ,GAAG,CAAC,MAAM,aAAa,GAAG,KAAK,MAAM,GAAG,CAAC,IAAI,EAAE,EAAE,CAC1D,CAAA;iBACF;gBACD,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;aAC/B;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;aACjB;QACH,CAAC,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAC;KACF,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACd,IAAI,OAAO;QACT,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;IACnB,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;CACF,CAAC,CAAC,CAAA"}

package/dist/colorSchemes.d.ts

@@ -1,16 +1,10 @@
 declare const _default: {
-    [k: string]: {
-        [key: string]: string;
-    };
+    [k: string]: Record<string, string>;
 };
 export default _default;
-export declare function getClustalXColor(stats: {
-    [key: string]: number;
-}, model: {
+export declare function getClustalXColor(stats: Record<string, number>, model: {
     columns: Record<string, string>;
-}, row: number, col: number): "rgb(128,179,230)" | "#d88" | "rgb(192, 72, 192)" | "rgb(204, 77, 204)" | "#8f8" | "rgb(26,204,26)" | "rgb(240, 128, 128)" | "rgb(240, 144, 72)" | "rgb(204, 204, 0)" | "rgb(26, 179, 179)" | undefined;
-export declare function getPercentIdentityColor(stats: {
-    [key: string]: number;
-}, model: {
+}, row: string, col: number): "rgb(128,179,230)" | "#d88" | "rgb(192, 72, 192)" | "rgb(204, 77, 204)" | "#8f8" | "rgb(26,204,26)" | "rgb(240, 128, 128)" | "rgb(240, 144, 72)" | "rgb(204, 204, 0)" | "rgb(26, 179, 179)" | undefined;
+export declare function getPercentIdentityColor(stats: Record<string, number>, model: {
     columns: Record<string, string>;
-}, row: number, col: number): string | undefined;
+}, row: string, col: number): string | undefined;

package/dist/colorSchemes.js

@@ -1,6 +1,6 @@
 import Color from 'color';
 import { transform } from './util';
-var colorSchemes = {
+const colorSchemes = {
     clustal: {
         G: 'orange',
         P: 'orange',
@@ -62,7 +62,7 @@ var colorSchemes = {
         T: 'red',
     },
     percent_identity_dynamic: {},
-    //https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/flower.json
+    // https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/flower.json
     flower: {
         A: '#b18a51',
         C: '#ff5701',
@@ -92,7 +92,7 @@ var colorSchemes = {
         T: '#f53737',
         U: '#f53737',
     },
-    //https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/clustalx_protein.json
+    // https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/clustalx_protein.json
     clustalx_protein: {
         A: '#197fe5',
         C: '#e57f7f',
@@ -323,30 +323,24 @@ var colorSchemes = {
 };
 // turn all supplied colors to hex colors which getContrastText from mui
 // requires
-export default transform(colorSchemes, function (_a) {
-    var key = _a[0], val = _a[1];
-    return [
-        key,
-        transform(val, function (_a) {
-            var letter = _a[0], color = _a[1];
-            return [letter, Color(color).hex()];
-        }),
-    ];
-});
+export default transform(colorSchemes, ([key, val]) => [
+    key,
+    transform(val, ([letter, color]) => [letter, Color(color).hex()]),
+]);
 // info http://www.jalview.org/help/html/colourSchemes/clustal.html
 // modifications:
 // reference to clustalX source code scheme modifies what the jalview.org
 // scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
 // should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
 export function getClustalXColor(stats, model, row, col) {
-    var total = Object.values(stats).reduce(function (a, b) { return a + b; }, 0);
-    var l = model.columns[row][col];
-    var _a = stats.W, W = _a === void 0 ? 0 : _a, _b = stats.L, L = _b === void 0 ? 0 : _b, _c = stats.V, V = _c === void 0 ? 0 : _c, _d = stats.I, I = _d === void 0 ? 0 : _d, _e = stats.M, M = _e === void 0 ? 0 : _e, _f = stats.A, A = _f === void 0 ? 0 : _f, _g = stats.F, F = _g === void 0 ? 0 : _g, _h = stats.C, C = _h === void 0 ? 0 : _h, _j = stats.H, H = _j === void 0 ? 0 : _j, _k = stats.P, P = _k === void 0 ? 0 : _k, _l = stats.R, R = _l === void 0 ? 0 : _l, _m = stats.K, K = _m === void 0 ? 0 : _m, _o = stats.Q, Q = _o === void 0 ? 0 : _o, _p = stats.E, E = _p === void 0 ? 0 : _p, _q = stats.D, D = _q === void 0 ? 0 : _q, _r = stats.T, T = _r === void 0 ? 0 : _r, _s = stats.S, S = _s === void 0 ? 0 : _s, _t = stats.G, G = _t === void 0 ? 0 : _t, _u = stats.Y, Y = _u === void 0 ? 0 : _u, _v = stats.N, N = _v === void 0 ? 0 : _v;
-    var WLVIMAFCHP = W + L + V + I + M + A + F + C + H + P + Y;
-    var KR = K + R;
-    var QE = Q + E;
-    var ED = E + D;
-    var TS = T + S;
+    const total = Object.values(stats).reduce((a, b) => a + b, 0);
+    const l = model.columns[row][col];
+    const { W = 0, L = 0, V = 0, I = 0, M = 0, A = 0, F = 0, C = 0, H = 0, P = 0, R = 0, K = 0, Q = 0, E = 0, D = 0, T = 0, S = 0, G = 0, Y = 0, N = 0, } = stats;
+    const WLVIMAFCHP = W + L + V + I + M + A + F + C + H + P + Y;
+    const KR = K + R;
+    const QE = Q + E;
+    const ED = E + D;
+    const TS = T + S;
     if (WLVIMAFCHP / total > 0.6) {
         if (l === 'W' ||
             l === 'L' ||
@@ -434,22 +428,23 @@ export function getClustalXColor(stats, model, row, col) {
 // scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
 // should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
 export function getPercentIdentityColor(stats, model, row, col) {
-    var total = Object.values(stats).reduce(function (a, b) { return a + b; }, 0);
-    var l = model.columns[row][col];
-    var entries = Object.entries(stats);
-    var ent = 0;
-    var letter = '';
-    for (var i = 0; i < entries.length; i++) {
-        if (entries[i][1] > ent && entries[i][0] !== '-') {
-            letter = entries[i][0];
-            ent = entries[i][1];
+    const total = Object.values(stats).reduce((a, b) => a + b, 0);
+    const l = model.columns[row][col];
+    const entries = Object.entries(stats);
+    let ent = 0;
+    let letter = '';
+    for (const entry of entries) {
+        if (entry[1] > ent && entry[0] !== '-') {
+            letter = entry[0];
+            ent = entry[1];
         }
     }
-    var proportion = ent / total;
-    var thresh = "hsl(240, 30%, ".concat(100 * Math.max(1 - ent / total / 3, 0.3), "%)");
+    const proportion = ent / total;
+    const thresh = `hsl(240, 30%, ${100 * Math.max(1 - ent / total / 3, 0.3)}%)`;
     if (proportion > 0.4) {
         if (l === letter) {
             return thresh;
         }
     }
 }
+//# sourceMappingURL=colorSchemes.js.map

package/dist/colorSchemes.js.map

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

package/dist/components/BoxTrack.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { MsaViewModel } from '../model';
-declare const AnnotationTrack: ({ model, track }: {
+import React from 'react';
+import { IBoxTrack, MsaViewModel } from '../model';
+declare const BoxTrack: ({ model, track, }: {
     model: MsaViewModel;
-    track: any;
-}) => JSX.Element;
-export default AnnotationTrack;
+    track: IBoxTrack;
+}) => React.JSX.Element;
+export default BoxTrack;

package/dist/components/BoxTrack.js

@@ -1,143 +1,15 @@
-import React, { useRef, useMemo, useEffect } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
-import { getSnapshot, isStateTreeNode } from 'mobx-state-tree';
-import Layout from '../layout';
-var AnnotationBlock = observer(function (_a) {
-    var track = _a.track, model = _a.model, offsetX = _a.offsetX;
-    var blockSize = model.blockSize, colWidth = model.colWidth, blanks = model.blanks, rowHeight = model.rowHeight, highResScaleFactor = model.highResScaleFactor, scrollX = model.scrollX;
-    var _b = track.model, height = _b.height, features = _b.features, associatedRowName = _b.associatedRowName;
-    var feats = isStateTreeNode(features)
-        ? getSnapshot(features)
-        : features;
-    var layout = useMemo(function () {
-        var temp = new Layout();
-        feats === null || feats === void 0 ? void 0 : feats.forEach(function (feature, index) {
-            var start = feature.start, end = feature.end;
-            if (associatedRowName) {
-                var s = model.rowSpecificBpToPx(associatedRowName, start - 1);
-                var e = model.rowSpecificBpToPx(associatedRowName, end);
-                temp.addRect("".concat(index), s, e, rowHeight, feature);
-            }
-            else {
-                var s = model.globalBpToPx(start - 1);
-                var e = model.globalBpToPx(end);
-                temp.addRect("".concat(index), s, e, rowHeight, feature);
-            }
-        });
-        return temp;
-    }, [rowHeight, feats, associatedRowName, model, blanks]);
-    var ref = useRef(null);
-    var labelRef = useRef(null);
-    var mouseoverRef = useRef(null);
-    useEffect(function () {
-        if (!ref.current) {
-            return;
-        }
-        var ctx = ref.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.resetTransform();
-        ctx.scale(highResScaleFactor, highResScaleFactor);
-        ctx.clearRect(0, 0, blockSize, height);
-        ctx.translate(-offsetX, 0);
-        ctx.textAlign = 'center';
-        ctx.font = ctx.font.replace(/\d+px/, "".concat(Math.max(8, rowHeight - 8), "px"));
-        var xStart = Math.max(0, Math.floor(offsetX / colWidth));
-        ctx.fillStyle = 'goldenrod';
-        layout.rectangles.forEach(function (value) {
-            var minX = value.minX, maxX = value.maxX, minY = value.minY, maxY = value.maxY;
-            var x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth);
-            var x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth);
-            if (x2 - x1 > 0) {
-                ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2);
-            }
-        });
-    }, [
-        associatedRowName,
-        blockSize,
-        colWidth,
-        layout.rectangles,
-        model,
-        rowHeight,
-        height,
-        offsetX,
-        highResScaleFactor,
-        features,
-        blanks,
-    ]);
-    useEffect(function () {
-        if (!labelRef.current) {
-            return;
-        }
-        var ctx = labelRef.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        // this logic is very similar to MSACanvas
-        ctx.resetTransform();
-        ctx.scale(highResScaleFactor, highResScaleFactor);
-        ctx.clearRect(0, 0, blockSize, height);
-        ctx.translate(-offsetX, 0);
-        ctx.textAlign = 'center';
-        ctx.font = ctx.font.replace(/\d+px/, "".concat(Math.max(8, rowHeight - 8), "px"));
-        ctx.fillStyle = 'black';
-        ctx.textAlign = 'left';
-        layout.rectangles.forEach(function (value) {
-            var _a, _b, _c, _d;
-            var minX = value.minX, maxX = value.maxX, maxY = value.maxY, minY = value.minY;
-            var feature = value.data;
-            var x1 = minX * colWidth;
-            var x2 = maxX * colWidth;
-            if (x2 - x1 > 0) {
-                var note = (_b = (_a = feature.attributes) === null || _a === void 0 ? void 0 : _a.Note) === null || _b === void 0 ? void 0 : _b[0];
-                var name_1 = (_d = (_c = feature.attributes) === null || _c === void 0 ? void 0 : _c.Name) === null || _d === void 0 ? void 0 : _d[0];
-                var type = feature.type;
-                ctx.fillText([type, name_1, note].filter(function (f) { return !!f; }).join(' - '), Math.max(Math.min(-scrollX, x2), x1), minY + (maxY - minY));
-            }
-        });
-    }, [
-        blockSize,
-        colWidth,
-        scrollX,
-        highResScaleFactor,
-        height,
-        layout.rectangles,
-        offsetX,
-        features,
-        model,
-        rowHeight,
-        blanks,
-    ]);
-    return !features ? null : (React.createElement(React.Fragment, null,
-        React.createElement("canvas", { ref: ref, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                position: 'absolute',
-                left: scrollX + offsetX,
-                width: blockSize,
-                height: height,
-            } }),
-        React.createElement("canvas", { ref: labelRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                position: 'absolute',
-                left: scrollX + offsetX,
-                width: blockSize,
-                height: height,
-            } }),
-        React.createElement("canvas", { ref: mouseoverRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-                position: 'absolute',
-                left: scrollX + offsetX,
-                width: blockSize,
-                height: height,
-            } })));
-});
-var AnnotationTrack = observer(function (_a) {
-    var model = _a.model, track = _a.track;
-    var blocksX = model.blocksX, msaAreaWidth = model.msaAreaWidth;
-    var height = track.model.height;
+import BoxTrackBlock from './BoxTrackBlock';
+const BoxTrack = observer(function ({ model, track, }) {
+    const { blocksX, msaAreaWidth } = model;
+    const { height } = track.model;
     return (React.createElement("div", { style: {
             position: 'relative',
-            height: height,
+            height,
             width: msaAreaWidth,
             overflow: 'hidden',
-        } }, blocksX.map(function (bx) { return (React.createElement(AnnotationBlock, { track: track, key: bx, model: model, offsetX: bx })); })));
+        } }, blocksX.map(bx => (React.createElement(BoxTrackBlock, { track: track, key: bx, model: model, offsetX: bx })))));
 });
-export default AnnotationTrack;
+export default BoxTrack;
+//# sourceMappingURL=BoxTrack.js.map

package/dist/components/BoxTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxTrack.js","sourceRoot":"","sources":["../../src/components/BoxTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAClC,KAAK,EACL,KAAK,GAIN;IACC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IACvC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAA;IAC9B,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM;YACN,KAAK,EAAE,YAAY;YACnB,QAAQ,EAAE,QAAQ;SACnB,IAEA,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACjB,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,GAAI,CACpE,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/BoxTrackBlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IBoxTrack, MsaViewModel } from '../model';
+declare const BoxTrackBlock: ({ track, model, offsetX, }: {
+    track: IBoxTrack;
+    model: MsaViewModel;
+    offsetX: number;
+}) => React.JSX.Element | null;
+export default BoxTrackBlock;

package/dist/components/BoxTrackBlock.js

@@ -0,0 +1,136 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree';
+import Layout from '../layout';
+const BoxTrackBlock = observer(function ({ track, model, offsetX, }) {
+    const { blockSize, colWidth, blanks, rowHeight, highResScaleFactor, scrollX, } = model;
+    const { height, features, associatedRowName } = track.model;
+    const feats = isStateTreeNode(features)
+        ? // @ts-expect-error
+            getSnapshot(features)
+        : features;
+    const layout = useMemo(() => {
+        const temp = new Layout();
+        feats === null || feats === void 0 ? void 0 : feats.forEach((feature, index) => {
+            const { start, end } = feature;
+            if (associatedRowName) {
+                const s = model.rowSpecificBpToPx(associatedRowName, start - 1);
+                const e = model.rowSpecificBpToPx(associatedRowName, end);
+                temp.addRect(`${index}`, s, e, rowHeight, feature);
+            }
+            else {
+                const s = model.globalBpToPx(start - 1);
+                const e = model.globalBpToPx(end);
+                temp.addRect(`${index}`, s, e, rowHeight, feature);
+            }
+        });
+        return temp;
+        // might convert to autorun based drawing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowHeight, feats, associatedRowName, model, blanks]);
+    const ref = useRef(null);
+    const labelRef = useRef(null);
+    const mouseoverRef = useRef(null);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const ctx = ref.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.scale(highResScaleFactor, highResScaleFactor);
+        ctx.clearRect(0, 0, blockSize, height);
+        ctx.translate(-offsetX, 0);
+        ctx.textAlign = 'center';
+        ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`);
+        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        ctx.fillStyle = 'goldenrod';
+        layout.rectangles.forEach(value => {
+            const { minX, maxX, minY, maxY } = value;
+            const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth);
+            const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth);
+            if (x2 - x1 > 0) {
+                ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2);
+            }
+        });
+    }, [
+        associatedRowName,
+        blockSize,
+        colWidth,
+        layout.rectangles,
+        model,
+        rowHeight,
+        height,
+        offsetX,
+        highResScaleFactor,
+        features,
+        blanks,
+    ]);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!labelRef.current) {
+            return;
+        }
+        const ctx = labelRef.current.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        // this logic is very similar to MSACanvas
+        ctx.resetTransform();
+        ctx.scale(highResScaleFactor, highResScaleFactor);
+        ctx.clearRect(0, 0, blockSize, height);
+        ctx.translate(-offsetX, 0);
+        ctx.textAlign = 'center';
+        ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`);
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'left';
+        for (const value of layout.rectangles.values()) {
+            const { minX, maxX, maxY, minY, data } = value;
+            const x1 = minX * colWidth;
+            const x2 = maxX * colWidth;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const feature = data;
+            if (x2 - x1 > 0) {
+                const note = (_b = (_a = feature.attributes) === null || _a === void 0 ? void 0 : _a.Note) === null || _b === void 0 ? void 0 : _b[0];
+                const name = (_d = (_c = feature.attributes) === null || _c === void 0 ? void 0 : _c.Name) === null || _d === void 0 ? void 0 : _d[0];
+                const type = feature.type;
+                ctx.fillText([type, name, note].filter(f => !!f).join(' - '), Math.max(Math.min(-scrollX, x2), x1), minY + (maxY - minY));
+            }
+        }
+    }, [
+        blockSize,
+        colWidth,
+        scrollX,
+        highResScaleFactor,
+        height,
+        layout.rectangles,
+        offsetX,
+        features,
+        model,
+        rowHeight,
+        blanks,
+    ]);
+    return !features ? null : (React.createElement(React.Fragment, null,
+        React.createElement("canvas", { ref: ref, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height,
+            } }),
+        React.createElement("canvas", { ref: labelRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height,
+            } }),
+        React.createElement("canvas", { ref: mouseoverRef, height: height * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
+                position: 'absolute',
+                left: scrollX + offsetX,
+                width: blockSize,
+                height,
+            } })));
+});
+export default BoxTrackBlock;
+//# sourceMappingURL=BoxTrackBlock.js.map

package/dist/components/BoxTrackBlock.js.map

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

package/dist/components/Header.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { MsaViewModel } from '../model';
 declare const Header: ({ model }: {
     model: MsaViewModel;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Header;