@jbrowse/plugin-data-management 2.17.0 → 3.0.0

package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Button, Checkbox, DialogContent, DialogActions, FormControlLabel, Typography, } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { readConfObject } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from 'tss-react/mui';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { makeStyles } from 'tss-react/mui';
 function ellipses(slug) {
     return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug;
 }
@@ -18,7 +18,7 @@ const ConnectionRow = observer(function ConnectionRow({ conf, session, breakConn
     const name = readConfObject(conf, 'name');
     const assemblyNames = readConfObject(conf, 'assemblyNames');
     const found = instances.find(conn => name === conn.name);
-    return (React.createElement(FormControlLabel, { key: conf.connectionId, control: React.createElement(Checkbox, { checked: !!found, onChange: () => {
+    return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !!found, onChange: () => {
                 var _a;
                 if (found) {
                     breakConnection(conf);
@@ -31,21 +31,15 @@ const ConnectionRow = observer(function ConnectionRow({ conf, session, breakConn
             assemblyNames.length ? `(${ellipses(assemblyNames.join(','))})` : '',
         ]
             .filter(f => !!f)
-            .join(' ') }));
+            .join(' ') }, conf.connectionId));
 });
 const ConnectionList = observer(function ConnectionsList({ session, breakConnection, }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.connectionContainer }, !session.connections.length ? (React.createElement(Typography, null, "No connections found")) : (session.connections.map((conf, idx) => (React.createElement("div", { key: `${conf.name}_${idx}` },
-        React.createElement(ConnectionRow, { conf: conf, session: session, breakConnection: breakConnection })))))));
+    return (_jsx("div", { className: classes.connectionContainer, children: !session.connections.length ? (_jsx(Typography, { children: "No connections found" })) : (session.connections.map((conf, idx) => (_jsx("div", { children: _jsx(ConnectionRow, { conf: conf, session: session, breakConnection: breakConnection }) }, `${conf.name}_${idx}`)))) }));
 });
 const ToggleConnectionDialog = observer(function ({ session, handleClose, breakConnection, }) {
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Turn on/off connections" },
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null, "Use the checkbox to turn on/off connections"),
-            React.createElement(ConnectionList, { session: session, breakConnection: breakConnection })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    handleClose();
-                }, variant: "contained", color: "primary" }, "Close"))));
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Turn on/off connections", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Use the checkbox to turn on/off connections" }), _jsx(ConnectionList, { session: session, breakConnection: breakConnection })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+                        handleClose();
+                    }, variant: "contained", color: "primary", children: "Close" }) })] }));
 });
 export default ToggleConnectionDialog;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetFilter: ({ column, vals, model, }: {
     column: {
         field: string;
     };
     vals: [string, number][];
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetFilter;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { Typography, FormControl, Select, IconButton, Tooltip, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-// icon
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { coarseStripHTML } from '@jbrowse/core/util';
+import AddIcon from '@mui/icons-material/Add';
 import ClearIcon from '@mui/icons-material/Clear';
 import MinimizeIcon from '@mui/icons-material/Minimize';
-import AddIcon from '@mui/icons-material/Add';
-import { coarseStripHTML } from '@jbrowse/core/util';
+import { FormControl, IconButton, Select, Tooltip, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     facet: {
         margin: 0,
@@ -17,17 +17,14 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 function ClearButton({ onClick }) {
-    return (React.createElement(Tooltip, { title: "Clear selection on this facet filter" },
-        React.createElement(IconButton, { onClick: () => {
+    return (_jsx(Tooltip, { title: "Clear selection on this facet filter", children: _jsx(IconButton, { onClick: () => {
                 onClick();
-            }, size: "small" },
-            React.createElement(ClearIcon, null))));
+            }, size: "small", children: _jsx(ClearIcon, {}) }) }));
 }
 function ExpandButton({ visible, onClick, }) {
-    return (React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
-        React.createElement(IconButton, { onClick: () => {
+    return (_jsx(Tooltip, { title: "Minimize/expand this facet filter", children: _jsx(IconButton, { onClick: () => {
                 onClick();
-            }, size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null))));
+            }, size: "small", children: visible ? _jsx(MinimizeIcon, {}) : _jsx(AddIcon, {}) }) }));
 }
 const FacetFilter = observer(function ({ column, vals, model, }) {
     const { classes } = useStyles();
@@ -35,27 +32,16 @@ const FacetFilter = observer(function ({ column, vals, model, }) {
     const { faceted } = model;
     const { filters } = faceted;
     const { field } = column;
-    return (React.createElement(FormControl, { className: classes.facet, fullWidth: true },
-        React.createElement("div", null,
-            React.createElement(Typography, { component: "span" }, field),
-            React.createElement(ClearButton, { onClick: () => {
-                    faceted.setFilter(field, []);
-                } }),
-            React.createElement(ExpandButton, { visible: visible, onClick: () => {
-                    setVisible(!visible);
-                } })),
-        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
-                faceted.setFilter(column.field, 
-                // @ts-expect-error
-                [...event.target.options]
-                    .filter(opt => opt.selected)
-                    .map(opt => opt.value));
-            } }, vals
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([name, count]) => (React.createElement("option", { key: name, value: name },
-            coarseStripHTML(name),
-            " (",
-            count,
-            ")"))))) : null));
+    return (_jsxs(FormControl, { className: classes.facet, fullWidth: true, children: [_jsxs("div", { children: [_jsx(Typography, { component: "span", children: field }), _jsx(ClearButton, { onClick: () => {
+                            faceted.setFilter(field, []);
+                        } }), _jsx(ExpandButton, { visible: visible, onClick: () => {
+                            setVisible(!visible);
+                        } })] }), visible ? (_jsx(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
+                    faceted.setFilter(column.field, [...event.target.options]
+                        .filter(opt => opt.selected)
+                        .map(opt => opt.value));
+                }, children: vals
+                    .sort((a, b) => a[0].localeCompare(b[0]))
+                    .map(([name, count]) => (_jsxs("option", { value: name, children: [coarseStripHTML(name), " (", count, ")"] }, name))) })) : null] }));
 });
 export default FacetFilter;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
