@jlab-enhanced/favorites 3.3.0 → 3.4.0

package/lib/components.js

@@ -2,6 +2,7 @@ import { folderIcon, LabIcon, fileIcon, ReactWidget, UseSignal } from '@jupyterl
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
 import { getFavoritesIcon, getName, getPinnerActionDescription, mergePaths } from './utils';
+import { Drag } from '@lumino/dragdrop';
 /**
  * The parent node class for Favorites content.
  */
@@ -38,6 +39,10 @@ const FILEBROWSER_HEADER_CLASS = 'jp-FileBrowser-header';
  * This icon is overlaid on top of the FileBrowser content via CSS.
  */
 const FAVORITE_BREADCRUMB_ICON_CLASS = 'jp-Favorites-BreadCrumbs-Icon';
+/**
+ * The spacing from the bottom of the FileBrowser to leave when resizing the Favorites container.
+ */
+const BOTTOM_SPACING = 100;
 const FavoriteComponent = (props) => {
     const { favorite, handleClick } = props;
     let [displayName, dirname] = getName(favorite.path);
@@ -85,6 +90,62 @@ export const FavoritesBreadCrumbs = (props) => {
             React.createElement(icon.react, { className: FAVORITE_BREADCRUMB_ICON_CLASS, tag: "span" })));
     }));
 };
+function FavoritesContainer({ visibleFavorites, manager }) {
+    const containerRef = React.useRef(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const cursorDisposableRef = React.useRef(null);
+    const handleMouseDown = () => {
+        setIsResizing(true);
+        cursorDisposableRef.current = Drag.overrideCursor('ns-resize');
+    };
+    const handleMouseMove = React.useCallback((e) => {
+        if (!isResizing) {
+            return;
+        }
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Height of filebrowser widget
+        const parentElement = container.closest('.jp-FileBrowser');
+        const parentRect = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect();
+        if (!parentRect) {
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        const newHeight = e.clientY - rect.top;
+        const maxHeight = parentRect.height - BOTTOM_SPACING;
+        if (newHeight > 24 && newHeight < maxHeight) {
+            container.style.maxHeight = maxHeight + 'px'; // To ensure default max-height of css is overridden
+            container.style.height = newHeight + 'px';
+        }
+    }, [isResizing]);
+    const handleMouseUp = React.useCallback(() => {
+        var _a;
+        setIsResizing(false);
+        (_a = cursorDisposableRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+        cursorDisposableRef.current = null;
+    }, []);
+    React.useEffect(() => {
+        if (isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isResizing, handleMouseMove, handleMouseUp]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = cursorDisposableRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: containerRef, className: FAVORITE_CONTAINER_CLASS }, (visibleFavorites !== null && visibleFavorites !== void 0 ? visibleFavorites : []).map(f => (React.createElement(FavoriteComponent, { key: `favorites-item-${f.path}`, favorite: f, handleClick: manager.handleClick.bind(manager) })))),
+        React.createElement("div", { className: "jp-Favorites-resize-handle", onMouseDown: handleMouseDown })));
+}
 export class FavoritesWidget extends ReactWidget {
     constructor(manager, filebrowser) {
         super();
@@ -101,7 +162,7 @@ export class FavoritesWidget extends ReactWidget {
         return (React.createElement(UseSignal, { signal: this.manager.favoritesChanged, initialSender: this.manager, initialArgs: this.manager.visibleFavorites() }, (manager, visibleFavorites) => (React.createElement("div", null,
             React.createElement(UseSignal, { signal: manager.visibilityChanged, initialSender: manager, initialArgs: manager.isVisible() }, (manager, isVisible) => isVisible && (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: FAVORITE_HEADER_CLASS }, "Favorites"),
-                React.createElement("div", { className: FAVORITE_CONTAINER_CLASS }, (visibleFavorites !== null && visibleFavorites !== void 0 ? visibleFavorites : []).map(f => (React.createElement(FavoriteComponent, { key: `favorites-item-${f.path}`, favorite: f, handleClick: manager.handleClick.bind(manager) })))),
+                React.createElement(FavoritesContainer, { visibleFavorites: visibleFavorites, manager: manager }),
                 React.createElement("div", { className: FILEBROWSER_HEADER_CLASS }, "File Browser"))))))));
     }
 }

