@jbrowse/plugin-data-management 2.6.3 → 2.7.1

package/esm/AddTrackWidget/components/ConfirmTrack.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Checkbox, FormControl, FormControlLabel, Link, TextField, Typography, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { supportedIndexingAdapters, getSession, isElectron, } from '@jbrowse/core/util';
+import { isSupportedIndexingAdapter, getSession, isElectron, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { UNKNOWN } from '@jbrowse/core/util/tracks';
 import { AssemblySelector } from '@jbrowse/core/ui';
@@ -46,7 +46,7 @@ function UnknownAdapterPrompt({ model }) {
             "and add a feature request for this data type."),
         React.createElement(TrackAdapterSelector, { model: model })));
 }
-export default observer(function ConfirmTrack({ model, }) {
+const ConfirmTrack = observer(function ConfirmTrack({ model, }) {
     const { classes } = useStyles();
     const [check, setCheck] = useState(true);
     const session = getSession(model);
@@ -74,7 +74,7 @@ export default observer(function ConfirmTrack({ model, }) {
     if (!(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type)) {
         return React.createElement(Typography, null, "Could not recognize this data type.");
     }
-    const supportedForIndexing = supportedIndexingAdapters(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type);
+    const supportedForIndexing = isSupportedIndexingAdapter(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type);
     return (React.createElement("div", null,
         trackAdapter ? (React.createElement(StatusMessage, { trackAdapter: trackAdapter, trackType: trackType })) : null,
         warningMessage ? (React.createElement(Typography, { style: { color: 'orange' } }, warningMessage)) : null,
@@ -95,3 +95,4 @@ export default observer(function ConfirmTrack({ model, }) {
                     } }) }))),
         isElectron && check && supportedForIndexing ? (React.createElement(TextIndexingConfig, { model: model })) : null));
 });
+export default ConfirmTrack;

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare function AddTrackWorkflow({ model }: {
+declare const DefaultAddTrackWorkflow: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
-declare const _default: typeof AddTrackWorkflow;
-export default _default;
+}) => React.JSX.Element;
+export default DefaultAddTrackWorkflow;

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Alert, Button, Step, StepContent, StepLabel, Stepper, Typography, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { getRoot } from 'mobx-state-tree';
-import { getSession, isElectron, supportedIndexingAdapters, } from '@jbrowse/core/util';
+import { getSession, isElectron, isSessionModelWithWidgets, isSessionWithAddTracks, isSupportedIndexingAdapter, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
 import { observer } from 'mobx-react';
 // locals
@@ -27,7 +27,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const steps = ['Enter track data', 'Confirm track type'];
-function AddTrackWorkflow({ model }) {
+const DefaultAddTrackWorkflow = observer(function ({ model, }) {
     const [activeStep, setActiveStep] = useState(0);
     const { classes } = useStyles();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,6 +46,7 @@ function AddTrackWorkflow({ model }) {
         }
     }
     async function handleNext() {
+        var _a, _b;
         if (activeStep !== steps.length - 1) {
             setActiveStep(activeStep + 1);
             return;
@@ -55,6 +56,10 @@ function AddTrackWorkflow({ model }) {
             `${session.adminMode ? '' : '-sessionTrack'}`,
         ].join('');
         const assemblyInstance = session.assemblyManager.get(assembly);
+        if (!isSessionWithAddTracks(session)) {
+            setTrackErrorMessage('Unable to add tracks to this model');
+            return;
+        }
         if (assemblyInstance && trackAdapter && trackAdapter.type !== 'UNKNOWN') {
             session.addTrackConf({
                 trackId,
@@ -66,36 +71,36 @@ function AddTrackWorkflow({ model }) {
                     sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
                 },
             });
-            if (model.view) {
-                model.view.showTrack(trackId);
-                if (isElectron &&
-                    textIndexTrack &&
-                    supportedIndexingAdapters(trackAdapter.type)) {
-                    const attr = textIndexingConf || {
-                        attributes: ['Name', 'ID'],
-                        exclude: ['CDS', 'exon'],
-                    };
-                    const indexName = trackName + '-index';
-                    const newEntry = {
-                        indexingParams: {
-                            ...attr,
-                            assemblies: [assembly],
-                            tracks: [trackId],
-                            indexType: 'perTrack',
-                            name: indexName,
-                            timestamp: new Date().toISOString(),
-                        },
+            (_b = (_a = model.view).showTrack) === null || _b === void 0 ? void 0 : _b.call(_a, trackId);
+            if (isElectron &&
+                textIndexTrack &&
+                isSupportedIndexingAdapter(trackAdapter.type)) {
+                const attr = textIndexingConf || {
+                    attributes: ['Name', 'ID'],
+                    exclude: ['CDS', 'exon'],
+                };
+                const indexName = trackName + '-index';
+                const newEntry = {
+                    indexingParams: {
+                        ...attr,
+                        assemblies: [assembly],
+                        tracks: [trackId],
+                        indexType: 'perTrack',
                         name: indexName,
-                        cancelCallback: () => jobsManager.abortJob(),
-                    };
-                    jobsManager.queueJob(newEntry);
-                }
+                        timestamp: new Date().toISOString(),
+                    },
+                    name: indexName,
+                    cancelCallback: () => jobsManager.abortJob(),
+                };
+                jobsManager.queueJob(newEntry);
             }
             else {
                 session.notify('Open a new view, or use the track selector in an existing view, to view this track', 'info');
             }
             model.clearData();
-            session.hideWidget(model);
+            if (isSessionModelWithWidgets(session)) {
+                session.hideWidget(model);
+            }
         }
         else {
             setTrackErrorMessage('Failed to add track.\nThe configuration of this file is not currently supported.');
@@ -125,5 +130,5 @@ function AddTrackWorkflow({ model }) {
                     React.createElement(Button, { disabled: isNextDisabled(), variant: "contained", color: "primary", onClick: handleNext, className: classes.button, "data-testid": "addTrackNextButton" }, activeStep === steps.length - 1 ? 'Add' : 'Next')),
                 trackErrorMessage ? (React.createElement("div", { className: classes.alertContainer },
                     React.createElement(Alert, { severity: "error" }, trackErrorMessage))) : null)))))));
