search

jupyter-widgets / ipydatagrid

Fast Datagrid widget for the Jupyter Notebook and JupyterLab
BSD 3-Clause "New" or "Revised" License
580 stars 51 forks source link

Custom cell renderer #236

Open bdch1234 opened 3 years ago

bdch1234 commented 3 years ago

I'd like to create a custom renderer, but I'm not quite sure where to start. Would you mind giving some pointers?

I was hoping to create a renderer which would have two key features:

ibdafna commented 3 years ago

Hello 👋 @bdch1234 and welcome to the ipydatagrid community!

This is a very interesting idea! Unfortunately there is no Python API to implement custom renderers as these are quite low level and implemented in TypeScript on the front-end. @martinRenou would it make sense to come up with some sort of layer of abstraction on top of the TextRenderer class and expose that on the Python side so clients can implement custom renderers? Seems like a really interesting idea.

martinRenou commented 3 years ago

I guess it would be possible to do that using py2vega? The same way we provide simple ways to do conditional rendering with it, we could expose the Canvas API so that people can do graphics in the cell using vega expressions?

For that, we need to expose the canvas context to the vega expression.

martinRenou commented 3 years ago

This slightly joins some work I've been doing on ipycanvas to transpile Python code to JavaScript so that users can provide Python code that makes use of the canvas context: https://github.com/martinRenou/ipycanvas/pull/75. This was not merged because I don't think it makes sense in the case of ipycanvas anymore (speed is not a big issue anymore there), but I think it totally make sense for ipydatagrid.

bdch1234 commented 3 years ago

Hi @ibdafna and @martinRenou, thanks for considering adding this. I don't know about others who would find this useful, but for my part at least I would be happy to write some javascript to make it work, if that makes things easier for you.

martinRenou commented 3 years ago

Yeah. Vega expressions (subset of JavaScript) would be a good first step

ibdafna commented 3 years ago

@bdch1234 if you are feeling particularly adventurous, you can try adding a custom renderer directly to ipydatagrid. If it works well then we can consider upstreaming it!

A good starting point would be to look at the BarRenderer implementation:

https://github.com/bloomberg/ipydatagrid/blob/main/js/core/barrenderer.ts

bdch1234 commented 3 years ago

I would love to @ibdafna, but I am afraid that my TypeScript-knowledge is just a bit too humble..

ibdafna commented 3 years ago

@bdch1234 What other custom renderers would you like to see in ipydatagrid?

bdch1234 commented 3 years ago

@ibdafna you mean besides the two features discussed here? I think that if we have those, then together with the standard renderers pretty much all my use-cases would be covered. Thanks again!

jgunstone commented 3 years ago

hi there,

this issue and https://github.com/bloomberg/ipydatagrid/issues/207 seem to be closely related.

@bdch1234 What other custom renderers would you like to see in ipydatagrid?

it would be great to see:

the cell editing functionality demonstrated in https://github.com/bloomberg/ipydatagrid/blob/main/examples/CellEditing.ipynb looks very powerful and simple to use. At the same time, it difficult to expect users to edit cells that are required to be a certain datatype (e.g. bool or date) whilst presenting them with a free field to edit...

I guess that i'm hoping that this library will provide some of the same functionality as https://github.com/QuantStack/ipysheet which is currently the library that I use for simple tabular user input forms or more complex cell rendering.

based on the discussion in https://github.com/bloomberg/ipydatagrid/issues/207, it may be that these more UI focused tasks and non-numeric data rendering are outside the core / immediate scope and ambition of this project?

thanks!