feat: Fix MultiLayer Image display

[FrsECM]

PR fulfills these requirements

• [ x] Commit message(s) and PR title follows the format [fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made ex. fix: DEV-XXXX: Removed inconsistent code usage causing intermittent errors
• [ ] Tests for the changes have been added/updated (for bug fixes/features)
• [ ] Docs have been added/updated (for bug fixes/features)
• [ ] Best efforts were made to ensure docs/code are concise and coherent (checked for spelling/grammatical errors, commented out code, debug logs etc.)
• [x ] Self-reviewed and ran all changes on a local instance (for bug fixes/features)

Change has impacts in these area(s)

(check all that apply)

• [ ] Product design
• [ ] Backend (Database)
• [ ] Backend (API)
• [ x] Frontend

Describe the reason for change

When using multilayered images. Often the gallery is not visible when dealing with large images.

What does this fix?

The fix moves toggle button near the toolbar in order it to be everytime visible.

New behavior :

What is the new behavior?

The new behavior is very similar to the old one. Just the buttons are in another place and sticky.

What is the current behavior?

In the current behavior, buttons can be hidden and we need to scroll up/down to access it. By doing so, most of the time we lose buttons in order to select labels what is anoying.

What libraries were added/updated?

None

Does this change affect performance?

It improve labellers performance.

Does this change affect security?

No

What alternative approaches were there?

Display everytime buttons, but if doing so, we'll lose some place for the image.

What feature flags were used to cover this change?

Does this PR introduce a breaking change?

(check only one)

• [ ] Yes, and covered entirely by feature flag(s)
• [ ] Yes, and covered partially by feature flag(s)
• [ ] No
• [x ] Not sure (briefly explain the situation below) For me it's not breaking changes.

What level of testing was included in the change?

(check all that apply)

• [ ] e2e
• [ ] integration
• [ ] unit

Which logical domain(s) does this change affect?

Annotation of multilayer images.

[netlify[bot]]

👷 Deploy request for label-studio-docs-new-theme pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	f3b46d150b9e57388867de23e3dba5e553f36955

[netlify[bot]]

👷 Deploy request for heartex-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	f3b46d150b9e57388867de23e3dba5e553f36955

[sajarin]

/jira create

Workflow run Jira issue TRIAG-575 is created

[sajarin]

hey @FrsECM,

First of all, thank you for the time and effort you've invested in this PR. The team has carefully reviewed the changes proposed, and we wanted to share our thoughts on how we can move forward.

We acknowledge the specific requirements you've addressed with your solution. However, the reason this isn't the default behavior you expect is because Label Studio is designed to cater to a versatile range of applications and supports an infinite number of layers and various thumbnail sizes. Due to the specificity of the PR to a narrow use case, we cannot integrate these changes directly into the codebase. We strive to maintain a level of flexibility that serves a broader audience.

That said, we believe your desired functionality can be effectively achieved through configuration adjustments, particularly by customizing styles. Here is an example of how you can achieve a similar result via the config:

<Style>
.lsf-object {
  display: grid;
  grid-template-columns: 1fr 40px;
  grid-auto-flow: column;
}
.lsf-object [class^=container] {
  grid-row: 1 / span 2;
}
.lsf-toolbar {
  top: 0;
  margin-top: 0;
}
.lsf-object [class^=gallery] {
  position: static;
  flex-direction: column;
}
.lsf-object [class^=gallery] * {
  height: auto;
}
</Style>

If you and your team are still facing this problem, I'd like to offer our support in adapting your LS configuration to incorporate these style changes. To assist you further, could you provide us with your current config? This would enable us to understand the context better and possibly help identify additional enhancements.

Additionally, regarding the image sizing, the maxHeight property within your config can be adjusted to suit your specific requirements, which seems to align with the alterations you've attempted – this can be an efficient workaround tailored to your case.

Given these potential solutions, and while recognizing the time and effort of your contribution, unfortunately we won't be merging this particular PR. We truly value your participation in our community and encourage you to test the configuration-based approach. If you have any further ideas, concerns, or need assistance with the suggested configurations, we're here to help.

[FrsECM]

hey @FrsECM,

First of all, thank you for the time and effort you've invested in this PR. The team has carefully reviewed the changes proposed, and we wanted to share our thoughts on how we can move forward.

We acknowledge the specific requirements you've addressed with your solution. However, the reason this isn't the default behavior you expect is because Label Studio is designed to cater to a versatile range of applications and supports an infinite number of layers and various thumbnail sizes. Due to the specificity of the PR to a narrow use case, we cannot integrate these changes directly into the codebase. We strive to maintain a level of flexibility that serves a broader audience.

That said, we believe your desired functionality can be effectively achieved through configuration adjustments, particularly by customizing styles. Here is an example of how you can achieve a similar result via the config:

<Style>
.lsf-object {
  display: grid;
  grid-template-columns: 1fr 40px;
  grid-auto-flow: column;
}
.lsf-object [class^=container] {
  grid-row: 1 / span 2;
}
.lsf-toolbar {
  top: 0;
  margin-top: 0;
}
.lsf-object [class^=gallery] {
  position: static;
  flex-direction: column;
}
.lsf-object [class^=gallery] * {
  height: auto;
}
</Style>

If you and your team are still facing this problem, I'd like to offer our support in adapting your LS configuration to incorporate these style changes. To assist you further, could you provide us with your current config? This would enable us to understand the context better and possibly help identify additional enhancements.

Additionally, regarding the image sizing, the maxHeight property within your config can be adjusted to suit your specific requirements, which seems to align with the alterations you've attempted – this can be an efficient workaround tailored to your case.

Given these potential solutions, and while recognizing the time and effort of your contribution, unfortunately we won't be merging this particular PR. We truly value your participation in our community and encourage you to test the configuration-based approach. If you have any further ideas, concerns, or need assistance with the suggested configurations, we're here to help.

Hi @sajarin No problem, thanks for the feedback. This one is not critical and if we can fix it with a style we'll do this way. It's just a matter of documentation from our side.

I will try your solution and give you some feedback. I recently changes computer then i need to rebuild my whole dev environment that's why i can't do this right now.

The one that is critical for us are theses two one : https://github.com/HumanSignal/label-studio/pull/5770 https://github.com/HumanSignal/label-studio/pull/5765

I saw that the second one is already in progress from your side and i hope you'll find a suitable solution for the first one. Thanks a lot !

[sajarin]

Thanks @FrsECM, we are actively discussing your other contributions and hope to provide some updates soon. Definitely appreciate the patience.

I am closing this PR but feel free to DM me on Slack once you have your environment up and running and can try out the configuration suggestions. Happy to help debug if you run into issues and provide more support there.

[ng1902]

Hi @FrsECM,

How were you able to get one annotation to be visible on multiple layers?

When I use a multi-layer image control, the labels only appear on one layer...

https://github.com/user-attachments/assets/013fb5c2-7421-4856-a314-83b24754c7df

The Labelling Interface I for the example above is:

<View>
  <Image name="image" valueList="$images"></Image> 
  <RectangleLabels name="labels" toName="image">
    <Label value="Label 1" />
    <Label value="Label 2" />
  </RectangleLabels>
</View>

[hlomzik]

How were you able to get one annotation to be visible on multiple layers?

@ng1902 The format you use we call a multi-image labeling. And what was originally discussed is a multi-layer image feature, it's just a transparent extension of usual Image tag usage, all you need is to use array as a usual value:

<Image name="image" value="$images" />

{ data: { images: ["url1.jpg", "url2.jpg"] } }

[ng1902]

@hlomzik

Thank you so much! I didn't know about the difference between multi-image labelling and a multi-layer image.

I changed valueList to value in the Labelling Interface, and it's working exactly as expected without having to change anything in the json.