@jbrowse/plugin-data-management 2.8.0 → 2.10.0

package/esm/AddTrackWidget/model.js

@@ -10,11 +10,23 @@ function isAbsoluteUrl(url = '') {
         return url.startsWith('/');
     }
 }
+/**
+ * #stateModel AddTrackModel
+ */
 export default function f(pluginManager) {
     return types
         .model('AddTrackModel', {
+        /**
+         * #property
+         */
         id: ElementId,
+        /**
+         * #property
+         */
         type: types.literal('AddTrackWidget'),
+        /**
+         * #property
+         */
         view: types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
     })
         .volatile(() => ({
@@ -30,33 +42,63 @@ export default 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 = '';
@@ -70,16 +112,25 @@ export default function f(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get trackAdapter() {
             const { trackData, indexTrackData, adapterHint } = self;
             return trackData
                 ? guessAdapter(trackData, indexTrackData, adapterHint, self)
                 : undefined;
         },
+        /**
+         * #getter
+         */
         get trackName() {
             return (self.altTrackName ||
                 (self.trackData ? getFileName(self.trackData) : ''));
         },
+        /**
+         * #getter
+         */
         get isFtp() {
             var _a, _b;
             const { trackData: track, indexTrackData: index } = self;
@@ -87,43 +138,70 @@ export default 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) === 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
@@ -132,6 +210,9 @@ export default function f(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get warningMessage() {
             if (self.isFtp) {
                 return `Warning: JBrowse cannot access files using the ftp protocol`;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -1,42 +1,23 @@
-import React, { useState } from 'react';
-import { Badge, IconButton } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import React from 'react';
+import { Badge } from '@mui/material';
 import { observer } from 'mobx-react';
-import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { getSession, getEnv } from '@jbrowse/core/util';
 // icons
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-const useStyles = makeStyles()(theme => ({
-    searchBox: {
-        margin: theme.spacing(2),
-    },
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
-}));
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 const ShoppingCart = observer(function ({ model, }) {
-    const { classes } = useStyles();
     const { selection } = model;
     const { pluginManager } = getEnv(model);
     const session = getSession(model);
-    const [selectionEl, setSelectionEl] = useState();
     const items = pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems', [], { session });
-    return (React.createElement(React.Fragment, null,
-        selection.length ? (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setSelectionEl(event.currentTarget) },
-            React.createElement(Badge, { badgeContent: selection.length, color: "primary" },
-                React.createElement(ShoppingCartIcon, null)))) : null,
-        React.createElement(JBrowseMenu, { 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.createElement(CascadingMenuButton, { menuItems: [
+            { label: 'Clear', onClick: () => model.clearSelection() },
+            ...items.map(item => ({
+                ...item,
+                ...('onClick' in item ? { onClick: () => item.onClick(model) } : {}),
+            })),
+        ] },
+        React.createElement(Badge, { badgeContent: selection.length, color: "primary" },
+            React.createElement(ShoppingCartIcon, null)))) : null;
 });
 export default ShoppingCart;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js

@@ -6,6 +6,7 @@ import ClearIcon from '@mui/icons-material/Clear';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import AddIcon from '@mui/icons-material/Add';
 import { coarseStripHTML } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     facet: {
         margin: 0,
@@ -24,22 +25,22 @@ 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 FacetFilter = observer(function ({ column, vals, width, model, }) {
     const { classes } = useStyles();
     const [visible, setVisible] = useState(true);
+    const { faceted } = model;
+    const { filters } = faceted;
     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(ClearButton, { onClick: () => model.faceted.setFilter(column.field, []) }),
             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),
-                });
+        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
+                faceted.setFilter(column.field, 
+                // @ts-expect-error
+                [...event.target.options]
+                    .filter(opt => opt.selected)
+                    .map(opt => opt.value));
             } }, vals
             .sort((a, b) => a[0].localeCompare(b[0]))
             .map(([name, count]) => (React.createElement("option", { key: name, value: name },
@@ -47,4 +48,5 @@ export default function FacetFilter({ column, vals, width, dispatch, filters, })
             " (",
             count,
             ")"))))) : null));
-}
+});
+export default FacetFilter;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js

@@ -1,18 +1,21 @@
 import React from 'react';
 import FacetFilter from './FacetFilter';
-export default function FacetFilters({ rows, columns, dispatch, filters, width, }) {
+import { observer } from 'mobx-react';
+const FacetFilters = 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);
         }
     }
@@ -35,12 +38,13 @@ 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;
+        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.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 }));
-    })));
-}
+    return (React.createElement("div", null, facets.map(column => (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, model: model })))));
+});
+export default FacetFilters;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.js

@@ -6,14 +6,16 @@ import ClearIcon from '@mui/icons-material/Clear';
 import MoreVert from '@mui/icons-material/MoreVert';
 // locals
 import ShoppingCart from '../ShoppingCart';
-export default function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }) {
+export default function FacetedHeader({ model, }) {
+    const { faceted } = model;
     const [anchorEl, setAnchorEl] = useState(null);
+    const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, spacing: 4, alignItems: "center" },
             React.createElement(Grid, { item: true },
-                React.createElement(TextField, { label: "Search...", value: filterText, onChange: event => setFilterText(event.target.value), InputProps: {
+                React.createElement(TextField, { label: "Search...", value: faceted.filterText, onChange: event => faceted.setFilterText(event.target.value), InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                            React.createElement(IconButton, { onClick: () => setFilterText('') },
+                            React.createElement(IconButton, { onClick: () => faceted.setFilterText('') },
                                 React.createElement(ClearIcon, null)))),
                     } })),
             React.createElement(Grid, { item: true },
@@ -27,25 +29,25 @@ export default function FacetedHeader({ setFilterText, setUseShoppingCart, 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',
                 },