@jbrowse/plugin-variants 2.18.0 → 3.0.0

package/dist/MultiLinearVariantDisplay/model.js

@@ -15,198 +15,44 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
 exports.stateModelFactory = stateModelFactory;
-const react_1 = require("react");
-const colors_1 = require("@jbrowse/core/ui/colors");
 const util_1 = require("@jbrowse/core/util");
-const stopToken_1 = require("@jbrowse/core/util/stopToken");
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const mobx_state_tree_1 = require("mobx-state-tree");
-const util_2 = require("../util");
-const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/Tooltip'))));
-const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/SetColorDialog'))));
-const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/ClusterDialog'))));
-function stateModelFactory(pluginManager, configSchema) {
+const MultiVariantBaseModel_1 = __importDefault(require("../shared/MultiVariantBaseModel"));
+function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
-        .compose('MultiLinearVariantDisplay', (0, plugin_linear_genome_view_1.linearBareDisplayStateModelFactory)(configSchema), mobx_state_tree_1.types.model({
+        .compose('MultiLinearVariantDisplay', (0, MultiVariantBaseModel_1.default)(configSchema), mobx_state_tree_1.types.model({
         type: mobx_state_tree_1.types.literal('MultiLinearVariantDisplay'),
-        layout: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), []),
         rowHeightSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 11),
+        minorAlleleFrequencyFilter: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 0),
         autoHeight: false,
-        showSidebarLabelsSetting: true,
-    }))
-        .volatile(() => ({
-        sourcesLoadingStopToken: undefined,
-        featureUnderMouseVolatile: undefined,
-        sourcesVolatile: undefined,
-    }))
-        .actions(self => ({
-        setSourcesLoading(str) {
-            if (self.sourcesLoadingStopToken) {
-                (0, stopToken_1.stopStopToken)(self.sourcesLoadingStopToken);
-            }
-            self.sourcesLoadingStopToken = str;
-        },
-        setLayout(layout) {
-            self.layout = layout;
-        },
-        clearLayout() {
-            self.layout = [];
-        },
-        setSources(sources) {
-            if (!(0, fast_deep_equal_1.default)(sources, self.sourcesVolatile)) {
-                self.sourcesVolatile = sources;
-            }
-        },
-        setFeatureUnderMouse(f) {
-            self.featureUnderMouseVolatile = f;
-        },
-        setRowHeight(arg) {
-            self.rowHeightSetting = arg;
-        },
-        setAutoHeight(arg) {
-            self.autoHeight = arg;
-        },
-        setShowSidebarLabels(arg) {
-            self.showSidebarLabelsSetting = arg;
-        },
-    }))
-        .views(self => ({
-        get featureUnderMouse() {
-            return self.featureUnderMouseVolatile;
-        },
-        get TooltipComponent() {
-            return Tooltip;
-        },
     }))
-        .views(self => ({
+        .views(() => ({
         get rendererTypeName() {
             return 'MultiVariantRenderer';
         },
-        get sources() {
-            var _a;
-            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
-            const iter = self.layout.length ? self.layout : self.sourcesVolatile;
-            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
-                ...sources[s.name],
-                ...s,
-            })).map((s, i) => ({
-                ...s,
-                color: s.color || colors_1.set1[i] || (0, util_2.randomColor)(s.name),
-            }));
-        },
-    }))
-        .views(self => ({
-        get rowHeight() {
-            const { autoHeight, sources, rowHeightSetting, height } = self;
-            return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
-        },
-    }))
-        .views(self => {
-        const { renderProps: superRenderProps } = self;
-        return {
-            get canDisplayLabels() {
-                return self.rowHeight > 8 && self.showSidebarLabelsSetting;
-            },
-            get totalHeight() {
-                var _a;
-                return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
-            },
-            adapterProps() {
-                const superProps = superRenderProps();
-                return {
-                    ...superProps,
-                    displayModel: self,
-                    config: self.rendererConfig,
-                    rpcDriverName: self.rpcDriverName,
-                    sources: self.sources,
-                };
-            },
-        };
-    })
-        .views(self => ({
-        renderProps() {
-            const superProps = self.adapterProps();
-            return {
-                ...superProps,
-                notReady: superProps.notReady || !self.sources,
-                displayModel: self,
-                rpcDriverName: self.rpcDriverName,
-                height: self.height,
-                totalHeight: self.totalHeight,
-                rowHeight: self.rowHeight,
-                scrollTop: self.scrollTop,
-                onMouseMove: (_, f) => {
-                    self.setFeatureUnderMouse(f);
-                },
-                onMouseLeave: () => {
-                    self.setFeatureUnderMouse(undefined);
-                },
-            };
-        },
     }))
