Type annotations

package.json

@@ -7,6 +7,8 @@
     "@percy/cli": "^1.0.0-beta.73",
     "@percy/playwright": "^1.0.1",
     "@playwright/test": "^1.18.0",
+    "@types/eventemitter3": "^1.0.0",
+    "@types/lodash": "^4.14.178",
     "allure-playwright": "^2.0.0-beta.14",
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",

src/api/time/TimeContext.js

@@ -365,3 +365,7 @@ class TimeContext extends EventEmitter {
 }
 
 export default TimeContext;
+
+/**
+@typedef {{start: number, end: number}} Bounds
+*/

src/plugins/plot/MctPlot.vue

@@ -620,7 +620,7 @@ export default {
             this.positionOverElement = {
                 x: event.clientX - this.chartElementBounds.left,
                 y: this.chartElementBounds.height
-              - (event.clientY - this.chartElementBounds.top)
+                    - (event.clientY - this.chartElementBounds.top)
             };
 
             this.positionOverPlot = {

src/plugins/plot/MctTicks.vue

@@ -105,6 +105,10 @@ export default {
     mounted() {
         eventHelpers.extend(this);
 
+        if (!this.axisType) {
+            throw new Error("axis-type prop expected")
+        }
+
         this.axis = this.getAxisFromConfig();
 
         this.tickCount = 4;
@@ -119,15 +123,16 @@ export default {
     },
     methods: {
         getAxisFromConfig() {
-            if (!this.axisType) {
-                return;
-            }
-
             const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            /** @type {import('./configuration/PlotConfigurationModel').default} */
             let config = configStore.get(configId);
-            if (config) {
-                return config[this.axisType];
+
+            if (!config) {
+                throw new Error('config is missing')
             }
+
+            return config[this.axisType];
         },
         /**
        * Determine whether ticks should be regenerated for a given range.
@@ -203,8 +208,8 @@ export default {
             if (this.shouldRegenerateTicks(range, forceRegeneration)) {
                 let newTicks = this.getTicks();
                 this.tickRange = {
-                    min: Math.min.apply(Math, newTicks),
-                    max: Math.max.apply(Math, newTicks),
+                    min: Math.min(...newTicks),
+                    max: Math.max(...newTicks),
                     step: newTicks[1] - newTicks[0]
                 };
 

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -23,6 +23,9 @@
 import eventHelpers from '../lib/eventHelpers';
 
 export default class MCTChartAlarmLineSet {
+    /**
+     * @param {Bounds} bounds
+     */
     constructor(series, chart, offset, bounds) {
         this.series = series;
         this.chart = chart;
@@ -40,6 +43,9 @@ export default class MCTChartAlarmLineSet {
         }
     }
 
+    /**
+     * @param {Bounds} bounds
+     */
     updateBounds(bounds) {
         this.bounds = bounds;
         this.getLimitPoints(this.series);
@@ -106,3 +112,7 @@ export default class MCTChartAlarmLineSet {
     }
 
 }
+
+/**
+@typedef {import('@/api/time/TimeContext').Bounds} Bounds
+*/

src/plugins/plot/chart/MCTChartLineLinear.js

@@ -23,7 +23,7 @@
 import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 export default class MCTChartLineLinear extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         this.buffer[start] = point.x;
         this.buffer[start + 1] = point.y;
     }

src/plugins/plot/chart/MCTChartLineStepAfter.js

@@ -23,7 +23,7 @@
 import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 export default class MCTChartLineStepAfter extends MCTChartSeriesElement {
-    removePoint(point, index, count) {
+    removePoint(index) {
         if (index > 0 && index / 2 < this.count) {
             this.buffer[index + 1] = this.buffer[index - 1];
         }
@@ -45,7 +45,7 @@ export default class MCTChartLineStepAfter extends MCTChartSeriesElement {
         return 2 + ((index - 1) * 4);
     }
 
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         if (start === 0 && this.count === 0) {
             // First point is easy.
             this.buffer[start] = point.x;

src/plugins/plot/chart/MCTChartPointSet.js

@@ -24,7 +24,7 @@ import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 // TODO: Is this needed? This is identical to MCTChartLineLinear. Why is it a different class?
 export default class MCTChartPointSet extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         this.buffer[start] = point.x;
         this.buffer[start + 1] = point.y;
     }

src/plugins/plot/chart/MCTChartSeriesElement.js

@@ -22,6 +22,7 @@
 
 import eventHelpers from '../lib/eventHelpers';
 
+/** @abstract */
 export default class MCTChartSeriesElement {
     constructor(series, chart, offset) {
         this.series = series;
@@ -72,21 +73,22 @@ export default class MCTChartSeriesElement {
         }
     }
 
-    removePoint(point, index, count) {
-        // by default, do nothing.
-    }
+    /** @abstract */
+    removePoint(index) {}
+
+    /** @abstract */
+    addPoint(point, index) {}
 
     remove(point, index, series) {
         const vertexCount = this.vertexCountForPointAtIndex(index);
         const removalPoint = this.startIndexForPointAtIndex(index);
 
         this.removeSegments(removalPoint, vertexCount);
 
-        this.removePoint(
-            this.makePoint(point, series),
-            removalPoint,
-            vertexCount
-        );
+        // TODO useless makePoint call?
+        this.makePoint(point, series);
+        this.removePoint(removalPoint);
+
         this.count -= (vertexCount / 2);
     }
 
@@ -106,11 +108,7 @@ export default class MCTChartSeriesElement {
         const insertionPoint = this.startIndexForPointAtIndex(index);
         this.growIfNeeded(pointsRequired);
         this.makeInsertionPoint(insertionPoint, pointsRequired);
-        this.addPoint(
-            this.makePoint(point, series),
-            insertionPoint,
-            pointsRequired
-        );
+        this.addPoint(this.makePoint(point, series), insertionPoint);
         this.count += (pointsRequired / 2);
     }
 
@@ -155,3 +153,18 @@ export default class MCTChartSeriesElement {
     }
 
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {import('../configuration/PlotSeries').default} PlotSeries */
+
+/**
+@typedef {{
+    x: (x: number) => number
+    y: (y: number) => number
+    xVal: (point: Point, pSeries: PlotSeries) => number
+    yVal: (point: Point, pSeries: PlotSeries) => number
+    xKey: TODO
+    yKey: TODO
+}} Offset
+*/

src/plugins/plot/chart/MctChart.vue

@@ -24,8 +24,12 @@
 
 <template>
 <div class="gl-plot-chart-area">
-    <span v-html="canvasTemplate"></span>
-    <span v-html="canvasTemplate"></span>
+    <div style="display: contents" ref="chartContainer">
+        <span v-for="i in 2">
+            <canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>
+        </span>
+    </div>
+
     <div ref="limitArea"
          class="js-limit-area"
     ></div>
@@ -73,11 +77,6 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            canvasTemplate: '<canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>'
-        };
-    },
     watch: {
         highlights() {
             this.scheduleDraw();
@@ -101,7 +100,7 @@ export default {
         this.seriesElements = new WeakMap();
         this.seriesLimits = new WeakMap();
 
-        let canvasEls = this.$parent.$refs.chartContainer.querySelectorAll("canvas");
+        let canvasEls = this.$refs.chartContainer.querySelectorAll("canvas");
         const mainCanvas = canvasEls[1];
         const overlayCanvas = canvasEls[0];
         if (this.initializeCanvas(mainCanvas, overlayCanvas)) {

src/plugins/plot/configuration/Collection.js

@@ -21,11 +21,17 @@
  *****************************************************************************/
 import Model from './Model';
 
+/**
+ * @template {object} T
+ * @template {object} O
+ * @extends {Model<T, O>}
+ */
 export default class Collection extends Model {
+    /** @type {Constructor} */
+    modelClass = Model
 
     initialize(options) {
         super.initialize(options);
-        this.modelClass = Model;
         if (options.models) {
             this.models = options.models.map(this.modelFn, this);
         } else {
@@ -107,3 +113,7 @@ export default class Collection extends Model {
         this.stopListening();
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {new (...args: any[]) => object} Constructor */

src/plugins/plot/configuration/ConfigStore.js

@@ -19,32 +19,49 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-function ConfigStore() {
-    this.store = {};
-}
+class ConfigStore {
+    constructor() {
+        /** @type {Record<string, Destroyable>} */
+        this.store = {};
+    }
 
-ConfigStore.prototype.deleteStore = function (id) {
-    if (this.store[id]) {
-        if (this.store[id].destroy) {
-            this.store[id].destroy();
-        }
+    /**
+    @param {string} id
+    */
+    deleteStore(id) {
+        const obj = this.store[id];
 
-        delete this.store[id];
+        if (obj) {
+            if (obj.destroy) {
+                obj.destroy();
+            }
+
+            delete this.store[id];
+        }
     }
-};
 
-ConfigStore.prototype.deleteAll = function () {
-    Object.keys(this.store).forEach(id => this.deleteStore(id));
-};
+    deleteAll() {
+        Object.keys(this.store).forEach(id => this.deleteStore(id));
+    }
 
-ConfigStore.prototype.add = function (id, config) {
-    this.store[id] = config;
-};
+    /**
+    @param {string} id
+    @param {any} config
+    */
+    add(id, config) {
+        this.store[id] = config;
+    }
 
-ConfigStore.prototype.get = function (id) {
-    return this.store[id];
-};
+    /**
+    @param {string} id
+    */
+    get(id) {
+        return this.store[id];
+    }
+}
 
 const STORE = new ConfigStore();
 
 export default STORE;
+
+/** @typedef {{destroy?(): void}} Destroyable */

src/plugins/plot/configuration/LegendModel.js

@@ -42,7 +42,10 @@ export default class LegendModel extends Model {
         }
     }
 
-    defaults(options) {
+    /**
+     * @override
+     */
+    defaultModel(options) {
         return {
             position: 'top',
             expandByDefault: false,