@datalayer/core 0.0.1 → 0.0.2

package/lib/components/progress/ConsumptionBar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { ProgressBar, Tooltip, Button } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { useInterval } from 'usehooks-ts';
+const CRITICAL_LEVEL = 90;
+const WARNING_LEVEL = 75;
+/**
+ * Consumption progress bar
+ */
+export function ConsumptionBar(props) {
+    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style } = props;
+    const duration = useMemo(() => (expiredAt ? expiredAt - startedAt : Date.now() / 1000 - startedAt), [expiredAt, startedAt]);
+    const [progress, setProgress] = useState(expiredAt
+        ? Math.min(Math.max(0, ((Date.now() / 1000 - startedAt) / duration) * 100), 100)
+        : 100);
+    useEffect(() => {
+        if (onUpdate) {
+            onUpdate(progress, duration);
+        }
+    }, [onUpdate, progress, duration]);
+    useInterval(() => {
+        if (expiredAt) {
+            setProgress(Math.min(Math.max(0, ((Date.now() / 1000 - startedAt) / duration) * 100), 100));
+        }
+    }, refreshInterval);
+    const bg = expiredAt
+        ? progress > CRITICAL_LEVEL
+            ? 'danger.emphasis'
+            : progress > WARNING_LEVEL
+                ? 'severe.emphasis'
+                : 'success.emphasis'
+        : 'neutral.emphasis';
+    const burntCredits = duration * burningRate;
+    const title = duration
+        ? `${((1 - progress / 100) * duration).toFixed(0)} seconds left - ${((progress / 100) * burntCredits).toFixed(2)} / ${burntCredits.toFixed(2)} credits`
+        : `Started at ${new Date(startedAt * 1000).toISOString()} - ${burntCredits.toFixed(2)} credits consumed`;
+    return (_jsx(_Fragment, { children: _jsx(Tooltip, { text: title, direction: "w", children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { tabIndex: onClick ? 0 : -1, style: style, animated: expiredAt ? false : true, bg: bg, progress: progress, onClick: onClick, onKeyDown: onClick
+                            ? event => {
+                                if (event.key === 'Enter' || event.key === 'Space') {
+                                    onClick();
+                                }
+                            }
+                            : undefined }) }) }) }) }));
+}

package/lib/components/progress/CreditsIndicator.d.ts

@@ -0,0 +1,27 @@
+import type { IRemoteServicesManager } from "../../api";
+type ICreditsIndicatorProps = {
+    /**
+     * Kernel service manager
+     */
+    serviceManager: IRemoteServicesManager;
+    /**
+     * Kernel ID
+     */
+    kernelId: string;
+    /**
+     * Callback on progress bar click event
+     */
+    onClick?: () => void;
+    /**
+     * Callback on progress update.
+     *
+     * Progress is a percentage between 0 and 100.
+     * Duration is the kernel max duration
+     */
+    onUpdate?: (progress: number, duration: number) => void;
+};
+/**
+ * Credits indicator component.
+ */
+export declare function CreditsIndicator(props: ICreditsIndicatorProps): JSX.Element | null;
+export {};

package/lib/components/progress/CreditsIndicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState, useEffect } from "react";
+import { Box } from "@datalayer/primer-addons";
+// import { ArtifactIcon } from "../../components/icons";
+import { ConsumptionBar } from "../../components/progress";
+/**
+ * Credits indicator component.
+ */
+export function CreditsIndicator(props) {
+    const { serviceManager, kernelId, onClick, onUpdate } = props;
+    const [model, setModel] = useState();
+    useEffect(() => {
+        serviceManager.runtimesManager.findById(kernelId).then(model => {
+            setModel(model);
+        });
+    }, [kernelId, serviceManager]);
+    return model ?
+        _jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick, onUpdate: onUpdate, style: { cursor: 'pointer' } }) })
+        :
+            _jsx(_Fragment, {});
+}

