Phoenix LiveView Streams and Sorting

ericf · November 30, 2023, 12:50am

I have a liveview page and it is listing things. I want to sort those things using a database query. This works great unless I am listing the things using a stream. When I use a stream, I try and reset the stream and insert the elements in a different sort order but it seems as if the page doesn’t recognize any changes to the stream since the elements are all the same, just in a different sort order. I am on Phoenix 1.7.9, LiveView 0.20.1. Here is the psudeo-code of my call.

stream(socket, :things, Stuff.list_things(sort, dir), reset: true)

Hope someone can off some help or ideas on what I’m doing wrong or how I can do this differently. Thanks.

codeanpeace · November 30, 2023, 5:23am

It’s a known regression that’s been addressed, but there hasn’t been a tagged release since the fix yet so you’ll probably want to hop onto the main branch.

github.com/phoenixframework/phoenix_live_view

Regression in 0.20 when resetting a stream that contains the same values, but reordered.

opened 11:51AM - 26 Sep 23 UTC

closed 07:07PM - 16 Oct 23 UTC

Malian

### Environment * Elixir version (elixir -v): 1.14 * Phoenix version (mix de…ps): 1.7.7 * Phoenix LiveView version (mix deps): 0.20 * Operating system: Ubuntu 20.04 * Browsers you attempted to reproduce this bug on (the more the merrier): Firefox, Chrome * Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes ### Actual behavior With the previous version of Phoenix Live View (0.19.5), when I reset a stream with `stream(socket, :my_stream, values, reset: true)` in `handle_params` or `handle_event` where `values` are the same as the previous stream but reordered, the stream was reinitialized. It is useful with a table when you order by a column (asc/desc). With the latest version of Phoenix Live View (0.20.0), the stream is not reset, and the table does not change. Here is the code that reproduces the behaviour. Below, you will find the simple app that reproduces the bug. ```elixir defmodule StreamResetWeb.ResetStreamLive do use StreamResetWeb, :live_view @users [ %{id: 1, name: "John", age: 27}, %{id: 2, name: "Mary", age: 25}, %{id: 3, name: "Peter", age: 30} ] def handle_params(_params, _uri, socket) do new_stream = @users |> Enum.shuffle() |> IO.inspect(label: "New stream (patch)") socket = socket |> stream(:users, new_stream) {:noreply, socket} end def render(assigns) do ~H""" <.button phx-click={JS.patch(~p"/reset_stream")}> Shuffle (patch) </.button> <.table id="users" rows={@streams.users}> <:col :let={{_id, user}} label="id"><%= user.id %></:col> <:col :let={{_id, user}} label="name"><%= user.name %></:col> <:col :let={{_id, user}} label="age"><%= user.age %></:col> </.table> """ end end ``` Here is a working application (0.19.5): https://github.com/Malian/stream_reset_bug Here is the application upgraded to Phoenix Live View (0.20.0): https://github.com/Malian/stream_reset_bug/pull/1 ### Expected behavior The stream has been reset.

github.com/phoenixframework/phoenix_live_view

FIX remove existing items in stream if reset=true

phoenixframework:main ← micdahl:full-stream-reset

opened 09:47AM - 12 Oct 23 UTC

micdahl

+1 -3

When using `stream(socket, :elements, elements, reset: true)`, elements that all…ready existed in the stream were not deleted from the DOM before the new elements are inserted. If the elements have a different order than before, this ordering was not mapped to the DOM. By removing the filter for already existing elements to delete them all, the given order of the elements is retained. Fixes #2767, fixes #2826

ericf · December 14, 2023, 3:10pm

Thanks!

omgneering · January 28, 2024, 6:00am

I wanted to mention that I ran into this and upgrading from liveview 0.20.1 to 0.20.3 did not fix it because I had the javascript phoenix_live_view version explicitly declared in package.json. After setting the version in assets to match mix version and running npm install the stream sorting issue was resolved. I am not sure if there is a way to remove it from assets so it is synced up to whatever is in mix.

TLDR: make sure you update the liveview version in package.json as well if it is explicitly declared there.