xtralab 0.14.0 → 0.15.0

package/lib/customPanel/index.d.ts

@@ -0,0 +1,7 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+/**
+ * Registers "Custom Panel", which takes a sidebar tab only while it hosts a
+ * section.
+ */
+declare const plugin: JupyterFrontEndPlugin<void>;
+export default plugin;

package/lib/customPanel/index.js

@@ -0,0 +1,74 @@
+import { IMovableSectionRegistry } from '@jupyterlab/apputils';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { SidePanel, tableRowsIcon } from '@jupyterlab/ui-components';
+import { Signal } from '@lumino/signaling';
+const PLUGIN_ID = 'xtralab:custom-panel';
+const CUSTOM_PANEL_ID = 'xtralab-custom-panel';
+/**
+ * A sidebar panel holding only the sections moved in from other panels.
+ */
+class CustomPanel extends SidePanel {
+    constructor(options) {
+        super();
+        this._sectionCountChanged = new Signal(this);
+        this.id = CUSTOM_PANEL_ID;
+        this.title.icon = tableRowsIcon;
+        this.title.caption = options.trans.__('Custom Panel');
+        this.addClass('jp-xtralab-CustomPanel');
+    }
+    get accordionPanel() {
+        return this.content;
+    }
+    get sections() {
+        return this.content.widgets;
+    }
+    get sectionCountChanged() {
+        return this._sectionCountChanged;
+    }
+    addSection(widget) {
+        this.addWidget(widget);
+        this._sectionCountChanged.emit(this.content.widgets.length);
+    }
+    removeSectionWidget(widget) {
+        if (widget.parent !== this.content) {
+            return;
+        }
+        widget.parent = null;
+        this._sectionCountChanged.emit(this.content.widgets.length);
+    }
+}
+/**
+ * Registers "Custom Panel", which takes a sidebar tab only while it hosts a
+ * section.
+ */
+const plugin = {
+    id: PLUGIN_ID,
+    description: 'A user-assembled sidebar panel hosting sections moved in from other panels; hidden while empty.',
+    autoStart: true,
+    optional: [IMovableSectionRegistry, ITranslator],
+    activate: (app, registry, translator) => {
+        if (!registry) {
+            return;
+        }
+        const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
+        const panel = new CustomPanel({ trans });
+        // Only a user move should switch the sidebar, not the startup restoration.
+        let restored = false;
+        void app.restored.then(() => {
+            restored = true;
+        });
+        panel.sectionCountChanged.connect((_, count) => {
+            if (count > 0 && !panel.parent) {
+                app.shell.add(panel, 'left', { rank: 3 });
+                if (restored) {
+                    app.shell.activateById(panel.id);
+                }
+            }
+            else if (count === 0 && panel.parent) {
+                panel.parent = null;
+            }
+        });
+        registry.registerTarget(PLUGIN_ID, trans.__('Custom Panel'), panel);
+    }
+};
+export default plugin;

package/lib/fileBrowser/commands.js

