Discrete Event Visualization in Timeline

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -126,7 +126,7 @@ test.describe('Gantt Chart', () => {
     await page.goto(ganttChart.url);
 
     // Assert that the Plan's status is displayed as draft
-    expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(
+    expect(await page.locator('.c-swimlane.is-status--draft').count()).toBe(
       Object.keys(testPlan1).length
     );
   });

e2e/tests/functional/plugins/event/eventTimelineView.e2e.spec.js

@@ -0,0 +1,111 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults, setTimeConductorBounds } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Event Timeline View', () => {
+  let eventTimelineView;
+  let eventGenerator1;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    eventTimelineView = await createDomainObjectWithDefaults(page, {
+      type: 'Time Strip'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: eventTimelineView.uuid
+    });
+
+    eventGenerator1 = await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: eventTimelineView.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator with Acknowledge',
+      parent: eventTimelineView.uuid
+    });
+
+    await setTimeConductorBounds(page, {
+      startDate: '2024-01-01',
+      endDate: '2024-01-01',
+      startTime: '01:01:00',
+      endTime: '01:04:00'
+    });
+  });
+
+  test('Ensure we can build a Time Strip with event', async ({ page }) => {
+    await page.goto(eventTimelineView.url);
+
+    // click on an event
+    await page
+      .getByLabel(eventTimelineView.name)
+      .getByLabel(/PROGRAM ALARM/)
+      .click();
+
+    // click on the event inspector tab
+    await page.getByRole('tab', { name: 'Event' }).click();
+
+    // ensure the event inspector has the the same event
+    await expect(page.getByText(/PROGRAM ALARM/)).toBeVisible();
+
+    // count the event lines
+    const eventWrappersContainer = page.locator('.c-events-tsv__container');
+    const eventWrappers = eventWrappersContainer.locator('.c-events-tsv__event-line');
+    const expectedEventWrappersCount = 25;
+    await expect(eventWrappers).toHaveCount(expectedEventWrappersCount);
+
+    // click on another event
+    await page
+      .getByLabel(eventTimelineView.name)
+      .getByLabel(/pegged/)
+      .click();
+
+    // ensure the tooltip shows up
+    await expect(
+      page.getByRole('tooltip').getByText(/pegged on horizontal velocity/)
+    ).toBeVisible();
+
+    // and that event appears in the inspector
+    await expect(
+      page.getByLabel('Inspector Views').getByText(/pegged on horizontal velocity/)
+    ).toBeVisible();
+
+    // turn on extended lines
+    await page
+      .getByLabel(eventTimelineView.name)
+      .getByRole('button', {
+        name: `Toggle extended event lines overlay for ${eventGenerator1.name}`
+      })
+      .click();
+
+    // count the extended lines
+    const overlayLinesContainer = page.locator('.c-timeline__overlay-lines');
+    const extendedLines = overlayLinesContainer.locator('.c-timeline__event-line--extended');
+    const expectedCount = 25;
+    await expect(extendedLines).toHaveCount(expectedCount);
+  });
+});

example/eventGenerator/EventLimitProvider.js

@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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.
+ *****************************************************************************/
+
+export const SEVERITY_CSS = {
+  WATCH: 'is-event--yellow',
+  WARNING: 'is-event--yellow',
+  DISTRESS: 'is-event--red',
+  CRITICAL: 'is-event--red',
+  SEVERE: 'is-event--purple'
+};
+
+const NOMINAL_SEVERITY = {
+  cssClass: 'is-event--no-style',
+  name: 'NOMINAL'
+};
+
+/**
+ * @typedef {Object} EvaluationResult
+ * @property {string} cssClass CSS class information
+ * @property {string} name a severity name
+ */
+export default class EventLimitProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
+
+  getLimitEvaluator(domainObject) {
+    const self = this;
+
+    return {
+      /**
+       * Evaluates a telemetry datum for severity.
+       *
+       * @param {Datum} datum the telemetry datum from the historical or realtime plugin ({@link Datum})
+       * @param {object} valueMetadata metadata about the telemetry datum
+       *
+       * @returns {EvaluationResult} ({@link EvaluationResult})
+       */
+      evaluate: function (datum, valueMetadata) {
+        // prevent applying the class to the tr, only to td
+        if (!valueMetadata) {
+          return;
+        }
+
+        if (datum.severity in SEVERITY_CSS) {
+          return self.getSeverity(datum, valueMetadata);
+        }
+
+        return NOMINAL_SEVERITY;
+      }
+    };
+  }
+  getSeverity(datum, valueMetadata) {
+    if (!valueMetadata) {
+      return;
+    }
+
+    const severityValue = datum.severity;
+
+    return {
+      cssClass: SEVERITY_CSS[severityValue],
+      name: severityValue
+    };
+  }
+
+  supportsLimits(domainObject) {
+    return domainObject.type === 'eventGenerator';
+  }
+}

example/eventGenerator/EventMetadataProvider.js

@@ -41,7 +41,10 @@ class EventMetadataProvider {
           {
             key: 'message',
             name: 'Message',
-            format: 'string'
+            format: 'string',
+            hints: {
+              label: 0
+            }
           }
         ]
       }

example/eventGenerator/EventTelemetryProvider.js

@@ -24,23 +24,35 @@
  * Module defining EventTelemetryProvider. Created by chacskaylo on 06/18/2015.
  */
 
+import { SEVERITY_CSS } from './EventLimitProvider.js';
 import messages from './transcript.json';
 
