@datalayer/core
Version:
[](https://datalayer.io)
121 lines (120 loc) • 10.7 kB
JavaScript
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 { useEffect, useMemo, useState } from 'react';
import { nullTranslator } from '@jupyterlab/translation';
//import { kernelIcon } from '@jupyterlab/ui-components';
import { ActionList, ActionMenu, IconButton, Text, RadioGroup, Radio, FormControl, LabelGroup, Label, } from '@primer/react';
import CloudUploadIcon from '@datalayer/icons-react/data1/CloudUploadIcon';
import { Box } from '@datalayer/primer-addons';
import { CpuIcon } from '@primer/octicons-react';
import { BrowserIcon, LaptopSimpleIcon } from '@datalayer/icons-react';
import { CreditsIndicator } from '../../components/progress';
import { isRuntimeRemote } from '../../stateful/runtimes';
import { getGroupedRuntimeDescs } from './RuntimeUtils';
/**
* Maximal runtime display name length after which it is trimmed.
*/
const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
/**
* Base Kernel Picker component.
*/
export function RuntimePickerBase(props) {
const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
const [groupedRuntimeDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
const [defaultSet, setDefaultSet] = useState(false);
// Trick because overflow is an unknown prop of ActionMenu.Overlay.
const overlayProps = {
maxHeight: 'large',
width: (variant === 'cell' ? 'small' : 'auto'),
};
/*
// TODO this effect generates refresh of the react components which discards any change in the selection.
useEffect(() => {
const updateGroupedRuntimeDescs = () => {
setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
};
multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
multiServiceManager.remote?.kernels.changed.connect(updateGroupedRuntimeDescs);
multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
// multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
return () => {
multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
// multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
};
}, [multiServiceManager, preference, translator, filterKernel, variant]);
*/
useEffect(() => {
if (sessionContext && groupedRuntimeDescs) {
const kernelId = sessionContext.session?.kernel?.id;
if (kernelId) {
Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
runtimeDescs.forEach(runtimeDesc => {
if (runtimeDesc.kernelId === kernelId) {
setRuntimeDesc(runtimeDesc);
}
});
});
}
}
setDefaultSet(true);
}, [groupedRuntimeDescs]);
// For cell using submenu instead of group would be nice unfortunately the feature
// is not yet implemented in the component there has been a not-great demo story.
// https://github.com/primer/react/pull/3585
return (_jsx(_Fragment, { children: display === 'menu' ? (
/*
* Section for Menu display.
*/
_jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedRuntimeDescs === null,
// icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedRuntimeDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
setRuntimeDesc(undefined);
}, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
const annotation = runtimeDesc.podName
? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}`
: runtimeDesc.kernelId
? ` - ${runtimeDesc.kernelId}`
: '';
const fullDisplayName = (runtimeDesc.displayName ?? '') + annotation;
const displayName = (runtimeDesc.displayName?.length ?? 0) >
RUNTIME_DISPLAY_NAME_MAX_LENGTH
? runtimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…'
: (runtimeDesc.displayName ?? '');
return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (runtimeDesc.location === runtimeDesc?.location ||
(isRuntimeRemote(runtimeDesc.location) &&
isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
(runtimeDesc.kernelId ?? runtimeDesc.name) ===
(runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
setRuntimeDesc(runtimeDesc);
}, children: [_jsx(ActionList.LeadingVisual, { children: runtimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : runtimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, runtimeDesc.name));
})] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
/*
* Section for Radio display.
*/
_jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
return (_jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
setRuntimeDesc(k);
}, checked: (k.location === k?.location ||
(isRuntimeRemote(k.location) &&
isRuntimeRemote(k?.location ?? 'local'))) &&
(k.kernelId ?? k.name) ===
(runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, k.kernelId));
})] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })) }));
}
export default RuntimePickerBase;