@jbrowse/plugin-variants 2.17.0 → 2.18.0

package/dist/getMultiVariantSourcesAutorun.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMultiVariantSourcesAutorun = getMultiVariantSourcesAutorun;
+const util_1 = require("@jbrowse/core/util");
+const aborting_1 = require("@jbrowse/core/util/aborting");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
+function getMultiVariantSourcesAutorun(self) {
+    (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+        try {
+            const view = (0, util_1.getContainingView)(self);
+            if (!view.initialized) {
+                return;
+            }
+            const { rpcManager } = (0, util_1.getSession)(self);
+            const { adapterConfig } = self;
+            const token = (0, stopToken_1.createStopToken)();
+            self.setSourcesLoading(token);
+            const sessionId = (0, tracks_1.getRpcSessionId)(self);
+            const sources = (await rpcManager.call(sessionId, 'MultiVariantGetSources', {
+                sessionId,
+                adapterConfig,
+            }));
+            if ((0, mobx_state_tree_1.isAlive)(self)) {
+                self.setSources(sources);
+            }
+        }
+        catch (e) {
+            if (!(0, aborting_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(self)) {
+                console.error(e);
+                (0, util_1.getSession)(self).notifyError(`${e}`, e);
+            }
+        }
+    }, { delay: 1000 }));
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import Plugin from '@jbrowse/core/Plugin';
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class VariantsPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/dist/index.js

@@ -4,15 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VcfFeature = void 0;
-const VcfAdapter_1 = __importDefault(require("./VcfAdapter"));
-const VcfTabixAdapter_1 = __importDefault(require("./VcfTabixAdapter"));
-const extensionPoints_1 = __importDefault(require("./extensionPoints"));
-const VariantTrack_1 = __importDefault(require("./VariantTrack"));
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const ChordVariantDisplay_1 = __importDefault(require("./ChordVariantDisplay"));
 const LinearVariantDisplay_1 = __importDefault(require("./LinearVariantDisplay"));
+const MultiLinearVariantDisplay_1 = __importDefault(require("./MultiLinearVariantDisplay"));
+const MultiLinearVariantMatrixDisplay_1 = __importDefault(require("./MultiLinearVariantMatrixDisplay"));
+const MultiLinearVariantMatrixRenderer_1 = __importDefault(require("./MultiLinearVariantMatrixRenderer"));
+const MultiLinearVariantRenderer_1 = __importDefault(require("./MultiLinearVariantRenderer"));
 const StructuralVariantChordRenderer_1 = __importDefault(require("./StructuralVariantChordRenderer"));
 const VariantFeatureWidget_1 = __importDefault(require("./VariantFeatureWidget"));
+const MultiVariantGetGenotypeMatrix_1 = require("./VariantRPC/MultiVariantGetGenotypeMatrix");
+const MultiVariantGetSimplifiedFeatures_1 = require("./VariantRPC/MultiVariantGetSimplifiedFeatures");
+const MultiVariantGetSources_1 = require("./VariantRPC/MultiVariantGetSources");
+const VariantTrack_1 = __importDefault(require("./VariantTrack"));
+const VcfAdapter_1 = __importDefault(require("./VcfAdapter"));
+const VcfTabixAdapter_1 = __importDefault(require("./VcfTabixAdapter"));
+const extensionPoints_1 = __importDefault(require("./extensionPoints"));
 class VariantsPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -25,8 +32,15 @@ class VariantsPlugin extends Plugin_1.default {
         (0, VariantTrack_1.default)(pluginManager);
         (0, extensionPoints_1.default)(pluginManager);
         (0, LinearVariantDisplay_1.default)(pluginManager);
+        (0, MultiLinearVariantMatrixDisplay_1.default)(pluginManager);
+        (0, MultiLinearVariantDisplay_1.default)(pluginManager);
+        (0, MultiLinearVariantRenderer_1.default)(pluginManager);
+        (0, MultiLinearVariantMatrixRenderer_1.default)(pluginManager);
         (0, StructuralVariantChordRenderer_1.default)(pluginManager);
         (0, ChordVariantDisplay_1.default)(pluginManager);
+        pluginManager.addRpcMethod(() => new MultiVariantGetSources_1.MultiVariantGetSources(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetGenotypeMatrix_1.MultiVariantGetGenotypeMatrix(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetSimplifiedFeatures_1.MultiVariantGetSimplifiedFeatures(pluginManager));
     }
 }
 exports.default = VariantsPlugin;

package/dist/shared/BulkEditPanel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type Source } from '../util';
+export default function BulkEditPanel({ setCurrLayout, currLayout, }: {
+    currLayout: Source[];
+    setCurrLayout: (arg: Source[]) => void;
+}): React.JSX.Element;

