Wrap Existing OpenMCT ObjectViews

[ikirk]

For my application I need to wrap existing ObjectViews and their components to include some more information in a banner on the top and bottom of the object view when telemetry is displayed. I have decided to start with the PlotView, which is displayed by default for Telemetry-providing domain objects. Rather than re-implementing the existing PlotView, I would like to import the existing PlotView as a component and add the banners that I need above and below an instantiation of that component in the template. However, because I am consuming OpenMCT as an npm module, there doesn't seem to be a clean way to import the PlotView into my component. Is there a supported way to do this? Am I approaching it from the wrong direction? I'm new to OpenMCT and have been using openmct-hello as a guide.

[jvigliotta]

Hi @ikirk

This is a tricky problem as we didn't design our plugins in the beginning with the idea of being extendable. There may be a way to do this though with your own view, something like below:

Banner Views:

export default function createBannerComponent(openmct) {
  return {
    createTopBanner(domainObject) {
      const div = document.createElement('div');
      div.style.padding = '10px';
      div.style.background = '#f5f5f5';

      // Get the telemetry metadata and formatter
      const metadata = openmct.telemetry.getMetadata(domainObject);
      const valueMetadata = metadata.valuesForHints(['range'])[0];
      const formatter = openmct.telemetry.getValueFormatter(valueMetadata);

      // Example of using openmct APIs with proper formatting
      const unsubscribe = openmct.telemetry.subscribe(domainObject, (datum) => {
        const formattedValue = formatter.format(datum[valueMetadata.key]);
        div.textContent = `Latest Value: ${formattedValue}`;
      });

      return {
        element: div,
        destroy: () => unsubscribe()
      };
    },

    createBottomBanner(domainObject) {
      const div = document.createElement('div');
      div.style.padding = '10px';
      div.style.background = '#f5f5f5';
      div.textContent = `Name: ${domainObject.name}`;

      return {
        element: div,
        destroy: () => {}
      };
    }
  };
}

Custom View:

import createBannerComponent from './BannerComponent';

export default function CustomPlotViewProvider(openmct) {
  const bannerComponent = createBannerComponent(openmct);

  return {
    key: 'custom-plot-view',
    name: 'Custom Plot',
    cssClass: 'icon-telemetry',
    canView(domainObject, objectPath) {
      return openmct.telemetry.hasNumericTelemetry(domainObject);
    },
    view: function (domainObject, objectPath) {
      let originalView = null;
      let topBanner = null;
      let bottomBanner = null;

      return {
        show: function (element, isEditing, viewOptions) {
          element.innerHTML = `
            <div style="display: flex; flex-direction: column; height: 100%;">
              <div class="top-banner"></div>
              <div style="flex: 1;"></div>
              <div class="bottom-banner"></div>
            </div>
          `;

          // Create and add banners
          topBanner = bannerComponent.createTopBanner(domainObject);
          bottomBanner = bannerComponent.createBottomBanner(domainObject);
          element.querySelector('.top-banner').appendChild(topBanner.element);
          element.querySelector('.bottom-banner').appendChild(bottomBanner.element);

          // Get and show the original plot view
          const plotViewProvider = openmct.objectViews.getByProviderKey('plot-single');
          if (plotViewProvider) {
            originalView = plotViewProvider.view(domainObject, objectPath);
            originalView.show(
              element.querySelector('div[style*="flex: 1"]'),
              isEditing,
              viewOptions
            );
          }
        },
        destroy: function () {
          if (topBanner) {
            topBanner.destroy();
          }
          if (bottomBanner) {
            bottomBanner.destroy();
          }
          if (originalView) {
            originalView.destroy();
          }
        }
      };
    }
  };
}

This isn't fully fleshed out, but this should get you started in the right direction. Hope this helps!

[ikirk]

Thanks for the response @jvigliotta,

In our case because the information would need to be taken from the dictionary which would have far, far too many telemetry parameters that would need to be manually labeled, and because we found it took up too much screen real estate when viewing it in other parent views like DisplayLayout, we've abandoned the banner on a per-source basis and instead have the information stored on a per-dictionary basis and display it at the top and bottom of OpenMCT as a whole (creating a Vue component to display OpenMCT and then having a Banner Vue component that is on the top and bottom of the page).

HOWEVER, for other developers that are looking to implement something similar, we did discover that the priority API allows for overriding existing views. So what worked for us (before we abandoned it) was to import the existing plugin views into a Vue Component (implemented through an ObjectView and ObjectViewProvider), include it as a component in the custom Vue component, add it to the ViewRegistry as a higher priority, and voila.

This works because when the ViewRegistry is queried for an ObjectView to display a DomainObject, it filters by views whose canView() method returns true, and then sorts by priority, returning the highest priority first.

