`SubsurfaceViewer`: `pickingRadius` not working with overlapping layers

[rubenthoms]

I tested the pickingRadius prop from deck.gl with the WellsLayer and it is working nicely as long as there is only one layer under the cursor. As soon as multiple layers are overlapping at the cursor's position, the pickingRadius gets completely ignored. I have so far only tested with a WellsLayer on top of either a MapLayer, ColormapLayer or a Grid3DLayer.

Moreover, there seems to be an issue with Picking and pickingRadius. Whenever I approach a wellbore with the cursor and get into the pickingRadius there is no picking information provided anymore. I still get the tooltip but no readout. As soon as I enter the actual wellbore path, the picking information is showing up again.

Both issues can be reproduced by looking at: https://equinor.github.io/webviz-subsurface-components/storybook-static/?path=/story/subsurfaceviewer-wells-layer--volve-wells&args=pickingRadius:10

For the first one, you can for instance add the MapLayer from the Map Layer 2 D example:

I am wondering if these are issues on our side or if I should report this in the deck.gl repo. I would appreciate hearing your thoughts on this matter, @hkfb @w1nklr @nilscb.

[w1nklr]

Thanks for the feedback. I tried and can reproduce both issues. Note that using an axes2D layer has no impact on the first issue.

I'll try to find some time to investigate to check where the issues are coming from...

[Anders2303]

Have you had a chance to look at this, @w1nklr ?

If it helps, I noticed that when you do deck.pickMultiple() (which is being done internally on hover in Map.tsx) the map layer will be picked multiple times, always up to the picking depth.

As a quick test, I added this logging statement in Map.tsx::getPickingInfos(...),

            const pickInfos = pickInfo.layer.context.deck.pickMultipleObjects({
                x: event.offsetCenter.x,
                y: event.offsetCenter.y,
                depth,
                unproject3D: true,
                radius: pickingRadius,
            });

            console.log(
                "pickInfos",
                pickInfos.map((i) => i.layer?.constructor?.name),
                pickInfos.every((i) => isEqual(pickInfos[0], i))
            );

And went to a storybook that had both the map and wells layer (Here the DepthTest storybook), and tried with depth 6, and radius 10

path=/story/subsurfaceviewer-examples-rendering--depth-test&args=pickingRadius:10;pickingDepth:6

As described in the issue, the well-layer shows up only when Im directly above it, and the MapLayer repeats to fill up to picking depth (also notice that each pick is the exact same object, as checked by lodash.isEqual). I assume that the picking issue stems from the map layer taking up each available pick, for some reason

[Anders2303]

I also tested it on a story that didnt use the MapLayer, and everything worked as normal there. Below is the log for the "Map In Container" story

path=/story/subsurfaceviewer-examples--map-in-container&args=pickingDepth:6;pickingRadius:20

[hkfb]

Nice work isolating it to the MapLayer. @nilscb has some knowledge on the MapLayer picking code and should be able to help starting tomorrow.

[w1nklr]

Thank you for this investigation, @Anders2303 (and no, I had no time 🫤). Let's ask @nilscb to look at this issue.