Timestrip Plan view troubleshooting

[iSagnik]

I am trying to build a timeline view of the different segments on our engine test and I am having a very hard time finding any information on how to use the Time strip - plan components.

I managed to pull up a view with segments and their times hardcoded. However, I would like to set up my JSON with relative time intervals with the first event starting with a trigger. Is there any documentation I can refer to for this? The demo has the exact component and configs I am trying to build.

Any info on this would be great!
Questions:

1. How do I convert the following json to be in interval format like the one in the demo running an older version of openMCT?
2. How do I add the JSON to openMCT from the backend - the docs mention a data source but I couldn't find any API documentation for the project.
3. Any information about this component will be of great help!
   Example JSON I currently have:
   { "compiler1": [ { "name": "example_section", "start": 2, "end": 52, "type": "compiler1", "color": "fuchsia", "text_color": "black" }, { "name": "new", "start": 52, "end": 102, "type": "compiler1", "color": "fuchsia", "text_color": "black" }, { "name": "inner", "start": 58, "end": 68, "type": "compiler1", "color": "blue", "text_color": "black" }, { "name": "inner", "start": 68, "end": 78, "type": "compiler1", "color": "blue", "text_color": "black" } ] }

[tobiasbrown]

Hi @iSagnik , I saw your message and found this discussion. I started experimenting with the Plan and managed to create something similar to the demo.

A few things I noticed:

• You may need to update your start and end times to use milliseconds (eg. new Date('2022-01-22T09:03:06.129Z').getTime()).
• Fixed Timespan needs to be selected with start and end times that overlap with the plan's start and end times.
• Try use textColor instead of text_color.

{
    "rover": [
        {
            "start": 1641074586129,
            "end": 1642842186129,
            "name": "Rover Surface Operations",
            "type": "rover"
        },
        {
            "start": 1641074586129,
            "end": 1641171786129,
            "name": "Post-landing shakedown",
            "type": "rover",
            "color": "lightpink",
            "textColor": "black"
        },
        {
            "start": 1641171786129,
            "end": 1641823386129,
            "name": "Lander Egress",
            "type": "rover",
            "color": "lightsalmon",
            "textColor": "black"
        },
        {
            "start": 1641823386129,
            "end": 1641996186129,
            "name": "Driving",
            "type": "rover",
            "color": "lightseagreen",
            "textColor": "black"
        },
        {
            "start": 1641996186129,
            "end": 1642010766129,
            "name": "Drilling",
            "type": "rover",
            "color": "lightskyblue",
            "textColor": "black"
        },
        {
            "start": 1642010766129,
            "end": 1642842186129,
            "name": "Sample Analysis",
            "type": "rover",
            "color": "lightslategrey",
            "textColor": "white"
        }
    ]
}

If you create a Plan with the JSON from above and export its parent as JSON, you'll see that it's linked to a domain object that looks like this:

"013d4086-cfc6-4b3c-8af2-3ce7571196c0": {
    "identifier": {
        "key": "013d4086-cfc6-4b3c-8af2-3ce7571196c0",
        "namespace": ""
    },
    "name": "Rover Plan",
    "type": "plan",
    "selectFile": {
        "name": "rover.json",
        "body": "{\n    \"rover\": [\n        {\n            \"start\": 1641074586129,\n            \"end\": 1642842186129,\n            \"name\": \"Rover Surface Operations\",\n            \"type\": \"rover\"\n        },\n        {\n            \"start\": 1641074586129,\n            \"end\": 1641171786129,\n            \"name\": \"Post-landing shakedown\",\n            \"type\": \"rover\",\n            \"color\": \"lightpink\",\n            \"textColor\": \"black\"\n        },\n        {\n            \"start\": 1641171786129,\n            \"end\": 1641823386129,\n            \"name\": \"Lander Egress\",\n            \"type\": \"rover\",\n            \"color\": \"lightsalmon\",\n            \"textColor\": \"black\"\n        },\n        {\n            \"start\": 1641823386129,\n            \"end\": 1641996186129,\n            \"name\": \"Driving\",\n            \"type\": \"rover\",\n            \"color\": \"lightseagreen\",\n            \"textColor\": \"black\"\n        },\n        {\n            \"start\": 1641996186129,\n            \"end\": 1642010766129,\n            \"name\": \"Drilling\",\n            \"type\": \"rover\",\n            \"color\": \"lightskyblue\",\n            \"textColor\": \"black\"\n        },\n        {\n            \"start\": 1642010766129,\n            \"end\": 1642842186129,\n            \"name\": \"Sample Analysis\",\n            \"type\": \"rover\",\n            \"color\": \"lightslategrey\",\n            \"textColor\": \"white\"\n        }\n    ]\n}"
    },
    "modified": 1642985563829,
    "location": "mine",
    "persisted": 1642985563831,
    "locked": false
}

