[BUG-UI/UX] Shortcuts code changes when expanding / collapsing labels

[nataliaElv]

Describe the bug
A clear and concise description of what the bug is.

Shortcuts code change in some labels in LabelQuestion and MultiLabelQuestion when you expand / collapse.

To Reproduce
Steps to reproduce the behavior:

1. Choose a dataset with a LabelQuestion or MultiLabelQuestion where some labels are collapsed.
2. Expand all labels and select one of the labels that was collapsed.
3. Collapse labels again.
4. Now the number assigned to the label for the keyboard shortcuts has changed.

Expected behavior
A clear and concise description of what you expected to happen.
I want shortcuts code to be always the same for all labels so that I can memorize the shortcut that applies to each and don't need to expand if one of them is collapsed.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS [e.g. iOS]:
• Browser [e.g. chrome, safari]:
• Argilla Version [e.g. 1.0.0]:
• ElasticSearch Version [e.g. 7.10.2]:
• Docker Image (optional) [e.g. argilla:v1.0.0]:

Additional context
Add any other context about the problem here.

[dosubot]

🤖

Thank you for reporting this issue. I understand that the changing of shortcut codes for labels in LabelQuestion and MultiLabelQuestion when expanding and collapsing is causing inconvenience.

The current logic for assigning shortcut codes to labels is based on the index of the label in the visible options array. This means that the shortcut code for each label is determined by its position in the list of visible options, starting from 1.

When the labels are collapsed, only a subset of the options are visible, and these will have the shortcut codes 1, 2, 3, etc. When the labels are expanded, more options become visible, and these additional options will be assigned the next available shortcut codes. This is why the shortcut codes are changing when you expand and collapse the labels.

Here is the relevant code from the LabelSelection.component.vue file:

:data-keyboard="index + 1"

And the method that controls the expansion and collapse of labels:

data() {
  return {
    isExpanded: false,
  };
},
methods: {
  toggleShowLess() {
    this.isExpanded = !this.isExpanded;
  },
}

To address your issue, a possible solution could be to assign persistent shortcut codes to each label, regardless of their visibility. This would require a change in the current logic for assigning shortcut codes. However, as I am unable to create pull requests or issues, I would recommend you to propose this change to the Argilla community.

Please provide the following additional information to help us understand your environment and reproduce the issue:

• OS
• Browser
• Argilla Version
• ElasticSearch Version
• Docker Image (optional)

This will help us in diagnosing the issue further. Thank you for your cooperation.

Sources

• frontend/components/commons/edition-label/textClassificationGlobalLabels.component.spec.js
• frontend/components/feedback-task/container/questions/form/shared-components/label-selection/LabelSelection.component.vue

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.