[Tooltips] Add tooltips on hover

openmct.js

@@ -56,6 +56,7 @@ if (document.currentScript) {
  * @property {import('./src/api/notifications/NotificationAPI').default} notifications
  * @property {import('./src/api/Editor').default} editor
  * @property {import('./src/api/overlays/OverlayAPI')} overlays
+ * @property {import('./src/api/tooltips/ToolTipAPI')} tooltips
  * @property {import('./src/api/menu/MenuAPI').default} menus
  * @property {import('./src/api/actions/ActionsAPI').default} actions
  * @property {import('./src/api/status/StatusAPI').default} status

src/MCT.js

@@ -24,6 +24,7 @@ define([
   'EventEmitter',
   './api/api',
   './api/overlays/OverlayAPI',
+  './api/tooltips/ToolTipAPI',
   './selection/Selection',
   './plugins/plugins',
   './ui/registries/ViewRegistry',
@@ -48,6 +49,7 @@ define([
   EventEmitter,
   api,
   OverlayAPI,
+  ToolTipAPI,
   Selection,
   plugins,
   ViewRegistry,
@@ -220,6 +222,8 @@ define([
 
       ['overlays', () => new OverlayAPI.default()],
 
+      ['tooltips', () => new ToolTipAPI.default()],
+
       ['menus', () => new api.MenuAPI(this)],
 
       ['actions', () => new api.ActionsAPI(this)],

src/api/objects/ObjectAPI.js

@@ -540,6 +540,40 @@
       .join('/');
   }
 
+  /**
+   * Return path of telemetry objects in the object composition
+   * @param {object} identifier the identifier for the domain object to query for
+   * @param {object} [telemetryIdentifier] the specific identifier for the telemetry
+   *  to look for in the composition, uses first object in composition otherwise
+   * @returns {Array} path of telemetry object in object composition
+   */
+  async getTelemetryPath(identifier, telemetryIdentifier) {
+    const objectDetails = await this.get(identifier);
+    const telemetryPath = [];
+    if (objectDetails.composition && ['folder'].indexOf(objectDetails.type) === -1) {
+      let sourceTelemetry = objectDetails.composition[0];
+      if (telemetryIdentifier) {
+        sourceTelemetry = objectDetails.composition.find(
+          (telemetrySource) =>
+            this.makeKeyString(telemetrySource) === this.makeKeyString(telemetryIdentifier)
+        );
+      }
+      const compositionElement = await this.get(sourceTelemetry);
+      if (!['yamcs.telemetry', 'generator'].includes(compositionElement.type)) {
+        return telemetryPath;
+      }
+      const telemetryKey = compositionElement.identifier.key;
+      const telemetryPathObjects = await this.getOriginalPath(telemetryKey);
+      telemetryPathObjects.forEach((pathObject) => {
+        if (pathObject.type === 'root') {
+          return;
+        }
+        telemetryPath.unshift(pathObject.name);
+      });
+    }
+    return telemetryPath;
+  }
+
   /**
    * Modify a domain object. Internal to ObjectAPI, won't call save after.
    * @private

src/api/tooltips/ToolTip.js

@@ -0,0 +1,51 @@
+import TooltipComponent from './components/TooltipComponent.vue';
+import EventEmitter from 'EventEmitter';
+import Vue from 'vue';
+
+class Tooltip extends EventEmitter {
+  constructor(
+    { toolTipText, toolTipLocation, parentElement } = {
+      tooltipText: '',
+      toolTipLocation: 'below',
+      parentElement: null
+    }
+  ) {
+    super();
+
+    this.container = document.createElement('div');
+
+    this.component = new Vue({
+      components: {
+        TooltipComponent: TooltipComponent
+      },
+      provide: {
+        toolTipText,
+        toolTipLocation,
+        parentElement
+      },
+      template: '<tooltip-component toolTipText="toolTipText"></tooltip-component>'
+    });
+
+    this.isActive = null;
+  }
+
+  destroy() {
+    if (!this.isActive) {
+      return;
+    }
+    document.body.removeChild(this.container);
+    this.component.$destroy();
+    this.isActive = false;
+  }
+
+  /**
+   * @private
+   **/
+  show() {
+    document.body.appendChild(this.container);
+    this.container.appendChild(this.component.$mount().$el);
+    this.isActive = true;
+  }
+}
+
+export default Tooltip;

src/api/tooltips/ToolTipAPI.js

@@ -0,0 +1,46 @@
+import Tooltip from './ToolTip';
+
+/**
+ * The TooltipAPI is responsible for adding custom tooltips to
+ * the desired elements on the screen
+ *
+ * @memberof api/tooltips
+ * @constructor
+ */
+
+class TooltipAPI {
+  constructor() {
+    this.activeToolTips = [];
+  }
+
+  /**
+   * private
+   */
+  showTooltip(tooltip) {
+    for (let i = this.activeToolTips.length - 1; i > -1; i--) {
+      this.activeToolTips[i].destroy();
+      this.activeToolTips.splice(i, 1);
+    }
+    this.activeToolTips.push(tooltip);
+
+    tooltip.show();
+  }
+
+  /**
+   * A description of option properties that can be passed into the overlay
+   * @typedef options
+   * @property {string} tooltipText text to show in the tooltip
+   * @property {string} tooltipLocation location to show the tooltip relative to the parentElement
+   *  (above, below, right, left, center)
+   * @property {HTMLElement} parentElement reference to the DOM node we're adding the tooltip to
+   */
+  tooltip(options) {
+    let tooltip = new Tooltip(options);
+
+    this.showTooltip(tooltip);
+
+    return tooltip;
+  }
+}
+
+export default TooltipAPI;

src/api/tooltips/components/TooltipComponent.vue

@@ -0,0 +1,61 @@
+<!--
+Open MCT, Copyright (c) 2014-2023, 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 ref="tooltip-wrapper" class="l-tooltip-wrapper" :style="toolTipLocationStyle">
+    <div class="tooltip">
+      {{ toolTipText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['toolTipText', 'toolTipLocation', 'parentElement'],
+  computed: {
+    toolTipCoordinates() {
+      return this.parentElement.getBoundingClientRect();
+    },
+    toolTipLocationStyle() {
+      const { top, left, height, width } = this.toolTipCoordinates;
+      let toolTipLocationStyle = {};
+
+      if (this.toolTipLocation === 'above') {
+        toolTipLocationStyle = { top: `${top - 5}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'below') {
+        toolTipLocationStyle = { top: `${top + height}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'right') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left + width}px` };
+      }
+      if (this.toolTipLocation === 'left') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left - width}px` };
+      }
+      if (this.toolTipLocation === 'center') {
+        toolTipLocationStyle = { top: `${top + height / 2}px`, left: `${left + width / 2}px` };
+      }
+
+      return toolTipLocationStyle;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,12 @@
+.l-tooltip-wrapper {
+  @include themedButton();
+  background: $colorBodyBg;
+  color: $colorBodyFg;
+  border: 2px solid $colorInteriorBorder;
+  display: inline-block;
+  max-width: 200px;
+  border-radius: 3px;
+  position: absolute;
+  padding: 5px 8px;
+  z-index: 60;
+}

src/api/tooltips/tooltipMixins.js

@@ -0,0 +1,46 @@
+const tooltipHelpers = {
+  methods: {
+    async getTelemetryPath(telemetryIdentifier) {
+      let telemetryPathString = '';
+      if (!this.domainObject?.identifier) {
+        return;
+      }
+      const telemetryPath = await this.openmct.objects.getTelemetryPath(
+        this.domainObject.identifier,
+        telemetryIdentifier
+      );
+      if (telemetryPath.length) {
+        telemetryPathString = telemetryPath.join(' / ');
+      }
+      return telemetryPathString;
+    },
+    async getObjectPath(objectIdentifier) {
+      if (!objectIdentifier && !this.domainObject) {
+        return;
+      }
+      const domainObjectIdentifier = objectIdentifier || this.domainObject.identifier;
+      const objectPathList = await this.openmct.objects.getOriginalPath(domainObjectIdentifier);
+      objectPathList.pop();
+      return objectPathList
+        .map((pathItem) => pathItem.name)
+        .reverse()
+        .join(' / ');
+    },
+    buildToolTip(tooltipText, tooltipLocation, elementRef) {
+      if (!tooltipText || tooltipText.length < 1) {
+        return;
+      }
+      this.tooltip = this.openmct.tooltips.tooltip({
+        toolTipText: tooltipText,
+        toolTipLocation: tooltipLocation,
+        parentElement: this.$refs[elementRef]
+      });
+    },
+    hideToolTip() {
+      this.tooltip?.destroy();
+      this.tooltip = null;
+    }
+  }
+};
+
+export default tooltipHelpers;

src/plugins/LADTable/components/LADRow.vue

@@ -26,7 +26,14 @@
     @click="clickedRow"
     @contextmenu.prevent="showContextMenu"
   >
-    <td class="js-first-data">{{ domainObject.name }}</td>
+    <td
+      ref="tableCell"
+      class="js-first-data"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
+    >
+      {{ domainObject.name }}
+    </td>
     <td v-if="showTimestamp" class="js-second-data">{{ formattedTimestamp }}</td>
     <td class="js-third-data" :class="valueClasses">{{ value }}</td>
     <td v-if="hasUnits" class="js-units">
@@ -42,8 +49,10 @@ const BLANK_VALUE = '---';
 
 import identifierToString from '/src/tools/url';
 import PreviewAction from '@/ui/preview/PreviewAction.js';
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
 
 export default {
+  mixins: [tooltipHelpers],
   inject: ['openmct', 'currentView'],
   props: {
     domainObject: {
@@ -259,6 +268,9 @@ export default {
       return metadata
         .values()
         .find((metadatum) => metadatum.hints.domain === undefined && metadatum.key !== 'name');
+    },
+    async showToolTip() {
+      this.buildToolTip(await this.getObjectPath(), 'below', 'tableCell');
     }
   }
 };

src/plugins/displayLayout/components/SubobjectView.vue

@@ -23,7 +23,6 @@
   <layout-frame
     :item="item"
     :grid-size="gridSize"
-    :title="domainObject && domainObject.name"
     :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,12 +30,15 @@
   >
     <div
       v-if="domainObject"
+      ref="telemetryViewWrapper"
       class="c-telemetry-view u-style-receiver"
       :class="[itemClasses]"
       :style="styleObject"
       :data-font-size="item.fontSize"
       :data-font="item.font"
       @contextmenu.prevent="showContextMenu"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
     >
       <div class="is-status__indicator" :title="`This item is ${status}`"></div>
       <div v-if="showLabel" class="c-telemetry-view__label">
@@ -69,6 +72,7 @@ import {
   getDefaultNotebook,
   getNotebookSectionAndPage
 } from '@/plugins/notebook/utils/notebook-storage.js';
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
 const DEFAULT_POSITION = [1, 1];
@@ -97,7 +101,7 @@ export default {
   components: {
     LayoutFrame
   },
-  mixins: [conditionalStylesMixin, stalenessMixin],
+  mixins: [conditionalStylesMixin, stalenessMixin, tooltipHelpers],
   inject: ['openmct', 'objectPath', 'currentView'],
   props: {
     item: {
@@ -379,6 +383,9 @@ export default {
     },
     setStatus(status) {
       this.status = status;
+    },
+    async showToolTip() {
+      this.buildToolTip(await this.getObjectPath(), 'below', 'telemetryViewWrapper');
     }
   }
 };