@datalayer/core
Version:
[](https://datalayer.io)
76 lines (75 loc) • 4.68 kB
JavaScript
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 { useMemo } from 'react';
import { IconButton, ToggleSwitch, FormControl } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { Blankslate, DataTable, Table } from '@primer/react/experimental';
import { nullTranslator } from '@jupyterlab/translation';
import { checkIcon } from '@jupyterlab/ui-components';
/**
* Runtime variables selector component.
*/
export function RuntimeVariables(props) {
const { className, translator, selectedVariables, setSelectVariable, transferVariables, setTransferVariable, kernelVariables, } = props;
const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
const nRows = Object.keys(kernelVariables ?? {}).length;
// Sorting and actions does not play nice together :'(
const columns = [
{
header: trans.__('Name'),
field: 'name',
rowHeader: true,
},
{
header: trans.__('Type'),
field: 'type',
},
{
id: 'select',
maxWidth: '70px',
header: () => (_jsx(IconButton, { "aria-label": selectedVariables.length === nRows
? trans.__('Deselect all')
: trans.__('Select all'), title: selectedVariables.length === nRows
? trans.__('Deselect all')
: trans.__('Select all'), icon: selectedVariables.length === nRows
? checkIcon.react
: () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
e.preventDefault();
if (selectedVariables.length === nRows) {
setSelectVariable([]);
}
else {
setSelectVariable(Object.keys(kernelVariables ?? {}));
}
} })),
renderCell: (row) => {
const isSelected = selectedVariables.includes(row.name);
return (_jsx(IconButton, { "aria-label": isSelected
? trans.__('Deselect: %1', row.name)
: trans.__('Select: %1', row.name), title: isSelected
? trans.__('Deselect: %1', row.name)
: trans.__('Select: %1', row.name), icon: isSelected ? checkIcon.react : () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
e.preventDefault();
const index = selectedVariables.findIndex(v => v === row.name);
if (index >= 0) {
const copy = [...selectedVariables];
copy.splice(index, 1);
setSelectVariable(copy);
}
else {
setSelectVariable([...selectedVariables, row.name]);
}
} }));
},
},
];
return (_jsxs(Box, { className: className, sx: { paddingTop: '10px' }, children: [_jsxs(FormControl, { layout: "horizontal", children: [_jsx(FormControl.Label, { children: trans.__('Transfer variables') }), _jsx(ToggleSwitch, { checked: transferVariables, size: "small", onClick: e => {
e.preventDefault();
setTransferVariable(!transferVariables);
}, "aria-labelledby": "kernel-toggle-variables" })] }), transferVariables && (_jsxs(Table.Container, { sx: { flex: '1 1 auto', marginTop: 3 }, children: [_jsx(Table.Subtitle, { as: "p", id: "dla-kernel-variables-subtitle", children: trans.__('The list of transferable runtime variables.') }), kernelVariables ? (Object.keys(kernelVariables ?? {}).length ? (_jsx(DataTable, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", data: Object.entries(kernelVariables ?? {})
.map(([name, type], id) => ({ id, name, type }))
.sort((a, b) => (a.name > b.name ? 1 : -1)), columns: columns, cellPadding: "condensed" })) : (_jsx(Box, { sx: { gridArea: 'table' }, children: _jsx(Blankslate, { border: true, children: _jsx(Blankslate.Heading, { children: trans.__('No eligible variables.') }) }) }))) : (_jsx(Table.Skeleton, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", columns: columns, rows: 5 }))] }))] }));
}