Unable to delete bounding box accidentally drawn out of picture

1

Hi there!

One of our annotators reported an issue with the image_manual interface.

They accidentally drew a bounding box outside of the shown image so that the label was no longer visible. I assume they managed to do that by resizing an existing box, I managed to replicate the issue. The problem is that the box can no longer be deleted, because the box can only be selected by clicking the label. Resetting the annotations didn't work either since they had already accepted the task once and then backtracked to it.

I understand this is probably a rare occurrence, but it can cause issues nonetheless. I wonder if it would be possible to make the bounding boxes selectable by clicking the outlines as well, instead of just the label? Or make it impossible to resize a box outside of the image. Anything else we could do to prevent this, besides telling our annotators to be more careful?

Thanks!

2

Hi @helmiina,

I'm afraid it's not trivial to change the clicking behavior of the boxes via custom js extensions. We're actually currently working a related feature (making boxes clickable with the possibility of defining custom event hook).
For the scenario described, the easiest thing perhaps would be adding a "deep reset" button to the UI that would call window.prodigy.update and remove the spans:

const button = document.createElement('button')
button.style = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 24px;
        font-size: 18px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        z-index: 1000;`;
button.textContent = "Deep reset"

function showFeedback(count) {
    const bubble = document.createElement('div');
    bubble.style = `
        position: fixed;
        top: 80px;
        right: 20px;
        padding: 12px 20px;
        font-size: 16px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1001;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        pointer-events: none;`;
    
    bubble.textContent = `Deleted ${count} bounding box${count !== 1 ? 'es' : ''}`;
    document.body.appendChild(bubble);
    
    // Animate in
    setTimeout(() => {
        bubble.style.opacity = '1';
        bubble.style.transform = 'translateY(0)';
    }, 10);
    
    // Animate out and remove
    setTimeout(() => {
        bubble.style.opacity = '0';
        bubble.style.transform = 'translateY(-10px)';
        setTimeout(() => {
            if (bubble.parentNode) {
                bubble.parentNode.removeChild(bubble);
            }
        }, 300);
    }, 2000);
}

button.addEventListener('click', () => { 
    // Get current spans count before clearing
    const currentSpans = prodigy.content?.spans || [];
    const spanCount = currentSpans.length;
    
    showFeedback(spanCount);
    
    if (spanCount > 0) {
    prodigy.update({
        spans: []
    });
    }
});

document.body.appendChild(button);

This should only be necessary once the example has been saved and backtracked to. Otherwise, the browser reset (which only has access to front end) should work.
Hope that helps a bit :crossed_fingers: