[Bug-fix][UI] Truncate long file names in the datasetviewer tab

[RihaanBH-1810]

@dpascualhe
This PR fixes #407 by truncating the file names (while still retaining file extension) before passing them as captions to prevent overlapping.

Ps: I formatted the file with black hence the random change in adding parantheses.

Before fix :

After fix :

[dpascualhe]

Hi @RihaanBH-1810 , thanks for your contribution! Could you make the max. sample name size dependent on the image thumbnail size? In that way we can avoid using magic numbers. Thanks!

[RihaanBH-1810]

Hi @dpascualhe , I think that would not be possible since we are using a streamlit component for image selector
I came across this code block in dataset_viewer.py

    # CSS for compact image grid
    st.markdown(
        """
        <style>
        .image-selector__image, .image-selector__image img {
            max-width: 120px; max-height: 40px; width:  40px; height: 40px; object-fit: contain;
        }
        </style>
    """,
        unsafe_allow_html=True,
    )

And tried assigning a variable for the width and then using that variable to change the maximum character length of the sample name.

But after playing around a bit and digging up online, I figured out that the style block is actually dead code.

Since the image_selector is a streamlit component, according to docs streamlit components are rendered in it's own iframe so the app's css and the components css are different. This component does not provide an option to change width manually either.

To sum it up since there is no variable based on which I can update the max sample name size dynamically. I think it is a better option to leave the max sample name size as a constant, since use_container_width = False in dataset_viewer.py

    # Image grid
    img_select_key = f"img_select_all_{dataset_path}_{split}_{current_page}"
    img_select_index = st.session_state.get(img_select_key)
    if img_select_index is None or not isinstance(img_select_index, int):
        img_select_index = 0
    selected_img_path = (
        image_select(
            label="",
            images=image_paths,
            captions=captions,
            use_container_width=False,
            key=img_select_key,
            index=img_select_index,
        )
        if image_paths
        else None
    )

The images in the grid would be of fixed size, around 10rem as defined in the component's css file so, upto 21 pixels max sample name should not be a problem for most of the normal screen sizes.

What are your thoughts on this ?

[RihaanBH-1810]

also please ignore this commit