from pathlib import Path
import streamlit as st
import streamlit.components.v1 as components
import plotly.figure_factory as ff
import numpy as np
import pandas as pd
#from streamlit_plotly_events import plotly_events



def app():
    st.markdown('#### Visualization')

    img_2d_embed = pd.read_csv('data/img_2d_embedding.csv', index_col=0)
    img_2d_embed = img_2d_embed.sample(frac=0.1, random_state=0)

    txt_2d_embed = pd.read_csv('data/txt_2d_embedding.csv', index_col=0)
    txt_2d_embed = txt_2d_embed.sample(frac=0.1, random_state=0)

    col1, col2 = st.columns(2)
    with col1:
        fig1 = ff.create_2d_density(
            x=img_2d_embed['UMAP_1'],
            y=img_2d_embed['UMAP_2'],
            #colors=img_2d_embed['tag'],
            colorscale='Blues',  # set the color map
            height=500,  # set height of the figure
            width=500,  # set width of the figure
            title='Image embedding visualized in 2D UMAP'
        )
        #selected_points = plotly_events(fig1, click_event=True, hover_event=True)
        st.plotly_chart(fig1, use_container_width=True)

    with col2:
        fig2 = ff.create_2d_density(
            x=txt_2d_embed['UMAP_1'],
            y=txt_2d_embed['UMAP_2'],
            #colors=img_2d_embed['tag'],
            colorscale='Blues',  # set the color map
            height=500,  # set height of the figure
            width=500,  # set width of the figure
            title='Text embedding visualized in 2D UMAP'
        )
        st.plotly_chart(fig2, use_container_width=True)