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

vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Other popular topics Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36689 110
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
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
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement