inspector works

src/plugins/events/EventInspectorViewProvider.js

@@ -3,22 +3,20 @@ import mount from 'utils/mount';
 import EventInspectorView from './components/EventInspectorView.vue';
 
 export default function EventInspectorViewProvider(openmct) {
-  const INSPECTOR_KEY = 'telemetry.events.inspector';
+  const TIMELINE_VIEW = 'time-strip.event.inspector';
   return {
-    key: INSPECTOR_KEY,
+    key: TIMELINE_VIEW,
     name: 'Event',
     canView: function (selection) {
-      if (
+      if (selection.length === 0 || selection[0].length === 0) {
-        !Array.isArray(selection) ||
-        selection.length === 0 ||
-        !Array.isArray(selection[0]) ||
-        selection[0].length === 0
-      ) {
         return false;
       }
-      let object = selection[0][0].context?.item;
 
-      return object && object.type === INSPECTOR_KEY;
+      console.debug(`🧟 Event Inspector received selection`, selection);
+
+      const selectionType = selection[0][0].context?.type;
+      const event = selection[0][0].context?.event;
+      return selectionType === 'time-strip-event-selection' && event;
     },
     view: function (selection) {
       let _destroy = null;
@@ -33,9 +31,10 @@ export default function EventInspectorViewProvider(openmct) {
               },
               provide: {
                 openmct,
-                domainObject: selection[0][0].context.item
+                domainObject: selection[0][0].context.item,
+                event: selection[0][0].context.event
               },
-              template: '<event-inspector></event-inspector>'
+              template: '<event-inspector-view></event-inspector-view>'
             },
             {
               app: openmct.app,
@@ -45,7 +44,7 @@ export default function EventInspectorViewProvider(openmct) {
           _destroy = destroy;
         },
         priority: function () {
-          return openmct.priority.HIGH + 1;
+          return openmct.priority.HIGH;
         },
         destroy: function () {
           if (_destroy) {

src/plugins/events/components/EventInspectorView.vue

@@ -24,21 +24,14 @@
   <div class="c-timelist-properties">
     <div class="c-inspect-properties">
       <ul class="c-inspect-properties__section">
-        <div class="c-inspect-properties_header" title="'Placeholder'">Placeholder</div>
+        <div class="c-inspect-properties_header" title="'Details'">Details</div>
-        <li class="c-inspect-properties__row">
+        <li
-          <div class="c-inspect-properties__label" title="Foo">Foo</div>
+          v-for="[key, value] in Object.entries(event)"
-          <div class="c-inspect-properties__value">
+          :key="key"
-            <select
+          class="c-inspect-properties__row"
-              v-if="canEdit"
+        >
-              v-model="isExpanded"
+          <span class="c-inspect-properties__label">{{ key }}</span>
-              aria-label="Display Style"
+          <span class="c-inspect-properties__value">{{ value }}</span>
-              @change="updateExpandedView"
-            >
-              <option :key="'expanded-view-option-enabled'" :value="true">Expanded</option>
-              <option :key="'expanded-view-option-disabled'" :value="false">Compact</option>
-            </select>
-            <span>placeholder</span>
-          </div>
         </li>
       </ul>
     </div>
@@ -47,27 +40,6 @@
 
 <script>
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'event']
-  data() {
-    return {
-      isEditing: this.openmct.editor.isEditing()
-    };
-  },
-  computed: {
-    canEdit() {
-      return this.isEditing && !this.domainObject.locked;
-    }
-  },
-  mounted() {
-    this.openmct.editor.on('isEditing', this.setEditState);
-  },
-  beforeUnmount() {
-    this.openmct.editor.off('isEditing', this.setEditState);
-  },
-  methods: {
-    setEditState(isEditing) {
-      this.isEditing = isEditing;
-    }
-  }
 };
 </script>

src/plugins/events/components/EventTimelineView.vue

@@ -132,7 +132,6 @@ export default {
           clientWidth = parent.getBoundingClientRect().width;
         }
       }
-      console.debug('🇹🇯 Calculated clientWidth:', clientWidth);
 
       return clientWidth;
     },
@@ -311,20 +310,66 @@ export default {
     },
     plotEvents(item, containerElement, index) {
       const existingEventWrapper = this.getEventWrapper(item);
-      //eventWrapper wraps the vertical tick and the EVENT
+      // eventWrapper wraps the vertical tick and the EVENT
       if (existingEventWrapper) {
         this.updateExistingEventWrapper(existingEventWrapper, item);
       } else {
         const eventWrapper = this.createEventWrapper(index, item);
         containerElement.appendChild(eventWrapper);
       }
-      console.debug('🧟 Event time:', new Date(item.time).toTimeString());
-      console.debug('🧟 Scaled X position:', this.xScale(item.time));
     },
     updateExistingEventWrapper(existingEventWrapper, event) {
-      //Update the x co-ordinates of the event wrapper
+      // Update the x co-ordinates of the event wrapper
       existingEventWrapper.style.left = `${this.xScale(event.time)}px`;
     },
+    createPathSelection() {
+      const selection = [];
+      selection.unshift({
+        element: this.$el,
+        context: {
+          item: this.domainObject
+        }
+      });
+      this.objectPath.forEach((pathObject, index) => {
+        selection.push({
+          element: this.openmct.layout.$refs.browseObject.$el,
+          context: {
+            item: pathObject
+          }
+        });
+      });
+
+      return selection;
+    },
+    createSelectionForInspector(event) {
+      const eventContext = {
+        type: 'time-strip-event-selection',
+        event
+      };
+
+      const selection = this.createPathSelection();
+      if (
+        selection.length &&
+        this.openmct.objects.areIdsEqual(
+          selection[0].context.item.identifier,
+          this.domainObject.identifier
+        )
+      ) {
+        selection[0].context = {
+          ...selection[0].context,
+          ...eventContext
+        };
+      } else {
+        selection.unshift({
+          element: this.$el,
+          context: {
+            item: this.domainObject,
+            ...eventContext
+          }
+        });
+      }
+      this.openmct.selection.select(selection, true);
+    },
     createEventWrapper(index, event) {
       const id = `${ID_PREFIX}${event.time}`;
       const eventWrapper = document.createElement('div');
@@ -332,16 +377,16 @@ export default {
       eventWrapper.setAttribute('id', id);
       eventWrapper.classList.add(EVENT_WRAPPER_CLASS);
       eventWrapper.style.left = `${this.xScale(event.time)}px`;
-      //create event vertical tick indicator
+
       const eventTickElement = document.createElement('div');
       eventTickElement.classList.add('c-events-tsv__event-handle');
       eventTickElement.style.width = '2px';
       eventTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
       eventWrapper.appendChild(eventTickElement);
 
-      //handle mousedown event to show the event in a large view
+      eventWrapper.addEventListener('click', (mouseEvent) => {
-      eventWrapper.addEventListener('mousedown', (e) => {
+        mouseEvent.stopPropagation();
-        console.debug('🧟 Event clicked:', event);
+        this.createSelectionForInspector(event);
       });
 
       return eventWrapper;

src/plugins/events/plugin.js

@@ -26,6 +26,6 @@ import EventTimelineViewProvider from './EventTimelineViewProvider.js';
 export default function (options) {
   return function install(openmct) {
     openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct));
-    openmct.objectViews.addProvider(new EventInspectorViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new EventInspectorViewProvider(openmct));
   };
 }