search

justpy-org / justpy

An object oriented high-level Python Web Framework that requires no frontend programming
https://justpy.io
Apache License 2.0
1.22k stars 95 forks source link

Ag-Grid event rowClicked and rowDoubleClicked don't work #304

Closed othalan closed 1 year ago

othalan commented 3 years ago

Using Ag-Grid, the events rowClicked and rowDoubleClicked do not work. This is a problem with both the latest version (0.2.2) and the previous version (0.1.5). Problem verified on Firefox, Chrome, and Safari web browsers.

Example code - Double click on any row, should have the same effect as using the selection checkbox:

import justpy as jp
import pandas as pd

wm_df = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)

def row_selected(self, msg):
    print(msg)
    if msg.selected:
        self.row_data_div.text = msg.data
        self.row_selected = msg.rowIndex
    elif self.row_selected == msg.rowIndex:
        self.row_data_div.text = ''

def grid_test():
    wp = jp.WebPage()
    row_data_div = jp.Div(a=wp)
    grid = wm_df.jp.ag_grid(a=wp)
    grid.row_data_div = row_data_div
    grid.on('rowSelected', row_selected)
    grid.on('rowDoubleClicked', row_selected)
    grid.options.columnDefs[0].checkboxSelection = True
    return wp

jp.justpy(grid_test)

Error shown on the console in Firefox:

Uncaught TypeError: cyclic object value
    send_to_server http://127.0.0.1:8123/:380
    global_listener http://127.0.0.1:8123/:1771
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    flushAsyncQueue http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    flushAsyncQueue http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    setTimeout handler*i</e.prototype.dispatchAsync http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    dispatchEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    onCellClicked http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    onMouseEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    processMouseEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addSafePassiveEventListener http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addDestroyableEventListener http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    init http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEachMetaDataInHierarchy http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBeans http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBean http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createComponent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createComponentFromElement http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    setTemplateFromElement http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    setTemplate http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    init http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEachMetaDataInHierarchy http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBeans http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBean http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    e http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    grid_change http://127.0.0.1:8123/:1712
    mounted http://127.0.0.1:8123/:1777
    VueJS 14
        He
        Yt
        insert
        k
        zi
        _update
        r
        get
        fn
        mount
        $mount
        $mount
        _init
        wn
    <anonymous> http://127.0.0.1:8123/:2363
127.0.0.1:8123:380:30
    send_to_server http://127.0.0.1:8123/:380
    global_listener http://127.0.0.1:8123/:1771
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    flushAsyncQueue http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    flushAsyncQueue http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    <anonymous> self-hosted:1175
    (Async: setTimeout handler)
    dispatchAsync http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:4357
    dispatchToListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    dispatchEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    onCellClicked http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    onMouseEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    processMouseEvent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    <anonymous> self-hosted:1222
    (Async: EventListener.handleEvent)
    addSafePassiveEventListener http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addDestroyableEventListener http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    addMouseListeners http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    init http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEachMetaDataInHierarchy http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBeans http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBean http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createComponent http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createComponentFromElement http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    createChildComponentsFromTags http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    setTemplateFromElement http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    setTemplate http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    init http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEachMetaDataInHierarchy http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    forEach self-hosted:205
    callLifeCycleMethods http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBeans http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    wireBean http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    e http://127.0.0.1:8123/templates/local/ag-grid-community.js:8
    grid_change http://127.0.0.1:8123/:1712
    grid_change self-hosted:1175
    mounted http://127.0.0.1:8123/:1777
    VueJS 14
        He
        Yt
        insert
        k
        zi
        _update
        r
        get
        fn
        mount
        $mount
        $mount
        _init
        wn
    <anonymous> http://127.0.0.1:8123/:2363

Link to the web page giving more information:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

elimintz commented 3 years ago

Thanks for catching this, it is a bug in Justpy. The rowClicked and doubleClicked events have an additional field called source that is circular and cannot be stringified.

I've change it for the next version but just add the line: delete e.source;

after this line: https://github.com/elimintz/justpy/blob/master/justpy/templates/js/aggrid.js#L131 It fixes the problem

WolfgangFahl commented 2 years ago

has this been fixed?

WolfgangFahl commented 1 year ago

Test occasionally times out