import dash
from dash.exceptions import PreventUpdate
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

# Create dash app
app = dash.Dash(__name__)

# Set dog and cat images
dogImage = "https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/dog.png"
catImage = "https://d2ph5fj80uercy.cloudfront.net/06/cat3602.jpg"

# Generate dataframe
df = pd.DataFrame(
    dict(
        x=[1, 2],
        y=[2, 4],
        images=[dogImage, catImage],
    )
)

# Create scatter plot with x and y coordinates
fig = px.scatter(df, x="x", y="y", custom_data=["images"])

# Update layout and update traces
fig.update_layout(clickmode='event+select')
fig.update_traces(marker_size=20)

# Create app layout to show dash graph
app.layout = html.Div(
    [
        dcc.Graph(
            id="graph_interaction",
            figure=fig,
        ),
        html.Img(id='image', src='')
    ]
)


# html callback function to hover the data on specific coordinates
@app.callback(
    Output('image', 'src'),
    Input('graph_interaction', 'hoverData'))
def open_url(hoverData):
    if hoverData:
        return hoverData["points"][0]["customdata"][0]
    else:
        raise PreventUpdate


if __name__ == '__main__':
    app.run_server(port=7860, debug=True, )