@jbrowse/plugin-data-management 2.8.0 → 2.10.0

package/dist/AddTrackWidget/components/DefaultAddTrackWorkflow.js

@@ -122,9 +122,6 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.observer)(function ({ model, })
                 };
                 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();
             if ((0, util_1.isSessionModelWithWidgets)(session)) {
                 session.hideWidget(model);
@@ -134,10 +131,6 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.observer)(function ({ model, })
             setTrackErrorMessage('Failed to add track.\nThe configuration of this file is not currently supported.');
         }
     }
-    function handleBack() {
-        setTrackErrorMessage(undefined);
-        setActiveStep(activeStep - 1);
-    }
     function isNextDisabled() {
         switch (activeStep) {
             case 0:
@@ -154,7 +147,10 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.observer)(function ({ model, })
             react_1.default.createElement(material_1.StepContent, null,
                 getStepContent(idx),
                 react_1.default.createElement("div", { className: classes.actionsContainer },
-                    react_1.default.createElement(material_1.Button, { disabled: activeStep === 0, onClick: handleBack, className: classes.button }, "Back"),
+                    react_1.default.createElement(material_1.Button, { disabled: activeStep === 0, onClick: () => {
+                            setTrackErrorMessage(undefined);
+                            setActiveStep(activeStep - 1);
+                        }, className: classes.button }, "Back"),
                     react_1.default.createElement(material_1.Button, { disabled: isNextDisabled(), variant: "contained", color: "primary", onClick: handleNext, className: classes.button, "data-testid": "addTrackNextButton" }, activeStep === steps.length - 1 ? 'Add' : 'Next')),
                 trackErrorMessage ? (react_1.default.createElement("div", { className: classes.alertContainer },
                     react_1.default.createElement(material_1.Alert, { severity: "error" }, trackErrorMessage))) : null)))))));

package/dist/AddTrackWidget/model.d.ts

@@ -5,9 +5,21 @@ interface IndexingAttr {
     attributes: string[];
     exclude: string[];
 }
