Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export rows as displayed with sorting applied #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

RexBarker
Copy link

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
Copy link
Contributor

Thanks for your contribution!

Could you provide code and steps to reproduce the issue?

@RexBarker
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

RexBarker commented Mar 29, 2023

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
Copy link
Author

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

@maartenbreddels
Copy link
Contributor

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
Copy link
Author

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

@maartenbreddels
Copy link
Contributor

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

@maartenbreddels
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants