@jbrowse/plugin-variants 3.6.4 → 3.7.0

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

@@ -0,0 +1,10 @@
+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/{RowPalettizer.js → SetColorDialogRowPalettizer.js}

@@ -1,16 +1,17 @@
 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';
-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: () => {
+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]);

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

@@ -0,0 +1,31 @@
+interface SetColorDialogProps {
+    model: {
+        sources?: {
+            name: string;
+            [key: string]: unknown;
+        }[];
+        setLayout: (s: {
+            name: string;
+            [key: string]: unknown;
+        }[]) => void;
+        clearLayout: () => void;
+    };
+    handleClose: () => void;
+    title?: string;
+    enableBulkEdit?: boolean;
+    enableRowPalettizer?: boolean;
+    showTipsStorageKey?: string;
+    SourcesGridComponent: React.ComponentType<{
+        rows: {
+            name: string;
+            [key: string]: unknown;
+        }[];
+        onChange: (rows: {
+            name: string;
+            [key: string]: unknown;
+        }[]) => void;
+        showTips: boolean;
+    }>;
+}
+export default function SetColorDialog({ model, handleClose, title, enableBulkEdit, enableRowPalettizer, showTipsStorageKey, SourcesGridComponent, }: SetColorDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,81 @@
+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

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,38 @@
+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/util.d.ts

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

package/esm/shared/util.js

@@ -12,13 +12,6 @@ export function fillRectCtx(x, y, width, height, ctx, color) {
     }
     ctx.fillRect(x, y, width, height);
 }
-export function randomColor(str) {
-    let sum = 0;
-    for (let i = 0; i < str.length; i++) {
-        sum += str.charCodeAt(i);
-    }
-    return colorify(sum * 10);
-}
 export function colorify(n) {
     return `hsl(${n % 255}, 50%, 50%)`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -36,14 +36,14 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@flatten-js/interval-tree": "^1.0.15",
+    "@flatten-js/interval-tree": "^2.0.0",
     "@gmod/bgzf-filehandle": "^4.0.0",
     "@gmod/tabix": "^3.0.1",
     "@gmod/vcf": "^6.0.8",
-    "@jbrowse/core": "^3.6.4",
-    "@jbrowse/plugin-circular-view": "^3.6.4",
-    "@jbrowse/plugin-linear-genome-view": "^3.6.4",
-    "@jbrowse/sv-core": "^3.6.4",
+    "@jbrowse/core": "^3.7.0",
+    "@jbrowse/plugin-circular-view": "^3.7.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.7.0",
+    "@jbrowse/sv-core": "^3.7.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "@mui/x-data-grid": "^8.0.0",
@@ -63,5 +63,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "3db8e50ce2bd9c081efbf6c2e7ae5f342380a25a"
+  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
 }

package/dist/shared/components/BulkEditPanel.d.ts

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

package/dist/shared/components/HelpfulTips.d.ts

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

package/dist/shared/components/RowPalettizer.d.ts

@@ -1,5 +0,0 @@
-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/components/BulkEditPanel.d.ts

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

package/esm/shared/components/HelpfulTips.d.ts

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

package/esm/shared/components/RowPalettizer.d.ts

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