You may be able to dynamically update the body with JSON from your data source. Hope that helps.

[iSagnik]

Thank you so much for your response! That looks really promising but I am still unsure about how to actually add a component like that to my OpenMCT view. I have looked at the provider and domain object documentation and am having trouble understanding what the flow is for adding custom or built in plugins to the openmct dashboard. Could you please elaborate on that front?

…

On Sun, Jan 23, 2022 at 8:45 PM tobiasbrown ***@***.***> wrote: Hi @iSagnik <https://github.com/iSagnik> , I saw your message <#4616 (comment)> and found this discussion. I started experimenting with the Plan and managed to create something similar to the demo. [image: Screen Shot 2022-01-24 at 11 20 44 am] <https://user-images.githubusercontent.com/2645932/150704324-6ecc58b7-47a0-4777-8889-a6590c8aed0f.png> A few things I noticed: - You may need to update your start and end times to use milliseconds (eg. new Date('2022-01-22T09:03:06.129Z').getTime()). - Fixed Timespan needs to be selected with start and end times that overlap with the plan's start and end times. - Try use textColor <https://github.com/nasa/openmct/blob/master/src/plugins/plan/Plan.vue#L294> instead of text_color. { "rover": [ { "start": 1641074586129, "end": 1642842186129, "name": "Rover Surface Operations", "type": "rover" }, { "start": 1641074586129, "end": 1641171786129, "name": "Post-landing shakedown", "type": "rover", "color": "lightpink", "textColor": "black" }, { "start": 1641171786129, "end": 1641823386129, "name": "Lander Egress", "type": "rover", "color": "lightsalmon", "textColor": "black" }, { "start": 1641823386129, "end": 1641996186129, "name": "Driving", "type": "rover", "color": "lightseagreen", "textColor": "black" }, { "start": 1641996186129, "end": 1642010766129, "name": "Drilling", "type": "rover", "color": "lightskyblue", "textColor": "black" }, { "start": 1642010766129, "end": 1642842186129, "name": "Sample Analysis", "type": "rover", "color": "lightslategrey", "textColor": "white" } ] } If you create a Plan with the JSON from above and export its parent as JSON, you'll see that it's linked to a domain object that looks like this: "013d4086-cfc6-4b3c-8af2-3ce7571196c0": { "identifier": { "key": "013d4086-cfc6-4b3c-8af2-3ce7571196c0", "namespace": "" }, "name": "Rover Plan", "type": "plan", "selectFile": { "name": "rover.json", "body": "{\n \"rover\": [\n {\n \"start\": 1641074586129,\n \"end\": 1642842186129,\n \"name\": \"Rover Surface Operations\",\n \"type\": \"rover\"\n },\n {\n \"start\": 1641074586129,\n \"end\": 1641171786129,\n \"name\": \"Post-landing shakedown\",\n \"type\": \"rover\",\n \"color\": \"lightpink\",\n \"textColor\": \"black\"\n },\n {\n \"start\": 1641171786129,\n \"end\": 1641823386129,\n \"name\": \"Lander Egress\",\n \"type\": \"rover\",\n \"color\": \"lightsalmon\",\n \"textColor\": \"black\"\n },\n {\n \"start\": 1641823386129,\n \"end\": 1641996186129,\n \"name\": \"Driving\",\n \"type\": \"rover\",\n \"color\": \"lightseagreen\",\n \"textColor\": \"black\"\n },\n {\n \"start\": 1641996186129,\n \"end\": 1642010766129,\n \"name\": \"Drilling\",\n \"type\": \"rover\",\n \"color\": \"lightskyblue\",\n \"textColor\": \"black\"\n },\n {\n \"start\": 1642010766129,\n \"end\": 1642842186129,\n \"name\": \"Sample Analysis\",\n \"type\": \"rover\",\n \"color\": \"lightslategrey\",\n \"textColor\": \"white\"\n }\n ]\n}" }, "modified": 1642985563829, "location": "mine", "persisted": 1642985563831, "locked": false } You may be able to dynamically update the body with JSON from your data source. Hope that helps. — Reply to this email directly, view it on GitHub <#4380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALUF6242QWKPGQIGB4DQIATUXSVMFANCNFSM5GY6QN7Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[jvigliotta]

@iSagnik What are you trying to do exactly? Create a custom plugin and have it appear in Open MCT?

[iSagnik]

@jvigliotta Yes, I am new to OpenMCT so trying to understand how plugins work, how to make them appear on OpenMCT, and how to manipulate them dynamically in runtime. This is part of a large mission control dashboard project for Liquid Rocketry Lab

