@jbrowse/plugin-data-management 3.7.0 → 4.0.1

package/esm/AssemblyManager/AssemblyAddForm.js

@@ -3,21 +3,21 @@ import { useState } from 'react';
 import { FileSelector } from '@jbrowse/core/ui';
 import { Alert, Button, DialogActions, DialogContent, MenuItem, TextField, } from '@mui/material';
 import { observer } from 'mobx-react';
-const AdapterSelector = observer(function ({ adapterSelection, setAdapterSelection, adapterTypes, }) {
+const AdapterSelector = observer(function AdapterSelector({ adapterSelection, setAdapterSelection, adapterTypes, }) {
     return (_jsx(TextField, { value: adapterSelection, variant: "outlined", select: true, helperText: "Type of adapter to use", fullWidth: true, onChange: event => {
             setAdapterSelection(event.target.value);
         }, children: adapterTypes.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
 });
-const UnindexedFastaAdapterInput = observer(function ({ fastaLocation, setFastaLocation, }) {
+const UnindexedFastaAdapterInput = observer(function UnindexedFastaAdapterInput({ fastaLocation, setFastaLocation, }) {
     return (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "warning", style: { margin: 8 }, children: "Note: a FASTA index will be generated on submit, might take a couple minutes and if the file is remote, it will be downloaded in full" }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) })] }));
 });
-const IndexedFastaAdapterInput = observer(function ({ fastaLocation, faiLocation, setFaiLocation, setFastaLocation, }) {
+const IndexedFastaAdapterInput = observer(function IndexedFastaAdapterInput({ fastaLocation, faiLocation, setFaiLocation, setFastaLocation, }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) })] }));
 });
-const BgzipFastaAdapterInput = observer(function ({ fastaLocation, faiLocation, gziLocation, setFaiLocation, setGziLocation, setFastaLocation, }) {
+const BgzipFastaAdapterInput = observer(function BgzipFastaAdapterInput({ fastaLocation, faiLocation, gziLocation, setFaiLocation, setGziLocation, setFastaLocation, }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file (.fa.gz)", location: fastaLocation, setLocation: setFastaLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA gzip index (.gzi) file", location: gziLocation, setLocation: setGziLocation }) })] }));
 });
-const TwoBitAdapterInput = observer(function ({ twoBitLocation, chromSizesLocation, setTwoBitLocation, setChromSizesLocation, }) {
+const TwoBitAdapterInput = observer(function TwoBitAdapterInput({ twoBitLocation, chromSizesLocation, setTwoBitLocation, setChromSizesLocation, }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "2bit file", location: twoBitLocation, setLocation: setTwoBitLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: ".chrom.sizes (optional, can speed up loading 2bit files with many contigs)", location: chromSizesLocation, setLocation: setChromSizesLocation }) })] }));
 });
 const blank = { uri: '' };
@@ -27,7 +27,7 @@ const adapterTypes = [
     'UnindexedFastaAdapter',
     'TwoBitAdapter',
 ];
