added override image name in example.imagery plugin sample images.

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
+                                }
                             }
                         ]
                     };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.3.3-SNAPSHOT",
+  "version": "1.4.0",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -87,9 +87,14 @@
              :class="{ selected: focusedImageIndex === index && isPaused }"
              @click="setFocusedImage(index, thumbnailClick)"
         >
-            <img class="c-thumb__image"
-                 :src="formatImageUrl(datum)"
+            <a :href="datum.url"
+               :download="datum.imageDownloadName"
+               @click.prevent
             >
+                <img class="c-thumb__image"
+                     :src="datum.url"
+                >
+            </a>
             <div class="c-thumb__timestamp">{{ formatTime(datum) }}</div>
         </div>
     </div>
@@ -156,6 +161,9 @@ export default {
         canTrackDuration() {
             return this.openmct.time.clock() && this.timeSystem.isUTCBased;
         },
+        focusedImageDownloadName() {
+            return this.getImageDownloadName(this.focusedImage);
+        },
         isNextDisabled() {
             let disabled = false;
 
@@ -214,6 +222,7 @@ export default {
         this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
         this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
         this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.metadata.valuesForHints(['image'])[0]);
+        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
 
         // initialize
         this.timeKey = this.timeSystem.key;
@@ -275,6 +284,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;
@@ -393,6 +411,7 @@ export default {
                 return;
             }
 
+            datum.imageDownloadName = this.getImageDownloadName(datum);
             this.imageHistory.push(datum);
 
             if (setFocused) {