-}
-export default observer(AddTrackWorkflow);
+});
+export default DefaultAddTrackWorkflow;

package/esm/AddTrackWidget/components/PasteConfigWorkflow.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare function AddTrackWorkflow({ model }: {
+declare const PasteConfigAddTrackWorkflow: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
-declare const _default: typeof AddTrackWorkflow;
-export default _default;
+}) => React.JSX.Element;
+export default PasteConfigAddTrackWorkflow;

package/esm/AddTrackWidget/components/PasteConfigWorkflow.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, TextField } from '@mui/material';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { makeStyles } from 'tss-react/mui';
-import { getSession } from '@jbrowse/core/util';
+import { getSession, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     textbox: {
@@ -14,7 +14,7 @@ const useStyles = makeStyles()({
         display: 'block',
     },
 });
-function AddTrackWorkflow({ model }) {
+const PasteConfigAddTrackWorkflow = observer(function ({ model, }) {
     const { classes } = useStyles();
     const [val, setVal] = useState('');
     const [error, setError] = useState();
@@ -27,15 +27,18 @@ function AddTrackWorkflow({ model }) {
                     const session = getSession(model);
                     const conf = JSON.parse(val);
                     const confs = Array.isArray(conf) ? conf : [conf];
-                    confs.forEach(c => session.addTrackConf(c));
-                    confs.forEach(c => c.trackId);
-                    model.clearData();
-                    session.hideWidget(model);
+                    if (isSessionWithAddTracks(session) &&
+                        isSessionModelWithWidgets(session)) {
+                        confs.forEach(c => session.addTrackConf(c));
+                        confs.forEach(c => model.view.showTrack(c.trackId));
+                        model.clearData();
+                        session.hideWidget(model);
+                    }
                 }
                 catch (e) {
                     console.error(e);
                     setError(e);
                 }
             } }, "Submit")));
-}
-export default observer(AddTrackWorkflow);
+});
+export default PasteConfigAddTrackWorkflow;

package/esm/AddTrackWidget/components/TrackAdapterSelector.js

@@ -36,7 +36,7 @@ const TrackAdapterSelector = observer(({ model }) => {
         // returning array avoids needing to use a react fragment which
         // Select/TextField sub-elements disagree with
         return [
-            React.createElement(ListSubheader, null, key),
+            React.createElement(ListSubheader, { key: key }, key),
             val.map(elt => (React.createElement(MenuItem, { key: elt.name, value: elt.name }, elt.displayName))),
         ];
     })));