+/**
+ * #stateModel AddTrackModel
+ */
 export default function f(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
+    /**
+     * #property
+     */
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    /**
+     * #property
+     */
     type: import("mobx-state-tree").ISimpleType<"AddTrackWidget">;
+    /**
+     * #property
+     */
     view: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
 }, {
     trackSource: string;
@@ -20,30 +32,99 @@ export default function f(pluginManager: PluginManager): import("mobx-state-tree
     textIndexTrack: boolean;
     textIndexingConf: IndexingAttr | undefined;
 } & {
+    /**
+     * #action
+     */
     setAdapterHint(obj: string): void;
+    /**
+     * #action
+     */
     setTrackSource(str: string): void;
+    /**
+     * #action
+     */
     setTextIndexingConf(conf: IndexingAttr): void;
+    /**
+     * #action
+     */
     setTextIndexTrack(flag: boolean): void;
+    /**
+     * #action
+     */
     setTrackData(obj: FileLocation): void;
+    /**
+     * #action
+     */
     setIndexTrackData(obj: FileLocation): void;
+    /**
+     * #action
+     */
     setAssembly(str: string): void;
+    /**
+     * #action
+     */
     setTrackName(str: string): void;
+    /**
+     * #action
+     */
     setTrackType(str: string): void;
+    /**
+     * #action
+     */
     clearData(): void;
 } & {
+    /**
+     * #getter
+     */
     readonly trackAdapter: import("@jbrowse/core/util/tracks").AdapterConfig | undefined;
+    /**
+     * #getter
+     */
     readonly trackName: string;
+    /**
+     * #getter
+     */
     readonly isFtp: boolean;
+    /**
+     * #getter
+     */
     readonly isRelativeTrackUrl: boolean;
+    /**
+     * #getter
+     */
     readonly isRelativeIndexUrl: boolean;
+    /**
+     * #getter
+     */
     readonly isRelativeUrl: boolean;
+    /**
+     * #getter
+     */
     readonly trackHttp: any;
+    /**
+     * #getter
+     */
     readonly indexHttp: any;
+    /**
+     * #getter
+     */
     readonly wrongProtocol: any;
+    /**
+     * #getter
+     */
     readonly unsupported: boolean;
+    /**
+     * #getter
+     */
     readonly assembly: any;
+    /**
+     * #getter
+     */
     readonly trackType: string;
 } & {
+    /**
+     * #getter
+     */
     readonly warningMessage: "" | "Warning: JBrowse cannot access files using the ftp protocol" | "Warning: one or more of your files do not provide the protocol e.g.\n          https://, please provide an absolute URL unless you are sure a\n          relative URL is intended." | "Warning: You entered a http:// resources but we cannot access HTTP\n          resources from JBrowse when it is running on https. Please use an\n          https URL for your track, or access the JBrowse app from the http\n          protocol";
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type AddTrackStateModel = ReturnType<typeof f>;

package/dist/AddTrackWidget/model.js

@@ -12,11 +12,23 @@ function isAbsoluteUrl(url = '') {
         return url.startsWith('/');
     }
 }
+/**
+ * #stateModel AddTrackModel
+ */
 function f(pluginManager) {
     return mobx_state_tree_1.types
         .model('AddTrackModel', {
+        /**
+         * #property
+         */
         id: mst_1.ElementId,
+        /**
+         * #property
+         */
         type: mobx_state_tree_1.types.literal('AddTrackWidget'),
+        /**
+         * #property
+         */
         view: mobx_state_tree_1.types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
     })
         .volatile(() => ({
@@ -32,33 +44,63 @@ function f(pluginManager) {
         textIndexingConf: undefined,
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
         setAdapterHint(obj) {
             self.adapterHint = obj;
         },
+        /**
+         * #action
+         */
         setTrackSource(str) {
             self.trackSource = str;
         },
+        /**
+         * #action
+         */
         setTextIndexingConf(conf) {
             self.textIndexingConf = conf;
         },
+        /**
+         * #action
+         */
         setTextIndexTrack(flag) {
             self.textIndexTrack = flag;
         },
+        /**
+         * #action
+         */
         setTrackData(obj) {
             self.trackData = obj;
         },
+        /**
+         * #action
+         */
         setIndexTrackData(obj) {
             self.indexTrackData = obj;
         },
+        /**
+         * #action
+         */
         setAssembly(str) {
             self.altAssemblyName = str;
         },
+        /**
+         * #action
+         */
         setTrackName(str) {
             self.altTrackName = str;
         },
+        /**
+         * #action
+         */
         setTrackType(str) {
             self.altTrackType = str;
         },
+        /**
+         * #action
+         */
         clearData() {
             self.trackSource = '';
             self.altTrackName = '';
@@ -72,16 +114,25 @@ function f(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get trackAdapter() {
             const { trackData, indexTrackData, adapterHint } = self;
             return trackData
                 ? (0, tracks_1.guessAdapter)(trackData, indexTrackData, adapterHint, self)
                 : undefined;
         },
+        /**
+         * #getter
+         */
         get trackName() {
             return (self.altTrackName ||
                 (self.trackData ? (0, tracks_1.getFileName)(self.trackData) : ''));
         },
+        /**
+         * #getter
+         */
         get isFtp() {
             var _a, _b;
             const { trackData: track, indexTrackData: index } = self;
@@ -89,43 +140,70 @@ function f(pluginManager) {
             // @ts-expect-error
             (((_a = index === null || index === void 0 ? void 0 : index.uri) === null || _a === void 0 ? void 0 : _a.startsWith('ftp://')) || ((_b = track === null || track === void 0 ? void 0 : track.uri) === null || _b === void 0 ? void 0 : _b.startsWith('ftp://'))));
         },
+        /**
+         * #getter
+         */
         get isRelativeTrackUrl() {
             var _a;
             // @ts-expect-error
             const uri = (_a = self.trackData) === null || _a === void 0 ? void 0 : _a.uri;
             return uri ? !isAbsoluteUrl(uri) : false;
         },
+        /**
+         * #getter
+         */
         get isRelativeIndexUrl() {
             var _a;
             // @ts-expect-error
             const uri = (_a = self.indexTrackData) === null || _a === void 0 ? void 0 : _a.uri;
             return uri ? !isAbsoluteUrl(uri) : false;
         },
+        /**
+         * #getter
+         */
         get isRelativeUrl() {
             return this.isRelativeIndexUrl || this.isRelativeTrackUrl;
         },
+        /**
+         * #getter
+         */
         get trackHttp() {
             var _a, _b;
             // @ts-expect-error
             return (_b = (_a = self.trackData) === null || _a === void 0 ? void 0 : _a.uri) === null || _b === void 0 ? void 0 : _b.startsWith('http://');
         },
+        /**
+         * #getter
+         */
         get indexHttp() {
             var _a, _b;
             // @ts-expect-error
             return (_b = (_a = self.indexTrackData) === null || _a === void 0 ? void 0 : _a.uri) === null || _b === void 0 ? void 0 : _b.startsWith('http://');
         },
+        /**
+         * #getter
+         */
         get wrongProtocol() {
             return (window.location.protocol === 'https:' &&
                 (this.trackHttp || this.indexHttp));
         },
+        /**
+         * #getter
+         */
         get unsupported() {
             var _a;
             return ((_a = this.trackAdapter) === null || _a === void 0 ? void 0 : _a.type) === tracks_1.UNSUPPORTED;
         },
+        /**
+         * #getter
+         */
         get assembly() {
             var _a;
             return self.altAssemblyName || ((_a = self.view.assemblyNames) === null || _a === void 0 ? void 0 : _a[0]);
         },
+        /**
+         * #getter
+         */
         get trackType() {
             return (self.altTrackType ||
                 (this.trackAdapter
@@ -134,6 +212,9 @@ function f(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get warningMessage() {
             if (self.isFtp) {
                 return `Warning: JBrowse cannot access files using the ftp protocol`;

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

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

package/dist/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -1,70 +1,28 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 const util_1 = require("@jbrowse/core/util");
 // icons
 const ShoppingCart_1 = __importDefault(require("@mui/icons-material/ShoppingCart"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    searchBox: {
-        margin: theme.spacing(2),
-    },
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
-}));
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const ShoppingCart = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
     const { selection } = model;
     const { pluginManager } = (0, util_1.getEnv)(model);
     const session = (0, util_1.getSession)(model);
-    const [selectionEl, setSelectionEl] = (0, react_1.useState)();
     const items = pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems', [], { session });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        selection.length ? (react_1.default.createElement(material_1.IconButton, { className: classes.menuIcon, onClick: event => setSelectionEl(event.currentTarget) },
-            react_1.default.createElement(material_1.Badge, { badgeContent: selection.length, color: "primary" },
-                react_1.default.createElement(ShoppingCart_1.default, null)))) : null,
-        react_1.default.createElement(Menu_1.default, { anchorEl: selectionEl, open: Boolean(selectionEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setSelectionEl(undefined);
-            }, onClose: () => setSelectionEl(undefined), menuItems: [
-                { label: 'Clear', onClick: () => model.clearSelection() },
-                ...items.map(item => ({
-                    ...item,
-                    ...('onClick' in item
-                        ? { onClick: () => item.onClick(model) }
-                        : {}),
-                })),
-            ] })));
+    return selection.length ? (react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+            { label: 'Clear', onClick: () => model.clearSelection() },
+            ...items.map(item => ({
+                ...item,
+                ...('onClick' in item ? { onClick: () => item.onClick(model) } : {}),
+            })),
+        ] },
+        react_1.default.createElement(material_1.Badge, { badgeContent: selection.length, color: "primary" },
+            react_1.default.createElement(ShoppingCart_1.default, null)))) : null;
 });
 exports.default = ShoppingCart;

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

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

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

@@ -34,6 +34,7 @@ const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     facet: {
         margin: 0,
@@ -52,22 +53,22 @@ function ExpandButton({ visible, onClick, }) {
     return (react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
         react_1.default.createElement(material_1.IconButton, { onClick: () => onClick(), size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null))));
 }
-function FacetFilter({ column, vals, width, dispatch, filters, }) {
+const FacetFilter = (0, mobx_react_1.observer)(function ({ column, vals, width, model, }) {
     const { classes } = useStyles();
     const [visible, setVisible] = (0, react_1.useState)(true);
+    const { faceted } = model;
+    const { filters } = faceted;
     return (react_1.default.createElement(material_1.FormControl, { key: column.field, className: classes.facet, style: { width } },
         react_1.default.createElement("div", { style: { display: 'flex' } },
             react_1.default.createElement(material_1.Typography, null, column.field),
-            react_1.default.createElement(ClearButton, { onClick: () => dispatch({ key: column.field, val: [] }) }),
+            react_1.default.createElement(ClearButton, { onClick: () => model.faceted.setFilter(column.field, []) }),
             react_1.default.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
-        visible ? (react_1.default.createElement(material_1.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),
-                });
+        visible ? (react_1.default.createElement(material_1.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_1.default.createElement("option", { key: name, value: name },
@@ -75,5 +76,5 @@ function FacetFilter({ column, vals, width, dispatch, filters, }) {
             " (",
             count,
             ")"))))) : null));
-}
+});
 exports.default = FacetFilter;

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

@@ -1,13 +1,11 @@
 import React from 'react';
-export default function FacetFilters({ rows, columns, dispatch, filters, width, }: {
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const FacetFilters: ({ rows, columns, width, model, }: {
     rows: Record<string, unknown>[];
-    filters: Record<string, string[]>;
     columns: {
         field: string;
     }[];
-    dispatch: (arg: {
-        key: string;
-        val: string[];
-    }) => void;
     width: number;
-}): React.JSX.Element;
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element;
+export default FacetFilters;

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

@@ -5,19 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const FacetFilter_1 = __importDefault(require("./FacetFilter"));
-function FacetFilters({ rows, columns, dispatch, filters, width, }) {
+const mobx_react_1 = require("mobx-react");
+const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, width, model, }) {
     var _a, _b;
+    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 filterKeys = Object.keys(filters);
+    const filterKeys = faceted.filters.keys();
     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) {
+        if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
             ret.add(entry);
         }
     }
@@ -40,13 +43,13 @@ 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;
+        const filter = ((_b = filters.get(facet)) === null || _b === void 0 ? void 0 : _b.length)
+            ? new Set(filters.get(facet))
+            : undefined;
         currentRows = currentRows.filter(row => {
             return filter !== undefined ? filter.has(row[facet]) : true;
         });
     }
-    return (react_1.default.createElement("div", null, facets.map(column => {
-        return (react_1.default.createElement(FacetFilter_1.default, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, dispatch: dispatch, filters: filters }));
-    })));
-}
+    return (react_1.default.createElement("div", null, facets.map(column => (react_1.default.createElement(FacetFilter_1.default, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, model: model })))));
+});
 exports.default = FacetFilters;

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

@@ -1,15 +1,5 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-export default function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }: {
-    setFilterText: (arg: string) => void;
-    setUseShoppingCart: (arg: boolean) => void;
-    setShowSparse: (arg: boolean) => void;
-    setShowFilters: (arg: boolean) => void;
-    setShowOptions: (arg: boolean) => void;
-    filterText: string;
-    showOptions: boolean;
-    useShoppingCart: boolean;
-    showSparse: boolean;
-    showFilters: boolean;
+export default function FacetedHeader({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }): React.JSX.Element;

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

@@ -34,14 +34,16 @@ const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 // locals
 const ShoppingCart_1 = __importDefault(require("../ShoppingCart"));
-function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }) {
+function FacetedHeader({ model, }) {
+    const { faceted } = model;
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Grid, { container: true, spacing: 4, alignItems: "center" },
             react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.TextField, { label: "Search...", value: filterText, onChange: event => setFilterText(event.target.value), InputProps: {
+                react_1.default.createElement(material_1.TextField, { label: "Search...", value: faceted.filterText, onChange: event => faceted.setFilterText(event.target.value), InputProps: {
                         endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
-                            react_1.default.createElement(material_1.IconButton, { onClick: () => setFilterText('') },
+                            react_1.default.createElement(material_1.IconButton, { onClick: () => faceted.setFilterText('') },
                                 react_1.default.createElement(Clear_1.default, null)))),
                     } })),
             react_1.default.createElement(material_1.Grid, { item: true },
@@ -55,25 +57,25 @@ function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setSh
             }, menuItems: [
                 {
                     label: 'Add tracks to selection instead of turning them on/off',
-                    onClick: () => setUseShoppingCart(!useShoppingCart),
+                    onClick: () => faceted.setUseShoppingCart(!useShoppingCart),
                     type: 'checkbox',
                     checked: useShoppingCart,
                 },
                 {
                     label: 'Show sparse metadata columns',
-                    onClick: () => setShowSparse(!showSparse),
+                    onClick: () => faceted.setShowSparse(!showSparse),
                     checked: showSparse,
                     type: 'checkbox',
                 },
                 {
                     label: 'Show facet filters',
-                    onClick: () => setShowFilters(!showFilters),
+                    onClick: () => faceted.setShowFilters(!showFilters),
                     checked: showFilters,
                     type: 'checkbox',
                 },
                 {
                     label: 'Show extra table options',
-                    onClick: () => setShowOptions(!showOptions),
+                    onClick: () => faceted.setShowOptions(!showOptions),
                     checked: showOptions,
                     type: 'checkbox',
                 },