Rune (svelte5) for Reactive Layers Filter

[BenOnTrack]

I would like to set up a "reactive" layer filter based on a $derived state, to dynamically filter some of my source data on User interaction.

I'm basically doing the following:

assuming ids is a rune that collects in an array all selected id by the User

 let idFilter = $derived.by(() => {
    return ["all",[
        "in",
        ["get", "id"],
        ["literal", ids.current]
      ]]
  })

When I inspect ($inspect) my idFilter, I confirm it reacts properly each time ids is modified by the User.

  $inspect(idFilter ).with((type) => {
    console.log(`idFilter ${type}`, $state.snapshot(idFilter ));
  });

My idea is to then call this idFilter within my Layer

<LineLayer
      id="route"
      sourceLayer={"route"}
      filter={idFilter}
      paint={{
        "line-color": ["coalesce", ["get", "colour"], "gray"],
        "line-width": 3,
      }}
    ></LineLayer>

The results are really strange. It seems to work intermittently, but it's definitely not reactive. Sometimes it works when I refresh my page, and other times it stops working altogether.

I've also tried with filter = $state.snapshot(idFilter) to get the static value, without more success.

As I'm new to the rune concept, this issue might not be related to Maplibre (or this library). I would appreciate any insights from the community on whether this should work or if it actually wouldn't.

Also as crazy as it sounds, I've managed to make it work on SymbolLayer with more consistency (seems to work fine), while my issue are with LineLayer and FillLayer (though I'm using different runes initially...).

[dimfeld]

Hard to say without seeing all the code. There are examples such as https://svelte-maplibre.vercel.app/examples/geojson_polygon that do similar things. That one changes between having a filter and not having a filter, but if I change it to switch between two filters it continues to work.

[BenOnTrack]

Thanks - good to know it should work. I've managed to make it work, by setting

<LineLayer
      id="route"
      sourceLayer={"route"}
      filter={$state.snapshot(idFilter)}
    ></LineLayer>

It did not work the first time (might have been a cache issue), but seems to work fine now.

It's a bit of black magic unfortunately for me...Also the example you've provided seems to work fine w/o requesting the static value - so I guess I need to start learning how rune, reactivity (and signal?) work under the hook...

Thanks for the feedback though.

I'll keep this post open in case I found out what's wrong on my end