[BUG] Got error when pyg_html = pyg.to_html(all_df, spec=vis_spec)

[Louis-udm]

Hi,

I got an error when do pyg_html = pyg.to_html(all_df, spec=vis_spec) and the vis_spec is copied from PygWalker UI. I tryied copy python string or export as json file, and does not work for both.

vis_spec = r"""{"config":"[{\"visId\":\"gw_gk-j\",\"name\":\"Chart 1\",\"encodings\":{\"dimensions\":[{\"dragId\":\"gw_Hx5M\",\"fid\":\"GW_3A7K11RPVIJPBTY6A7K\",\"name\":\"model_name\",\"basename\":\"model_name\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_V6W-\",\"fid\":\"GW_CHHI4ZTJ98JUWG\",\"name\":\"summary\",\"basename\":\"summary\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_mea_key_fid\",\"fid\":\"gw_mea_key_fid\",\"name\":\"Measure names\",\"analyticType\":\"dimension\",\"semanticType\":\"nominal\"}],\"measures\":[{\"dragId\":\"gw_0XY8\",\"fid\":\"GW_1HZ6NYRW6QVWK180\",\"name\":\"F1 score\",\"basename\":\"F1 score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_3s6c\",\"fid\":\"GW_9CHH66MJ5QKKVYRMLDMZ8J4I38DS\",\"name\":\"perplexity score\",\"basename\":\"perplexity score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_U1vn\",\"fid\":\"GW_2YBCWMOE99T9YAYPKQ8\",\"name\":\"blue score\",\"basename\":\"blue score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_qKqY\",\"fid\":\"GW_OF0FTHBL7GFA5XY4VZ1S\",\"name\":\"rouge score\",\"basename\":\"rouge score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_H29e\",\"fid\":\"GW_1DBEOXMH0OY1ZND69Y5DUKQ4MVUY40\",\"name\":\"SentenceSim score\",\"basename\":\"SentenceSim score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_YZGf\",\"fid\":\"GW_45C50BNKG6PHNLX03KJ4TS\",\"name\":\"bleurt score\",\"basename\":\"bleurt score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_VfaT\",\"fid\":\"GW_2YAAKBPK6VUQDJWVZ1S\",\"name\":\"bert score\",\"basename\":\"bert score\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_count_fid\",\"fid\":\"gw_count_fid\",\"name\":\"Row count\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\",\"computed\":true,\"expression\":{\"op\":\"one\",\"params\":[],\"as\":\"gw_count_fid\"}},{\"dragId\":\"gw_mea_val_fid\",\"fid\":\"gw_mea_val_fid\",\"name\":\"Measure values\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"}],\"rows\":[{\"dragId\":\"gw_KMu1\",\"fid\":\"gw_mea_val_fid\",\"name\":\"Measure values\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"}],\"columns\":[{\"dragId\":\"gw_NXxS\",\"fid\":\"gw_mea_key_fid\",\"name\":\"Measure names\",\"analyticType\":\"dimension\",\"semanticType\":\"nominal\"}],\"color\":[{\"dragId\":\"gw_zE7F\",\"fid\":\"GW_3A7K11RPVIJPBTY6A7K\",\"name\":\"model_name\",\"basename\":\"model_name\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"}],\"opacity\":[],\"size\":[{\"dragId\":\"gw_MFYP\",\"fid\":\"GW_CHHI4ZTJ98JUWG\",\"name\":\"summary\",\"basename\":\"summary\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"}],\"shape\":[],\"radius\":[],\"theta\":[],\"longitude\":[],\"latitude\":[],\"geoId\":[],\"details\":[],\"filters\":[],\"text\":[]},\"config\":{\"defaultAggregated\":false,\"geoms\":[\"line\"],\"showTableSummary\":false,\"coordSystem\":\"generic\",\"stack\":\"stack\",\"showActions\":false,\"interactiveScale\":false,\"sorted\":\"none\",\"zeroScale\":true,\"scaleIncludeUnmatchedChoropleth\":false,\"size\":{\"mode\":\"fixed\",\"width\":654,\"height\":411},\"format\":{},\"geoKey\":\"name\",\"resolve\":{\"x\":false,\"y\":false,\"color\":false,\"opacity\":false,\"shape\":false,\"size\":false},\"limit\":-1,\"folds\":[\"GW_1HZ6NYRW6QVWK180\",\"GW_2YBCWMOE99T9YAYPKQ8\",\"GW_OF0FTHBL7GFA5XY4VZ1S\",\"GW_1DBEOXMH0OY1ZND69Y5DUKQ4MVUY40\",\"GW_45C50BNKG6PHNLX03KJ4TS\",\"GW_2YAAKBPK6VUQDJWVZ1S\"]}}]","chart_map":{},"version":"0.3.9"}"""

