@jbrowse/plugin-variants 2.17.0 → 2.18.0

package/esm/shared/LegendBar.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { clamp, getContainingView, measureText } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import ColorLegend from './ColorLegend';
+const Wrapper = observer(function ({ children, model, exportSVG, }) {
+    const { id, scrollTop, height } = model;
+    const clipid = `legend-${id}`;
+    return exportSVG ? (React.createElement(React.Fragment, null,
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: clipid },
+                React.createElement("rect", { x: 0, y: 0, width: 1000, height: height }))),
+        React.createElement("g", { clipPath: `url(#${clipid})` },
+            React.createElement("g", { transform: `translate(0,${-scrollTop})` }, children)))) : (React.createElement("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 100,
+            pointerEvents: 'none',
+            height: model.totalHeight,
+            width: getContainingView(model).width,
+        } }, children));
+});
+export const LegendBar = observer(function (props) {
+    const { model } = props;
+    const { canDisplayLabels, rowHeight, sources } = model;
+    const svgFontSize = clamp(rowHeight, 8, 12);
+    return sources ? (React.createElement(Wrapper, { ...props },
+        React.createElement(ColorLegend, { model: model, labelWidth: Math.max(...sources
+                .map(s => measureText(s.name, svgFontSize) + 10)
+                .map(width => (canDisplayLabels ? width : 20))) }))) : null;
+});
+export default LegendBar;

package/esm/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/esm/shared/MAFFilterDialog.js

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

package/esm/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/esm/shared/RectBg.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { getFillProps } from '@jbrowse/core/util';
+const RectBg = (props) => {
+    const { color = 'rgb(255,255,255)' } = props;
+    return React.createElement("rect", { pointerEvents: "auto", ...props, ...getFillProps(color) });
+};
+export default RectBg;

package/esm/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;

package/esm/shared/RowPalettizer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { set1 } from '@jbrowse/core/ui/colors';
+import { Button } from '@mui/material';
+import { randomColor } from '../util';
+export default function RowPalettizer({ setCurrLayout, currLayout, }) {
+    var _a;
+    return (React.createElement("div", null, Object.keys((_a = currLayout[0]) !== null && _a !== void 0 ? _a : [])
+        .filter(f => f !== 'name' && f !== 'color')
+        .map(r => {
+        return (React.createElement(Button, { key: r, onClick: () => {
+                const map = new Map();
+                for (const row of currLayout) {
+                    const val = map.get(row[r]);
+                    if (!val) {
+                        map.set(row[r], 1);
+                    }
+                    else {
+                        map.set(row[r], val + 1);
+                    }
+                }
+                const ret = Object.fromEntries([...map.entries()]
+                    .sort((a, b) => a[1] - b[1])
+                    .map((r, idx) => [r[0], set1[idx] || randomColor(r[0])]));
+                setCurrLayout(currLayout.map(row => ({
+                    ...row,
+                    color: ret[row[r]],
+                })));
+            } },
+            "Palettize ",
+            r));
+    })));
+}

package/esm/shared/SetColorDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type Source } from '../util';
+interface ReducedModel {
+    sources?: Source[];
+    setLayout: (s: Source[]) => void;
+    clearLayout: () => void;
+}
+export default function SetColorDialog({ model, handleClose, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+}): React.JSX.Element;
+export {};

package/esm/shared/SetColorDialog.js

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useLocalStorage } from '@jbrowse/core/util';
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import DraggableDialog from './DraggableDialog';
+import SourcesGrid from './SourcesGrid';
+import BulkEditPanel from './BulkEditPanel';
+import RowPalettizer from './RowPalettizer';
+const useStyles = makeStyles()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+});
+export default function SetColorDialog({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { sources } = model;
+    const [showBulkEditor, setShowBulkEditor] = useState(false);
+    const [currLayout, setCurrLayout] = useState(sources || []);
+    const [showTips, setShowTips] = useLocalStorage('multivariant-showTips', false);
+    return (React.createElement(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant color/arrangement editor" },
+        React.createElement(DialogContent, { className: classes.content },
+            React.createElement("div", { className: classes.fr },
+                React.createElement(Button, { variant: "contained", onClick: () => {
+                        setShowTips(!showTips);
+                    } }, showTips ? 'Hide tips' : 'Show tips'),
+                React.createElement(Button, { color: "secondary", variant: "contained", onClick: () => {
+                        setShowBulkEditor(!showBulkEditor);
+                    } }, showBulkEditor ? 'Hide bulk row editor' : 'Show Bulk row editor')),
+            React.createElement("br", null),
+            showTips ? React.createElement(HelpfulTips, null) : null,
+            showBulkEditor ? (React.createElement(BulkEditPanel, { currLayout: currLayout, setCurrLayout: setCurrLayout })) : null,
+            React.createElement(RowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout }),
+            React.createElement(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                    model.clearLayout();
+                    setCurrLayout(model.sources || []);
+                } }, "Clear custom settings"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                    setCurrLayout([...(model.sources || [])]);
+                } }, "Cancel"),
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                    model.setLayout(currLayout);
+                    handleClose();
+                } }, "Submit"))));
+}
+function HelpfulTips() {
+    return (React.createElement(React.Fragment, null,
+        "Helpful tips",
+        React.createElement("ul", null,
+            React.createElement("li", null, "You can select rows in the table with the checkboxes"),
+            React.createElement("li", null, "Multi-select is enabled with shift-click and control-click"),
+            React.createElement("li", null, "The \"Move selected items up/down\" can re-arrange subtracks"),
+            React.createElement("li", null, "Sorting the data grid itself can also re-arrange subtracks"),
+            React.createElement("li", null, "Changes are applied when you hit Submit"),
+            React.createElement("li", null, "You can click and drag the dialog box to move it on the screen"),
+            React.createElement("li", null, "Columns in the table can be hidden using a vertical '...' menu on the right side of each column"))));
+}

