@jbrowse/plugin-data-management 2.8.0 → 2.10.0

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import { Checkbox, FormControlLabel, Tooltip } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { getSession } from '@jbrowse/core/util';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import { readConfObject, } from '@jbrowse/core/configuration';
-// icons
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 // locals
 import { isUnsupported } from '../util';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import TrackLabelMenu from './TrackLabelMenu';
 const useStyles = makeStyles()(theme => ({
     compactCheckbox: {
         padding: 0,
@@ -19,36 +16,20 @@ const useStyles = makeStyles()(theme => ({
             backgroundColor: theme.palette.action.selected,
         },
     },
+    selected: {
+        background: '#cccc',
+    },
 }));
 export default function TrackLabel({ data }) {
     const { classes } = useStyles();
-    const { checked, conf, model, drawerPosition, id, name, onChange, selected } = data;
-    const description = (conf && readConfObject(conf, ['description'])) || '';
+    const { checked, conf, model, drawerPosition, id, trackId, name, onChange, selected, } = data;
+    const description = (conf && readConfObject(conf, 'description')) || '';
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { title: description + (selected ? ' (in selection)' : ''), placement: drawerPosition === 'left' ? 'right' : 'left' },
-            React.createElement(FormControlLabel, { className: classes.checkboxLabel, control: React.createElement(Checkbox, { className: classes.compactCheckbox, checked: checked, onChange: () => onChange(id), disabled: isUnsupported(name), inputProps: {
+            React.createElement(FormControlLabel, { className: classes.checkboxLabel, control: React.createElement(Checkbox, { className: classes.compactCheckbox, checked: checked, onChange: () => onChange(trackId), disabled: isUnsupported(name), inputProps: {
                         // @ts-expect-error
                         'data-testid': `htsTrackEntry-${id}`,
                     } }), label: React.createElement("div", { "data-testid": `htsTrackLabel-${id}`, style: { background: selected ? '#cccc' : undefined } },
                     React.createElement(SanitizedHTML, { html: name })) })),
-        React.createElement(TrackMenuButton, { model: model, selected: selected, id: id, conf: conf })));
-}
-function TrackMenuButton({ id, model, selected, conf, }) {
-    var _a, _b;
-    return (React.createElement(CascadingMenuButton, { style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}`, menuItems: [
-            ...(((_b = (_a = getSession(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, conf)) || []),
-            {
-                label: 'Add to selection',
-                onClick: () => model.addToSelection([conf]),
-            },
-            ...(selected
-                ? [
-                    {
-                        label: 'Remove from selection',
-                        onClick: () => model.removeFromSelection([conf]),
-                    },
-                ]
-                : []),
-        ] },
-        React.createElement(MoreHorizIcon, null)));
+        React.createElement(TrackLabelMenu, { model: model, trackId: trackId, id: id, conf: conf })));
 }

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabelMenu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const TrackLabelMenu: ({ id, trackId, stopPropagation, model, setOpen, conf, }: {
+    id: string;
+    trackId: string;
+    stopPropagation?: boolean | undefined;
+    conf: AnyConfigurationModel;
+    setOpen?: ((arg: boolean) => void) | undefined;
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element;
+export default TrackLabelMenu;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabelMenu.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { getSession } from '@jbrowse/core/util';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+// icons
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import StarIcon from '@mui/icons-material/StarBorderOutlined';
+import FilledStarIcon from '@mui/icons-material/Star';
+const useStyles = makeStyles()({
+    cascadingStyle: {
+        padding: 0,
+    },
+});
+const TrackLabelMenu = function ({ id, trackId, stopPropagation, model, setOpen, conf, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    return (React.createElement(CascadingMenuButton, { className: classes.cascadingStyle, stopPropagation: stopPropagation, setOpen: setOpen, "data-testid": `htsTrackEntryMenu-${id}`, menuItems: [
+            ...(((_b = (_a = getSession(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, conf)) || []),
+            model.isFavorite(trackId)
+                ? {
+                    label: 'Remove from favorites',
+                    onClick: () => model.removeFromFavorites(trackId),
+                    icon: StarIcon,
+                }
+                : {
+                    label: 'Add to favorites',
+                    onClick: () => model.addToFavorites(trackId),
+                    icon: FilledStarIcon,
+                },
+            {
+                label: 'Add to selection',
+                onClick: () => model.addToSelection([conf]),
+            },
+            ...(model.isSelected(conf)
+                ? [
+                    {
+                        label: 'Remove from selection',
+                        onClick: () => model.removeFromSelection([conf]),
+                    },
+                ]
+                : []),
+        ] },
+        React.createElement(MoreHorizIcon, null)));
+};
+export default TrackLabelMenu;

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

@@ -1,18 +1,21 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { HierarchicalTrackSelectorModel } from '../model';
 import { TreeNode } from '../generateHierarchy';
+import { MenuItem } from '@jbrowse/core/ui';
 export interface NodeData {
     nestingLevel: number;
     checked: boolean;
     conf: AnyConfigurationModel;
     drawerPosition: unknown;
     id: string;
+    trackId: string;
     isLeaf: boolean;
     name: string;
     onChange: Function;
     toggleCollapse: (arg: string) => void;
     tree: TreeNode;
     selected: boolean;
+    menuItems?: MenuItem[];
     model: HierarchicalTrackSelectorModel;
 }
 export declare function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[];

package/esm/HierarchicalTrackSelectorWidget/components/util.js

@@ -1,6 +1,10 @@
 export function getAllChildren(subtree) {
     // @ts-expect-error
-    return ((subtree === null || subtree === void 0 ? void 0 : subtree.children.map(t => t.children.length ? getAllChildren(t) : t.conf)) || []).flat(Infinity);
+    return (subtree === null || subtree === void 0 ? void 0 : subtree.type) === 'category'
+        ? subtree.children
+            .map(t => (t.type === 'category' ? getAllChildren(t) : t.conf))
+            .flat(Infinity)
+        : [];
 }
 export function treeToMap(tree, map = new Map()) {
     if (tree.id && tree.children.length) {

package/esm/HierarchicalTrackSelectorWidget/facetedModel.d.ts

@@ -0,0 +1,128 @@
+import { Instance } from 'mobx-state-tree';
+/**
+ * #stateModel FacetedModel
+ */
+export declare function facetedStateTreeF(): import("mobx-state-tree").IModelType<{
+    /**
+     * #property
+     */
+    filterText: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    /**
+     * #property
+     */
+    showSparse: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    /**
+     * #property
+     */
+    showFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    /**
+     * #property
+     */
+    showOptions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    /**
+     * #property
+     */
+    panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, {
+    visible: Record<string, boolean>;
+    widths: Record<string, number | undefined>;
+    useShoppingCart: boolean;
+    filters: import("mobx").ObservableMap<string, string[]>;
+} & {
+    /**
+     * #action
+     */
+    setFilter(key: string, value: string[]): void;
+    /**
+     * #action
+     */
+    setPanelWidth(width: number): void;
+    /**
+     * #action
+     */
+    setUseShoppingCart(f: boolean): void;
+    /**
+     * #action
+     */
+    setFilterText(str: string): void;
+    /**
+     * #action
+     */
+    setShowSparse(f: boolean): void;
+    /**
+     * #action
+     */
+    setShowOptions(f: boolean): void;
+    /**
+     * #action
+     */
+    setShowFilters(f: boolean): void;
+} & {
+    /**
+     * #getter
+     */
+    readonly allTrackConfigurations: ({
+        [x: string]: any;
+    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        setSubschema(slotName: string, data: unknown): any;
+    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+} & {
+    /**
+     * #getter
+     */
+    readonly rows: {
+        readonly id: string;
+        readonly conf: {
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+        readonly name: string;
+        readonly category: string;
+        readonly adapter: string;
+        readonly description: string;
+        readonly metadata: any;
+    }[];
+} & {
+    /**
+     * #getter
+     */
+    readonly filteredNonMetadataKeys: string[] | readonly ["category", "adapter", "description"];
+    /**
+     * #getter
+     */
+    readonly metadataKeys: string[];
+    readonly filteredMetadataKeys: string[];
+    /**
+     * #getter
+     */
+    readonly fields: string[];
+    /**
+     * #getter
+     */
+    readonly filteredRows: {
+        readonly id: string;
+        readonly conf: {
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+        readonly name: string;
+        readonly category: string;
+        readonly adapter: string;
+        readonly description: string;
+        readonly metadata: any;
+    }[];
+} & {
+    /**
+     * #action
+     */
+    setVisible(args: Record<string, boolean>): void;
+    /**
+     * #action
+     */
+    setWidths(args: Record<string, number | undefined>): void;
+    afterAttach(): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type FacetedStateModel = ReturnType<typeof facetedStateTreeF>;
+export type FacetedModel = Instance<FacetedStateModel>;

package/esm/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -0,0 +1,202 @@
+import { addDisposer, getParent, types } from 'mobx-state-tree';
+import { matches } from './util';
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { getSession, localStorageGetItem, measureGridWidth, } from '@jbrowse/core/util';
+import { autorun, observable } from 'mobx';
+import { getRootKeys, findNonSparseKeys } from './facetedUtil';
+const nonMetadataKeys = ['category', 'adapter', 'description'];
+/**
+ * #stateModel FacetedModel
+ */
+export function facetedStateTreeF() {
+    return types
+        .model('FacetedModel', {
+        /**
+         * #property
+         */
+        filterText: types.optional(types.string, ''),
+        /**
+         * #property
+         */
+        showSparse: types.optional(types.boolean, () => JSON.parse(localStorageGetItem('facet-showSparse') || 'false')),
+        /**
+         * #property
+         */
+        showFilters: types.optional(types.boolean, () => JSON.parse(localStorageGetItem('facet-showFilters') || 'true')),
+        /**
+         * #property
+         */
+        showOptions: types.optional(types.boolean, () => JSON.parse(localStorageGetItem('facet-showTableOptions') || 'false')),
+        /**
+         * #property
+         */
+        panelWidth: types.optional(types.number, () => JSON.parse(localStorageGetItem('facet-panelWidth') || '400')),
+    })
+        .volatile(() => ({
+        visible: {},
+        widths: {},
+        useShoppingCart: false,
+        filters: observable.map(),
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setFilter(key, value) {
+            self.filters.set(key, value);
+        },
+        /**
+         * #action
+         */
+        setPanelWidth(width) {
+            self.panelWidth = width;
+        },
+        /**
+         * #action
+         */
+        setUseShoppingCart(f) {
+            self.useShoppingCart = f;
+        },
+        /**
+         * #action
+         */
+        setFilterText(str) {
+            self.filterText = str;
+        },
+        /**
+         * #action
+         */
+        setShowSparse(f) {
+            self.showSparse = f;
+        },
+        /**
+         * #action
+         */
+        setShowOptions(f) {
+            self.showOptions = f;
+        },
+        /**
+         * #action
+         */
+        setShowFilters(f) {
+            self.showFilters = f;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get allTrackConfigurations() {
+            return getParent(self).allTrackConfigurations;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rows() {
+            const session = getSession(self);
+            const { allTrackConfigurations, filterText } = self;
+            // metadata is spread onto the object for easier access and sorting
+            // by the mui data grid (it's unable to sort by nested objects)
+            return allTrackConfigurations
+                .filter(conf => matches(filterText, conf, session))
+                .map(track => {
+                var _a, _b;
+                const metadata = readConfObject(track, 'metadata');
+                return {
+                    id: track.trackId,
+                    conf: track,
+                    name: getTrackName(track, session),
+                    category: (_a = readConfObject(track, 'category')) === null || _a === void 0 ? void 0 : _a.join(', '),
+                    adapter: (_b = readConfObject(track, 'adapter')) === null || _b === void 0 ? void 0 : _b.type,
+                    description: readConfObject(track, 'description'),
+                    metadata,
+                };
+            });
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get filteredNonMetadataKeys() {
+            return self.showSparse
+                ? nonMetadataKeys
+                : findNonSparseKeys(nonMetadataKeys, self.rows, (r, f) => r[f]);
+        },
+        /**
+         * #getter
+         */
+        get metadataKeys() {
+            return [...new Set(self.rows.flatMap(row => getRootKeys(row.metadata)))];
+        },
+        get filteredMetadataKeys() {
+            return self.showSparse
+                ? this.metadataKeys
+                : findNonSparseKeys(this.metadataKeys, self.rows, 
+                // @ts-expect-error
+                (r, f) => r.metadata[f]);
+        },
+        /**
+         * #getter
+         */
+        get fields() {
+            return [
+                'name',
+                ...this.filteredNonMetadataKeys,
+                ...this.filteredMetadataKeys.map(m => `metadata.${m}`),
+            ];
+        },
+        /**
+         * #getter
+         */
+        get filteredRows() {
+            const arrFilters = [...self.filters.entries()]
+                .filter(f => f[1].length > 0)
+                .map(([key, val]) => [key, new Set(val)]);
+            return self.rows.filter(row => 
+            // @ts-expect-error
+            arrFilters.every(([key, val]) => val.has(row[key])));
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setVisible(args) {
+            self.visible = args;
+        },
+        /**
+         * #action
+         */
+        setWidths(args) {
+            self.widths = args;
+        },
+        afterAttach() {
+            addDisposer(self, autorun(() => {
+                this.setVisible(Object.fromEntries(self.fields.map(c => [c, true])));
+            }));
+            addDisposer(self, autorun(() => {
+                this.setWidths({
+                    name: measureGridWidth(self.rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
+                    ...Object.fromEntries(self.filteredNonMetadataKeys
+                        .filter(f => self.visible[f])
+                        .map(e => [
+                        e,
+                        measureGridWidth(self.rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
+                    ])),
+                    ...Object.fromEntries(self.filteredMetadataKeys
+                        .filter(f => self.visible['metadata.' + f])
+                        .map(e => {
+                        return [
+                            'metadata.' + e,
+                            measureGridWidth(self.rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+                        ];
+                    })),
+                });
+            }));
+        },
+    }));
+}

package/esm/HierarchicalTrackSelectorWidget/facetedUtil.d.ts

@@ -0,0 +1,2 @@
+export declare function findNonSparseKeys(keys: readonly string[], rows: Record<string, unknown>[], cb: (row: Record<string, unknown>, f: string) => unknown): string[];
+export declare function getRootKeys(obj: Record<string, unknown>): string[];

package/esm/HierarchicalTrackSelectorWidget/{components/faceted/util.js → facetedUtil.js}

@@ -1,3 +1,6 @@
+export function findNonSparseKeys(keys, rows, cb) {
+    return keys.filter(f => rows.map(r => cb(r, f)).filter(f => !!f).length > 5);
+}
 export function getRootKeys(obj) {
     return Object.entries(obj)
         .map(([key, val]) => (typeof val === 'string' ? key : ''))

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts

@@ -1,13 +1,23 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export interface TreeNode {
+import { MenuItem } from '@jbrowse/core/ui';
+export interface TreeTrackNode {
     name: string;
     id: string;
-    conf?: AnyConfigurationModel;
-    checked?: boolean;
-    isOpenByDefault?: boolean;
+    trackId: string;
+    conf: AnyConfigurationModel;
+    checked: boolean;
     children: TreeNode[];
+    type: 'track';
 }
-export declare function generateHierarchy({ model, trackConfs, extra, }: {
+export interface TreeCategoryNode {
+    name: string;
+    id: string;
+    isOpenByDefault: boolean;
+    children: TreeNode[];
+    type: 'category';
+}
+export type TreeNode = TreeTrackNode | TreeCategoryNode;
+export declare function generateHierarchy({ model, trackConfs, extra, noCategories, menuItems, }: {
     model: {
         filterText: string;
         activeSortTrackNames: boolean;
@@ -19,6 +29,8 @@ export declare function generateHierarchy({ model, trackConfs, extra, }: {
             }[];
         };
     };
+    noCategories?: boolean;
+    menuItems?: MenuItem[];
     trackConfs: AnyConfigurationModel[];
     extra?: string;
 }): TreeNode[];

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.js

@@ -37,7 +37,7 @@ function sortConfs(confs, sortNames, sortCategories) {
     }
     return ret.map(a => a[0]);
 }
-export function generateHierarchy({ model, trackConfs, extra, }) {
+export function generateHierarchy({ model, trackConfs, extra, noCategories, menuItems, }) {
     const hierarchy = { children: [] };
     const { collapsed, filterText, activeSortTrackNames, activeSortCategories, view, } = model;
     if (!view) {
@@ -56,25 +56,29 @@ export function generateHierarchy({ model, trackConfs, extra, }) {
             categories.unshift(' Session tracks');
         }
         let currLevel = hierarchy;
-        // find existing category to put track into or create it
-        for (let i = 0; i < categories.length; i++) {
-            const category = categories[i];
-            const ret = currLevel.children.find(c => c.name === category);
-            const id = [extra, categories.slice(0, i + 1).join(',')]
-                .filter(f => !!f)
-                .join('-');
-            if (!ret) {
-                const n = {
-                    children: [],
-                    name: category,
-                    id,
-                    isOpenByDefault: !collapsed.get(id),
-                };
-                currLevel.children.push(n);
-                currLevel = n;
-            }
-            else {
-                currLevel = ret;
+        if (!noCategories) {
+            // find existing category to put track into or create it
+            for (let i = 0; i < categories.length; i++) {
+                const category = categories[i];
+                const ret = currLevel.children.find(c => c.name === category);
+                const id = [extra, categories.slice(0, i + 1).join(',')]
+                    .filter(f => !!f)
+                    .join('-');
+                if (!ret) {
+                    const n = {
+                        children: [],
+                        name: category,
+                        id,
+                        isOpenByDefault: !collapsed.get(id),
+                        menuItems,
+                        type: 'category',
+                    };
+                    currLevel.children.push(n);
+                    currLevel = n;
+                }
+                else {
+                    currLevel = ret;
+                }
             }
         }
         // uses splice to try to put all leaf nodes above "category nodes" if you
@@ -83,11 +87,13 @@ export function generateHierarchy({ model, trackConfs, extra, }) {
         const r = currLevel.children.findIndex(elt => elt.children.length);
         const idx = r === -1 ? currLevel.children.length : r;
         currLevel.children.splice(idx, 0, {
-            id: conf.trackId,
+            id: [extra, conf.trackId].filter(f => !!f).join(','),
+            trackId: conf.trackId,
             name: getTrackName(conf, session),
             conf,
             checked: viewTracks.some(f => f.configuration === conf),
             children: [],
+            type: 'track',
         });
     }
     return hierarchy.children;