@datalayer/core/lib/examples/CellExample.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { JupyterReactTheme, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
import { Button, Label } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
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)`;
const CellExampleContent = (props) => {
    //  const { serviceManager } = props;
    const { defaultKernel } = useJupyter({ startDefaultKernel: true });
    const cellsStore = useCellsStore();
    const kernelsStore = useKernelsStore();
    return (_jsxs(Box, { p: 4, 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: defaultKernel && kernelsStore.getExecutionState(defaultKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: defaultKernel && defaultKernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: defaultKernel })] }));
};
export const CellExample = (props) => {
    return (_jsx(JupyterReactTheme, { children: _jsx(CellExampleContent, { ...props }) }));
};
export default CellExample;