@jbrowse/app-core 4.2.1 → 5.0.0-beta.1

package/esm/ui/App/DockviewRightHeaderActions.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import CloseIcon from '@mui/icons-material/Close';
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import TableRowsIcon from '@mui/icons-material/TableRows';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import { IconButton, Tooltip } from '@mui/material';
-import { useDockview } from "./DockviewContext.js";
-import { rearrangePanelsWithDirection } from "./dockviewUtils.js";
-const useStyles = makeStyles()(theme => ({
-    headerActions: {
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%',
-    },
-    headerButton: {
-        padding: 4,
-        color: theme.palette.primary.contrastText,
-    },
-    headerIcon: {
-        fontSize: 16,
-    },
-}));
-export default function DockviewRightHeaderActions({ containerApi, group, }) {
-    const { classes } = useStyles();
-    const { rearrangePanels } = useDockview();
-    const tileHorizontally = () => {
-        rearrangePanels(api => {
-            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
-                ? undefined
-                : { referencePanel: states[0].id, direction: 'right' });
-        });
-    };
-    const tileVertically = () => {
-        rearrangePanels(api => {
-            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
-                ? undefined
-                : { referencePanel: states[0].id, direction: 'below' });
-        });
-    };
-    const tileGrid = () => {
-        rearrangePanels(api => {
-            const panels = api.panels;
-            if (panels.length <= 1) {
-                return;
-            }
-            const cols = Math.ceil(Math.sqrt(panels.length));
-            rearrangePanelsWithDirection(api, (idx, states) => {
-                if (idx === 0) {
-                    return undefined;
-                }
-                const col = idx % cols;
-                const row = Math.floor(idx / cols);
-                if (col === 0) {
-                    const refIdx = (row - 1) * cols;
-                    return { referencePanel: states[refIdx].id, direction: 'below' };
-                }
-                return { referencePanel: states[idx - 1].id, direction: 'right' };
-            });
-        });
-    };
-    const stackAll = () => {
-        rearrangePanels(api => {
-            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
-                ? undefined
-                : { referencePanel: states[0].id, direction: 'within' });
-        });
-    };
-    const showLayoutOptions = containerApi.panels.length > 1;
-    const showCloseGroup = containerApi.groups.length > 1;
-    return (_jsxs("div", { className: classes.headerActions, children: [showLayoutOptions && (_jsx(CascadingMenuButton, { menuItems: [
-                    {
-                        label: 'Global: change layout into set of tabs',
-                        icon: DynamicFeedIcon,
-                        onClick: stackAll,
-                    },
-                    {
-                        label: 'Global: tile horizontally',
-                        icon: ViewColumnIcon,
-                        onClick: tileHorizontally,
-                    },
-                    {
-                        label: 'Global: tile vertically',
-                        icon: TableRowsIcon,
-                        onClick: tileVertically,
-                    },
-                    {
-                        label: 'Global: tile grid',
-                        icon: ViewModuleIcon,
-                        onClick: tileGrid,
-                    },
-                ], size: "small", className: classes.headerButton, children: _jsx(MoreHorizIcon, { className: classes.headerIcon }) })), showCloseGroup && (_jsx(Tooltip, { title: "Close group", children: _jsx(IconButton, { size: "small", onClick: () => {
-                        for (const panel of group.panels) {
-                            panel.api.close();
-                        }
-                    }, className: classes.headerButton, children: _jsx(CloseIcon, { className: classes.headerIcon }) }) }))] }));
-}

package/esm/ui/App/DrawerWidgetSelector.d.ts

@@ -1,5 +0,0 @@
-import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerWidgetSelector: ({ session, }: {
-    session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DrawerWidgetSelector;

package/esm/ui/App/DrawerWidgetSelector.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getEnv } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { FormControl, IconButton, MenuItem, Select, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    formControl: {
-        margin: 0,
-    },
-    drawerSelect: {
-        margin: 0,
-        color: theme.palette.secondary.contrastText,
-    },
-    dropDownIcon: {
-        color: theme.palette.secondary.contrastText,
-    },
-}));
-const DrawerWidgetSelector = observer(function DrawerWidgetSelector({ session, }) {
-    const { visibleWidget, activeWidgets } = session;
-    const { classes } = useStyles();
-    const { pluginManager } = getEnv(session);
-    return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { value: visibleWidget?.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
-                const widget = session.activeWidgets.get(widgetId);
-                if (!widget) {
-                    return (_jsx(Typography, { variant: "h6", color: "inherit", children: "Unknown widget" }));
-                }
-                const widgetType = pluginManager.getWidgetType(widget.type);
-                const { HeadingComponent, heading } = widgetType;
-                return HeadingComponent ? (_jsx(HeadingComponent, { model: widget })) : (_jsx(Typography, { variant: "h6", color: "inherit", children: heading }));
-            }, onChange: e => {
-                const w = session.activeWidgets.get(e.target.value);
-                if (w) {
-                    session.showWidget(w);
-                }
-                else {
-                    session.notify(`Widget not found ${e.target.value}`, 'warning');
-                }
-            }, children: [...activeWidgets.values()].map(widget => {
-                const widgetType = pluginManager.getWidgetType(widget.type);
-                const { HeadingComponent, heading } = widgetType;
-                return (_jsxs(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, value: widget.id, children: [HeadingComponent ? (_jsx(HeadingComponent, { model: widget })) : (_jsx(Typography, { variant: "h6", color: "inherit", children: heading })), _jsx(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => {
-                                session.hideWidget(widget);
-                            }, children: _jsx(DeleteIcon, {}) })] }, widget.id));
-            }) }) }));
-});
-export default DrawerWidgetSelector;