-        .views(self => {
-        const { trackMenuItems: superTrackMenuItems } = self;
-        return {
-            trackMenuItems() {
-                return [
-                    ...superTrackMenuItems(),
-                    {
-                        label: 'Adjust to height of display?',
-                        type: 'checkbox',
-                        checked: self.autoHeight,
-                        onClick: () => {
-                            self.setAutoHeight(!self.autoHeight);
-                        },
-                    },
-                    {
-                        label: 'Show sidebar labels',
-                        type: 'checkbox',
-                        checked: self.showSidebarLabelsSetting,
-                        onClick: () => {
-                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
-                        },
-                    },
-                    {
-                        label: 'Cluster by genotype',
-                        onClick: () => {
-                            (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                ClusterDialog,
-                                {
-                                    model: self,
-                                    handleClose,
-                                },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Edit colors/arrangement...',
-                        onClick: () => {
-                            (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                SetColorDialog,
-                                {
-                                    model: self,
-                                    handleClose,
-                                },
-                            ]);
-                        },
-                    },
-                ];
-            },
-        };
-    })
         .actions(self => {
         const { renderSvg: superRenderSvg } = self;
         return {
@@ -215,7 +61,9 @@ function stateModelFactory(pluginManager, configSchema) {
                 (async () => {
                     try {
                         const { getMultiVariantSourcesAutorun } = await Promise.resolve().then(() => __importStar(require('../getMultiVariantSourcesAutorun')));
+                        const { getMultiVariantFeaturesAutorun } = await Promise.resolve().then(() => __importStar(require('../getMultiVariantFeaturesAutorun')));
                         getMultiVariantSourcesAutorun(self);
+                        getMultiVariantFeaturesAutorun(self);
                     }
                     catch (e) {
                         if ((0, mobx_state_tree_1.isAlive)(self)) {

package/dist/MultiLinearVariantDisplay/renderSvg.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MultiLinearVariantDisplayModel } from './model';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
-export declare function renderSvg(self: MultiLinearVariantDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<React.JSX.Element>;
+export declare function renderSvg(self: MultiLinearVariantDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/MultiLinearVariantDisplay/renderSvg.js

@@ -4,15 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderSvg = renderSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
 const LegendBar_1 = __importDefault(require("../shared/LegendBar"));
 async function renderSvg(self, opts, superRenderSvg) {
     await (0, mobx_1.when)(() => !!self.regionCannotBeRenderedText);
     const { offsetPx } = (0, util_1.getContainingView)(self);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("g", null, await superRenderSvg(opts)),
-        react_1.default.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            react_1.default.createElement(LegendBar_1.default, { model: self, orientation: "left", exportSVG: true }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("g", { children: await superRenderSvg(opts) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: (0, jsx_runtime_1.jsx)(LegendBar_1.default, { model: self, orientation: "left", exportSVG: true }) })] }));
 }

package/dist/MultiLinearVariantMatrixDisplay/components/Crosshair.d.ts

@@ -0,0 +1,7 @@
+import type { MultiLinearVariantMatrixDisplayModel } from '../model';
+declare const Crosshair: ({ mouseX, mouseY, model, }: {
+    mouseX: number;
+    mouseY: number;
+    model: MultiLinearVariantMatrixDisplayModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Crosshair;

package/dist/MultiLinearVariantMatrixDisplay/components/Crosshair.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const MultiVariantTooltip_1 = __importDefault(require("../../shared/MultiVariantTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 1000,
+        position: 'relative',
+    },
+});
+const Crosshair = (0, mobx_react_1.observer)(function ({ mouseX, mouseY, model, }) {
+    const { classes } = useStyles();
+    const { hoveredGenotype, lineZoneHeight, totalHeight, rowHeight, sources } = model;
+    const { width } = (0, util_1.getContainingView)(model);
+    const source = sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - lineZoneHeight) / rowHeight)];
+    const yoff = mouseY - lineZoneHeight;
+    return source ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: classes.cursor, width: width, height: totalHeight, style: {
+                    top: lineZoneHeight,
+                }, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: width, y1: yoff, y2: yoff, stroke: "black" }), (0, jsx_runtime_1.jsx)("line", { x1: mouseX, x2: mouseX, y1: 0, y2: totalHeight, stroke: "black" })] }), (0, jsx_runtime_1.jsx)(MultiVariantTooltip_1.default, { source: { ...source, hoveredGenotype } })] })) : null;
+});
+exports.default = Crosshair;

