[🐛] Blur Editor Bugs

GITNE · December 11, 2024, 10:48pm

The blur editor has a few bugs:

`Shift` Key Continues to Toggle Visibility of the Navigation UI After Exiting the Blur Editor

How to reproduce:

Enter the blur editor
Exit the blur editor
Press Shift

Note that you can toggle the visibility of the navigation UI outside the blur editor, which should not be possible.

Exiting the Blur Editor Does Not Restore the Visibility of the Navigation UI

How to reproduce:

Enter the blur editor
Press Shift to hide the navigation UI
Click Exit

Note that the visibility of the navigation UI is not restored, which should happen.

Dismissing a Blur Selection Does Not Return to Selection Mode When in `Add new blurs` Mode

How to reproduce:

Enter the blur editor
Click Add new blurs
Select an area to blur
Dismiss the selected area by clicking

Note that the mouse cursor does not switch back to the cross cursor but stays in panning mode indicated by the cursor. However, you can return to selection mode by pressing Ctrl but this should not be necessary because the cursor is the default mode of the Add new blur mode.

Selected Area Tag Does Not Display Red Dismiss Icon

How to reproduce:

Enter the blur editor
Click Add new blur
Select an area to blur

Selection Coordinates Do Not Flip Effectively But Only The Selection Box When Dragging the Selection Box Beyond Image Edges (Possibly Vertical Only) of 360° Images

How to reproduce:

Go to a 360° image
Enter the blur editor
Click Add new blur
Drag a selection area over the edge of the image
Confirm the blur by clicking on the green check icon

Note that the selection box flips when you cross the image edge but what gets effectively blurred is not the box area but the area outside of it.

boris · December 16, 2024, 12:13pm

cc: @nikola for thoughts

GITNE · December 23, 2024, 4:15am

Planar images are affected either. Hence, I have suspended adding blurs because one may irreversibly blur valuable data.

GITNE · March 4, 2025, 12:53pm

I think I have found what is causing it. The projection (matrix) does not update with the viewport when entering and exiting the blur editor. In other words, the WebGL canvas (or widget) position and dimensions change but the projection parameters do not update with it. Maybe this bug pertains to Firefox only. The workaround for it for now is to externally force the WebGL canvas to update, e.g. by resizing the browser window, reorganizing the tab, or toggling full screen mode etc.
@nikola You may need to listen on a position and/or dimension canvas change and then make MapillaryJS explicitly update its projection matrix.

GITNE · May 7, 2025, 3:36pm

@nikola Adding a blur over an already blurred area results in an error. One may want to do this for example to increase the size of a blurred area. Trying to add multiple blurs around a blurred area is actually counter productive.

I have not tried to add overlapping blur rectangles. So, I do not know what happens in this situation.

nikola · May 8, 2025, 12:30pm

Can you attach a screenshot of what that looks like?

GITNE · May 8, 2025, 4:35pm

Console output:

system   GQL ERROR: BlurEditorComponent.createBlur()  Error: A server error field_exception occured. Check server logs for details.
    e https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    IEe https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    ne https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    then https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    f https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    then https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    m https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    U3 https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    U3 https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Awe https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvoke https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    run https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    H https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvokeTask https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    runTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    m https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
main.b41f8d0759634fed.js:1:551375
 main   ERROR in BlurEditorComponent.createblur()  Error: A server error field_exception occured. Check server logs for details.
    e https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    IEe https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    ne https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    then https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    f https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    then https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    m https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    U3 https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    U3 https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Lee https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    _H https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    next https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    Awe https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvoke https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    run https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    H https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvokeTask https://www.mapillary.com/app/main.b41f8d0759634fed.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    runTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    m https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
main.b41f8d0759634fed.js:1:551375

@nikola Check server logs for details.

GITNE · May 8, 2025, 4:59pm

Incomplete Blur

Blurring works but not up to selection rectangle edges. There is a quite thick soft edge before the selection rectangle. Maybe the soft edge’s thickness also scales with the size of the selected area?
The sensitive part is not in the example picture above because it basically remained clear due to the thick soft edge.

boris · May 9, 2025, 9:16am

@nikola - can we increase the size the user selected before passing this to the blurring process to account for the soft edge?

nikola · May 9, 2025, 9:33am

Sure! We’ll update our process so the selected are will match the blurred area.

GITNE · May 9, 2025, 2:01pm

Yeah, but the soft edge should not scale and be fixed width, something like 5px or ideally no larger than the next macro block. Please, do not get me wrong, I really do like the soft edge but it should be on the outside of the selected area.

GITNE · May 9, 2025, 2:57pm

The selected blur is just an example.
You can see the non‑descriptive error message above. “An error has occured” or “Something went wrong” aren’t actually very helpful in diagnosing anything.

I am sure you can do better!

Please, see the console output.

GITNE · May 26, 2025, 4:39pm

Cannot Add a Blur on the Left Edge

Try to add a blur that stretches to the left edge. Impossible.
@nikola You have to shrink the canvas by the left panel’s width.

A lot of these issues in the blur editor are caused by the fact that the images are projected into 3D space for linear viewing. Imho the blur editor should work on a simple flat 2D plane. Or, users should be able to toggle between 2D and 3D modes, like they can do in “time travel”. I am pretty sure that most users understand what they have to blur and how they have to create blurs even on flat 360° imagery.

boris · May 27, 2025, 7:56am

Whoops, good catch, @nikola - do you want to take a look at this one?

nikola · May 27, 2025, 5:01pm

