search

paulopes / panel-bootstrap-vue

Use bootstrap-vue VueJs components supporting Bootstrap 4 in Panel templates
Apache License 2.0
2 stars 0 forks source link

What can you do with panel-bootstrap-vue? #1

Open MarcSkovMadsen opened 4 years ago

MarcSkovMadsen commented 4 years ago

Hi paulopes

I'm the developer of awesome-panel.org and I found your repository.

I'm quite interested as I'm working on Panel components from other frameworks like Material MWC and Fast.

Did you get panel-bootstrap-vue working? And how do I use it? ¨ Marc

paulopes commented 4 years ago

Hi Marc,

I've added a Jupyter notebook example that uses the vue-pivot-table Vue component that is available here: https://github.com/Click2Buy/vue-pivot-table

MarcSkovMadsen commented 4 years ago

Thanks a lot.

I can see that you are using HoloViz Panel and you can wrap a vue component in something that looks more like Python than the traditional bokeh extension way of creating components for Panel.

But is this something you can use as a part of a normal Panel app? How?

What other components have you built? Where do I find them.

What is panel-components? How do I use it.

Is this really a way the quickly make Panel much more awesome by being able to quickly wrap all kinds of js components?

Why did you create this?

Where did you get the inspiration and techniques from.

Sorry for the many questions but I can see you have a totally different understand of what you can do with Panel and how to do it.

I have a feeling that the Panel community is missing out on something awesome you have created.

I want to learn.

Marc

MarcSkovMadsen commented 4 years ago

I’ve created the WebComponent as a Python mostly way to wrap js components. See https://awesome-panel.readthedocs.io/en/latest/packages/awesome-panel-extensions/index.html#webcomponent

paulopes commented 4 years ago

Your WebComponent package seems to be very similar to my panel-components package in regard to their intent, though they are implemented differently.

I've made my packages to support internal projects that I'm doing for my employer, which I'm not free to open-source, but are based on panel-based Jupyter notebooks that presented in a custom bootstrap-styled internal site.

To take advantage of some of the publicly available Vue components I've added Vue support to panel-components and I created the panel-bootstrap-vue package just to provide a starting page component with all the dependencies.

In addition to Vue, in order to take advantage of publicly available React components, I've also created a small React module (a Javascript/Typescript module) to make it easier to convert React components into formal HTML custom elements (with or without shadow DOM), to make it easier to embed a React component in a panel notebook. It is one of my gists here: https://gist.github.com/paulopes/

I have not documented properly these small projects, I realize that.

MarcSkovMadsen commented 4 years ago

Thanks. Is this something that you are interested in others using?

And if yes a small notebook combining original panel components and bootstrap-vie components would help me understand the power.

And where did you get the inspiration from? IPyWidgets?

paulopes commented 4 years ago

I started with IPyWidgets, then I wanted to replicate some of the capabilities or R's Shiny, so I tried Dash and Voilà, and ended up using Panel because it was the most flexible for what I needed.

I need to find some spare time to prepare a more comprehensive example notebook, and make at least better readme files.

MarcSkovMadsen commented 4 years ago

I would like to understand

Sorry for asking so many questions. I've just been trying so hard for a long time to make Panel more awesome. It is really, really powerful for some parts. But it is not easy to make something that looks and feels really awesome currently. I've tried to improve that. And I wan't to understand If you already solved this 7 months ago and how.

:-)

paulopes commented 4 years ago

Thank you for your interest, and for your questions. A few answers:

I think both you and I, and other people, we are all in the process of solving this problem. I have not yet completed what I'm attempting to do. But I can already use a bootstrap theme on any panel-based notebook, as long as I put it in a parameter of the page() component, and that bootstrap theme can be placed in the www\bootstrap folder, which will override the default one that is included in the package.

The answer to all of these questions is Yes, save for some unforeseen bug. You can place panel's row and column layout components in parameters inside page(). You can also use functions standing in for HTML tags, similar to panel's (and Shiny's) own, importing them from panel_components.tags. Linking components together can still be done using standard panel methods, even methods like link, param.watch, jslink or jscallback to tie panel components together can be used.

I've really busy right now, but I'll put together a more comprehensive notebook showing more of that when I get some spare time, which unfortunately is not going to happen in the next couple of weeks. That's all I can promise right now.

In the mean time you are welcome to play around with it, see if your WebComponents can be included as page() parameters as well, and I'll try to answer your questions.

MarcSkovMadsen commented 4 years ago

Thanks