Hi everyone,
I’ve started implementation of some of the improvements suggested by Design for the machine listing view this week.
Design’s proposed Machine Listings View
Before I could start in on this, I needed to confirm that the library we currently use for virtual scroll, angular-vs-repeat, supported elements of varying height, which I’m pleased to report it does. There is however an issue where varying element heights will break vs-repeat when using the latch option. This is not the default however, and we don’t appear to be taking advantage of this (it removes elements from the DOM when outside the viewport, offering improved performance).
On a related note, we should probably consider upgrading angular-vs-repeat as we’re currently on v1.1.7 and v2.0.9 is the latest. The changelog suggests that 2.0.3 added a “binary search algorithm to find which portion or[sic] the original collection should be rendered” which may provide some performance improvements.
Machine interfaces
The first thing I discovered however is that interfaces are not exposed for machines in the websocket API. I’ve added interfaces to the payload in MachineHandler.dehydrate:
data["interfaces"] = [
self.dehydrate_interface(interface, obj)
for interface in obj.interface_set.all().order_by('id')
]
@blake-rouse any thoughts here? I was concerned this might have a measurable performance impact, but making this change doesn’t appear to have affected the response time noticeably for machine-list frames (around 9s hot and 11-12s cold for ~300 machines before and after the change which is problematic in itself, but out of scope for this discussion I think). Some microbenchmarking in dehydrate suggests that this adds an additional 2-3ms per record (we fetch 50 records at a time, so 100-150ms total cost).