plot w/ two telemetries in inspector

* e2e test for timage thumbnail visibility and size

* Lint fix

* Remove URL comment

* Added comment and assigned selectors to var

e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js

@@ -344,6 +344,97 @@ test('Example Imagery in Display layout', async ({ page }) => {
     expect(backgroundImageUrl2 >= backgroundImageUrl1);
 });
 
+test.describe('Example imagery thumbnails resize in display layouts', () => {
+
+    test('Resizing the layout changes thumbnail visibility and size', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        const thumbsWrapperLocator = await page.locator('.c-imagery__thumbs-wrapper');
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Display Layout")
+        await page.locator('li:has-text("Display Layout")').click();
+        const displayLayoutTitleField = page.locator('text=Properties Title Notes Horizontal grid (px) Vertical grid (px) Horizontal size ( >> input[type="text"]');
+        await displayLayoutTitleField.click();
+
+        await displayLayoutTitleField.fill('Thumbnail Display Layout');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+
+        // Click text=Save and Finish Editing
+        await page.locator('text=Save and Finish Editing').click();
+
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Example Imagery")
+        await page.locator('li:has-text("Example Imagery")').click();
+
+        const imageryTitleField = page.locator('text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]');
+        // Click text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.click();
+
+        // Fill text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.fill('Thumbnail Example Imagery');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Thumbnail Example Imagery Imagery Layout Snapshot >> button >> nth=0
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Thumbnail Example Imagery Imagery Layout Snapshot >> button').first().click()
+        ]);
+
+        // Edit mode
+        await page.locator('text=Thumbnail Display Layout Snapshot >> button').nth(3).click();
+
+        // Click on example imagery to expose toolbar
+        await page.locator('text=Thumbnail Example Imagery Snapshot Large View').click();
+
+        // expect thumbnails not be visible when first added
+        await expect.soft(thumbsWrapperLocator.isHidden()).toBeTruthy();
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        /*
+        The following arbitrary values are added to observe the separate visual
+        conditions of the thumbnails (hidden, small thumbnails, regular thumbnails).
+        Specifically, height is set to 50px for small thumbs and 100px for regular
+        */
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('50');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).toHaveClass(/is-small-thumbs/);
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('100');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
+
+    });
+
+});
+
 test.describe('Example Imagery in Flexible layout', () => {
     test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
     test.fixme('Can use alt+drag to move around image once zoomed in');

src/ui/inspector/details/Properties.vue

@@ -25,39 +25,60 @@
     <div class="c-inspect-properties__header">
         Details
     </div>
-    <ul
+        <ObjectView
-        v-if="hasDetails"
+            style="min-height:300px;"
-        class="c-inspect-properties__section"
+            :default-object="defaultObject"
-    >
+            :show-edit-view="showEditView"
-        <Component
+            :object-view-key="objectViewKey"
-            :is="getComponent(detail)"
-            v-for="detail in details"
-            :key="detail.name"
-            :detail="detail"
         />
-
-    </ul>
-    <div
-        v-else
-        class="c-inspect-properties__row--span-all"
-    >
-        {{ noDetailsMessage }}
-    </div>
 </div>
 </template>
 
 <script>
 import Moment from 'moment';
-import DetailText from './DetailText.vue';
+import ObjectView from '../../components/ObjectView.vue';
 
 export default {
     components: {
-        DetailText
+        ObjectView
     },
     inject: ['openmct'],
     data() {
+        const STACKED_PLOT_TYPE_KEY = 'telemetry.plot.stacked';
+        const stackedPlotType = this.openmct.types.get(STACKED_PLOT_TYPE_KEY);
+        const composition = [
+            'b66a22b6-7f12-4358-bd95-a9092486ddd3',
+            '0072d390-12b6-4ecc-93e5-2598df36b6d7'
+        ];
+        const tempStackedPlot = {
+            identifier: {
+                namespace: '',
+                key: 'temporary-stacked-plot'
+            },
+            name: 'Data Pivot',
+            type: STACKED_PLOT_TYPE_KEY
+        };
+
+        stackedPlotType.definition.initialize(tempStackedPlot);
+        tempStackedPlot.configuration = {
+            useIndependentTime: true,
+            timeOptions: {
+                mode: {
+                    key: "fixed" //'local'
+                },
+                fixedOffsets: {
+                    start: 1653334980000, //timestamp
+                    end: 1653335080000
+                }
+            }
+        };
+        tempStackedPlot.composition.push(...composition);
+
         return {
-            selection: undefined
+            selection: undefined,
+            defaultObject: tempStackedPlot,
+            showEditView: false,
+            objectViewKey: 'plot-stacked'
         };
     },
     computed: {
@@ -200,6 +221,7 @@ export default {
     mounted() {
         this.openmct.selection.on('change', this.updateSelection);
         this.updateSelection(this.openmct.selection.get());
+
     },
     beforeDestroy() {
         this.openmct.selection.off('change', this.updateSelection);