+const DUR_MIN = 1000;
+const DUR_MAX = 10000;
 class EventTelemetryProvider {
   constructor() {
     this.defaultSize = 25;
   }
 
   generateData(firstObservedTime, count, startTime, duration, name) {
     const millisecondsSinceStart = startTime - firstObservedTime;
-    const utc = startTime + count * duration;
+    const randStartDelay = Math.max(DUR_MIN, Math.random() * DUR_MAX);
+    const utc = startTime + randStartDelay + count * duration;
     const ind = count % messages.length;
     const message = messages[ind] + ' - [' + millisecondsSinceStart + ']';
+    // pick a random severity level + 1 for an undefined level so we can do nominal
+    const severity =
+      Math.random() > 0.4
+        ? Object.keys(SEVERITY_CSS)[
+            Math.floor(Math.random() * Object.keys(SEVERITY_CSS).length + 1)
+          ]
+        : undefined;
 
     return {
       name,
       utc,
-      message
+      message,
+      severity
     };
   }
 
@@ -53,7 +65,7 @@ class EventTelemetryProvider {
   }
 
   subscribe(domainObject, callback) {
-    const duration = domainObject.telemetry.duration * 1000;
+    const duration = domainObject.telemetry.duration * DUR_MIN;
     const firstObservedTime = Date.now();
     let count = 0;
 
@@ -78,7 +90,7 @@ class EventTelemetryProvider {
   request(domainObject, options) {
     let start = options.start;
     const end = Math.min(Date.now(), options.end); // no future values
-    const duration = domainObject.telemetry.duration * 1000;
+    const duration = domainObject.telemetry.duration * DUR_MIN;
     const size = options.size ? options.size : this.defaultSize;
     const data = [];
     const firstObservedTime = options.start;

example/eventGenerator/plugin.js

@@ -19,6 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import EventLimitProvider from './EventLimitProvider.js';
 import EventMetadataProvider from './EventMetadataProvider.js';
 import EventTelemetryProvider from './EventTelemetryProvider.js';
 import EventWithAcknowledgeTelemetryProvider from './EventWithAcknowledgeTelemetryProvider.js';
@@ -54,5 +55,7 @@ export default function EventGeneratorPlugin(options) {
     });
 
     openmct.telemetry.addProvider(new EventWithAcknowledgeTelemetryProvider());
+
+    openmct.telemetry.addProvider(new EventLimitProvider(openmct));
   };
 }

index.html

@@ -113,7 +113,8 @@
           creatable: true
         })
       );
-      openmct.install(openmct.plugins.Timeline());
+      const timeLinePlugin = openmct.plugins.Timeline();
+      openmct.install(timeLinePlugin);
       openmct.install(openmct.plugins.Hyperlink());
       openmct.install(openmct.plugins.UTCTimeSystem());
       openmct.install(
@@ -234,6 +235,7 @@
       openmct.install(openmct.plugins.Timelist());
       openmct.install(openmct.plugins.BarChart());
       openmct.install(openmct.plugins.ScatterPlot());
+      openmct.install(openmct.plugins.EventTimestripPlugin(timeLinePlugin.extendedLinesBus));
       document.addEventListener('DOMContentLoaded', function () {
         openmct.start();
       });

src/api/tooltips/ToolTip.js

@@ -27,10 +27,11 @@ import TooltipComponent from './components/TooltipComponent.vue';
 
 class Tooltip extends EventEmitter {
   constructor(
-    { toolTipText, toolTipLocation, parentElement } = {
+    { toolTipText, toolTipLocation, parentElement, cssClasses } = {
       tooltipText: '',
       toolTipLocation: 'below',
-      parentElement: null
+      parentElement: null,
+      cssClasses: []
     }
   ) {
     super();
@@ -42,7 +43,8 @@ class Tooltip extends EventEmitter {
       provide: {
         toolTipText,
         toolTipLocation,
-        parentElement
+        parentElement,
+        cssClasses
       },
       template: '<tooltip-component toolTipText="toolTipText"></tooltip-component>'
     });

src/api/tooltips/ToolTipAPI.js

@@ -83,7 +83,7 @@ class TooltipAPI {
    */
 
   /**
-   * Tooltips take an options object that consists of the string, tooltipLocation, and parentElement
+   * Tooltips take an options object that consists of the string, tooltipLocation, a parentElement, and an array of cssClasses
    * @param {TooltipOptions} options
    */
   tooltip(options) {

src/api/tooltips/components/TooltipComponent.vue

@@ -22,7 +22,8 @@ at runtime from the About dialog for additional information.
 <template>
   <div
     ref="tooltip-wrapper"
-    class="c-menu c-tooltip-wrapper"
+    class="c-tooltip-wrapper"
+    :class="cssClasses"
     :style="toolTipLocationStyle"
     role="tooltip"
     aria-labelledby="tooltip-text"
@@ -36,7 +37,7 @@ at runtime from the About dialog for additional information.
 
 <script>
 export default {
-  inject: ['toolTipText', 'toolTipLocation', 'parentElement'],
+  inject: ['toolTipText', 'toolTipLocation', 'parentElement', 'cssClasses'],
   computed: {
     toolTipCoordinates() {
       return this.parentElement.getBoundingClientRect();

src/api/tooltips/components/tooltip-component.scss

@@ -1,9 +1,13 @@
 .c-tooltip-wrapper {
+  @include menuOuter();
   max-width: 200px;
   height: auto;
   width: auto;
-  padding: $interiorMargin;
+  padding: $interiorMargin $interiorMarginLg;
   overflow-wrap: break-word;
+  pointer-events: none;
+  position: absolute;
+  z-index: 100;
 }
 
 .c-tooltip {