Marcelo's Case Studies

Graphem

Creating a plugin for NASA's visualization framework

Launched on

Landing page of Graphem

Introduction

NASA Open MCT is a web-based mission control framework for visualizing telemetry of space missions. It allows plugins to be developed to extend its functionality. One of the cases that can be developed is to visualize telemetry data from a source that is different from the default ones. In this case, I developed an experimental plugin that allows you to visualize telemetry data from a GraphQL endpoint.

Introducing Graphem.

What is Graphem?

Graphem, a plugin that allows viewing telemetry data in NASA Open MCT directly from a GraphQL server.

Software Information

  • Project technology: TypeScript, GraphQL, NPM, NASA Open MCT
  • Industry: Space Exploration
  • Work Duration: ≈3 months
  • Version: 2.0

Features

  • Visualize telemetry data from a GraphQL endpoint
  • Documentation of the plugin
  • Customizable with the plugin architecture of NASA Open MCT

Background

Artemis 1 was an uncrewed Moon-orbiting mission. I wanted to visualize the telemetry data of this mission in NASA Open MCT. If all the information is available from a GraphQL endpoint, it is possible to visualize it in NASA Open MCT thanks to the plugin developed. Which is awesome!

I collected the telemetry data from the Horizons System. Then I created a GraphQL server to expose the telemetry data.

You can access this project on Graphem Template App.

Design Process

The design of the solution was based on capturing the telemetry data from a GraphQL endpoint and then displaying it in NASA Open MCT. The structure is defined by the NASA Open MCT plugin architecture. The plugin is made up of a part to integrate domain objects with object provider and composition provider. Then require the historical data, to display it on the screen, and finally require the real-time data continuously to link them on the same screen.

GraphQL offers a query language that allows you to request data from a server. The query language is based on the concept of types and fields. And also offers a real-time subscription mechanism to receive data from the server. The data is returned in JSON format. Graphem applies this concept to the NASA Open MCT plugin architecture.

Development Process

Building a basic plugin

The development of Graphem began by generating a prototype of how to build a plugin that obtains basic GraphQL queries. Although I was able to use the Apollo client, I preferred to use the fetch API to get more lightness in the plugin.

NASA Open MCT provides documentation on how to develop plugins. The tutorial NASA Spacecraft teaches how to develop a plugin that allows you to visualize telemetry data from a HTTP/WebSockets server. This tutorial was used as a basis for the development of Graphem.

After a few tests, I was able to obtain the telemetry data from a GraphQL endpoint and display it in NASA Open MCT. The next step was to integrate real-time data.

Integrating real-time data

In this part I have to extend the functionality of the server. The server must be able to send telemetry data in real-time. As I mentioned before, GraphQL offers a subscription mechanism to receive data from the server. But at the time multiple solutions came out to implement this mechanism.

A plugin with Type checking

NASA Open MCT does not support TypeScript. But for a better development experience this plugin was built on it. The first step was to create a TypeScript configuration file. This file is used to configure the TypeScript compiler. The configuration file is called tsconfig.json and is located in the root of the project.

Currently there is an iniative to add Types support for NASA Open MCT. You can follow the progress in [this issue].

Integrating to NPM package

Once the plugin was ready, it was time to integrate it into a NPM package. For better integration with the Graphem package it uses RollUp, a module bundler, in the same style as Open MCT YAMCS. Thanks to this same configuration, it will export a file in Universal Module Definition (UMD).

Publishing the package to NPM

The package is published to NPM. And, it can be installed with npm i graphem. Or, using Yarn, yarn add graphem.

Publishing the plugin on NASA Open MCT Community Plugins

An email was sent to the NASA Open MCT community to publish the plugin on the Community Plugins section.

Currently the plugin is not published on the NASA Open MCT Community Plugins section. But soon it will be.

Creating the landing page of Graphem

Finally, a landing page was created to show the features of the plugin. The landing page is available at Graphem.space. Built with Astro, a static site generator for modern web apps, and Tailwind CSS, a utility-first CSS framework.

Challenges

Many challenges were faced during the development of Graphem. Some of them were:

Packaging the plugin

Situation

A plugin in NASA Open MCT is essentially a JavaScript function that it is passed by an install function.

Solution

I started looking for other plugins that were already published and its architecture. I adopted the same architecture as the Open MCT YAMCS plugin. This plugin uses RollUp to package the plugin.

So I created a new RollUp configuration file. This file is called rollup.config.js and is located in the root of the project. Using a CommonJS module, I exported the configuration of the plugin.

License

The source code of Graphem is distributed under the Apache 2.0. This license is compatible with Open MCT.

References

Tags