@jbrowse/plugin-alignments 2.5.0 → 2.6.0

package/dist/LinearReadArcsDisplay/model.js

@@ -26,33 +26,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const mobx_1 = require("mobx");
+const react_1 = require("react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 // icons
 const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
 const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
 // locals
 const shared_1 = require("../shared");
-const drawFeats_1 = __importDefault(require("./drawFeats"));
-const fetchChains_1 = require("../shared/fetchChains");
 // async
 const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
-// stabilize clipid under test for snapshot
-function getId(id) {
-    const isJest = typeof jest === 'undefined';
-    return `arc-clip-${isJest ? id : 'jest'}`;
-}
 /**
  * #stateModel LinearReadArcsDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not
+ * BaseLinearDisplay
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
-        .compose('LinearReadArcsDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        .compose('LinearReadArcsDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), mobx_state_tree_1.types.model({
         /**
          * #property
          */
@@ -92,22 +86,40 @@ function stateModelFactory(configSchema) {
     }))
         .volatile(() => ({
         loading: false,
-        drawn: false,
         chainData: undefined,
+        lastDrawnOffsetPx: undefined,
+        lastDrawnBpPerPx: 0,
         ref: null,
-        lastDrawnOffsetPx: 0,
     }))
         .actions(self => ({
         /**
          * #action
-         * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
+         */
+        setLastDrawnOffsetPx(n) {
+            self.lastDrawnOffsetPx = n;
+        },
+        /**
+         * #action
+         */
+        setLastDrawnBpPerPx(n) {
+            self.lastDrawnBpPerPx = n;
+        },
+        /**
+         * #action
+         */
+        setLoading(f) {
+            self.loading = f;
+        },
+        /**
+         * #action
          */
         reload() {
             self.error = undefined;
         },
         /**
          * #action
-         * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
+         * internal, a reference to a HTMLCanvas because we use a autorun to draw
+         * the canvas
          */
         setRef(ref) {
             self.ref = ref;
@@ -139,81 +151,58 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        setLoading(f) {
-            self.loading = f;
+        setFilterBy(filter) {
+            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
         },
         /**
          * #action
-         * used during tests to detect when we can complete a snapshot test
+         * thin, bold, extrabold, etc
          */
-        setDrawn(f) {
-            self.drawn = f;
+        setLineWidth(n) {
+            self.lineWidth = n;
         },
         /**
          * #action
+         * jitter val, helpful to jitter the x direction so you see better
+         * evidence when e.g. 100 long reads map to same x position
          */
-        setFilterBy(filter) {
-            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        setJitter(n) {
+            self.jitter = n;
         },
+    }))
+        .views(self => ({
         /**
-         * #action
-         * allows the drawing to slide around a little bit if it takes a long time to refresh
+         * #getter
          */
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
+        get drawn() {
+            return self.lastDrawnOffsetPx !== undefined;
         },
         /**
-         * #action
-         * thin, bold, extrabold, etc
+         * #getter
          */
-        setLineWidth(n) {
-            self.lineWidth = n;
+        get lineWidthSetting() {
+            var _a;
+            return (_a = self.lineWidth) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'lineWidth');
         },
         /**
-         * #action
-         * jitter val, helpful to jitter the x direction so you see better evidence when e.g. 100
-         * long reads map to same x position
+         * #getter
          */
-        setJitter(n) {
-            self.jitter = n;
+        get jitterVal() {
+            var _a;
+            return (_a = self.jitter) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'jitter');
         },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
             /**
-             * #getter
-             */
-            get lineWidthSetting() {
-                var _a;
-                return (_a = self.lineWidth) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'lineWidth');
-            },
-            /**
-             * #getter
-             */
-            get jitterVal() {
-                var _a;
-                return (_a = self.jitter) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'jitter');
-            },
-            /**
-             * #getter
+             * #method
+             * only used to tell system it's ready for export
              */
-            get ready() {
-                return !!self.chainData;
-            },
-            // we don't use a server side renderer, but we need to provide this
-            // to avoid confusing the system currently
-            get rendererTypeName() {
-                return 'PileupRenderer';
-            },
-            // we don't use a server side renderer, so this fills in minimal
-            // info so as not to crash
             renderProps() {
                 return {
                     ...superRenderProps(),
-                    // never ready, we don't want to use server side render
-                    notReady: true,
-                    config: (0, configuration_1.ConfigurationSchema)('empty', {}).create(),
+                    notReady: !self.chainData,
                 };
             },
             /**
@@ -254,19 +243,19 @@ function stateModelFactory(configSchema) {
                         subMenu: [
                             {
                                 type: 'checkbox',
-                                checked: this.jitterVal === 0,
+                                checked: self.jitterVal === 0,
                                 label: 'None',
                                 onClick: () => self.setJitter(0),
                             },
                             {
                                 type: 'checkbox',
-                                checked: this.jitterVal === 2,
+                                checked: self.jitterVal === 2,
                                 label: 'Small',
                                 onClick: () => self.setJitter(2),
                             },
                             {
                                 type: 'checkbox',
-                                checked: this.jitterVal === 10,
+                                checked: self.jitterVal === 10,
                                 label: 'Large',
                                 onClick: () => self.setJitter(10),
                             },
@@ -315,65 +304,26 @@ function stateModelFactory(configSchema) {
          * #method
          */
         async renderSvg(opts) {
-            const view = (0, util_1.getContainingView)(self);
-            const width = view.dynamicBlocks.totalWidthPx;
-            const height = self.height;
-            let str;
-            if (opts.rasterizeLayers) {
-                const canvas = document.createElement('canvas');
-                canvas.width = width * 2;
-                canvas.height = height * 2;
-                const ctx = canvas.getContext('2d');
-                if (!ctx) {
-                    return;
-                }
-                ctx.scale(2, 2);
-                await (0, drawFeats_1.default)(self, ctx);
-                str = (react_1.default.createElement("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
-            }
-            else {
-                // @ts-ignore
-                const C2S = await Promise.resolve().then(() => __importStar(require('canvas2svg')));
-                const ctx = new C2S.default(width, height);
-                await (0, drawFeats_1.default)(self, ctx);
-                const clipid = getId(self.id);
-                str = (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("defs", null,
-                        react_1.default.createElement("clipPath", { id: clipid },
-                            react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-                    react_1.default.createElement("g", { 
-                        /* eslint-disable-next-line react/no-danger */
-                        dangerouslySetInnerHTML: {
-                            __html: ctx.getSvg().innerHTML,
-                        }, clipPath: `url(#${clipid})` })));
-            }
-            return react_1.default.createElement(react_1.default.Fragment, null, str);
+            const { renderSvg } = await Promise.resolve().then(() => __importStar(require('../shared/renderSvg')));
+            const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
+            return renderSvg(self, opts, drawFeats);
         },
     }))
         .actions(self => ({
         afterAttach() {
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => (0, fetchChains_1.fetchChains)(self), { delay: 1000 }));
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;
+            (async () => {
                 try {
-                    const canvas = self.ref;
-                    if (!canvas) {
-                        return;
-                    }
-                    const ctx = canvas.getContext('2d');
-                    if (!ctx) {
-                        return;
-                    }
-                    ctx.clearRect(0, 0, canvas.width, self.height * 2);
-                    ctx.resetTransform();
-                    ctx.scale(2, 2);
-                    await (0, drawFeats_1.default)(self, ctx);
-                    self.setDrawn(true);
+                    const { doAfterAttach } = await Promise.resolve().then(() => __importStar(require('../shared/afterAttach')));
+                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
+                    doAfterAttach(self, drawFeats);
                 }
                 catch (e) {
                     console.error(e);
                     self.setError(e);
                 }
-            }, { delay: 1000 }));
+            })();
         },
     }));
 }

