@datalayer/core
Version:
**Datalayer Core**
25 lines (23 loc) • 1.64 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.
*/
/*
* Copyright (c) 2021-2023 Datalayer, Inc.
*
* MIT License
*/
import { Box, Button, Label } from '@primer/react';
import { Cell, KernelIndicator, useKernelsStore, useCellsStore } from '@datalayer/jupyter-react';
const CELL_ID = 'cell-example-1';
const DEFAULT_SOURCE = `from IPython.display import display
for i in range(10):
display('I am a long string which is repeatedly added to the dom in separated divs: %d' % i)`;
export const CellExample = (props) => {
const { kernel } = props;
const cellsStore = useCellsStore();
const kernelsStore = useKernelsStore();
return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Cell" }), _jsxs(Box, { children: ["Source: ", cellsStore.getSource(CELL_ID)] }), _jsxs(Box, { children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { children: ["Kernel State: ", _jsx(Label, { children: kernelsStore.getExecutionState(kernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase: ", _jsx(Label, { children: kernelsStore.getExecutionPhase(kernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: kernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID })] }));
};
export default CellExample;