package/esm/AddTrackWidget/components/TrackSourceSelect.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare function TrackSourceSelect({ model }: {
+declare const TrackSourceSelect: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
-declare const _default: typeof TrackSourceSelect;
-export default _default;
+}) => React.JSX.Element;
+export default TrackSourceSelect;

package/esm/AddTrackWidget/components/TrackSourceSelect.js

@@ -12,12 +12,12 @@ const useStyles = makeStyles()(theme => ({
         height: theme.spacing(8),
     },
 }));
-function TrackSourceSelect({ model }) {
+const TrackSourceSelect = observer(function ({ model, }) {
     const { classes } = useStyles();
     const rootModel = getRoot(model);
     return (React.createElement(Paper, { className: classes.paper },
         React.createElement(FileSelector, { name: "Main file", description: "", location: model.trackData, setLocation: model.setTrackData, setName: model.setTrackName, rootModel: rootModel }),
         React.createElement("div", { className: classes.spacer }),
         React.createElement(FileSelector, { name: "Index file", description: "(Optional) The URL of the index file is automatically inferred from the URL of the main file if it is not supplied.", location: model.indexTrackData, setLocation: model.setIndexTrackData, setName: model.setTrackName, rootModel: rootModel })));
-}
-export default observer(TrackSourceSelect);
+});
+export default TrackSourceSelect;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../model';
-declare const _default: ({ model, }: {
+declare const HierarchicalFab: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
-export default _default;
+export default HierarchicalFab;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.js

@@ -12,7 +12,7 @@ const useStyles = makeStyles()(theme => ({
         right: theme.spacing(6),
     },
 }));
-export default observer(function HierarchicalFab({ model, }) {
+const HierarchicalFab = observer(function ({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const [anchorEl, setAnchorEl] = useState(null);
@@ -40,3 +40,4 @@ export default observer(function HierarchicalFab({ model, }) {
                     }
                 } }, "Add track")) : null))) : null));
 });
+export default HierarchicalFab;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../model';
-declare const _default: ({ model, }: {
+declare const ShoppingCart: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
-export default _default;
+export default ShoppingCart;

package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles()(theme => ({
         marginBottom: 0,
     },
 }));
-export default observer(function ShoppingCart({ model, }) {
+const ShoppingCart = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { selection } = model;
     const { pluginManager } = getEnv(model);
@@ -39,3 +39,4 @@ export default observer(function ShoppingCart({ model, }) {
                 })),
             ] })));
 });
+export default ShoppingCart;

package/esm/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
-declare const _default: ({ modalInfo, onClose, }: {
+declare const CloseConnectionDialog: ({ modalInfo, onClose, }: {
     modalInfo?: {
         name?: string | undefined;
-        dereferenceTypeCount?: {
-            [key: string]: number;
-        } | undefined;
+        dereferenceTypeCount?: Record<string, number> | undefined;
         safelyBreakConnection?: (() => void) | undefined;
     } | undefined;
     onClose: () => void;
 }) => React.JSX.Element;
-export default _default;
+export default CloseConnectionDialog;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { DialogContent, DialogContentText, Button, List, ListItem, DialogActions, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-export default observer(function CloseConnectionDialog({ modalInfo = {}, onClose, }) {
+const CloseConnectionDialog = observer(function CloseConnectionDialog({ modalInfo = {}, onClose, }) {
     const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo;
     return (React.createElement(Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"` },
         React.createElement(DialogContent, null,
@@ -19,3 +19,4 @@ export default observer(function CloseConnectionDialog({ modalInfo = {}, onClose
                     }
                     : () => { }, color: "primary" }, "OK"))));
 });
+export default CloseConnectionDialog;

package/esm/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
-declare function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, }: {
+declare const DeleteConnectionDialog: ({ deleteDialogDetails, session, handleClose, }: {
     deleteDialogDetails: {
         name: string;
         connectionConf: AnyConfigurationModel;
     };
     session: AbstractSessionModel;
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof DeleteConnectionDialog;
-export default _default;
+}) => React.JSX.Element;
+export default DeleteConnectionDialog;

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

@@ -1,13 +1,10 @@
 import React from 'react';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, } from '@mui/material';
+import { DialogContent, DialogContentText, DialogActions, Button, } from '@mui/material';
+import { Dialog } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, }) {
+const DeleteConnectionDialog = observer(function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, }) {
     const { connectionConf, name } = deleteDialogDetails;
-    return (React.createElement(Dialog, { open: true },
-        React.createElement(DialogTitle, null,
-            "Delete connection \"",
-            name,
-            "\""),
+    return (React.createElement(Dialog, { open: true, title: `Delete connection "${name}"` },
         React.createElement(DialogContent, null,
             React.createElement(DialogContentText, null, "Are you sure you want to delete this connection?")),
         React.createElement(DialogActions, null,
@@ -19,5 +16,5 @@ function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, })
                     }
                     handleClose();
                 } }, "OK"))));
