WebComponent pane to dramatically speed up creating new widgets in Panel #1122

MarcSkovMadsen · 2020-02-28T19:17:07Z

I believe I have created a proof of concept for how to use web components in panel to speed up the time to market for creating new widgets.

If you run something like

python -m panel serve 'panel\components\wired\buttons.py' --dev --show

Then you can explore the below

It's not all fully working yet - but the principles have been identified.

…ve object

philippjfr · 2020-02-28T19:22:49Z

This is amazing. Just for some background for me. Is there some automated way we could generate a set of components for some library including dynamic generation of parameters? For example if the underlying library ships some JSON spec of the components we could use that to auto-generate the components.

MarcSkovMadsen · 2020-02-28T19:27:01Z

I've added 3 reviewers. Mostly because I think this is very important functionality (Otherwise please tell me why not) and if you have the time to review it a bit to improve and learn it would be so awesome.

This is work in progress and will be improved dramatically. I will let you now when it's ready for review.

@philippjfr , @jbednar , @xavArtley

philippjfr · 2020-02-28T19:31:37Z

As another maybe simpler approach instead of actually generating panel components from some JSON spec it might be nice to at least parse the HTML and make the attributes of the component accessible (and settable?) as a dictionary.

xavArtley · 2020-02-28T20:26:58Z

Using python setup.py develop raise typescript compiler errors

philippjfr · 2020-02-28T20:28:34Z

Yeah the PR is still using the old deprecated approach to building extensions.

xavArtley · 2020-02-28T20:29:53Z

Was wondering if it was on purpose to not incrase size of the bundle

philippjfr · 2020-02-28T20:30:41Z

No, I think @MarcSkovMadsen is still learning how to develop extensions and we still don't have a decent developer guide for it.

xavArtley · 2020-02-28T20:54:13Z

@MarcSkovMadsen
I allowed myself to make some changes so that the extension compiles

philippjfr · 2020-02-28T20:56:51Z

panel/components/wired/buttons.py