package/esm/ui/App/JBrowseViewPanel.d.ts

@@ -1,8 +0,0 @@
-import type { DockviewSessionType } from './types.ts';
-import type { IDockviewPanelProps } from 'dockview-react';
-export interface JBrowseViewPanelParams {
-    panelId: string;
-    session?: DockviewSessionType;
-}
-declare const JBrowseViewPanel: ({ params, }: IDockviewPanelProps<JBrowseViewPanelParams>) => import("react/jsx-runtime").JSX.Element;
-export default JBrowseViewPanel;

package/esm/ui/App/JBrowseViewPanel.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { observer } from 'mobx-react';
-import ViewContainer from "./ViewContainer.js";
-import { getViewsForPanel } from "./dockviewUtils.js";
-const ViewLauncher = lazy(() => import("./ViewLauncher.js"));
-const useStyles = makeStyles()(theme => ({
-    container: {
-        height: '100%',
-        overflowY: 'auto',
-        background: theme.palette.background.default,
-    },
-    viewStack: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    spacer: {
-        height: 300,
-    },
-    emptyPanel: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-}));
-const JBrowseViewPanel = observer(function JBrowseViewPanel({ params, }) {
-    const { panelId, session } = params;
-    const { classes } = useStyles();
-    if (!session) {
-        return _jsx("div", { className: classes.container, children: "Loading..." });
-    }
-    const views = getViewsForPanel(panelId, session);
-    if (views.length === 0) {
-        return (_jsx("div", { className: classes.container, children: _jsx("div", { className: classes.emptyPanel, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }) }));
-    }
-    return (_jsx("div", { className: classes.container, children: _jsxs("div", { className: classes.viewStack, children: [views.map(view => (_jsx(ViewContainer, { view: view, session: session }, view.id))), _jsx("div", { className: classes.spacer })] }) }));
-});
-export default JBrowseViewPanel;

package/esm/ui/App/JBrowseViewTab.d.ts

@@ -1,8 +0,0 @@
-import type { DockviewSessionType } from './types.ts';
-import type { IDockviewPanelHeaderProps } from 'dockview-react';
-export interface JBrowseViewPanelParams {
-    panelId: string;
-    session?: DockviewSessionType;
-}
-declare const JBrowseViewTab: ({ params, api, }: IDockviewPanelHeaderProps<JBrowseViewPanelParams>) => import("react/jsx-runtime").JSX.Element;
-export default JBrowseViewTab;

