[NIRVSS] Encode imagery metadata into image file names (#3759)

* [NIRVSS] Encode imagery metadata into image file names

* added image name metadata to example.imagery plugin.

Co-authored-by: Andrew Henry <akhenry@gmail.com>

API.md

@@ -430,6 +430,7 @@ Known hints:
 * `domain`: Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
 * `range`: Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
 * `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
+* `imageDownloadName`: Indicates that the value may be interpreted as the name of the image file.
 
 ##### The Time Conductor and Telemetry 
 

example/imagery/plugin.js

@@ -50,11 +50,16 @@ define([
         const IMAGE_DELAY = 20000;
 
         function pointForTimestamp(timestamp, name) {
+            const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
+            const urlItems = url.split('/');
+            const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`;
+
             return {
-                name: name,
+                name,
                 utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
-                url: IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length]
+                url,
+                imageDownloadName
             };
         }
 
@@ -139,6 +144,14 @@ define([
                                 hints: {
                                     image: 1
                                 }
+                            },
+                            {
+                                name: 'Image Download Name',
+                                key: 'imageDownloadName',
+                                format: 'imageDownloadName',
+                                hints: {
+                                    imageDownloadName: 1
+                                }
                             }
                         ]
                     };

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -134,10 +134,15 @@
              class="c-imagery__thumb c-thumb"
              :class="{ selected: focusedImageIndex === index && isPaused }"
              @click="setFocusedImage(index, thumbnailClick)"
+        >
+            <a href=""
+               :download="image.imageDownloadName"
+               @click.prevent
             >
                 <img class="c-thumb__image"
                      :src="image.url"
                 >
+            </a>
             <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
         </div>
     </div>
@@ -218,6 +223,9 @@ export default {
         canTrackDuration() {
             return this.openmct.time.clock() && this.timeSystem.isUTCBased;
         },
+        focusedImageDownloadName() {
+            return this.getImageDownloadName(this.focusedImage);
+        },
         isNextDisabled() {
             let disabled = false;
 
@@ -345,6 +353,7 @@ export default {
         this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] };
         this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
         this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints);
+        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
 
         // related telemetry keys
         this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
@@ -532,6 +541,15 @@ export default {
             // Replace ISO "T" with a space to allow wrapping
             return dateTimeStr.replace("T", " ");
         },
+        getImageDownloadName(datum) {
+            let imageDownloadName = '';
+            if (datum) {
+                const key = this.imageDownloadNameHints.key;
+                imageDownloadName = datum[key];
+            }
+
+            return imageDownloadName;
+        },
         parseTime(datum) {
             if (!datum) {
                 return;
@@ -655,6 +673,7 @@ export default {
             image.formattedTime = this.formatTime(datum);
             image.url = this.formatImageUrl(datum);
             image.time = datum[this.timeKey];
+            image.imageDownloadName = this.getImageDownloadName(datum);
 
             this.imageHistory.push(image);
 
@@ -777,6 +796,9 @@ export default {
             this.focusedImageNaturalAspectRatio = undefined;
 
             const img = this.$refs.focusedImage;
+            if (!img) {
+                return;
+            }
 
             // TODO - should probably cache this
             img.addEventListener('load', () => {