Revert back to grouping related images changes

src/components/ImageDisplay/ControlRoomImages.vue

@@ -23,6 +23,7 @@
       <thumbnail-row
         class="data-thumbs"
         :images="recent_images"
+        :grouped_images="grouped_images"
         :selected_image="current_image.image_id"
         @thumbnailClicked="set_current_image"
       />

src/components/ImageDisplay/ThumbnailRow.vue

@@ -1,20 +1,33 @@
 <template>
-  <div class="images">
+  <div
+    v-if="grouped_images.imageGroups && Object.keys(grouped_images.imageGroups).length > 0"
+    class="images"
+  >
     <img
-      v-for="(item, index) in images"
-      :key="index"
+      v-for="(item, SMARTSTK) in grouped_images.imageGroups"
+      :key="SMARTSTK"
       :src="thumbnailWithFallback(item)"
       onerror="this.onerror=null;this.src='https://via.placeholder.com/60/FF0000/FFFFFF?text=jpg'"
-      :title="item.base_filename"
-      :class="{'selected_thumbnail' : item.image_id == selected_image}"
+      :title="item[0].baseFilename"
+      :class="{'selected_thumbnail' : item[0].image_id == selected_image}"
       loading="lazy"
       class="recent-image"
-      @click="setActiveImage(item)"
+      @click="setActiveImage(item[0])"
+    >
+  </div>
+  <div
+    v-else
+    class="placeholder"
+  >
+    <img
+      :src="'https://via.placeholder.com/768?text=no+jpg+preview+available'"
+      class="recent-image"
     >
   </div>
 </template>
 
 <script>
+
 export default {
   name: 'ThumbnailRow',
   props: {
@@ -25,6 +38,11 @@ export default {
     selected_image: {
       type: Number,
       required: false
+    },
+    grouped_images: {
+      type: Object,
+      default: () => {},
+      required: true
     }
   },
 
@@ -34,7 +52,11 @@ export default {
     },
 
     thumbnailWithFallback (item) {
-      return item.jpg_thumbnail_url || item.jpg_url
+      let thumbnailCover = item && item[0] && item[0].jpg_thumbnail_url
+      if (!thumbnailCover) {
+        thumbnailCover = item && item[0] && item[0].jpg_url
+      }
+      return thumbnailCover || 'https://via.placeholder.com/768?text=no+jpg+preview+available'
     }
   }
 }

src/components/sitepages/SiteData.vue

@@ -25,6 +25,7 @@
           <thumbnail-row
             class="data-thumbs"
             :images="recent_images"
+            :grouped_images="grouped_images"
             :selected_image="current_image.image_id"
             @thumbnailClicked="setActiveImage"
           />
@@ -384,7 +385,8 @@ export default {
 
     ...mapState('images', [
       'recent_images',
-      'current_image'
+      'current_image',
+      'grouped_images'
     ]),
 
     ...mapGetters('images', [

src/store/modules/images.js

@@ -6,7 +6,6 @@
  * for computing various attributes, etc.
  */
 
-// import { API } from 'aws-amplify'
 import Vue from 'vue'
 import axios from 'axios'
 import moment from 'moment'
@@ -46,6 +45,10 @@ const state = {
   // TODO: Write an action that will update a user's image list when images are added to their account
   user_images: [],
 
+  // grouped_images: object where images are grouped based on their SMARTSTK value
+  // Before the action group_images, there's an example of what this object looks like after being populated
+  grouped_images: {},
+
   show_user_data_only: false,
 
   // determines whether 'current_images' is set to show the most recent images with live updates.
@@ -56,6 +59,7 @@ const getters = {
   current_image: state => state.current_image,
   recent_images: state => state.recent_images,
   user_images: state => state.user_images,
+  grouped_images: state => state.grouped_images,
   show_user_data_only: state => state.show_user_data_only,
 
   current_image_fits_header: state => state.current_image.fits_header,
@@ -81,6 +85,7 @@ const getters = {
 const mutations = {
   setCurrentImage (state, the_current_image) { state.current_image = the_current_image },
   setRecentImages (state, recent_image_list) { state.recent_images = recent_image_list },
+  setGroupedImages (state, grouped_images) { state.grouped_images = grouped_images },
   setUserImages (state, user_images_list) { state.user_images = user_images_list },
   show_user_data_only (state, val) { state.show_user_data_only = val },
   live_data (state, val) { state.live_data = val },
@@ -116,9 +121,6 @@ const actions = {
      * image from SAF as the active image even after the user has navigated to
      * the WMD images page (where all the thumbnails are WMD images).
      *
-     */
-
-  /**
      * UPDATE the view with new incoming data.
      * This action is dispatched whenever a new-image-notification arrives.
      * It will get the latest image and add it to the stack of recent images,
@@ -128,7 +130,8 @@ const actions = {
      * image, and add it into the 'latest_images' list.
      *
      */
-  update_new_image ({ commit, state, rootState, dispatch }, new_base_filename) {
+
+  update_new_image ({ commit, state, rootState }, new_base_filename) {
     // No need to get the latest if the new image is from a different site.
     const site = rootState.site_config.selected_site
     // Get the image's site of origin from the beginning of the filename.
@@ -147,7 +150,6 @@ const actions = {
     axios.get(apiName + path).then(async response => {
       // Empty response. If this runs, something is wrong.
       if (response.data.length == 0) {
-        // dispatch('display_placeholder_image')
         return
       }
 
@@ -197,9 +199,7 @@ const actions = {
     })
   },
 
-  /**
-     *  This action will retrieve a list of images filtered by the parameters in filter_params
-     */
+  // This action will retrieve a list of images filtered by the parameters in filter_params
   get_filtered_images ({ commit, dispatch, rootState }, filter_params) {
     dispatch('toggle_live_data', false)
     const apiName = rootState.api_endpoints.active_api
@@ -248,16 +248,75 @@ const actions = {
       }
 
       commit('setRecentImages', response)
+      dispatch('group_images')
     }).catch(error => {
       console.warn(error)
     })
   },
 
   /**
-     *  LOAD the latest images, replacing the current list of latest_images.
-     *  @param {boolean} user_data_only: whether or not to filter by images
-     *     taken the active user or not.
-     */
+  LOAD the latest images, replacing the current list of latest_images.
+  @param {boolean} user_data_only: whether or not to filter by images
+  Taken the active user or not.
+
+  Grouping images as they load and we group them based on their SMARTSTK value
+  After the for loop, the grouped_images_local looks something like this:
+  grouped_images_local: {
+    site: 'tst',
+    imageGroups: {
+      1234: [...grouped images...],
+      5678: [...grouped images...],
+      9012: [...grouped images...]
+    }
+  }
+  */
+  group_images ({ commit, state, rootState, dispatch }) {
+    const currentSite = rootState.site_config.selected_site
+    let grouped_images_local = JSON.parse(JSON.stringify(state.grouped_images))
+    if (!grouped_images_local.imageGroups) {
+      grouped_images_local.imageGroups = {}
+    }
+    const recent_images = state.recent_images
+
+    // Resetting grouped_images to an empty object when selecting a different site
+    // This prevents accumulation of thumbnails from previous sites selected by user
+    if (grouped_images_local.site && grouped_images_local.site !== currentSite) {
+      dispatch('reset_grouped_images')
+      grouped_images_local = { site: currentSite }
+
+      // If grouped_images_local object doesn't have a key of site (i.e. when page first loads and when user selects
+      // a different site), assign the value of currentSite to the new key of site
+    } else if (!grouped_images_local.site) {
+      grouped_images_local.site = currentSite
+    }
+
+    for (const img of recent_images) {
+      const header = img && img.header
+      let SMARTSTK = header && header.SMARTSTK
+      // Creating a unique key (i.e. base_filename) for images where SMARTSK is 'no' while also avoiding grouping them as one stack
+      // We need this in order to display these images as thumbnails
+      if (SMARTSTK === 'no') {
+        SMARTSTK = img && img.base_filename
+        grouped_images_local.imageGroups[SMARTSTK] = []
+        grouped_images_local.imageGroups[SMARTSTK].push(img)
+      }
+
+      // Grouping images based on SMARTSTK
+      if (!grouped_images_local.imageGroups[SMARTSTK]) {
+        grouped_images_local.imageGroups[SMARTSTK] = []
+        grouped_images_local.imageGroups[SMARTSTK].push(img)
+      } else {
+        grouped_images_local.imageGroups[SMARTSTK].push(img)
+      }
+    }
+    commit('setGroupedImages', { ...grouped_images_local })
+  },
+
+  // Resets grouped_images to an empty object
+  // Dispatched when a different site is selected
+  reset_grouped_images ({ commit }) {
+    commit('setGroupedImages', {})
+  },
 
   async load_latest_x_images ({ dispatch, commit, state, rootState }, num_images) {
     // Old method of loading only a certain amount of images
@@ -294,6 +353,7 @@ const actions = {
 
       commit('setCurrentImage', response[0])
       commit('setRecentImages', response)
+      dispatch('group_images')
     }).catch(error => {
       console.error(error)
     })
@@ -314,6 +374,7 @@ const actions = {
     // Get site and user_id
     let url = null
     const site = rootState.site_config.selected_site
+
     const filterparams = {}
 
     const userid = user_id()
@@ -386,7 +447,6 @@ const actions = {
     if (state.show_user_data_only && userid) {
       filterparams.user_id = user_id
     }
-
     /**
          * The response for this api call is a list of elements with the form:
          *  image = {
@@ -423,14 +483,15 @@ const actions = {
 
       commit('setCurrentImage', response[0])
       commit('setRecentImages', response)
+      dispatch('group_images')
     }).catch(error => {
       console.error(error)
     })
 
     dispatch('load_latest_info_images')
   },
 
-  load_latest_info_images ({ state, commit, rootState }) {
+  load_latest_info_images ({ state, commit, rootState, dispatch }) {
     const site = rootState.site_config.selected_site
     const base_url = rootState.api_endpoints.active_api
 
@@ -490,7 +551,7 @@ const actions = {
   },
 
   // Load and display a single placeholder image for a site.
-  display_placeholder_image ({ commit }) {
+  display_placeholder_image ({ commit, dispatch }) {
     const placeholder_url = 'https://via.placeholder.com/768x768?text=nothing here yet'
     const placeholder_image = {
       jpg_url: placeholder_url,
@@ -499,18 +560,15 @@ const actions = {
     }
     commit('setRecentImages', [placeholder_image])
     commit('setCurrentImage', placeholder_image)
+    dispatch('reset_grouped_images')
   },
 
-  /**
-     * Set this_image as the current displayed image
-     */
+  // Set this_image as the current displayed image
   set_current_image ({ commit }, this_image) {
     commit('setCurrentImage', this_image)
   },
 
-  /**
-     * Set the current image to the most recent one in recent_images.
-     */
+  // Set the current image to the most recent one in recent_images.
   set_latest_image ({ commit, dispatch, state }) {
     const the_current_image = state.recent_images[0]
     commit('setCurrentImage', the_current_image)
@@ -541,6 +599,11 @@ const actions = {
     commit('setCurrentImage', first_image)
   },
 
+  set_grouped_images ({ commit, state }) {
+    const grouped_images_local = state.grouped_images
+    commit('setGroupedImages', { ...grouped_images_local })
+  },
+
   async get_fits_url ({ rootState }, { base_filename, data_type, reduction_level }) {
     // Get the global configuration for all sites from an api call.
     const apiName = rootState.api_endpoints.active_api