@jbrowse/plugin-variants 2.17.0 → 3.0.0

package/esm/shared/MultiVariantBaseModel.js

@@ -0,0 +1,277 @@
+import { lazy } from 'react';
+import { ConfigurationReference } from '@jbrowse/core/configuration';
+import { getSession } from '@jbrowse/core/util';
+import { stopStopToken } from '@jbrowse/core/util/stopToken';
+import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import HeightIcon from '@mui/icons-material/Height';
+import SplitscreenIcon from '@mui/icons-material/Splitscreen';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import deepEqual from 'fast-deep-equal';
+import { types } from 'mobx-state-tree';
+const SetColorDialog = lazy(() => import('../shared/SetColorDialog'));
+const MAFFilterDialog = lazy(() => import('../shared/MAFFilterDialog'));
+const ClusterDialog = lazy(() => import('../shared/ClusterDialog'));
+const SetRowHeightDialog = lazy(() => import('../shared/SetRowHeightDialog'));
+export default function MultiVariantBaseModelF(configSchema) {
+    return types
+        .compose('LinearVariantMatrixDisplay', linearBareDisplayStateModelFactory(configSchema), types.model({
+        type: types.literal('LinearVariantMatrixDisplay'),
+        layout: types.optional(types.frozen(), []),
+        configuration: ConfigurationReference(configSchema),
+        minorAlleleFrequencyFilter: types.optional(types.number, 0.1),
+        showSidebarLabelsSetting: true,
+        renderingMode: types.optional(types.string, 'alleleCount'),
+        rowHeightSetting: types.optional(types.number, 8),
+        autoHeight: true,
+    }))
+        .volatile(() => ({
+        sourcesLoadingStopToken: undefined,
+        featureUnderMouseVolatile: undefined,
+        sourcesVolatile: undefined,
+        featuresVolatile: undefined,
+        hasPhased: false,
+        sampleInfo: undefined,
+        hoveredGenotype: undefined,
+    }))
+        .actions(self => ({
+        setRowHeight(arg) {
+            self.rowHeightSetting = arg;
+        },
+        setHoveredGenotype(arg) {
+            self.hoveredGenotype = arg;
+        },
+        setFeatures(f) {
+            self.featuresVolatile = f;
+        },
+        setLayout(layout) {
+            self.layout = layout;
+        },
+        clearLayout() {
+            self.layout = [];
+        },
+        setSourcesLoading(str) {
+            if (self.sourcesLoadingStopToken) {
+                stopStopToken(self.sourcesLoadingStopToken);
+            }
+            self.sourcesLoadingStopToken = str;
+        },
+        setSources(sources) {
+            if (!deepEqual(sources, self.sourcesVolatile)) {
+                self.sourcesVolatile = sources;
+            }
+        },
+        setMafFilter(arg) {
+            self.minorAlleleFrequencyFilter = arg;
+        },
+        setShowSidebarLabels(arg) {
+            self.showSidebarLabelsSetting = arg;
+        },
+        setPhasedMode(arg) {
+            self.renderingMode = arg;
+        },
+        setAutoHeight(arg) {
+            self.autoHeight = arg;
+        },
+        setHasPhased(arg) {
+            self.hasPhased = arg;
+        },
+        setSampleInfo(arg) {
+            if (!deepEqual(arg, self.sampleInfo)) {
+                self.sampleInfo = arg;
+            }
+        },
+    }))
+        .views(self => ({
+        get preSources() {
+            return self.layout.length ? self.layout : self.sourcesVolatile;
+        },
+        get sources() {
+            var _a, _b;
+            if (this.preSources) {
+                const rows = [];
+                const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+                for (const row of this.preSources) {
+                    if (self.renderingMode === 'phased') {
+                        const info = (_b = self.sampleInfo) === null || _b === void 0 ? void 0 : _b[row.name];
+                        if (info === null || info === void 0 ? void 0 : info.isPhased) {
+                            const ploidy = info.maxPloidy;
+                            for (let i = 0; i < ploidy; i++) {
+                                const id = `${row.name} HP${i}`;
+                                rows.push({
+                                    ...sources[row.name],
+                                    ...row,
+                                    label: id,
+                                    HP: i,
+                                    id: id,
+                                });
+                            }
+                        }
+                    }
+                    else {
+                        rows.push({
+                            ...sources[row.name],
+                            ...row,
+                            label: row.name,
+                            id: row.name,
+                        });
+                    }
+                }
+                return rows;
+            }
+            return undefined;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        return {
+            get rowHeight() {
+                const { sources, autoHeight, rowHeightSetting, height } = self;
+                return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
+            },
+            adapterProps() {
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    rpcDriverName: self.rpcDriverName,
+                    displayModel: self,
+                    config: self.rendererConfig,
+                };
+            },
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Show sidebar labels',
+                        icon: VisibilityIcon,
+                        type: 'checkbox',
+                        checked: self.showSidebarLabelsSetting,
+                        onClick: () => {
+                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
+                        },
+                    },
+                    {
+                        label: 'Row height',
+                        icon: HeightIcon,
+                        subMenu: [
+                            {
+                                label: 'Manually set row height',
+                                disabled: self.autoHeight,
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        SetRowHeightDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Auto-adjust to display height',
+                                type: 'checkbox',
+                                checked: self.autoHeight,
+                                onClick: () => {
+                                    self.setAutoHeight(!self.autoHeight);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Rendering mode',
+                        icon: SplitscreenIcon,
+                        subMenu: [
+                            {
+                                label: 'Allele count',
+                                type: 'radio',
+                                checked: self.renderingMode === 'alleleCount',
+                                onClick: () => {
+                                    self.setPhasedMode('alleleCount');
+                                },
+                            },
+                            {
+                                label: 'Phased' +
+                                    (!self.hasPhased
+                                        ? ' (disabled, no phased variants found)'
+                                        : ''),
+                                disabled: !self.hasPhased,
+                                checked: self.renderingMode === 'phased',
+                                type: 'radio',
+                                onClick: () => {
+                                    self.setPhasedMode('phased');
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Filter by',
+                        icon: FilterListIcon,
+                        subMenu: [
+                            {
+                                label: 'Minor allele frequency',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        MAFFilterDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Cluster by genotype',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                ClusterDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Edit group colors/arrangement...',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                SetColorDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => ({
+        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);
+        },
+    }))
+        .views(self => ({
+        renderProps() {
+            const superProps = self.adapterProps();
+            return {
+                ...superProps,
+                notReady: superProps.notReady || !self.sources || !self.featuresVolatile,
+                height: self.height,
+                totalHeight: self.totalHeight,
+                renderingMode: self.renderingMode,
+                minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                rowHeight: self.rowHeight,
+                sources: self.sources,
+                scrollTop: self.scrollTop,
+            };
+        },
+    }));
+}

package/esm/shared/MultiVariantTooltip.d.ts

@@ -0,0 +1,6 @@
+export default function MultiVariantTooltip({ source, }: {
+    source: {
+        color?: string;
+        [key: string]: unknown;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/MultiVariantTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+export default function MultiVariantTooltip({ source, }) {
+    return (_jsxs(BaseTooltip, { children: [source.color ? (_jsx("div", { style: {
+                    width: 10,
+                    height: 10,
+                    backgroundColor: source.color,
+                } })) : null, _jsx(SanitizedHTML, { html: Object.entries(source)
+                    .filter(([key, val]) => key !== 'color' &&
+                    key !== 'name' &&
+                    key !== 'HP' &&
+                    key !== 'id' &&
+                    val !== undefined)
+                    .map(([key, value]) => `${key}:${value}`)
+                    .join('<br/>') })] }));
+}

package/esm/shared/RectBg.d.ts

@@ -0,0 +1,8 @@
+declare const RectBg: ({ x, y, width, height, color, }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RectBg;

package/esm/shared/RectBg.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFillProps } from '@jbrowse/core/util';
+const RectBg = ({ x, y, width, height, color = 'rgba(255,255,255,0.5)', }) => {
+    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color) }));
+};
+export default RectBg;

package/esm/shared/RowPalettizer.d.ts

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

package/esm/shared/RowPalettizer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { children: ["Create color palette based on...", Object.keys((_a = currLayout[0]) !== null && _a !== void 0 ? _a : [])
+                .filter(f => f !== 'name' &&
+                f !== 'color' &&
+                f !== 'label' &&
+                f !== 'id' &&
+                f !== 'HP')
+                .map(r => (_jsx(Button, { variant: "contained", color: "inherit", 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]],
+                    })));
+                }, children: r }, r))), _jsx(Button, { onClick: () => {
+                    setCurrLayout(currLayout.map(row => ({
+                        ...row,
+                        color: undefined,
+                    })));
+                }, children: "Clear colors" })] }));
+}

