Inherit scale and location properties

[Dirk Remmers]

Hey all, what a great visualization tool!

I might have a suggestoin that would make it even nicer to use.

The main thing that would improve the usability a lot would be 'automatic scaling'.
Even with the use of different screen sizes, the image-comparison result will always have a fixed size (pixel based)
If you're only working on one device, you can tailor it for this. Unfortunately this won't be the case for many uses though. Therefore I believe that it would be beneficial to make the size scalable, just as all 'default' streamlit plotting options, like st.image. At this moment, some funny things can happen when using columns, or calling other streamlit objects after calling image_comparison().

As a simplified example of what I mean, I added a screenshot of how my app looks, after I've called the following code:

# set columns
cols = st.columns(2)

# define which image you want to see
image_sel = cols[0].selectbox('Select the image you want to see.', image_name_list)

# next I want to see this image using image_comparison
image_comparison(image_1, image_2)

# beneath the image I want to call an expander to modify some settings of this image
modifier = cols[0].form('Modify this image')
with modifier:
    threshold = st.slider(f"Select a new threshold. The default threshold = 19.", 1, 100, 19, 1)
    if st.form_submit_button('Re-analyze image.'):
        image_dict = analyze_image(image_dict) # image_dict contains all metadata and images for this selected image, and is updated by using the different threshold

cols[1].plotly_chart(figure)

As you can see, the order of the calls does not correspond to the location of the image_comparison result.

In the end, I would imagine calling image_comparison like:
st.image_comparison, or col1.image_comparison

I don't know how much work this is though.
Let me know what you think, and again, thank you for the nice tool!

Cheer,
Dirk

[fatih cagatay akyon]

Hello @DirkRemmers, unfortunately, I don't know much CSS/JS so not sure how to make the component more responsive.. I am open for PRs though!