package/dist/LinearReadArcsDisplay/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/LinearReadArcsDisplay/model.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/LinearReadArcsDisplay/model.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,qDAAuD;AACvD,+DAIoC;AACpC,6CAA+C;AAC/C,+EAAiE;AACjE,kFAG2C;AAE3C,QAAQ;AACR,0EAAqD;AACrD,4EAAyD;AAEzD,SAAS;AACT,sCAAuC;AAGvC,QAAQ;AACR,MAAM,cAAc,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,mDAAQ,uBAAuB,GAAC,CAAC,CAAA;AASlE;;;;GAIG;AACH,SAAS,iBAAiB,CAAC,YAAwC;IACjE,OAAO,uBAAK;SACT,OAAO,CACN,uBAAuB,EACvB,mCAAW,EACX,IAAA,4CAAgB,GAAE,EAClB,IAAA,+CAAmB,GAAE,EACrB,uBAAK,CAAC,KAAK,CAAC;QACV;;WAEG;QACH,IAAI,EAAE,uBAAK,CAAC,OAAO,CAAC,uBAAuB,CAAC;QAC5C;;WAEG;QACH,aAAa,EAAE,IAAA,sCAAsB,EAAC,YAAY,CAAC;QAEnD;;WAEG;QACH,QAAQ,EAAE,uBAAK,CAAC,QAAQ,CAAC,oBAAW,EAAE,EAAE,CAAC;QAEzC;;WAEG;QACH,SAAS,EAAE,uBAAK,CAAC,KAAK,CAAC,uBAAK,CAAC,MAAM,CAAC;QAEpC;;WAEG;QACH,MAAM,EAAE,uBAAK,CAAC,KAAK,CAAC,uBAAK,CAAC,MAAM,CAAC;QAEjC;;WAEG;QACH,OAAO,EAAE,uBAAK,CAAC,KAAK,CAClB,uBAAK,CAAC,KAAK,CAAC;YACV,IAAI,EAAE,uBAAK,CAAC,MAAM;YAClB,GAAG,EAAE,uBAAK,CAAC,KAAK,CAAC,uBAAK,CAAC,MAAM,CAAC;YAC9B,KAAK,EAAE,uBAAK,CAAC,MAAM,EAAE;SACtB,CAAC,CACH;QAED;;WAEG;QACH,SAAS,EAAE,IAAI;QAEf;;WAEG;QACH,aAAa,EAAE,IAAI;KACpB,CAAC,CACH;SACA,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACf,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,SAAkC;QAC7C,iBAAiB,EAAE,SAA+B;QAClD,gBAAgB,EAAE,CAAC;QACnB,GAAG,EAAE,IAAgC;KACtC,CAAC,CAAC;SACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB;;WAEG;QACH,oBAAoB,CAAC,CAAS;YAC5B,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAA;QAC5B,CAAC;QACD;;WAEG;QACH,mBAAmB,CAAC,CAAS;YAC3B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAA;QAC3B,CAAC;QACD;;WAEG;QACH,UAAU,CAAC,CAAU;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;QAClB,CAAC;QAED;;WAEG;QACH,MAAM;YACJ,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACxB,CAAC;QACD;;;;WAIG;QACH,MAAM,CAAC,GAA6B;YAClC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QAChB,CAAC;QAED;;WAEG;QACH,cAAc,CAAC,CAAmB;YAChC,IAAI,CAAC,OAAO,GAAG,IAAA,sBAAI,EAAC,CAAC,CAAC,CAAA;QACxB,CAAC;QAED;;WAEG;QACH,YAAY,CAAC,IAAe;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACvB,CAAC;QAED;;WAEG;QACH,YAAY,CAAC,CAAU;YACrB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QACpB,CAAC;QAED;;WAEG;QACH,gBAAgB,CAAC,CAAU;YACzB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACxB,CAAC;QAED;;WAEG;QACH,WAAW,CAAC,MAAc;YACxB,IAAI,CAAC,QAAQ,GAAG,IAAA,sBAAI,EAAC,MAAM,CAAC,CAAA;QAC9B,CAAC;QAED;;;WAGG;QACH,YAAY,CAAC,CAAS;YACpB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QACpB,CAAC;QAED;;;;WAIG;QACH,SAAS,CAAC,CAAS;YACjB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;QACjB,CAAC;KACF,CAAC,CAAC;SAEF,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACd;;WAEG;QACH,IAAI,KAAK;YACP,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAA;QAC7C,CAAC;QACD;;WAEG;QACH,IAAI,gBAAgB;;YAClB,OAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAA,uBAAO,EAAC,IAAI,EAAE,WAAW,CAAC,CAAA;QACrD,CAAC;QAED;;WAEG;QACH,IAAI,SAAS;;YACX,OAAO,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAA,uBAAO,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;QAC/C,CAAC;KACF,CAAC,CAAC;SACF,KAAK,CAAC,IAAI,CAAC,EAAE;QACZ,MAAM,EACJ,cAAc,EAAE,mBAAmB,EACnC,WAAW,EAAE,gBAAgB,GAC9B,GAAG,IAAI,CAAA;QACR,OAAO;YACL;;;eAGG;YACH,WAAW;gBACT,OAAO;oBACL,GAAG,gBAAgB,EAAE;oBACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;iBAC1B,CAAA;YACH,CAAC;YAED;;eAEG;YACH,cAAc;gBACZ,OAAO;oBACL,GAAG,mBAAmB,EAAE;oBACxB;wBACE,KAAK,EAAE,WAAW;wBAClB,IAAI,EAAE,kBAAc;wBACpB,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAA,iBAAU,EAAC,IAAI,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;gCAC1C,cAAc;gCACd,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE;6BAC7B,CAAC,CAAA;wBACJ,CAAC;qBACF;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,MAAM;gCACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;6BACpC;4BACD;gCACE,KAAK,EAAE,MAAM;gCACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;6BACpC;4BACD;gCACE,KAAK,EAAE,YAAY;gCACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;6BACpC;yBACF;qBACF;oBACD;wBACE,KAAK,EAAE,oBAAoB;wBAC3B,OAAO,EAAE;4BACP;gCACE,IAAI,EAAE,UAAU;gCAChB,OAAO,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC;gCAC7B,KAAK,EAAE,MAAM;gCACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;6BACjC;4BACD;gCACE,IAAI,EAAE,UAAU;gCAChB,OAAO,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC;gCAC7B,KAAK,EAAE,OAAO;gCACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;6BACjC;4BACD;gCACE,IAAI,EAAE,UAAU;gCAChB,OAAO,EAAE,IAAI,CAAC,SAAS,KAAK,EAAE;gCAC9B,KAAK,EAAE,OAAO;gCACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;6BAClC;yBACF;qBACF;oBACD;wBACE,KAAK,EAAE,kCAAkC;wBACzC,IAAI,EAAE,UAAU;wBAChB,OAAO,EAAE,IAAI,CAAC,SAAS;wBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;qBAClD;oBACD;wBACE,KAAK,EAAE,6BAA6B;wBACpC,IAAI,EAAE,UAAU;wBAChB,OAAO,EAAE,IAAI,CAAC,aAAa;wBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;qBAC1D;oBACD;wBACE,KAAK,EAAE,cAAc;wBACrB,IAAI,EAAE,iBAAW;wBACjB,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,kCAAkC;gCACzC,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,0BAA0B,EAAE,CAAC;6BAC5D;4BACD;gCACE,KAAK,EAAE,kBAAkB;gCACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;6BAC3D;4BACD;gCACE,KAAK,EAAE,aAAa;gCACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;6BAC5D;4BACD;gCACE,KAAK,EAAE,sBAAsB;gCAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;6BACzD;yBACF;qBACF;iBACF,CAAA;YACH,CAAC;SACF,CAAA;IACH,CAAC,CAAC;SACD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,SAAS,CAAC,IAEf;YACC,MAAM,EAAE,SAAS,EAAE,GAAG,wDAAa,qBAAqB,GAAC,CAAA;YACzD,MAAM,EAAE,SAAS,EAAE,GAAG,wDAAa,aAAa,GAAC,CAAA;YACjD,OAAO,SAAS,CAAC,IAAkC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAA;QACvE,CAAC;KACF,CAAC,CAAC;SACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB,WAAW;YACT,mEAAmE;YACnE,CAAC;YAAA,CAAC,KAAK,IAAI,EAAE;gBACX,IAAI;oBACF,MAAM,EAAE,aAAa,EAAE,GAAG,wDAAa,uBAAuB,GAAC,CAAA;oBAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,wDAAa,aAAa,GAAC,CAAA;oBACjD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;iBAC/B;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;oBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;iBACjB;YACH,CAAC,CAAC,EAAE,CAAA;QACN,CAAC;KACF,CAAC,CAAC,CAAA;AACP,CAAC;AAQD,kBAAe,iBAAiB,CAAA"}

