Use size to get the size of the set instead of length. Remove telemetry keystring from the configuration filters when object is removed from the composition and update the indicator label.

* Display a list of filters that are applied to telemetry objects in a telemetry table.

* - Display 'Mixed' if filters have mixed values.
- Use table configuration domain object to get composition.

* Filter indicator styling WIP

- Markup, class names added;
- TODO: 'Mixed' and commas to be added via CSS, icon and bg coloring;

* Filter indicators styling

- CSS, markup;
- Added dynamic labeling and titling for mixed/non-mixed filter states;
- Theme colors defined and added;
- Added new filter icon glyphs for both 16px and 12px fonts;
- Revised/normalized font project and glyph file names;

* Filter indicators styling

- Adding missed Icomoon project file;

* Filter indicators styling

- Reverting mistakenly changed file;

* Filter indicators styling

- Minor fix to theme sass;
- Sync maelstrom theme;

* Fix indentation

* Set label and title to empty string initially.

* Keep the default snow.

example/generator/GeneratorMetadataProvider.js

@@ -99,10 +99,10 @@ define([
 
     GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
         return _.extend(
-                {},
-                domainObject.telemetry,
-                METADATA_BY_TYPE[domainObject.type]
-            );
+            {},
+            domainObject.telemetry,
+            METADATA_BY_TYPE[domainObject.type]
+        );
     };
 
     return GeneratorMetadataProvider;

package.json

@@ -55,7 +55,7 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
-    "printj": "^1.1.0",
+    "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
     "split": "^1.0.0",

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -64,12 +64,30 @@ define(['zepto'], function ($) {
         var tree = this.generateNewIdentifiers(objTree);
         var rootId = tree.rootId;
         var rootObj = this.instantiate(tree.openmct[rootId], rootId);
+        var newStyleParent = parent.useCapability('adapter');
+        var newStyleRootObj = rootObj.useCapability('adapter');
 
-        // Instantiate all objects in tree with their newly genereated ids,
-        // adding each to its rightful parent's composition
-        rootObj.getCapability("location").setPrimaryLocation(parent.getId());
-        this.deepInstantiate(rootObj, tree.openmct, []);
-        parent.getCapability("composition").add(rootObj);
+        if (this.openmct.composition.checkPolicy(newStyleParent, newStyleRootObj)) {
+            // Instantiate all objects in tree with their newly generated ids,
+            // adding each to its rightful parent's composition
+            rootObj.getCapability("location").setPrimaryLocation(parent.getId());
+            this.deepInstantiate(rootObj, tree.openmct, []);
+            parent.getCapability("composition").add(rootObj);
+        } else {
+            var dialog = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: "We're sorry, but you cannot import that object type into this object.",
+                buttons: [
+                    {
+                        label: "Ok",
+                        emphasis: true,
+                        callback: function () {
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        }
     };
 
     ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {

src/adapter/views/TypeInspectorViewProvider.js

@@ -25,7 +25,7 @@ define([
             cssClass: representation.cssClass,
             description: representation.description,
             canView: function (selection) {
-                if (selection.length === 0 || selection[0].length === 0) {
+                if (selection.length !== 1 || selection[0].length === 0) {
                     return false;
                 }
 

src/plugins/displayLayout/AlphanumericFormatViewProvider.js

@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+
+define([
+    './components/AlphanumericFormatView.vue',
+    'vue'
+], function (AlphanumericFormatView, Vue) {
+
+    function AlphanumericFormatViewProvider(openmct, options) {
+        function isTelemetryObject(selectionPath) {
+            let selectedObject = selectionPath[0].context.item;
+            let parentObject = selectionPath[1].context.item;
+            return parentObject && 
+                parentObject.type === 'layout' &&
+                selectedObject &&
+                openmct.telemetry.isTelemetryObject(selectedObject) &&
+                !options.showAsView.includes(selectedObject.type)
+        }
+
+        return {
+            key: 'alphanumeric-format',
+            name: 'Alphanumeric Format',
+            canView: function (selection) {
+                if (selection.length === 0 || selection[0].length === 1) {
+                    return false;
+                }
+
+                return selection.every(isTelemetryObject);
+            },
+            view: function (selection) {
+                let component;
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct
+                            },
+                            components: {
+                                AlphanumericFormatView: AlphanumericFormatView.default
+                            },
+                            template: '<alphanumeric-format-view></alphanumeric-format-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+
+    return AlphanumericFormatViewProvider;
+});

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+
+<template>
+    <div class="c-properties" v-if="isEditing">
+        <div class="c-properties__header">Alphanumeric Format</div>
+        <ul class="c-properties__section">
+            <li class="c-properties__row">
+                <div class="c-properties__label" title="Printf formatting for the selected telemetry">
+                    <label for="telemetryPrintfFormat">Format</label>
+                </div>
+                <div class="c-properties__value">
+                    <input id="telemetryPrintfFormat"
+                        type="text"
+                        @change="formatTelemetry"
+                        :value="telemetryFormat"
+                        :placeholder="nonMixedFormat ? '' : 'Mixed'"
+                    >
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        inject: ['openmct'],
+        data() {
+            let selectionPath = this.openmct.selection.get()[0];
+            return {
+                isEditing: this.openmct.editor.isEditing(),
+                telemetryFormat: undefined,
+                nonMixedFormat: false
+            }
+        },
+        methods: {
+            toggleEdit(isEditing) {
+                this.isEditing = isEditing;
+            },
+            formatTelemetry(event) {
+                let newFormat = event.currentTarget.value;
+                this.openmct.selection.get().forEach(selectionPath => {
+                    selectionPath[0].context.updateTelemetryFormat(newFormat);    
+                });
+                this.telemetryFormat = newFormat;
+            },
+            handleSelection(selection) {
+                if (selection.length === 0 || selection[0].length < 2) {
+                    return;
+                }
+
+                let format = selection[0][0].context.layoutItem.format;
+                this.nonMixedFormat = selection.every(selectionPath => {
+                    return selectionPath[0].context.layoutItem.format === format;
+                });
+
+                this.telemetryFormat = this.nonMixedFormat ? format : '';
+            }
+        },
+        mounted() {
+            this.openmct.editor.on('isEditing', this.toggleEdit);
+            this.openmct.selection.on('change', this.handleSelection);
+            this.handleSelection(this.openmct.selection.get());
+        },
+        destroyed() {
+            this.openmct.editor.off('isEditing', this.toggleEdit);
+            this.openmct.selection.off('change', this.handleSelection);
+        }
+    }
+
+</script>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -48,7 +48,8 @@
                    :multiSelect="selectedLayoutItems.length > 1"
                    @move="move"
                    @endMove="endMove"
-                   @endLineResize='endLineResize'>
+                   @endLineResize='endLineResize'
+                   @formatChanged='updateTelemetryFormat'>
         </component>
         <edit-marquee v-if='showMarquee'
                       :gridSize="gridSize"
@@ -557,6 +558,11 @@
                     this.layoutItems.splice(itemIndex, 1);
                     this.layoutItems.splice(newIndex, 0, items[itemIndex]);
                 }
+            },
+            updateTelemetryFormat(item, format) {
+                let index = _.findIndex(this.layoutItems, item);
+                item.format = format;
+                this.mutate(`configuration.items[${index}]`, item);
             }
         },
         mounted() {

src/plugins/displayLayout/components/TelemetryView.vue

@@ -79,6 +79,7 @@
 
  <script>
     import LayoutFrame from './LayoutFrame.vue'
+    import printj from 'printj'
 
     const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
           DEFAULT_POSITION = [1, 1];
@@ -143,6 +144,10 @@
                     return;
                 }
 
+                if (this.item.format) {
+                    return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]);
+                }
+
                 return this.valueFormatter && this.valueFormatter.format(this.datum);
             },
             telemetryClass() {
@@ -168,6 +173,9 @@
                 }
 
                 this.context.index = newIndex;
+            },
+            item(newItem) {
+                this.context.layoutItem = newItem;
             }
         },
         methods: {
@@ -219,10 +227,14 @@
                 this.context = {
                     item: domainObject,
                     layoutItem: this.item,
-                    index: this.index
+                    index: this.index,
+                    updateTelemetryFormat: this.updateTelemetryFormat
                 };
                 this.removeSelectable = this.openmct.selection.selectable(
                     this.$el, this.context, this.initSelect);
+            },
+            updateTelemetryFormat(format) {
+                this.$emit('formatChanged', this.item, format);
             }
         },
         mounted() {

src/plugins/displayLayout/plugin.js

@@ -25,6 +25,8 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
+import AlphaNumericFormatViewProvider from './AlphaNumericFormatViewProvider.js'
+
 export default function DisplayLayoutPlugin(options) {
     return function (openmct) {
         openmct.objectViews.addProvider({
@@ -76,7 +78,8 @@ export default function DisplayLayoutPlugin(options) {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
-        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
+        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct, options));
+        openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options));
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === 'layout' && child.type === 'folder') {
                 return false;

src/plugins/filters/components/FilterObject.vue

@@ -63,7 +63,13 @@ export default {
 
             if (filterValue && filterValue[comparator]) {
                 if (value === false) {
-                    filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
+                    let filteredValueName = filterValue[comparator].filter(v => v !== valueName);
+
+                    if (filteredValueName.length === 0) {
+                        delete this.updatedFilters[key];
+                    } else {
+                        filterValue[comparator] = filteredValueName;
+                    }
                 } else {
                     filterValue[comparator].push(valueName);
                 }
@@ -77,6 +83,14 @@ export default {
             this.$emit('updateFilters', this.keyString, this.updatedFilters);
         },
         updateTextFilter(key, comparator, value) {
+            if (value.trim() === '') {
+                if (this.updatedFilters[key]) {
+                    delete this.updatedFilters[key];
+                    this.$emit('updateFilters', this.keyString, this.updatedFilters);
+                }
+                return;
+            }
+
             if (!this.updatedFilters[key]) {
                 this.$set(this.updatedFilters, key, {});
                 this.$set(this.updatedFilters[key], comparator, '');

src/plugins/filters/components/FiltersView.vue

@@ -59,14 +59,18 @@ export default {
         removeChildren(identifier) {
             let keyString = this.openmct.objects.makeKeyString(identifier);
             this.$delete(this.children, keyString);
-            this.persistFilters(keyString);
+            delete this.persistedFilters[keyString];
+            this.mutateConfigurationFilters();
         },
         persistFilters(keyString, userSelects) {
             this.persistedFilters[keyString] = userSelects;
-            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
+            this.mutateConfigurationFilters();
         },
         updatePersistedFilters(filters) {
             this.persistedFilters = filters;
+        },
+        mutateConfigurationFilters() {
+            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
         }
     },
     mounted(){

src/plugins/telemetryTable/TableConfigurationViewProvider.js

@@ -37,7 +37,7 @@ define([
             key: 'table-configuration',
             name: 'Telemetry Table Configuration',
             canView: function (selection) {
-                if (selection.length === 0 || selection[0].length === 0) {
+                if (selection.length !== 1 || selection[0].length === 0) {
                     return false;
                 }
                 let object = selection[0][0].context.item;

src/plugins/telemetryTable/TelemetryTable.js

@@ -26,6 +26,7 @@ define([
     './collections/BoundedTableRowCollection',
     './collections/FilteredTableRowCollection',
     './TelemetryTableRow',
+    './TelemetryTableColumn',
     './TelemetryTableConfiguration'
 ], function (
     EventEmitter,
@@ -33,6 +34,7 @@ define([
     BoundedTableRowCollection,
     FilteredTableRowCollection,
     TelemetryTableRow,
+    TelemetryTableColumn,
     TelemetryTableConfiguration
 ) {
     class TelemetryTable extends EventEmitter {
@@ -94,8 +96,6 @@ define([
                 this.tableComposition.load().then((composition) => {
 
                     composition = composition.filter(this.isTelemetryObject);
-
-                    this.configuration.addColumnsForAllObjects(composition);
                     composition.forEach(this.addTelemetryObject);
 
                     this.tableComposition.on('add', this.addTelemetryObject);
@@ -105,7 +105,7 @@ define([
         }
 
         addTelemetryObject(telemetryObject) {
-            this.configuration.addColumnsForObject(telemetryObject, true);
+            this.addColumnsForObject(telemetryObject, true);
             this.requestDataFor(telemetryObject);
             this.subscribeTo(telemetryObject);
             this.telemetryObjects.push(telemetryObject);
@@ -132,6 +132,13 @@ define([
             this.emit('object-removed', objectIdentifier);
         }
 
+        /**
+         * @private
+         */
+        createRow(datum, columnMap, keyString, limitEvaluator) {
+            return new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
+        }
+
         requestDataFor(telemetryObject) {
             this.incrementOutstandingRequests();
             let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
@@ -145,7 +152,7 @@ define([
                     let columnMap = this.getColumnMapForObject(keyString);
                     let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
 
-                    let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                    let telemetryRows = telemetryData.map(datum => this.createRow(datum, columnMap, keyString, limitEvaluator));
                     this.boundedRows.add(telemetryRows);
                 }).finally(() => {
                     this.decrementOutstandingRequests();
@@ -191,6 +198,19 @@ define([
             }, {});
         }
 
+        addColumnsForObject(telemetryObject) {
+            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            metadataValues.forEach(metadatum => {
+                let column = this.createColumn(metadatum);
+                this.configuration.addSingleColumnForObject(telemetryObject, column);
+            });
+        }
+
+        createColumn(metadatum) {
+            return new TelemetryTableColumn(this.openmct, metadatum);
+        }
+
         subscribeTo(telemetryObject) {
             let subscribeOptions = this.buildOptionsFromConfiguration(telemetryObject);
             let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
@@ -202,7 +222,7 @@ define([
                 if (!this.telemetryObjects.includes(telemetryObject)) {
                     return;
                 }
-                this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                this.boundedRows.add(this.createRow(datum, columnMap, keyString, limitEvaluator));
             }, subscribeOptions);
         }
 

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -22,9 +22,8 @@
 
 define([
     'lodash',
-    'EventEmitter',
-    './TelemetryTableColumn'
-], function (_, EventEmitter, TelemetryTableColumn) {
+    'EventEmitter'
+], function (_, EventEmitter) {
 
     class TelemetryTableConfiguration extends EventEmitter {
         constructor(domainObject, openmct) {
@@ -34,7 +33,6 @@ define([
             this.openmct = openmct;
             this.columns = {};
 
-            this.addColumnsForObject = this.addColumnsForObject.bind(this);
             this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
             this.objectMutated = this.objectMutated.bind(this);
             //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
@@ -48,6 +46,7 @@ define([
             configuration.hiddenColumns = configuration.hiddenColumns || {};
             configuration.columnWidths = configuration.columnWidths || {};
             configuration.columnOrder = configuration.columnOrder || [];
+            configuration.cellFormat = configuration.cellFormat || {};
             configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
 
             return configuration;
@@ -65,26 +64,18 @@ define([
             //Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
             this.domainObject = object;
             //Was it the configuration that changed?
-            if (!_.eq(object.configuration, this.oldConfiguration)) {
+            if (object.configuration !== undefined && !_.eq(object.configuration, this.oldConfiguration)) {
                 //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
                 this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
                 this.emit('change', object.configuration);
             }
         }
 
-        addColumnsForAllObjects(objects) {
-            objects.forEach(object => this.addColumnsForObject(object, false));
-        }
-
-        addColumnsForObject(telemetryObject) {
-            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+        addSingleColumnForObject(telemetryObject, column, position) {
             let objectKeyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            this.columns[objectKeyString] = [];
-
-            metadataValues.forEach(metadatum => {
-                let column = new TelemetryTableColumn(this.openmct, metadatum);
-                this.columns[objectKeyString].push(column);
-            });
+            this.columns[objectKeyString] = this.columns[objectKeyString] || [];
+            position = position || this.columns[objectKeyString].length;
+            this.columns[objectKeyString].splice(position, 0, column);
         }
 
         removeColumnsForObject(objectIdentifier) {

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -42,12 +42,19 @@ define([], function () {
             return column && column.getFormattedValue(this.datum[key]);
         }
 
-        getRowLimitClass() {
-            if (!this.rowLimitClass) {
+        getCellComponentName(key) {
+            let column = this.columns[key];
+            return column &&
+                column.getCellComponentName &&
+                column.getCellComponentName();
+        }
+
+        getRowClass() {
+            if (!this.rowClass) {
                 let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
-                this.rowLimitClass = limitEvaluation && limitEvaluation.cssClass;
+                this.rowClass = limitEvaluation && limitEvaluation.cssClass;
             }
-            return this.rowLimitClass;
+            return this.rowClass;
         }
 
         getCellLimitClasses() {

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -22,12 +22,10 @@
 
 define([
     './components/table.vue',
-    '../../exporters/CSVExporter',
     './TelemetryTable',
     'vue'
 ], function (
     TableComponent,
-    CSVExporter,
     TelemetryTable,
     Vue
 ) {
@@ -51,7 +49,6 @@ define([
                 return domainObject.type === 'table';
             },
             view(domainObject) {
-                let csvExporter = new CSVExporter.default();
                 let table = new TelemetryTable(domainObject, openmct);
                 let component;
                 return {
@@ -67,7 +64,6 @@ define([
                             },
                             provide: {
                                 openmct,
-                                csvExporter,
                                 table
                             },
                             el: element,

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -0,0 +1,176 @@
+<template>
+    <div v-if="filterNames.length > 0"
+        :title=title
+        class="c-filter-indication"
+        :class="{ 'c-filter-indication--mixed': mixed }">
+        <span class="c-filter-indication__mixed">{{ label }}</span>
+        <span v-for="(name, index) in filterNames"
+              class="c-filter-indication__label">
+            {{ name }}
+        </span>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-filter-indication {
+        @include userSelectNone();
+        background: $colorFilterBg;
+        color: $colorFilterFg;
+        display: flex;
+        align-items: center;
+        font-size: 0.9em;
+        margin-top: $interiorMarginSm;
+        padding: 2px;
+        text-transform: uppercase;
+
+        &:before {
+            font-family: symbolsfont-12px;
+            content: $glyph-icon-filter;
+            display: block;
+            font-size: 12px;
+            margin-right: $interiorMarginSm;
+        }
+
+        &__mixed {
+            font-weight: bold;
+            margin-right: $interiorMarginSm;
+        }
+
+        &--mixed {
+            .c-filter-indication__mixed {
+                font-style: italic;
+            }
+        }
+
+        &__label {
+            + .c-filter-indication__label {
+                &:before {
+                    content: ',';
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+    const FILTER_INDICATOR_LABEL = 'Filters:';
+    const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
+    const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
+    const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
+
+    export default {
+        inject: ['openmct', 'table'],
+        data() {
+            return {
+                filterNames: [],
+                filteredTelemetry: {},
+                mixed: false,
+                label: '',
+                title: ''
+            }           
+        },
+        methods: {
+            isTelemetryObject(domainObject) {
+                return domainObject.hasOwnProperty('telemetry');
+            },
+            setFilterNames() {
+                let names = [];
+
+                this.composition && this.composition.load().then((domainObjects) => {
+                    domainObjects.forEach(telemetryObject => {
+                        let keyString= this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                        let filters = this.filteredTelemetry[keyString];
+                        this.telemetryKeyStrings.add(keyString);
+
+                        if (filters !== undefined) {
+                            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+                            Object.keys(filters).forEach(key => {
+                                metadataValues.forEach(metadaum => {
+
+                                    if (key === metadaum.key) {
+                                        names.push(metadaum.name);
+                                    }
+                                });
+                            });
+                        }
+                    });
+                    this.filterNames = Array.from(new Set(names));
+                });
+            },
+            handleConfigurationChanges(configuration) {
+                if (!_.eq(this.filteredTelemetry, configuration.filters)) {
+                    this.updateFilters(configuration.filters || {});
+                }
+            },
+            checkFiltersForMixedValues() {
+                let valueToCompare = this.filteredTelemetry[Object.keys(this.filteredTelemetry)[0]];
+                let mixed = false;
+
+                Object.values(this.filteredTelemetry).forEach(value => {
+                    if (!_.isEqual(valueToCompare, value)) {
+                        mixed = true;
+                        return;
+                    }
+                });
+
+                // If the filtered telemetry is not mixed at this point, check the number of available objects
+                // with the number of filtered telemetry. If they are not equal, the filters must be mixed.
+                if (mixed === false && _.size(this.filteredTelemetry) !== this.telemetryKeyStrings.size) {
+                    mixed = true;
+                }
+
+                this.mixed = mixed;
+            },
+            setLabels() {
+                if (this.mixed) {
+                    this.label = FILTER_INDICATOR_LABEL_MIXED;
+                    this.title = FILTER_INDICATOR_TITLE_MIXED;
+                } else {
+                    this.label = FILTER_INDICATOR_LABEL;
+                    this.title = FILTER_INDICATOR_TITLE;
+                }
+            },
+            updateFilters(filters) {
+                this.filteredTelemetry = JSON.parse(JSON.stringify(filters));
+                this.setFilterNames();
+                this.updateIndicatorLabel();
+            },
+            addChildren(child) {
+                let keyString = this.openmct.objects.makeKeyString(child.identifier);
+                this.telemetryKeyStrings.add(keyString);
+                this.updateIndicatorLabel();
+            },
+            removeChildren(identifier) {
+                let keyString = this.openmct.objects.makeKeyString(identifier);
+                this.telemetryKeyStrings.delete(keyString);
+                this.updateIndicatorLabel();
+            },
+            updateIndicatorLabel() {
+                this.checkFiltersForMixedValues();
+                this.setLabels();
+            }
+        },
+        mounted() {
+            let filters = this.table.configuration.getConfiguration().filters || {};
+            this.telemetryKeyStrings = new Set();
+            this.composition = this.openmct.composition.get(this.table.configuration.domainObject);
+
+            if (this.composition) {
+                this.composition.on('add', this.addChildren);
+                this.composition.on('remove', this.removeChildren);
+            }
+
+            this.table.configuration.on('change', this.handleConfigurationChanges);
+            this.updateFilters(filters);
+        },
+        destroyed() {
+            this.table.configuration.off('change', this.handleConfigurationChanges);
+
+            if (this.composition) {
+                this.composition.off('add', this.addChildren);
+                this.composition.off('remove', this.removeChildren);
+            }
+        }
+    }
+</script>

src/plugins/telemetryTable/components/table-cell.vue

@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+<template>
+    <td>{{formattedValue}}</td>
+</template>
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        row: {
+            type: Object,
+            required: true
+        },
+        columnKey: {
+            type: String,
+            require: true
+        }
+    },
+    computed: {
+        formattedValue() {
+            return this.row.getFormattedValue(this.columnKey);
+        }
+    }
+};
+</script>

src/plugins/telemetryTable/components/table-configuration.vue

@@ -23,6 +23,8 @@
 </style>
 
 <script>
+import TelemetryTableColumn from '../TelemetryTableColumn';
+
 export default {
     inject: ['tableConfiguration', 'openmct'],
     data() {
@@ -43,7 +45,7 @@ export default {
             this.tableConfiguration.updateConfiguration(this.configuration);
         },
         addObject(domainObject) {
-            this.tableConfiguration.addColumnsForObject(domainObject, true);
+                this.addColumnsForObject(domainObject, true);
             this.updateHeaders(this.tableConfiguration.getAllHeaders());
         },
         removeObject(objectIdentifier) {
@@ -56,6 +58,17 @@ export default {
         toggleAutosize() {
             this.configuration.autosize = !this.configuration.autosize;
             this.tableConfiguration.updateConfiguration(this.configuration);
+        },
+        addColumnsForAllObjects(objects) {
+            objects.forEach(object => this.addColumnsForObject(object, false));
+        },
+        addColumnsForObject(telemetryObject) {
+            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            metadataValues.forEach(metadatum => {
+                let column = new TelemetryTableColumn(this.openmct, metadatum);
+                this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
+            });
         }
     },
     mounted() {
@@ -65,7 +78,7 @@ export default {
 
         compositionCollection.load()
             .then((composition) => {
-                this.tableConfiguration.addColumnsForAllObjects(composition);
+                this.addColumnsForAllObjects(composition);
                 this.updateHeaders(this.tableConfiguration.getAllHeaders());
 
                 compositionCollection.on('add', this.addObject);

src/plugins/telemetryTable/components/table-row.vue

@@ -20,12 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<tr :style="{ top: rowTop }" :class="rowLimitClass">
-    <td v-for="(title, key) in headers" 
+<tr :style="{ top: rowTop }" :class="rowClass">
+    <component
+        v-for="(title, key) in headers"
         :key="key"
+        :is="componentList[key]"
+        :columnKey="key"
         :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
         :title="formattedRow[key]"
-        :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
+        :class="cellLimitClasses[key]"
+        class="is-selectable"
+        @click="selectCell($event.currentTarget, key)"
+        :row="row"></component>
 </tr>
 </template>
 
@@ -33,13 +39,19 @@
 </style>
 
 <script>
+import TableCell from './table-cell.vue';
+
 export default {
     data: function () {
         return {
             rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
             formattedRow: this.row.getFormattedDatum(this.headers),
-            rowLimitClass: this.row.getRowLimitClass(),
-            cellLimitClasses: this.row.getCellLimitClasses()
+            rowClass: this.row.getRowClass(),
+            cellLimitClasses: this.row.getCellLimitClasses(),
+            componentList: Object.keys(this.headers).reduce((components, header) => {
+                components[header] = this.row.getCellComponentName(header) || 'table-cell';
+                return components
+            }, {})
         }
     },
     props: {
@@ -77,8 +89,25 @@ export default {
         },
         formatRow: function (row) {
             this.formattedRow = row.getFormattedDatum(this.headers);
-            this.rowLimitClass = row.getRowLimitClass();
+            this.rowClass = row.getRowClass();
             this.cellLimitClasses = row.getCellLimitClasses();
+        },
+        selectCell(element, columnKey) {
+            //TODO: This is a hack. Cannot get parent this way.
+            this.openmct.selection.select([{
+                element: element,
+                context: {
+                    type: 'table-cell',
+                    row: this.row.objectKeyString,
+                    column: columnKey
+                }
+            },{
+                element: this.openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: this.openmct.router.path[0]
+                }
+            }], false);
+            event.stopPropagation();
         }
     },
     // TODO: use computed properties
@@ -88,6 +117,9 @@ export default {
             handler: 'formatRow',
             deep: false
         }
+    },
+    components: {
+        TableCell
     }
 }
 </script>

src/plugins/telemetryTable/components/table.vue

@@ -22,7 +22,8 @@
 <template>
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
      :class="{'loading': loading}">
-    <div class="c-table__control-bar c-control-bar">
+    <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}"><slot></slot></div>
+    <div v-if="allowExport" class="c-table__control-bar c-control-bar">
         <button class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
@@ -40,7 +41,7 @@
                         :key="key"
                         :headerKey="key"
                         :headerIndex="headerIndex"
-                        @sort="sortBy(key)"
+                        @sort="allowSorting && sortBy(key)"
                         @resizeColumn="resizeColumn"
                         @dropTargetOffsetChanged="setDropTargetOffset"
                         @dropTargetActive="dropTargetActive"
@@ -105,6 +106,7 @@
             :row="sizingRowData">
         </telemetry-table-row>
     </table>
+    <telemetry-filter-indicator></telemetry-filter-indicator>
 </div>
 </template>
 
@@ -279,6 +281,8 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
+import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
+import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 
 const VISIBLE_ROW_COUNT = 100;
@@ -293,13 +297,26 @@ export default {
     components: {
         TelemetryTableRow,
         TableColumnHeader,
-        search
+        search,
+        TelemetryFilterIndicator
     },
-    inject: ['table', 'openmct', 'csvExporter'],
+    inject: ['table', 'openmct'],
     props: {
         isEditing: {
             type: Boolean,
             default: false
+        },
+        allowExport: {
+            type: Boolean,
+            default: true
+        },
+        allowFiltering: {
+            'type': Boolean,
+            'default': true
+        },
+        allowSorting: {
+            'type': Boolean,
+            'default': true
         }
     },
     data() {
@@ -611,12 +628,17 @@ export default {
                 scrollTop = this.scrollable.scrollTop;
             }, RESIZE_POLL_INTERVAL);
         },
+        clearRowsAndRerender() {
+            this.visibleRows = [];
+            this.$nextTick().then(this.updateVisibleRows);
+        }
 
     },
     created() {
         this.filterChanged = _.debounce(this.filterChanged, 500);
     },
     mounted() {
+        this.csvExporter = new CSVExporter();
         this.rowsAdded = _.throttle(this.rowsAdded, 200);
         this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
         this.scroll = _.throttle(this.scroll, 100);
@@ -624,6 +646,7 @@ export default {
         this.table.on('object-added', this.addObject);
         this.table.on('object-removed', this.removeObject);
         this.table.on('outstanding-requests', this.outstandingRequests);
+        this.table.on('refresh', this.clearRowsAndRerender);
 
         this.table.filteredRows.on('add', this.rowsAdded);
         this.table.filteredRows.on('remove', this.rowsRemoved);
@@ -649,6 +672,7 @@ export default {
         this.table.off('object-added', this.addObject);
         this.table.off('object-removed', this.removeObject);
         this.table.off('outstanding-requests', this.outstandingRequests);
+        this.table.off('refresh', this.clearRowsAndRerender);
 
         this.table.filteredRows.off('add', this.rowsAdded);
         this.table.filteredRows.off('remove', this.rowsRemoved);

src/plugins/telemetryTable/table-row.html

@@ -1,6 +0,0 @@
-<tr :style="{ top: rowTop }" :class="rowLimitClass">
-    <td v-for="(title, key, headerIndex) in headers" 
-        :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}" 
-        :title="formattedRow[key]"
-        :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
-</tr>

src/styles-new/_constants-espresso.scss

@@ -101,6 +101,8 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorStatusPartialBg: #3f5e8b;
+$colorStatusCompleteBg: #457638;
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
 $colorWarningHi: #990000;
@@ -115,6 +117,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;

src/styles-new/_constants-maelstrom.scss

@@ -105,6 +105,8 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorStatusPartialBg: #3f5e8b;
+$colorStatusCompleteBg: #457638;
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
 $colorWarningHi: #990000;
@@ -119,6 +121,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;

src/styles-new/_constants-snow.scss

@@ -101,6 +101,8 @@ $colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorStatusPartialBg: #c9d6ff;
+$colorStatusCompleteBg: #a4e4b4;
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
 $colorWarningHi: #990000;
@@ -115,6 +117,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #a29fe2;
+$colorFilterFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;

src/styles-new/_constants.scss

@@ -141,6 +141,8 @@ $glyph-icon-grid: '\e922';
 $glyph-icon-grippy-ew: '\e923';
 $glyph-icon-columns: '\e924';
 $glyph-icon-rows: '\e925';
+$glyph-icon-filter: '\e926';
+$glyph-icon-filter-outline: '\e927';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';

src/styles-new/_controls.scss

@@ -60,11 +60,17 @@ button {
     }
 }
 
-/********* Icon Buttons */
+/********* Icon Buttons and Links */
 .c-click-icon {
     @include cClickIcon();
 }
 
+.c-click-link {
+    // A clickable element, typically inline, with an icon and label
+    @include cControl();
+    cursor: pointer;
+}
+
 .c-icon-button,
 .c-click-swatch {
     @include cClickIconButton();

src/styles-new/_glyphs.scss

@@ -30,10 +30,10 @@
 }
 
 @font-face {
-    // Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
+    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
     font-family: 'symbolsfont-12px';
-    src: url('./fonts/openmct-symbols-12px.woff') format('woff'),
-    url('./fonts/openmct-symbols-12px.ttf') format('truetype');
+    src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
+    url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -77,6 +77,8 @@
 .icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
 .icon-columns {  @include glyphBefore($glyph-icon-columns); }
 .icon-rows {  @include glyphBefore($glyph-icon-rows); }
+.icon-filter {  @include glyphBefore($glyph-icon-filter); }
+.icon-filter-outline {  @include glyphBefore($glyph-icon-filter-outline); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -164,6 +166,8 @@
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
+.icon-filter-12px {  @include glyphBefore($glyph-icon-filter,'symbolsfont-12px'); }
+.icon-filter-outline-12px {  @include glyphBefore($glyph-icon-filter-outline,'symbolsfont-12px'); }
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }

src/styles-new/_status.scss

@@ -159,3 +159,16 @@ tr {
         @include indicatorStatusColors($colorStatusError);
     }
 }
+
+.s-status {
+    &--partial {
+        // Partially completed things, such as a file downloading or process that's running
+        background-color: $colorStatusPartialBg;
+    }
+
+    &--complete {
+        // Completed things, such as a file downloaded or process that's finished
+        background-color: $colorStatusCompleteBg;
+    }
+}
+

src/styles-new/fonts/Open MCT Symbols 12px.json

@@ -1,19 +1,35 @@
 {
   "metadata": {
-    "name": "openmct-symbols-12px",
+    "name": "Open MCT Symbols 12px",
     "lastOpened": 0,
-    "created": 1527031065005
+    "created": 1561483556329
   },
   "iconSets": [
     {
       "selection": [
+        {
+          "order": 12,
+          "id": 10,
+          "name": "icon12-filter",
+          "prevSize": 12,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 14,
+          "id": 11,
+          "name": "icon12-filter-outline",
+          "prevSize": 12,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 9,
           "id": 6,
           "name": "icon12-crosshair",
           "prevSize": 12,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -21,7 +37,7 @@
           "name": "icon12-grippy",
           "prevSize": 12,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -29,7 +45,7 @@
           "name": "icon12-list-view",
           "prevSize": 12,
           "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -37,14 +53,14 @@
           "prevSize": 12,
           "code": 921865,
           "name": "icon12-folder",
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
-        "name": "openmct-symbols-12px",
+        "name": "Open MCT Symbols 12px",
         "importSize": {
-          "width": 279,
+          "width": 384,
           "height": 384
         },
         "designer": "Charles Hacskaylo"
@@ -52,6 +68,28 @@
       "height": 1024,
       "prevSize": 12,
       "icons": [
+        {
+          "id": 10,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h256v-341.333l-341.333-341.333h853.333l-341.333 341.333 1.067 341.333h254.933c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter"
+          ]
+        },
+        {
+          "id": 11,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h682.667c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0zM170.933 853.333h-0.267v-512l256 256v256zM853.067 853.333h-255.2l-0.533-256 256-256v511.733zM853.333 341.333h-682.667v-170.4h682.667z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter-outline"
+          ]
+        },
         {
           "id": 6,
           "paths": [
@@ -60,26 +98,11 @@
             "M597.333 768h-170.667v256h170.667v-256z",
             "M256 426.667h-256v170.667h256v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-crosshair"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 8,
@@ -95,39 +118,12 @@
             "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
             "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [],
           "width": 745,
-          "isMulticolor": false,
-          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-grippy"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 7,
@@ -136,24 +132,11 @@
             "M0 426.667h1024v170.667h-1024v-170.667z",
             "M0 853.333h1024v170.667h-1024v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-list-view"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 3,
@@ -162,40 +145,14 @@
             "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
           ],
           "attrs": [],
-          "isMulticolor": false,
           "grid": 0,
           "tags": [
             "icon12-folder"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {
-                "f": 0
-              },
-              {
-                "f": 0
-              }
-            ]
-          }
+          ]
         }
       ],
       "invisible": false,
-      "colorThemes": [
-        [
-          [
-            0,
-            0,
-            0,
-            1
-          ],
-          [
-            0,
-            161,
-            75,
-            1
-          ]
-        ]
-      ],
+      "colorThemes": [],
       "colorThemeIdx": 0
     }
   ],
@@ -206,9 +163,9 @@
     "showQuickUse2": true,
     "showSVGs": true,
     "fontPref": {
-      "prefix": "icon-",
+      "prefix": "openmct-symbols-",
       "metadata": {
-        "fontFamily": "openmct-symbols-12px",
+        "fontFamily": "Open-MCT-Symbols-12px",
         "majorVersion": 1,
         "minorVersion": 0
       },
@@ -217,7 +174,12 @@
         "baseline": 6.25,
         "whitespace": 50
       },
-      "embed": false
+      "embed": false,
+      "noie8": true,
+      "ie7": false,
+      "showMetadata": false,
+      "includeMetadata": false,
+      "showMetrics": true
     },
     "imagePref": {
       "prefix": "icon-",

src/styles-new/fonts/Open MCT Symbols 16px.json

@@ -1,8 +1,8 @@
 {
   "metadata": {
-    "name": "Open MCT Symbols",
+    "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1541830438012
+    "created": 1561482854927
   },
   "iconSets": [
     {
@@ -317,13 +317,29 @@
           "code": 59685,
           "tempChar": ""
         },
+        {
+          "order": 161,
+          "id": 142,
+          "name": "icon-filter",
+          "prevSize": 32,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 162,
+          "id": 141,
+          "name": "icon-filter-outline",
+          "prevSize": 32,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
           "prevSize": 32,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -331,7 +347,7 @@
           "name": "icon-arrows-up-down",
           "prevSize": 32,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -339,7 +355,7 @@
           "name": "icon-bullet",
           "prevSize": 32,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
@@ -347,7 +363,7 @@
           "prevSize": 32,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
@@ -355,7 +371,7 @@
           "name": "icon-chain-links",
           "prevSize": 32,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -363,7 +379,7 @@
           "name": "icon-download",
           "prevSize": 32,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
@@ -371,7 +387,7 @@
           "name": "icon-duplicate",
           "prevSize": 32,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -379,7 +395,7 @@
           "name": "icon-folder-new",
           "prevSize": 32,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -387,7 +403,7 @@
           "name": "icon-fullscreen-collapse",
           "prevSize": 32,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -395,7 +411,7 @@
           "name": "icon-fullscreen-expand",
           "prevSize": 32,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
@@ -403,7 +419,7 @@
           "name": "icon-layers",
           "prevSize": 32,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
@@ -411,7 +427,7 @@
           "name": "icon-line-horz",
           "prevSize": 32,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
@@ -419,7 +435,7 @@
           "name": "icon-magnify",
           "prevSize": 32,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
@@ -427,7 +443,7 @@
           "name": "icon-magnify-in",
           "prevSize": 32,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
@@ -435,7 +451,7 @@
           "name": "icon-magnify-out-v2",
           "prevSize": 32,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
@@ -443,7 +459,7 @@
           "name": "icon-menu",
           "prevSize": 32,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -451,7 +467,7 @@
           "name": "icon-move",
           "prevSize": 32,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -459,7 +475,7 @@
           "name": "icon-new-window",
           "prevSize": 32,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -467,7 +483,7 @@
           "name": "icon-paint-bucket-v2",
           "prevSize": 32,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
@@ -475,7 +491,7 @@
           "name": "icon-pencil",
           "prevSize": 32,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
@@ -483,7 +499,7 @@
           "name": "icon-pencil-edit-in-place",
           "prevSize": 32,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
@@ -491,7 +507,7 @@
           "name": "icon-play",
           "prevSize": 32,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -499,7 +515,7 @@
           "name": "icon-pause",
           "prevSize": 32,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -507,7 +523,7 @@
           "name": "icon-plot-resource",
           "prevSize": 32,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
@@ -515,7 +531,7 @@
           "name": "icon-pointer-left",
           "prevSize": 32,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
@@ -523,7 +539,7 @@
           "name": "icon-pointer-right",
           "prevSize": 32,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -531,7 +547,7 @@
           "name": "icon-refresh",
           "prevSize": 32,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -539,7 +555,7 @@
           "name": "icon-save",
           "prevSize": 32,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
@@ -547,7 +563,7 @@
           "name": "icon-save-as",
           "prevSize": 32,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -555,7 +571,7 @@
           "name": "icon-sine",
           "prevSize": 32,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -563,7 +579,7 @@
           "name": "icon-font",
           "prevSize": 32,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
@@ -571,7 +587,7 @@
           "name": "icon-thumbs-strip",
           "prevSize": 32,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -579,7 +595,7 @@
           "name": "icon-two-parts-both",
           "prevSize": 32,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -587,7 +603,7 @@
           "name": "icon-two-parts-one-only",
           "prevSize": 32,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -595,7 +611,7 @@
           "name": "icon-resync",
           "prevSize": 32,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
@@ -603,7 +619,7 @@
           "name": "icon-reset",
           "prevSize": 32,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -611,7 +627,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 32,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -619,7 +635,7 @@
           "name": "icon-brightness",
           "prevSize": 32,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
@@ -627,7 +643,7 @@
           "name": "icon-contrast",
           "prevSize": 32,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
@@ -635,7 +651,7 @@
           "name": "icon-expand",
           "prevSize": 32,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
@@ -643,7 +659,7 @@
           "name": "icon-list-view",
           "prevSize": 32,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -651,7 +667,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 32,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
@@ -659,7 +675,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 32,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
@@ -667,7 +683,7 @@
           "name": "icon-frame-show",
           "prevSize": 32,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
@@ -675,7 +691,7 @@
           "name": "icon-frame-hide",
           "prevSize": 32,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -683,7 +699,7 @@
           "name": "icon-import",
           "prevSize": 32,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -691,7 +707,7 @@
           "name": "icon-export",
           "prevSize": 32,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -699,7 +715,7 @@
           "name": "icon-font-size",
           "prevSize": 32,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
@@ -707,7 +723,7 @@
           "name": "icon-activity",
           "prevSize": 32,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -715,7 +731,7 @@
           "name": "icon-activity-mode",
           "prevSize": 32,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -723,7 +739,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 32,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -731,7 +747,7 @@
           "name": "icon-clock",
           "prevSize": 32,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -739,7 +755,7 @@
           "name": "icon-database",
           "prevSize": 32,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -747,7 +763,7 @@
           "name": "icon-database-query",
           "prevSize": 32,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -755,7 +771,7 @@
           "name": "icon-dataset",
           "prevSize": 32,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -763,7 +779,7 @@
           "name": "icon-datatable",
           "prevSize": 32,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -771,7 +787,7 @@
           "name": "icon-dictionary",
           "prevSize": 32,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -779,7 +795,7 @@
           "name": "icon-folder",
           "prevSize": 32,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -787,7 +803,7 @@
           "name": "icon-image",
           "prevSize": 32,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -795,7 +811,7 @@
           "name": "icon-layout",
           "prevSize": 32,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -803,7 +819,7 @@
           "name": "icon-object",
           "prevSize": 32,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -811,7 +827,7 @@
           "name": "icon-object-unknown",
           "prevSize": 32,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -819,7 +835,7 @@
           "name": "icon-packet",
           "prevSize": 32,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -827,7 +843,7 @@
           "name": "icon-page",
           "prevSize": 32,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -835,7 +851,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 32,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -843,7 +859,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 32,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -851,7 +867,7 @@
           "name": "icon-session",
           "prevSize": 32,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -859,7 +875,7 @@
           "name": "icon-tabular",
           "prevSize": 32,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -867,7 +883,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 32,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -875,7 +891,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 32,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -883,7 +899,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 32,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -891,7 +907,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 32,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -899,7 +915,7 @@
           "name": "icon-telemetry",
           "prevSize": 32,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -907,7 +923,7 @@
           "name": "icon-timeline",
           "prevSize": 32,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -915,7 +931,7 @@
           "name": "icon-timer",
           "prevSize": 32,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -923,7 +939,7 @@
           "name": "icon-topic",
           "prevSize": 32,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -931,7 +947,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 32,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -939,7 +955,7 @@
           "name": "icon-summary-widget",
           "prevSize": 32,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -947,7 +963,7 @@
           "name": "icon-notebook",
           "prevSize": 32,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -955,7 +971,7 @@
           "name": "icon-tabs-view",
           "prevSize": 32,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -963,7 +979,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 32,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 152,
@@ -971,7 +987,7 @@
           "name": "icon-generator-sine",
           "prevSize": 32,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 153,
@@ -979,7 +995,7 @@
           "name": "icon-generator-event",
           "prevSize": 32,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 160,
@@ -987,7 +1003,7 @@
           "name": "icon-gauge",
           "prevSize": 32,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1602,6 +1618,46 @@
             ]
           }
         },
+        {
+          "id": 142,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
+        {
+          "id": 141,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter-outline"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
         {
           "id": 105,
           "paths": [

src/ui/inspector/InspectorViews.vue

@@ -25,10 +25,6 @@ import _ from 'lodash';
         },
         methods: {
             updateSelection(selection) {
-                if (_.isEqual(this.selection, selection)) {
-                    return;
-                }
-
                 this.selection = selection;
 
                 if (this.selectedViews) {
@@ -38,10 +34,6 @@ import _ from 'lodash';
                     this.$el.innerHTML = '';
                 }
 
-                if (selection.length > 1) {
-                    return;
-                }
-
                 this.selectedViews = this.openmct.inspectorViews.get(selection);
                 this.selectedViews.forEach(selectedView => {
                     let viewContainer = document.createElement('div');

webpack.config.js

@@ -24,6 +24,7 @@ const webpackConfig = {
     output: {
         filename: '[name].js',
         library: '[name]',
+        libraryTarget: 'umd',
         path: path.resolve(__dirname, 'dist')
     },
     resolve: {
@@ -35,6 +36,7 @@ const webpackConfig = {
             "bourbon": "bourbon.scss",
             "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
+            "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
             "styles": path.join(__dirname, "src/styles-new")
         }
     },