Extract list of images selected by lassotool

Hey,

I have a dataframe df, like this [x,y,image_list], and I am creating a 2D scatter plot of x, y points. Now I want to extract a list of only those images selected by lassoselect tool. I have tried many things but nothing is working.

This is my code where I am using a JS callback function to print these images on console. Any help would be appreciated

from bokeh.plotting import figure, show
from bokeh.models import LassoSelectTool, ColumnDataSource, CustomJS
from bokeh.events import SelectionGeometry
import pandas as pd
import glob

folder_path = "C:\\Users\\User_name\\img_folder_path"
image_list = glob.glob(f"{folder_path}/*.jpg", recursive=True) + glob.glob(f"{folder_path}/*.png", recursive=True)

data = {
    'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'y': [10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
    'image_list': image_list[:10]
}
df = pd.DataFrame(data)

source = ColumnDataSource(df)

# Create a scatter plot
p = figure(width=400, height=400, tools='lasso_select', title='Image')
scatter = p.scatter('x', 'y', source=source)

#JavaScript callback
callback = CustomJS(args=dict(source=source), code="""
    const selected_indices = source.selected.indices;
    const selected_image_list = [];
    for (let i = 0; i < selected_indices.length; i++) {
        selected_image_list.push(source.data['image_list'][selected_indices[i]]);
    }
    // Send the selected image URLs to the Python code
    console.log("Selected Images:", selected_image_list);
""")

#JavaScript callback to the scatter plot's data source
scatter.data_source.selected.js_on_change('indices', callback)

show(p)

If you want to access the selection in Python code, then you want a Bokeh server application (connecting the JS and Python “sides” is the express purpose of the Bokeh server)

Additionally, @Sidddhartha_Kosti, if you must cross-post questions in different forums (e.g. StackOverflow), we appreciate if you add cross-links everywhere, so that future users can always get to an answer, regardless of where they find find the question.

Thanks Bryan, will go through the doc.

Yes, will keep this in mind :slight_smile:

@Sidddhartha_Kosti just to be clear I am asking that you edit the existing posts here and on SO in the manner described.

Hey Bryan, I edited my StakeOverflow post, but can’t edit this post, maybe permission issues. BTW, is there any other way to resolve this issue. As I am planning to use this code block on streamlit

Sorry, I have zero experience with streamlit. I am not sure whether they support deploying Bokeh server applications or not.