We’ve now updated the blur editor so the whole image is entirely visible regardless of aspect ratio.

GITNE · May 27, 2025, 7:08pm

Works okay on planar images. Fish-eye works too but is odd. No improvement on 360° images. Besides, creating a blur over the antimeridian on 360° images causes an error:

 main   ERROR in BlurEditorComponent.createTag() for detection nr:  1 
Object { key: "676877505155243", creator: {…}, detectorName: undefined, createdAt: 1748372282, appliedAt: undefined, relativeArea: undefined, pixelArea: undefined, pointX: undefined, pointY: undefined, detectionValue: undefined, … }
 
Array(4) [ 1.04150390625, 0.81396484375, -0.044677734375, 0.848876953125 ]
 GeometryTagError: Basic coordinates must be on the interval [0, 1].
    du https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:90
    Kd https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:90
    Rf https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:90
    createTag https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:270
    createBlurMarkers https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:270
    createBlurMarkers https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:270
    9827/get blurMarkers$/< https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:270
    pn https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    r https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _subscribe https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _trySubscribe https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _trySubscribe https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    subscribe https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    K https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    subscribe https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    Yh https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    vl https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    _next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    K https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    next https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    onClickOutsideConfirmPopup https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:270
    tG_click_HostBindingHandler ng:///tG.js:251
    BO https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    s https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    YK https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvokeTask https://www.mapillary.com/app/main.c3ad5a993dc1cdb9.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    runTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    y https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    b https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
main.c3ad5a993dc1cdb9.js:1:551375

Once again, I can only strongly recommend simple 2D planes in the blur editor because it helps you avoid a slue of following issues, like properly handling the antimeridian.

GITNE · May 28, 2025, 12:57am

Sadly, there is more: Despite the error message when trying to create a blur over the antimeridian, a blur is created with coordinates clamped to [0, 1]. In this case, it basically results in a blur over the entire width of the image. For the sake of safety, any error should never produce a blur.

Furthermore, it is way too easy to create a blur incidentally and irreversibly break things. You can delete a blur selection but this action does not restore the original pixels. @boris Another good argument for a 24 hour grace period, complementing those arguments for having an option to remove false positives.

boris · May 28, 2025, 11:51am

Thanks again @GITNE - @nikola would love your thoughts.

nikola · May 28, 2025, 12:09pm

Will update the blur editor to generate two blurs in this case, split the original rectangle that passes the antemeridian of the image.

GITNE · June 2, 2025, 3:20pm

Cannot Add a Blur

blurWidth -5662.075283483142 blurHeight 25.56479200479032 main.43e4d49bafb9b17f.js:270:3398
5759.778204169207 2055.67944961114 97.70292068606572 2081.2442416159306 main.43e4d49bafb9b17f.js:270:3444
6156.123474013027 2053.889914170805 -298.64234915775427 2083.033777056266 main.43e4d49bafb9b17f.js:270:3509
 main   ERROR in BlurEditorComponent.createTag() for detection nr:  1 
Object { key: "1008827328107232", creator: {…}, detectorName: undefined, createdAt: 1748877451, appliedAt: undefined, relativeArea: undefined, pixelArea: undefined, pointX: undefined, pointY: undefined, detectionValue: undefined, … }
 
Array(4) [ 1.068603515625, 0.713134765625, -0.052001953125, 0.72314453125 ]
 GeometryTagError: Basic coordinates must be on the interval [0, 1].
    du https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:90
    Qd https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:90
    Lf https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:90
    createTag https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    createBlurMarkers https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    createBlurMarkers https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    7948/get blurMarkers$/< https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    pn https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    r https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    Q https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    updateBlurs https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    getImageBlursList https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:270
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    pn https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    _next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    next https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    Xte https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvoke https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    invoke https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    run https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    H https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    onInvokeTask https://www.mapillary.com/app/main.43e4d49bafb9b17f.js:1
    invokeTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    runTask https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
    m https://www.mapillary.com/app/polyfills.edd58b8e96107806.js:1
main.43e4d49bafb9b17f.js:1:551366

I can only urge you to always use a simple 2D plane with coordinate limits because it is going to save everybody a lot of headaches.

Topic		Replies	Views
Since i did use zoom ( mouse wheel ) I can't do blurs? Web and notifications	16	1714	March 29, 2018
Feature proposal: allow full zoom out of 360 images in blur editor Web and notifications	4	1348	September 3, 2017
Wrong blurring images Web and notifications	1	596	November 3, 2017
Platform updates are live Web and notifications	86	3032	July 16, 2021
Feature request: "clear all + submit" function in blur editor Web and notifications	1	926	April 26, 2017

[🐛] Blur Editor Bugs

Shift Key Continues to Toggle Visibility of the Navigation UI After Exiting the Blur Editor

Exiting the Blur Editor Does Not Restore the Visibility of the Navigation UI

Dismissing a Blur Selection Does Not Return to Selection Mode When in Add new blurs Mode

Selected Area Tag Does Not Display Red Dismiss Icon

Selection Coordinates Do Not Flip Effectively But Only The Selection Box When Dragging the Selection Box Beyond Image Edges (Possibly Vertical Only) of 360° Images

Incomplete Blur

Cannot Add a Blur on the Left Edge

Cannot Add a Blur

Related topics

`Shift` Key Continues to Toggle Visibility of the Navigation UI After Exiting the Blur Editor

Dismissing a Blur Selection Does Not Return to Selection Mode When in `Add new blurs` Mode