package/dist/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { MultiLinearVariantMatrixDisplayModel } from '../model';
 declare const LinesConnectingMatrixToGenomicPosition: ({ model, exportSVG, }: {
     model: MultiLinearVariantMatrixDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default LinesConnectingMatrixToGenomicPosition;

package/dist/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -1,42 +1,39 @@
 "use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
     const { height } = model;
     const { width, offsetPx } = (0, util_1.getContainingView)(model);
     const left = Math.max(0, -offsetPx);
-    return exportSVG ? (react_1.default.createElement("g", { transform: `translate(${left})` }, children)) : (react_1.default.createElement("svg", { style: {
+    return exportSVG ? ((0, jsx_runtime_1.jsx)("g", { transform: `translate(${left})`, children: children })) : ((0, jsx_runtime_1.jsx)("svg", { style: {
             position: 'absolute',
             top: 0,
             left,
             pointerEvents: 'none',
             height,
             width,
-        } }, children));
+        }, children: children }));
 });
 const LinesConnectingMatrixToGenomicPosition = (0, mobx_react_1.observer)(function ({ model, exportSVG, }) {
     var _a;
     const { assemblyManager } = (0, util_1.getSession)(model);
     const view = (0, util_1.getContainingView)(model);
-    const { featuresVolatile } = model;
+    const { lineZoneHeight, featuresVolatile } = model;
     const { offsetPx, assemblyNames, dynamicBlocks } = view;
     const assembly = assemblyManager.get(assemblyNames[0]);
     const b0 = ((_a = dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.widthPx) || 0;
     const w = b0 / ((featuresVolatile === null || featuresVolatile === void 0 ? void 0 : featuresVolatile.length) || 1);
     const l = Math.max(offsetPx, 0);
-    return assembly && featuresVolatile ? (react_1.default.createElement(Wrapper, { exportSVG: exportSVG, model: model }, featuresVolatile.map((f, i) => {
-        var _a;
-        const ref = f.get('refName');
-        const c = (((_a = view.bpToPx({
-            refName: assembly.getCanonicalRefName(ref) || ref,
-            coord: f.get('start'),
-        })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
-        return (react_1.default.createElement("line", { stroke: "black", key: f.id(), x1: i * w + w / 2, x2: c, y1: 20, y2: 0 }));
-    }))) : null;
+    return assembly && featuresVolatile ? ((0, jsx_runtime_1.jsx)(Wrapper, { exportSVG: exportSVG, model: model, children: featuresVolatile.map((f, i) => {
+            var _a;
+            const ref = f.get('refName');
+            const c = (((_a = view.bpToPx({
+                refName: assembly.getCanonicalRefName(ref) || ref,
+                coord: f.get('start'),
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
+            return ((0, jsx_runtime_1.jsx)("line", { stroke: "#0004", x1: i * w + w / 2, x2: c, y1: lineZoneHeight, y2: 0 }, f.id()));
+        }) })) : null;
 });
 exports.default = LinesConnectingMatrixToGenomicPosition;

package/dist/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { MultiLinearVariantMatrixDisplayModel } from '../model';
 declare const MultiLinearVariantMatrixDisplayComponent: (props: {
     model: MultiLinearVariantMatrixDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MultiLinearVariantMatrixDisplayComponent;

package/dist/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.js

@@ -1,56 +1,22 @@
 "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 = __importStar(require("react"));
-const ui_1 = require("@jbrowse/core/ui");
-const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
-const util_1 = require("@jbrowse/core/util");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
+const Crosshair_1 = __importDefault(require("./Crosshair"));
 const LinesConnectingMatrixToGenomicPosition_1 = __importDefault(require("./LinesConnectingMatrixToGenomicPosition"));
 const LegendBar_1 = __importDefault(require("../../shared/LegendBar"));
-const useStyles = (0, mui_1.makeStyles)()({
-    cursor: {
-        pointerEvents: 'none',
-        zIndex: 1000,
-        position: 'relative',
-    },
-});
 const MultiLinearVariantMatrixDisplayComponent = (0, mobx_react_1.observer)(function (props) {
-    const { classes } = useStyles();
     const { model } = props;
-    const { height, sources, rowHeight } = model;
+    const { lineZoneHeight } = model;
     const ref = (0, react_1.useRef)(null);
     const [mouseY, setMouseY] = (0, react_1.useState)();
     const [mouseX, setMouseX] = (0, react_1.useState)();
-    const { width } = (0, util_1.getContainingView)(model);
-    return (react_1.default.createElement("div", { ref: ref, onMouseMove: event => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, onMouseMove: event => {
             var _a;
             const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             const top = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
@@ -60,22 +26,6 @@ const MultiLinearVariantMatrixDisplayComponent = (0, mobx_react_1.observer)(func
         }, onMouseLeave: () => {
             setMouseY(undefined);
             setMouseX(undefined);
-        } },
-        react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(LinesConnectingMatrixToGenomicPosition_1.default, { model: model }),
-            react_1.default.createElement("div", { style: { position: 'absolute', top: 20 } },
-                react_1.default.createElement(LegendBar_1.default, { model: model }),
-                react_1.default.createElement(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }))),
-        mouseY &&
-            mouseY > 20 &&
-            (sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - 20) / rowHeight)]) ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("svg", { className: classes.cursor, width: width, height: height },
-                react_1.default.createElement("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "black" }),
-                react_1.default.createElement("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })),
-            react_1.default.createElement(BaseTooltip_1.default, null,
-                react_1.default.createElement(ui_1.SanitizedHTML, { html: Object.entries(sources[Math.floor((mouseY - 20) / rowHeight)] || {})
-                        .filter(([key]) => key !== 'color')
-                        .map(([key, value]) => `${key}:${value}`)
-                        .join('\n') })))) : null));
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(LinesConnectingMatrixToGenomicPosition_1.default, { model: model }), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'absolute', top: lineZoneHeight }, children: [(0, jsx_runtime_1.jsx)(LegendBar_1.default, { model: model }), (0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props })] })] }), mouseX && mouseY && mouseY > lineZoneHeight ? ((0, jsx_runtime_1.jsx)(Crosshair_1.default, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
 });
 exports.default = MultiLinearVariantMatrixDisplayComponent;