[jvigliotta]

Hey @iSagnik this is quite the delay, but hopefully you or someone else finds this useful!

To create and install a plugin in Open MCT you can do the following.

Installing Open MCT as a dependency

https://github.com/unlikelyzero/openmct-as-a-dependency

The repo above show's how you can use Open MCT as a dependency. Once you've imported it you can install any custom plugin's you've created, ex: https://github.com/unlikelyzero/openmct-as-a-dependency/blob/ce5c0a636d127a12d2d4f66133be6fc9ab9db048/src/index.js#L1-L9

Creating a Custom Plugin

Below I've created a basic example plugin using Vue.

I put the ViewProvider and the Plugin itself into one example here, but they could be separated out for code organization and clarity. Below the View Provider defines what domain objects can view this view, you can also define if the view is editable canEdit. For more detailed/robust examples of this you can look at our existing plugins: https://github.com/nasa/openmct/tree/master/src/plugins This plugin is more of a bare bones example to get you started.

The plugin section below, export default function ExamplePlugin(options) { is what is returned when installing a plugin int Open MCT. The plugin function will be passed the openmct object which gives your plugin access to the Open MCT API. You can use it to register telemetry providers, add types, etc. Below we're using the types api to add the example plugin domain object, which we've used in the view provider to let Open MCT know that our view (which I'll show later) can view that object.

So, to sum up the below file, we're creating a view provider for our example plugin domain object (which we're also creating) and defining the plugin function that Open MCT will use to install our plugin (like in the Open MCT as a dependency example at the top).

plugin.js

// Open MCT utility for mounting views
import mount from 'utils/mount';

// this is the vue component that will be used to render the view
import ExampleView from './ExampleView.vue';

// this could be an external file that you import in as well,
// but for the sake of this example, we'll keep it here
function ExampleViewProvider(openmct) {
  return {
    key: 'example.view',
    name: 'Example View',
    cssClass: 'icon-eye-open',
    canView(domainObject) {
      return domainObject.type === 'example.plugin';
    },

    view: function (domainObject) {
      let _destroy = null;

      return {
        show: function (element) {
          const { destroy } = mount(
            {
              el: element,
              components: {
                ExampleView
              },
              provide: {
                openmct,
                domainObject
              },
              template: '<example-view />'
            },
            {
              app: openmct.app,
              element
            }
          );
          _destroy = destroy;
        },
        destroy: function () {
          if (_destroy) {
            _destroy();
          }
        }
      };
    }
  };
}

export default function ExamplePlugin(options) {
  return function install(openmct) {
    // register the object type
    openmct.types.addType('example.plugin', {
      name: 'Example Plugin',
      description: 'A example plugin.',
      creatable: true, // this allows the object to be created from the UI
      cssClass: 'icon-eye-open'
    });
    // register the view provider
    openmct.objectViews.addProvider(new ExampleViewProvider(openmct));
  };
}

The next step will be to define our View that the view provider will return and that Open MCT will use to view our example plugin domain object.

ExamplePlugin.vue

<template>
  <div aria-label="Example View">
    <div style="margin-left: 25%">
      <select v-model="currentColor" style="width: 200px">
        <option v-for="color in colors" :key="color" :value="color">
          {{ color }}
        </option>
      </select>
    </div>
    <div
      class="color-box"
      :style="{ backgroundColor: currentColor, width: '200px', height: '200px', marginLeft: '25%' }"
    >
      <div class="color-box__color" style="margin-top: 20px">
        {{ currentColor }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['openmct', 'domainObject'],
  data() {
    let colors = this.domainObject.colors || ['red', 'green', 'blue'];
    let currentColor = colors[0];

    return {
      colors,
      currentColor
    };
  },
  watch: {
    currentColor(newColor) {
      console.log('currentColor', newColor);
    }
  }
};
</script>

This is a Vue view. Nothing specific to Open MCT here other than we provide the Open MCT object to the view, which is done in the view provider. But this simple view is what will be used to display domain objects of type example.plugin as defined in our view provider and our plugin function. In this simple view you can select a color from a dropdown (with default or custom css colors) and it will change the background color on the div. Vue handles the updates to the DOM which are done in real time. If you take a look through our existing plugins linked at the beginning, you can see examples that display telemetry, notebooks, clocks, images, etc. There's a lot of freedom in what you can do/create with Open MCT.

Below is an example installing the plugin with and without options (colors in this case).

openmct.install(ExamplePlugin());

// with color options
openmct.install(ExamplePlugin(['purple', 'yellow', 'black']));

I hope this gives you a good starting point for creating your own plugin and please feel free to let us know if you have any more questions, which we will respond to in a much more timely manner.