Open MarcosVn opened 1 week ago
@MarcosVn You will need to add a prop type: 'code' | 'markdown' | 'raw'
here https://github.com/datalayer/jupyter-ui/blob/3197d240947f5e1ce80abe10801c3679e9cd5acc/packages/react/src/components/cell/Cell.tsx#L16-L25
... and pass that prop to the CellAdapter which will import a MarkdownCell and RawCell here https://github.com/datalayer/jupyter-ui/blob/3197d240947f5e1ce80abe10801c3679e9cd5acc/packages/react/src/components/cell/CellAdapter.ts#L16C25-L16C33
... and instantiate those MarkdownCell and RawCell based on that prop.
Hello @echarles, thank you very much for your quick response.
I opened a very partial PR with the mentioned evolutions, but it seems there are some issues beyond that I would like to request an opinion/help:
MarkdownCellCode
instance, the cell is not rendered as expected (resulting in a blank output). Could it be something related to the execution interface, for example? I noticed that in markdown cells, the interface that transforms the input into a result appears to be quite different;I think the ideal would be to rename the CellAdapter
_codeCell
property to _cell
, however, I was a bit hesitant to make this modification due to not knowing the possible impacts;
I believe we will have other areas to evolve as well, such as in Cell.tsx
, where we will need to consider the case of autoStart
(perhaps point 1 above is related to this).
Hi @MarcosVn ,
it seems to me we are working on somewhat similar tasks)
Can you please share how you work with multiple cells?
I've tried to build very basic example, but struggling to make it work properly with more than one cell
For example when I add more than one cell I have following issues with an example
My example is
import {Cell, Jupyter, selectCell, cellActions, selectActiveCell} from '@datalayer/jupyter-react';
import React from "react";
import { useDispatch } from "react-redux";
import { Button, Text } from '@primer/react';
const CellPreview = () => {
const cell = selectCell();
return (
<>
<div>source: {cell.source}</div>
<br/>
<div>kernel available: {String(cell.kernelAvailable)}</div>
<br/>
</>
)
}
const CellComponents = () => (
<>
<CellPreview/>
<CellToolbar />
<Cell key="1" source="" />
<Cell key="2" source="" />
</>
)
const CellToolbar = () => {
const cell = selectCell();
const dispatch = useDispatch();
const handleExecuteClick = () => {
console.log(cell.source);
cell.adapter?.execute();
}
return (
<>
<Text as="h5">Cell Example</Text>
<Button
color="primary"
onClick={handleExecuteClick}
>
Execute active
</Button>
<Button
color="primary"
onClick={() => dispatch(cellActions.execute())}
>
Run
</Button>
<Button
color="secondary"
onClick={() => dispatch(cellActions.outputsCount(0))}
>
Reset outputs count
</Button>
<Text>
Outputs count: {cell.outputsCount}
</Text>
</>
);
}
export default function EntryComponent() {
return <Jupyter
jupyterServerHttpUrl="http://localhost:8888"
jupyterServerWsUrl="ws://localhost:8888"
jupyterToken="3c8d3dda652807dfaf5edc9df0fc32427f8a4d841fc714b3"
lite={false}
useRunningKernelIndex={-1}
startDefaultKernel={true}
terminals={false}
>
<CellComponents/>
</Jupyter>
}
A prerequisite to support multiple Cells on a same page is to upgrade the zustand store to support many cells, like the output store does.
Hello @echarles,
Regarding the markdown support, could you please review my last comment when possible?
I would be happy to help with this evolution in the library, and it will also be useful for my use case.
@MarcosVn Thanks a lot for this contribution and sorry for the delay... I have commented here https://github.com/datalayer/jupyter-ui/pull/248#issuecomment-2189345709
Thank you, @echarles! I posted an update on the work on this issue with some comments directly on #248.
I am working on a web application, and the
<Cell>
component meets exactly what I need; however, in version0.10.0
it only allows code cells. When I use a<Notebook>
, I can manipulate and add markdown cells programmatically.Would it be possible to add the same support to
<Cell>
? This could be through a newtype
prop or even an action provided by whatever you consider best. If feasible, could this be included in the evolution pipeline? I can contribute with a PR to have this ASAP.