extend traces on subscribe

package.json

@@ -2,7 +2,9 @@
   "name": "openmct",
   "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
-  "dependencies": {},
+  "dependencies": {
+    "plotly.js-dist": "^1.54.1"
+  },
   "devDependencies": {
     "angular": "1.7.9",
     "angular-route": "1.4.14",
@@ -53,7 +55,7 @@
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.11.1",
+    "moment": "^2.25.3",
     "moment-duration-format": "^2.2.2",
     "moment-timezone": "^0.5.21",
     "node-bourbon": "^4.2.3",

src/MCT.js

@@ -252,6 +252,7 @@ define([
         // Plugin's that are installed by default
 
         this.install(this.plugins.Plot());
+        this.install(this.plugins.PlotlyPlot());
         this.install(this.plugins.TelemetryTable());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());

src/plugins/condition/Condition.js

@@ -69,7 +69,6 @@ export default class ConditionClass extends EventEmitter {
             console.log('no data received');
             return;
         }
-
         this.criteria.forEach(criterion => {
             if (this.isAnyOrAllTelemetry(criterion)) {
                 criterion.getResult(datum, this.conditionManager.telemetryObjects);

src/plugins/condition/ConditionManager.js

@@ -57,6 +57,7 @@ export default class ConditionManager extends EventEmitter {
             endpoint,
             this.telemetryReceived.bind(this, endpoint)
         );
+        // TODO check if this is needed
         this.updateConditionTelemetry();
     }
 

src/plugins/plotlyPlot/PlotlyTelemetryProvider.js

@@ -0,0 +1,35 @@
+export default class PlotlyTelemetryProvider {
+    constructor(openmct) {
+        this.openmct = openmct;
+    }
+
+    isTelemetryObject(domainObject) {
+        return domainObject.type === 'plotlyPlot';
+    }
+
+    supportsRequest(domainObject) {
+        return domainObject.type === 'plotlyPlot';
+    }
+
+    supportsSubscribe(domainObject) {
+        return domainObject.type === 'plotlyPlot';
+    }
+
+    request(domainObject) {
+        // let conditionManager = this.getConditionManager(domainObject);
+
+        // return conditionManager.requestLADConditionSetOutput()
+        //     .then(latestOutput => {
+        //         return latestOutput;
+        //     });
+    }
+
+    subscribe(domainObject, callback) {
+        // let conditionManager = this.getConditionManager(domainObject);
+
+        // conditionManager.on('conditionSetResultUpdated', callback);
+
+        // return this.destroyConditionManager.bind(this, this.openmct.objects.makeKeyString(domainObject.identifier));
+    }
+
+}

src/plugins/plotlyPlot/PlotlyViewProvider.js

@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, 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.
+ *****************************************************************************/
+
+import PlotlyViewLayout from './components/PlotlyViewLayout.vue';
+import Vue from 'vue';
+
+export default function PlotlyViewProvider(openmct) {
+    return {
+        key: 'plotlyPlot',
+        name: 'Plotly Plot',
+        cssClass: 'icon-plot-overlay',
+        canView: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        view: function (domainObject, objectPath) {
+            let component;
+
+            return {
+                show: function (element, isEditing) {
+                    component =  new Vue({
+                        provide: {
+                            openmct,
+                            domainObject,
+                            objectPath
+                        },
+                        el: element,
+                        components: {
+                            PlotlyViewLayout
+                        },
+                        data() {
+                            return {
+                                isEditing
+                            }
+                        },
+                        template: '<plotly-view-layout :isEditing="isEditing"></plotly-view-layout>'
+                    });
+                },
+                onEditModeChange: function (isEditing) {
+                    component.isEditing = isEditing;
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

@@ -0,0 +1,138 @@
+<template>
+<div class="l-view-section"></div>
+</template>
+
+<script>
+import Plotly from 'plotly.js-dist';
+import moment from 'moment'
+
+export default {
+    inject: ['openmct', 'domainObject', 'objectPath'],
+    data: function () {
+
+        return {
+            telemetryObjects: []
+            // currentDomainObject: this.domainObject
+        }
+    },
+    mounted() {
+        this.composition = this.openmct.composition.get(this.domainObject);
+        this.composition.on('add', this.addTelemetry);
+        this.composition.load();
+
+        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+
+        console.log('this.metadata', this.metadata);
+
+        // this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        // this.subscribe(this.domainObject);
+        this.plotElement = document.querySelector('.l-view-section');
+        // Plotly.newPlot(this.plotElement, [{
+        //     x: [1, 2, 3, 4, 5],
+        //     y: [1, 2, 4, 8, 16]
+        // }], this.getLayout(), {displayModeBar: false});
+
+    },
+    methods: {
+        getLayout() {
+            return {
+                hovermode: 'compare',
+                hoverdistance: -1,
+                autosize: "true",
+                showlegend: false,
+                font: {
+                    family: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+                    size: "12px",
+                    color: "#666"
+                },
+                xaxis: {
+                    // title: this.plotAxisTitle.xAxisTitle,
+                    zeroline: false
+                },
+                yaxis: {
+                    // title: this.plotAxisTitle.yAxisTitle,
+                    zeroline: false
+                },
+                margin: {
+                    l: 20,
+                    r: 10,
+                    b: 20,
+                    t: 10
+                },
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent'
+            }
+        },
+        addTelemetry(telemetryObject) {
+            return this.openmct.telemetry.request(telemetryObject)
+                .then(telemetryData => {
+                    this.createPlot(telemetryData, telemetryObject);
+                }, () => {console.log(error)});
+        },
+        formatDatumX(datum) {
+            let timestamp = moment.utc(datum.utc).format('YYYY-MM-DD hh:mm:ss.ms');
+            return timestamp;
+        },
+        formatDatumY(datum) {
+            return datum.sin;
+        },
+        createPlot(telemetryData, telemetryObject) {
+            let x = [],
+                y = [];
+
+            telemetryData.forEach((datum, index) => {
+                x.push(this.formatDatumX(datum));
+                y.push(this.formatDatumY(datum));
+            })
+            
+            let data = [{
+                x,
+                y,
+                mode: 'line'
+            }];
+            var layout = {
+                title:'Line and Scatter Plot'
+            };
+            Plotly.newPlot(
+                this.plotElement,
+                data,
+                this.getLayout()
+            )
+
+            this.subscribe(telemetryObject);
+        },
+        subscribe(domainObject) {
+            // this.date = ''
+            // this.openmct.objects.get(this.keystring)
+            //     .then((object) => {
+            //         const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+            //         console.log('metadata', metadata);
+            //         // this.timeKey = this.openmct.time.timeSystem().key;
+            //         // this.timeFormat = this.openmct.telemetry.getValueFormatter(metadata.value(this.timeKey));
+            //         // // this.imageFormat = this.openmct.telemetry.getValueFormatter(metadata.valuesForHints(['image'])[0]);
+            //         // this.unsubscribe = this.openmct.telemetry
+            //         //     .subscribe(this.domainObject, (datum) => {
+            //         //         this.updateHistory(datum);
+            //         //         this.updateValues(datum);
+            //         //     });
+
+            //         // this.requestHistory(this.openmct.time.bounds());
+            //     });
+
+            this.openmct.telemetry.subscribe(domainObject, (datum) => {
+                this.updateData(datum)
+            })
+        },
+        updateData(datum) {
+            Plotly.extendTraces(
+                this.plotElement,
+                {
+                    x: [[this.formatDatumX(datum)]],
+                    y: [[this.formatDatumY(datum)]]
+                },
+                [0]
+            );
+        }
+    }
+}
+</script>

src/plugins/plotlyPlot/components/plotly.scss

@@ -0,0 +1,2 @@
+.plot svg {
+}

src/plugins/plotlyPlot/plugin.js

@@ -0,0 +1,20 @@
+import PlotlyViewProvider from './PlotlyViewProvider.js';
+import PlotlyTelemetryProvider from './PlotlyTelemetryProvider.js';
+
+export default function () {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new PlotlyViewProvider(openmct));
+        openmct.telemetry.addProvider(new PlotlyTelemetryProvider(openmct));
+
+        openmct.types.addType('plotlyPlot', {
+            name: "Plotly Plot",
+            description: "Simple plot rendered by plotly.js",
+            creatable: true,
+            cssClass: 'icon-plot-overlay',
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+                domainObject.telemetry = {};
+            }
+        });
+    };
+}

src/plugins/plugins.js

@@ -34,6 +34,7 @@ define([
     './URLIndicatorPlugin/URLIndicatorPlugin',
     './telemetryMean/plugin',
     './plot/plugin',
+    './plotlyPlot/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
     './notebook/plugin',
@@ -66,6 +67,7 @@ define([
     URLIndicatorPlugin,
     TelemetryMean,
     PlotPlugin,
+    PlotlyPlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
     Notebook,
@@ -171,8 +173,8 @@ define([
     plugins.ExampleImagery = ExampleImagery;
     plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin;
+    plugins.PlotlyPlot = PlotlyPlotPlugin.default;
     plugins.TelemetryTable = TelemetryTablePlugin;
-
     plugins.SummaryWidget = SummaryWidget;
     plugins.TelemetryMean = TelemetryMean;
     plugins.URLIndicator = URLIndicatorPlugin;

src/styles/vue-styles.scss

@@ -18,6 +18,7 @@
 @import "../plugins/folderView/components/list-item.scss";
 @import "../plugins/folderView/components/list-view.scss";
 @import "../plugins/imagery/components/imagery-view-layout.scss";
+@import "../plugins/plotlyPlot/components/plotly.scss";
 @import "../plugins/telemetryTable/components/table-row.scss";
 @import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss";
 @import "../plugins/tabs/components/tabs.scss";