Feature/update grouped images

[capetillo]

FEATURE UPDATE: Update Image Grouping and Display

DESCRIPTION

Background:
After having grouped images, more details here, @wrosing noticed that a couple of issues emerged. First, thumbnails were taking a really long time to load. And second, the ThumbnailRow component was not updating with new images as they were coming. Only after the user would refresh the page, would the new images show up. Additionally, sometimes the images would show up at the very end of the ThumbnailRow rather than at the beginning.

Implementation:
With the extensive help and advice of @timbeccue, I learned that Vue is not as reactive to group_images because of its data structures. Instead, it's best to store images in an array so that the UI can re-render when the state has updated (i.e. when new images come). This new implementation can be found on lines 63-72 of images.js.

   // First, generate a map of maximum SSTKNUM for each SMARTSTK
   const maxSSTKNUMs = state.recent_images.reduce((acc, cur) => {
     if (!cur.header || !cur.header.SMARTSTK || !cur.header.SSTKNUM) return acc // Skip if missing header, SMARTSTK or SSTKNUM

     const num = parseInt(cur.header.SSTKNUM) // convert string to number
     if (!acc[cur.header.SMARTSTK] || num > acc[cur.header.SMARTSTK]) {
       acc[cur.header.SMARTSTK] = num
     }
     return acc
   }, {})
   const filteredArr = state.recent_images.filter(el => {
     if (!el.header || !el.header.SMARTSTK || !el.header.SSTKNUM) return true
     return el.header.SSTKNUM >= maxSSTKNUMs[el.header.SMARTSTK]
   })
   return filteredArr
}

This new implementation, written by @timbeccue, goes as follows:

1. First, it takes the existing array of recent_images and with the reduce method, it creates a map (maxSSTKNUMs) where the key is SMARTSTK and the value is the greatest SSTKNUM found in the recent_images array
2. Then, the it checks if the current image has a header, a SMARTSTK, or a SSTKNUM (stack number). If it doesn't have any, then we return the acc as is.
3. Next, for each unique SMARTSTK in the array of image objects, it finds the max value of SSTKNUM. If the current image has a SMARTSTK value that is not yet in the acc object OR if the SSTKNUM value (parsed to an integer) is greater than the currently one stored in acc for that existing SMARTSTK, it updates the acc with the new maximum SSTKNUM for that SMARTSTK.
4. It then returns the acc object to be used in the next iteration
5. Then it filters the recent_images array to include items that either don't have a header, SMARTSTK, or SSTKNUM OR have the maximum SSTKNUM for the SMARTSTK associated with it.
6. Finally, it returns the filtered array filteredArr

Updated Features:

1. Reduced Thumbnail Count: Only the most recent image from each smart stack is displayed in the ThumbnailRow component. Thus, reducing significantly the number of thumbnail images displayed. This remains true, however, the implementation has now changed, as mentioned above
2. Updating Images: Because images are now stored in an array, the UI is now reacting to the updates. As images are stored in the state, it's accurately reflected on the UI and shown at the beginning of the ThumbnailRow carousel.

Visuals:

Before taking an image

After taking an image and without having to refresh the site

[markBowman]

Amazing pr description - thank you
Approved for trial deployment

[timbeccue]

Lots of great work that went into this! Just one suggestion to add a comment explaining what the getter is doing, but ready to merge after that!

[timbeccue]

Might be helpful to include a comment describing an overview of what this getter is doing, something along the lines of 'Same as recent_images but removes any intermediate smartstack frames, so you only see the latest version of each smart stack'.

[capetillo]

Good point. Added comment!