@datalayer/core 0.0.1 → 0.0.3

package/lib/components/storage/ContentsBrowser.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { PathExt } from '@jupyterlab/coreutils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Blankslate, Dialog } from '@primer/react/experimental';
+import { CounterClockWiseIcon } from '@datalayer/icons-react';
+import { useIsMounted } from 'usehooks-ts';
+import { useToast } from '../../hooks';
+import { UploadIconButton } from '../buttons';
+import { DirectoryItem, TreeItem, modelToView } from './ContentsItems';
+/**
+ * The maximum upload size (in bytes) for notebook version < 5.1.0
+ */
+export const LARGE_FILE_SIZE = 15 * 1024 * 1024;
+/**
+ * The size (in bytes) of the biggest chunk we should upload at once.
+ */
+export const CHUNK_SIZE = 1024 * 1024;
+/**
+ * Storage browser component.
+ */
+export function ContentsBrowser(props) {
+    const { contents, localContents, documentRegistry } = props;
+    const isMounted = useIsMounted();
+    const { trackAsyncTask } = useToast();
+    const [children, setChildren] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [contextMenuAnchor, setContextMenuAnchor] = useState(null);
+    const [openDeleteConfirmation, setOpenDeleteConfirmation] = useState(false);
+    const [copyToLocalConfirmation, setCopyToLocalConfirmation] = useState(false);
+    const refresh = useCallback(() => {
+        contents.get('')
+            .then(model => {
+            setIsLoading(false);
+            setChildren(modelToView(model.content, documentRegistry));
+        })
+            .catch(reason => {
+            setIsLoading(false);
+            console.error(`Failed to fetch folder '' content for manager ${contents.serverSettings.appUrl}.`, reason);
+        });
+    }, [contents]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    const upload = useCallback(
+    /**
+     * @param file File to upload
+     */
+    async (file) => {
+        const checkIsMounted = () => {
+            if (!isMounted()) {
+                return Promise.reject(`Failed to upload ${file.name}; StorageBrowser component is unmounted.`);
+            }
+        };
+        checkIsMounted();
+        const chunked = file.size > CHUNK_SIZE;
+        const currentDirectory = selectedItem
+            ? selectedItem.type === 'directory'
+                ? selectedItem.path
+                : PathExt.dirname(selectedItem.path)
+            : '';
+        const path = currentDirectory
+            ? PathExt.join(currentDirectory, file.name)
+            : file.name;
+        const name = file.name;
+        const type = 'file';
+        const format = 'base64';
+        const uploadChunk = async (blob, chunk) => {
+            checkIsMounted();
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            await new Promise((resolve, reject) => {
+                reader.onload = resolve;
+                reader.onerror = event => reject(`Failed to upload "${file.name}":` + event);
+            });
+            checkIsMounted();
+            // remove header https://stackoverflow.com/a/24289420/907060
+            const content = reader.result.split(',')[1];
+            const model = {
+                type,
+                format,
+                name,
+                chunk,
+                content,
+            };
+            return await contents.save(path, model);
+        };
+        const toastOptions = {
+            error: {
+                message: reason => {
+                    const msg = `Failed to upload ${file.name}.`;
+                    console.error(msg, reason);
+                    return msg;
+                }
+            },
+            pending: { message: `Uploading ${file.name}…` },
+            success: { message: () => `${file.name} uploaded.` }
+        };
+        if (chunked) {
+            const task = new PromiseDelegate();
+            trackAsyncTask(task.promise, toastOptions);
+            try {
+                let finalModel;
+                for (let start = 0; !finalModel; start += CHUNK_SIZE) {
+                    const end = start + CHUNK_SIZE;
+                    const lastChunk = end >= file.size;
+                    const chunk = lastChunk ? -1 : end / CHUNK_SIZE;
+                    const currentModel = await uploadChunk(file.slice(start, end), chunk);
+                    if (lastChunk) {
+                        finalModel = currentModel;
+                        task.resolve(finalModel);
+                    }
+                }
+                if (selectedItem) {
+                    selectedItem.refresh();
+                }
+                else {
+                    refresh();
+                }
+                return finalModel;
+            }
+            catch (error) {
+                task.reject(error);
+                throw error;
+            }
+        }
+        else {
+            const task = uploadChunk(file);
+            trackAsyncTask(task, toastOptions);
+            task.then(() => {
+                if (selectedItem) {
+                    selectedItem.refresh();
+                }
+                else {
+                    refresh();
+                }
+            });
+            return task;
+        }
+    }, [contents, selectedItem, refresh]);
+    const onContextMenu = useCallback((ref) => {
+        if (contextMenuAnchor === ref) {
+            setContextMenuAnchor(null);
+        }
+        else {
+            setContextMenuAnchor(ref);
+        }
+    }, [contextMenuAnchor]);
+    const onSelectDelete = useCallback(() => {
+        setOpenDeleteConfirmation(true);
+    }, []);
+    const deleteItem = useCallback(() => {
+        if (selectedItem) {
+            const task = contents.delete(selectedItem.path);
+            trackAsyncTask(task, {
+                success: { message: () => `${selectedItem.path} deleted.` },
+                pending: { message: `Deleting ${selectedItem.path}…` },
+                error: { message: reason => {
+                        const msg = `Failed to delete ${selectedItem.path}.`;
+                        console.error(msg, reason);
+                        return msg;
+                    }
+                },
+            });
+            task.finally(() => {
+                selectedItem.refresh();
+            });
+        }
+        setOpenDeleteConfirmation(false);
+    }, [contents, selectedItem]);
+    const onSelectCopyToLocal = useCallback(() => {
+        setCopyToLocalConfirmation(true);
+    }, []);
+    const copyToLocal = useCallback(() => {
+        if (selectedItem && localContents) {
+            contents.get(selectedItem.path).then((model) => {
+                const copyTask = localContents?.save(model.path, model);
+                trackAsyncTask(copyTask, {
+                    success: { message: () => `${selectedItem.path} copied to local.` },
+                    pending: { message: `Copying to local ${selectedItem.path}…` },
+                    error: { message: reason => {
+                            const msg = `Failed to copy to local ${selectedItem.path}.`;
+                            console.error(msg, reason);
+                            return msg;
+                        }
+                    },
+                });
+                copyTask.finally(() => {
+                    selectedItem.refresh();
+                });
+                setCopyToLocalConfirmation(false);
+            });
+        }
+    }, [localContents, selectedItem]);
+    const onSelect = useCallback((item, refresh) => {
+        setSelectedItem(item.path === selectedItem?.path ? null : { ...item, refresh });
+    }, [selectedItem]);
+    return (_jsxs(Box, { sx: { display: 'grid', gridTemplateAreas: `"header" "content"` }, children: [_jsxs(Box, { sx: { gridArea: 'header', display: 'flex', alignItems: 'center' }, children: [_jsx(Heading, { as: "h4", sx: {
+                            fontSize: 'var(--text-title-size-small)',
+                            lineHeight: 'var(--text-title-lineHeight-medium)',
+                            fontWeight: 'var(--text-title-weight-medium)',
+                            flex: '1 1 auto'
+                        }, children: "Contents Browser" }), _jsxs(Box, { children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: CounterClockWiseIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ?
+                _jsx(Box, { sx: {
+                        gridArea: 'content',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minHeight: '40px',
+                        height: '100vh'
+                    }, children: _jsx(Spinner, {}) })
+                :
+                    _jsx(Box, { sx: { gridArea: 'content' }, children: children ?
+                            _jsxs(_Fragment, { children: [_jsx(TreeView, { children: children?.map(child => {
+                                            return child.type === 'directory' ?
+                                                _jsx(DirectoryItem, { item: child, contents: contents, current: selectedItem, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)
+                                                :
+                                                    _jsx(TreeItem, { item: child, current: selectedItem?.path === child.path, onSelect: item => { onSelect(item, refresh); }, onContextMenu: onContextMenu }, child.name);
+                                        }) }), _jsx(ActionMenu, { anchorRef: contextMenuAnchor ?? undefined, open: contextMenuAnchor?.current !== null, onOpenChange: () => { setContextMenuAnchor(null); }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents &&
+                                                        _jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" })] }) }) }), openDeleteConfirmation &&
+                                        _jsx(Dialog, { title: "Confirm deletion", onClose: () => { setOpenDeleteConfirmation(false); }, footerButtons: [
+                                                {
+                                                    buttonType: 'default',
+                                                    content: 'Cancel',
+                                                    onClick: () => { setOpenDeleteConfirmation(false); }
+                                                },
+                                                {
+                                                    buttonType: 'danger',
+                                                    content: 'Delete',
+                                                    onClick: () => { deleteItem(); }
+                                                }
+                                            ], children: `Are you sure you want to delete ${selectedItem?.path}?` }), copyToLocalConfirmation &&
+                                        _jsx(Dialog, { title: "Confirm copy to local", onClose: () => { setCopyToLocalConfirmation(false); }, footerButtons: [
+                                                {
+                                                    buttonType: 'default',
+                                                    content: 'Cancel',
+                                                    onClick: () => { setCopyToLocalConfirmation(false); }
+                                                },
+                                                {
+                                                    buttonType: 'danger',
+                                                    content: 'Copy to local',
+                                                    onClick: () => { copyToLocal(); }
+                                                }
+                                            ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` })] })
+                            :
+                                _jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) }) })] }));
+}
+export default ContentsBrowser;

package/lib/components/storage/ContentsItems.d.ts

@@ -0,0 +1,58 @@
+import { MutableRefObject } from 'react';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+/**
+ * Content item view model
+ */
+export interface IContentsView extends Contents.IModel {
+    /**
+     * Model file type
+     */
+    fileType?: DocumentRegistry.IFileType;
+}
+interface ITreeItemProps {
+    /**
+     * Directory model
+     */
+    item: IContentsView;
+    /**
+     * Whether the item is currently selected or not.
+     */
+    current: boolean;
+    /**
+     * Callback on context menu event.
+     */
+    onContextMenu: (ref: MutableRefObject<HTMLElement | null>) => void;
+    /**
+     * Callback on item selection
+     */
+    onSelect: (item: IContentsView) => void;
+}
+/**
+ * Directory component properties
+ */
+interface IDirectoryItemProps extends Omit<ITreeItemProps, 'current' | 'onSelect' | 'refresh'> {
+    /**
+     * Jupyter contents manager
+     */
+    contents: Contents.IManager;
+    /**
+     * Current item
+     */
+    current: IContentsView | null;
+    /**
+     * Jupyter document registry
+     */
+    documentRegistry?: DocumentRegistry;
+    /**
+     * Callback on item selection
+     */
+    onSelect: (item: IContentsView, refresh: () => void) => void;
+}
+export declare function modelToView(models: Contents.IModel[], docRegistry?: DocumentRegistry): IContentsView[];
+/**
+ * Directory tree item component
+ */
+export declare function DirectoryItem(props: IDirectoryItemProps): JSX.Element;
+export declare function TreeItem(props: ITreeItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/storage/ContentsItems.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useRef, useState } from 'react';
+import { TreeView } from '@primer/react';
+import { FileIcon } from '@primer/octicons-react';
+export function modelToView(models, docRegistry) {
+    let items = models.map(model => ({
+        ...model,
+        fileType: docRegistry?.getFileTypeForModel(model)
+    }));
+    items = items.filter(model => !model.name.startsWith('.'));
+    items.sort((a, b) => {
+        if (a.type === 'directory' && b.type !== 'directory') {
+            return -1;
+        }
+        if (a.type !== 'directory' && b.type === 'directory') {
+            return 1;
+        }
+        return a.name.localeCompare(b.name);
+    });
+    return items;
+}
+/**
+ * Directory tree item component
+ */
+export function DirectoryItem(props) {
+    const { item, contents, current, documentRegistry, onContextMenu, onSelect } = props;
+    const ref = useRef(null);
+    const [children, setChildren] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const refresh = useCallback(() => {
+        setIsLoading(true);
+        contents.get(item.path)
+            .then(model => {
+            setIsLoading(false);
+            setChildren(modelToView(model.content, documentRegistry));
+        })
+            .catch(() => {
+            setIsLoading(false);
+        });
+    }, [contents, item, documentRegistry]);
+    const onExpandedChange = useCallback(async (isExpanded) => {
+        if (children === null && isExpanded) {
+            refresh();
+        }
+    }, [children, item, contents]);
+    return (_jsxs(TreeView.Item, { ref: ref, id: `${item.type}-${item.name}`, onExpandedChange: onExpandedChange, onSelect: () => { onSelect(item, refresh); }, current: item.path === current?.path, children: [_jsx(TreeView.LeadingVisual, { children: _jsx(TreeView.DirectoryIcon, {}) }), _jsx("span", { onContextMenu: event => {
+                    event.preventDefault();
+                    if (current?.path !== item.path) {
+                        onSelect(item, refresh);
+                    }
+                    onContextMenu(ref);
+                }, children: item.name }), _jsx(TreeView.SubTree, { state: isLoading
+                    ? 'loading'
+                    : (children?.length ?? -1) >= 0
+                        ? 'done'
+                        : 'initial', children: children?.map(child => {
+                    return child.type === 'directory' ?
+                        _jsx(DirectoryItem, { item: child, contents: contents, current: current, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)
+                        :
+                            _jsx(TreeItem, { item: child, current: child.path === current?.path, onSelect: item => onSelect(item, refresh), onContextMenu: onContextMenu }, child.name);
+                }) })] }));
+}
+export function TreeItem(props) {
+    const { item, current, onSelect, onContextMenu } = props;
+    const ref = useRef(null);
+    const icon = item.fileType?.icon;
+    return (_jsxs(TreeView.Item, { ref: ref, id: `${item.type}-${item.name}`, current: current, onSelect: () => { onSelect(item); }, children: [_jsx(TreeView.LeadingVisual, { children: icon ? _jsx(icon.react, { tag: 'span' }) : _jsx(FileIcon, {}) }), _jsx("span", { onContextMenu: event => {
+                    event.preventDefault();
+                    if (!current) {
+                        onSelect(item);
+                    }
+                    onContextMenu(ref);
+                }, children: item.name })] }, item.name));
+}

package/lib/components/storage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContentsBrowser';
+export * from './ContentsItems';

package/lib/components/storage/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './ContentsBrowser';
+export * from './ContentsItems';

package/lib/components/students/StudentItemStatus.d.ts

@@ -0,0 +1,7 @@
+import { IStudent, IStudentItem } from "../../models";
+type Props = {
+    student?: IStudent;
+    studentItem?: IStudentItem;
+};
+export declare const StudentItemStatus: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default StudentItemStatus;

package/lib/components/students/StudentItemStatus.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useMemo } from "react";
+import { useTheme, Tooltip, Button } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+const getExercisePoints = (studentItem) => {
+    if (studentItem && studentItem.points) {
+        return studentItem.points;
+    }
+    return 0;
+};
+export const StudentItemStatus = (props) => {
+    const { student, studentItem } = props;
+    const { theme } = useTheme();
+    const okColor = useMemo(() => theme?.colorSchemes.light.colors.success.muted, []);
+    const nokColor = useMemo(() => theme?.colorSchemes.light.colors.severe.muted, []);
+    if (student && studentItem) {
+        switch (studentItem.itemType) {
+            case ('dataset'): {
+                const datasetColor = studentItem?.completed ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: datasetColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            }
+            case ('lesson'): {
+                const lessonColor = studentItem?.completed ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: lessonColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            }
+            case ('exercise'): {
+                const exerciseColor = getExercisePoints(studentItem) > 0 ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: exerciseColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            }
+            case ('assignment'):
+                return (_jsxs(Box, { display: "flex", children: [(studentItem.nbgradesTotalScore !== undefined) && (studentItem.nbgradesTotalPoints !== undefined) &&
+                            _jsxs(Box, { children: [studentItem.nbgradesTotalScore, " / ", studentItem.nbgradesTotalPoints] }), studentItem.nbgrades &&
+                            _jsx(Box, { display: "flex", ml: 3, children: studentItem?.nbgrades.map(grade => {
+                                    const gradeColor = grade.score_f === grade.points_f ? okColor : nokColor;
+                                    return (_jsx(Tooltip, { text: grade.grade_id_s, children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { backgroundColor: gradeColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 }) }) }));
+                                }) })] }));
+            default:
+                return _jsx(_Fragment, {});
+        }
+    }
+    return _jsx(_Fragment, {});
+};
+export default StudentItemStatus;

package/lib/components/students/index.d.ts

@@ -0,0 +1 @@
+export * from './StudentItemStatus';

package/lib/components/students/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './StudentItemStatus';

package/lib/components/subnav/SubNav.d.ts

@@ -0,0 +1,84 @@
+import React, { type PropsWithChildren, type ReactNode, type RefObject } from 'react';
+import { ButtonSizes, ButtonVariants, TextProps } from '@primer/react-brand';
+import { BaseProps } from '../primer';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
+export declare const SubNavSubMenuVariants: readonly ["dropdown", "anchor"];
+type SubMenuVariants = (typeof SubNavSubMenuVariants)[number];
+type SubNavContextType = {
+    portalRef: RefObject<HTMLDivElement>;
+};
+export declare const useSubNavContext: () => SubNavContextType;
+export type SubNavProps = {
+    hasShadow?: boolean;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean;
+    'data-testid'?: string;
+} & PropsWithChildren<BaseProps<HTMLElement>>;
+type SubNavHeadingProps = {
+    href: string;
+    'data-testid'?: string;
+} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
+type SubNavLinkProps = {
+    href: string;
+    'data-testid'?: string;
+    variant?: TextProps['variant'];
+    _subMenuVariant?: SubMenuVariants;
+} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
+type SubMenuProps = {
+    variant?: SubMenuVariants;
+} & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
+declare function SubMenu({ children, className, variant, ...props }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+type SubNavActionProps = {
+    /**
+     * Required path or location for the action button to link to.
+     */
+    href: string;
+    /**
+     * Optional sizes for the button.
+     */
+    size?: (typeof ButtonSizes)[number];
+    /**
+     * Optional sizes for the button.
+     */
+    variant?: (typeof ButtonVariants)[number];
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+declare function _SubNavAction({ children, href, variant, size, ...rest }: SubNavActionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Use SubNav to display a secondary navigation beneath a primary header.
+ * @see https://primer.style/brand/components/SubNav
+ */
+export declare const SubNav: React.NamedExoticComponent<{
+    hasShadow?: boolean;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean;
+    'data-testid'?: string;
+} & BaseProps<HTMLElement> & {
+    children?: ReactNode | undefined;
+}> & {
+    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+    Action: typeof _SubNavAction;
+    SubMenu: typeof SubMenu;
+    testIds: {
+        root: string;
+        readonly button: string;
+        readonly overlay: string;
+        readonly link: string;
+        readonly heading: string;
+        readonly action: string;
+        readonly subMenu: string;
+    };
+};
+export {};