+    import panel as pn
+    pn.config.sizing_mode="stretch_width"
+
+    js = """


Would be nicer to append these urls to pn.config.js_files.

Yes. Eventually they should.

If you take a look the value of js you can see only one of the two imports can be done via pn.config.js_files. In one of the imports I need to specify the type.

js = """ <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script> <script type="module" src="https://unpkg.com/wired-elements@0.6.4/dist/wired-elements.bundled.js"></script> """

In general the import of js web component libraries does not always work for me. It needs some experimentation before it works. Sometimes I need to

add type="module"

add ``?module` to the url.

add additional javascript libraries than what is described on npm or in the documentation.

(I believe)

So I guess there will be a request to improve the pn.config.js_files at some stage. At a minimum be able to specify the type.

I was wondering about that. Will have to do some reading before making any concrete suggestions.

MarcSkovMadsen · 2020-02-29T02:58:14Z

Thanks for all your comments and improvements above. I have briefly read them but I wan't to comment how I expect to improve/ finalize the WebComponent concept.

The overall idea/ goal is to allow the user to inherit from the WebComponent and

add custom parameters to the child class
- At a minimum parameters of type String, Number and Boolean should be supported
- if a clicks= param.Number() attribute is added it will keep track of the number of clicks.
specify in an attributes_to_sync = param.Class() parameter (or similar) that keeps track of the attributes/ properties of the python ChildWebComponent and the html/ js web component to sync.
- The user can specify a list if there is a 1-1 correspondance between all python ChildWebComponent attributes and all the html/ js web component attributes/ properties to sync.
- The user can specify a dict if there is not a 1-1 correspondance between all python ChildWebComponent attributes and all the html/ js web component attributes/ properties to sync.
- If a param.DataFrame attribute is specified the data will be transfered effectively back and forth.
  - An example could be a ChildWebComponent attribute table: param.DataFrame that would be made available for use on the js side as a variable table that is used like <my-html-tag table="[[table]]"></my-html-tag> or something similar. (I will have to experiment a bit to understand how this can be implemented).
  - I have an idea that this can be supported for one DataFrame attribute via a private _dataframe: param.DataFrame attribute. I don't know if it can be extended to multiple DataFrame attributes in a simple way.
  - Automatically parse any new html value received from the js side by a function called parse_html or similar. This function will parse the new html value and set the attributes of the ChildWebComponent. This function will use a parse_html_to_json function.
  - The user can override the parse_html function if they need more than simple 1-1 parsing.

I hope this will all work out.

The perspective is that it will be much easier to contribute new widgets to Panel

Ordinary users can stick to simple html and python for creating or contributing new widgets.
If you have access to a front end developer, then she does not need to learn of Bokeh or Panel. She can just convert an existing js, ts, react, vue or angular component into a web component or alternative develop the new component from scratch as a web component. The user can the integrate it into Panel them selves I believe.

MarcSkovMadsen · 2020-02-29T03:25:06Z

One more thing I would like to provide is a js_files: param.Dict (or similar) attribute where the user can specify which javascript files are need an any attributes like type that are needed.

js_files =[
    { "src": "https://unpkg.com/wired-elements@0.6.4/dist/wired-elements.bundled.js", 
      "type"= "module" }, 
}

The user still needs to remember to add them manually pn.config._js_files or semiautomatically via pn.extension("wired") or similar I belive.

MarcSkovMadsen · 2020-02-29T04:15:52Z

@philippjfr

After the model web_component.py file was modified in bcff9ae I get the error

How do I build and register the model before I run panel serve?

Before the the implementation used the __implementation__ attribute and the model was automatically compiled. Furthermore the web_component.ts file was using import { HTMLBox, HTMLBoxView } from "models/layouts/html_box" not import { HTMLBox, HTMLBoxView } from "@bokehjs/models/layouts/html_box"

I've tried the below without luck

$ python -m panel serve 'panel\tests\components\widgets\test_wired.py' --dev --show
2020-02-29 05:18:52,100 Starting Bokeh server version 1.4.0 (running on Tornado 6.0.3)
2020-02-29 05:18:52,100 User authentication hooks NOT provided (default user enabled)
2020-02-29 05:18:52,100 Bokeh app running at: http://localhost:5006/test_wired
2020-02-29 05:18:52,100 Starting Bokeh server with process id: 4368
Compilation failed:

panel/models/web_component.ts:1:38 - error TS2307: Cannot find module '@bokehjs/models/layouts/html_box'.

1 import { HTMLBox, HTMLBoxView } from "@bokehjs/models/layouts/html_box"
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
panel/models/web_component.ts:4:20 - error TS2307: Cannot find module '@bokehjs/core/properties'.

4 import * as p from "@bokehjs/core/properties"
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
panel/models/web_component.ts:16:14 - error TS2339: Property 'connect' does not exist on type 'WebComponentView'.

16         this.connect(this.model.properties.innerHTML.change, () => this.render())
                ~~~~~~~
panel/models/web_component.ts:22:18 - error TS2339: Property 'el' does not exist on type 'WebComponentView'.

22         if (this.el.innerHTML !== this.model.innerHTML) {
                    ~~
panel/models/web_component.ts:22:46 - error TS2339: Property 'innerHTML' does not exist on type 'WebComponent'.

22         if (this.el.innerHTML !== this.model.innerHTML) {
                                                ~~~~~~~~~
panel/models/web_component.ts:23:18 - error TS2339: Property 'el' does not exist on type 'WebComponentView'.

23             this.el.innerHTML = this.model.innerHTML; // Todo: Remove
                    ~~
panel/models/web_component.ts:23:44 - error TS2339: Property 'innerHTML' does not exist on type 'WebComponent'.

23             this.el.innerHTML = this.model.innerHTML; // Todo: Remove
                                              ~~~~~~~~~
panel/models/web_component.ts:24:45 - error TS2339: Property 'el' does not exist on type 'WebComponentView'.

24             this.webComponentElement = this.el.firstElementChild;
                                               ~~
panel/models/web_component.ts:45:24 - error TS2339: Property 'innerHTML' does not exist on type 'WebComponent'.

45         if (this.model.innerHTML !== this.webComponentElement.outerHTML) {
                          ~~~~~~~~~
panel/models/web_component.ts:46:24 - error TS2339: Property 'innerHTML' does not exist on type 'WebComponent'.

46             this.model.innerHTML = this.webComponentElement.outerHTML;
                          ~~~~~~~~~
panel/models/web_component.ts:70:24 - error TS2339: Property 'default_view' does not exist on type 'WebComponent'.

70         this.prototype.default_view = WebComponentView;
                          ~~~~~~~~~~~~
panel/models/web_component.ts:72:14 - error TS2339: Property 'define' does not exist on type 'typeof WebComponent'.

72         this.define<WebComponent.Props>({
                ~~~~~~
(.venv)
MASMA@PC70601 MINGW64 /c/repos/private/panel (web_component)
$ bokeh build
Working directory: C:\repos\private\panel
Not a bokeh extension. Quitting.
(.venv)
MASMA@PC70601 MINGW64 /c/repos/private/panel (web_component)
$ panel build
Working directory: C:\repos\private\panel
Not a bokeh extension. Quitting.
(.venv)
MASMA@PC70601 MINGW64 /c/repos/private/panel (web_component)
$ bokeh build "panel\models\web_component.py"
Working directory: C:\repos\private\panel\panel\models\web_component.py
Not a bokeh extension. Quitting.

philippjfr · 2020-02-29T04:29:59Z

Did you compile the models with panel build panel?

MarcSkovMadsen · 2020-02-29T04:32:50Z

Nope. I forgot that was what I had to do.

Now it works. Thanks.

…automatic resizing.

MarcSkovMadsen · 2020-03-15T07:59:34Z

Added echarts/ pycharts as an example WebComponent.

Really easy to support communication from server to client. The other way is not supported (yet). And the data transfer is a simple Dictionary not using the more efficient (?) ColumnDataSource.

HTML = """
    <div class="echart" style="width:100%;height:100%;"></div>
    <script type="text/javascript">
        var myScript = document.currentScript;
        var myDiv = myScript.parentElement.firstElementChild;
        var myChart = echarts.init(myDiv);
        myDiv.eChart = myChart;
        Object.defineProperty(myDiv, 'option', {
           get: function() { return null; },
           set: function(val) { this.eChart.setOption(val); this.eChart.resize();}
        });
        Object.defineProperty(myDiv, 'resizes', {
           get: function() { return null; },
           set: function(val) { this.eChart.resize();}
        });
    </script>"""

class EChart(pn.pane.WebComponent):
    html = param.String(HTML)
    properties_to_watch = param.Dict({"option": "option", "resizes": "resizes"})

    echart = param.Parameter()
    option = param.Dict()
    resizes = param.Integer()


    def __init__(self, **params):
        if "echart" in params:
            params["option"] = self._to_echart_dict(params["echart"])
        super().__init__(**params)

    @classmethod
    def _to_echart_dict(cls, echart):
        if isinstance(echart, dict):
            return echart
        if 'pyecharts' in sys.modules:
            import pyecharts
            if isinstance(echart, pyecharts.charts.chart.Chart):
                return json.loads(echart.dump_options())

        return {}

    @param.depends("echart", watch=True)
    def update(self):
        self.option = self._to_echart_dict(self.echart)

This only thing I can't get working is resizing. Its like running the eChart.resize() has no effect when done during render() of the bokeh model. But if I run it later it works.

@philippjfr or @xavArtley Any idea how to get this working?

You can run the example using

python -m panel serve 'panel\tests\test_echart.py' --dev --show

xavArtley · 2020-03-15T10:07:16Z

May be like for the vtk panel you have to override after_layout method and call the resize method in it

MarcSkovMadsen · 2020-03-15T15:32:05Z

Thanks @xavArtley . That did the trick.

MarcSkovMadsen · 2020-03-15T16:05:33Z

I cannot find resize functionality on the Google Model Viewer so i've created a support/ feature request here google/model-viewer#1088

MarcSkovMadsen · 2020-03-21T08:52:41Z

Just for the record. The basic functionality for the perspective-viewer has been implemented and is working well. The things that I would expect not working are streaming and getting selected rows back. But the rest I would expect to work just fine.

…mponent

MarcSkovMadsen · 2020-04-09T03:04:47Z

We've discussed to refactor this pull request into such that

The WebComponent becomes a part of the panel package
The Perspective, echarts/ pycharts, model-viewer, wiredjs implementations are moved to the examples gallery.

@philippjfr . Could you please confirm this is what you want? (It will require some work on my side, so please confirm).

philippjfr · 2020-04-09T14:11:03Z

Could you please confirm this is what you want? (It will require some work on my side, so please confirm).

Yes, I think this makes the most sense. As we refine the WebComponent model and the examples we can eventually consider migrating them into Panel itself or creating one or more panel extension packages.

philippjfr · 2020-04-24T01:16:44Z

Superseded by #1122

ltalirz · 2020-07-14T10:36:43Z

In case others stumble across this, it was meant to read "Superseded by #1252"

Marc Skov Madsen added 5 commits February 28, 2020 13:33

found out HTML can not be used for web component as it does not obser…

62d090c

…ve object

start

43f5f0f

proof of concept

a773729

refactor and more examples

e9a828e

removed

79f0ccc

MarcSkovMadsen self-assigned this Feb 28, 2020

MarcSkovMadsen added status: WIP type: feature A major new feature labels Feb 28, 2020

MarcSkovMadsen requested a review from philippjfr February 28, 2020 19:18

MarcSkovMadsen mentioned this pull request Feb 28, 2020

Add one or more libraries of web components to enable creating industrial quality apps in Panel #1120

Closed

MarcSkovMadsen changed the title ~~Web component~~ WebComponent pane to dramatically speed up creating new widgets in Panel Feb 28, 2020

MarcSkovMadsen requested review from xavArtley and jbednar February 28, 2020 19:24

use the new extension build

bcff9ae

philippjfr reviewed Feb 28, 2020

View reviewed changes

MarcSkovMadsen closed this Feb 29, 2020

MarcSkovMadsen reopened this Feb 29, 2020

Marc Skov Madsen added 4 commits March 14, 2020 06:31

fix some wired todos and a .ts bug

ff877b1

Started working on model viewer. Have issues.

a96e17a

started testing if wired works with pn.Param and fixed some problems.

d794089

added echarts/ pyecharts. The only functionality missing seems to be …

6451401

…automatic resizing.

MarcSkovMadsen mentioned this pull request Mar 15, 2020

Add support for echarts and pycharts #1133

Closed

Marc Skov Madsen added 2 commits March 15, 2020 16:27

Added ECharts example. Does not work in Notebook. But works with .show

027d705

got echarts to automatically resize

1c71519

MarcSkovMadsen mentioned this pull request Mar 15, 2020

I need resize function to add support for model-viewer to Python/ HoloViz Panel. google/model-viewer#1088

Closed

Marc Skov Madsen added 4 commits March 15, 2020 17:10

remove som experiment files that should not go to holoviz master

cb5cec2

fix textinput init issue

a3118eb

incremental work on aligning wired widgets with original widgets

c808007

alignment of panel widget and wired widget parameters

f7934a5

Marc Skov Madsen added 4 commits March 22, 2020 08:13

maturing wired components

2173f7b

fix bugs and errors

499d09b

Merge branch 'master' of https://github.com/holoviz/panel into web_co…

3998560

…mponent

change bk to bokeh

aaf903b

This was referenced Apr 5, 2020

Error: Model 'panel.models.markup.HTML' does not exist. #1233

Closed

Usage Questions regarding use in HoloViz Panel material-components/material-web#1080

Closed

MarcSkovMadsen mentioned this pull request Apr 9, 2020

Adding a WebComponent model and component #1252

Closed

MarcSkovMadsen mentioned this pull request Apr 19, 2020

Model viewer example #1281

Closed

philippjfr closed this Apr 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebComponent pane to dramatically speed up creating new widgets in Panel #1122

WebComponent pane to dramatically speed up creating new widgets in Panel #1122

MarcSkovMadsen commented Feb 28, 2020 •

edited

philippjfr commented Feb 28, 2020

MarcSkovMadsen commented Feb 28, 2020 •

edited

philippjfr commented Feb 28, 2020 •

edited

xavArtley commented Feb 28, 2020

philippjfr commented Feb 28, 2020

xavArtley commented Feb 28, 2020

philippjfr commented Feb 28, 2020

xavArtley commented Feb 28, 2020

philippjfr Feb 28, 2020

MarcSkovMadsen Feb 29, 2020

philippjfr Feb 29, 2020

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

philippjfr commented Feb 29, 2020

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Mar 15, 2020 •

edited

xavArtley commented Mar 15, 2020

MarcSkovMadsen commented Mar 15, 2020

MarcSkovMadsen commented Mar 15, 2020

MarcSkovMadsen commented Mar 21, 2020

MarcSkovMadsen commented Apr 9, 2020

philippjfr commented Apr 9, 2020

philippjfr commented Apr 24, 2020

ltalirz commented Jul 14, 2020

WebComponent pane to dramatically speed up creating new widgets in Panel #1122

WebComponent pane to dramatically speed up creating new widgets in Panel #1122

Conversation

MarcSkovMadsen commented Feb 28, 2020 • edited

philippjfr commented Feb 28, 2020

MarcSkovMadsen commented Feb 28, 2020 • edited

philippjfr commented Feb 28, 2020 • edited

xavArtley commented Feb 28, 2020

philippjfr commented Feb 28, 2020

xavArtley commented Feb 28, 2020

philippjfr commented Feb 28, 2020

xavArtley commented Feb 28, 2020

philippjfr Feb 28, 2020

Choose a reason for hiding this comment

MarcSkovMadsen Feb 29, 2020

Choose a reason for hiding this comment

philippjfr Feb 29, 2020

Choose a reason for hiding this comment

MarcSkovMadsen commented Feb 29, 2020 • edited

MarcSkovMadsen commented Feb 29, 2020 • edited

MarcSkovMadsen commented Feb 29, 2020 • edited

philippjfr commented Feb 29, 2020

MarcSkovMadsen commented Feb 29, 2020 • edited

MarcSkovMadsen commented Mar 15, 2020 • edited

xavArtley commented Mar 15, 2020

MarcSkovMadsen commented Mar 15, 2020

MarcSkovMadsen commented Mar 15, 2020

MarcSkovMadsen commented Mar 21, 2020

MarcSkovMadsen commented Apr 9, 2020

philippjfr commented Apr 9, 2020

philippjfr commented Apr 24, 2020

ltalirz commented Jul 14, 2020

MarcSkovMadsen commented Feb 28, 2020 •

edited

MarcSkovMadsen commented Feb 28, 2020 •

edited

philippjfr commented Feb 28, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Feb 29, 2020 •

edited

MarcSkovMadsen commented Mar 15, 2020 •

edited