-const AssemblyAddForm = observer(function ({ session, onClose, }) {
+const AssemblyAddForm = observer(function AssemblyAddForm({ session, onClose, }) {
     const [assemblyName, setAssemblyName] = useState('');
     const [assemblyDisplayName, setAssemblyDisplayName] = useState('');
     const [adapterSelection, setAdapterSelection] = useState(adapterTypes[0]);

package/esm/AssemblyManager/AssemblyEditor.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { ConfigurationEditor } from '@jbrowse/plugin-config';
 import { Button, DialogActions, DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     container: {
         overflow: 'auto',
         maxHeight: 600,
     },
 });
-const AssemblyEditor = observer(function ({ assembly, onClose, }) {
+const AssemblyEditor = observer(function AssemblyEditor({ assembly, onClose, }) {
     const { classes } = useStyles();
     return (_jsxs(_Fragment, { children: [_jsx(DialogContent, { children: _jsx("div", { className: classes.container, children: assembly ? (_jsx(ConfigurationEditor, { model: { target: assembly } })) : (_jsx("div", { children: "No assembly" })) }) }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", onClick: () => {
                         onClose();

package/esm/AssemblyManager/AssemblyManager.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import AssemblyAddForm from './AssemblyAddForm';
-import AssemblyEditor from './AssemblyEditor';
-import AssemblyTable from './AssemblyTable';
-const AssemblyManager = observer(function ({ session, onClose, }) {
+import AssemblyAddForm from "./AssemblyAddForm.js";
+import AssemblyEditor from "./AssemblyEditor.js";
+import AssemblyTable from "./AssemblyTable.js";
+const AssemblyManager = observer(function AssemblyManager({ session, onClose, }) {
     const [isFormOpen, setFormOpen] = useState(false);
     const [editingAssembly, setEditingAssembly] = useState();
     return (_jsx(Dialog, { open: true, title: "Assembly manager", onClose: () => {

package/esm/AssemblyManager/AssemblyTable.js

@@ -7,7 +7,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Button, DialogActions, DialogContent, IconButton } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import { observer } from 'mobx-react';
-const AssemblyTable = observer(function ({ onEditAssembly, onAddAssembly, onClose, session, }) {
+const AssemblyTable = observer(function AssemblyTable({ onEditAssembly, onAddAssembly, onClose, session, }) {
     return (_jsxs(_Fragment, { children: [_jsx(DialogContent, { children: _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { rowHeight: 25, columnHeaderHeight: 35, hideFooter: session.assemblies.length < 25, rows: session.assemblies.map(assembly => ({
                             id: readConfObject(assembly, 'name'),
                             name: readConfObject(assembly, 'name'),

package/esm/AssemblyManager/index.d.ts

@@ -1 +1 @@
-export { default } from './AssemblyManager';
+export { default } from './AssemblyManager.tsx';

package/esm/AssemblyManager/index.js

@@ -1 +1 @@
-export { default } from './AssemblyManager';
+export { default } from "./AssemblyManager.js";

package/esm/HierarchicalTrackSelectorWidget/components/AutoSizer.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export default function AutoSizer({ children, disableWidth, }: {
+    children: (size: {
+        height: number;
+        width: number;
+    }) => ReactNode;
+    disableWidth?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/HierarchicalTrackSelectorWidget/components/AutoSizer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+export default function AutoSizer({ children, disableWidth, }) {
+    const ref = useRef(null);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        const parent = ref.current?.parentElement;
+        if (!parent) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            const style = window.getComputedStyle(parent);
+            const rect = parent.getBoundingClientRect();
+            setHeight(rect.height -
+                parseFloat(style.paddingTop) -
+                parseFloat(style.paddingBottom));
+        });
+        observer.observe(parent);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return (_jsx("div", { ref: ref, style: { height: disableWidth ? 0 : undefined, overflow: 'visible' }, children: height > 0 ? children({ height, width: 0 }) : null }));
+}

package/esm/HierarchicalTrackSelectorWidget/components/ClearableSearchField.d.ts

@@ -0,0 +1,6 @@
+export default function ClearableSearchField({ value, onChange, label, className, }: {
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/HierarchicalTrackSelectorWidget/components/ClearableSearchField.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useTransition } from 'react';
+import ClearIcon from '@mui/icons-material/Clear';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+export default function ClearableSearchField({ value, onChange, label, className, }) {
+    const [localValue, setLocalValue] = useState(value);
+    const [, startTransition] = useTransition();
+    useEffect(() => {
+        if (value === '') {
+            setLocalValue('');
+        }
+    }, [value]);
+    return (_jsx(TextField, { className: className, label: label, value: localValue, onChange: event => {
+            const newValue = event.target.value;
+            setLocalValue(newValue);
+            startTransition(() => {
+                onChange(newValue);
+            });
+        }, fullWidth: true, slotProps: {
+            input: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
+                            setLocalValue('');
+                            onChange('');
+                        }, children: _jsx(ClearIcon, {}) }) })),
+            },
+        } }));
+}

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../model';
+import type { HierarchicalTrackSelectorModel } from '../model.ts';
 declare const HierarchicalFab: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getSession, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import AddIcon from '@mui/icons-material/Add';
 import { Fab, Menu, MenuItem } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     fab: {
         position: 'absolute',
@@ -12,7 +12,7 @@ const useStyles = makeStyles()(theme => ({
         right: theme.spacing(6),
     },
 }));
-const HierarchicalFab = observer(function ({ model, }) {
+const HierarchicalFab = observer(function HierarchicalFab({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const [anchorEl, setAnchorEl] = useState(null);

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../model';
+import type { HierarchicalTrackSelectorModel } from '../model.ts';
 declare const HierarchicalTrackSelectorContainer: ({ model, toolbarHeight, overrideDimensions, }: {
     model: HierarchicalTrackSelectorModel;
     toolbarHeight: number;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { observer } from 'mobx-react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import HierarchicalFab from './HierarchicalFab';
-import HierarchicalHeader from './tree/HierarchicalHeader';
-import HierarchicalTree from './tree/HierarchicalTree';
-const AutoSizedHierarchicalTree = ({ tree, model, offset, }) => {
-    return typeof jest === 'undefined' ? (_jsx(AutoSizer, { disableWidth: true, children: args => (_jsx(HierarchicalTree, { height: (args.height || offset) - offset, model: model, tree: tree })) })) : (_jsx(HierarchicalTree, { height: 9000, model: model, tree: tree }));
+import AutoSizer from "./AutoSizer.js";
+import HierarchicalFab from "./HierarchicalFab.js";
+import HierarchicalHeader from "./tree/HierarchicalHeader.js";
+import HierarchicalTree from "./tree/HierarchicalTree.js";
+const AutoSizedHierarchicalTree = ({ model, offset, }) => {
+    return typeof jest === 'undefined' ? (_jsx(AutoSizer, { disableWidth: true, children: args => (_jsx(HierarchicalTree, { height: (args.height || offset) - offset, model: model })) })) : (_jsx(HierarchicalTree, { height: 9000, model: model }));
 };
 const Wrapper = ({ overrideDimensions, children, }) => {
     return overrideDimensions ? (_jsx("div", { style: { ...overrideDimensions }, children: children })) : (children);
 };
-const HierarchicalTrackSelectorContainer = observer(function ({ model, toolbarHeight, overrideDimensions, }) {
+const HierarchicalTrackSelectorContainer = observer(function HierarchicalTrackSelectorContainer({ model, toolbarHeight, overrideDimensions, }) {
     return (_jsxs(Wrapper, { overrideDimensions: overrideDimensions, children: [_jsx(HierarchicalTrackSelector, { model: model, toolbarHeight: toolbarHeight }), _jsx(HierarchicalFab, { model: model })] }));
 });
-const HierarchicalTrackSelector = observer(function ({ model, toolbarHeight = 0, }) {
+const HierarchicalTrackSelector = observer(function HierarchicalTrackSelector({ model, toolbarHeight = 0, }) {
     const [headerHeight, setHeaderHeight] = useState(0);
-    return (_jsxs(_Fragment, { children: [_jsx(HierarchicalHeader, { model: model, setHeaderHeight: setHeaderHeight }), _jsx(AutoSizedHierarchicalTree, { tree: model.hierarchy, model: model, offset: toolbarHeight + headerHeight })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(HierarchicalHeader, { model: model, setHeaderHeight: setHeaderHeight }), _jsx(AutoSizedHierarchicalTree, { model: model, offset: toolbarHeight + headerHeight })] }));
 });
 export default HierarchicalTrackSelectorContainer;

package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -4,12 +4,12 @@ import { getEnv, getSession } from '@jbrowse/core/util';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { Badge } from '@mui/material';
 import { observer } from 'mobx-react';
-const ShoppingCart = observer(function ({ model, }) {
+const ShoppingCart = observer(function ShoppingCart({ model, }) {
     const session = getSession(model);
     const { selection } = model;
     const { pluginManager } = getEnv(model);
     const { adminMode, sessionTracks } = session;
-    const s = new Set(sessionTracks === null || sessionTracks === void 0 ? void 0 : sessionTracks.map(t => t.trackId));
+    const s = new Set(sessionTracks?.map(t => t.trackId));
     const canEdit = (t) => adminMode || s.has(t);
     const items = pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems', [], { session });
     return selection.length ? (_jsx(CascadingMenuButton, { menuItems: [
@@ -24,9 +24,8 @@ const ShoppingCart = observer(function ({ model, }) {
                     {
                         label: 'Delete tracks',
                         onClick: () => {
-                            var _a;
-                            for (const s of selection) {
-                                (_a = session.deleteTrackConf) === null || _a === void 0 ? void 0 : _a.call(session, s);
+                            for (const track of selection) {
+                                session.deleteTrackConf?.(track);
                             }
                         },
                     },

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

@@ -7,7 +7,7 @@ const CloseConnectionDialog = observer(function CloseConnectionDialog({ modalInf
     return (_jsxs(Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"`, onClose: onClose, children: [_jsxs(DialogContent, { children: [dereferenceTypeCount ? (_jsxs(_Fragment, { children: [_jsx(DialogContentText, { children: "Closing this connection will close:" }), _jsx(List, { children: Object.entries(dereferenceTypeCount).map(([key, value]) => (_jsx(ListItem, { children: `${value} ${key}` }, key))) })] })) : null, _jsx(DialogContentText, { children: "Are you sure you want to close this connection?" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
                             onClose();
                         }, color: "primary", children: "Cancel" }), _jsx(Button, { variant: "contained", onClick: () => {
-                            safelyBreakConnection === null || safelyBreakConnection === void 0 ? void 0 : safelyBreakConnection();
+                            safelyBreakConnection?.();
                             onClose();
                         }, color: "primary", children: "OK" })] })] }));
 });

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

@@ -7,8 +7,7 @@ const DeleteConnectionDialog = observer(function DeleteConnectionDialog({ delete
     return (_jsxs(Dialog, { open: true, title: `Delete connection "${name}"`, onClose: handleClose, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: "Are you sure you want to delete this connection?" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
                             handleClose();
                         }, color: "primary", children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
-                            var _a;
-                            (_a = session.deleteConnection) === null || _a === void 0 ? void 0 : _a.call(session, connectionConf);
+                            session.deleteConnection?.(connectionConf);
                             handleClose();
                         }, children: "OK" })] })] }));
 });

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

@@ -1,10 +1,10 @@
 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 '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
 import { Button, DialogActions, DialogContent, IconButton, Tooltip, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     connectionContainer: {
         margin: theme.spacing(4),
@@ -14,12 +14,12 @@ const useStyles = makeStyles()(theme => ({
 function DisabledButton() {
     return (_jsx(Tooltip, { title: "Unable to delete connection in config file as non-admin user", children: _jsx(IconButton, { children: _jsx(CloseIcon, { color: "disabled" }) }) }));
 }
-const ManageConnectionsDialog = observer(function ({ session, handleClose, breakConnection, }) {
+const ManageConnectionsDialog = observer(function ManageConnectionsDialog({ session, handleClose, breakConnection, }) {
     const { classes } = useStyles();
     const { adminMode, connections, sessionConnections } = session;
     return (_jsxs(Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Delete connections", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Click the X icon to delete the connection from your config completely" }), _jsxs("div", { className: classes.connectionContainer, children: [connections.map(conf => {
                                 const name = readConfObject(conf, 'name');
-                                return (_jsxs(Typography, { children: [adminMode || (sessionConnections === null || sessionConnections === void 0 ? void 0 : sessionConnections.includes(conf)) ? (_jsx(IconButton, { onClick: () => {
+                                return (_jsxs(Typography, { children: [adminMode || sessionConnections?.includes(conf) ? (_jsx(IconButton, { onClick: () => {
                                                 breakConnection(conf, true);
                                             }, children: _jsx(CloseIcon, { color: "error" }) })) : (_jsx(DisabledButton, {})), name] }, `conn-${name}`));
                             }), !connections.length ? (_jsx(Typography, { children: "No connections found" })) : null] })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {

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

@@ -1,9 +1,9 @@
 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 '@jbrowse/core/util/tss-react';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 function ellipses(slug) {
     return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug;
 }
@@ -19,25 +19,24 @@ const ConnectionRow = observer(function ConnectionRow({ conf, session, breakConn
     const assemblyNames = readConfObject(conf, 'assemblyNames');
     const found = instances.find(conn => name === conn.name);
     return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !!found, onChange: () => {
-                var _a;
                 if (found) {
                     breakConnection(conf);
                 }
                 else {
-                    (_a = session.makeConnection) === null || _a === void 0 ? void 0 : _a.call(session, conf);
+                    session.makeConnection?.(conf);
                 }
             }, color: "primary" }), label: [
             name,
             assemblyNames.length ? `(${ellipses(assemblyNames.join(','))})` : '',
         ]
-            .filter(f => !!f)
+            .filter(Boolean)
             .join(' ') }, conf.connectionId));
 });
 const ConnectionList = observer(function ConnectionsList({ session, breakConnection, }) {
     const { classes } = useStyles();
     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, }) {
+const ToggleConnectionDialog = observer(function ToggleConnectionDialog({ session, handleClose, breakConnection, }) {
     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" }) })] }));

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const FacetFilter: ({ column, vals, model, }: {
     column: {
         field: string;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { coarseStripHTML } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import AddIcon from '@mui/icons-material/Add';
 import ClearIcon from '@mui/icons-material/Clear';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 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,
@@ -26,7 +26,7 @@ function ExpandButton({ visible, onClick, }) {
                 onClick();
             }, size: "small", children: visible ? _jsx(MinimizeIcon, {}) : _jsx(AddIcon, {}) }) }));
 }
-const FacetFilter = observer(function ({ column, vals, model, }) {
+const FacetFilter = observer(function FacetFilter({ column, vals, model, }) {
     const { classes } = useStyles();
     const [visible, setVisible] = useState(true);
     const { faceted } = model;

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

@@ -1,5 +1,5 @@
-import type { Row } from './util';
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { Row } from './util.ts';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const FacetFilters: ({ rows, columns, model, }: {
     rows: Row[];
     columns: {

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import FacetFilter from './FacetFilter';
-import { getRowStr } from './util';
-const FacetFilters = observer(function ({ rows, columns, model, }) {
-    var _a, _b;
+import FacetFilter from "./FacetFilter.js";
+import { getRowStr } from "./util.js";
+const FacetFilters = observer(function FacetFilters({ rows, columns, model, }) {
     const { faceted } = model;
     const { filters } = faceted;
     const facets = columns.slice(1);
@@ -12,7 +11,7 @@ const FacetFilters = observer(function ({ rows, columns, model, }) {
     const facetKeys = facets.map(f => f.field);
     const facetKeysPrioritizingUserSelections = new Set();
     for (const entry of filterKeys) {
-        if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
+        if (filters.get(entry)?.length) {
             facetKeysPrioritizingUserSelections.add(entry);
         }
     }
@@ -36,7 +35,7 @@ const FacetFilters = observer(function ({ rows, columns, model, }) {
                 }
             }
         }
-        const filter = ((_b = filters.get(facetKey)) === null || _b === void 0 ? void 0 : _b.length)
+        const filter = filters.get(facetKey)?.length
             ? new Set(filters.get(facetKey))
             : undefined;
         currentRows = currentRows.filter(row => filter !== undefined ? filter.has(getRowStr(facetKey, row)) : true);

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 import type { GridColDef, GridRowId } from '@mui/x-data-grid';
 declare const FacetedDataGrid: ({ model, columns, shownTrackIds, selection, }: {
     model: HierarchicalTrackSelectorModel;

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

@@ -1,73 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { getEnv, measureGridWidth } from '@jbrowse/core/util';
+import { useMemo, useState, useTransition } from 'react';
+import { getEnv } from '@jbrowse/core/util';
+import { getRoot, resolveIdentifier } from '@jbrowse/mobx-state-tree';
 import { DataGrid } 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, }) {
+import { computeInitialWidths } from "./computeInitialWidths.js";
+const FacetedDataGrid = observer(function FacetedDataGrid({ 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,
-                }),
-            ];
-        })),
-    });
+    const [, startTransition] = useTransition();
+    const [widths, setWidths] = useState(() => computeInitialWidths(rows, filteredNonMetadataKeys, filteredMetadataKeys, visible));
+    const rowSelectionModel = useMemo(() => ({
+        type: 'include',
+        ids: new Set(useShoppingCart ? selection.map(s => s.trackId) : [...shownTrackIds]),
+    }), [useShoppingCart, selection, shownTrackIds]);
+    const columnsWithWidths = useMemo(() => columns.map(r => ({
+        ...r,
+        width: widths[r.field],
+    })), [columns, widths]);
     return (_jsx(DataGrid, { rowHeight: 25, columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, rows: filteredRows, columnVisibilityModel: visible, showToolbar: showOptions, onColumnWidthChange: arg => {
-            setWidths({
-                ...widths,
+            setWidths(prev => ({
+                ...prev,
                 [arg.colDef.field]: arg.width,
-            });
+            }));
         }, onColumnVisibilityModelChange: n => {
             model.faceted.setVisible(n);
         }, onRowSelectionModelChange: userSelectedIds => {
-            if (!useShoppingCart) {
-                const a1 = shownTrackIds;
-                const a2 = userSelectedIds.ids;
-                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);
+            startTransition(() => {
+                if (!useShoppingCart) {
+                    const a1 = shownTrackIds;
+                    const a2 = userSelectedIds.ids;
+                    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.ids].map(id => resolveIdentifier(schema, root, id)));
-            }
-        }, rowSelectionModel: {
-            type: 'include',
-            ids: new Set(useShoppingCart ? selection.map(s => s.trackId) : [...shownTrackIds]),
-        }, columns: columns.map(r => ({
-            ...r,
-            width: widths[r.field],
-        })) }));
+                }
+                else {
+                    const root = getRoot(model);
+                    const schema = pluginManager.pluggableConfigSchemaType('track');
+                    model.setSelection([...userSelectedIds.ids].map(id => resolveIdentifier(schema, root, id)));
+                }
+            });
+        }, rowSelectionModel: rowSelectionModel, columns: columnsWithWidths }));
 });
 export default FacetedDataGrid;

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;

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

@@ -2,8 +2,8 @@ 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) {
+import FacetedSelector from "./FacetedSelector.js";
+const FacetedTrackSelectorDialog = observer(function FacetedTrackSelectorDialog(props) {
     const { handleClose } = props;
     return (_jsx(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Faceted track selector", children: _jsx(DialogContent, { children: _jsx(FacetedSelector, { ...props }) }) }));
 });

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

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

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

@@ -1,22 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
-import ClearIcon from '@mui/icons-material/Clear';
 import MoreVert from '@mui/icons-material/MoreVert';
-import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
-import ShoppingCart from '../ShoppingCart';
+import { Grid, IconButton } from '@mui/material';
+import ClearableSearchField from "../ClearableSearchField.js";
+import ShoppingCart from "../ShoppingCart.js";
 export default function FacetedHeader({ model, }) {
     const { faceted } = model;
+    const { filterText, showOptions, showFilters, showSparse, useShoppingCart } = faceted;
     const [anchorEl, setAnchorEl] = useState(null);
-    const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
-    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: 4, alignItems: "center", 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, {}) }) })),
-                            },
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: 4, alignItems: "center", children: [_jsx(ClearableSearchField, { label: "Search...", value: filterText, onChange: value => {
+                            faceted.setFilterText(value);
                         } }), _jsx(IconButton, { onClick: event => {
                             setAnchorEl(event.currentTarget);
                         }, children: _jsx(MoreVert, {}) }), _jsx(ShoppingCart, { model: model })] }), _jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface InfoArgs {
     target: HTMLElement;