-}
-export default observer(DeleteConnectionDialog);
+});
+export default DeleteConnectionDialog;

package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
-declare function ManageConnectionsDlg({ session, handleClose, breakConnection, }: {
+declare const ManageConnectionsDialog: ({ session, handleClose, breakConnection, }: {
     handleClose: () => void;
     session: AbstractSessionModel;
     breakConnection: (conf: AnyConfigurationModel, arg: boolean) => void;
-}): React.JSX.Element;
-declare const _default: typeof ManageConnectionsDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ManageConnectionsDialog;

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

@@ -12,7 +12,7 @@ const useStyles = makeStyles()(theme => ({
         width: 500,
     },
 }));
-function ManageConnectionsDlg({ session, handleClose, breakConnection, }) {
+const ManageConnectionsDialog = observer(function ({ session, handleClose, breakConnection, }) {
     const { classes } = useStyles();
     const { adminMode, connections, sessionConnections } = session;
     return (React.createElement(Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Delete connections" },
@@ -31,5 +31,5 @@ function ManageConnectionsDlg({ session, handleClose, breakConnection, }) {
                 !connections.length ? (React.createElement(Typography, null, "No connections found")) : null)),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "primary" }, "Close"))));
-}
-export default observer(ManageConnectionsDlg);
+});
+export default ManageConnectionsDialog;

package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
-export declare function ellipses(slug: string): string;
-declare const _default: ({ session, handleClose, breakConnection, }: {
+declare const ToggleConnectionDialog: ({ session, handleClose, breakConnection, }: {
     handleClose: () => void;
     session: AbstractSessionModel;
     breakConnection: (arg: AnyConfigurationModel) => void;
 }) => React.JSX.Element;
-export default _default;
+export default ToggleConnectionDialog;

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

@@ -4,7 +4,7 @@ import { Dialog } from '@jbrowse/core/ui';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { readConfObject, } from '@jbrowse/core/configuration';
-export function ellipses(slug) {
+function ellipses(slug) {
     return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug;
 }
 const useStyles = makeStyles()(theme => ({
@@ -38,7 +38,7 @@ const ConnectionList = observer(function ConnectionsList({ session, breakConnect
     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 })))))));
 });
-export default observer(function ToggleConnectionDialog({ session, handleClose, breakConnection, }) {
+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"),
@@ -46,3 +46,4 @@ export default observer(function ToggleConnectionDialog({ session, handleClose,
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "primary" }, "Close"))));
 });
