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

package/esm/ui/App/TiledViewsContainer.js

@@ -1,366 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { createElementId } from '@jbrowse/core/util/types/mst';
-import { useTheme } from '@mui/material';
-import { DockviewReact } from 'dockview-react';
-import { autorun } from 'mobx';
-import { observer } from 'mobx-react';
-import { DockviewContext, clearPendingMoveAction, peekPendingMoveAction, } from "./DockviewContext.js";
-import DockviewLeftHeaderActions from "./DockviewLeftHeaderActions.js";
-import DockviewRightHeaderActions from "./DockviewRightHeaderActions.js";
-import JBrowseViewPanel from "./JBrowseViewPanel.js";
-import JBrowseViewTab from "./JBrowseViewTab.js";
-import { cleanLayoutForStorage, createPanelConfig, updatePanelParams, } from "./dockviewUtils.js";
-import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
-const useStyles = makeStyles()(() => ({
-    container: {
-        height: '100%',
-        width: '100%',
-        gridRow: 'components',
-    },
-}));
-function getPanelPosition(group, direction) {
-    if (!group) {
-        return undefined;
-    }
-    if (direction) {
-        return { referenceGroup: group, direction };
-    }
-    return { referenceGroup: group };
-}
-const components = {
-    jbrowseView: JBrowseViewPanel,
-};
-const tabComponents = {
-    jbrowseTab: JBrowseViewTab,
-};
-const TiledViewsContainer = observer(function TiledViewsContainer({ session, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
-    const [api, setApi] = useState(null);
-    const trackedViewIdsRef = useRef(new Set());
-    const rearrangingRef = useRef(false);
-    const sessionRef = useRef(session);
-    sessionRef.current = session;
-    const rearrangePanels = useCallback((arrange) => {
-        if (!api) {
-            return;
-        }
-        rearrangingRef.current = true;
-        try {
-            arrange(api);
-        }
-        finally {
-            rearrangingRef.current = false;
-        }
-    }, [api]);
-    const addEmptyTab = useCallback((targetGroup) => {
-        if (!api) {
-            return;
-        }
-        const panelId = `panel-${createElementId()}`;
-        const group = targetGroup ?? api.activeGroup;
-        api.addPanel({
-            ...createPanelConfig(panelId, session, 'New Tab'),
-            position: getPanelPosition(group),
-        });
-        if (isSessionWithDockviewLayout(session)) {
-            session.setActivePanelId(panelId);
-        }
-    }, [api, session]);
-    const moveViewToPanel = useCallback((viewId, direction) => {
-        if (!api || !isSessionWithDockviewLayout(session)) {
-            return;
-        }
-        session.removeViewFromPanel(viewId);
-        const panelId = `panel-${createElementId()}`;
-        api.addPanel({
-            ...createPanelConfig(panelId, session, 'New Tab'),
-            position: getPanelPosition(api.activeGroup, direction),
-        });
-        session.assignViewToPanel(panelId, viewId);
-        session.setActivePanelId(panelId);
-    }, [api, session]);
-    const moveViewToNewTab = useCallback((viewId) => {
-        moveViewToPanel(viewId);
-    }, [moveViewToPanel]);
-    const moveViewToSplitRight = useCallback((viewId) => {
-        moveViewToPanel(viewId, 'right');
-    }, [moveViewToPanel]);
-    const contextValue = useMemo(() => ({
-        api,
-        rearrangePanels,
-        addEmptyTab,
-        moveViewToNewTab,
-        moveViewToSplitRight,
-    }), [api, rearrangePanels, addEmptyTab, moveViewToNewTab, moveViewToSplitRight]);
-    const createInitialPanels = useCallback((dockviewApi) => {
-        const session = sessionRef.current;
-        const pendingAction = peekPendingMoveAction();
-        const initLayout = isSessionWithDockviewLayout(session)
-            ? session.init
-            : undefined;
-        if (initLayout && isSessionWithDockviewLayout(session)) {
-            trackedViewIdsRef.current.clear();
-            let firstPanelId;
-            const groupSizes = [];
-            function processNode(node, referenceGroup, direction) {
-                if (!node) {
-                    return undefined;
-                }
-                if (node.viewIds !== undefined) {
-                    const panelId = `panel-${createElementId()}`;
-                    if (!firstPanelId) {
-                        firstPanelId = panelId;
-                    }
-                    const position = referenceGroup && direction
-                        ? { referenceGroup, direction }
-                        : referenceGroup
-                            ? { referenceGroup }
-                            : undefined;
-                    dockviewApi.addPanel({
-                        ...createPanelConfig(panelId, session, 'Tab'),
-                        position,
-                    });
-                    for (const viewId of node.viewIds) {
-                        if (isSessionWithDockviewLayout(session)) {
-                            session.assignViewToPanel(panelId, viewId);
-                        }
-                        trackedViewIdsRef.current.add(viewId);
-                    }
-                    const group = dockviewApi.getPanel(panelId)?.group;
-                    if (group && node.size !== undefined) {
-                        groupSizes.push({ group, size: node.size });
-                    }
-                    return group;
-                }
-                if (node.children && node.children.length > 0) {
-                    const dockviewDirection = node.direction === 'horizontal' ? 'right' : 'below';
-                    let currentGroup = referenceGroup;
-                    for (let i = 0; i < node.children.length; i++) {
-                        const child = node.children[i];
-                        const childDirection = i === 0 ? direction : dockviewDirection;
-                        const childRef = i === 0 ? referenceGroup : currentGroup;
-                        const newGroup = processNode(child, childRef, childDirection);
-                        if (newGroup) {
-                            currentGroup = newGroup;
-                        }
-                    }
-                    return currentGroup;
-                }
-                return undefined;
-            }
-            processNode(initLayout, undefined, undefined);
-            if (groupSizes.length >= 2 &&
-                initLayout.direction &&
-                groupSizes.length === initLayout.children?.length) {
-                const direction = initLayout.direction;
-                requestAnimationFrame(() => {
-                    const totalSize = groupSizes.reduce((sum, g) => sum + g.size, 0);
-                    if (totalSize > 0) {
-                        if (direction === 'horizontal') {
-                            const containerWidth = dockviewApi.width;
-                            if (containerWidth > 0) {
-                                for (const { group, size } of groupSizes) {
-                                    const width = Math.round(containerWidth * (size / totalSize));
-                                    group.api.setSize({ width });
-                                }
-                            }
-                        }
-                        else {
-                            const containerHeight = dockviewApi.height;
-                            if (containerHeight > 0) {
-                                for (const { group, size } of groupSizes) {
-                                    const height = Math.round(containerHeight * (size / totalSize));
-                                    group.api.setSize({ height });
-                                }
-                            }
-                        }
-                    }
-                });
-            }
-            session.setInit(undefined);
-            if (firstPanelId) {
-                session.setActivePanelId(firstPanelId);
-                dockviewApi.getPanel(firstPanelId)?.api.setActive();
-            }
-            return;
-        }
-        if (isSessionWithDockviewLayout(session)) {
-            for (const panelId of session.panelViewAssignments.keys()) {
-                session.removePanel(panelId);
-            }
-            session.setDockviewLayout(undefined);
-        }
-        trackedViewIdsRef.current.clear();
-        const pendingViewExists = pendingAction && session.views.some(v => v.id === pendingAction.viewId);
-        if (pendingViewExists && isSessionWithDockviewLayout(session)) {
-            const { type, viewId: pendingViewId } = pendingAction;
-            const otherViewIds = session.views
-                .map(v => v.id)
-                .filter(id => id !== pendingViewId);
-            if (otherViewIds.length > 0) {
-                const firstPanelId = `panel-${createElementId()}`;
-                dockviewApi.addPanel(createPanelConfig(firstPanelId, session));
-                for (const viewId of otherViewIds) {
-                    session.assignViewToPanel(firstPanelId, viewId);
-                    trackedViewIdsRef.current.add(viewId);
-                }
-            }
-            const pendingPanelId = `panel-${createElementId()}`;
-            const direction = type === 'splitRight' ? 'right' : undefined;
-            dockviewApi.addPanel({
-                ...createPanelConfig(pendingPanelId, session, 'New Tab'),
-                position: getPanelPosition(dockviewApi.activeGroup, direction),
-            });
-            session.assignViewToPanel(pendingPanelId, pendingViewId);
-            trackedViewIdsRef.current.add(pendingViewId);
-            session.setActivePanelId(pendingPanelId);
-            clearPendingMoveAction();
-        }
-        else {
-            const panelId = `panel-${createElementId()}`;
-            dockviewApi.addPanel(createPanelConfig(panelId, session));
-            if (isSessionWithDockviewLayout(session)) {
-                session.setActivePanelId(panelId);
-            }
-        }
-    }, []);
-    const onReady = useCallback((event) => {
-        setApi(event.api);
-        event.api.onDidActivePanelChange(e => {
-            if (e?.id && isSessionWithDockviewLayout(sessionRef.current)) {
-                sessionRef.current.setActivePanelId(e.id);
-            }
-        });
-        event.api.onDidRemovePanel(e => {
-            if (rearrangingRef.current) {
-                return;
-            }
-            if (isSessionWithDockviewLayout(sessionRef.current)) {
-                const viewIds = sessionRef.current.getViewIdsForPanel(e.id);
-                for (const viewId of viewIds) {
-                    const view = sessionRef.current.views.find(v => v.id === viewId);
-                    if (view) {
-                        sessionRef.current.removeView(view);
-                    }
-                }
-                sessionRef.current.removePanel(e.id);
-            }
-        });
-        event.api.onDidLayoutChange(() => {
-            if (!rearrangingRef.current &&
-                isSessionWithDockviewLayout(sessionRef.current)) {
-                sessionRef.current.setDockviewLayout(cleanLayoutForStorage(event.api.toJSON()));
-            }
-        });
-        const hasPendingAction = peekPendingMoveAction() !== null;
-        const dockviewSession = isSessionWithDockviewLayout(sessionRef.current)
-            ? sessionRef.current
-            : null;
-        const savedLayout = !hasPendingAction && dockviewSession?.dockviewLayout;
-        if (savedLayout) {
-            try {
-                rearrangingRef.current = true;
-                event.api.fromJSON(savedLayout);
-                updatePanelParams(event.api, dockviewSession);
-                for (const viewIds of dockviewSession.panelViewAssignments.values()) {
-                    for (const viewId of viewIds) {
-                        trackedViewIdsRef.current.add(viewId);
-                    }
-                }
-                if (event.api.panels.length === 0) {
-                    throw new Error('No panels after fromJSON restore');
-                }
-            }
-            catch (e) {
-                console.error('Failed to restore dockview layout:', e);
-                createInitialPanels(event.api);
-            }
-            finally {
-                rearrangingRef.current = false;
-            }
-        }
-        else {
-            createInitialPanels(event.api);
-        }
-    }, [createInitialPanels]);
-    useEffect(() => {
-        const dispose = autorun(() => {
-            if (!api) {
-                return;
-            }
-            const { views } = session;
-            const currentViewIds = new Set(views.map(v => v.id));
-            const trackedIds = trackedViewIdsRef.current;
-            for (const view of views) {
-                if (!trackedIds.has(view.id)) {
-                    trackedIds.add(view.id);
-                    if (isSessionWithDockviewLayout(session)) {
-                        let activePanelId = session.activePanelId;
-                        if (!activePanelId || !api.getPanel(activePanelId)) {
-                            const firstPanel = api.panels[0];
-                            if (firstPanel) {
-                                activePanelId = firstPanel.id;
-                            }
-                            else {
-                                activePanelId = `panel-${createElementId()}`;
-                                api.addPanel(createPanelConfig(activePanelId, session));
-                            }
-                            session.setActivePanelId(activePanelId);
-                        }
-                        session.assignViewToPanel(activePanelId, view.id);
-                    }
-                }
-            }
-            for (const id of trackedIds) {
-                if (!currentViewIds.has(id)) {
-                    trackedIds.delete(id);
-                    if (isSessionWithDockviewLayout(session)) {
-                        session.removeViewFromPanel(id);
-                    }
-                }
-            }
-        });
-        return dispose;
-    }, [session, api]);
-    useEffect(() => {
-        if (!api || !isSessionWithDockviewLayout(session)) {
-            return;
-        }
-        const dispose = autorun(() => {
-            const { dockviewLayout } = session;
-            if (!dockviewLayout || rearrangingRef.current) {
-                return;
-            }
-            const currentLayout = cleanLayoutForStorage(api.toJSON());
-            if (JSON.stringify(currentLayout) === JSON.stringify(dockviewLayout)) {
-                return;
-            }
-            rearrangingRef.current = true;
-            try {
-                api.fromJSON(dockviewLayout);
-                updatePanelParams(api, sessionRef.current);
-                trackedViewIdsRef.current.clear();
-                for (const viewIds of session.panelViewAssignments.values()) {
-                    for (const viewId of viewIds) {
-                        trackedViewIdsRef.current.add(viewId);
-                    }
-                }
-            }
-            catch (e) {
-                console.error('Failed to restore dockview layout from undo:', e);
-            }
-            finally {
-                rearrangingRef.current = false;
-            }
-        });
-        return dispose;
-    }, [session, api]);
-    const themeClass = theme.palette.mode === 'dark'
-        ? 'dockview-theme-dark'
-        : 'dockview-theme-light';
-    return (_jsx(DockviewContext.Provider, { value: contextValue, children: _jsx("div", { className: `${classes.container} ${themeClass}`, children: _jsx(DockviewReact, { components: components, tabComponents: tabComponents, leftHeaderActionsComponent: DockviewLeftHeaderActions, rightHeaderActionsComponent: DockviewRightHeaderActions, onReady: onReady }) }) }));
-});
-export default TiledViewsContainer;

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

@@ -1,46 +0,0 @@
-import type { DockviewSessionType } from './types.ts';
-import type { AbstractViewModel } from '@jbrowse/core/util';
-import type { DockviewApi } from 'dockview-react';
-export declare function getViewsForPanel(panelId: string, session: DockviewSessionType | undefined): AbstractViewModel[];
-export declare function createPanelConfig(panelId: string, session: DockviewSessionType, title?: string): {
-    id: string;
-    component: "jbrowseView";
-    tabComponent: "jbrowseTab";
-    title: string;
-    params: {
-        panelId: string;
-        session: DockviewSessionType;
-    };
-};
-export declare function cleanLayoutForStorage(layout: ReturnType<DockviewApi['toJSON']>): {
-    panels: {
-        [k: string]: {
-            params: {};
-            id: string;
-            contentComponent?: string;
-            tabComponent?: string;
-            title?: string;
-            renderer?: import("dockview-core").DockviewPanelRenderer;
-            minimumWidth?: number;
-            minimumHeight?: number;
-            maximumWidth?: number;
-            maximumHeight?: number;
-        };
-    };
-    grid: {
-        root: import("dockview-core").SerializedGridObject<import("dockview-core/dist/cjs/dockview/dockviewGroupPanelModel").GroupPanelViewState>;
-        height: number;
-        width: number;
-        orientation: import("dockview-core").Orientation;
-    };
-    activeGroup?: string;
-    floatingGroups?: import("dockview-core").SerializedFloatingGroup[];
-    popoutGroups?: import("dockview-core").SerializedPopoutGroup[];
-};
-export declare function updatePanelParams(api: DockviewApi, session: DockviewSessionType): void;
-export declare function rearrangePanelsWithDirection(api: DockviewApi, getPosition: (idx: number, panelStates: {
-    id: string;
-}[]) => {
-    referencePanel: string;
-    direction: 'right' | 'below' | 'within';
-} | undefined): void;

package/esm/ui/App/dockviewUtils.js

@@ -1,55 +0,0 @@
-import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
-export function getViewsForPanel(panelId, session) {
-    if (!session || !isSessionWithDockviewLayout(session)) {
-        return [];
-    }
-    const viewIds = session.getViewIdsForPanel(panelId);
-    return [...viewIds]
-        .map(id => session.views.find(v => v.id === id))
-        .filter((v) => v !== undefined);
-}
-export function createPanelConfig(panelId, session, title = 'Main') {
-    return {
-        id: panelId,
-        component: 'jbrowseView',
-        tabComponent: 'jbrowseTab',
-        title,
-        params: { panelId, session },
-    };
-}
-export function cleanLayoutForStorage(layout) {
-    return {
-        ...layout,
-        panels: Object.fromEntries(Object.entries(layout.panels).map(([id, panel]) => [
-            id,
-            { ...panel, params: {} },
-        ])),
-    };
-}
-export function updatePanelParams(api, session) {
-    for (const panel of api.panels) {
-        panel.update({ params: { panelId: panel.id, session } });
-    }
-}
-export function rearrangePanelsWithDirection(api, getPosition) {
-    const panels = api.panels;
-    if (panels.length <= 1) {
-        return;
-    }
-    const panelStates = panels.map(p => ({
-        id: p.id,
-        component: 'jbrowseView',
-        tabComponent: 'jbrowseTab',
-        title: p.title,
-        params: p.params,
-    }));
-    for (const p of panels) {
-        api.removePanel(p);
-    }
-    for (const [idx, state] of panelStates.entries()) {
-        api.addPanel({
-            ...state,
-            position: getPosition(idx, panelStates),
-        });
-    }
-}