src/components/render_tab_project.py

import streamlit as st
import altair as alt

def render(tab, proj_df):
    tab.subheader('Projection based on fuzzy ratios')
    tab.text(
        'Note that only the version, as selected above, would be visualized per bill. '
        'Only bills in the "Tables" tab are colored, with colors are assigned to the highest % similarity. '
        'This was done using PCA for quick visualization.'
    )
    # tab.scatter_chart(
    #     proj_df,
    #     x='PC 1',
    #     y='PC 2',
    #     color='label',
    #     size='type',
    #     width=800,
    #     height=800,
    # )
    
    # label_sel = alt.selection_multi(fields=['label'], bind='legend')
    # type_sel = alt.selection_multi(fields=['type'], bind='legend')
    chart = (
        alt.Chart(proj_df)
        .mark_point(
            filled=True,
        )
        .encode(
            x='PC 1',
            y='PC 2',
            color=alt.Color('label', scale=alt.Scale(
                domain=['CSM-OAI','People-First','TCAI','YPA','none'],
                range=['#1b9e77','#d95f02','#7570b3','#e7298a','#afafaf'],
            )),
            size=alt.Size('type', scale=alt.Scale(
                domain=['model bill', 'legis. sim. to model','legis. w/o sim.'], 
                range=[500, 30, 5],
            )),
            shape=alt.Shape('is-model', scale=alt.Scale(
                domain=['model bill', 'legislation'], 
                range=['triangle-up', 'circle', 'circle'],
            )),
            opacity=alt.Opacity('type', scale=alt.Scale(
                domain=['model bill', 'legis. sim. to model','legis. w/o sim.'], 
                range=[0.8, 0.6, 0.1],
            )),
        )
        # .add_selection(
        #     label_sel,
        #     type_sel
        # )
        .interactive()
    )
    
    tab.altair_chart(
        chart,
        theme="streamlit",
        width=1000,
        height=600
    )