PablocFonseca / streamlit-aggrid

Implementation of Ag-Grid component for Streamlit
https://pypi.org/project/streamlit-aggrid/
MIT License
1.05k stars 199 forks source link

Links display issue with streamlit-aggrid #235

Closed BillelBenoudjit closed 1 year ago

BillelBenoudjit commented 1 year ago

Hello,

I am having an issue with displaying links using streamlit-aggrid with the following environment:

The issue is with the following code:

import streamlit as st
import pandas as pd

from st_aggrid import AgGrid
from st_aggrid.shared import GridUpdateMode
from st_aggrid.shared import JsCode
from st_aggrid.grid_options_builder import GridOptionsBuilder

status_style_jscode = JsCode(
    """
        function(params) {
            if (params.value == 'failed') {
                return {
                    'color': 'white',
                    'backgroundColor': 'salmon'
                }
            } else if  (params.value == 'done') {
                return {
                    'color': 'black',
                    'backgroundColor': 'lightGreen'
                }
            } else if  (params.value.substring(2) === '%') {
                return {
                    'color': 'black',
                    'background': 'linear-gradient(to right, orange ' + params.value.substring(0,2) + '%, #FFFFFF 0%) no-repeat'
                }
            }
        };
    """
)

def display(df):
    """Display analysis

    Args:
        df (Dataframe): Analysis data
    """    

    st.info('Please refresh the page to get report updates.')
    st.error('⚠️ Please keep in mind that files older than two weeks will be removed, please consider making a copy of your report(s).')

    if len(df) > 0:
        preview_cols = ['bundle_identifier', 'platform', 'status', 'url', 'countries', 'list_id', 'start_date', 'end_date', 'date_added', 'event_name']
        df = df.reset_index(drop=True)
        df.sort_values('time_added', ascending=False, inplace=True)
        df = df.replace("'", "", regex=True)
        df['revenue_concentration_list_id'] = df['revenue_concentration_list_id'].replace('', '#')
        df = df.rename(columns={'revenue_concentration_list_id': 'list_id'})

        gb = GridOptionsBuilder.from_dataframe(df[preview_cols])
        gb.configure_column("status", cellStyle=status_style_jscode)
        gb.configure_column("url",
                            cellRenderer=JsCode(
                                '''function(params) {return '<a target="_blank" href="' + params.value + '" >' + params.value + '</a>'}'''),
                            width=300)

        gridOptions = gb.build()
        data = AgGrid(
            df[preview_cols].head(300),
            gridOptions=gridOptions,
            enable_enterprise_modules=True,
            allow_unsafe_jscode=True,
            update_mode=GridUpdateMode.SELECTION_CHANGED
        )

The problem I am having is with the url column where instead of having a link that I can reach by clicking, I get html code like this: <a target="_blank" href="' + params.value + '" >' + params.value + '</a>

I have to mention I did not get this problem when using older versions (Pyhton: 3.9 & streamlit-aggrid: 0.3.3).

BillelBenoudjit commented 1 year ago

I have managed to fix this issue following this thread #198.