load_pandas_frame confusion

[series0]

Hello! Back to trying to use justpy for a quick web gui for python again. I tried justpy with some success over a year ago.

Code listed below displays NOTHING. This was basically following the example for using pandas to create grids.

I examine the dataframe in visual studio code and the data is all there. But the page delivered shows NOTHING. To my not very well trained web (html) eye it seems the grid component added to the page is a stub only (shown in snip image).

I would LOVE to know the answer to this question:
Where in the webpage object can I find the data I loaded?
I would think it would be in the ag-grid component. But then where in that?

Also, If I first make a webpage and then add a jp.Div to it, I should be able to then add the grid to the Div instead of the whole web page, right?

So, to me, it seems that a) I DO have a proper dataframe (because I can print it out and my data is there). So, b) the load_pandas_frame function is NOT WORKING and NOT THROWING AN ERROR (both). What should I do?

def do_it(self):
    d_mysql = dopmysql(DEBUG, host2, user2, password2, database2, dopmysql_connection_type.DOPMYSQL_CONNECTION_TYPE_DOP)
    sql = "select * from _insurance"
    df = pan.read_sql(sql, d_mysql.connection)
    print(df)

    wp = jp.WebPage()

    grid = jp.AgGrid(a=wp)

    grid.load_pandas_frame(df)
    grid.options.pagination = True
    grid.options.paginationAutoPageSize = True
    grid.options.columnDefs[0].cellClass = ['text-white', 'bg-blue-500', 'hover:bg-blue-200']
    for col_def in grid.options.columnDefs[1:]:
        col_def.cellClassRules = {
            'font-bold': 'x < 20',
            'bg-red-300': 'x < 20',
            'bg-yellow-300': 'x >= 20 && x < 50',
            'bg-green-300': 'x >= 50'
        }

    return wp

jp.justpy(do_it)

[masykur8d]

Hi, for the question of where is the grid data location, then it is located in options.rowData.
reference: https://www.ag-grid.com/angular-data-grid/data-update-row-data/
In your case, I think it is located in grid.options.rowData

Run this example below to see the data which will be printed in console:

import justpy as jp
import pandas as pd

wm_df = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)
def grid_test17():
    wp = jp.WebPage()
    grid = jp.AgGrid(a=wp, auto_size=True, style = "height: 99vh; width: 100%", theme='ag-theme-material')
    grid.load_pandas_frame(wm_df)
    print(grid.options.rowData)
    return wp

jp.justpy(grid_test17)

For question of adding grid to div, then yes you can.

For other questions, I do not have answers. If you can provide an actual code which shows data in the console but doesn't show the grid in the actual webpage, then it might help others to understand more and give you answers.

[WolfgangFahl]

Thank you for reporting this issue:

• Where in the webpage object can I find the data I loaded? I would think it would be in the ag-grid component. But then where in that?

You'll need to look with the webbrowser debugging tools for the content.

[WolfgangFahl]

[WolfgangFahl]

I should be able to then add the grid to the Div instead of the whole web page, right? yes

[WolfgangFahl]

So, to me, it seems that a) I DO have a proper dataframe (because I can print it out and my data is there)

This is why this is still an open issue. You might want to provide the data of your dataframe and check it. We have recently refactored the loading of dataframes so that it used the standard list of dict loading. So the list of dicts you supply and the columndefs need to work. Also you might want to catch any errors with a try catch block to make sure you actually see them. But first could you supply a few rows of your

select * from insurance

e.g. by doing

select * from insurance limit 10

as a json or csv to make your problem actually reproducible.

   def load_pandas_frame(self, df):
        """
        load the given pandas dataframe
        
        Args:
            df: the dataframe to load
        """
        assert _has_pandas, f"Pandas not installed, cannot load frame"
        columnDefs = []
        for i in df.columns:
            if is_numeric_dtype(df[i]):
                col_filter = "agNumberColumnFilter"
            elif is_datetime64_any_dtype(df[i]):
                col_filter = "agDateColumnFilter"
            else:
                col_filter = True  # Use default filter
            columnDefs.append(Dict({"field": i, "filter": col_filter}))
        # Change NaN and similar to None for JSON compatibility
        lod = (
            df.replace([np.inf, -np.inf], [sys.float_info.max, -sys.float_info.max])
            .where(pd.notnull(df), None)
            .to_dict("records")
        )
        self.load_lod(lod=lod,columnDefs=columnDefs)
        
    def load_lod(self,lod:list,columnDefs:list=None):
        """
        load the given list of dicts
        
        Args:
            lod(list): a list of dicts to be loaded into the grid
            columnDefs(list): a list of column definitions
        """
        if columnDefs is None:
            # assume lod
            columnDefs = []
            if len(lod)>0:
                header=lod[0]
                for key, value in header.items():
                    if isinstance(value, int) or isinstance(value, float):
                        col_filter = "agNumberColumnFilter"
                    elif isinstance(value, datetime.date) or isinstance(value, datetime.date):
                        col_filter = "agDateColumnFilter"
                    else:
                        col_filter = True  # Use default filter
                    columnDefs.append(Dict({'field': key, "filter": col_filter}))
        self.options.columnDefs=columnDefs
        self.options.rowData=lod

[WolfgangFahl]

@series0 I'd love to handle this in the current 0.12 milestone - so please provide the details of your dataframe.

[WolfgangFahl]

see #650 for a similar question. I am converting this one to a question too as we don't know what the culprit data looks like yet.