boiserunner

boiserunner

How to do LiveView stream sorting?

My app lets people connect their Garmin, Apple Watch, etc, to track activities, join virtual races, and create adventure activity plans. I have a leaderboard which is backed by a LiveView, in turn subscribed to a pub sub channel.

I’m using |> stream to add leaderboard data into my LiveView. When a new activity comes in from the provider, I broadcast a message with the new aggregate data for that runner.

And like magic, my leaderboard LiveView updates. There’s just one problem. Sorting!

If a runner overtakes another, the leaderboard is out of order. One simple fix is just to recompute the whole thing. But that feels inefficient — I can’t rely on stream_insert anymore.

Yet sorting at the template level also seems like it violates the design intention of streams.

Any thoughts on the “right” way to resolve this? Thank you!

Most Liked

garrison

garrison

The stream_insert/4 function accepts an :at argument to specify where to insert an item. I’m not sure if it works for updates though, and the docs seem to suggest it does not although it’s a bit vague.

However, you should be able to call stream_delete/3 and then stream_insert/4 in that case to forcibly relocate the item in the DOM.

Last Post!

frankdugan3

frankdugan3

A quick thought is to continue using streams to add/update new data, but use a JS hook client-side to resort after update. You could do this if you added data-sort-value={@your_sorting_value} to the leader board items, and after the resort, trim excess elements.

The advantage of this is that you don’t need to track which position it belongs in server-side.

Where Next?

Popular in Questions Top

nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

We're in Beta

About us Mission Statement