@jbrowse/plugin-variants 3.6.4 → 3.7.0

package/dist/shared/SharedVariantMixin.d.ts

@@ -174,6 +174,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -188,9 +189,22 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -199,6 +213,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/dist/shared/components/MultiVariantClusterDialog/ClusterDialogManual.js

@@ -68,7 +68,7 @@ const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handl
         })();
     }, [model]);
     const results = ret
-        ? `inputMatrix<-matrix(c(${Object.values(ret)
+        ? String.raw `inputMatrix<-matrix(c(${Object.values(ret)
             .map(val => val.join(','))
             .join(',\n')}
 ),nrow=${Object.values(ret).length},byrow=TRUE)
@@ -76,7 +76,7 @@ rownames(inputMatrix)<-c(${Object.keys(ret)
             .map(key => `'${key}'`)
             .join(',')})
 resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
-cat(resultClusters$order,sep='\\n')`
+cat(resultClusters$order,sep='\n')`
         : undefined;
     const resultsTsv = ret
         ? Object.entries(ret)
@@ -107,7 +107,7 @@ cat(resultClusters$order,sep='\\n')`
                                                     complete: 'Complete',
                                                 }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
                                                             setClusterMethod(key);
-                                                        } }), label: val }, key))) })] })) : null, results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+                                                        } }), label: val }, key))) })] })) : null, results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", message: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "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: {

package/dist/shared/components/SetColorDialog.js

@@ -5,51 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SetColorDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const DraggableDialog_1 = __importDefault(require("@jbrowse/core/ui/DraggableDialog"));
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const BulkEditPanel_1 = __importDefault(require("./BulkEditPanel"));
-const HelpfulTips_1 = __importDefault(require("./HelpfulTips"));
-const RowPalettizer_1 = __importDefault(require("./RowPalettizer"));
 const SourcesGrid_1 = __importDefault(require("./SourcesGrid"));
-const useStyles = (0, mui_1.makeStyles)()({
-    content: {
-        minWidth: 800,
-    },
-    fr: {
-        float: 'right',
-        display: 'flex',
-        gap: 8,
-    },
-    textAreaFont: {
-        fontFamily: 'Courier New',
-    },
-});
+const SetColorDialog_1 = __importDefault(require("./ui/SetColorDialog"));
 function SetColorDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    const { sources } = model;
-    const [showBulkEditor, setShowBulkEditor] = (0, react_1.useState)(false);
-    const [currLayout, setCurrLayout] = (0, react_1.useState)(sources || []);
-    const [showTips, setShowTips] = (0, util_1.useLocalStorage)('multivariant-showTips', false);
-    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-sample variant display - Color/arrangement editor", children: showBulkEditor ? ((0, jsx_runtime_1.jsx)(BulkEditPanel_1.default, { currLayout: currLayout, onClose: arg => {
-                if (arg) {
-                    setCurrLayout(arg);
-                }
-                setShowBulkEditor(false);
-            } })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.fr, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                                        setShowTips(!showTips);
-                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "secondary", variant: "contained", onClick: () => {
-                                        setShowBulkEditor(!showBulkEditor);
-                                    }, children: "Show Bulk row editor" })] }), showTips ? (0, jsx_runtime_1.jsx)(HelpfulTips_1.default, {}) : null, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(RowPalettizer_1.default, { currLayout: currLayout, setCurrLayout: setCurrLayout }), (0, jsx_runtime_1.jsx)(SourcesGrid_1.default, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
-                                model.clearLayout();
-                                setCurrLayout(model.sources || []);
-                            }, children: "Clear custom settings" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                                setCurrLayout([...(model.sources || [])]);
-                            }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
-                                model.setLayout(currLayout);
-                                handleClose();
-                            }, children: "Submit" })] })] })) }));
+    return ((0, jsx_runtime_1.jsx)(SetColorDialog_1.default, { model: model, handleClose: handleClose, title: "Multi-sample variant display - Color/arrangement editor", enableBulkEdit: true, enableRowPalettizer: true, showTipsStorageKey: "multivariant-showTips", SourcesGridComponent: SourcesGrid_1.default }));
 }

package/dist/shared/components/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/dist/shared/components/{BulkEditPanel.js → SetColorDialogBulkEditPanel.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BulkEditPanel;
+exports.default = SetColorDialogBulkEditPanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
@@ -11,7 +11,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         fontFamily: 'Courier New',
     },
 });
-function BulkEditPanel({ onClose, currLayout, }) {
+function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
     const { classes } = useStyles();
     const [val, setVal] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)();

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

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

package/dist/shared/components/{HelpfulTips.js → SetColorDialogHelpfulTips.js}

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

package/dist/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/dist/shared/components/{RowPalettizer.js → SetColorDialogRowPalettizer.js}

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = RowPalettizer;
+exports.default = SetColorDialogRowPalettizer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("@jbrowse/core/ui/colors");
+const color_1 = require("@jbrowse/core/util/color");
 const material_1 = require("@mui/material");
-const util_1 = require("../util");
-function RowPalettizer({ setCurrLayout, currLayout, }) {
-    var _a;
-    return ((0, jsx_runtime_1.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 => ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
+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 ((0, jsx_runtime_1.jsxs)("div", { children: ["Create color palette based on...", fields.map(r => ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
                     const map = new Map();
                     for (const row of currLayout) {
                         const val = map.get(row[r]);
@@ -26,7 +27,7 @@ function RowPalettizer({ setCurrLayout, currLayout, }) {
                     }
                     const ret = Object.fromEntries([...map.entries()]
                         .sort((a, b) => a[1] - b[1])
-                        .map((r, idx) => [r[0], colors_1.set1[idx] || (0, util_1.randomColor)(r[0])]));
+                        .map((r, idx) => [r[0], colors_1.set1[idx] || (0, color_1.randomColor)(r[0])]));
                     setCurrLayout(currLayout.map(row => ({
                         ...row,
                         color: ret[row[r]],

package/dist/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/dist/shared/components/ui/SetColorDialog.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DraggableDialog_1 = __importDefault(require("@jbrowse/core/ui/DraggableDialog"));
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const SetColorDialogBulkEditPanel_1 = __importDefault(require("./SetColorDialogBulkEditPanel"));
+const SetColorDialogHelpfulTips_1 = __importDefault(require("./SetColorDialogHelpfulTips"));
+const SetColorDialogRowPalettizer_1 = __importDefault(require("./SetColorDialogRowPalettizer"));
+const useStyles = (0, mui_1.makeStyles)()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+        display: 'flex',
+        gap: 8,
+    },
+});
+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] = (0, react_1.useState)(false);
+    const [currLayout, setCurrLayout] = (0, react_1.useState)(structuredClone(sources || []));
+    const [showTips, setShowTips] = (0, util_1.useLocalStorage)(showTipsStorageKey, false);
+    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: title, children: showBulkEditor && enableBulkEdit ? ((0, jsx_runtime_1.jsx)(SetColorDialogBulkEditPanel_1.default, { currLayout: currLayout, onClose: arg => {
+                if (arg) {
+                    setCurrLayout(arg);
+                }
+                setShowBulkEditor(false);
+            } })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.fr, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                        setShowTips(!showTips);
+                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), enableBulkEdit ? ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "secondary", variant: "contained", onClick: () => {
+                                        setShowBulkEditor(!showBulkEditor);
+                                    }, children: "Show Bulk row editor" })) : null] }), showTips ? (0, jsx_runtime_1.jsx)(SetColorDialogHelpfulTips_1.default, {}) : null, enableRowPalettizer ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SetColorDialogRowPalettizer_1.default, { currLayout: currLayout, setCurrLayout: setCurrLayout })] })) : null, (0, jsx_runtime_1.jsx)(SourcesGridComponent, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                                model.clearLayout();
+                                setCurrLayout(model.sources || []);
+                            }, children: "Clear custom settings" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                                setCurrLayout([...(model.sources || [])]);
+                            }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                                model.setLayout(currLayout);
+                                handleClose();
+                            }, children: "Submit" })] })] })) }));
+}

package/dist/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/dist/shared/components/ui/SetColorDialogBulkEditPanel.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialogBulkEditPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.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 ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsx)(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,
+                                },
+                            },
+                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.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" }), (0, jsx_runtime_1.jsx)(material_1.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" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
+                            onClose();
+                        }, children: "Cancel" })] })] }));
+}

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

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

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

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

package/dist/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/dist/shared/components/ui/SetColorDialogRowPalettizer.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialogRowPalettizer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("@jbrowse/core/ui/colors");
+const color_1 = require("@jbrowse/core/util/color");
+const material_1 = require("@mui/material");
+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 ((0, jsx_runtime_1.jsxs)("div", { children: ["Create color palette based on...", fields.map(r => ((0, jsx_runtime_1.jsx)(material_1.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], colors_1.set1[idx] || (0, color_1.randomColor)(r[0])]));
+                    setCurrLayout(currLayout.map(row => ({
+                        ...row,
+                        color: ret[row[r]],
+                    })));
+                }, children: r }, r))), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                    setCurrLayout(currLayout.map(row => ({
+                        ...row,
+                        color: undefined,
+                    })));
+                }, children: "Clear colors" })] }));
+}

package/dist/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/dist/shared/util.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fillRectCtx = fillRectCtx;
-exports.randomColor = randomColor;
 exports.colorify = colorify;
 function fillRectCtx(x, y, width, height, ctx, color) {
     if (width < 0) {
@@ -17,13 +16,6 @@ function fillRectCtx(x, y, width, height, ctx, color) {
     }
     ctx.fillRect(x, y, width, height);
 }
-function randomColor(str) {
-    let sum = 0;
-    for (let i = 0; i < str.length; i++) {
-        sum += str.charCodeAt(i);
-    }
-    return colorify(sum * 10);
-}
 function colorify(n) {
     return `hsl(${n % 255}, 50%, 50%)`;
 }

package/esm/LinearVariantDisplay/model.d.ts

@@ -181,6 +181,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -195,9 +196,22 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -206,6 +220,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/MultiLinearVariantDisplay/model.d.ts

@@ -189,6 +189,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -203,9 +204,22 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -214,6 +228,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/MultiLinearVariantMatrixDisplay/model.d.ts

@@ -189,6 +189,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -203,9 +204,22 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -214,6 +228,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {