@jbrowse/plugin-data-management 2.3.2 → 2.3.4

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

@@ -0,0 +1,108 @@
+import React, { Suspense, lazy, useState } from 'react';
+import { IconButton } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import JBrowseMenu from '@jbrowse/core/ui/Menu';
+import { getSession, isSessionModelWithWidgets, isSessionModelWithConnections, } from '@jbrowse/core/util';
+import { readConfObject, } from '@jbrowse/core/configuration';
+// icons
+import MenuIcon from '@mui/icons-material/Menu';
+// lazy components
+const CloseConnectionDlg = lazy(() => import('../dialogs/CloseConnectionDialog'));
+const DeleteConnectionDlg = lazy(() => import('../dialogs/DeleteConnectionDialog'));
+const ManageConnectionsDlg = lazy(() => import('../dialogs/ManageConnectionsDialog'));
+const ToggleConnectionsDlg = lazy(() => import('../dialogs/ToggleConnectionsDialog'));
+const useStyles = makeStyles()(theme => ({
+    menuIcon: {
+        marginRight: theme.spacing(1),
+        marginBottom: 0,
+    },
+}));
+export default observer(function HamburgerMenu({ model, setAssemblyIdx, }) {
+    const session = getSession(model);
+    const [menuEl, setMenuEl] = useState();
+    const [modalInfo, setModalInfo] = useState();
+    const [deleteDlgDetails, setDeleteDlgDetails] = useState();
+    const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
+    const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
+    const { classes } = useStyles();
+    const { assemblyNames } = model;
+    function breakConnection(connectionConf, deletingConnection) {
+        const name = readConfObject(connectionConf, 'name');
+        // @ts-ignore
+        const result = session.prepareToBreakConnection(connectionConf);
+        if (result) {
+            const [safelyBreakConnection, dereferenceTypeCount] = result;
+            if (Object.keys(dereferenceTypeCount).length > 0) {
+                setModalInfo({
+                    connectionConf,
+                    safelyBreakConnection,
+                    dereferenceTypeCount,
+                    name,
+                });
+            }
+            else {
+                safelyBreakConnection();
+            }
+        }
+        if (deletingConnection) {
+            setDeleteDlgDetails({ name, connectionConf });
+        }
+    }
+    const connectionMenuItems = [
+        {
+            label: 'Turn on/off connections...',
+            onClick: () => setConnectionToggleOpen(true),
+        },
+    ];
+    if (isSessionModelWithConnections(session)) {
+        connectionMenuItems.unshift({
+            label: 'Add connection...',
+            onClick: () => {
+                if (isSessionModelWithWidgets(session)) {
+                    session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
+                }
+            },
+        });
+        connectionMenuItems.push({
+            label: 'Delete connections...',
+            onClick: () => setConnectionManagerOpen(true),
+        });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setMenuEl(event.currentTarget) },
+            React.createElement(MenuIcon, null)),
+        React.createElement(JBrowseMenu, { anchorEl: menuEl, open: Boolean(menuEl), onMenuItemClick: (_, callback) => {
+                callback();
+                setMenuEl(undefined);
+            }, onClose: () => setMenuEl(undefined), menuItems: [
+                {
+                    label: 'Add track...',
+                    onClick: () => {
+                        if (isSessionModelWithWidgets(session)) {
+                            session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                                view: model.view.id,
+                            }));
+                        }
+                    },
+                },
+                ...(session.makeConnection ? connectionMenuItems : []),
+                ...(assemblyNames.length > 1
+                    ? [
+                        {
+                            label: 'Select assembly...',
+                            subMenu: assemblyNames.map((name, idx) => ({
+                                label: name,
+                                onClick: () => setAssemblyIdx(idx),
+                            })),
+                        },
+                    ]
+                    : []),
+            ] }),
+        React.createElement(Suspense, { fallback: React.createElement("div", null) },
+            modalInfo ? (React.createElement(CloseConnectionDlg, { modalInfo: modalInfo, setModalInfo: setModalInfo })) : null,
+            deleteDlgDetails ? (React.createElement(DeleteConnectionDlg, { handleClose: () => setDeleteDlgDetails(undefined), deleteDialogDetails: deleteDlgDetails, session: session })) : null,
+            connectionManagerOpen ? (React.createElement(ManageConnectionsDlg, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
+            connectionToggleOpen ? (React.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null)));
+});
+//# sourceMappingURL=HamburgerMenu.js.map

package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HamburgerMenu.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.tsx"],"names":[],"mappings":"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"}

package/esm/HierarchicalTrackSelectorWidget/components/{Header.d.ts → tree/HierarchicalHeader.d.ts}

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { HierarchicalTrackSelectorModel } from '../model';
-declare function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, setAssemblyIdx, assemblyIdx, }: {
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, setAssemblyIdx, }: {
     model: HierarchicalTrackSelectorModel;
     setHeaderHeight: (n: number) => void;
     setAssemblyIdx: (n: number) => void;
-    assemblyIdx: number;
 }): JSX.Element;
 declare const _default: typeof HierarchicalTrackSelectorHeader;
 export default _default;

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

@@ -0,0 +1,37 @@
+import React, { Suspense, lazy, useState } from 'react';
+import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import ClearIcon from '@mui/icons-material/Clear';
+import HamburgerMenu from './HamburgerMenu';
+import ShoppingCart from '../ShoppingCart';
+// lazies
+const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
+const useStyles = makeStyles()(theme => ({
+    searchBox: {
+        margin: theme.spacing(2),
+    },
+    menuIcon: {
+        marginRight: theme.spacing(1),
+        marginBottom: 0,
+    },
+}));
+function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, setAssemblyIdx, }) {
+    const { classes } = useStyles();
+    const [facetedOpen, setFacetedOpen] = useState(false);
+    const { filterText } = model;
+    return (React.createElement("div", { ref: ref => setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0), "data-testid": "hierarchical_track_selector" },
+        React.createElement("div", { style: { display: 'flex' } },
+            React.createElement(HamburgerMenu, { model: model, setAssemblyIdx: setAssemblyIdx }),
+            React.createElement(ShoppingCart, { model: model }),
+            React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
+                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                        React.createElement(IconButton, { color: "secondary", onClick: () => model.clearFilterText() },
+                            React.createElement(ClearIcon, null)))),
+                } }),
+            React.createElement(Button, { className: classes.menuIcon, onClick: () => setFacetedOpen(true) }, "Open faceted selector")),
+        React.createElement(Suspense, { fallback: React.createElement("div", null) }, facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
+}
+export default observer(HierarchicalTrackSelectorHeader);
+//# sourceMappingURL=HierarchicalHeader.js.map

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchicalHeader.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAQ;AACR,OAAO,SAAS,MAAM,2BAA2B,CAAA;AAIjD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,SAAS;AACT,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAA;AAEpE,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,SAAS,EAAE;QACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KACzB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAC,CAAA;AAEH,SAAS,+BAA+B,CAAC,EACvC,KAAK,EACL,eAAe,EACf,cAAc,GAKf;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE5B,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,qBAAqB,GAAG,MAAM,KAAI,CAAC,CAAC,iBACzD,6BAA6B;QAEzC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC7B,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,GAAI;YAC/D,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI;YAE9B,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1D,SAAS,QACT,UAAU,EAAE;oBACV,YAAY,EAAE,CACZ,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;wBAC5B,oBAAC,UAAU,IACT,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;4BAEtC,oBAAC,SAAS,OAAG,CACF,CACE,CAClB;iBACF,GACD;YACF,oBAAC,MAAM,IACL,SAAS,EAAE,OAAO,CAAC,QAAQ,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAG5B,CACL;QAEN,oBAAC,QAAQ,IAAC,QAAQ,EAAE,gCAAO,IACxB,WAAW,CAAC,CAAC,CAAC,CACb,oBAAC,aAAa,IACZ,WAAW,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,KAAK,GACZ,CACH,CAAC,CAAC,CAAC,IAAI,CACC,CACP,CACP,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,+BAA+B,CAAC,CAAA"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TreeNode, HierarchicalTrackSelectorModel } from '../../model';
+declare const _default: ({ height, tree, model, }: {
+    height: number;
+    tree: TreeNode;
+    model: HierarchicalTrackSelectorModel;
+}) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,63 @@
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { VariableSizeTree } from 'react-vtree';
+import { getSession } from '@jbrowse/core/util';
+import Node from './TrackListNode';
+function getNodeData(node, nestingLevel, extra, selection) {
+    const isLeaf = !!node.conf;
+    const selected = !!selection[node.id];
+    return {
+        data: {
+            defaultHeight: isLeaf ? 22 : 40,
+            isLeaf,
+            isOpenByDefault: true,
+            nestingLevel,
+            selected,
+            ...node,
+            ...extra,
+        },
+        nestingLevel,
+        node,
+    };
+}
+// this is the main tree component for the hierarchical track selector in note:
+// in jbrowse-web the toolbar is position="sticky" which means the autosizer
+// includes the height of the toolbar, so we subtract the given offsets
+export default observer(function HierarchicalTree({ height, tree, model, }) {
+    const { filterText, selection, view } = model;
+    const treeRef = useRef(null);
+    const session = getSession(model);
+    const { drawerPosition } = session;
+    const obj = useMemo(() => Object.fromEntries(selection.map(s => [s.trackId, s])), [selection]);
+    const extra = useMemo(() => ({
+        onChange: (trackId) => view.toggleTrack(trackId),
+        toggleCollapse: (pathName) => model.toggleCategory(pathName),
+        tree,
+        model,
+        drawerPosition,
+    }), [view, model, drawerPosition, tree]);
+    const treeWalker = useCallback(function* treeWalker() {
+        for (let i = 0; i < tree.children.length; i++) {
+            const r = tree.children[i];
+            yield getNodeData(r, 0, extra, obj);
+        }
+        while (true) {
+            // @ts-ignore
+            const parentMeta = yield;
+            for (let i = 0; i < parentMeta.node.children.length; i++) {
+                const curr = parentMeta.node.children[i];
+                yield getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj);
+            }
+        }
+    }, [tree, extra, obj]);
+    useEffect(() => {
+        // @ts-ignore
+        treeRef.current.recomputeTree({
+            refreshNodes: true,
+            useDefaultHeight: true,
+        });
+    }, [tree, filterText]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height }, Node)));
+});
+//# sourceMappingURL=HierarchicalTree.js.map

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchicalTree.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NodeData } from '../util';
+export default function Category({ isOpen, setOpen, data, }: {
+    isOpen: boolean;
+    setOpen: (arg: boolean) => void;
+    data: NodeData;
+}): JSX.Element;

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

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { IconButton, Typography } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import JBrowseMenu from '@jbrowse/core/ui/Menu';
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+// locals
+import { getAllChildren, treeToMap } from '../util';
+const useStyles = makeStyles()(theme => ({
+    contrastColor: {
+        color: theme.palette.secondary.contrastText,
+    },
+    // margin:auto 0 to center text vertically
+    accordionText: {
+        margin: 'auto 0',
+        // width 100 so you can click anywhere on the category bar
+        width: '100%',
+    },
+}));
+export default function Category({ isOpen, setOpen, data, }) {
+    const { classes } = useStyles();
+    const [menuEl, setMenuEl] = useState(null);
+    const { name, model, id, tree, toggleCollapse } = data;
+    return (React.createElement("div", { className: classes.accordionText, onClick: () => {
+            if (!menuEl) {
+                toggleCollapse(id);
+                setOpen(!isOpen);
+            }
+        } },
+        React.createElement(Typography, null,
+            isOpen ? React.createElement(ArrowDropDownIcon, null) : React.createElement(ArrowRightIcon, null),
+            name,
+            React.createElement(IconButton, { onClick: event => {
+                    setMenuEl(event.currentTarget);
+                    event.stopPropagation();
+                }, className: classes.contrastColor },
+                React.createElement(MoreHorizIcon, null))),
+        menuEl ? (React.createElement(JBrowseMenu, { anchorEl: menuEl, menuItems: [
+                {
+                    label: 'Add to selection',
+                    onClick: () => {
+                        const r = treeToMap(tree).get(id);
+                        model.addToSelection(getAllChildren(r));
+                    },
+                },
+                {
+                    label: 'Remove from selection',
+                    onClick: () => {
+                        const r = treeToMap(tree).get(id);
+                        model.removeFromSelection(getAllChildren(r));
+                    },
+                },
+            ], onMenuItemClick: (_event, callback) => {
+                callback();
+                setMenuEl(null);
+            }, open: Boolean(menuEl), onClose: () => setMenuEl(null) })) : null));
+}
+//# sourceMappingURL=TrackCategory.js.map

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackCategory.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { NodeData } from '../util';
+export interface InfoArgs {
+    target: HTMLElement;
+    id: string;
+    conf: AnyConfigurationModel;
+}
+export default function TrackLabel({ data }: {
+    data: NodeData;
+}): JSX.Element;

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

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Checkbox, FormControlLabel, IconButton, Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import JBrowseMenu from '@jbrowse/core/ui/Menu';
+import { getSession } from '@jbrowse/core/util';
+import { readConfObject, } from '@jbrowse/core/configuration';
+// icons
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+// locals
+import { isUnsupported } from '../util';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+const useStyles = makeStyles()({
+    compactCheckbox: {
+        padding: 0,
+    },
+    checkboxLabel: {
+        marginRight: 0,
+        '&:hover': {
+            backgroundColor: '#eee',
+        },
+    },
+});
+export default function TrackLabel({ data }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    const { checked, conf, model, drawerPosition, id, name, onChange, selected } = data;
+    const [info, setInfo] = useState();
+    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: {
+                        // @ts-ignore
+                        'data-testid': `htsTrackEntry-${id}`,
+                    } }), label: React.createElement("div", { style: { background: selected ? '#cccc' : undefined } },
+                    React.createElement(SanitizedHTML, { html: name })) })),
+        React.createElement(IconButton, { onClick: e => setInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, color: "secondary", "data-testid": `htsTrackEntryMenu-${id}` },
+            React.createElement(MoreHorizIcon, null)),
+        info ? (React.createElement(JBrowseMenu, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: [
+                ...(((_b = (_a = getSession(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, info.conf)) || []),
+                {
+                    label: 'Add to selection',
+                    onClick: () => model.addToSelection([info.conf]),
+                },
+                ...(selected
+                    ? [
+                        {
+                            label: 'Remove from selection',
+                            onClick: () => model.removeFromSelection([info.conf]),
+                        },
+                    ]
+                    : []),
+            ], onMenuItemClick: (_event, callback) => {
+                callback();
+                setInfo(undefined);
+            }, open: Boolean(info), onClose: () => setInfo(undefined) })) : null));
+}
+//# sourceMappingURL=TrackLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrackLabel.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { NodeData } from '../util';
+export default function Node({ data, isOpen, style, setOpen, }: {
+    data: NodeData;
+    isOpen: boolean;
+    style?: {
+        height: number;
+    };
+    setOpen: (arg: boolean) => void;
+}): JSX.Element;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+// locals
+import Category from './TrackCategory';
+import TrackLabel from './TrackLabel';
+const useStyles = makeStyles()(theme => ({
+    // this accordionBase element's small padding is used to give a margin to
+    // accordionColor it a "margin" because the virtualized elements can't really
+    // use margin in a conventional way (it doesn't affect layout)
+    accordionBase: {
+        display: 'flex',
+    },
+    accordionCard: {
+        padding: 3,
+        cursor: 'pointer',
+        display: 'flex',
+    },
+    nestingLevelMarker: {
+        position: 'absolute',
+        borderLeft: '1.5px solid #555',
+    },
+    // accordionColor set's display:flex so that the child accordionText use
+    // vertically centered text
+    accordionColor: {
+        background: theme.palette.tertiary.main,
+        color: theme.palette.tertiary.contrastText,
+        width: '100%',
+        display: 'flex',
+        paddingLeft: 5,
+    },
+}));
+// An individual node in the track selector. Note: manually sets cursor:
+// pointer improves usability for what can be clicked
+export default function Node({ data, isOpen, style, setOpen, }) {
+    const { isLeaf, nestingLevel } = data;
+    const { classes } = useStyles();
+    const width = 10;
+    const marginLeft = nestingLevel * width + (isLeaf ? width : 0);
+    return (React.createElement("div", { style: style, className: !isLeaf ? classes.accordionBase : undefined },
+        new Array(nestingLevel).fill(0).map((_, idx) => (React.createElement("div", { key: `mark-${idx}`, style: { left: idx * width + 4, height: style === null || style === void 0 ? void 0 : style.height }, className: classes.nestingLevelMarker }))),
+        React.createElement("div", { className: !isLeaf ? classes.accordionCard : undefined, style: {
+                marginLeft,
+                whiteSpace: 'nowrap',
+                width: '100%',
+            } },
+            React.createElement("div", { className: !isLeaf ? classes.accordionColor : undefined }, !isLeaf ? (React.createElement(Category, { isOpen: isOpen, data: data, setOpen: setOpen })) : (React.createElement(TrackLabel, { data: data }))))));
+}
+//# sourceMappingURL=TrackListNode.js.map

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackListNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackListNode.js","sourceRoot":"","sources":["../../../../src/HierarchicalTrackSelectorWidget/components/tree/TrackListNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,SAAS;AACT,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AACtC,OAAO,UAAU,MAAM,cAAc,CAAA;AAGrC,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,yEAAyE;IACzE,6EAA6E;IAC7E,8DAA8D;IAC9D,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;KAChB;IAED,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;KAChB;IAED,kBAAkB,EAAE;QAClB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,kBAAkB;KAC/B;IACD,wEAAwE;IACxE,2BAA2B;IAC3B,cAAc,EAAE;QACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI;QACvC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY;QAC1C,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,CAAC;KACf;CACF,CAAC,CAAC,CAAA;AAEH,wEAAwE;AACxE,qDAAqD;AACrD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,GAMR;IACC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAA;IAErC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,KAAK,GAAG,EAAE,CAAA;IAChB,MAAM,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QACtE,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/C,6BACE,GAAG,EAAE,QAAQ,GAAG,EAAE,EAClB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE,EACvD,SAAS,EAAE,OAAO,CAAC,kBAAkB,GACrC,CACH,CAAC;QACF,6BACE,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE;gBACL,UAAU;gBACV,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,MAAM;aACd;YAED,6BAAK,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,IACzD,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAC3D,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CAC3B,CACG,CACF,CACF,CACP,CAAA;AACH,CAAC"}

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

@@ -1,3 +1,19 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { TreeNode } from '../model';
+import { HierarchicalTrackSelectorModel, TreeNode } from '../model';
+export interface NodeData {
+    nestingLevel: number;
+    checked: boolean;
+    conf: AnyConfigurationModel;
+    drawerPosition: unknown;
+    id: string;
+    isLeaf: boolean;
+    name: string;
+    onChange: Function;
+    toggleCollapse: (arg: string) => void;
+    tree: TreeNode;
+    selected: boolean;
+    model: HierarchicalTrackSelectorModel;
+}
 export declare function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[];
+export declare function treeToMap(tree: TreeNode, map?: Map<string, TreeNode>): Map<string, TreeNode>;
+export declare function isUnsupported(name?: string): boolean;

package/esm/HierarchicalTrackSelectorWidget/components/util.js

@@ -2,4 +2,17 @@ export function getAllChildren(subtree) {
     // @ts-ignore
     return ((subtree === null || subtree === void 0 ? void 0 : subtree.children.map(t => t.children.length ? getAllChildren(t) : t.conf)) || []).flat(Infinity);
 }
+export function treeToMap(tree, map = new Map()) {
+    if (tree.id && tree.children.length) {
+        map.set(tree.id, tree);
+    }
+    for (let i = 0; i < tree.children.length; i++) {
+        const node = tree.children[i];
+        treeToMap(node, map);
+    }
+    return map;
+}
+export function isUnsupported(name = '') {
+    return name.endsWith('(Unsupported)') || name.endsWith('(Unknown)');
+}
 //# sourceMappingURL=util.js.map

package/esm/HierarchicalTrackSelectorWidget/components/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/HierarchicalTrackSelectorWidget/components/util.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,cAAc,CAAC,OAAkB;IAC/C,aAAa;IACb,OAAO,CACL,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACxB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,IAA8B,CAC1E,KAAI,EAAE,CACR,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AAClB,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/HierarchicalTrackSelectorWidget/components/util.ts"],"names":[],"mappings":"AAkBA,MAAM,UAAU,cAAc,CAAC,OAAkB;IAC/C,aAAa;IACb,OAAO,CACL,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACxB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,IAA8B,CAC1E,KAAI,EAAE,CACR,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AAClB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAc,EAAE,MAAM,IAAI,GAAG,EAAoB;IACzE,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;QACnC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;KACvB;IACD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAC7B,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;KACrB;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAI,GAAG,EAAE;IACrC,OAAO,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;AACrE,CAAC"}

package/esm/HierarchicalTrackSelectorWidget/index.d.ts

@@ -1,4 +1,7 @@
 import stateModelFactory, { HierarchicalTrackSelectorModel } from './model';
 import configSchema from './configSchema';
+import PluginManager from '@jbrowse/core/PluginManager';
 export { stateModelFactory, configSchema };
 export type { HierarchicalTrackSelectorModel };
+declare const _default: (pluginManager: PluginManager) => void;
+export default _default;

package/esm/HierarchicalTrackSelectorWidget/index.js

@@ -1,4 +1,17 @@
 import stateModelFactory from './model';
 import configSchema from './configSchema';
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
+import { lazy } from 'react';
 export { stateModelFactory, configSchema };
+export default (pluginManager) => {
+    pluginManager.addWidgetType(() => {
+        return new WidgetType({
+            name: 'HierarchicalTrackSelectorWidget',
+            heading: 'Available tracks',
+            configSchema,
+            stateModel: stateModelFactory(pluginManager),
+            ReactComponent: lazy(() => import('./components/HierarchicalTrackSelector')),
+        });
+    });
+};
 //# sourceMappingURL=index.js.map

package/esm/HierarchicalTrackSelectorWidget/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/HierarchicalTrackSelectorWidget/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAqD,MAAM,SAAS,CAAA;AAC3E,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/HierarchicalTrackSelectorWidget/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAqD,MAAM,SAAS,CAAA;AAC3E,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE5B,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA;AAG1C,eAAe,CAAC,aAA4B,EAAE,EAAE;IAC9C,aAAa,CAAC,aAAa,CAAC,GAAG,EAAE;QAC/B,OAAO,IAAI,UAAU,CAAC;YACpB,IAAI,EAAE,iCAAiC;YACvC,OAAO,EAAE,kBAAkB;YAC3B,YAAY;YACZ,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC;YAC5C,cAAc,EAAE,IAAI,CAClB,GAAG,EAAE,CAAC,MAAM,CAAC,wCAAwC,CAAC,CACvD;SACF,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/esm/HierarchicalTrackSelectorWidget/model.d.ts