package/dist/shared/BulkEditPanel.js

@@ -0,0 +1,103 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BulkEditPanel;
+const react_1 = __importStar(require("react"));
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+});
+function BulkEditPanel({ setCurrLayout, currLayout, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.Typography, null, "Paste CSV or TSV. If a header column is present. First line is a header. If a column called \"name\" is present, it uses that to connect to IDs in the table, otherwise it uses the first column no."),
+        react_1.default.createElement(material_1.TextField, { variant: "outlined", multiline: true, minRows: 5, placeholder: 'name,population\nHG00098,GBR\nHG00101,GBR\nHG00459,CHS\n...', maxRows: 10, fullWidth: true, value: val, onChange: event => {
+                setVal(event.target.value);
+            }, slotProps: {
+                input: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                },
+            } }),
+        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
+                const lines = val
+                    .split('\n')
+                    .map(f => f.trim())
+                    .filter(f => !!f);
+                const fields = lines[0].split(/[,\t]/gm);
+                if (fields.includes('name')) {
+                    setError('');
+                    const oldLayout = currLayout.map(record => [record.name, record]);
+                    const newData = Object.fromEntries(lines.slice(1).map(line => {
+                        const cols = line.split(/[,\t]/gm);
+                        const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                        return [
+                            newRecord.name,
+                            { ...newRecord, ...oldLayout[newRecord.name] },
+                        ];
+                    }));
+                    setCurrLayout(currLayout.map(record => ({
+                        ...record,
+                        ...newData[record.name],
+                    })));
+                }
+                else {
+                    setError(new Error('No "name" column found on line 1'));
+                }
+            } }, "Update rows"),
+        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
+                const lines = val
+                    .split('\n')
+                    .map(f => f.trim())
+                    .filter(f => !!f);
+                const fields = lines[0].split(/[,\t]/gm);
+                if (fields.includes('name')) {
+                    setError('');
+                    const oldLayout = currLayout.map(record => [record.name, record]);
+                    const newData = Object.fromEntries(lines.slice(1).map(line => {
+                        const cols = line.split(/[,\t]/gm);
+                        const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                        return [
+                            newRecord.name,
+                            { ...newRecord, ...oldLayout[newRecord.name] },
+                        ];
+                    }));
+                    setCurrLayout(currLayout.map(record => ({
+                        ...newData[record.name],
+                    })));
+                }
+                else {
+                    setError(new Error('No "name" column found on line 1'));
+                }
+            } }, "Replace rows"),
+        error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null));
+}

package/dist/shared/ClusterDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Source } from '../util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export default function HierarchicalCluster({ model, handleClose, }: {
+    model: {
+        sources?: Source[];
+        mafFilter?: number;
+        adapterConfig: AnyConfigurationModel;
+        setLayout: (arg: Source[]) => void;
+    };
+    handleClose: () => void;
+}): React.JSX.Element;

package/dist/shared/ClusterDialog.js