@@ -418,12 +418,24 @@ export function registerCommands(opts) {
     // point of view. An empty path is the "workspace root" gesture —
     // there is no tree row for the root itself, so the browser is asked
     // to scroll back to the top and clear its selection instead.
+    // The tree is movable, so surface whichever sidebar widget holds it.
+    const activateTreeHost = () => {
+        for (const area of ['left', 'right']) {
+            for (const widget of app.shell.widgets(area)) {
+                if (widget.node.contains(browser.sectionNode)) {
+                    app.shell.activateById(widget.id);
+                    return;
+                }
+            }
+        }
+        app.shell.activateById(FILE_BROWSER_ID);
+    };
     commands.addCommand(CommandIDs.revealPath, {
         label: trans.__('Reveal in File Browser'),
         execute: (args) => {
             var _a;
             const path = (_a = args.path) !== null && _a !== void 0 ? _a : '';
-            app.shell.activateById(FILE_BROWSER_ID);
+            activateTreeHost();
             if (path.length === 0) {
                 browser.scrollToRoot();
             }

package/lib/fileBrowser/contents.d.ts

@@ -10,6 +10,17 @@ export declare const ROOT_LOAD_KEY = "";
  * still be represented in the flat path list.
  */
 export declare function toCanonicalPath(child: Contents.IModel): string;
+/**
+ * Compute the canonical parent path for a canonical path. Returns
+ * {@link ROOT_LOAD_KEY} for top-level entries.
+ */
+export declare function parentOf(canonicalPath: string): string;
+/**
+ * The last segment of a canonical path. Directories keep their trailing
+ * slash, so appending the result to a canonical directory path yields a
+ * canonical path again.
+ */
+export declare function canonicalBasename(canonicalPath: string): string;
 /**
  * Strip the trailing slash that `@pierre/trees` uses for canonical directory
  * paths so the value can be sent to the Jupyter contents API.

package/lib/fileBrowser/contents.js

@@ -12,6 +12,34 @@ export const ROOT_LOAD_KEY = '';
 export function toCanonicalPath(child) {
     return child.type === 'directory' ? `${child.path}${DIR_SUFFIX}` : child.path;
 }
+/**
+ * Compute the canonical parent path for a canonical path. Returns
+ * {@link ROOT_LOAD_KEY} for top-level entries.
+ */
+export function parentOf(canonicalPath) {
+    const trimmed = canonicalPath.endsWith(DIR_SUFFIX)
+        ? canonicalPath.slice(0, -DIR_SUFFIX.length)
+        : canonicalPath;
+    const idx = trimmed.lastIndexOf(DIR_SUFFIX);
+    if (idx < 0) {
+        return ROOT_LOAD_KEY;
+    }
+    return `${trimmed.slice(0, idx)}${DIR_SUFFIX}`;
+}
+/**
+ * The last segment of a canonical path. Directories keep their trailing
+ * slash, so appending the result to a canonical directory path yields a
+ * canonical path again.
+ */
+export function canonicalBasename(canonicalPath) {
+    const isDir = canonicalPath.endsWith(DIR_SUFFIX);
+    const trimmed = isDir
+        ? canonicalPath.slice(0, -DIR_SUFFIX.length)
+        : canonicalPath;
+    const idx = trimmed.lastIndexOf(DIR_SUFFIX);
+    const base = idx < 0 ? trimmed : trimmed.slice(idx + DIR_SUFFIX.length);
+    return isDir ? `${base}${DIR_SUFFIX}` : base;
+}
 /**
  * Strip the trailing slash that `@pierre/trees` uses for canonical directory
  * paths so the value can be sent to the Jupyter contents API.

package/lib/fileBrowser/dragAndDrop.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { FileTree, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
+/**
+ * One tree-model move a drop performs, as canonical paths.
+ */
+export interface IDropMove {
+    from: string;
+    to: string;
+}
+/**
+ * Receives drop outcomes from the `@pierre/trees` drag-and-drop
+ * machinery. Implemented inside the file browser's contents-sync
+ * effect, which owns the load-state and contents-API bookkeeping.
+ */
+export interface ITreeDropHandler {
+    /**
+     * The tree applied the drop to its model: persist the move and
+     * re-key the load-state mirrors.
+     */
+    completeDrop(result: FileTreeDropResult): void;
+    /**
+     * The tree refused the drop (typically a name collision) and left
+     * its model untouched.
+     */
+    failedDrop(error: string, context: FileTreeDropContext): void;
+    /**
+     * A drop on the empty space below the last row: move the dragged
+     * paths to the workspace root.
+     */
+    dropOnRoot(draggedPaths: readonly string[]): void;
+}
+/**
+ * The from→to moves a drop performs: each dragged path keeps its
+ * basename under the target directory. Paths already directly inside
+ * the target are skipped.
+ */
+export declare function computeDropMoves(context: FileTreeDropContext): IDropMove[];
+/**
+ * The moves for a drop of `paths` onto the workspace root.
+ */
+export declare function computeRootDropMoves(paths: readonly string[]): IDropMove[];
+/**
+ * Build the `dragAndDrop` option for `useFileTree`. The tree captures
+ * its options once, so the callbacks delegate through `handlerRef`,
+ * filled by the contents-sync effect. `canDrop` hides the drop
+ * highlight for all-no-op drops, which the library would accept.
+ */
+export declare function createTreeDragAndDropConfig(handlerRef: React.RefObject<ITreeDropHandler | null>): FileTreeDragAndDropConfig;
+interface IRootDropZoneOptions {
+    model: FileTree;
+    handlerRef: React.RefObject<ITreeDropHandler | null>;
+    /**
+     * The light-DOM wrapper around the tree host; composed drag events
+     * bubble out of the shadow root to it.
+     */
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Accept drops on the empty space below the last row as moves to the
+ * workspace root — the tree resolves a drop target only while the
+ * cursor is over a row and silently discards such drops. dragstart
+ * records the dragged paths; a drop whose composed path contains no
+ * row hands them over as a root move.
+ */
+export declare function useRootDropZone(options: IRootDropZoneOptions): void;
+export {};

package/lib/fileBrowser/dragAndDrop.js

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { ROOT_LOAD_KEY, canonicalBasename, parentOf } from './contents';
+/**
+ * The from→to moves a drop performs: each dragged path keeps its
+ * basename under the target directory. Paths already directly inside
+ * the target are skipped.
+ */
+export function computeDropMoves(context) {
+    var _a;
+    const dir = (_a = context.target.directoryPath) !== null && _a !== void 0 ? _a : ROOT_LOAD_KEY;
+    return context.draggedPaths
+        .filter(path => parentOf(path) !== dir)
+        .map(path => ({ from: path, to: `${dir}${canonicalBasename(path)}` }));
+}
+/**
+ * The drop target the tree reports for a move to the workspace root.
+ */
+const ROOT_DROP_TARGET = {
+    directoryPath: null,
+    flattenedSegmentPath: null,
+    hoveredPath: null,
+    kind: 'root'
+};
+/**
+ * The moves for a drop of `paths` onto the workspace root.
+ */
+export function computeRootDropMoves(paths) {
+    return computeDropMoves({ draggedPaths: paths, target: ROOT_DROP_TARGET });
+}
+/**
+ * Build the `dragAndDrop` option for `useFileTree`. The tree captures
+ * its options once, so the callbacks delegate through `handlerRef`,
+ * filled by the contents-sync effect. `canDrop` hides the drop
+ * highlight for all-no-op drops, which the library would accept.
+ */
+export function createTreeDragAndDropConfig(handlerRef) {
+    return {
+        canDrop: context => computeDropMoves(context).length > 0,
+        onDropComplete: result => {
+            var _a;
+            (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.completeDrop(result);
+        },
+        onDropError: (error, context) => {
+            var _a;
+            (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.failedDrop(error, context);
+        }
+    };
+}
+/**
+ * Accept drops on the empty space below the last row as moves to the
+ * workspace root — the tree resolves a drop target only while the
+ * cursor is over a row and silently discards such drops. dragstart
+ * records the dragged paths; a drop whose composed path contains no
+ * row hands them over as a root move.
+ */
+export function useRootDropZone(options) {
+    const { model, handlerRef, wrapperRef } = options;
+    React.useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (wrapper === null) {
+            return;
+        }
+        let draggedPaths = null;
+        const findRow = (event) => {
+            for (const target of event.composedPath()) {
+                if (target instanceof HTMLElement && target.dataset.type === 'item') {
+                    return target;
+                }
+            }
+            return null;
+        };
+        const handleDragStart = (event) => {
+            var _a;
+            draggedPaths = null;
+            // The tree cancels dragstart when it refuses a session, e.g.
+            // while the filter is open.
+            if (event.defaultPrevented) {
+                return;
+            }
+            const path = (_a = findRow(event)) === null || _a === void 0 ? void 0 : _a.dataset.itemPath;
+            if (path === undefined || path.length === 0) {
+                return;
+            }
+            // The selection is the dragged set (the tree selects the pressed
+            // row); entries nested under a dragged folder travel with it.
+            const selection = model.getSelectedPaths();
+            const candidates = selection.includes(path) ? selection : [path];
+            const folders = candidates.filter(c => c.endsWith('/'));
+            draggedPaths = candidates.filter(c => !folders.some(folder => folder !== c && c.startsWith(folder)));
+        };
+        const handleDrop = (event) => {
+            var _a;
+            const paths = draggedPaths;
+            draggedPaths = null;
+            // Drops on a row were already resolved by the tree itself.
+            if (paths === null || findRow(event) !== null) {
+                return;
+            }
+            event.preventDefault();
+            (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.dropOnRoot(paths);
+        };
+        const handleDragEnd = () => {
+            draggedPaths = null;
+        };
+        wrapper.addEventListener('dragstart', handleDragStart);
+        wrapper.addEventListener('drop', handleDrop);
+        window.addEventListener('dragend', handleDragEnd);
+        return () => {
+            wrapper.removeEventListener('dragstart', handleDragStart);
+            wrapper.removeEventListener('drop', handleDrop);
+            window.removeEventListener('dragend', handleDragEnd);
+            draggedPaths = null;
+        };
+    }, [model, handlerRef, wrapperRef]);
+}

package/lib/fileBrowser/fileBrowser.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Contents } from '@jupyterlab/services';
+import { ITranslator } from '@jupyterlab/translation';
 import type { XtralabFileBrowser } from './widget';
 interface IFileBrowserProps {
     contentsManager: Contents.IManager;
     docManager: IDocumentManager;
     onOpenFile?: (serverPath: string) => void;
+    translator?: ITranslator;
     /**
      * The host widget. Selection-change events are pushed up so context-menu
      * commands can react to what the user has selected.