Keeping sort order for updated DAML contracts painted via UseStreamQueries react component

In one of our projects we use the

react component useStreamQueries

Example :

 const assets = useStreamQueries(Financial.PurchaseOrder);

This nicely paints all the Purchase Orders in a list

When we do an interaction on one of the items on the list by executing some daml code

example below ofadding details to the PurchaseOrder

nonconsuming AddPoDetailData : ContractId PurchaseOrder
       newpodetaildata :  PurchaseOrderDetaildata
        archive self
        create this with purchaseorderdetaildata = newpodetaildata

Then we notice that UseStreamQueries component repaints the list in React and the original Item is moved to the bottom of our list.
Logically that makes sense, since we archived the old contract and created a new one.
However this creates a confusing UX for our users as data is shifting on the page from the original position in the list (lets say 5th place) to the bottom

Is there a trick (react trick or daml trick) to keep the list in its original order so information is not shifting around on the page. ?


Daml, and by extension the useStreamQueries component, doesn’t recognize any “sameness” between the archived contract and the newly created contract in this choice. If you want to preserve a specific order of a list of contracts, the best way to do this is by sorting the result of useStreamQueries, React-side, before display.

There are a couple ways to do this. You could choose a part of the contract that is uniquely identifying and totally-orderable as your sort key; this is the easiest approach. If you wanted something closer to the existing order, you could assign numeric indices to contracts as they “appear” (according to your own internal definition of “newness”) and sort by these indices; I am not sure what wrinkles that would create in your React code, though.

I would focus on React for your solution; the only way that Daml code would matter with regard to list order is if the list you are displaying actually exists as a list in a Daml contract.


Thanks for the insight. We will figure out a way in React

1 Like