@jbrowse/plugin-data-management 2.0.0 → 2.1.2

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.js

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Alert, Button, Step, StepContent, StepLabel, Stepper, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { getSession, isElectron, supportedIndexingAdapters, } from '@jbrowse/core/util';
+import { getConf } from '@jbrowse/core/configuration';
+import { observer } from 'mobx-react';
+import { getEnv } from 'mobx-state-tree';
+// locals
+import ConfirmTrack from './ConfirmTrack';
+import TrackSourceSelect from './TrackSourceSelect';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        marginTop: theme.spacing(1),
+    },
+    stepper: {
+        backgroundColor: theme.palette.background.default,
+    },
+    button: {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1),
+    },
+    actionsContainer: {
+        marginBottom: theme.spacing(2),
+    },
+    stepContent: {
+        margin: theme.spacing(1),
+    },
+    alertContainer: {
+        padding: `${theme.spacing(2)}px 0px ${theme.spacing(2)}px 0px`,
+    },
+}));
+const steps = ['Enter track data', 'Confirm track type'];
+function AddTrackWorkflow({ model }) {
+    const [activeStep, setActiveStep] = useState(0);
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(model);
+    const { rootModel } = pluginManager;
+    const { jobsManager } = rootModel;
+    const session = getSession(model);
+    const { assembly, trackAdapter, trackData, trackName, trackType, textIndexTrack, textIndexingConf, } = model;
+    const [trackErrorMessage, setTrackErrorMessage] = useState();
+    function getStepContent(step) {
+        switch (step) {
+            case 0:
+                return React.createElement(TrackSourceSelect, { model: model });
+            case 1:
+                return React.createElement(ConfirmTrack, { model: model });
+            default:
+                return React.createElement(Typography, null, "Unknown step");
+        }
+    }
+    async function handleNext() {
+        if (activeStep !== steps.length - 1) {
+            setActiveStep(activeStep + 1);
+            return;
+        }
+        const trackId = [
+            `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+            `${session.adminMode ? '' : '-sessionTrack'}`,
+        ].join('');
+        const assemblyInstance = session.assemblyManager.get(assembly);
+        if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
+            session.addTrackConf({
+                trackId,
+                type: trackType,
+                name: trackName,
+                assemblyNames: [assembly],
+                adapter: {
+                    ...trackAdapter,
+                    sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
+                },
+            });
+            if (model.view) {
+                model.view.showTrack(trackId);
+                if (isElectron &&
+                    textIndexTrack &&
+                    supportedIndexingAdapters(trackAdapter.type)) {
+                    const attr = textIndexingConf || {
+                        attributes: ['Name', 'ID'],
+                        exclude: ['CDS', 'exon'],
+                    };
+                    const indexName = trackName + '-index';
+                    const newEntry = {
+                        indexingParams: {
+                            ...attr,
+                            assemblies: [assembly],
+                            tracks: [trackId],
+                            indexType: 'perTrack',
+                            name: indexName,
+                            timestamp: new Date().toISOString(),
+                        },
+                        name: indexName,
+                        cancelCallback: () => jobsManager.abortJob(),
+                    };
+                    jobsManager.queueJob(newEntry);
+                }
+            }
+            else {
+                session.notify('Open a new view, or use the track selector in an existing view, to view this track', 'info');
+            }
+            model.clearData();
+            session.hideWidget(model);
+        }
+        else {
+            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:
+                return !trackData;
+            case 1:
+                return !(trackName && trackType && (trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type) && assembly);
+            default:
+                return true;
+        }
+    }
+    return (React.createElement("div", { className: classes.root },
+        React.createElement(Stepper, { className: classes.stepper, activeStep: activeStep, orientation: "vertical" }, steps.map((label, idx) => (React.createElement(Step, { key: label },
+            React.createElement(StepLabel, null, label),
+            React.createElement(StepContent, null,
+                getStepContent(idx),
+                React.createElement("div", { className: classes.actionsContainer },
+                    React.createElement(Button, { disabled: activeStep === 0, onClick: handleBack, className: classes.button }, "Back"),
+                    React.createElement(Button, { disabled: isNextDisabled(), variant: "contained", color: "primary", onClick: handleNext, className: classes.button, "data-testid": "addTrackNextButton" }, activeStep === steps.length - 1 ? 'Add' : 'Next')),
+                trackErrorMessage ? (React.createElement("div", { className: classes.alertContainer },
+                    React.createElement(Alert, { severity: "error" }, trackErrorMessage))) : null)))))));
+}
+export default observer(AddTrackWorkflow);
+//# sourceMappingURL=DefaultAddTrackWorkflow.js.map

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultAddTrackWorkflow.js","sourceRoot":"","sources":["../../../src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,EACL,UAAU,EACV,UAAU,EACV,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,SAAS;AACT,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAInD,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC5B;IACD,OAAO,EAAE;QACP,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;KAClD;IACD,MAAM,EAAE;QACN,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC9B;IACD,gBAAgB,EAAE;QAChB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/B;IACD,WAAW,EAAE;QACX,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KACzB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;KAC/D;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,KAAK,GAAG,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAA;AAExD,SAAS,gBAAgB,CAAC,EAAE,KAAK,EAA4B;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAA;IACnC,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAAA;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IACjC,MAAM,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,gBAAgB,GACjB,GAAG,KAAK,CAAA;IACT,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAU,CAAA;IAEpE,SAAS,cAAc,CAAC,IAAY;QAClC,QAAQ,IAAI,EAAE;YACZ,KAAK,CAAC;gBACJ,OAAO,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;YAC5C,KAAK,CAAC;gBACJ,OAAO,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;YACvC;gBACE,OAAO,oBAAC,UAAU,uBAA0B,CAAA;SAC/C;IACH,CAAC;IAED,KAAK,UAAU,UAAU;QACvB,IAAI,UAAU,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;YAC7B,OAAM;SACP;QAED,MAAM,OAAO,GAAG;YACd,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,EAAE;YAC7D,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;SAC9C,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAEV,MAAM,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QAE9D,IAAI,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,SAAS,EAAE;YACnD,OAAO,CAAC,YAAY,CAAC;gBACnB,OAAO;gBACP,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,SAAS;gBACf,aAAa,EAAE,CAAC,QAAQ,CAAC;gBACzB,OAAO,EAAE;oBACP,GAAG,YAAY;oBACf,eAAe,EAAE,OAAO,CAAC,gBAAgB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;iBACpE;aACF,CAAC,CAAA;YACF,IAAI,KAAK,CAAC,IAAI,EAAE;gBACd,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;gBAC7B,IACE,UAAU;oBACV,cAAc;oBACd,yBAAyB,CAAC,YAAY,CAAC,IAAI,CAAC,EAC5C;oBACA,MAAM,IAAI,GAAG,gBAAgB,IAAI;wBAC/B,UAAU,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC;wBAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;qBACzB,CAAA;oBACD,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;oBACtC,MAAM,QAAQ,GAAG;wBACf,cAAc,EAAE;4BACd,GAAG,IAAI;4BACP,UAAU,EAAE,CAAC,QAAQ,CAAC;4BACtB,MAAM,EAAE,CAAC,OAAO,CAAC;4BACjB,SAAS,EAAE,UAAU;4BACrB,IAAI,EAAE,SAAS;4BACf,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;yBACpC;wBACD,IAAI,EAAE,SAAS;wBACf,cAAc,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,EAAE;qBAC7C,CAAA;oBACD,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;iBAC/B;aACF;iBAAM;gBACL,OAAO,CAAC,MAAM,CACZ,oFAAoF,EACpF,MAAM,CACP,CAAA;aACF;YACD,KAAK,CAAC,SAAS,EAAE,CAAA;YACjB,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;SAC1B;aAAM;YACL,oBAAoB,CAClB,kFAAkF,CACnF,CAAA;SACF;IACH,CAAC;IAED,SAAS,UAAU;QACjB,oBAAoB,CAAC,SAAS,CAAC,CAAA;QAC/B,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;IAC/B,CAAC;IAED,SAAS,cAAc;QACrB,QAAQ,UAAU,EAAE;YAClB,KAAK,CAAC;gBACJ,OAAO,CAAC,SAAS,CAAA;YACnB,KAAK,CAAC;gBACJ,OAAO,CAAC,CAAC,SAAS,IAAI,SAAS,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAA,IAAI,QAAQ,CAAC,CAAA;YACpE;gBACE,OAAO,IAAI,CAAA;SACd;IACH,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI;QAC1B,oBAAC,OAAO,IACN,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAC,UAAU,IAErB,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACzB,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK;YACd,oBAAC,SAAS,QAAE,KAAK,CAAa;YAC9B,oBAAC,WAAW;gBACT,cAAc,CAAC,GAAG,CAAC;gBACpB,6BAAK,SAAS,EAAE,OAAO,CAAC,gBAAgB;oBACtC,oBAAC,MAAM,IACL,QAAQ,EAAE,UAAU,KAAK,CAAC,EAC1B,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,OAAO,CAAC,MAAM,WAGlB;oBACT,oBAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EAAE,EAC1B,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,OAAO,CAAC,MAAM,iBACb,oBAAoB,IAE/B,UAAU,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAC1C,CACL;gBACL,iBAAiB,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAE,OAAO,CAAC,cAAc;oBACpC,oBAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,IAAE,iBAAiB,CAAS,CAC/C,CACP,CAAC,CAAC,CAAC,IAAI,CACI,CACT,CACR,CAAC,CACM,CACN,CACP,CAAA;AACH,CAAC;AACD,eAAe,QAAQ,CAAC,gBAAgB,CAAC,CAAA"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { HierarchicalTrackSelectorModel } from '../model';
+declare function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, setAssemblyIdx, assemblyIdx, }: {
+    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/Header.js

@@ -0,0 +1,149 @@
+import React, { Suspense, lazy, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { Badge, IconButton, InputAdornment, TextField } from '@mui/material';
+// icons
+import ClearIcon from '@mui/icons-material/Clear';
+import MenuIcon from '@mui/icons-material/Menu';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { Cable } from '@jbrowse/core/ui/Icons';
+// other
+import JBrowseMenu from '@jbrowse/core/ui/Menu';
+import { getSession, isSessionModelWithWidgets, isSessionModelWithConnections, isSessionWithAddTracks, } from '@jbrowse/core/util';
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { observer } from 'mobx-react';
+import { getEnv } from 'mobx-state-tree';
+// lazy components
+const CloseConnectionDialog = lazy(() => import('./CloseConnectionDialog'));
+const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'));
+const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'));
+const ToggleConnectionsDialog = lazy(() => import('./ToggleConnectionsDialog'));
+const useStyles = makeStyles()(theme => ({
+    searchBox: {
+        margin: theme.spacing(2),
+    },
+    menuIcon: {
+        marginRight: theme.spacing(1),
+        marginBottom: 0,
+    },
+}));
+function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, setAssemblyIdx, assemblyIdx, }) {
+    const { classes } = useStyles();
+    const session = getSession(model);
+    const [connectionEl, setConnectionEl] = useState();
+    const [selectionEl, setSelectionEl] = useState();
+    const [menuEl, setMenuEl] = useState();
+    const [modalInfo, setModalInfo] = useState();
+    const [deleteDlgDetails, setDeleteDlgDetails] = useState();
+    const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
+    const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
+    const { assemblyNames } = model;
+    const assemblyName = assemblyNames[assemblyIdx];
+    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),
+        });
+    }
+    const assemblyMenuItems = assemblyNames.length > 1
+        ? [
+            {
+                label: 'Select assembly...',
+                subMenu: assemblyNames.map((name, idx) => ({
+                    label: name,
+                    onClick: () => setAssemblyIdx(idx),
+                })),
+            },
+        ]
+        : [];
+    const menuItems = [
+        {
+            label: 'Add track...',
+            onClick: () => {
+                if (isSessionModelWithWidgets(session)) {
+                    session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                        view: model.view.id,
+                    }));
+                }
+            },
+        },
+        ...assemblyMenuItems,
+    ];
+    const items = getEnv(model).pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems');
+    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' } },
+            isSessionWithAddTracks(session) && (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setMenuEl(event.currentTarget) },
+                React.createElement(MenuIcon, null))),
+            session.makeConnection && (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setConnectionEl(event.currentTarget) },
+                React.createElement(Cable, null))),
+            model.selection.length ? (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setSelectionEl(event.currentTarget) },
+                React.createElement(Badge, { badgeContent: model.selection.length, color: "primary" },
+                    React.createElement(ShoppingCartIcon, null)))) : null,
+            React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: model.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(JBrowseMenu, { anchorEl: connectionEl, open: Boolean(connectionEl), onMenuItemClick: (_, callback) => {
+                callback();
+                setConnectionEl(undefined);
+            }, onClose: () => setConnectionEl(undefined), menuItems: connectionMenuItems }),
+        React.createElement(JBrowseMenu, { anchorEl: menuEl, open: Boolean(menuEl), onMenuItemClick: (_, callback) => {
+                callback();
+                setMenuEl(undefined);
+            }, onClose: () => setMenuEl(undefined), menuItems: menuItems }),
+        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) }
+                        : {}),
+                })),
+            ] }),
+        React.createElement(Suspense, { fallback: React.createElement("div", null) },
+            modalInfo ? (React.createElement(CloseConnectionDialog, { modalInfo: modalInfo, setModalInfo: setModalInfo })) : null,
+            deleteDlgDetails ? (React.createElement(DeleteConnectionDialog, { handleClose: () => setDeleteDlgDetails(undefined), deleteDialogDetails: deleteDlgDetails, session: session })) : null,
+            connectionManagerOpen ? (React.createElement(ManageConnectionsDialog, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
+            connectionToggleOpen ? (React.createElement(ToggleConnectionsDialog, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection, assemblyName: assemblyName })) : null)));
+}
+export default observer(HierarchicalTrackSelectorHeader);
+//# sourceMappingURL=Header.js.map

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

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

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -1,122 +1,32 @@
-import React, { Suspense, lazy, useCallback, useMemo, useState, useRef, useEffect, } from 'react';
-import { Checkbox, Fab, FormControlLabel, IconButton, InputAdornment, Menu, MenuItem, TextField, Tooltip, Typography, } from '@mui/material';
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { Fab, Menu, MenuItem } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 // icons
-import ClearIcon from '@mui/icons-material/Clear';
 import AddIcon from '@mui/icons-material/Add';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import MenuIcon from '@mui/icons-material/Menu';
-import MoreIcon from '@mui/icons-material/MoreHoriz';
-import { Cable } from '@jbrowse/core/ui/Icons';
 // other
 import AutoSizer from 'react-virtualized-auto-sizer';
-import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { getSession, isSessionModelWithWidgets, isSessionModelWithConnections, isSessionWithAddTracks, } from '@jbrowse/core/util';
-import { readConfObject, } from '@jbrowse/core/configuration';
 import { observer } from 'mobx-react';
 import { VariableSizeTree } from 'react-vtree';
-// lazy components
-const CloseConnectionDialog = lazy(() => import('./CloseConnectionDialog'));
-const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'));
-const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'));
-const ToggleConnectionsDialog = lazy(() => import('./ToggleConnectionsDialog'));
-const useStyles = makeStyles()(theme => {
-    var _a, _b;
-    return ({
-        searchBox: {
-            margin: theme.spacing(2),
-        },
-        menuIcon: {
-            marginRight: theme.spacing(1),
-            marginBottom: 0,
-        },
-        fab: {
-            position: 'absolute',
-            bottom: theme.spacing(6),
-            right: theme.spacing(6),
-        },
-        compactCheckbox: {
-            padding: 0,
-        },
-        checkboxLabel: {
-            marginRight: 0,
-            '&:hover': {
-                backgroundColor: '#eee',
-            },
-        },
-        // 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: {
-            // @ts-ignore
-            background: (_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.main,
-            // @ts-ignore
-            color: (_b = theme.palette.tertiary) === null || _b === void 0 ? void 0 : _b.contrastText,
-            width: '100%',
-            display: 'flex',
-            paddingLeft: 5,
-        },
-        // margin:auto 0 to center text vertically
-        accordionText: {
-            margin: 'auto 0',
-        },
-    });
-});
-// An individual node in the track selector. Note: manually sets cursor:
-// pointer improves usability for what can be clicked
-function Node(props) {
-    const { data, isOpen, style, setOpen } = props;
-    const { isLeaf, nestingLevel, checked, id, name, onChange, toggleCollapse, conf, onMoreInfo, drawerPosition, } = data;
-    const { classes } = useStyles();
-    const width = 10;
-    const marginLeft = nestingLevel * width + (isLeaf ? width : 0);
-    const unsupported = (name === null || name === void 0 ? void 0 : name.endsWith('(Unsupported)')) || (name === null || name === void 0 ? void 0 : name.endsWith('(Unknown)'));
-    const description = (conf && readConfObject(conf, ['description'])) || '';
-    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, onClick: () => {
-                toggleCollapse(id);
-                setOpen(!isOpen);
-            }, style: {
-                marginLeft,
-                whiteSpace: 'nowrap',
-                width: '100%',
-            } },
-            React.createElement("div", { className: !isLeaf ? classes.accordionColor : undefined }, !isLeaf ? (React.createElement("div", { className: classes.accordionText },
-                React.createElement(Typography, null,
-                    isOpen ? React.createElement(ArrowDropDownIcon, null) : React.createElement(ArrowRightIcon, null),
-                    name))) : (React.createElement(React.Fragment, null,
-                React.createElement(Tooltip, { title: description, placement: drawerPosition === 'left' ? 'right' : 'left' },
-                    React.createElement(FormControlLabel, { className: classes.checkboxLabel, control: React.createElement(Checkbox, { className: classes.compactCheckbox, checked: checked, onChange: () => onChange(id), color: "primary", disabled: unsupported, inputProps: {
-                                // @ts-ignore
-                                'data-testid': `htsTrackEntry-${id}`,
-                            } }), label: name })),
-                React.createElement(IconButton, { onClick: e => onMoreInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, color: "secondary", "data-testid": `htsTrackEntryMenu-${id}` },
-                    React.createElement(MoreIcon, null))))))));
-}
-function getNodeData(node, nestingLevel, extra) {
+import Header from './Header';
+import Node from './Node';
+const useStyles = makeStyles()(theme => ({
+    fab: {
+        position: 'absolute',
+        bottom: theme.spacing(6),
+        right: theme.spacing(6),
+    },
+}));
+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,
         },
@@ -128,34 +38,32 @@ function getNodeData(node, nestingLevel, extra) {
 // in jbrowse-web the toolbar is position="sticky" which means the autosizer
 // includes the height of the toolbar, so we subtract the given offsets
 const HierarchicalTree = observer(({ height, tree, model, }) => {
-    var _a;
-    const { filterText, view } = model;
+    const { filterText, selection, view } = model;
     const treeRef = useRef(null);
-    const [info, setMoreInfo] = useState();
     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),
-        onMoreInfo: setMoreInfo,
+        tree,
+        model,
         drawerPosition,
-    }), [view, 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);
+            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);
+                yield getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj);
             }
         }
-    }, [tree, extra]);
-    const conf = info === null || info === void 0 ? void 0 : info.conf;
-    const menuItems = (conf && ((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, conf))) || [];
+    }, [tree, extra, obj]);
     useEffect(() => {
         // @ts-ignore
         treeRef.current.recomputeTree({
@@ -164,11 +72,7 @@ const HierarchicalTree = observer(({ height, tree, model, }) => {
         });
     }, [tree, filterText]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height }, Node),
-        React.createElement(JBrowseMenu, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: menuItems, onMenuItemClick: (_event, callback) => {
-                callback();
-                setMoreInfo(undefined);
-            }, open: Boolean(info), onClose: () => setMoreInfo(undefined) })));
+        React.createElement(VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height }, Node)));
 });
 // Don't use autosizer in jest and instead hardcode a height, otherwise fails
 // jest tests
@@ -210,116 +114,13 @@ const HierarchicalTrackSelectorContainer = observer(({ model, toolbarHeight, ove
                         }
                     } }, "Add track")) : null))) : null));
 });
-const HierarchicalTrackSelectorHeader = observer(({ model, setHeaderHeight, setAssemblyIdx, assemblyIdx, }) => {
-    const { classes } = useStyles();
-    const session = getSession(model);
-    const [connectionAnchorEl, setConnectionAnchorEl] = useState();
-    const [menuAnchorEl, setMenuAnchorEl] = useState();
-    const [modalInfo, setModalInfo] = useState();
-    const [deleteDialogDetails, setDeleteDialogDetails] = useState();
-    const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
-    const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
-    const { assemblyNames } = model;
-    const assemblyName = assemblyNames[assemblyIdx];
-    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) {
-            setDeleteDialogDetails({ name, connectionConf });
-        }
-    }
-    const connectionMenuItems = [
-        {
-            label: 'Turn on/off connections...',
-            onClick: () => setConnectionToggleOpen(true),
-        },
-    ];
-    if (isSessionModelWithConnections(session)) {
-        connectionMenuItems.unshift({
-            label: 'Add connection',
-            onClick: () => {
-                if (isSessionModelWithWidgets(session)) {
-                    const widget = session.addWidget('AddConnectionWidget', 'addConnectionWidget');
-                    session.showWidget(widget);
-                }
-            },
-        });
-        connectionMenuItems.push({
-            label: 'Delete connections...',
-            onClick: () => setConnectionManagerOpen(true),
-        });
-    }
-    const assemblyMenuItems = assemblyNames.length > 1
-        ? [
-            {
-                label: 'Select assembly...',
-                subMenu: assemblyNames.map((name, idx) => ({
-                    label: name,
-                    onClick: () => setAssemblyIdx(idx),
-                })),
-            },
-        ]
-        : [];
-    const menuItems = [
-        {
-            label: 'Add track...',
-            onClick: () => {
-                if (isSessionModelWithWidgets(session)) {
-                    const widget = session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                        view: model.view.id,
-                    });
-                    session.showWidget(widget);
-                }
-            },
-        },
-        ...assemblyMenuItems,
-    ];
-    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' } },
-            isSessionWithAddTracks(session) && (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setMenuAnchorEl(event.currentTarget) },
-                React.createElement(MenuIcon, null))),
-            session.makeConnection && (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setConnectionAnchorEl(event.currentTarget) },
-                React.createElement(Cable, null))),
-            React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: model.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(JBrowseMenu, { anchorEl: connectionAnchorEl, open: Boolean(connectionAnchorEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setConnectionAnchorEl(undefined);
-            }, onClose: () => setConnectionAnchorEl(undefined), menuItems: connectionMenuItems }),
-        React.createElement(JBrowseMenu, { anchorEl: menuAnchorEl, open: Boolean(menuAnchorEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setMenuAnchorEl(undefined);
-            }, onClose: () => setMenuAnchorEl(undefined), menuItems: menuItems }),
-        React.createElement(Suspense, { fallback: React.createElement("div", null) },
-            modalInfo ? (React.createElement(CloseConnectionDialog, { modalInfo: modalInfo, setModalInfo: setModalInfo })) : deleteDialogDetails ? (React.createElement(DeleteConnectionDialog, { handleClose: () => setDeleteDialogDetails(undefined), deleteDialogDetails: deleteDialogDetails, session: session })) : null,
-            connectionManagerOpen ? (React.createElement(ManageConnectionsDialog, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
-            connectionToggleOpen ? (React.createElement(ToggleConnectionsDialog, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection, assemblyName: assemblyName })) : null)));
-});
 const HierarchicalTrackSelector = observer(({ model, toolbarHeight = 0, }) => {
     const [assemblyIdx, setAssemblyIdx] = useState(0);
     const [headerHeight, setHeaderHeight] = useState(0);
     const { assemblyNames } = model;
     const assemblyName = assemblyNames[assemblyIdx];
     return assemblyName ? (React.createElement(React.Fragment, null,
-        React.createElement(HierarchicalTrackSelectorHeader, { model: model, setHeaderHeight: setHeaderHeight, setAssemblyIdx: setAssemblyIdx, assemblyIdx: assemblyIdx }),
+        React.createElement(Header, { model: model, setHeaderHeight: setHeaderHeight, setAssemblyIdx: setAssemblyIdx, assemblyIdx: assemblyIdx }),
         React.createElement(AutoSizedHierarchicalTree, { tree: model.hierarchy(assemblyName), model: model, offset: toolbarHeight + headerHeight }))) : null;
 });
 export default HierarchicalTrackSelectorContainer;