@jbrowse/plugin-variants 2.18.0 → 3.0.0

package/dist/shared/MultiVariantTooltip.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MultiVariantTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
+const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+function MultiVariantTooltip({ source, }) {
+    return ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { children: [source.color ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    width: 10,
+                    height: 10,
+                    backgroundColor: source.color,
+                } })) : null, (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: Object.entries(source)
+                    .filter(([key, val]) => key !== 'color' &&
+                    key !== 'name' &&
+                    key !== 'HP' &&
+                    key !== 'id' &&
+                    val !== undefined)
+                    .map(([key, value]) => `${key}:${value}`)
+                    .join('<br/>') })] }));
+}

package/dist/shared/RectBg.d.ts

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

package/dist/shared/RectBg.js

@@ -1,12 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
-const RectBg = (props) => {
-    const { color = 'rgb(255,255,255)' } = props;
-    return react_1.default.createElement("rect", { pointerEvents: "auto", ...props, ...(0, util_1.getFillProps)(color) });
+const RectBg = ({ x, y, width, height, color = 'rgba(255,255,255,0.5)', }) => {
+    return ((0, jsx_runtime_1.jsx)("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...(0, util_1.getFillProps)(color) }));
 };
 exports.default = RectBg;

package/dist/shared/RowPalettizer.d.ts

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

package/dist/shared/RowPalettizer.js

@@ -1,38 +1,40 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RowPalettizer;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("@jbrowse/core/ui/colors");
 const material_1 = require("@mui/material");
 const util_1 = require("../util");
 function RowPalettizer({ setCurrLayout, currLayout, }) {
     var _a;
-    return (react_1.default.createElement("div", null, Object.keys((_a = currLayout[0]) !== null && _a !== void 0 ? _a : [])
-        .filter(f => f !== 'name' && f !== 'color')
-        .map(r => {
-        return (react_1.default.createElement(material_1.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 ((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: () => {
+                    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], colors_1.set1[idx] || (0, util_1.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], colors_1.set1[idx] || (0, util_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/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/dist/shared/SetColorDialog.js

@@ -1,46 +1,27 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SetColorDialog;
-const react_1 = __importStar(require("react"));
+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 DraggableDialog_1 = __importDefault(require("./DraggableDialog"));
-const SourcesGrid_1 = __importDefault(require("./SourcesGrid"));
 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',
@@ -52,43 +33,23 @@ function SetColorDialog({ model, handleClose, }) {
     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 (react_1.default.createElement(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant color/arrangement editor" },
-        react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-            react_1.default.createElement("div", { className: classes.fr },
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                        setShowTips(!showTips);
-                    } }, showTips ? 'Hide tips' : 'Show tips'),
-                react_1.default.createElement(material_1.Button, { color: "secondary", variant: "contained", onClick: () => {
-                        setShowBulkEditor(!showBulkEditor);
-                    } }, showBulkEditor ? 'Hide bulk row editor' : 'Show Bulk row editor')),
-            react_1.default.createElement("br", null),
-            showTips ? react_1.default.createElement(HelpfulTips, null) : null,
-            showBulkEditor ? (react_1.default.createElement(BulkEditPanel_1.default, { currLayout: currLayout, setCurrLayout: setCurrLayout })) : null,
-            react_1.default.createElement(RowPalettizer_1.default, { currLayout: currLayout, setCurrLayout: setCurrLayout }),
-            react_1.default.createElement(SourcesGrid_1.default, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
-                    model.clearLayout();
-                    setCurrLayout(model.sources || []);
-                } }, "Clear custom settings"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                    setCurrLayout([...(model.sources || [])]);
-                } }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
-                    model.setLayout(currLayout);
-                    handleClose();
-                } }, "Submit"))));
-}
-function HelpfulTips() {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        "Helpful tips",
-        react_1.default.createElement("ul", null,
-            react_1.default.createElement("li", null, "You can select rows in the table with the checkboxes"),
-            react_1.default.createElement("li", null, "Multi-select is enabled with shift-click and control-click"),
-            react_1.default.createElement("li", null, "The \"Move selected items up/down\" can re-arrange subtracks"),
-            react_1.default.createElement("li", null, "Sorting the data grid itself can also re-arrange subtracks"),
-            react_1.default.createElement("li", null, "Changes are applied when you hit Submit"),
-            react_1.default.createElement("li", null, "You can click and drag the dialog box to move it on the screen"),
-            react_1.default.createElement("li", null, "Columns in the table can be hidden using a vertical '...' menu on the right side of each column"))));
+    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant 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" })] })] })) }));
 }

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

@@ -1,30 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SetMinMaxDialog;
-const react_1 = __importStar(require("react"));
+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");
 function SetMinMaxDialog(props) {
@@ -36,21 +14,13 @@ function SetMinMaxDialog(props) {
         ? +max > +min
         : true;
     const logOk = scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true;
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null, "Enter min/max score: "),
-            !ok ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
-            !logOk ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
-            react_1.default.createElement(material_1.TextField, { value: min, onChange: event => {
-                    setMin(event.target.value);
-                }, placeholder: "Enter min score" }),
-            react_1.default.createElement(material_1.TextField, { value: max, onChange: event => {
-                    setMax(event.target.value);
-                }, placeholder: "Enter max score" })),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Enter min/max score: " }), !ok ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: "Max is greater than or equal to min" })) : null, !logOk ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: "Min score should be greater than 0 for log scale" })) : null, (0, jsx_runtime_1.jsx)(material_1.TextField, { value: min, onChange: event => {
+                            setMin(event.target.value);
+                        }, placeholder: "Enter min score" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: max, onChange: event => {
+                            setMax(event.target.value);
+                        }, placeholder: "Enter max score" })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.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/dist/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/dist/shared/SetRowHeightDialog.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetRowHeight;
+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");
+function SetRowHeight({ model, handleClose, }) {
+    const [value, setValue] = (0, react_1.useState)(`${model.rowHeight}`);
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, title: "Set row height", onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: value, onChange: event => {
+                        setValue(event.target.value);
+                    } }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { disabled: Number.isNaN(+value), variant: "contained", onClick: () => {
+                            model.setRowHeight(+value);
+                            handleClose();
+                        }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SourcesDataGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const ColorPicker_1 = __importDefault(require("@jbrowse/core/ui/ColorPicker"));
+const util_1 = require("@jbrowse/core/util");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+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] = (0, react_1.useState)({
+        idx: 0,
+        field: null,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.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 ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { 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: (0, util_1.measureGridWidth)(rows.map(r => r.label)),
+                },
+                ...Object.keys(rest).map(val => ({
+                    field: val,
+                    renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
+                    width: (0, util_1.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 = (0, util_1.getStr)(a[field]);
+                        const bb = (0, util_1.getStr)(b[field]);
+                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
+                    })
+                    : rows);
+            } }) }));
+}

package/dist/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;