@@ -1,6 +1,8 @@
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { AbstractSessionModel } from '@jbrowse/core/util';
 import PluginManager from '@jbrowse/core/PluginManager';
+export declare function matches(query: string, conf: AnyConfigurationModel, session: AbstractSessionModel): any;
 export type TreeNode = {
     name: string;
     id: string;
@@ -16,7 +18,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"HierarchicalTrackSelectorWidget">;
     collapsed: import("mobx-state-tree").IMapType<import("mobx-state-tree").ISimpleType<boolean>>;
-    filterText: import("mobx-state-tree").IType<string | undefined, string, string>;
     view: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
 }, {
     selection: ({
@@ -24,7 +25,9 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+    filterText: string;
 } & {
+    setSelection(elt: AnyConfigurationModel[]): void;
     addToSelection(elt: AnyConfigurationModel[]): void;
     removeFromSelection(elt: AnyConfigurationModel[]): void;
     clearSelection(): void;

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -6,11 +6,11 @@ import { ElementId } from '@jbrowse/core/util/types/mst';
 function hasAnyOverlap(a1 = [], a2 = []) {
     return !!a1.find(value => a2.includes(value));
 }
-function passesFilter(filter, config, session) {
-    const categories = readConfObject(config, 'category');
-    const filterLower = filter.toLowerCase();
-    return (getTrackName(config, session).toLowerCase().includes(filterLower) ||
-        !!(categories === null || categories === void 0 ? void 0 : categories.filter(c => c.toLowerCase().includes(filterLower)).length));
+export function matches(query, conf, session) {
+    const categories = readConfObject(conf, 'category');
+    const queryLower = query.toLowerCase();
+    return (getTrackName(conf, session).toLowerCase().includes(queryLower) ||
+        !!(categories === null || categories === void 0 ? void 0 : categories.filter(c => c.toLowerCase().includes(queryLower)).length));
 }
 function filterTracks(tracks, self, assemblyName) {
     const { assemblyManager } = getSession(self);
@@ -34,7 +34,7 @@ export function generateHierarchy(model, trackConfigurations, collapsed, extra)
     const { filterText, view } = model;
     const session = getSession(model);
     trackConfigurations
-        .filter(conf => passesFilter(filterText, conf, session))
+        .filter(conf => matches(filterText, conf, session))
         .forEach(conf => {
         // copy the categories since this array can be mutated downstream
         const categories = [...(readConfObject(conf, 'category') || [])];
@@ -82,13 +82,16 @@ export default function stateTreeFactory(pluginManager) {
         id: ElementId,
         type: types.literal('HierarchicalTrackSelectorWidget'),
         collapsed: types.map(types.boolean),
-        filterText: '',
         view: types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
     })
         .volatile(() => ({
         selection: [],
+        filterText: '',
     }))
         .actions(self => ({
+        setSelection(elt) {
+            self.selection = elt;
+        },
         addToSelection(elt) {
             self.selection = dedupe([...self.selection, ...elt], e => e.trackId);
         },