Filters Inspector View (#2296)

* Added telemetry filters to the API

* Support multiple inspector views

* Renamed InspectorView.vue to InspectorViews.vue

* first cut of filter inspector plugin

* abstract for better readability

* third times the charm

* working persist checkbox selections

* fix typo

* working persisted filters from inspector

* add prop validations for FitlerValue and FilterObject

* enable filter inspector view for overlay and stacked plots

* remove object from persisted filter when object is removed from composition

* update filterValue to filterField for clarity

* Added filter code to tables

* add filter support to Telemetry Tables

* fix errors when old domainObject does not have configuration property

* working filters on overlay plots

* make requested changes

* Add filters as 'options' object on subscribe

* Significant mods to Filtering
- Styling;
- Added Browse view in Inspector;
- Added .c-checkbox-list class;
- "PLOT SERIES" header changed to "PLOT SERIES OPTIONS" for clarity;

* make filter update pass updated filters to telemetry adapter

* Tolerate undefined configuration

* Conditionally destroy filters listener

* use @change event instead of @blur'

src/plugins/plot/plugin.js

@@ -250,7 +250,8 @@ define([
                                 {"has": "telemetry"}
                             ],
                             "model": {
-                                "composition": []
+                                "composition": [],
+                                "configuration": {}
                             },
                             "properties": [],
                             "priority": 890

src/plugins/plot/res/templates/plot-options-browse.html

@@ -21,7 +21,7 @@
 -->
 <div ng-controller="PlotOptionsController">
     <ul class="tree c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series</h2>
+        <h2 title="Plot series display properties in this object">Plot Series Options</h2>
         <li ng-repeat="series in config.series.models">
             <div class="c-tree__item menus-to-left">
                 <span class='c-disclosure-triangle is-enabled flex-elem'

src/plugins/plot/res/templates/plot-options-edit.html

@@ -21,7 +21,7 @@
 -->
 <div ng-controller="PlotOptionsController">
     <ul class="tree c-tree">
-        <h2 title="Display properties for this object">Plot Series</h2>
+        <h2 title="Display properties for this object">Plot Series Options</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">

src/plugins/plot/src/configuration/PlotConfigurationModel.js

@@ -101,6 +101,19 @@ define([
                     seriesConfig.identifier.namespace === identifier.namespace;
             })[0];
         },
+        /**
+         * Retrieve the persisted filters for a given identifier.
+         */
+        getPersistedFilters: function (identifier) {
+            var domainObject = this.get('domainObject'),
+                keystring = this.openmct.objects.makeKeyString(identifier);
+
+            if (!domainObject.configuration || !domainObject.configuration.filters) {
+                return;
+            }
+
+            return domainObject.configuration.filters[keystring];
+        },
         /**
          * Update the domain object with the given value.
          */

src/plugins/plot/src/configuration/PlotSeries.js

@@ -84,6 +84,7 @@ define([
             this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
             this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
             this.persistedConfig = options.persistedConfig;
+            this.filters = options.filters;
 
             Model.apply(this, arguments);
             this.onXKeyChange(this.get('xKey'));
@@ -139,13 +140,16 @@ define([
          * @returns {Promise}
          */
         fetch: function (options) {
-            options = _.extend({}, {size: 1000, strategy: 'minmax'}, options || {});
+            options = _.extend({}, {size: 1000, strategy: 'minmax', filters: this.filters}, options || {});
             if (!this.unsubscribe) {
                 this.unsubscribe = this.openmct
                     .telemetry
                     .subscribe(
                         this.domainObject,
-                        this.add.bind(this)
+                        this.add.bind(this),
+                        {
+                            filters: this.filters
+                        }
                     );
             }
 
@@ -360,6 +364,19 @@ define([
                 }
             }
 
+        },
+        /**
+         * Updates filters, clears the plot series, unsubscribes and resubscribes
+         * @public
+         */
+        updateFiltersAndRefresh: function (updatedFilters) {
+            this.filters = updatedFilters;
+            this.reset();
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
+            }
+            this.fetch();
         }
     });
 

src/plugins/plot/src/configuration/SeriesCollection.js

@@ -66,6 +66,7 @@ define([
         },
         addTelemetryObject: function (domainObject, index) {
             var seriesConfig = this.plot.getPersistedSeriesConfig(domainObject.identifier);
+            var filters = this.plot.getPersistedFilters(domainObject.identifier);
             var plotObject = this.plot.get('domainObject');
 
             if (!seriesConfig) {
@@ -92,7 +93,8 @@ define([
                 collection: this,
                 openmct: this.openmct,
                 persistedConfig: this.plot
-                    .getPersistedSeriesConfig(domainObject.identifier)
+                    .getPersistedSeriesConfig(domainObject.identifier),
+                filters: filters
             }));
         },
         removeTelemetryObject: function (identifier) {

src/plugins/plot/src/telemetry/PlotController.js

@@ -71,6 +71,14 @@ define([
         this.config.series.forEach(this.addSeries, this);
 
         this.followTimeConductor();
+
+        this.newStyleDomainObject = $scope.domainObject.useCapability('adapter');
+
+        this.filterObserver = this.openmct.objects.observe(
+            this.newStyleDomainObject,
+            'configuration.filters',
+            this.updateFiltersAndResubscribe.bind(this)
+        );
     }
 
     eventHelpers.extend(PlotController.prototype);
@@ -154,6 +162,9 @@ define([
             clearInterval(this.checkForSize);
             delete this.checkForSize;
         }
+        if (this.filterObserver) {
+            this.filterObserver();
+        }
     };
 
     PlotController.prototype.loadMoreData = function (range, purge) {
@@ -244,6 +255,12 @@ define([
                           xRange.max === xDisplayRange.max);
     };
 
+    PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
+        this.config.series.forEach(function (series) {
+            series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
+        })
+    }
+
     /**
      * Export view as JPG.
      */