Webpage upgrade - how to display AMWG Tables

[justin-richling]

As I am going through the webpage update one issue that needs some attention is how the AMWG tables are displayed.

The way the page is being built, the plot types can be displayed in a way that it looks like the user never navigates away from the page, but in reality the plot html files are formatted exactly like the main page, just with the images on the right side.

At the moment when a user clicks the desired table (case, baseline/obs, or comparison) it navigates to that page. This generated table html page is not formatted like any other html page and thus one must navigate manually back from the table page.

The ideal situation is to format the table html pages like the different plot types (above images). The immediate problem is that to format the AMWG tables (which are generated in amwg_table.py), it requires jinja and data that live in the adf_diag.py script. Thus, it seems like we would need to grab this data and have it pulled into the amwg_table.py section that builds the table html files. The reason why the plot type html files can be formatted correctly and easily is that they are generated in adf_diag.py where jinja has access to the data necessary to build it. This method of formatting the table html files seems like it would take a decent amount of change to both scripts. Maybe I'm overestimating the level of work, but it seems like a lot up front.

The best I've gotten is to add the top navigation bar to the table files (where clicking 'Home' will take you back to the case main page):

The other option is to embed the AMWG tables in the Tables page of the website. This is easier, but the embed tag doesn't allow for clicking on links to show/hide the table html file, so all the tables will be visible all the time. To me this is not ideal, as some of the tables can be large if the number of variables are large, but maybe someone has other thoughts.

There are plenty of ways to get around this problem, but would require at least JavaScript. Although I have dealt with JS before, I don't recommend we go this route now.

This may be a slight hiccup, but we can still have a working version of the new webpage even if we just have to navigate away from the table pages. Sorry for the long post, but I would be happy to give some in-person explanation if any of this is unclear or if there are options I haven't explored.

[cecilehannay]

@justin-richling: Thanks for the update. Do you have an example of the webpage you created? I mean a link that we could look at? Thanks.

[justin-richling]

Yeah, here is the non-embedded one: https://project.cgd.ucar.edu/projects/ADF/web_update/f.e21.FWscHIST.ne30_L48_BL10_cam6_3_041_kzz3_zmtop75.hf.001_vs_f.e21.FWscHIST.ne30_L48_BL10_cam6_3_041_control.hf.001_1982_1990/website/index.html

And the embedded one: https://project.cgd.ucar.edu/projects/ADF/web_update/amwg_table_embed/f.e21.FWscHIST.ne30_L48_BL10_cam6_3_041_kzz3_zmtop75.hf.001_vs_f.e21.FWscHIST.ne30_L48_BL10_cam6_3_041_control.hf.001_1982_1990/website/index.html

Quick note, the navigation to and from the Tables and Plot types (LatLon and Zonal) are broken, to get back to the main page click the 'Home' link in the navbar.

[cecilehannay]

Hi Justin,

Thanks for the webpage. It is useful to visualize.

Personally, I prefer the non-embedded option. My concern is that when we have a large number of variables, it will be inconvenient to have several tables one after the other (you mentioned that too). I think the best option to have the tables on separate pages.

Maybe we could have the list of tables on the left column and the table itself on the right column. Something like:

But it is just an idea. I haven't think if it is easy to do.

[cecilehannay]

One more thought:

For the Lat/Lon and zonal plots, good job on including the plot on the right column (like in @swrneale's SCAM).

One thing that I wonder if how it will look when you have many variables like the 99 variables we are outputting right now (and maybe more later).
Could you try to run this, just to have an idea. It might be that when we have too many variables, it is not convenient to have the plot on the right column. Or maybe it is ok. It would be useful to have an example.
Thanks.

[justin-richling]

Maybe we could have the list of tables on the left column and the table itself on the right column.

This was the original idea, but was the initial problem too :/

It might be that when we have too many variables, it is not convenient to have the plot on the right column. Or maybe it is ok. It would be useful to have an example.

I will get a working example and report back

[andrewgettelman]

So I was just trying to output a pandas (formatted) table from a jupyter notebook today. And it was not that simple. One idea might be to actually turn the tables into images (e.g., generate png from adf_table.py). There are some packages that do this.

Then we could re-use most of the same infrastructure on the web pages that we use for figures, since tables are just another figure.

Would that help? Just a thought.

[justin-richling]

I like this idea, I'll spend some time seeing what's available. Thanks for the suggestion

[swrneale]

I like this method as well. This was easy to render in ncl as a png file.

[nusbaume]

To add my two cents to this discussion, there is still currently a need to create an internal ADF interface so that any future plotting or table-generation script can easily add their plots/tables to the website. This would likely require moving the HTML generation code in amwg_table.py over to adf_diag.py anyways, and could provide a way to then send the associated pandas dataframes over from the script to the website generator. Not saying this necessarily better than just converting the table to an image file, but just that much of this infrastucture work will need to be done anyways.