@jbrowse/plugin-variants 2.18.0 → 3.0.0

package/esm/shared/RowPalettizer.js

@@ -1,32 +1,37 @@
-import React from 'react';
+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 (React.createElement("div", null, Object.keys((_a = currLayout[0]) !== null && _a !== void 0 ? _a : [])
-        .filter(f => f !== 'name' && f !== 'color')
-        .map(r => {
-        return (React.createElement(Button, { key: r, onClick: () => {
-                const map = new Map();
-                for (const row of currLayout) {
-                    const val = map.get(row[r]);
-                    if (!val) {
-                        map.set(row[r], 1);
+    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);
+                        }
                     }
-                    else {
-                        map.set(row[r], val + 1);
-                    }
-                }
-                const ret = Object.fromEntries([...map.entries()]
-                    .sort((a, b) => a[1] - b[1])
-                    .map((r, idx) => [r[0], set1[idx] || randomColor(r[0])]));
-                setCurrLayout(currLayout.map(row => ({
-                    ...row,
-                    color: ret[row[r]],
-                })));
-            } },
-            "Palettize ",
-            r));
-    })));
+                    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

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

package/esm/shared/SetColorDialog.js

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export default function SetMinMaxDialog(props: {
     model: {
         minScore: number;
@@ -8,4 +7,4 @@ export default function SetMinMaxDialog(props: {
         setMaxScore: (arg?: number) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/SetMinMaxDialog.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+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) {
@@ -10,21 +11,13 @@ export default function SetMinMaxDialog(props) {
         ? +max > +min
         : true;
     const logOk = scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true;
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track" },
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null, "Enter min/max score: "),
-            !ok ? (React.createElement(Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
-            !logOk ? (React.createElement(Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
-            React.createElement(TextField, { value: min, onChange: event => {
-                    setMin(event.target.value);
-                }, placeholder: "Enter min score" }),
-            React.createElement(TextField, { value: max, onChange: event => {
-                    setMax(event.target.value);
-                }, placeholder: "Enter max score" })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", style: { marginLeft: 20 }, disabled: !ok, onClick: () => {
-                    model.setMinScore(min !== '' && !Number.isNaN(+min) ? +min : undefined);
-                    model.setMaxScore(max !== '' && !Number.isNaN(+max) ? +max : undefined);
-                    handleClose();
-                } }, "Submit"))));
+    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/SharedVariantMixin.d.ts

@@ -35,7 +35,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -172,13 +172,13 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -205,7 +205,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -257,7 +257,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -299,8 +299,8 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
-    type: string;
     id: string;
+    type: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
     rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;

package/esm/shared/SourcesDataGrid.d.ts

@@ -0,0 +1,6 @@
+import type { Source } from '../types';
+export default function SourcesDataGrid({ rows, onChange, setSelected, }: {
+    rows: Source[];
+    onChange: (arg: Source[]) => void;
+    setSelected: (arg: string[]) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/SourcesDataGrid.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import ColorPicker from '@jbrowse/core/ui/ColorPicker';
+import { getStr, measureGridWidth } from '@jbrowse/core/util';
+import { DataGrid } from '@mui/x-data-grid';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+export default function SourcesDataGrid({ rows, onChange, setSelected, }) {
+    const { classes } = useStyles();
+    const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
+    const [currSort, setCurrSort] = useState({
+        idx: 0,
+        field: null,
+    });
+    return (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                setSelected(arg);
+            }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                {
+                    field: 'color',
+                    headerName: 'Color',
+                    renderCell: params => {
+                        const { value, id } = params;
+                        return (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
+                                const elt = rows.find(f => f.name === id);
+                                if (elt) {
+                                    elt.color = c;
+                                }
+                                onChange([...rows]);
+                            } }));
+                    },
+                },
+                {
+                    field: 'label',
+                    headerName: 'Name',
+                    width: measureGridWidth(rows.map(r => r.label)),
+                },
+                ...Object.keys(rest).map(val => ({
+                    field: val,
+                    renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
+                    width: measureGridWidth(rows.map(r => `${r[val]}`)),
+                })),
+            ], sortModel: [], onSortModelChange: args => {
+                const sort = args[0];
+                const idx = (currSort.idx + 1) % 2;
+                const field = sort.field || currSort.field;
+                setCurrSort({ idx, field });
+                onChange(field
+                    ? [...rows].sort((a, b) => {
+                        const aa = getStr(a[field]);
+                        const bb = getStr(b[field]);
+                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
+                    })
+                    : rows);
+            } }) }));
+}

package/esm/shared/SourcesGrid.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { Source } from '../util';
+import type { Source } from '../types';
 declare function SourcesGrid({ rows, onChange, showTips, }: {
     rows: Source[];
     onChange: (arg: Source[]) => void;
     showTips: boolean;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default SourcesGrid;

package/esm/shared/SourcesGrid.js

@@ -1,115 +1,9 @@
-import React, { useState } from 'react';
-import { SanitizedHTML } from '@jbrowse/core/ui';
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
-import { getStr, measureGridWidth } from '@jbrowse/core/util';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
-import { Button } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
-import { makeStyles } from 'tss-react/mui';
-import { moveDown, moveUp } from './util';
-const useStyles = makeStyles()({
-    cell: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import SourcesDataGrid from './SourcesDataGrid';
+import SourcesGridHeader from './SourcesGridHeader';
 function SourcesGrid({ rows, onChange, showTips, }) {
-    const { classes } = useStyles();
     const [selected, setSelected] = useState([]);
-    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
-    const [currSort, setCurrSort] = useState({
-        idx: 0,
-        field: null,
-    });
-    return (React.createElement("div", null,
-        React.createElement(GridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }),
-        React.createElement("div", { style: { height: 400, width: '100%' } },
-            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                    setSelected(arg);
-                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                    {
-                        field: 'color',
-                        headerName: 'Color',
-                        renderCell: params => {
-                            const { value, id } = params;
-                            return (React.createElement(ColorPicker, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
-                    },
-                    {
-                        field: 'name',
-                        headerName: 'Name',
-                        width: measureGridWidth(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (React.createElement("div", { className: classes.cell },
-                            React.createElement(SanitizedHTML, { html: getStr(value) }))),
-                        width: measureGridWidth(rows.map(r => `${r[val]}`)),
-                    })),
-                ], sortModel: [], onSortModelChange: args => {
-                    const sort = args[0];
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = sort.field || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            const aa = getStr(a[field]);
-                            const bb = getStr(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
-}
-function GridHeader({ selected, onChange, rows, showTips, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [widgetColor, setWidgetColor] = useState('blue');
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { disabled: !selected.length, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }, "Change color of selected items"),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveUp([...rows], selected));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardArrowUpIcon, null),
-            showTips ? 'Move selected items up' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveDown([...rows], selected));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardArrowDownIcon, null),
-            showTips ? 'Move selected items down' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveUp([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowUpIcon, null),
-            showTips ? 'Move selected items to top' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveDown([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowDownIcon, null),
-            showTips ? 'Move selected items to bottom' : null),
-        React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
-                setWidgetColor(c);
-                selected.forEach(id => {
-                    const elt = rows.find(f => f.name === id);
-                    if (elt) {
-                        elt.color = c;
-                    }
-                });
-                onChange([...rows]);
-            }, onClose: () => {
-                setAnchorEl(null);
-            } })));
+    return (_jsxs("div", { children: [_jsx(SourcesGridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), _jsx(SourcesDataGrid, { rows: rows, onChange: onChange, setSelected: setSelected })] }));
 }
 export default SourcesGrid;

package/esm/shared/SourcesGridHeader.d.ts

@@ -0,0 +1,7 @@
+import type { Source } from '../types';
+export default function SourcesGridHeader({ selected, onChange, rows, showTips, }: {
+    onChange: (arg: Source[]) => void;
+    rows: Source[];
+    selected: string[];
+    showTips: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/SourcesGridHeader.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { Button } from '@mui/material';
+import { moveDown, moveUp } from './util';
+export default function SourcesGridHeader({ selected, onChange, rows, showTips, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [widgetColor, setWidgetColor] = useState('blue');
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: !selected.length, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: "Change color of selected items" }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowUpIcon, {}), showTips ? 'Move selected items up' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowDownIcon, {}), showTips ? 'Move selected items down' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowUpIcon, {}), showTips ? 'Move selected items to top' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowDownIcon, {}), showTips ? 'Move selected items to bottom' : null] }), _jsx(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                    setWidgetColor(c);
+                    selected.forEach(id => {
+                        const elt = rows.find(f => f.name === id);
+                        if (elt) {
+                            elt.color = c;
+                        }
+                    });
+                    onChange([...rows]);
+                }, onClose: () => {
+                    setAnchorEl(null);
+                } })] }));
+}

package/esm/shared/multiVariantColor.d.ts

@@ -0,0 +1,3 @@
+export declare function getColorAlleleCount(alleles: string[]): string;
+export declare function getColorPhased(alleles: string[], HP: number): string;
+export declare function getColorPhasedWithPhaseSet(alleles: string[], HP: number, PS: string): string;

package/esm/shared/multiVariantColor.js

@@ -0,0 +1,45 @@
+import { set1 } from '@jbrowse/core/ui/colors';
+import { colord } from '@jbrowse/core/util/colord';
+import { colorify } from '../util';
+export function getColorAlleleCount(alleles) {
+    const total = alleles.length;
+    let alt = 0;
+    let uncalled = 0;
+    let alt2 = 0;
+    let ref = 0;
+    for (const allele of alleles) {
+        if (allele === '1') {
+            alt++;
+        }
+        else if (allele === '0') {
+            ref++;
+        }
+        else if (allele === '.') {
+            uncalled++;
+        }
+        else {
+            alt2++;
+        }
+    }
+    if (ref === total) {
+        return `#ccc`;
+    }
+    else {
+        let a1 = colord(`hsl(200,50%,${80 - (alt / total) * 50}%)`);
+        if (alt2) {
+            a1 = a1.mix(`hsla(0,100%,20%,${alt2 / total})`);
+        }
+        if (uncalled) {
+            a1 = a1.mix(`hsla(50,50%,50%,${uncalled / total / 2})`);
+        }
+        return a1.toHex();
+    }
+}
+export function getColorPhased(alleles, HP) {
+    const c = +alleles[HP];
+    return c ? set1[c - 1] || 'black' : '#ccc';
+}
+export function getColorPhasedWithPhaseSet(alleles, HP, PS) {
+    const c = +alleles[HP];
+    return c ? colorify(+PS) || 'black' : '#ccc';
+}

package/esm/types.d.ts

@@ -0,0 +1,14 @@
+export interface Source {
+    baseUri?: string;
+    name: string;
+    label?: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+    id?: string;
+    [key: string]: unknown;
+}
+export interface SampleInfo {
+    isPhased: boolean;
+    maxPloidy: number;
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};