[CI] Update dependabot ignore list for dependencies which will always fail

* Add an active class to thumbnail to indicate current focused image

* Differentiate bg color between real-time and fixed

* scrollIntoView inline: center

* Added watcher for bounds change to trigger thumbnail scroll

* Resolve merge conflict with requestHistory change to telemetry collection

* Split thumbnail into sub component

* Monitor isFixed value to unpause playback status

.github/dependabot.yml

@@ -7,12 +7,13 @@ updates:
       interval: "daily"  
     open-pull-requests-limit: 10
     labels:
+      - "pr:e2e"
       - "type:maintenance"
       - "dependencies"
-      - "pr:e2e"
       - "pr:daveit"
-      - "pr:visual"
       - "pr:platform"
+    ignore:
+      - dependency-name: "@playwright/test" #we source the container instead of the dependency in CI
 
   - package-ecosystem: "github-actions"
     directory: "/"

src/plugins/imagery/components/ImageThumbnail.vue

@@ -0,0 +1,68 @@
+<!--
+ Open MCT, Copyright (c) 2014-2022, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+<div
+    class="c-imagery__thumb c-thumb"
+    :class="{
+        'active': active,
+        'selected': selected,
+        'real-time': realTime
+    }"
+    :title="image.formattedTime"
+>
+    <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>
+</template>
+
+<script>
+export default {
+    props: {
+        image: {
+            type: Object,
+            required: true
+        },
+        active: {
+            type: Boolean,
+            required: true
+        },
+        selected: {
+            type: Boolean,
+            required: true
+        },
+        realTime: {
+            type: Boolean,
+            required: true
+        }
+    }
+};
+</script>

src/plugins/imagery/components/ImageryView.vue

@@ -166,26 +166,15 @@
             class="c-imagery__thumbs-scroll-area"
             @scroll="handleScroll"
         >
-            <div
+            <ImageThumbnail
                 v-for="(image, index) in imageHistory"
                 :key="image.url + image.time"
-                class="c-imagery__thumb c-thumb"
-                :class="{ selected: focusedImageIndex === index && isPaused }"
-                :title="image.formattedTime"
-                @click="thumbnailClicked(index)"
-            >
-                <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>
+                :image="image"
+                :active="focusedImageIndex === index"
+                :selected="focusedImageIndex === index && isPaused"
+                :real-time="!isFixed"
+                @click.native="thumbnailClicked(index)"
+            />
         </div>
 
         <button
@@ -205,6 +194,7 @@ import moment from 'moment';
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
 import Compass from './Compass/Compass.vue';
 import ImageControls from './ImageControls.vue';
+import ImageThumbnail from './ImageThumbnail.vue';
 import imageryData from "../../imagery/mixins/imageryData";
 
 const REFRESH_CSS_MS = 500;