package/esm/shared/SetMinMaxDialog.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function SetMinMaxDialog(props: {
+    model: {
+        minScore: number;
+        maxScore: number;
+        scaleType: string;
+        setMinScore: (arg?: number) => void;
+        setMaxScore: (arg?: number) => void;
+    };
+    handleClose: () => void;
+}): React.JSX.Element;

package/esm/shared/SetMinMaxDialog.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+export default function SetMinMaxDialog(props) {
+    const { model, handleClose } = props;
+    const { minScore, maxScore, scaleType } = model;
+    const [min, setMin] = useState(`${minScore !== Number.MIN_VALUE ? minScore : ''}`);
+    const [max, setMax] = useState(`${maxScore !== Number.MAX_VALUE ? maxScore : ''}`);
+    const ok = min !== '' && max !== '' && !Number.isNaN(+min) && !Number.isNaN(+max)
+        ? +max > +min
+        : true;
+    const logOk = scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true;
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track" },
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null, "Enter min/max score: "),
+            !ok ? (React.createElement(Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
+            !logOk ? (React.createElement(Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
+            React.createElement(TextField, { value: min, onChange: event => {
+                    setMin(event.target.value);
+                }, placeholder: "Enter min score" }),
+            React.createElement(TextField, { value: max, onChange: event => {
+                    setMax(event.target.value);
+                }, placeholder: "Enter max score" })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", style: { marginLeft: 20 }, disabled: !ok, onClick: () => {
+                    model.setMinScore(min !== '' && !Number.isNaN(+min) ? +min : undefined);
+                    model.setMaxScore(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                    handleClose();
+                } }, "Submit"))));
+}

package/esm/shared/SharedVariantConfigSchema.d.ts

@@ -0,0 +1,66 @@
+export default function sharedVariantConfigFactory(): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    autoscale: {
+        type: string;
+        defaultValue: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+    };
+    minimalTicks: {
+        type: string;
+        defaultValue: boolean;
+        description: string;
+    };
+    minScore: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    maxScore: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    numStdDev: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    scaleType: {
+        type: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    inverted: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    maxFeatureScreenDensity: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    fetchSizeLimit: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    height: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    mouseover: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/shared/SharedVariantConfigSchema.js

@@ -0,0 +1,53 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
+import { types } from 'mobx-state-tree';
+export default function sharedVariantConfigFactory() {
+    return ConfigurationSchema('SharedVariantDisplay', {
+        autoscale: {
+            type: 'stringEnum',
+            defaultValue: 'local',
+            model: types.enumeration('Autoscale type', [
+                'global',
+                'local',
+                'globalsd',
+                'localsd',
+                'zscore',
+            ]),
+            description: 'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
+        },
+        minimalTicks: {
+            type: 'boolean',
+            defaultValue: false,
+            description: 'use the minimal amount of ticks',
+        },
+        minScore: {
+            type: 'number',
+            defaultValue: Number.MIN_VALUE,
+            description: 'minimum value for the y-scale',
+        },
+        maxScore: {
+            type: 'number',
+            description: 'maximum value for the y-scale',
+            defaultValue: Number.MAX_VALUE,
+        },
+        numStdDev: {
+            type: 'number',
+            description: 'number of standard deviations to use for autoscale types globalsd or localsd',
+            defaultValue: 3,
+        },
+        scaleType: {
+            type: 'stringEnum',
+            model: types.enumeration('Scale type', ['linear', 'log']),
+            description: 'The type of scale to use',
+            defaultValue: 'linear',
+        },
+        inverted: {
+            type: 'boolean',
+            description: 'draw upside down',
+            defaultValue: false,
+        },
+    }, {
+        baseConfiguration: baseLinearDisplayConfigSchema,
+        explicitlyTyped: true,
+    });
+}