UX: can't create multiple bounding boxes on top of each other

[FarisHijazi]

Describe the bug when creating bounding box annotations for images, you can't start a bounding box inside another bounding box, it would just drag the first box, instead it should be like LabelImg where it would create a new bounding box IFF the rectangle tool is selected

To Reproduce Steps to reproduce the behavior:

1. create a new project using the Optical character recognition template
2. add some images ( I used the text file to upload the images)
3. press the rectangle tool (R)
4. label a bounding box, and then labeling another bounding box inside it
5. you can't label another bbox inside as it will just drag the first bbox

Expected behavior I should only be able to drag when the rectangle tool isn't selected, and when the rectangle tool is selected I should be making rectangles even if it's on top of another rectangle

workaround

currently the only workaround is to hide all annotations so that they don't get in the way, but we shouldn't need to do that every time just to have overlapping bboxes

Screenshots

Environment (please complete the following information):

• OS: windows 10
• Label Studio Version [e.g. 0.8.0]

Label Studio version: 1.5.0post0 

{
    "release": "1.5.0post0",
    "label-studio-os-package": {
        "version": "1.5.0post0",
        "short_version": "1.5",
        "latest_version_from_pypi": "1.5.0.post0",
        "latest_version_upload_time": "2022-07-13T16:52:40",  
        "current_version_is_outdated": false
    },
    "label-studio-os-backend": {
        "message": "ci: Sync .github directory from develop (#
2655)",
        "commit": "8c657fce5928886f9da025ef271c96ececa6bbf4", 
        "date": "2022-07-13 16:05:08 +0400",
        "branch": "HEAD",
        "version": "1.5.0post0+0.g8c657fc.dirty"
    },
    "label-studio-frontend": {
        "message": "fix: DEV-2777: remove lookbehind in regex 
for Safari (#730)",
        "commit": "4331b56b6a7fb0ffaea2c8b010cb0b8cec6ad7dc", 
        "branch": "ls-release/1.5.0",
        "date": "2022-07-01T16:44:40Z"
    },
    "dm2": {
        "message": "fix: DEV-2526: Don't crash because of unde
fined LSF (#75)",
        "commit": "5104ecf3227380649a7139b73a636c11b7a07ea9", 
        "branch": "ls-release/1.5.0",
        "date": "2022-07-05T19:38:39Z"
    },
    "label-studio-converter": {
        "version": "0.0.40"
    }
}

[makseq]

@FarisHijazi Try to press CTRL button and click to create bounding box.

[FarisHijazi]

this works and I'm happy now but I don't think new users will find it intuitive, is this at least written somewhere in the docs?

I find label studio to be an amazing tool but the UX is not intuitive, it needs some simplification especially for non-tech-savvy users (after all, labelers are usually non-technical)

[makseq]

Absolutely agree. We are working on documentation constantly, but product is so huge, so it is not easy to cover all questions..

[FarisHijazi]

I think an easier thing to do than documenting everything is to have more intuitive shortcuts, look at labelImg for example, no one had to lookup anything, everything just worked as expected out of the box

Is it at all possible to change the default bindings or behaviour?

For the rectangle for example, i think that it should create a new rectangle without ctrl if you selected the rectangle tool, and to move rectangles, you use the mouse tool

Each tool should do something, because most of the time we're creating rectangles, not creating rectangles and then moving them

It's small decisions like these that will make it much easier

Another thing you could do if you wanna avoid changing defaults, is just have a page with all hotkeys, the existing one isn't complete

Instead of manually making the hotkey table, wouldn't it be easier to automatically generate it from the code

Like wrapping the bindkey function with another that takes an extra argument description and that way every time you bind a key, you pass the description, and it will aggregate all the hotkeys for you This way it scales

I did this in one of my codebases (not python)

Example

Actual bind function is called bindkey(key, func)

And then you would do

keybindings ={}
def bindkey_wrapper(key, func, desc):
  global keybindings
  keybindings[key] = desc
  return bindkey(key,func)