@@ -229,9 +219,11 @@ const SHOW_THUMBS_THRESHOLD_HEIGHT = 200;
 const SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT = 600;
 
 export default {
+    name: 'ImageryView',
     components: {
         Compass,
-        ImageControls
+        ImageControls,
+        ImageThumbnail
     },
     mixins: [imageryData],
     inject: ['openmct', 'domainObject', 'objectPath', 'currentView', 'imageFreshnessOptions'],
@@ -254,6 +246,7 @@ export default {
             visibleLayers: [],
             durationFormatter: undefined,
             imageHistory: [],
+            bounds: {},
             timeSystem: timeSystem,
             keyString: undefined,
             autoScroll: true,
@@ -569,6 +562,16 @@ export default {
             this.resetAgeCSS();
             this.updateRelatedTelemetryForFocusedImage();
             this.getImageNaturalDimensions();
+        },
+        bounds() {
+            this.scrollToFocused();
+        },
+        isFixed(newValue) {
+            const isRealTime = !newValue;
+            // if realtime unpause which will focus on latest image
+            if (isRealTime) {
+                this.paused(false);
+            }
         }
     },
     async mounted() {
@@ -610,6 +613,7 @@ export default {
         this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
         this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
         this.handleThumbWindowResizeStart = _.debounce(this.handleThumbWindowResizeStart, SCROLL_LATENCY);
+        this.scrollToFocused = _.debounce(this.scrollToFocused, 400);
 
         if (this.$refs.thumbsWrapper) {
             this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
@@ -845,7 +849,8 @@ export default {
             if (domThumb) {
                 domThumb.scrollIntoView({
                     behavior: 'smooth',
-                    block: 'center'
+                    block: 'center',
+                    inline: 'center'
                 });
             }
         },

src/plugins/imagery/components/imagery-view.scss

@@ -258,13 +258,22 @@
     min-width: $w;
     width: $w;
 
+    &.active {
+        background: $colorSelectedBg;
+        color: $colorSelectedFg;
+    }
     &:hover {
         background: $colorThumbHoverBg;
     }
-
     &.selected {
-        background: $colorPausedBg !important;
-        color: $colorPausedFg !important;
+        // fixed time - selected bg will match active bg color
+        background: $colorSelectedBg;
+        color: $colorSelectedFg;
+        &.real-time {
+            // real time - bg orange when selected
+            background: $colorPausedBg !important;
+            color: $colorPausedFg !important;
+        }
     }
 
     &__image {

src/plugins/imagery/mixins/imageryData.js

@@ -139,6 +139,7 @@ export default {
             // forcibly reset the imageContainer size to prevent an aspect ratio distortion
             delete this.imageContainerWidth;
             delete this.imageContainerHeight;
+            this.bounds = bounds; // setting bounds for ImageryView watcher
         },
         timeSystemChange() {
             this.timeSystem = this.timeContext.timeSystem();

src/plugins/plugins.js

@@ -58,7 +58,6 @@ define([
     './condition/plugin',
     './conditionWidget/plugin',
     './themes/espresso',
-    './themes/maelstrom',
     './themes/snow',
     './URLTimeSettingsSynchronizer/plugin',
     './notificationIndicator/plugin',
@@ -122,7 +121,6 @@ define([
     ConditionPlugin,
     ConditionWidgetPlugin,
     Espresso,
-    Maelstrom,
     Snow,
     URLTimeSettingsSynchronizer,
     NotificationIndicator,
@@ -207,7 +205,6 @@ define([
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
     plugins.Espresso = Espresso.default;
-    plugins.Maelstrom = Maelstrom.default;
     plugins.Snow = Snow.default;
     plugins.Condition = ConditionPlugin.default;
     plugins.ConditionWidget = ConditionWidgetPlugin.default;

src/plugins/themes/maelstrom-theme.scss

@@ -1,22 +0,0 @@
-@import "../../styles/vendor/normalize-min";
-@import "../../styles/constants";
-@import "../../styles/constants-mobile.scss";
-
-@import "../../styles/constants-maelstrom";
-
-@import "../../styles/mixins";
-@import "../../styles/animations";
-@import "../../styles/about";
-@import "../../styles/glyphs";
-@import "../../styles/global";
-@import "../../styles/status";
-@import "../../styles/limits";
-@import "../../styles/controls";
-@import "../../styles/forms";
-@import "../../styles/table";
-@import "../../styles/legacy";
-@import "../../styles/legacy-plots";
-@import "../../styles/plotly";
-@import "../../styles/legacy-messages";
-
-@import "../../styles/vue-styles.scss";

src/plugins/themes/maelstrom.js

@@ -1,7 +0,0 @@
-import { installTheme } from './installTheme';
-
-export default function plugin() {
-    return function install(openmct) {
-        installTheme(openmct, 'maelstrom');
-    };
-}

webpack.common.js

@@ -30,7 +30,6 @@ const config = {
         inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
         espressoTheme: './src/plugins/themes/espresso-theme.scss',
         snowTheme: './src/plugins/themes/snow-theme.scss',
-        maelstromTheme: './src/plugins/themes/maelstrom-theme.scss'
     },
     output: {
         globalObject: 'this',