@@ -0,0 +1,150 @@
+"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 });
+exports.default = HierarchicalCluster;
+const react_1 = __importStar(require("react"));
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+function HierarchicalCluster({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const [results, setResults] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [paste, setPaste] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                const view = (0, util_1.getContainingView)(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = (0, util_1.getSession)(model);
+                const { sources, mafFilter, adapterConfig } = model;
+                const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
+                    regions: view.dynamicBlocks.contentBlocks,
+                    sources,
+                    mafFilter,
+                    sessionId,
+                    adapterConfig,
+                }));
+                const entries = Object.values(ret);
+                const keys = Object.keys(ret);
+                const text = `try(library(fastcluster), silent=TRUE)
+inputMatrix<-matrix(c(${entries.map(val => val.genotypes.join(',')).join(',\n')}
+),nrow=${entries.length},byrow=TRUE)
+rownames(inputMatrix)<-c(${keys.map(key => `'${key}'`).join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='single')
+cat(resultClusters$order,sep='\\n')`;
+                setResults(text);
+            }
+            catch (e) {
+                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+        })();
+    }, [model]);
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement("div", { className: classes.mgap },
+                react_1.default.createElement(material_1.Typography, null, "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`."),
+                react_1.default.createElement(material_1.Typography, null, "You can then paste the results in this form to specify the row ordering."),
+                results ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null,
+                        "Step 1:",
+                        ' ',
+                        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
+                                (0, file_saver_1.saveAs)(new Blob([results || ''], {
+                                    type: 'text/plain;charset=utf-8',
+                                }), 'cluster.R');
+                            } }, "Download Rscript"),
+                        ' ',
+                        "or",
+                        ' ',
+                        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
+                                (0, copy_to_clipboard_1.default)(results || '');
+                            } }, "Copy Rscript to clipboard"),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(material_1.TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Step 2. Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+                                    setPaste(event.target.value);
+                                }, slotProps: {
+                                    input: {
+                                        classes: {
+                                            input: classes.textAreaFont,
+                                        },
+                                    },
+                                } }))))) : (react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })),
+                error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null)),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { disabled: !results, variant: "contained", onClick: () => {
+                    const { sources } = model;
+                    if (sources) {
+                        try {
+                            model.setLayout(paste
+                                .split('\n')
+                                .map(t => t.trim())
+                                .filter(f => !!f)
+                                .map(r => +r)
+                                .map(idx => {
+                                const ret = sources[idx - 1];
+                                if (!ret) {
+                                    throw new Error(`out of bounds at ${idx}`);
+                                }
+                                return ret;
+                            }));
+                        }
+                        catch (e) {
+                            console.error(e);
+                            setError(e);
+                        }
+                    }
+                    handleClose();
+                } }, "Apply clustering"),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
+}

package/dist/shared/ColorLegend.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Source } from '../util';
+declare const ColorLegend: ({ model, labelWidth, }: {
+    model: {
+        canDisplayLabels: boolean;
+        rowHeight: number;
+        sources?: Source[];
+    };
+    labelWidth: number;
+}) => React.JSX.Element | null;
+export default ColorLegend;

package/dist/shared/ColorLegend.js

@@ -0,0 +1,24 @@
+"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 util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const RectBg_1 = __importDefault(require("./RectBg"));
+const ColorLegend = (0, mobx_react_1.observer)(function ({ model, labelWidth, }) {
+    const { canDisplayLabels, rowHeight, sources } = model;
+    const svgFontSize = (0, util_1.clamp)(rowHeight, 8, 12);
+    const colorBoxWidth = 15;
+    const legendWidth = labelWidth + colorBoxWidth + 5;
+    return sources ? (react_1.default.createElement(react_1.default.Fragment, null,
+        canDisplayLabels ? (react_1.default.createElement(RectBg_1.default, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
+        sources.map((source, idx) => {
+            const { color, name } = source;
+            return (react_1.default.createElement(react_1.default.Fragment, { key: `${name}-${idx}` },
+                color ? (react_1.default.createElement(RectBg_1.default, { y: idx * rowHeight + 1, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null,
+                canDisplayLabels ? (react_1.default.createElement("text", { y: idx * rowHeight + svgFontSize, x: colorBoxWidth + 2, fontSize: svgFontSize }, name)) : null));
+        }))) : null;
+});
+exports.default = ColorLegend;

package/dist/shared/DraggableDialog.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DialogProps } from '@mui/material';
+declare const DraggableDialog: (props: DialogProps & {
+    title: string;
+}) => React.JSX.Element;
+export default DraggableDialog;

package/dist/shared/DraggableDialog.js

@@ -0,0 +1,62 @@
+"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 Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const react_draggable_1 = __importDefault(require("react-draggable"));
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function PaperComponent(props) {
+    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_draggable_1.default, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => { var _a, _b; return (_b = (_a = arg.target) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('MuiDialogTitle'); } },
+        react_1.default.createElement(material_1.Paper, { ref: ref, ...props })));
+}
+const DraggableDialog = (0, mobx_react_1.observer)(function DraggableDialog(props) {
+    const { classes } = useStyles();
+    const { title, children, onClose } = props;
+    return (react_1.default.createElement(material_1.Dialog, { ...props, PaperComponent: PaperComponent },
+        react_1.default.createElement(material_1.ScopedCssBaseline, null,
+            react_1.default.createElement(material_1.DialogTitle, { style: { cursor: 'move' } },
+                title,
+                onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                        onClose();
+                    } },
+                    react_1.default.createElement(Close_1.default, null))) : null),
+            react_1.default.createElement(material_1.Divider, null),
+            children)));
+});
+exports.default = DraggableDialog;