python3.10/site-packages/pygwalker/api/html.py", line 46, in to_html
    walker = PygWalker(
TypeError: pygwalker.api.pygwalker.PygWalker() got multiple values for keyword argument 'spec'

[ObservedObserver]

If you want to use to_html, try:

walker = pyg.walk(all_df, spec=vis_spec)
walker.to_html()

I will add this to the tutorial today. Here is an example demo app shows how the API works https://github.com/ObservedObserver/pygwalker-dash/blob/main/app.py

[longxiaofei]

pyg.to_html is deprecated function.

refer answer of ObservedObserver.

[Louis-udm]

Thanks @ObservedObserver and @longxiaofei ! I actually used streamlit and referred to this blog: https://docs.kanaries.net/pygwalker/use-pygwalker-with-streamlit#saving-pygwalker-chart-state

Then I changed the code to:

walker = pyg.walk(all_df, spec=vis_spec)
pyg_html = walker.to_html()

When I run it again, I see a endless loop that prints endless chars on the terminal. Then I also tried change to us dash like in https://github.com/ObservedObserver/pygwalker-dash/blob/main/app.py, and the endless loop appeared again.

[longxiaofei]

@Louis-udm Hi, you can use new pygwalker in streamlit.

refer: https://github.com/Kanaries/pygwalker/releases/tag/0.3.8.

I haven't updated the new document yet.

[Louis-udm]

I am using pygwalker 0.3.9 under python 3.10, should I downgrade to 0.3.8? I found by using this code, the endless print loop appears.

walker = pyg.walk(all_df)
pyg_html = walker.to_html()

[longxiaofei]

It should not be a cycle, just a long string. This bug will be fixed in the next version.

If you use streamlit.

try it.

from pygwalker.api.streamlit import StreamlitRenderer, init_streamlit_comm
import pandas as pd
import streamlit as st

# Adjust the width of the Streamlit page
st.set_page_config(
    page_title="Use Pygwalker In Streamlit",
    layout="wide"
)

# Initialize pygwalker communication
init_streamlit_comm()

@st.cache_resource
def get_pyg_renderer() -> "StreamlitRenderer":
    df = pd.DataFrame()
    # When you need to publish your application, you need set `debug=False`,prevent other users to write your config file.
    return StreamlitRenderer(df, spec="./gw_config.json", debug=True)

renderer = get_pyg_renderer()

renderer.render_explore()

This is the best practice in streamlit.

[Louis-udm]

It should not be a cycle, just a long string. This bug will be fixed in the next version.

If you use streamlit.

try it.

from pygwalker.api.streamlit import StreamlitRenderer, init_streamlit_comm
import pandas as pd
import streamlit as st

# Adjust the width of the Streamlit page
st.set_page_config(
    page_title="Use Pygwalker In Streamlit",
    layout="wide"
)

# Initialize pygwalker communication
init_streamlit_comm()

@st.cache_resource
def get_pyg_renderer() -> "StreamlitRenderer":
    df = pd.DataFrame()
    # When you need to publish your application, you need set `debug=False`,prevent other users to write your config file.
    return StreamlitRenderer(df, spec="./gw_config.json", debug=True)

renderer = get_pyg_renderer()

renderer.render_explore()

This is the best practice in streamlit.

It works!

[longxiaofei]

@Louis-udm

or, you want to only get html, try it:

walker = pyg.walk(df, env="others")
pyg_html = walker.to_html()

Because Pygwalker was developed as a jupyter tool before, so many functions are coupled with Jupyter.

When using pygwalker on other platforms, these methods can be confusing.

We will improve it.