package/lib/components/progress/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+export declare const ProgressBar: () => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/lib/components/progress/ProgressBar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import { ProgressBar as PrimerProgressBar } from '@primer/react';
+export const ProgressBar = () => {
+    const [progress, setProgress] = useState(0);
+    useInterval(() => {
+        if (progress >= 100) {
+            setProgress(0);
+        }
+        else {
+            setProgress(progress + 1);
+        }
+    }, 100);
+    return _jsx(PrimerProgressBar, { progress: progress, "aria-label": "" });
+};
+export default ProgressBar;

package/lib/components/progress/ProgressRing.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Progress ring segment properties
+ */
+export interface IProgressRingItemProps {
+    /**
+     * Progress
+     *
+     * Value must be between 0 and 100.
+     */
+    progress: number;
+    /**
+     * Segment color.
+     *
+     * Default to foreground-color-accent
+     */
+    color?: string;
+}
+/**
+ * Progress ring properties
+ */
+export interface IProgressRingProps extends React.SVGAttributes<SVGElement>, IProgressRingItemProps {
+    /**
+     * Accessible short description
+     */
+    title?: string;
+}
+export declare const PROGRESS_SEGMENTS: number;
+/**
+ * Progress ring component
+ *
+ * Children {@link Item} must be order in decreasing progress order.
+ */
+export declare function ProgressRing(props: React.PropsWithChildren<IProgressRingProps>): JSX.Element;
+export declare namespace ProgressRing {
+    var Item: (props: IProgressRingItemProps) => JSX.Element;
+}

package/lib/components/progress/ProgressRing.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PROGRESS_SEGMENTS = 44;
+/**
+ * Progress ring segment
+ */
+function Item(props) {
+    return (_jsx("circle", { className: "determinate", style: {
+            stroke: props.color ?? 'var(--fgColor-accent)',
+            fill: 'none',
+            strokeWidth: '2px',
+            strokeLinecap: 'butt',
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            transition: 'all 0.2s ease-in-out',
+            strokeDasharray: `${(PROGRESS_SEGMENTS * props.progress) / 100}px ${PROGRESS_SEGMENTS}px`
+        }, cx: "8px", cy: "8px", r: "7px" }));
+}
+/**
+ * Progress ring component
+ *
+ * Children {@link Item} must be order in decreasing progress order.
+ */
+export function ProgressRing(props) {
+    const { children, progress, color, title, ...others } = props;
+    return (_jsxs("svg", { className: "dla-progress-ring", viewBox: "0 0 16 16", role: "progressbar", "aria-valuenow": props.progress, "aria-valuemin": 0, "aria-valuemax": 100, ...others, children: [title && _jsx("title", { children: title }), _jsx("circle", { className: "background", cx: "8px", cy: "8px", r: "7px", style: {
+                    stroke: 'var(--control-bgColor-rest)',
+                    fill: 'none',
+                    strokeWidth: '2px'
+                } }), children ?? _jsx(Item, { progress: progress, color: color })] }));
+}
+ProgressRing.Item = Item;

package/lib/components/progress/Timer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timer displaying the time as text.
+ *
+ * Duration should be provided in seconds.
+ */
+export declare function Timer(props: {
+    duration: number;
+}): JSX.Element;
+export default Timer;

package/lib/components/progress/Timer.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState, useEffect } from 'react';
+import { Text } from '@primer/react';
+/**
+ * Timer displaying the time as text.
+ *
+ * Duration should be provided in seconds.
+ */
+export function Timer(props) {
+    const [remaining, setRemaining] = useState(props.duration);
+    useEffect(() => {
+        setRemaining(props.duration);
+    }, [props.duration]);
+    useEffect(() => {
+        const timeoutIndex = setTimeout(() => {
+            setRemaining(remaining - 1);
+        }, 1000);
+        return () => {
+            clearTimeout(timeoutIndex);
+        };
+    }, [remaining]);
+    return _jsxs(Text, { as: "span", children: [remaining.toFixed(0), "s"] });
+}
+export default Timer;

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

@@ -0,0 +1,5 @@
+export * from './ConsumptionBar';
+export * from './CreditsIndicator';
+export * from './ProgressBar';
+export * from './ProgressRing';
+export * from './Timer';

package/lib/components/progress/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './ConsumptionBar';
+export * from './CreditsIndicator';
+export * from './ProgressBar';
+export * from './ProgressRing';
+export * from './Timer';

package/lib/components/runtimes/RuntimeCellVariables.d.ts

@@ -0,0 +1,39 @@
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link KernelCellVariables} properties
+ */
+interface IKernelCellVariablesProps {
+    /**
+     * Variable names to be imported
+     */
+    inputs: string[];
+    /**
+     * Importable variable names
+     */
+    getInputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable names to be imported
+     */
+    setInputs: (values: string[]) => void;
+    /**
+     * Variable name to be exported
+     */
+    output?: string;
+    /**
+     * Exportable variable names
+     */
+    getOutputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable name to be exported
+     */
+    setOutput: (value?: string) => void;
+    /**
+     * Application translator object
+     */
+    translator?: ITranslator;
+}
+/**
+ * Kernel variables picker
+ */
+export declare function KernelCellVariables(props: IKernelCellVariablesProps): JSX.Element;
+export default KernelCellVariables;

package/lib/components/runtimes/RuntimeCellVariables.js

@@ -0,0 +1,177 @@
+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.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { Autocomplete, FormControl, TextInputWithTokens } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+/**
+ * Kernel variables picker
+ */
+export function KernelCellVariables(props) {
+    const { getInputOptions, inputs, setInputs, getOutputOptions, output, setOutput, translator } = props;
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const inputForOutputRef = useRef(null);
+    const [willSaveOutput, setWillSaveOutput] = useState(false);
+    const [inputLoading, setInputLoading] = useState(!!getInputOptions);
+    const [outputsState, setOutputsState] = useState(null);
+    const [inputsState, setInputsState] = useState(inputs.map(id => ({ id, text: id, selected: true })));
+    const [filterVal, setFilterVal] = useState('');
+    // Add inputs prop in inputsState
+    useEffect(() => {
+        const candidates = inputs.filter(item => !inputsState.find(localItem => localItem.text === item));
+        if (candidates.length) {
+            setInputsState([
+                ...inputsState,
+                ...candidates.map(text => ({ id: text, text, selected: true }))
+            ]);
+        }
+    }, [inputs]);
+    // Update inputs with selected inputsState
+    useEffect(() => {
+        const candidates = inputsState
+            .filter(item => item.selected)
+            .map(item => item.text);
+        if (!JSONExt.deepEqual(inputs, candidates)) {
+            setInputs(candidates);
+        }
+    }, [inputsState]);
+    // Fetch the input candidates
+    useEffect(() => {
+        if (!inputLoading) {
+            return;
+        }
+        if (getInputOptions) {
+            getInputOptions().then(ins => {
+                const oldItems = inputsState.map(i => i.text);
+                setInputsState([
+                    ...inputsState,
+                    ...ins
+                        .sort()
+                        .filter(item => !oldItems.includes(item))
+                        .map(text => ({
+                        id: text,
+                        text,
+                        selected: false
+                    }))
+                ]);
+                setInputLoading(false);
+            });
+        }
+        else {
+            setInputLoading(false);
+        }
+    }, [inputsState, getInputOptions]);
+    // Fetch the output candidates
+    useEffect(() => {
+        if (getOutputOptions) {
+            Promise.all([getOutputOptions(), getInputOptions?.()])
+                .then(([outs, ins]) => {
+                setOutputsState(
+                // Add input variables as output candidate to cover
+                // mutation case
+                outs
+                    .sort()
+                    .concat((ins ?? []).sort())
+                    // Remove duplicated variables; it may happen if
+                    // the code introspection matches an input.
+                    .reduce((agg, value) => {
+                    if (!agg.includes(value)) {
+                        agg.push(value);
+                    }
+                    return agg;
+                }, [])
+                    .map(text => ({
+                    id: text,
+                    text,
+                    selected: false
+                })));
+            })
+                .catch(err => {
+                console.error('Failed to get the cell output candidates', err);
+                setOutputsState([]);
+            });
+        }
+    }, [getOutputOptions, getInputOptions]);
+    const onTokenRemove = useCallback((tokenId) => {
+        const idx = inputsState.findIndex(item => item.id === tokenId);
+        if (idx >= 0) {
+            inputsState.splice(idx, 1);
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const onSelectedInputsChange = useCallback((newlySelectedItems) => {
+        if (!Array.isArray(newlySelectedItems)) {
+            newlySelectedItems = [newlySelectedItems];
+        }
+        const selectedIds = newlySelectedItems.map(i => i.id);
+        setInputsState([
+            ...inputsState.map(localItem => selectedIds.includes(localItem.id)
+                ? Object.assign(localItem, { selected: true })
+                : Object.assign(localItem, { selected: false }))
+        ]);
+    }, [inputsState]);
+    const onItemSelect = useCallback((item) => {
+        const oldItem = inputsState.find(localItem => localItem.id === item.id);
+        if (!oldItem) {
+            setInputsState([...inputsState, item]);
+        }
+        else {
+            oldItem.selected = true;
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const handleChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setFilterVal(e.currentTarget.value);
+        }
+    }, []);
+    const onOutputChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setOutput(e.currentTarget.value);
+        }
+    }, []);
+    const handleOutputMenuOpenChange = useCallback(
+    // There is a bug in primer Autocomplete that lead to the suggestion
+    // not triggering the `onChange` callback. So to fix it here, we
+    // use a pointer to the underlying input element to get the value
+    // and set it when the autocompletion menu closes.
+    (open) => {
+        if (!willSaveOutput) {
+            if (open) {
+                setWillSaveOutput(true);
+            }
+            return;
+        }
+        if (inputForOutputRef.current && !open) {
+            setOutput(inputForOutputRef.current.value);
+            setWillSaveOutput(false);
+        }
+    }, [willSaveOutput]);
+    return (_jsxs(Box, { as: "form", sx: { p: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-input-variables", children: trans.__('Inputs') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { as: TextInputWithTokens, tokens: inputsState.filter(item => item.selected), onTokenRemove: onTokenRemove, onChange: handleChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { addNewItem: filterVal &&
+                                        !inputsState.find(localItem => localItem.text === filterVal)
+                                        ? {
+                                            id: filterVal,
+                                            text: trans.__("Add '%1'", filterVal),
+                                            handleAddItem: item => {
+                                                onItemSelect({
+                                                    ...item,
+                                                    text: filterVal,
+                                                    selected: true
+                                                });
+                                                setFilterVal('');
+                                            }
+                                        }
+                                        : undefined, items: inputsState, selectedItemIds: inputsState
+                                        .filter(item => item.selected)
+                                        .map(item => item.id), onSelectedChange: onSelectedInputsChange, "aria-labelledby": "cell-input-variables", selectionVariant: "multiple", emptyStateText: trans.__('No available variables.'), loading: inputLoading }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-output-variables", children: trans.__('Output') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { ref: inputForOutputRef, value: output, onChange: onOutputChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: outputsState ?? [], selectedItemIds: output ? [output] : [], "aria-labelledby": "cell-output-variables", loading: getOutputOptions && !outputsState, emptyStateText: trans.__('Not among the available variables.'), onOpenChange: handleOutputMenuOpenChange }) })] })] })] }));
+}
+export default KernelCellVariables;

package/lib/components/runtimes/RuntimeCellVariablesDialog.d.ts

@@ -0,0 +1,37 @@
+import { ISessionContext } from '@jupyterlab/apputils';
+import { CodeCellModel } from '@jupyterlab/cells';
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link RuntimeCellVariablesDialog} properties
+ */
+export interface IRuntimeCellVariablesDialogProps {
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Callback request the dialog closure.
+     */
+    onClose: () => void;
+    /**
+     * Session preference
+     */
+    preference?: {
+        id?: string;
+        kernelDisplayName?: string;
+        language?: string;
+    };
+    /**
+     * Document session context
+     */
+    sessionContext?: ISessionContext;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export declare function RuntimeCellVariablesDialog(props: IRuntimeCellVariablesDialogProps): JSX.Element;
+export default RuntimeCellVariablesDialog;

package/lib/components/runtimes/RuntimeCellVariablesDialog.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Dialog } from '@primer/react/experimental';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { KernelExecutor } from '@datalayer/jupyter-react';
+import { RuntimeSnippetsFacade } from '../../api';
+import { KernelCellVariables } from './RuntimeCellVariables';
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export function RuntimeCellVariablesDialog(props) {
+    const { onClose, model, preference, sessionContext, translator } = props;
+    const [inputs, setInputs] = useState([]);
+    const [output, setOutput] = useState();
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    useEffect(() => {
+        const updateState = (model) => {
+            const datalayerMeta = model.getMetadata('datalayer') ?? {};
+            if (datalayerMeta.in && !JSONExt.deepEqual(inputs, datalayerMeta.in)) {
+                setInputs(datalayerMeta.in);
+            }
+            if (datalayerMeta.out && datalayerMeta.out !== output) {
+                setOutput(datalayerMeta.out);
+            }
+        };
+        updateState(model);
+        model.metadataChanged.connect(updateState);
+        return () => {
+            model.metadataChanged.disconnect(updateState);
+        };
+    }, [model]);
+    const setVariables = useCallback(() => {
+        const datalayerMeta = model.getMetadata('datalayer') ?? {};
+        if (inputs.length) {
+            datalayerMeta.in = inputs;
+        }
+        else {
+            delete datalayerMeta.in;
+        }
+        if (output) {
+            datalayerMeta.out = output;
+        }
+        else {
+            delete datalayerMeta.out;
+        }
+        model.setMetadata('datalayer', { ...datalayerMeta });
+        onClose();
+    }, [inputs, output]);
+    const getInputCandidates = useCallback(async () => {
+        if (!sessionContext) {
+            return [];
+        }
+        const connection = sessionContext.session.kernel;
+        const spec = sessionContext.specsManager.specs.kernelspecs[connection.model.name];
+        const snippets = new RuntimeSnippetsFacade(spec.language);
+        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
+        const content = outputs.get(0).data['text/plain'];
+        if (content) {
+            const kernelVariables = JSON.parse(
+            // We need to remove the quotes prior to parsing
+            content.slice(1, content.length - 1));
+            return Object.keys(kernelVariables ?? {});
+        }
+        return [];
+    }, [preference, sessionContext]);
+    const getOutputCandidates = useCallback(async () => {
+        // TODO this is only valid for python - using cell mimetype?
+        return new RuntimeSnippetsFacade('python').getOutputCandidates(model.sharedModel.source);
+    }, [model]);
+    const datalayerMeta = model.getMetadata('datalayer') ?? {};
+    let title = 'Define cell variables to transfer';
+    const kernel = datalayerMeta.kernel ?? {};
+    const kernelName = (kernel.displayName || kernel.name) ?? '';
+    if (kernelName) {
+        if (kernel.params?.notebook !== false && kernel.id) {
+            title += ` with running ${kernelName} (${kernel.id.slice(0, 7)})`;
+        }
+        else {
+            title += ` with ${kernelName}`;
+        }
+    }
+    return (_jsx(Dialog, { title: title, onClose: onClose, footerButtons: [
+            {
+                buttonType: 'default',
+                content: trans.__('Cancel'),
+                onClick: onClose
+            },
+            {
+                buttonType: 'primary',
+                content: trans.__('Set variables'),
+                onClick: setVariables,
+                autoFocus: true
+            }
+        ], children: _jsx(KernelCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
+}
+export default RuntimeCellVariablesDialog;