package/lib/index.d.ts

@@ -6,5 +6,5 @@ export { IFavorites, FAVORITE_TAG } from './token';
  * Plugin that provides the custom notebook factory with star icons
  */
 export declare const notebookFactoryPlugin: JupyterFrontEndPlugin<NotebookPanel.IContentFactory>;
-declare const _default: (JupyterFrontEndPlugin<IFavorites> | JupyterFrontEndPlugin<NotebookPanel.IContentFactory>)[];
+declare const _default: (JupyterFrontEndPlugin<NotebookPanel.IContentFactory> | JupyterFrontEndPlugin<IFavorites>)[];
 export default _default;

package/lib/index.js

@@ -253,7 +253,7 @@ const favorites = {
                         okLabel: 'Rename',
                         placeholder: 'Display name'
                     });
-                    displayName = result.button.accept ? (_a = result.value) !== null && _a !== void 0 ? _a : '' : '';
+                    displayName = result.button.accept ? ((_a = result.value) !== null && _a !== void 0 ? _a : '') : '';
                 }
                 if (!displayName) {
                     return;
@@ -360,11 +360,28 @@ export const notebookFactoryPlugin = {
     provides: NotebookPanel.IContentFactory,
     requires: [IEditorServices],
     autoStart: true,
-    activate: (app, editorServices) => {
+    activate: async (app, editorServices) => {
+        var _a, _b;
+        let mystFactory;
+        if (app.hasPlugin('jupyterlab-myst:content-factory')) {
+            const mystPlugins = (await import('jupyterlab-myst')).default;
+            const mystPlugin = mystPlugins.filter(plugin => plugin.provides === NotebookPanel.IContentFactory)[0];
+            if (mystPlugin) {
+                const dependencies = await Promise.all([
+                    ...((_a = mystPlugin.requires) !== null && _a !== void 0 ? _a : []).map(token => app.resolveRequiredService(token)),
+                    ...((_b = mystPlugin.optional) !== null && _b !== void 0 ? _b : []).map(token => app.resolveOptionalService(token))
+                ]);
+                mystFactory = (await mystPlugin.activate(app, ...dependencies));
+            }
+            else {
+                console.error('jupyterlab-favorites found jupyterlab-myst:content-factory plugin, but could not activate content factory for compatibility fix');
+            }
+        }
         const editorFactory = editorServices.factoryService.newInlineEditor;
         const factory = new StarredNotebookContentFactory({
             editorFactory,
-            app
+            app,
+            mystFactory
         });
         return factory;
     }

package/lib/manager.d.ts

@@ -40,4 +40,6 @@ export declare class FavoritesManager {
     private _favorites;
     private _serverRoot;
     private _showWidget;
+    private _sortOrder;
+    private _groupByType;
 }

package/lib/manager.js

@@ -8,6 +8,8 @@ export class FavoritesManager {
         this.visibilityChanged = new Signal(this);
         this._favorites = [];
         this._showWidget = false;
+        this._sortOrder = 'name';
+        this._groupByType = true;
         this._showWidget = true;
         this._serverRoot = serverRoot;
         this._commandRegistry = commands;
@@ -124,15 +126,24 @@ export class FavoritesManager {
     }
     visibleFavorites(sort = true) {
         const filtered = this.favorites.filter(f => !f.hidden);
-        if (!sort) {
+        if (!sort || this._sortOrder === 'unsorted') {
             return filtered;
         }
         return filtered.sort((a, b) => {
-            if (a.contentType === b.contentType) {
-                return getName(a.path) <= getName(b.path) ? -1 : 1;
+            // Group by content type first if enabled
+            if (this._groupByType && a.contentType !== b.contentType) {
+                return a.contentType < b.contentType ? -1 : 1;
+            }
+            // Sort by selected criterion using locale-aware comparison
+            if (this._sortOrder === 'name') {
+                // Use custom display name if set, otherwise fall back to basename
+                const nameA = a.name || getName(a.path)[0];
+                const nameB = b.name || getName(b.path)[0];
+                return nameA.localeCompare(nameB);
             }
             else {
-                return a.contentType < b.contentType ? -1 : 1;
+                // sortOrder === 'path'
+                return a.path.localeCompare(b.path);
             }
         });
     }
@@ -148,9 +159,14 @@ export class FavoritesManager {
         this.overwriteSettings({ favorites: defaultFavorites });
     }
     async loadFavorites() {
-        var _a;
+        var _a, _b, _c;
         const setting = await this._settingsRegistry.get(SettingIDs.favorites, 'favorites');
         const favorites = ((_a = setting.composite) !== null && _a !== void 0 ? _a : []);
+        // Load sort settings
+        const sortOrderSetting = await this._settingsRegistry.get(SettingIDs.favorites, 'sortOrder');
+        this._sortOrder = ((_b = sortOrderSetting.composite) !== null && _b !== void 0 ? _b : 'name');
+        const groupByTypeSetting = await this._settingsRegistry.get(SettingIDs.favorites, 'groupByType');
+        this._groupByType = ((_c = groupByTypeSetting.composite) !== null && _c !== void 0 ? _c : true);
         this.favorites = favorites.map(favorite => {
             var _a;
             return { ...favorite, root: (_a = favorite.root) !== null && _a !== void 0 ? _a : this.serverRoot };

package/lib/starPrompt.d.ts

@@ -1,7 +1,7 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { Widget } from '@lumino/widgets';
-import { Cell, IInputPrompt } from '@jupyterlab/cells';
-import { NotebookPanel } from '@jupyterlab/notebook';
+import { Cell, IInputPrompt, MarkdownCell } from '@jupyterlab/cells';
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 export declare class StarredInputPrompt extends Widget implements IInputPrompt {
     private _app;
     private _executionCount;
@@ -15,10 +15,14 @@ export declare class StarredInputPrompt extends Widget implements IInputPrompt {
 export declare namespace StarredNotebookContentFactory {
     interface IOptions extends Cell.ContentFactory.IOptions {
         app: JupyterFrontEnd;
+        mystFactory?: NotebookPanel.IContentFactory;
     }
 }
 export declare class StarredNotebookContentFactory extends NotebookPanel.ContentFactory {
-    private _app;
     constructor(options: StarredNotebookContentFactory.IOptions);
     createInputPrompt(): StarredInputPrompt;
+    createMarkdownCell(options: MarkdownCell.IOptions): MarkdownCell;
+    createNotebook(options: Notebook.IOptions): Notebook;
+    private _app;
+    private _mystFactory?;
 }

package/lib/starPrompt.js

@@ -1,9 +1,9 @@
 import { BoxLayout, Widget } from '@lumino/widgets';
-import { CommandIDs } from './token';
-import { InputPrompt } from '@jupyterlab/cells';
+import { CommandIDs, FAVORITE_FILTER_CLASS, FAVORITE_TAG } from './token';
+import { InputPrompt, MarkdownCell } from '@jupyterlab/cells';
 import { ToolbarButton } from '@jupyterlab/ui-components';
 import { filledStarIcon, starIcon } from './icons';
-import { NotebookPanel } from '@jupyterlab/notebook';
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 const INPUT_PROMPT_CLASS = 'jp-InputPrompt';
 const INPUT_PROMPT_NUMBER_CLASS = 'jp-Favorites-InputPromptNumber';
 const FAVORITE_ICON_ON_CLASS = 'jp-Favorites-star-class';
@@ -50,12 +50,100 @@ export class StarredInputPrompt extends Widget {
         this._promptIndicator.executionCount = value;
     }
 }
+class FavoritesNotebook extends Notebook {
+    constructor(options) {
+        super(options);
+    }
+    get activeCellIndex() {
+        if (!this.model) {
+            return -1;
+        }
+        return this.widgets.length ? super.activeCellIndex : -1;
+    }
+    set activeCellIndex(newValue) {
+        const oldValue = super.activeCellIndex;
+        // Validate bounds
+        if (!this.model || !this.widgets.length) {
+            newValue = -1;
+        }
+        else {
+            newValue = Math.max(newValue, 0);
+            newValue = Math.min(newValue, this.widgets.length - 1);
+        }
+        // If favorites filter is not active, use default behavior
+        if (!this._isFavoritesFilterActive()) {
+            super.activeCellIndex = newValue;
+            return;
+        }
+        // If target cell is favorite, use default behavior
+        if (this._isCellFavorite(newValue)) {
+            super.activeCellIndex = newValue;
+            return;
+        }
+        // Target cell is not a favorite, find nearest favorite
+        const direction = newValue > oldValue ? 1 : -1;
+        const nearestFavoriteIndex = this._findNearestFavoriteCell(newValue, direction);
+        if (nearestFavoriteIndex !== -1) {
+            super.activeCellIndex = nearestFavoriteIndex;
+            return;
+        }
+        else {
+            // At the edges, stick the nearest favourite cell in any direction;
+            // this also helps when the favorite cell is moved around as it will
+            // snap back to it, rather than leaving the index on a now hidden cell.
+            const alternative = this._findNearestFavoriteCell(newValue, direction > 0 ? -1 : 1);
+            super.activeCellIndex = alternative;
+        }
+    }
+    /**
+     * Check if a cell at the given index is marked as favorite
+     */
+    _isCellFavorite(cellIndex) {
+        if (cellIndex < 0 || cellIndex >= this.widgets.length) {
+            return false;
+        }
+        const cell = this.widgets[cellIndex];
+        const tags = cell.model.getMetadata('tags');
+        return Array.isArray(tags) && tags.includes(FAVORITE_TAG);
+    }
+    /**
+     * Check if the favorites filter is currently active
+     */
+    _isFavoritesFilterActive() {
+        return this.node.classList.contains(FAVORITE_FILTER_CLASS);
+    }
+    /**
+     * Find the nearest favorite cell in a given direction
+     * @param startIndex - Index to start searching from
+     * @param direction - 1 for down, -1 for up
+     */
+    _findNearestFavoriteCell(startIndex, direction) {
+        let currentIndex = startIndex + direction;
+        while (currentIndex >= 0 && currentIndex < this.widgets.length) {
+            if (this._isCellFavorite(currentIndex)) {
+                return currentIndex;
+            }
+            currentIndex += direction;
+        }
+        return -1;
+    }
+}
 export class StarredNotebookContentFactory extends NotebookPanel.ContentFactory {
     constructor(options) {
         super(options);
         this._app = options.app;
+        this._mystFactory = options.mystFactory;
     }
     createInputPrompt() {
         return new StarredInputPrompt(this._app);
     }
+    createMarkdownCell(options) {
+        if (this._mystFactory) {
+            return this._mystFactory.createMarkdownCell(options);
+        }
+        return new MarkdownCell(options).initializeState();
+    }
+    createNotebook(options) {
+        return new FavoritesNotebook(options);
+    }
 }

package/lib/token.d.ts

@@ -4,6 +4,7 @@ export declare namespace PluginIDs {
     const notebookFactory = "favorites-notebook-factory";
 }
 export type ShowStarsTypes = 'allCells' | 'onlyFavoriteCells' | 'never';
+export type SortOrder = 'unsorted' | 'name' | 'path';
 export declare namespace CommandIDs {
     const addOrRemoveFavorite: string;
     const removeFavorite: string;
@@ -33,6 +34,8 @@ export declare namespace IFavorites {
     type FavoritesSettings = {
         favorites?: Array<IFavorites.Favorite>;
         showWidget?: boolean;
+        sortOrder?: SortOrder;
+        groupByType?: boolean;
     };
 }
 export declare const IFavorites: Token<IFavorites>;
@@ -43,3 +46,7 @@ export interface IFavorites {
  * Cell tag used to mark cell as favorite
  */
 export declare const FAVORITE_TAG = "favorite";
+/**
+ * Class set to notebook when filtering cells by favorite is enabled
+ */
+export declare const FAVORITE_FILTER_CLASS = "jp-favorites-filter-active";

package/lib/token.js

@@ -27,3 +27,7 @@ export const IFavorites = new Token('jupyterlab-favorites:IFavorites');
  * Cell tag used to mark cell as favorite
  */
 export const FAVORITE_TAG = 'favorite';
+/**
+ * Class set to notebook when filtering cells by favorite is enabled
+ */
+export const FAVORITE_FILTER_CLASS = 'jp-favorites-filter-active';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jlab-enhanced/favorites",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "description": "Add the ability to save favorite folders to JupyterLab for quicker browsing",
     "keywords": [
         "jupyter",
@@ -65,7 +65,9 @@
     },
     "resolutions": {
         "react-dom": "^18.2.0",
-        "react": "^18.2.0"
+        "react": "^18.2.0",
+        "lib0": "0.2.111",
+        "mermaid": "11.12.2"
     },
     "dependencies": {
         "@jupyterlab/application": "^4.0.5",
@@ -82,11 +84,13 @@
         "@lumino/commands": "^2.0.1",
         "@lumino/coreutils": "^2.0.1",
         "@lumino/signaling": "^2.0.0",
-        "@lumino/widgets": "^2.0.1"
+        "@lumino/widgets": "^2.0.1",
+        "jupyterlab-myst": "^2.4.0"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
         "@types/json-schema": "^7.0.11",
+        "@types/node": "^20.11.27",
         "@types/react": "^18.0.26",
         "@types/react-addons-linked-state-mixin": "^0.14.22",
         "@typescript-eslint/eslint-plugin": "^6.1.0",
@@ -111,7 +115,12 @@
     "jupyterlab": {
         "extension": true,
         "outputDir": "jupyterlab_favorites/labextension",
-        "schemaDir": "schema"
+        "schemaDir": "schema",
+        "sharedPackages": {
+            "jupyterlab-myst": {
+                "bundled": false
+            }
+        }
     },
     "styleModule": "style/index.js",
     "prettier": {

package/schema/favorites.json

@@ -97,6 +97,23 @@
         { "const": "onlyFavoriteCells", "title": "Only favorite Cells" },
         { "const": "never", "title": "Never" }
       ]
+    },
+    "sortOrder": {
+      "type": "string",
+      "title": "Sort Order",
+      "description": "How to sort favorites in the list.",
+      "default": "name",
+      "oneOf": [
+        { "const": "unsorted", "title": "By Creation Order" },
+        { "const": "name", "title": "By Display Name" },
+        { "const": "path", "title": "By Path" }
+      ]
+    },
+    "groupByType": {
+      "type": "boolean",
+      "title": "Group by Type",
+      "description": "Group directories before files when sorting.",
+      "default": true
     }
   },
   "title": "Favorites",

package/style/base.css

@@ -45,6 +45,17 @@
   max-height: 120px;
 }
 
+.jp-Favorites-resize-handle {
+  height: 4px;
+  background: transparent;
+  cursor: ns-resize;
+  user-select: none;
+}
+
+.jp-Favorites-resize-handle:hover {
+  background: var(--jp-border-color1);
+}
+
 .jp-Favorites {
   flex: 0 0 auto;
   overflow: visible;