package/esm/ui/App/JBrowseViewTab.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { InputBase, Typography } from '@mui/material';
-import { observer } from 'mobx-react';
-import JBrowseTabMenu from "./JBrowseTabMenu.js";
-import { getViewsForPanel } from "./dockviewUtils.js";
-const useStyles = makeStyles()(theme => ({
-    tabContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%',
-        padding: '0 4px',
-        gap: 4,
-    },
-    tabTitle: {
-        display: 'flex',
-        alignItems: 'center',
-        flex: 1,
-        overflow: 'hidden',
-        minWidth: 0,
-    },
-    tabTitleText: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        fontSize: '0.8rem',
-    },
-    editInput: {
-        fontSize: '0.8rem',
-        padding: '2px 4px',
-        color: 'inherit',
-        backgroundColor: theme.palette.action.selected,
-        borderRadius: theme.shape.borderRadius,
-        flex: 1,
-    },
-}));
-function stopEvent(e) {
-    e.stopPropagation();
-    e.preventDefault();
-}
-function getTabDisplayName(views, session) {
-    if (views.length === 0) {
-        return 'Empty';
-    }
-    if (views.length === 1) {
-        const view = views[0];
-        return (view.displayName ||
-            view.assemblyNames
-                ?.map(r => session.assemblyManager.get(r)?.displayName)
-                .join(',') ||
-            'View');
-    }
-    return `${views.length} views`;
-}
-const JBrowseViewTab = observer(function JBrowseViewTab({ params, api, }) {
-    const { panelId, session } = params;
-    const { classes } = useStyles();
-    const [isEditing, setIsEditing] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [editValue, setEditValue] = useState('');
-    if (!session) {
-        return (_jsx("div", { className: classes.tabContainer, children: _jsx("span", { className: classes.tabTitleText, children: "Loading..." }) }));
-    }
-    const views = getViewsForPanel(panelId, session);
-    const displayValue = getTabDisplayName(views, session);
-    const handleStartEdit = () => {
-        setEditValue(api.title || displayValue);
-        setIsEditing(true);
-    };
-    const handleSave = () => {
-        if (editValue.trim()) {
-            api.setTitle(editValue.trim());
-        }
-        setIsEditing(false);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            handleSave();
-        }
-        else if (e.key === 'Escape') {
-            setIsEditing(false);
-        }
-    };
-    return (_jsx("div", { className: classes.tabContainer, onMouseEnter: () => {
-            setIsHovered(true);
-        }, onMouseLeave: () => {
-            setIsHovered(false);
-        }, children: _jsx("div", { className: classes.tabTitle, children: isEditing ? (_jsx(InputBase, { autoFocus: true, className: classes.editInput, value: editValue, onChange: e => {
-                    setEditValue(e.target.value);
-                }, onFocus: e => {
-                    e.target.select();
-                }, onBlur: handleSave, onKeyDown: handleKeyDown, onClick: stopEvent })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.tabTitleText, variant: "body2", onDoubleClick: handleStartEdit, children: api.title || displayValue }), _jsx(JBrowseTabMenu, { isHovered: isHovered, onRename: handleStartEdit, onClose: () => {
-                            api.close();
-                        } })] })) }) }));
-});
-export default JBrowseViewTab;

package/esm/ui/App/ModalWidget.d.ts

@@ -1,6 +0,0 @@
-import type { SessionWithWidgets } from '@jbrowse/core/util';
-declare const ModalWidget: ({ session, onClose, }: {
-    session: SessionWithWidgets;
-    onClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default ModalWidget;

package/esm/ui/App/ModalWidget.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getEnv } from '@jbrowse/mobx-state-tree';
-import CloseIcon from '@mui/icons-material/Close';
-import { AppBar, IconButton, Paper, Toolbar, Typography } from '@mui/material';
-import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    paper: {
-        overflow: 'auto',
-        minWidth: 800,
-    },
-    closeButton: {
-        position: 'absolute',
-        right: theme.spacing(1),
-        top: theme.spacing(1),
-        color: theme.palette.grey[500],
-    },
-}));
-const DrawerAppBar = observer(function DrawerAppBar({ session, onClose, }) {
-    const { classes } = useStyles();
-    const { visibleWidget } = session;
-    const { pluginManager } = getEnv(session);
-    if (!visibleWidget) {
-        return null;
-    }
-    const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
-    return (_jsxs(AppBar, { position: "static", children: [_jsx(Toolbar, { children: HeadingComponent ? (_jsx(HeadingComponent, { model: visibleWidget })) : (_jsx(Typography, { variant: "h6", children: heading })) }), _jsx(IconButton, { className: classes.closeButton, onClick: onClose, children: _jsx(CloseIcon, {}) })] }));
-});
-const ModalWidget = observer(function ModalWidget({ session, onClose, }) {
-    const { classes } = useStyles();
-    const { visibleWidget } = session;
-    const { pluginManager } = getEnv(session);
-    if (!visibleWidget) {
-        return null;
-    }
-    const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
-    const Component = pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
-        session,
-        model: visibleWidget,
-    });
-    return (_jsx(Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: _jsx(DrawerAppBar, { onClose: onClose, session: session }), children: Component ? (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(Paper, { className: classes.paper, children: _jsx(Component, { model: visibleWidget, session: session, modal: true, overrideDimensions: {
-                        height: (window.innerHeight * 5) / 8,
-                        width: 800,
-                    } }) }) })) : null }));
-});
-export default ModalWidget;

package/esm/ui/App/TiledViewsContainer.d.ts

@@ -1,6 +0,0 @@
-import type { DockviewSessionType } from './types.ts';
-interface Props {
-    session: DockviewSessionType;
-}
-declare const TiledViewsContainer: ({ session, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default TiledViewsContainer;