package/dist/shared/LegendBar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Source } from '../util';
+interface ReducedModel {
+    scrollTop: number;
+    totalHeight: number;
+    rowHeight: number;
+    lineZoneHeight?: number;
+    sources?: Source[];
+    canDisplayLabels: boolean;
+    height: number;
+    id: string;
+}
+export declare const LegendBar: (props: {
+    model: ReducedModel;
+    orientation?: string;
+    exportSVG?: boolean;
+}) => React.JSX.Element | null;
+export default LegendBar;

package/dist/shared/LegendBar.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendBar = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const ColorLegend_1 = __importDefault(require("./ColorLegend"));
+const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
+    const { id, scrollTop, height } = model;
+    const clipid = `legend-${id}`;
+    return exportSVG ? (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: 1000, height: height }))),
+        react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
+            react_1.default.createElement("g", { transform: `translate(0,${-scrollTop})` }, children)))) : (react_1.default.createElement("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 100,
+            pointerEvents: 'none',
+            height: model.totalHeight,
+            width: (0, util_1.getContainingView)(model).width,
+        } }, children));
+});
+exports.LegendBar = (0, mobx_react_1.observer)(function (props) {
+    const { model } = props;
+    const { canDisplayLabels, rowHeight, sources } = model;
+    const svgFontSize = (0, util_1.clamp)(rowHeight, 8, 12);
+    return sources ? (react_1.default.createElement(Wrapper, { ...props },
+        react_1.default.createElement(ColorLegend_1.default, { model: model, labelWidth: Math.max(...sources
+                .map(s => (0, util_1.measureText)(s.name, svgFontSize) + 10)
+                .map(width => (canDisplayLabels ? width : 20))) }))) : null;
+});
+exports.default = exports.LegendBar;

package/dist/shared/MAFFilterDialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const MAFFilterDialog: ({ model, handleClose, }: {
+    model: {
+        mafFilter?: number;
+        setMafFilter: (arg: number) => void;
+    };
+    handleClose: () => void;
+}) => React.JSX.Element;
+export default MAFFilterDialog;

package/dist/shared/MAFFilterDialog.js

@@ -0,0 +1,56 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    root: {
+        width: 500,
+    },
+});
+const MAFFilterDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const { mafFilter = '' } = model;
+    const { classes } = useStyles();
+    const [maf, setMaf] = (0, react_1.useState)(`${mafFilter}`);
+    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: handleClose, title: "Set minor allele frequency (MAF)" },
+        react_1.default.createElement(material_1.DialogContent, { className: classes.root },
+            react_1.default.createElement(material_1.Typography, null, "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns"),
+            react_1.default.createElement(material_1.TextField, { value: maf, autoFocus: true, placeholder: "Enter MAF", onChange: event => {
+                    setMaf(event.target.value);
+                } }),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                        if (!Number.isNaN(+maf)) {
+                            model.setMafFilter(+maf);
+                        }
+                        handleClose();
+                    } }, "Submit"),
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
+});
+exports.default = MAFFilterDialog;

package/dist/shared/RectBg.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const RectBg: (props: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+}) => React.JSX.Element;
+export default RectBg;

package/dist/shared/RectBg.js

@@ -0,0 +1,12 @@
+"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 util_1 = require("@jbrowse/core/util");
+const RectBg = (props) => {
+    const { color = 'rgb(255,255,255)' } = props;
+    return react_1.default.createElement("rect", { pointerEvents: "auto", ...props, ...(0, util_1.getFillProps)(color) });
+};
+exports.default = RectBg;

package/dist/shared/RowPalettizer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type Source } from '../util';
+export default function RowPalettizer({ setCurrLayout, currLayout, }: {
+    currLayout: Source[];
+    setCurrLayout: (arg: Source[]) => void;
+}): React.JSX.Element;