Our fix to not being able to import anything from the plugins was to include ./node_modules/openmct/src in our jsconfig.json and webpack.js under the alias @openmct. Because of some expected aliases inside of the plugin's views, we also needed to make them available from within our environment, so our webpack alias options look like:

resolve: {
    alias: {
        '@': [
            path.resolve(__dirname, '../src/'),
        ],
        '@openmct': [
            path.resolve(__dirname, '../src/components/OpenMCT/'),
            path.resolve(__dirname, '../node_modules/openmct/src'),
        ],
        'utils': [
            '@openmct/utils'
        ]
    }
}

There might be some inaccuracies in the above description because other than the webpack stuff I am going off of memory since we abandoned the per-parameter top-and-bottom banners for our project before it was checked into our version control, but hopefully it can offer an option for other developers who may be looking to do something similar.

For my learning though, is there a way to incorporate what you have into a more Vue-like development structure? Also is grabbing the ViewProvider from the objectViews considered more stable/supported?

[jvigliotta]

Hey @ikirk !

So, using the ViewRegistry (openmct.objectViews.getByProviderKey('plot-single')) is a more reliable way of grabbing the object view, whenever you can use openmct functionality programmatically, that's the way to go. It's not possible in all cases though, for instance some classes that support a plugin or component aren't available through the API. We've used the alias solution for related projects that use Open MCT. It's definitely something we're looking at addressing when we have the time to do so.

As for a more Vue focused solution for what I originally provided, I've created this plugin as an example: https://github.com/jvigliotta/openmct-additions/tree/master/ViewWrapExamplePlugin

Here are the files as well:

plugin.js

export default function plugin() {
  return function install(openmct) {
    openmct.objectViews.addProvider(new ViewWrapExampleViewProvider(openmct));
  };
}

ViewWrapExampleViewProvider.js

import ViewWrapExampleView from './ViewWrapExampleView.js';

export default class ViewWrapExampleViewProvider {
  constructor(openmct) {
    this.openmct = openmct;
    this.key = 'view-wrap-example-view';
    this.name = 'View Wrap Example';
    this.cssClass = 'icon-telemetry';
  }

  canView(domainObject) {
    return this.openmct.telemetry.hasNumericTelemetry(domainObject);
  }

  view(domainObject, objectPath) {
    return new ViewWrapExampleView(this.openmct, domainObject, objectPath);
  }
}

ViewWrapExampleView.js

import mount from 'utils/mount';

import ViewWrapExample from './ViewWrapExample.vue';

export default class ViewWrapExampleView {
  constructor(openmct, domainObject, objectPath) {
    this.openmct = openmct;
    this.domainObject = domainObject;
    this.objectPath = objectPath;
    this.component = null;
    this._destroy = null;
  }

  show(element, isEditing, viewOptions) {
    const { vNode, destroy } = mount(
      {
        el: element,
        components: {
          ViewWrapExample
        },
        provide: {
          openmct: this.openmct,
          isEditing,
          viewOptions
        },
        data: () => {
          return {
            domainObject: this.domainObject,
            objectPath: this.objectPath
          };
        },
        template:
          '<view-wrap-example :domain-object="domainObject" :object-path="objectPath"></view-wrap-example>'
      },
      {
        app: this.openmct.app,
        element
      }
    );

    this.component = vNode.componentInstance;
    this._destroy = destroy;
  }

  destroy() {
    if (this._destroy) {
      this._destroy();
    }
    this.component = null;
  }
}

ViewWrapExample.vue

<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <div class="banner top-banner" style="padding: 10px; background: #f5f5f5">
      <span>{{ formattedValue }}</span>
    </div>
    <div ref="plotContainer" style="flex: 1"></div>
    <div class="banner bottom-banner" style="padding: 10px; background: #f5f5f5">
      <span>{{ domainObject.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ViewWrapExample',
  inject: ['openmct', 'isEditing', 'viewOptions'],
  props: {
    domainObject: {
      type: Object,
      required: true
    },
    objectPath: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      formattedValue: 'Loading...',
      originalView: null
    };
  },
  created() {
    const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
    const valueMetadata = metadata.valuesForHints(['range'])[0];
    const formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);

    this.unsubscribe = this.openmct.telemetry.subscribe(this.domainObject, (datum) => {
      this.formattedValue = formatter.format(datum[valueMetadata.key]);
    });
  },
  mounted() {
    this.showPlotView();
  },
  beforeUnmount() {
    if (this.originalView) {
      this.originalView.destroy();
    }

    if (this.unsubscribe) {
      this.unsubscribe();
    }
  },
  methods: {
    showPlotView() {
      // Get and show the original plot view
      const objectViewProvider = this.openmct.objectViews.getByProviderKey('plot-single');

      if (objectViewProvider) {
        this.originalView = objectViewProvider.view(this.domainObject, this.objectPath);
        this.originalView.show(this.$refs.plotContainer, this.isEditing, this.viewOptions);
      }
    }
  }
};
</script>