package/dist/LinearReadArcsDisplay/util.d.ts

@@ -0,0 +1,2 @@
+import { ChainData } from '../shared/fetchChains';
+export declare function hasPairedReads(features: ChainData): boolean;

package/dist/LinearReadArcsDisplay/util.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasPairedReads = void 0;
+function hasPairedReads(features) {
+    for (const f of features.chains.values()) {
+        if (f[0].flags & 1) {
+            return true;
+        }
+    }
+    return false;
+}
+exports.hasPairedReads = hasPairedReads;
+//# sourceMappingURL=util.js.map

package/dist/LinearReadArcsDisplay/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/LinearReadArcsDisplay/util.ts"],"names":[],"mappings":";;;AAEA,SAAgB,cAAc,CAAC,QAAmB;IAChD,KAAK,MAAM,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,OAAO,IAAI,CAAA;SACZ;KACF;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAPD,wCAOC"}

package/dist/LinearReadCloudDisplay/components/ReactComponent.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { LinearReadCloudDisplayModel } from '../model';
 declare const _default: ({ model, }: {
     model: LinearReadCloudDisplayModel;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/dist/LinearReadCloudDisplay/components/ReactComponent.js

@@ -1,49 +1,47 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const mobx_state_tree_1 = require("mobx-state-tree");
+const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
 const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    loading: {
-        paddingLeft: '0.6em',
-        backgroundColor: theme.palette.action.disabledBackground,
-        backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-        height: '100%',
-        width: '100%',
-        pointerEvents: 'none',
-        textAlign: 'center',
-    },
-}));
+const BaseDisplayComponent_1 = __importDefault(require("../../shared/BaseDisplayComponent"));
 const Cloud = (0, mobx_react_1.observer)(function ({ model, }) {
     const view = (0, util_1.getContainingView)(model);
-    return (react_1.default.createElement("canvas", { "data-testid": `ReadCloud-display-${model.drawn}`, ref: ref => {
-            if ((0, mobx_state_tree_1.isAlive)(model)) {
-                model.setRef(ref);
-            }
-        }, style: {
-            position: 'absolute',
-            left: -view.offsetPx + model.lastDrawnOffsetPx,
-            width: view.dynamicBlocks.totalWidthPx,
-            height: model.height,
-        }, width: view.dynamicBlocks.totalWidthPx * 2, height: model.height * 2 }));
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const height = model.height;
+    const cb = (0, react_1.useCallback)((ref) => model.setRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, width, height]);
+    // note: the position absolute below avoids scrollbar from appearing on track
+    return (react_1.default.createElement("canvas", { "data-testid": "cloud-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 exports.default = (0, mobx_react_1.observer)(function ({ model, }) {
-    const view = (0, util_1.getContainingView)(model);
-    const { classes } = useStyles();
-    const err = model.error;
-    return err ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${err}`, severity: "error", buttonText: 'Reload', action: model.reload })) : model.loading ? (react_1.default.createElement("div", { className: classes.loading, style: {
-            width: view.dynamicBlocks.totalWidthPx,
-            height: 20,
-            position: 'absolute',
-            left: Math.max(0, -view.offsetPx),
-        } },
-        react_1.default.createElement(ui_1.LoadingEllipses, { message: model.message }))) : (react_1.default.createElement(Cloud, { model: model }));
+    return (react_1.default.createElement(BaseDisplayComponent_1.default, { model: model },
+        react_1.default.createElement(Cloud, { model: model })));
 });
 //# sourceMappingURL=ReactComponent.js.map

package/dist/LinearReadCloudDisplay/components/ReactComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactComponent.js","sourceRoot":"","sources":["../../../src/LinearReadCloudDisplay/components/ReactComponent.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,qDAAyC;AACzC,2CAAqC;AACrC,uCAA0C;AAC1C,6CAAsD;AACtD,yCAAkD;AAClD,kFAG2C;AAO3C,MAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,EAAE;QACP,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,kBAAkB;QACxD,eAAe,EACb,qHAAqH;QACvH,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,MAAM;QACrB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,KAAK,GAAG,IAAA,qBAAQ,EAAC,UAAU,EAC/B,KAAK,GAGN;IACC,MAAM,IAAI,GAAG,IAAA,wBAAiB,EAAC,KAAK,CAAQ,CAAA;IAC5C,OAAO,CACL,yDACe,qBAAqB,KAAK,CAAC,KAAK,EAAE,EAC/C,GAAG,EAAE,GAAG,CAAC,EAAE;YACT,IAAI,IAAA,yBAAO,EAAC,KAAK,CAAC,EAAE;gBAClB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;aAClB;QACH,CAAC,EACD,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,iBAAiB;YAC9C,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,YAAY;YACtC,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,EACD,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,YAAY,GAAG,CAAC,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,GACxB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAe,IAAA,qBAAQ,EAAC,UAAU,EAChC,KAAK,GAGN;IACC,MAAM,IAAI,GAAG,IAAA,wBAAiB,EAAC,KAAK,CAAC,CAAA;IACrC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAA;IACvB,OAAO,GAAG,CAAC,CAAC,CAAC,CACX,8BAAC,oCAAQ,IACP,OAAO,EAAE,GAAG,GAAG,EAAE,EACjB,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAE,QAAQ,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,uCACE,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,KAAK,EAAE;YACL,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,YAAY;YACtC,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;SAClC;QAED,8BAAC,oBAAe,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACvC,CACP,CAAC,CAAC,CAAC,CACF,8BAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"ReactComponent.js","sourceRoot":"","sources":["../../../src/LinearReadCloudDisplay/components/ReactComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,2CAAqC;AACrC,6CAAsD;AAKtD,6FAAoE;AAIpE,MAAM,KAAK,GAAG,IAAA,qBAAQ,EAAC,UAAU,EAC/B,KAAK,GAGN;IACC,MAAM,IAAI,GAAG,IAAA,wBAAiB,EAAC,KAAK,CAAQ,CAAA;IAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC3B,MAAM,EAAE,GAAG,IAAA,mBAAW,EACpB,CAAC,GAAsB,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;IAC7C,uDAAuD;IACvD,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CACvB,CAAA;IAED,6EAA6E;IAC7E,OAAO,CACL,yDACc,cAAc,EAC1B,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAC9C,KAAK,EAAE,KAAK,GAAG,CAAC,EAChB,MAAM,EAAE,MAAM,GAAG,CAAC,GAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAe,IAAA,qBAAQ,EAAC,UAAU,EAChC,KAAK,GAGN;IACC,OAAO,CACL,8BAAC,8BAAoB,IAAC,KAAK,EAAE,KAAK;QAChC,8BAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CACF,CACxB,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/LinearReadCloudDisplay/configSchema.d.ts

@@ -38,7 +38,9 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
     fetchSizeLimit: {
         type: string;
         defaultValue: number;
-        description: string;
+        description: string; /**
+         * #slot
+         */
     };
     height: {
         type: string;

package/dist/LinearReadCloudDisplay/drawFeats.d.ts

@@ -1,12 +1,2 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { ChainData } from '../shared/fetchChains';
-export default function drawFeats(self: {
-    setLastDrawnOffsetPx: (n: number) => void;
-    setError: (e: unknown) => void;
-    colorBy?: {
-        type: string;
-    };
-    height: number;
-    chainData?: ChainData;
-    configuration: AnyConfigurationModel;
-}, ctx: CanvasRenderingContext2D): Promise<void>;
+import { LinearReadCloudDisplayModel } from './model';
+export declare function drawFeats(self: LinearReadCloudDisplayModel, ctx: CanvasRenderingContext2D): void;

package/dist/LinearReadCloudDisplay/drawFeats.js

@@ -1,145 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const configuration_1 = require("@jbrowse/core/configuration");
+exports.drawFeats = void 0;
 const util_1 = require("@jbrowse/core/util");
-// locals
-const color_1 = require("../shared/color");
-// avoid drawing negative width features for SVG exports
-function fillRectCtx(x, y, width, height, ctx, color) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (color) {
-        ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
-}
-async function drawFeats(self, ctx) {
-    var _a;
+const util_2 = require("../shared/util");
+const drawPairChains_1 = require("./drawPairChains");
+const drawLongReadChains_1 = require("./drawLongReadChains");
+function drawFeats(self, ctx) {
     const { chainData } = self;
     if (!chainData) {
         return;
     }
     const { assemblyManager } = (0, util_1.getSession)(self);
-    const featureHeight = (0, configuration_1.getConf)(self, 'featureHeight');
-    const displayHeight = self.height;
     const view = (0, util_1.getContainingView)(self);
     const assemblyName = view.assemblyNames[0];
     const asm = assemblyManager.get(assemblyName);
     if (!asm) {
         return;
     }
-    self.setLastDrawnOffsetPx(view.offsetPx);
-    const { chains, stats } = chainData;
-    const coords = [];
-    for (let i = 0; i < chains.length; i++) {
-        const chain = chains[i];
-        // if we're looking at a paired read (flag 1) then assume it is just two
-        // reads (some small cases may defy this assumption such as secondary
-        // alignments but this may be uncommon)
-        if (chain[0].flags & 1 && chain.length > 1) {
-            const v0 = chain[0];
-            const v1 = chain[1];
-            const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName;
-            const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName;
-            const r1s = view.bpToPx({ refName: ra1, coord: v0.start });
-            const r1e = view.bpToPx({ refName: ra1, coord: v0.end });
-            const r2s = view.bpToPx({ refName: ra2, coord: v1.start });
-            const r2e = view.bpToPx({ refName: ra2, coord: v1.end });
-            let distance = 0;
-            if (r1s !== undefined &&
-                r1e !== undefined &&
-                r2s !== undefined &&
-                r2e !== undefined) {
-                if (v0.refName === v1.refName) {
-                    const s = Math.min(v0.start, v1.start);
-                    const e = Math.max(v0.end, v1.end);
-                    distance = Math.abs(e - s);
-                }
-                coords.push({
-                    r1s: r1s.offsetPx,
-                    r1e: r1e.offsetPx,
-                    r2s: r2s.offsetPx,
-                    r2e: r2e.offsetPx,
-                    v0,
-                    v1,
-                    distance,
-                });
-            }
-        }
-        else {
-            // if we're not looking at pairs, then it could be a multiply-split-long
-            // read, so traverse chain
-            for (let i = 1; i < chain.length; i++) {
-                const v0 = chain[i - 1];
-                const v1 = chain[i];
-                const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName;
-                const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName;
-                const r1s = view.bpToPx({ refName: ra1, coord: v0.start });
-                const r1e = view.bpToPx({ refName: ra1, coord: v0.end });
-                const r2s = view.bpToPx({ refName: ra2, coord: v1.start });
-                const r2e = view.bpToPx({ refName: ra2, coord: v1.end });
-                let distance = 0;
-                if (r1s !== undefined &&
-                    r1e !== undefined &&
-                    r2s !== undefined &&
-                    r2e !== undefined) {
-                    if (v0.refName === v1.refName) {
-                        const s = Math.min(v0.start, v1.start);
-                        const e = Math.max(v0.end, v1.end);
-                        distance = Math.abs(e - s);
-                    }
-                    coords.push({
-                        r1s: r1s.offsetPx,
-                        r1e: r1e.offsetPx,
-                        r2s: r2s.offsetPx,
-                        r2e: r2e.offsetPx,
-                        v0,
-                        v1,
-                        distance,
-                    });
-                }
-            }
-        }
-    }
-    let max = 0;
-    for (let i = 0; i < coords.length; i++) {
-        const { distance } = coords[i];
-        max = Math.max(max, distance);
+    const hasPaired = (0, util_2.hasPairedReads)(chainData);
+    if (hasPaired) {
+        (0, drawPairChains_1.drawPairChains)({ self, view, asm, ctx, chainData });
     }
-    const halfHeight = featureHeight / 2 - 0.5;
-    const scaler = (displayHeight - 20) / Math.log(max);
-    for (let i = 0; i < coords.length; i++) {
-        const { r1s, r1e, r2s, r2e, v0, v1, distance } = coords[i];
-        const type = ((_a = self.colorBy) === null || _a === void 0 ? void 0 : _a.type) || 'insertSizeAndOrientation';
-        const top = Math.log(distance) * scaler;
-        ctx.fillStyle = 'black';
-        const w = r2s - r1e;
-        fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx);
-        if (type === 'insertSizeAndOrientation') {
-            ctx.fillStyle = (0, color_1.getInsertSizeAndOrientationColor)(v0, v1, stats);
-        }
-        else if (type === 'orientation') {
-            ctx.fillStyle = (0, color_1.getOrientationColor)(v0);
-        }
-        else if (type === 'insertSize') {
-            ctx.fillStyle = (0, color_1.getInsertSizeColor)(v0, v1, stats) || 'grey';
-        }
-        else if (type === 'gradient') {
-            const s = Math.min(v0.start, v1.start);
-            const e = Math.max(v0.end, v1.end);
-            ctx.fillStyle = `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`;
-        }
-        const w1 = Math.max(r1e - r1s, 2);
-        const w2 = Math.max(r2e - r2s, 2);
-        fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx);
-        fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx);
+    else {
+        (0, drawLongReadChains_1.drawLongReadChains)({ self, view, asm, ctx, chainData });
     }
 }
-exports.default = drawFeats;
+exports.drawFeats = drawFeats;
 //# sourceMappingURL=drawFeats.js.map