Export rows as displayed with sorting applied

[RexBarker]

This change allows the rows to be exported as displayed in the table. This considers the following:

• only sorted rows are taken (as previous implementation)
• sorting order of the rows is used
• grouped row header is not exported
• collapsed groups are not exported

[mariobuikhuizen]

Thanks for your contribution!

Could you provide code and steps to reproduce the issue?

[RexBarker]

Hello,
Here is a minimum viable example to demonstrate the issue. Using the Olympic sample data as input, sort on the country name. In the sorted state, "Afghanistan" will be on the top. However, the export to a dataframe yields the rows in the original input state.

The intent of the PR is to output the rows as they are displayed in the sorting order. The graphic below shows the results with the current version of the ipyagrrid widget. With the changes to the JS backend, the sorted order (as displayed) will also be present in the dataframe.

Execute in a Jupyter notebook with ipyaggrid and pandas installed.
Step 1: Create Grid

import os
import json
import numpy as np
import pandas as pd
import urllib.request as ur
import ipywidgets as widgets
from ipyaggrid import Grid

url = 'https://www.ag-grid.com/example-assets/olympic-winners.json'
with ur.urlopen(url) as res:
    data = json.loads(res.read().decode('utf-8'))

columnDefs = [
    {'headerName': "Country", 'field': "country"},
    {'headerName': "Year", 'field': "year"},
    {'headerName': "Sport", 'field': "sport"},
    {'headerName': "Athlete", 'field': "athlete"},
    {'headerName': "Gold", 'field': "gold"},
];


gridOptions = {
    'enableColResize': True,
    'columnDefs': columnDefs,
    'enableSorting':True,
    'defaultColDef': {'sortable': True}
};

grid1 = Grid(quick_filter=True,
             theme='ag-theme-balham',
             compress_data=True,
             grid_options=gridOptions,
             grid_data=data,
             columns_fit="auto")
grid1

Step 2: Sort table by "country" column

Step 3: Output the dataframe:
grid1.grid_data_out.get('grid')

Result: Order of the output dataframe is the same as the original data; the sorting order of the user interaction was not applied to the output

Fix: As described in PR code

[mariobuikhuizen]

Thank you for this description.

If I try this with your PR, it doesn't work for me. The output op grid1.grid_data_out.get('grid') is still in the original order.

[RexBarker]

My appologies. I realize now that it was because in my version, I have both #23 and this PR combined (they should be combined to fully test this case). The reason why it didn't work for you is that in this version, the sync_on_sort event is not applied (see #23). With this additional event, it causes a new output of the grid when sorted. Normally, user changes to the order did nothing for a grid update event.

Here is the revised version to try when combined with #23. The appropriate flags are added in this case:

import os
import json
import numpy as np
import pandas as pd
import urllib.request as ur
import ipywidgets as widgets
from ipyaggrid import Grid

url = 'https://www.ag-grid.com/example-assets/olympic-winners.json'
with ur.urlopen(url) as res:
    data = json.loads(res.read().decode('utf-8'))

columnDefs = [
    {'headerName': "Country", 'field': "country"},
    {'headerName': "Year", 'field': "year"},
    {'headerName': "Sport", 'field': "sport"},
    {'headerName': "Athlete", 'field': "athlete"},
    {'headerName': "Gold", 'field': "gold"},
]

gridOptions = {
    'enableColResize': True,
    'columnDefs': columnDefs,
    'enableSorting':True,
    'defaultColDef': {'sortable': True}
}

grid1 = Grid(
    quick_filter=True,
    theme='ag-theme-balham',
    compress_data=True,
    grid_options=gridOptions,
    sync_grid=True,     # <- normal sync
    sync_on_edit=True,  # <- sync event for edits
    sync_on_sort=True,  # <- sync event when sorted
    grid_data=data,
    columns_fit="auto"
)

grid1

[RexBarker]

@maartenbreddels : any outlook on incorporating these PRs #22, #23, #24 ?

[maartenbreddels]

Yes, we had some work to do, which eventually landed in ipyaggrid #32 which allows us to do visual tests. This means we will not have regressions, and expected behaviour.

Are you willing to try this? Basically you can rewrite your example as a test. See https://solara.dev/docs/howto/testing for the documentation. I think this feature should only be tested with the solara_test fixture since we only test a feature that we expect to behave the same in all jupyter environments.

Note that this requires a new release of solara, which I plan to do soon. Otherwise you can see #32 how the dev install of solara is done.

[RexBarker]

I can give that a try this week to get the tests working. A good excercise to learn as well 👍 . Thanks!

[maartenbreddels]

If you run into issues, I'm happy to help. It will be good feedback for us if the documentation is good enough.

[maartenbreddels]

#32 is merged, so if you rebase on master, you already have the directory structure you need setup.