+export default ToggleConnectionDialog;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export default function FacetFilter({ column, vals, width, dispatch, filters, }: {
+    column: {
+        field: string;
+    };
+    vals: [string, number][];
+    width: number;
+    dispatch: (arg: {
+        key: string;
+        val: string[];
+    }) => void;
+    filters: Record<string, string[]>;
+}): React.JSX.Element;

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Typography, FormControl, Select, IconButton, Tooltip, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+// icon
+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';
+const useStyles = makeStyles()(theme => ({
+    facet: {
+        margin: 0,
+        marginLeft: theme.spacing(2),
+    },
+    select: {
+        marginBottom: theme.spacing(2),
+    },
+}));
+function ClearButton({ onClick }) {
+    return (React.createElement(Tooltip, { title: "Clear selection on this facet filter" },
+        React.createElement(IconButton, { onClick: () => onClick(), size: "small" },
+            React.createElement(ClearIcon, null))));
+}
+function ExpandButton({ visible, onClick, }) {
+    return (React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
+        React.createElement(IconButton, { onClick: () => onClick(), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null))));
+}
+export default function FacetFilter({ column, vals, width, dispatch, filters, }) {
+    const { classes } = useStyles();
+    const [visible, setVisible] = useState(true);
+    return (React.createElement(FormControl, { key: column.field, className: classes.facet, style: { width } },
+        React.createElement("div", { style: { display: 'flex' } },
+            React.createElement(Typography, null, column.field),
+            React.createElement(ClearButton, { onClick: () => dispatch({ key: column.field, val: [] }) }),
+            React.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
+        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
+                dispatch({
+                    key: column.field,
+                    // @ts-expect-error
+                    val: [...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));
+}

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

@@ -1,58 +1,29 @@
-import React, { useState } from 'react';
-import { Typography, FormControl, Select, IconButton, Tooltip, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-// icon
-import ClearIcon from '@mui/icons-material/Clear';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import AddIcon from '@mui/icons-material/Add';
-const useStyles = makeStyles()(theme => ({
-    facet: {
-        margin: 0,
-        marginLeft: theme.spacing(2),
-    },
-    select: {
-        marginBottom: theme.spacing(2),
-    },
-}));
-function FacetFilter({ column, vals, width, dispatch, filters, }) {
-    const { classes } = useStyles();
-    const [visible, setVisible] = useState(true);
-    return (React.createElement(FormControl, { key: column.field, className: classes.facet, style: { width } },
-        React.createElement("div", { style: { display: 'flex' } },
-            React.createElement(Typography, null, column.field),
-            React.createElement(Tooltip, { title: "Clear selection on this facet filter" },
-                React.createElement(IconButton, { onClick: () => {
-                        dispatch({ key: column.field, val: [] });
-                    }, size: "small" },
-                    React.createElement(ClearIcon, null))),
-            React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
-                React.createElement(IconButton, { onClick: () => setVisible(!visible), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null)))),
-        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
-                // @ts-expect-error
-                const { options } = event.target;
-                const val = [];
-                const len = options.length;
-                for (let i = 0; i < len; i++) {
-                    if (options[i].selected) {
-                        val.push(options[i].value);
-                    }
-                }
-                dispatch({ key: column.field, val });
-            } }, vals
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([name, count]) => (React.createElement("option", { key: name, value: name },
-            name,
-            " (",
-            count,
-            ")"))))) : null));
-}
+import React from 'react';
+import FacetFilter from './FacetFilter';
 export default function FacetFilters({ rows, columns, dispatch, filters, width, }) {
+    var _a, _b;
     const facets = columns.slice(1);
-    const uniqs = facets.map(() => new Map());
-    for (const row of rows) {
-        for (const [index, column] of facets.entries()) {
-            const elt = uniqs[index];
-            const key = `${row[column.field] || ''}`;
+    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 filterKeys = Object.keys(filters);
+    const facetKeys = facets.map(f => f.field);
+    const ret = new Set();
+    for (const entry of filterKeys) {
+        // give non-empty filters priority
+        if ((_a = filters[entry]) === null || _a === void 0 ? void 0 : _a.length) {
+            ret.add(entry);
+        }
+    }
+    for (const entry of facetKeys) {
+        ret.add(entry);
+    }
+    let currentRows = rows;
+    for (const facet of ret) {
+        const elt = uniqs.get(facet);
+        for (const row of currentRows) {
+            const key = `${row[facet] || ''}`;
             const val = elt.get(key);
             // we don't allow filtering on empty yet
             if (key) {
@@ -64,6 +35,12 @@ export default function FacetFilters({ rows, columns, dispatch, filters, width,
                 }
             }
         }
+        const filter = ((_b = filters[facet]) === null || _b === void 0 ? void 0 : _b.length) ? new Set(filters[facet]) : undefined;
+        currentRows = currentRows.filter(row => {
+            return filter !== undefined ? filter.has(row[facet]) : true;
+        });
     }
-    return (React.createElement("div", null, facets.map((column, index) => (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs[index]], column: column, width: width, dispatch: dispatch, filters: filters })))));
+    return (React.createElement("div", null, facets.map(column => {
+        return (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, dispatch: dispatch, filters: filters }));
+    })));
 }

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare function FacetedDlg(props: {
+declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;
-}): React.JSX.Element;
-declare const _default: typeof FacetedDlg;
-export default _default;
+}) => React.JSX.Element;
+export default FacetedTrackSelectorDialog;

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

@@ -3,10 +3,10 @@ import { DialogContent } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import FacetedSelector from './FacetedSelector';
-function FacetedDlg(props) {
+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 }))));
-}
-export default observer(FacetedDlg);
+});
+export default FacetedTrackSelectorDialog;