package/esm/shared/SetColorDialog.d.ts

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

package/esm/shared/SetColorDialog.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
+import { useLocalStorage } from '@jbrowse/core/util';
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import BulkEditPanel from './BulkEditPanel';
+import HelpfulTips from './HelpfulTips';
+import RowPalettizer from './RowPalettizer';
+import SourcesGrid from './SourcesGrid';
+const useStyles = makeStyles()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+        display: 'flex',
+        gap: 8,
+    },
+    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 (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant color/arrangement editor", children: showBulkEditor ? (_jsx(BulkEditPanel, { currLayout: currLayout, onClose: arg => {
+                if (arg) {
+                    setCurrLayout(arg);
+                }
+                setShowBulkEditor(false);
+            } })) : (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { className: classes.content, children: [_jsxs("div", { className: classes.fr, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                        setShowTips(!showTips);
+                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), _jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
+                                        setShowBulkEditor(!showBulkEditor);
+                                    }, children: "Show Bulk row editor" })] }), showTips ? _jsx(HelpfulTips, {}) : null, _jsx("br", {}), _jsx(RowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout }), _jsx(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                                model.clearLayout();
+                                setCurrLayout(model.sources || []);
+                            }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                                setCurrLayout([...(model.sources || [])]);
+                            }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                                model.setLayout(currLayout);
+                                handleClose();
+                            }, children: "Submit" })] })] })) }));
+}