-import { Row } from './util';
+import type { Row } from './util';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetFilters: ({ rows, columns, model, }: {
     rows: Row[];
     columns: {
         field: string;
     }[];
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetFilters;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-// locals
 import FacetFilter from './FacetFilter';
 import { getRowStr } from './util';
 const FacetFilters = observer(function ({ rows, columns, model, }) {
@@ -8,43 +7,40 @@ const FacetFilters = observer(function ({ rows, columns, model, }) {
     const { faceted } = model;
     const { filters } = faceted;
     const facets = columns.slice(1);
-    const uniqs = new Map(facets.map(f => [f.field, new Map()]));
-    // this code "stages the facet filters" in order that the user has selected
-    // them, which relies on the js behavior that the order of the returned keys is
-    // related to the insertion order.
+    const facetFieldToCategoryCountMap = new Map(columns.slice(1).map(f => [f.field, new Map()]));
     const filterKeys = faceted.filters.keys();
     const facetKeys = facets.map(f => f.field);
-    const ret = new Set();
+    const facetKeysPrioritizingUserSelections = new Set();
     for (const entry of filterKeys) {
-        // give non-empty filters priority
         if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
-            ret.add(entry);
+            facetKeysPrioritizingUserSelections.add(entry);
         }
     }
     for (const entry of facetKeys) {
-        ret.add(entry);
+        facetKeysPrioritizingUserSelections.add(entry);
     }
     let currentRows = rows;
-    for (const facet of ret) {
-        const elt = uniqs.get(facet);
-        for (const row of currentRows) {
-            const key = getRowStr(facet, row);
-            const val = elt.get(key);
-            // we don't allow filtering on empty yet
-            if (key) {
-                if (val === undefined) {
-                    elt.set(key, 1);
-                }
-                else {
-                    elt.set(key, val + 1);
+    for (const facetKey of facetKeysPrioritizingUserSelections) {
+        const categoryCountMap = facetFieldToCategoryCountMap.get(facetKey);
+        if (categoryCountMap) {
+            for (const row of currentRows) {
+                const key = getRowStr(facetKey, row);
+                const currentCount = categoryCountMap.get(key);
+                if (key) {
+                    if (currentCount === undefined) {
+                        categoryCountMap.set(key, 1);
+                    }
+                    else {
+                        categoryCountMap.set(key, currentCount + 1);
+                    }
                 }
             }
         }
-        const filter = ((_b = filters.get(facet)) === null || _b === void 0 ? void 0 : _b.length)
-            ? new Set(filters.get(facet))
+        const filter = ((_b = filters.get(facetKey)) === null || _b === void 0 ? void 0 : _b.length)
+            ? new Set(filters.get(facetKey))
             : undefined;
-        currentRows = currentRows.filter(row => filter !== undefined ? filter.has(getRowStr(facet, row)) : true);
+        currentRows = currentRows.filter(row => filter !== undefined ? filter.has(getRowStr(facetKey, row)) : true);
     }
-    return (React.createElement("div", null, facets.map(c => (React.createElement(FacetFilter, { key: c.field, vals: [...uniqs.get(c.field)], column: c, model: model })))));
+    return (_jsx("div", { children: facets.map(c => (_jsx(FacetFilter, { vals: [...facetFieldToCategoryCountMap.get(c.field)], column: c, model: model }, c.field))) }));
 });
 export default FacetFilters;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDataGrid.d.ts

@@ -0,0 +1,9 @@
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { GridColDef } from '@mui/x-data-grid';
+declare const FacetedDataGrid: ({ model, columns, shownTrackIds, selection, }: {
+    model: HierarchicalTrackSelectorModel;
+    columns: GridColDef[];
+    shownTrackIds: Set<string>;
+    selection: any[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default FacetedDataGrid;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDataGrid.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getEnv, measureGridWidth } from '@jbrowse/core/util';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
+import { getRoot, resolveIdentifier } from 'mobx-state-tree';
+const FacetedDataGrid = observer(function ({ model, columns, shownTrackIds, selection, }) {
+    const { pluginManager } = getEnv(model);
+    const { view, faceted } = model;
+    const { rows, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
+    const [widths, setWidths] = useState({
+        name: measureGridWidth(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
+        ...Object.fromEntries(filteredNonMetadataKeys
+            .filter(f => visible[f])
+            .map(e => [
+            e,
+            measureGridWidth(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
+        ])),
+        ...Object.fromEntries(filteredMetadataKeys
+            .filter(f => visible[`metadata.${f}`])
+            .map(e => {
+            return [
+                `metadata.${e}`,
+                measureGridWidth(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+            ];
+        })),
+    });
+    return (_jsx(DataGrid, { rows: filteredRows, onColumnWidthChange: arg => {
+            setWidths({
+                ...widths,
+                [arg.colDef.field]: arg.width,
+            });
+        }, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => {
+            model.faceted.setVisible(n);
+        }, columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+            if (!useShoppingCart) {
+                const a1 = shownTrackIds;
+                const a2 = new Set(userSelectedIds);
+                transaction(() => {
+                    ;
+                    [...a1].filter(x => !a2.has(x)).map(t => view.hideTrack(t));
+                    [...a2]
+                        .filter(x => !a1.has(x))
+                        .map(t => {
+                        view.showTrack(t);
+                        model.addToRecentlyUsed(t);
+                    });
+                });
+            }
+            else {
+                const root = getRoot(model);
+                const schema = pluginManager.pluggableConfigSchemaType('track');
+                model.setSelection(userSelectedIds.map(id => resolveIdentifier(schema, root, id)));
+            }
+        }, rowSelectionModel: useShoppingCart ? selection.map(s => s.trackId) : [...shownTrackIds], slots: {
+            toolbar: showOptions ? GridToolbar : null,
+        }, slotProps: {
+            toolbar: {
+                printOptions: {
+                    disableToolbarButton: true,
+                },
+            },
+        }, columns: columns.map(r => ({
+            ...r,
+            width: widths[r.field],
+        })), rowHeight: 25 }));
+});
+export default FacetedDataGrid;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetedTrackSelectorDialog;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import { DialogContent } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog } from '@jbrowse/core/ui';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
 import FacetedSelector from './FacetedSelector';
 const FacetedTrackSelectorDialog = observer(function (props) {
     const { handleClose } = props;
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Faceted track selector" },
-        React.createElement(DialogContent, null,
-            React.createElement(FacetedSelector, { ...props }))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Faceted track selector", children: _jsx(DialogContent, { children: _jsx(FacetedSelector, { ...props }) }) }));
 });
 export default FacetedTrackSelectorDialog;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 export default function FacetedHeader({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.js

@@ -1,73 +1,61 @@
-import React, { useState } from 'react';
-import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
-// icons
 import ClearIcon from '@mui/icons-material/Clear';
 import MoreVert from '@mui/icons-material/MoreVert';
-// locals
+import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import ShoppingCart from '../ShoppingCart';
 export default function FacetedHeader({ model, }) {
     const { faceted } = model;
     const [anchorEl, setAnchorEl] = useState(null);
     const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Grid, { container: true, spacing: 4, alignItems: "center" },
-            React.createElement(Grid, { item: true },
-                React.createElement(TextField, { label: "Search...", value: faceted.filterText, onChange: event => {
-                        faceted.setFilterText(event.target.value);
-                    }, slotProps: {
-                        input: {
-                            endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                                React.createElement(IconButton, { onClick: () => {
-                                        faceted.setFilterText('');
-                                    } },
-                                    React.createElement(ClearIcon, null)))),
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: 4, alignItems: "center", children: [_jsx(Grid, { item: true, children: _jsx(TextField, { label: "Search...", value: faceted.filterText, onChange: event => {
+                                faceted.setFilterText(event.target.value);
+                            }, slotProps: {
+                                input: {
+                                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
+                                                faceted.setFilterText('');
+                                            }, children: _jsx(ClearIcon, {}) }) })),
+                                },
+                            } }) }), _jsx(Grid, { item: true, children: _jsx(IconButton, { onClick: event => {
+                                setAnchorEl(event.currentTarget);
+                            }, children: _jsx(MoreVert, {}) }) }), _jsx(Grid, { item: true, children: _jsx(ShoppingCart, { model: model }) })] }), _jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
+                    setAnchorEl(null);
+                }, onMenuItemClick: (_event, callback) => {
+                    callback();
+                    setAnchorEl(null);
+                }, menuItems: [
+                    {
+                        label: 'Add tracks to selection instead of turning them on/off',
+                        onClick: () => {
+                            faceted.setUseShoppingCart(!useShoppingCart);
                         },
-                    } })),
-            React.createElement(Grid, { item: true },
-                React.createElement(IconButton, { onClick: event => {
-                        setAnchorEl(event.currentTarget);
-                    } },
-                    React.createElement(MoreVert, null))),
-            React.createElement(Grid, { item: true },
-                React.createElement(ShoppingCart, { model: model }))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
-                setAnchorEl(null);
-            }, onMenuItemClick: (_event, callback) => {
-                callback();
-                setAnchorEl(null);
-            }, menuItems: [
-                {
-                    label: 'Add tracks to selection instead of turning them on/off',
-                    onClick: () => {
-                        faceted.setUseShoppingCart(!useShoppingCart);
+                        type: 'checkbox',
+                        checked: useShoppingCart,
                     },
-                    type: 'checkbox',
-                    checked: useShoppingCart,
-                },
-                {
-                    label: 'Show sparse metadata columns',
-                    onClick: () => {
-                        faceted.setShowSparse(!showSparse);
+                    {
+                        label: 'Show sparse metadata columns',
+                        onClick: () => {
+                            faceted.setShowSparse(!showSparse);
+                        },
+                        checked: showSparse,
+                        type: 'checkbox',
                     },
-                    checked: showSparse,
-                    type: 'checkbox',
-                },
-                {
-                    label: 'Show facet filters',
-                    onClick: () => {
-                        faceted.setShowFilters(!showFilters);
+                    {
+                        label: 'Show facet filters',
+                        onClick: () => {
+                            faceted.setShowFilters(!showFilters);
+                        },
+                        checked: showFilters,
+                        type: 'checkbox',
                     },
-                    checked: showFilters,
-                    type: 'checkbox',
-                },
-                {
-                    label: 'Show extra table options',
-                    onClick: () => {
-                        faceted.setShowOptions(!showOptions);
+                    {
+                        label: 'Show extra table options',
+                        onClick: () => {
+                            faceted.setShowOptions(!showOptions);
+                        },
+                        checked: showOptions,
+                        type: 'checkbox',
                     },
-                    checked: showOptions,
-                    type: 'checkbox',
-                },
-            ] })));
+                ] })] }));
 }

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface InfoArgs {
     target: HTMLElement;
     id: string;
@@ -8,5 +7,5 @@ export interface InfoArgs {
 }
 declare const FacetedSelector: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetedSelector;