search

paulopes / panel-components

HTML components for Panel templates
Apache License 2.0
6 stars 1 forks source link

Explain how to get bidirectional communication with a component. #8

Closed MarcSkovMadsen closed 4 years ago

MarcSkovMadsen commented 4 years ago

The one remaining thing for me to understand is how to get bidirectional communication between a Component and the backend such that I can use it as any other Panel Widget, pane or Layout.

For example I want to react to clicks on a button here https://github.com/paulopes/panel-components/pull/5#issuecomment-701568136

I can though see how my WebComponent could be used or even changed to work on a Panel-Components component via it’s id.

solution

Describe a minimum example here and I will add it to the ReadMe.md and create a real world example in a new examples folder

MarcSkovMadsen commented 4 years ago

If it’s not currently possible I would like to know if

MarcSkovMadsen commented 4 years ago

any info here would really help me @paulopes . It’s the one core thing left i need to understand.

Thanks in advance.

paulopes commented 4 years ago

The linking of buttons to panel components is all panel functionality. The panel-component code stays out of the way between the notebook maker's JS or python code and the panel component that is inserted inside of the template that is customized by panel-component.

In spite of that, I'd like to make such an example, but I don't have time right now. Maybe in a few weeks.

My full time job leaves me very little time to support this. I thought that panel-component or panel-bootstrap-vue might be useful to others, so I open sourced it. But I can make no commitment to support them.

I also didn't fully implement panel-bootstrap-vue because as I was coding it Vue version 3 came along, and I haven't figured out how to make Vue 3 parse Vue templates of the fly, like Vue 2 can. I decided to switch to use standard HTML Custom Elements in my full-time job, but of that work all that I can open-source is the ReactCustomElement.tsx gist that I mentioned before. That's why panel-bootstrap-vue is so raw.

MarcSkovMadsen commented 4 years ago

Thanks. As i understand your answer you use panel buttons and not bootstrap-vue buttons? Because the panel buttons have bidirectional Communication. But nothing in the panel-bootstrap-vue has or Can have that?

paulopes commented 4 years ago

I had intended to use other bootstrap-vue components, like b-tabs for example: https://bootstrap-vue.org/docs/components/tabs

When I started working on panel-component I saw that communication between the JS in the HTML page and the python backend would be handled by panel. My goal for panel-component is just to build templates for panel to use instead of the default that come with it, using a DSL similar to R's shiny, but not quite the same.

Having said that, I later added the ability to bind element ids to data, to make it easier to reference data from JS, like with the vue-example that I had provided.

I think more methods to facilitate bi-directional communication could be added, to simplify it. I just haven't gotten there yet.

MarcSkovMadsen commented 4 years ago

Ahh. Then i Will try to understand how that Can be added.

MarcSkovMadsen commented 4 years ago

FYI. I have a POC.

But I believe the solution is something that can be used more generally than for panel-components. So I will put the solution in seperate repository and the show how to use with panel-components.

The thing for me to understand is how the api should look and feel. Technically I can setup bidirectional communication.

MarcSkovMadsen commented 4 years ago

FYI. @paulopes

I have a suggestion for adding support for this kind of bi-directional communication to Panel here. https://github.com/holoviz/panel/issues/1612#issue-715354811.

Feel free to add your ideas and requirements.

Thanks.