package/esm/shared/SetMinMaxDialog.d.ts

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

package/esm/shared/SetMinMaxDialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Enter min/max score: " }), !ok ? (_jsx(Typography, { color: "error", children: "Max is greater than or equal to min" })) : null, !logOk ? (_jsx(Typography, { color: "error", children: "Min score should be greater than 0 for log scale" })) : null, _jsx(TextField, { value: min, onChange: event => {
+                            setMin(event.target.value);
+                        }, placeholder: "Enter min score" }), _jsx(TextField, { value: max, onChange: event => {
+                            setMax(event.target.value);
+                        }, placeholder: "Enter max score" })] }), _jsx(DialogActions, { children: _jsx(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();
+                    }, children: "Submit" }) })] }));
+}

package/esm/shared/SetRowHeightDialog.d.ts

@@ -0,0 +1,8 @@
+import type { Source } from '../types';
+export default function SetRowHeight({ model, handleClose, }: {
+    model: {
+        rowHeight?: Source[];
+        setRowHeight: (arg: number) => void;
+    };
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/SetRowHeightDialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
+export default function SetRowHeight({ model, handleClose, }) {
+    const [value, setValue] = useState(`${model.rowHeight}`);
+    return (_jsxs(Dialog, { open: true, title: "Set row height", onClose: handleClose, children: [_jsx(DialogContent, { children: _jsx(TextField, { value: value, onChange: event => {
+                        setValue(event.target.value);
+                    } }) }), _jsxs(DialogActions, { children: [_jsx(Button, { disabled: Number.isNaN(+value), variant: "contained", onClick: () => {
+                            model.setRowHeight(+value);
+                            handleClose();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+}

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,
+    });
+}