@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/shared/components/ui/SetColorDialog.js

@@ -1,45 +0,0 @@
-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 SetColorDialogBulkEditPanel from './SetColorDialogBulkEditPanel';
-import SetColorDialogHelpfulTips from './SetColorDialogHelpfulTips';
-import SetColorDialogRowPalettizer from './SetColorDialogRowPalettizer';
-const useStyles = makeStyles()({
-    content: {
-        minWidth: 800,
-    },
-    fr: {
-        float: 'right',
-        display: 'flex',
-        gap: 8,
-    },
-});
-export default function SetColorDialog({ model, handleClose, title = 'Color/arrangement editor', enableBulkEdit = false, enableRowPalettizer = false, showTipsStorageKey = 'setColorDialog-showTips', SourcesGridComponent, }) {
-    const { classes } = useStyles();
-    const { sources } = model;
-    const [showBulkEditor, setShowBulkEditor] = useState(false);
-    const [currLayout, setCurrLayout] = useState(structuredClone(sources || []));
-    const [showTips, setShowTips] = useLocalStorage(showTipsStorageKey, false);
-    return (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: title, children: showBulkEditor && enableBulkEdit ? (_jsx(SetColorDialogBulkEditPanel, { 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' }), enableBulkEdit ? (_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
-                                        setShowBulkEditor(!showBulkEditor);
-                                    }, children: "Show Bulk row editor" })) : null] }), showTips ? _jsx(SetColorDialogHelpfulTips, {}) : null, enableRowPalettizer ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SetColorDialogRowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout })] })) : null, _jsx(SourcesGridComponent, { 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/components/ui/SetColorDialogBulkEditPanel.d.ts

@@ -1,10 +0,0 @@
-export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }: {
-    currLayout: {
-        name: string;
-        [key: string]: unknown;
-    }[];
-    onClose: (arg?: {
-        name: string;
-        [key: string]: unknown;
-    }[]) => void;
-}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/ui/SetColorDialogBulkEditPanel.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ErrorMessage } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()({
-    textAreaFont: {
-        fontFamily: 'Courier New',
-    },
-});
-export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
-    const { classes } = useStyles();
-    const [val, setVal] = useState('');
-    const [error, setError] = useState();
-    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "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." }), error ? _jsx(ErrorMessage, { error: error }) : null, _jsx(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,
-                                },
-                            },
-                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", 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 = Object.fromEntries(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],
-                                        },
-                                    ];
-                                }));
-                                onClose(currLayout.map(record => ({
-                                    ...record,
-                                    ...newData[record.name],
-                                })));
-                            }
-                            else {
-                                setError(new Error('No "name" column found on line 1'));
-                            }
-                        }, children: "Update rows" }), _jsx(Button, { variant: "contained", color: "primary", 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 = Object.fromEntries(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],
-                                        },
-                                    ];
-                                }));
-                                onClose(currLayout.map(record => ({
-                                    ...newData[record.name],
-                                })));
-                            }
-                            else {
-                                setError(new Error('No "name" column found on line 1'));
-                            }
-                        }, children: "Replace rows" }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
-                            onClose();
-                        }, children: "Cancel" })] })] }));
-}

package/esm/shared/components/ui/SetColorDialogHelpfulTips.d.ts

@@ -1 +0,0 @@
-export default function SetColorDialogHelpfulTips(): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/ui/SetColorDialogHelpfulTips.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export default function SetColorDialogHelpfulTips() {
-    return (_jsxs(_Fragment, { children: ["Helpful tips", _jsxs("ul", { children: [_jsx("li", { children: "You can select rows in the table with the checkboxes" }), _jsx("li", { children: "Multi-select is enabled with shift-click and control-click" }), _jsx("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), _jsx("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), _jsx("li", { children: "Changes are applied when you hit Submit" }), _jsx("li", { children: "You can click and drag the dialog box to move it on the screen" }), _jsx("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
-}

package/esm/shared/components/ui/SetColorDialogRowPalettizer.d.ts

@@ -1,10 +0,0 @@
-export default function SetColorDialogRowPalettizer({ setCurrLayout, currLayout, }: {
-    currLayout: {
-        name: string;
-        [key: string]: unknown;
-    }[];
-    setCurrLayout: (arg: {
-        name: string;
-        [key: string]: unknown;
-    }[]) => void;
-}): import("react/jsx-runtime").JSX.Element | null;

package/esm/shared/components/ui/SetColorDialogRowPalettizer.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { set1 } from '@jbrowse/core/ui/colors';
-import { randomColor } from '@jbrowse/core/util/color';
-import { Button } from '@mui/material';
-export default function SetColorDialogRowPalettizer({ setCurrLayout, currLayout, }) {
-    if (!currLayout.length || !currLayout[0]) {
-        return null;
-    }
-    const fields = Object.keys(currLayout[0]).filter(f => f !== 'name' &&
-        f !== 'color' &&
-        f !== 'label' &&
-        f !== 'id' &&
-        f !== 'HP');
-    return (_jsxs("div", { children: ["Create color palette based on...", fields.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/findSecondLargestNumber.js

@@ -1 +0,0 @@
-"use strict";

package/esm/shared/util.d.ts

@@ -1,2 +0,0 @@
-export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, color?: string): void;
-export declare function colorify(n: number): string;

package/esm/shared/util.js

@@ -1,17 +0,0 @@
-export function fillRectCtx(x, y, width, height, ctx, color) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (color) {
-        ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
-}
-export function colorify(n) {
-    return `hsl(${n % 255}, 50%, 50%)`;
-}