From b5a0667027b4b89f8f4d6cdb3c00082516033b46 Mon Sep 17 00:00:00 2001 From: Shefali Date: Mon, 27 Jan 2025 10:48:15 -0800 Subject: [PATCH 1/2] Account for right y-axes when calculating now line position. Don't show the now line if it's out of bounds of the time axis --- src/ui/components/TimeSystemAxis.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue index 92014e54df3..f7948bcb174 100644 --- a/src/ui/components/TimeSystemAxis.vue +++ b/src/ui/components/TimeSystemAxis.vue @@ -116,8 +116,10 @@ export default { this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, 20)`; const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0; + + this.leftAlignmentOffset = this.alignmentData.leftWidth + leftOffset; this.alignmentOffset = - this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset; + this.leftAlignmentOffset + this.alignmentData.rightWidth + rightOffset; this.refresh(); }, deep: true @@ -175,8 +177,8 @@ export default { this.nowMarkerStyle.height = this.contentHeight + 'px'; const nowTimeStamp = this.openmct.time.now(); const now = this.xScale(nowTimeStamp); - this.nowMarkerStyle.left = `${now + this.alignmentOffset}px`; - if (now > this.width) { + this.nowMarkerStyle.left = `${now + this.leftAlignmentOffset}px`; + if (now < 0 || now > this.width) { nowMarker.classList.add('hidden'); } } From ba03fe91601d4a53791786340281f0090f044b02 Mon Sep 17 00:00:00 2001 From: Shefali Date: Mon, 27 Jan 2025 11:44:54 -0800 Subject: [PATCH 2/2] Add test for now marker in realtime and out of bounds modes --- .../functional/planning/timestrip.e2e.spec.js | 83 +++++++++++++++---- src/ui/components/TimeSystemAxis.vue | 4 +- 2 files changed, 71 insertions(+), 16 deletions(-) diff --git a/e2e/tests/functional/planning/timestrip.e2e.spec.js b/e2e/tests/functional/planning/timestrip.e2e.spec.js index 1d82071cd1e..4303f308c2d 100644 --- a/e2e/tests/functional/planning/timestrip.e2e.spec.js +++ b/e2e/tests/functional/planning/timestrip.e2e.spec.js @@ -24,7 +24,9 @@ import { createDomainObjectWithDefaults, createPlanFromJSON, navigateToObjectWithFixedTimeBounds, - setFixedIndependentTimeConductorBounds + setFixedIndependentTimeConductorBounds, + setFixedTimeMode, + setTimeConductorBounds } from '../../../appActions.js'; import { expect, test } from '../../../pluginFixtures.js'; @@ -74,21 +76,14 @@ const testPlan = { }; test.describe('Time Strip', () => { - test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts', async ({ - page - }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/nasa/openmct/issues/5627' - }); - - // Constant locators - const activityBounds = page.locator('.activity-bounds'); + let timestrip; + let plan; + test.beforeEach(async ({ page }) => { // Goto baseURL await page.goto('./', { waitUntil: 'domcontentloaded' }); - const timestrip = await test.step('Create a Time Strip', async () => { + timestrip = await test.step('Create a Time Strip', async () => { const createdTimeStrip = await createDomainObjectWithDefaults(page, { type: 'Time Strip' }); const objectName = await page.locator('.l-browse-bar__object-name').innerText(); expect(objectName).toBe(createdTimeStrip.name); @@ -96,7 +91,7 @@ test.describe('Time Strip', () => { return createdTimeStrip; }); - const plan = await test.step('Create a Plan and add it to the timestrip', async () => { + plan = await test.step('Create a Plan and add it to the timestrip', async () => { const createdPlan = await createPlanFromJSON(page, { name: 'Test Plan', json: testPlan @@ -110,6 +105,22 @@ test.describe('Time Strip', () => { .dragTo(page.getByLabel('Object View')); await page.getByLabel('Save').click(); await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(); + + return createdPlan; + }); + }); + test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts', async ({ + page + }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/nasa/openmct/issues/5627' + }); + + // Constant locators + const activityBounds = page.locator('.activity-bounds'); + + await test.step('Set time strip to fixed timespan mode and verify activities', async () => { const startBound = testPlan.TEST_GROUP[0].start; const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end; @@ -119,8 +130,6 @@ test.describe('Time Strip', () => { // Verify all events are displayed const eventCount = await page.locator('.activity-bounds').count(); expect(eventCount).toEqual(testPlan.TEST_GROUP.length); - - return createdPlan; }); await test.step('TimeStrip can use the Independent Time Conductor', async () => { @@ -177,4 +186,48 @@ test.describe('Time Strip', () => { expect(await activityBounds.count()).toEqual(1); }); }); + + test('Time strip now line', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/nasa/openmct/issues/7817' + }); + + await test.step('Is displayed in realtime mode', async () => { + await expect(page.getByLabel('Now Marker')).toBeVisible(); + }); + + await test.step('Is hidden when out of bounds of the time axis', async () => { + // Switch to fixed timespan mode + await setFixedTimeMode(page); + // Get the end bounds + const endBounds = await page.getByLabel('End bounds').textContent(); + + // Add 2 minutes to end bound datetime and use it as the new end time + let endTimeStamp = new Date(endBounds); + endTimeStamp.setUTCMinutes(endTimeStamp.getUTCMinutes() + 2); + const endDate = endTimeStamp.toISOString().split('T')[0]; + const milliseconds = endTimeStamp.getMilliseconds(); + const endTime = endTimeStamp.toISOString().split('T')[1].replace(`.${milliseconds}Z`, ''); + + // Subtract 1 minute from the end bound and use it as the new start time + let startTimeStamp = new Date(endBounds); + startTimeStamp.setUTCMinutes(startTimeStamp.getUTCMinutes() + 1); + const startDate = startTimeStamp.toISOString().split('T')[0]; + const startMilliseconds = startTimeStamp.getMilliseconds(); + const startTime = startTimeStamp + .toISOString() + .split('T')[1] + .replace(`.${startMilliseconds}Z`, ''); + // Set fixed timespan mode to the future so that "now" is out of bounds. + await setTimeConductorBounds(page, { + startDate, + endDate, + startTime, + endTime + }); + + await expect(page.getByLabel('Now Marker')).toBeHidden(); + }); + }); }); diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue index f7948bcb174..a1dc86e3e90 100644 --- a/src/ui/components/TimeSystemAxis.vue +++ b/src/ui/components/TimeSystemAxis.vue @@ -21,7 +21,9 @@ -->