fix length of undefined check (#3292)

* refactor toggleYAxisLabel for reusability and add toggleXAxisLabel

* allow change of x-axis metadata in single plots

* Revert "refactor toggleYAxisLabel for reusability and add toggleXAxisLabel"

This reverts commit a94a461235.

* change ticks on x-axis metadata change

* update all visible x-axis ticks when changing x-axis metadata

* fix x-axis change to only update ticks when needed

* change x axis toggle to key from label

* remove comments and unnecessary code

* Minor tweaks

 - Refined position of X label select;
 - Fixed ``:hover` to use ``@include hover`;

* WIP do not re-request data on x-axis metadata change

* change x axis selected option on x key change

* options and timesystem change react correctly

* set display range on change of x axis metadata

* clean up regeneration of ticks on x-axis change

remove commented code

* only enable x key toggle when appropriate

* remove comment

Co-authored-by: charlesh88 <charlesh88@gmail.com>

platform/features/clock/res/templates/clock.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-clock l-time-display" ng-controller="ClockController as clock">
+<div class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
 	<div class="c-clock__timezone">
 		{{clock.zone()}}
 	</div>

platform/features/clock/res/templates/timer.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="c-timer u-style-receiver js-style-receiver is-{{timer.timerState}}" ng-controller="TimerController as timer">
     <div class="c-timer__controls">
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"

src/plugins/LADTable/components/LADTable.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div class="c-lad-table-wrapper">
+<div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
     <table class="c-table c-lad-table">
         <thead>
             <tr>

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -203,7 +203,7 @@ export default class TelemetryCriterion extends EventEmitter {
         let inputValue;
         if (metadataObject) {
             if(metadataObject.enumerations && input.length) {
-                const enumeration = metadataObject.enumerations[input[0]];
+                const enumeration = metadataObject.enumerations.find((item) => item.value.toString() === input[0].toString());
                 if (enumeration !== undefined && enumeration.string) {
                     inputValue = [enumeration.string];
                 }

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -22,7 +22,7 @@
 
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget"
+           class="c-condition-widget u-style-receiver js-style-receiver"
            :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -124,7 +124,117 @@ define(['lodash'], function (_) {
                         'telemetry.plot.overlay-multi': [
                             VIEW_TYPES['telemetry.plot.stacked']
                         ]
-                    };
+                    },
+                    SMALL_FONT_SIZES = [
+                        {
+                            name: 'Default Size',
+                            value: 'default'
+                        },
+                        {
+                            name: '8px',
+                            value: '8'
+                        },
+                        {
+                            name: '9px',
+                            value: '9'
+                        },
+                        {
+                            name: '10px',
+                            value: '10'
+                        },
+                        {
+                            name: '11px',
+                            value: '11'
+                        },
+                        {
+                            name: '12px',
+                            value: '12'
+                        },
+                        {
+                            name: '13px',
+                            value: '13'
+                        },
+                        {
+                            name: '14px',
+                            value: '14'
+                        },
+                        {
+                            name: '16px',
+                            value: '16'
+                        },
+                        {
+                            name: '18px',
+                            value: '18'
+                        },
+                        {
+                            name: '20px',
+                            value: '20'
+                        },
+                        {
+                            name: '24px',
+                            value: '24'
+                        }
+                    ],
+                    LARGE_FONT_SIZES = [
+                        {
+                            name: '28px',
+                            value: '28'
+                        },
+                        {
+                            name: '32px',
+                            value: '32'
+                        },
+                        {
+                            name: '36px',
+                            value: '36'
+                        },
+                        {
+                            name: '42px',
+                            value: '42'
+                        },
+                        {
+                            name: '48px',
+                            value: '48'
+                        },
+                        {
+                            name: '72px',
+                            value: '72'
+                        },
+                        {
+                            name: '96px',
+                            value: '96'
+                        },
+                        {
+                            name: '128px',
+                            value: '128'
+                        }
+                    ],
+                    FONTS = [
+                        {
+                            name: 'Default',
+                            value: 'default'
+                        },
+                        {
+                            name: 'Bold',
+                            value: 'default-bold'
+                        },
+                        {
+                            name: 'Narrow',
+                            value: 'narrow'
+                        },
+                        {
+                            name: 'Narrow Bold',
+                            value: 'narrow-bold'
+                        },
+                        {
+                            name: 'Monospace',
+                            value: 'monospace'
+                        },
+                        {
+                            name: 'Monospace Bold',
+                            value: 'monospace-bold'
+                        }
+                    ]
 
                 function getUserInput(form) {
                     return openmct.$injector.get('dialogService').getUserInput(form, {});
@@ -378,25 +488,136 @@ define(['lodash'], function (_) {
                     }
                 }
 
-                function getTextSizeMenu(selectedParent, selection) {
+                function getAvailableFontSizeOptions(selection) {
-                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
+                    let sizeOptions = 'big';
-                    return {
+
-                        control: "select-menu",
+                    selection.forEach(selectable => {
-                        domainObject: selectedParent,
+                        if (selectable[0].context.item) {
-                        applicableSelectedItems: selection.filter(selectionPath => {
+                            if (selectable[0].context.item.type.includes('plot') ||
-                            let type = selectionPath[0].context.layoutItem.type;
+                            selectable[0].context.item.type.includes('table')) {
-                            return type === 'text-view' || type === 'telemetry-view';
+                                sizeOptions = 'small';
-                        }),
+                            }
-                        property: function (selectionPath) {
+                        }
-                            return getPath(selectionPath) + ".size";
+                    });
-                        },
+
-                        title: "Set text size",
+                    if (sizeOptions === 'small') {
-                        options: TEXT_SIZE.map(size => {
+                        return SMALL_FONT_SIZES;
-                            return {
+                    } else {
-                                value: size + "px"
+                        return SMALL_FONT_SIZES.concat(LARGE_FONT_SIZES);
-                            };
+                    }
-                        })
+                }
-                    };
+
+                function getFontSizeMenu(selectedParent, selection) {
+
+                    if (selection.length === 1) {
+                        let primary = selection[0][0];
+                        let type = primary.context.layoutItem.type;
+
+                        if (type === 'subobject-view') {
+                            let objectType = primary.context.item.type;
+
+                            if (objectType === 'layout' ||
+                                objectType === 'flexible-layout' ||
+                                objectType === 'tabs') {
+                                return;
+                            }
+                        }
+
+                        return {
+                            control: 'select-menu',
+                            domainObject: selectedParent,
+                            icon: "icon-font-size",
+                            applicableSelectedItems: selection,
+                            property: (selectionPath) => {
+                                return getPath(selectionPath) + '.fontSize';
+                            },
+                            title: "Set font size",
+                            options: getAvailableFontSizeOptions(selection)
+                        };
+                    } else {
+                        return {
+                            control: 'select-menu',
+                            domainObject: selectedParent,
+                            icon: "icon-font-size",
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                let type = selectionPath[0].context.layoutItem.type;
+
+                                if (type === 'line-view' || type === 'box-view') {
+                                    return false;
+                                } else if (type === 'subobject-view') {
+                                    let objectType = selectionPath[0].context.item.type;
+
+                                    if (objectType === 'layout' ||
+                                        objectType === 'flexible-layout' ||
+                                        objectType === 'tabs') {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            }),
+                            property: (selectionPath) => {
+                                return getPath(selectionPath) + '.fontSize';
+                            },
+                            title: "Set font size",
+                            options: getAvailableFontSizeOptions(selection)
+                        }
+                    }
+                }
+
+                function getFontMenu(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        let primary = selection[0][0];
+                        let type = primary.context.layoutItem.type;
+
+                        if (type === 'subobject-view') {
+                            let objectType = primary.context.item.type;
+
+                            if (objectType === 'layout' ||
+                                objectType === 'flexible-layout' ||
+                                objectType === 'tabs') {
+                                return;
+                            }
+                        }
+
+                        return {
+                            control: 'select-menu',
+                            domainObject: selectedParent,
+                            icon: "icon-font",
+                            applicableSelectedItems: selection,
+                            property: (selectionPath) => {
+                                return getPath(selectionPath) + '.font';
+                            },
+                            title: "Set font style",
+                            options: FONTS
+                        }
+                    } else {
+                        return {
+                            control: 'select-menu',
+                            domainObject: selectedParent,
+                            icon: "icon-font",
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                let type = selectionPath[0].context.layoutItem.type;
+
+                                if (type === 'line-view' || type === 'box-view') {
+                                    return false;
+                                } else if (type === 'subobject-view') {
+                                    let objectType = selectionPath[0].context.item.type;
+
+                                    if (objectType === 'layout' ||
+                                    objectType === 'flexible-layout' ||
+                                    objectType === 'tabs') {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            }),
+                            property: (selectionPath) => {
+                                return getPath(selectionPath) + '.font';
+                            },
+                            title: "Set font style",
+                            options: FONTS
+                        }
+                    }
                 }
 
                 function getTextButton(selectedParent, selection) {
@@ -409,7 +630,7 @@ define(['lodash'], function (_) {
                         property: function (selectionPath) {
                             return getPath(selectionPath);
                         },
-                        icon: "icon-font",
+                        icon: "icon-pencil",
                         title: "Edit text properties",
                         dialog: DIALOG_FORM.text
                     };
@@ -586,7 +807,8 @@ define(['lodash'], function (_) {
                     'display-mode': [],
                     'telemetry-value': [],
                     'style': [],
-                    'text-style': [],
+                    'font-size': [],
+                    'font-family': [],
                     'position': [],
                     'duplicate': [],
                     'remove': []
@@ -622,6 +844,16 @@ define(['lodash'], function (_) {
                         if (toolbar.viewSwitcher.length === 0) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
+                        if (toolbar['font-size'].length === 0) {
+                            toolbar['font-size'] = [
+                                getFontSizeMenu(selectedParent, selectedObjects)
+                            ];
+                        }
+                        if (toolbar['font-family'].length === 0) {
+                            toolbar['font-family'] = [
+                                getFontMenu(selectedParent, selectedObjects)
+                            ];
+                        }
                     } else if (layoutItem.type === 'telemetry-view') {
                         if (toolbar['display-mode'].length === 0) {
                             toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selectedObjects)];
@@ -629,9 +861,14 @@ define(['lodash'], function (_) {
                         if (toolbar['telemetry-value'].length === 0) {
                             toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                         }
-                        if (toolbar['text-style'].length === 0) {
+                        if (toolbar['font-size'].length === 0) {
-                            toolbar['text-style'] = [
+                            toolbar['font-size'] = [
-                                getTextSizeMenu(selectedParent, selectedObjects)
+                                getFontSizeMenu(selectedParent, selectedObjects)
+                            ];
+                        }
+                        if (toolbar['font-family'].length === 0) {
+                            toolbar['font-family'] = [
+                                getFontMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {
@@ -650,9 +887,14 @@ define(['lodash'], function (_) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'text-view') {
-                        if (toolbar['text-style'].length === 0) {
+                        if (toolbar['font-size'].length === 0) {
-                            toolbar['text-style'] = [
+                            toolbar['font-size'] = [
-                                getTextSizeMenu(selectedParent, selectedObjects)
+                                getFontSizeMenu(selectedParent, selectedObjects)
+                            ];
+                        }
+                        if (toolbar['font-family'].length === 0) {
+                            toolbar['font-family'] = [
+                                getFontMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {

src/plugins/displayLayout/components/BoxView.vue

@@ -29,7 +29,7 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-box-view"
+        class="c-box-view u-style-receiver js-style-receiver"
         :class="[styleClass]"
         :style="style"
     ></div>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout"
+    class="l-layout u-style-receiver js-style-receiver"
     :class="{
         'is-multi-selected': selectedLayoutItems.length > 1,
         'allow-editing': isEditing

src/plugins/displayLayout/components/ImageView.vue

@@ -81,6 +81,7 @@ export default {
         style() {
             let backgroundImage = 'url(' + this.item.url + ')';
             let border = '1px solid ' + this.item.stroke;
+
             if (this.itemStyle) {
                 if (this.itemStyle.imageUrl !== undefined) {
                     backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';

src/plugins/displayLayout/components/SubobjectView.vue

@@ -35,6 +35,8 @@
         :object-path="currentObjectPath"
         :has-frame="item.hasFrame"
         :show-edit-view="false"
+        :font-size="item.fontSize"
+        :font="item.font"
     />
 </layout-frame>
 </template>
@@ -73,6 +75,8 @@ export default {
             y: position[1],
             identifier: domainObject.identifier,
             hasFrame: hasFrameByDefault(domainObject.type),
+            fontSize: 'default',
+            font: 'default',
             viewKey
         };
     },
@@ -120,7 +124,6 @@ export default {
             if (!this.context) {
                 return;
             }
-
             this.context.layoutItem = newItem;
         }
     },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,12 +30,14 @@
 >
     <div
         v-if="domainObject"
-        class="c-telemetry-view"
+        class="u-style-receiver c-telemetry-view"
         :class="{
             styleClass,
             'is-missing': domainObject.status === 'missing'
         }"
         :style="styleObject"
+        :data-font-size="item.fontSize"
+        :data-font="item.font"
         @contextmenu.prevent="showContextMenu"
     >
         <div class="is-missing__indicator"
@@ -89,7 +91,8 @@ export default {
             stroke: "",
             fill: "",
             color: "",
-            size: "13px"
+            fontSize: 'default',
+            font: 'default'
         };
     },
     inject: ['openmct', 'objectPath'],
@@ -136,10 +139,15 @@ export default {
             return displayMode === 'all' || displayMode === 'value';
         },
         styleObject() {
-            return Object.assign({}, {
+            let size;
-                fontSize: this.item.size
+            //for legacy size support
-            }, this.itemStyle);
+            if (!this.item.fontSize) {
+                size = this.item.size
+            }
 
+            return Object.assign({}, {
+                size
+            }, this.itemStyle);
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;

src/plugins/displayLayout/components/TextView.vue

@@ -29,7 +29,9 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-text-view"
+        class="c-text-view u-style-receiver js-style-receiver"
+        :data-font-size="item.fontSize"
+        :data-font="item.font"
         :class="[styleClass]"
         :style="style"
     >
@@ -47,13 +49,14 @@ export default {
         return {
             fill: '',
             stroke: '',
-            size: '13px',
             color: '',
             x: 1,
             y: 1,
             width: 10,
             height: 5,
-            text: element.text
+            text: element.text,
+            fontSize: 'default',
+            font: 'default'
         };
     },
     inject: ['openmct'],
@@ -84,8 +87,14 @@ export default {
     },
     computed: {
         style() {
+            let size;
+            //legacy size support
+            if (!this.item.fontSize) {
+                size = this.item.size;
+            }
+
             return Object.assign({
-                fontSize: this.item.size
+                size
             }, this.itemStyle);
         }
     },

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -29,7 +29,7 @@
         >
         </div>
         <div class="c-imagery__control-bar">
-            <div class="c-imagery__timestamp">{{ getTime() }}</div>
+            <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
                 <button
                     class="c-button icon-pause pause-play"

src/plugins/notebook/components/notebook-embed.vue

@@ -248,7 +248,8 @@ export default {
         previewEmbed() {
             const self = this;
             const previewAction = new PreviewAction(self.openmct);
-            previewAction.invoke(JSON.parse(self.embed.objectPath));
+            this.openmct.objects.get(self.embed.domainObject.identifier)
+                .then(domainObject => previewAction.invoke([domainObject]));
         },
         removeEmbed(success) {
             if (!success) {

src/plugins/notebook/utils/notebook-entries.js

@@ -95,8 +95,7 @@ export const createNewEmbed = (snapshotMeta, snapshot = '') => {
         id: 'embed-' + date,
         name,
         snapshot,
-        type,
+        type
-        objectPath: JSON.stringify(objectPath)
     };
 }
 

src/plugins/notificationIndicator/components/NotificationIndicator.vue

@@ -1,6 +1,6 @@
 <template>
 <div
-    v-if="notifications.length > 0"
+    v-show="notifications.length > 0"
     class="c-indicator c-indicator--clickable icon-bell"
     :class="[severityClass]"
 >

src/plugins/plot/res/templates/mct-plot.html

@@ -232,9 +232,9 @@
                 </div>
             </div>
 
-            <div class="gl-plot-axis-area gl-plot-x">
+            <div class="gl-plot-axis-area gl-plot-x has-local-controls">
                 <mct-ticks axis="xAxis">
-                     <div ng-repeat="tick in ticks track by tick.value"
+                     <div ng-repeat="tick in ticks track by tick.text"
                           class="gl-plot-tick gl-plot-x-tick-label"
                           ng-style="{
                               left: (100 * (tick.value - min) / interval) + '%'
@@ -244,9 +244,21 @@
                      </div>
                 </mct-ticks>
 
-                <div class="gl-plot-label gl-plot-x-label">
+                <div
+                    class="gl-plot-label gl-plot-x-label"
+                    ng-class="{'icon-gear': (xKeyOptions.length > 1 && series.length === 1)}"
+                >
                     {{ xAxis.get('label') }}
                 </div>
+
+                <select
+                    ng-if="plot.isEnabledXKeyToggle()"
+                    ng-model="selectedXKeyOption.key"
+                    ng-change="plot.toggleXKeyOption()"
+                    class="gl-plot-x-label__select local-controls--hidden"
+                    ng-options="option.key as option.name for option in xKeyOptions"
+                >
+                </select>
             </div>
 
         </div>

src/plugins/plot/res/templates/plot.html

@@ -41,7 +41,7 @@
         </button>
     </div>
 
-    <div class="l-view-section">
+    <div class="l-view-section u-style-receiver js-style-receiver">
         <div class="c-loading--overlay loading"
             ng-show="!!pending"></div>
         <mct-plot config="controller.config"

src/plugins/plot/res/templates/stacked-plot.html

@@ -40,7 +40,7 @@
                 title="Toggle cursor guides">
         </button>
     </div>
-    <div class="l-view-section">
+    <div class="l-view-section u-style-receiver js-style-receiver">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
         <div class="gl-plot child-frame u-inspectable"

src/plugins/plot/src/chart/MCTChartController.js

@@ -68,7 +68,6 @@ function (
             this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
             this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
             this.listenTo(this.config.yAxis, 'change:key', this.clearOffset, this);
-            this.listenTo(this.config.xAxis, 'change:key', this.clearOffset, this);
             this.listenTo(this.config.yAxis, 'change', this.scheduleDraw);
             this.listenTo(this.config.xAxis, 'change', this.scheduleDraw);
             this.$scope.$watch('highlights', this.scheduleDraw);
@@ -81,7 +80,14 @@ function (
 
     MCTChartController.$inject = ['$scope'];
 
+    MCTChartController.prototype.reDraw = function (mode, o, series) {
+        this.changeInterpolate(mode, o, series);
+        this.changeMarkers(mode, o, series);
+        this.changeAlarmMarkers(mode, o, series);
+    };
+
     MCTChartController.prototype.onSeriesAdd = function (series) {
+        this.listenTo(series, 'change:xKey', this.reDraw, this);
         this.listenTo(series, 'change:interpolate', this.changeInterpolate, this);
         this.listenTo(series, 'change:markers', this.changeMarkers, this);
         this.listenTo(series, 'change:alarmMarkers', this.changeAlarmMarkers, this);

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

@@ -415,6 +415,19 @@ define([
                 this.filters = deepCopiedFilters;
             }
         },
+        getDisplayRange: function (xKey) {
+            const unsortedData = this.data;
+            this.data = [];
+            unsortedData.forEach(point => this.add(point, false));
+
+            const minValue = this.getXVal(this.data[0]);
+            const maxValue = this.getXVal(this.data[this.data.length-1]);
+
+            return {
+                min: minValue,
+                max: maxValue
+            };
+        },
         markerOptionsDisplayText: function () {
             const showMarkers = this.get('markers');
             if (!showMarkers) {

src/plugins/plot/src/configuration/XAxisModel.js

@@ -48,6 +48,7 @@ define([
                 this.set('range', this.get('range'));
             }
             this.listenTo(this, 'change:key', this.changeKey, this);
+            this.listenTo(this, 'resetSeries', this.resetSeries, this);
         },
         changeKey: function (newKey) {
             var series = this.plot.series.first();
@@ -62,8 +63,13 @@ define([
                 });
                 this.set('label', newKey);
             }
+
             this.plot.series.forEach(function (plotSeries) {
                 plotSeries.set('xKey', newKey);
+            });
+        },
+        resetSeries: function () {
+            this.plot.series.forEach(function (plotSeries) {
                 plotSeries.reset();
             });
         },

src/plugins/plot/src/plot/MCTPlotController.js

@@ -101,12 +101,32 @@ define([
         this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
         this.listenTo(this.$scope, 'plot:highlight:set', this.onPlotHighlightSet, this);
         this.listenTo(this.$scope, 'plot:reinitializeCanvas', this.initCanvas, this);
+        this.listenTo(this.config.xAxis, 'resetSeries', this.setUpXAxisOptions, this);
         this.listenTo(this.config.xAxis, 'change:displayRange', this.onXAxisChange, this);
         this.listenTo(this.config.yAxis, 'change:displayRange', this.onYAxisChange, this);
 
+        this.setUpXAxisOptions();
         this.setUpYAxisOptions();
     };
 
+    MCTPlotController.prototype.setUpXAxisOptions = function () {
+        const xAxisKey = this.config.xAxis.get('key');
+
+        if (this.$scope.series.length === 1) {
+            let metadata = this.$scope.series[0].metadata;
+
+            this.$scope.xKeyOptions = metadata
+                .valuesForHints(['domain'])
+                .map(function (o) {
+                    return {
+                        name: o.name,
+                        key: o.key
+                    };
+                });
+            this.$scope.selectedXKeyOption = this.getXKeyOption(xAxisKey);
+        }
+    };
+
     MCTPlotController.prototype.setUpYAxisOptions = function () {
         if (this.$scope.series.length === 1) {
             let metadata = this.$scope.series[0].metadata;
@@ -520,6 +540,22 @@ define([
         this.cursorGuide = !this.cursorGuide;
     };
 
+    MCTPlotController.prototype.getXKeyOption = function (key) {
+        return this.$scope.xKeyOptions.find(option => option.key === key);
+    };
+
+    MCTPlotController.prototype.isEnabledXKeyToggle = function () {
+        const isSinglePlot = this.$scope.xKeyOptions && this.$scope.xKeyOptions.length > 1 && this.$scope.series.length === 1;
+        const isFrozen = this.config.xAxis.get('frozen');
+        const inRealTimeMode = this.config.openmct.time.clock();
+
+        return isSinglePlot && !isFrozen && !inRealTimeMode;
+    };
+
+    MCTPlotController.prototype.toggleXKeyOption = function () {
+        this.config.xAxis.set('key', this.$scope.selectedXKeyOption.key);
+    };
+
     MCTPlotController.prototype.toggleYAxisLabel = function (label, options, series) {
         let yAxisObject = options.filter(o => o.name === label)[0];
 

src/plugins/plot/src/plot/MCTTicksController.js

@@ -122,6 +122,7 @@ define([
             this.tickUpdate = false;
             this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
             this.listenTo(this.axis, 'change:format', this.updateTicks, this);
+            this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
             this.listenTo(this.$scope, '$destroy', this.stopListening, this);
             this.updateTicks();
         }
@@ -133,12 +134,18 @@ define([
 
     /**
      * Determine whether ticks should be regenerated for a given range.
-     * Ticks are updated a) if they don't exist, b) if the existing ticks are
+     * Ticks are updated
-     * outside of given range, or c) if the range exceeds the size of the tick
+     * a) if they don't exist,
-     * range by more than one tick step.
+     * b) if existing ticks are outside of given range,
+     * c) if range exceeds size of tick range by more than one tick step,
+     * d) if forced to regenerate (ex. changing x-axis metadata).
+     *
      * @private
      */
-    MCTTicksController.prototype.shouldRegenerateTicks = function (range) {
+    MCTTicksController.prototype.shouldRegenerateTicks = function (range, forceRegeneration) {
+        if (forceRegeneration) {
+            return true;
+        }
         if (!this.tickRange || !this.$scope.ticks || !this.$scope.ticks.length) {
             return true;
         }
@@ -166,7 +173,11 @@ define([
         return ticks(range.min, range.max, number);
     };
 
-    MCTTicksController.prototype.updateTicks = function () {
+    MCTTicksController.prototype.updateTicksForceRegeneration = function () {
+        this.updateTicks(true);
+    }
+
+    MCTTicksController.prototype.updateTicks = function (forceRegeneration = false) {
         var range = this.axis.get('displayRange');
         if (!range) {
             delete this.$scope.min;
@@ -184,7 +195,7 @@ define([
         this.$scope.min = range.min;
         this.$scope.max = range.max;
         this.$scope.interval = Math.abs(range.min - range.max);
-        if (this.shouldRegenerateTicks(range)) {
+        if (this.shouldRegenerateTicks(range, forceRegeneration)) {
             var newTicks = this.getTicks();
             this.tickRange = {
                 min: Math.min.apply(Math, newTicks),
@@ -242,6 +253,7 @@ define([
             this.$scope.$emit('plot:tickWidth', tickWidth);
             this.shouldCheckWidth = false;
         }
+
         this.$scope.$digest();
         this.tickUpdate = false;
     };

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

@@ -130,6 +130,9 @@ define([
     };
 
     PlotController.prototype.addSeries = function (series) {
+        this.listenTo(series, 'change:xKey', function (xKey) {
+            this.setDisplayRange(series, xKey);
+        }, this);
         this.listenTo(series, 'change:yKey', function () {
             this.loadSeriesData(series);
         }, this);
@@ -141,6 +144,16 @@ define([
         this.loadSeriesData(series);
     };
 
+
+    PlotController.prototype.setDisplayRange = function (series, xKey) {
+        if (this.config.series.models.length !== 1) {
+            return;
+        }
+
+        const displayRange = series.getDisplayRange(xKey);
+        this.config.xAxis.set('range', displayRange);
+    };
+
     PlotController.prototype.removeSeries = function (plotSeries) {
         this.stopListening(plotSeries);
     };
@@ -162,6 +175,7 @@ define([
 
     PlotController.prototype.onTimeSystemChange = function (timeSystem) {
         this.config.xAxis.set('key', timeSystem.key);
+        this.config.xAxis.emit('resetSeries');
     };
 
     PlotController.prototype.destroy = function () {

src/plugins/telemetryTable/collections/FilteredTableRowCollection.js

@@ -46,11 +46,23 @@ define(
                 filter = filter.trim().toLowerCase();
 
                 let rowsToFilter = this.getRowsToFilter(columnKey, filter);
+
                 if (filter.length === 0) {
                     delete this.columnFilters[columnKey];
                 } else {
                     this.columnFilters[columnKey] = filter;
                 }
+
+                this.rows = rowsToFilter.filter(this.matchesFilters, this);
+                this.emit('filter');
+            }
+
+            setColumnRegexFilter(columnKey, filter) {
+                filter = filter.trim();
+
+                let rowsToFilter = this.masterCollection.getRows();
+
+                this.columnFilters[columnKey] = new RegExp(filter);
                 this.rows = rowsToFilter.filter(this.matchesFilters, this);
                 this.emit('filter');
             }
@@ -70,6 +82,10 @@ define(
              * @private
              */
             isSubsetOfCurrentFilter(columnKey, filter) {
+                if (this.columnFilters[columnKey] instanceof RegExp) {
+                    return false;
+                }
+
                 return this.columnFilters[columnKey] &&
                     filter.startsWith(this.columnFilters[columnKey]) &&
                     // startsWith check will otherwise fail when filter cleared
@@ -96,7 +112,11 @@ define(
                         return false;
                     }
 
-                    doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
+                    if (this.columnFilters[key] instanceof RegExp) {
+                        doesMatchFilters = this.columnFilters[key].test(formattedValue);
+                    } else {
+                        doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
+                    }
                 });
                 return doesMatchFilters;
             }

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

@@ -0,0 +1,56 @@
+<template>
+<tr class="c-telemetry-table__sizing-tr"><td>SIZING ROW</td></tr>
+</template>
+
+<script>
+export default {
+    props: {
+        isEditing: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        isEditing: function (isEditing) {
+            if (isEditing) {
+                this.pollForRowHeight();
+            } else {
+                this.clearPoll();
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick().then(() => {
+            this.height = this.$el.offsetHeight;
+            this.$emit('change-height', this.height);
+        });
+
+        if (this.isEditing) {
+            this.pollForRowHeight();
+        }
+    },
+    destroyed() {
+        this.clearPoll();
+    },
+    methods: {
+        pollForRowHeight() {
+            this.clearPoll();
+            this.pollID = window.setInterval(this.heightPoll, 300);
+        },
+        clearPoll() {
+            if (this.pollID) {
+                window.clearInterval(this.pollID);
+                this.pollID = undefined;
+            }
+        },
+        heightPoll() {
+            let height = this.$el.offsetHeight;
+
+            if (height !== this.height) {
+                this.$emit('change-height', height);
+                this.height = height;
+            }
+        }
+    }
+}
+</script>

src/plugins/telemetryTable/components/table.scss

@@ -9,6 +9,9 @@
 
 .c-telemetry-table {
     // Table that displays telemetry in a scrolling body area
+
+    @include fontAndSize();
+
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
@@ -112,7 +115,7 @@
             display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
             align-items: stretch;
             position: absolute;
-            height: 18px; // Needed when a row has empty values in its cells
+            min-height: 18px; // Needed when a row has empty values in its cells
 
             &.is-selected {
                 background-color: $colorSelectedBg !important;
@@ -150,6 +153,12 @@
             white-space: nowrap;
         }
     }
+
+    &__sizing-tr {
+        // A row element used to determine sizing of rows based on font size
+        visibility: hidden;
+        pointer-events: none;
+    }
 }
 
 /******************************* SPECIFIC CASE WRAPPERS */

src/plugins/telemetryTable/components/table.vue

@@ -125,7 +125,7 @@
     <!-- alternate controlbar end  -->
 
     <div
-        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
+        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar u-style-receiver js-style-receiver"
         :class="{
             'loading': loading,
             'is-paused' : paused
@@ -190,7 +190,17 @@
                                 class="c-table__search"
                                 @input="filterChanged(key)"
                                 @clear="clearFilter(key)"
-                            />
+                            >
+
+                                <button
+                                    class="c-search__use-regex"
+                                    :class="{ 'is-active': enableRegexSearch[key] }"
+                                    title="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
+                                    @click="toggleRegex(key)"
+                                >
+                                    /R/
+                                </button>
+                            </search>
                         </table-column-header>
                     </tr>
                 </thead>
@@ -234,6 +244,10 @@
             class="c-telemetry-table__sizing js-telemetry-table__sizing"
             :style="sizingTableWidth"
         >
+            <sizing-row
+                :is-editing="isEditing"
+                @change-height="setRowHeight"
+            />
             <tr>
                 <template v-for="(title, key) in headers">
                     <th
@@ -266,6 +280,7 @@ import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
+import SizingRow from './sizing-row.vue';
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@@ -278,7 +293,8 @@ export default {
         TableColumnHeader,
         search,
         TelemetryFilterIndicator,
-        ToggleSwitch
+        ToggleSwitch,
+        SizingRow
     },
     inject: ['table', 'openmct', 'objectPath'],
     props: {
@@ -341,7 +357,8 @@ export default {
             paused: false,
             markedRows: [],
             isShowingMarkedRowsOnly: false,
-            hideHeaders: configuration.hideHeaders
+            hideHeaders: configuration.hideHeaders,
+            enableRegexSearch: {}
         }
     },
     computed: {
@@ -493,7 +510,7 @@ export default {
             let columnWidths = {},
                 totalWidth = 0,
                 headerKeys = Object.keys(this.headers),
-                sizingTableRow = this.sizingTable.children[0],
+                sizingTableRow = this.sizingTable.children[1],
                 sizingCells = sizingTableRow.children;
 
             headerKeys.forEach((headerKey, headerIndex, array)=>{
@@ -550,6 +567,17 @@ export default {
         },
         filterChanged(columnKey) {
             this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
+
+            if (this.enableRegexSearch[columnKey]) {
+                if (this.isCompleteRegex(this.filters[columnKey])) {
+                    this.table.filteredRows.setColumnRegexFilter(columnKey, this.filters[columnKey].slice(1,-1));
+                } else {
+                    return;
+                }
+            } else {
+                this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
+            }
+
             this.setHeight();
         },
         clearFilter(columnKey) {
@@ -876,6 +904,23 @@ export default {
             this.isAutosizeEnabled = true;
 
             this.$nextTick().then(this.calculateColumnWidths);
+        },
+        setRowHeight(height) {
+            this.rowHeight = height;
+            this.setHeight();
+            this.calculateTableSize();
+            this.clearRowsAndRerender();
+        },
+        toggleRegex(key) {
+            this.$set(this.filters, key, '');
+            if (this.enableRegexSearch[key] === undefined) {
+                this.$set(this.enableRegexSearch, key, true)
+            } else {
+                this.$set(this.enableRegexSearch, key, !this.enableRegexSearch[key]);
+            }
+        },
+        isCompleteRegex(string) {
+            return (string.length > 2 && string[0] === '/' && string[string.length - 1] === '/')
         }
     }
 }

src/plugins/timeConductor/Conductor.vue

@@ -143,7 +143,7 @@
             <ConductorHistory
                 v-if="isFixed"
                 class="c-conductor__history-select"
-                :bounds="openmct.time.bounds()"
+                :bounds="bounds"
                 :time-system="timeSystem"
             />
         </div>
@@ -190,6 +190,10 @@ export default {
                 start: offsets && durationFormatter.format(Math.abs(offsets.start)),
                 end: offsets && durationFormatter.format(Math.abs(offsets.end))
             },
+            bounds: {
+                start: bounds.start,
+                end: bounds.end
+            },
             formattedBounds: {
                 start: timeFormatter.format(bounds.start),
                 end: timeFormatter.format(bounds.end)
@@ -210,7 +214,7 @@ export default {
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
         this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-        this.openmct.time.on('bounds', this.setViewFromBounds);
+        this.openmct.time.on('bounds', this.handleNewBounds);
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
         this.openmct.time.on('clockOffsets', this.setViewFromOffsets)
@@ -220,6 +224,13 @@ export default {
         document.removeEventListener('keyup', this.handleKeyUp);
     },
     methods: {
+        handleNewBounds(bounds) {
+            this.setBounds(bounds);
+            this.setViewFromBounds(bounds);
+        },
+        setBounds(bounds) {
+            this.bounds = bounds;
+        },
         handleKeyDown(event) {
             if (event.key === 'Alt') {
                 this.altPressed = true;
@@ -246,10 +257,13 @@ export default {
             this.formattedBounds.end = this.timeFormatter.format(bounds.end);
         },
         endZoom(bounds) {
-            const _bounds = bounds ? bounds : this.openmct.time.bounds();
             this.isZooming = false;
 
-            this.openmct.time.bounds(_bounds);
+            if (bounds) {
+                this.handleNewBounds(bounds);
+            } else {
+                this.setViewFromBounds(this.bounds);
+            }
         },
         setTimeSystem(timeSystem) {
             this.timeSystem = timeSystem

src/plugins/timeConductor/ConductorAxis.vue

@@ -207,7 +207,7 @@ export default {
             this.$emit('panAxis', panBounds);
         },
         endPan() {
-            const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+            const panBounds = this.isChangingViewBounds()
                 ? this.getPanBounds()
                 : undefined;
             this.$emit('endPan', panBounds);
@@ -251,16 +251,14 @@ export default {
             });
         },
         endZoom() {
-            const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+            let zoomBounds;
-                ? this.getZoomRange()
+            if (this.isChangingViewBounds()) {
-                : undefined;
+                const zoomRange = this.getZoomRange();
-
+                zoomBounds = {
-            const zoomBounds = zoomRange
-                ? {
                     start: this.scaleToBounds(zoomRange.start),
                     end: this.scaleToBounds(zoomRange.end)
-                }
+                };
-                : this.openmct.time.bounds();
+            }
 
             this.zoomStyle = {};
             this.$emit('endZoom', zoomBounds);
@@ -289,6 +287,9 @@ export default {
             const offset = valueDelta / this.width * timeDelta;
             return bounds.start + offset;
         },
+        isChangingViewBounds() {
+            return this.dragStartX && this.dragX && this.dragStartX !== this.dragX;
+        },
         resize() {
             if (this.$refs.axisHolder.clientWidth !== this.width) {
                 this.setAxisDimensions();

src/plugins/timeConductor/ConductorHistory.vue

@@ -84,7 +84,12 @@ export default {
     },
     data() {
         return {
-            history: {}, // contains arrays of timespans {start, end}, array key is time system key
+            /**
+             * previous bounds entries available for easy re-use
+             * @history array of timespans
+             * @timespans {start, end} number representing timestamp
+             */
+            history: this.getHistoryFromLocalStorage(),
             presets: []
         }
     },
@@ -111,22 +116,20 @@ export default {
                 this.addTimespan();
             },
             deep: true
-        },
-        history: {
-            handler() {
-                this.persistHistoryToLocalStorage();
-            },
-            deep: true
         }
     },
     mounted() {
-        this.getHistoryFromLocalStorage();
+        this.initializeHistoryIfNoHistory();
     },
     methods: {
         getHistoryFromLocalStorage() {
-            if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) {
+            const localStorageHistory = localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY);
-                this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY))
+            const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
-            } else {
+
+            return history;
+        },
+        initializeHistoryIfNoHistory() {
+            if (!this.history) {
                 this.history = {};
                 this.persistHistoryToLocalStorage();
             }
@@ -156,6 +159,8 @@ export default {
 
             currentHistory.unshift(timespan);
             this.history[key] = currentHistory;
+
+            this.persistHistoryToLocalStorage();
         },
         selectTimespan(timespan) {
             this.openmct.time.bounds(timespan);

src/styles/_constants.scss

@@ -102,6 +102,8 @@ $colorProgressBarHolder: rgba(black, 0.1);
 $colorProgressBar: #0085ad;
 $progressAnimW: 500px;
 $progressBarMinH: 6px;
+/************************** FONT STYLING */
+$listFontSizes: 8,9,10,11,12,13,14,16,18,20,24,28,32,36,42,48,72,96,128;
 
 /************************** GLYPH CHAR UNICODES */
 $glyph-icon-alert-rect: '\e900';

src/styles/_global.scss

@@ -96,6 +96,37 @@ body.desktop {
     }
 }
 
+/******************************************************** FONTS */
+@mixin fontAndSize() {
+    @each $size in $listFontSizes {
+        &[data-font-size="#{$size}"] {
+            font-size: #{$size}px;
+
+            // Set row heights in telemetry tables
+            tr {
+                min-height: #{$size + ($tabularTdPadTB * 2)};
+            }
+
+        }
+    }
+
+    &[data-font*="bold"] {
+        font-weight: bold;
+    }
+
+    &[data-font*="narrow"] {
+        font-family: 'Arial Narrow', sans-serif;
+    }
+
+    &[data-font*="monospace"] {
+        font-family: 'Andale Mono', sans-serif;
+    }
+}
+
+.u-style-receiver {
+    @include fontAndSize();
+}
+
 /******************************************************** HTML ENTITIES */
 a {
     color: $colorA;
@@ -226,7 +257,7 @@ body.desktop .has-local-controls {
 }
 
 /******************************************************** STATES */
-@mixin  spinner($b: 5px, $c: $colorKey) {
+@mixin  spinner($b: 5, $c: $colorKey) {
     animation-name: rotation-centered;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
@@ -276,13 +307,13 @@ body.desktop .has-local-controls {
     }
     &.c-tree__item {
         $d: $waitSpinnerTreeD;
-        $spinnerL: 19px + $d/2;
+        $spinnerL: 19 + $d/2;
 
         display: flex;
         align-items: center;
         padding-left: $spinnerL + $d/2 + $interiorMargin;
         background: $colorLoadingBg;
-        min-height: 5px + $d;
+        min-height: 5 + $d;
 
         .c-tree__item__label {
             font-style: italic;
@@ -291,7 +322,7 @@ body.desktop .has-local-controls {
         &:before {
             height: $d;
             width: $d;
-            border-width: 4px;
+            border-width: 4;
             left: $spinnerL;
         }
         &:after {

src/styles/_legacy-plots.scss

@@ -27,7 +27,7 @@ mct-plot {
 /*********************** STACKED PLOT LAYOUT */
 .is-editing {
     .gl-plot.child-frame {
-        &:hover {
+        @include hover {
             background: rgba($editUIColorBg, 0.1);
             box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
         }
@@ -52,6 +52,7 @@ mct-plot {
         .c-control-bar {
             display: none;
         }
+        .gl-plot-x-label__select,
         .gl-plot-y-label__select {
             display: none;
         }
@@ -172,6 +173,14 @@ mct-plot {
                 }
             }
         }
+
+        &.gl-plot-x {
+            @include hover {
+                .gl-plot-x-label__select {
+                    display: block;
+                }
+            }
+        }
     }
 
     .gl-plot-coords {
@@ -217,11 +226,19 @@ mct-plot {
         }
     }
 
+    .gl-plot-x-label__select {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+        z-index: 10;
+    }
+
     .gl-plot-y-label__select {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: 20px;
+        left: 0;
         z-index: 10;
     }
 

src/styles/_legacy.scss

@@ -52,6 +52,7 @@
     $ctrlW: 22px;
 
     &__controls {
+        font-size: 1rem !important;
         margin-right: 0;
         min-width: 0;
         overflow: hidden;
@@ -62,7 +63,7 @@
     }
 
     &__direction {
-        font-size: 0.9em;
+        font-size: 0.9rem !important;
         margin-right: $interiorMargin;
     }
 

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

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1593102875898
+    "created": 1596146160781
   },
   "iconSets": [
     {
@@ -752,7 +752,7 @@
           "tempChar": ""
         },
         {
-          "order": 114,
+          "order": 189,
           "id": 4,
           "name": "icon-font-size",
           "prevSize": 24,
@@ -2686,17 +2686,26 @@
         {
           "id": 4,
           "paths": [
-            "M842.841 380.048h-120.956l-52.382 139.676 52.918 141.12 59.942-159.84 62.361 166.314h-119.884l34.019 90.717h119.884l39.695 105.836h105.836l-181.434-483.823z",
+            "M1148 416h-152l-65.82 175.54 66.5 177.32 75.32-200.86 78.38 209h-150.66l42.76 114h150.64l49.88 133h133l-228-608z",
-            "M263.903 160.129l-263.903 703.742h153.944l57.729-153.944h280.397l57.729 153.944h153.944l-263.903-703.742zM261.154 577.976l90.717-241.911 90.717 241.911z"
+            "M384 0l-384 1024h224l84-224h408l84 224h224l-384-1024zM380 608l132-352 132 352z"
+          ],
+          "attrs": [
+            {},
+            {}
           ],
-          "attrs": [],
           "grid": 16,
           "tags": [
             "icon-font-size-alt1"
           ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": []
+            "12552552551": [
-          }
+              {},
+              {}
+            ]
+          },
+          "width": 1376
         },
         {
           "id": 141,

src/styles/fonts/Open-MCT-Symbols-16px.svg

@@ -100,7 +100,7 @@
 <glyph unicode="&#xea2c;" glyph-name="icon-frame-hide" d="M128 642h420l104 128h-652v-802.4l128 157.4zM896 2h-420l-104-128h652v802.4l-128-157.4zM832 834l-832-1024h192l832 1024zM392 450l104 128h-304v-128z" />
 <glyph unicode="&#xea2d;" glyph-name="icon-import" d="M832 639.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 128v-192l384 384-384 384v-192h-192v-384z" />
 <glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 0.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 320l-384 384v-192h-192v-384h192v-192l384 384z" />
-<glyph unicode="&#xea2f;" glyph-name="icon-font-size" d="M842.841 451.952h-120.956l-52.382-139.676 52.918-141.12 59.942 159.84 62.361-166.314h-119.884l34.019-90.717h119.884l39.695-105.836h105.836l-181.434 483.823zM263.903 671.871l-263.903-703.742h153.944l57.729 153.944h280.397l57.729-153.944h153.944l-263.903 703.742zM261.154 254.024l90.717 241.911 90.717-241.911z" />
+<glyph unicode="&#xea2f;" glyph-name="icon-font-size" horiz-adv-x="1376" d="M1148 416h-152l-65.82-175.54 66.5-177.32 75.32 200.86 78.38-209h-150.66l42.76-114h150.64l49.88-133h133l-228 608zM384 832l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 224l132 352 132-352z" />
 <glyph unicode="&#xea30;" glyph-name="icon-clear-data" d="M632 520l-120-120-120 120-80-80 120-120-120-120 80-80 120 120 120-120 80 80-120 120 120 120-80 80zM512 832c-282.76 0-512-86-512-192v-640c0-106 229.24-192 512-192s512 86 512 192v640c0 106-229.24 192-512 192zM512 0c-176.731 0-320 143.269-320 320s143.269 320 320 320c176.731 0 320-143.269 320-320v0c0-176.731-143.269-320-320-320v0z" />
 <glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 768c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 560c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
 <glyph unicode="&#xea32;" glyph-name="icon-arrow-up-to-parent" horiz-adv-x="1056" d="M643.427 6.739c-81.955 0.697-148.179 67.065-148.642 149.010v395.872l296.871-247.393v197.914l-395.828 329.857-395.828-328.62v-197.502l296.871 246.156v-396.241c0-190.905 155.239-346.556 346.144-346.968l412.321-0.825 0.412 197.914z" />

src/ui/components/ObjectFrame.vue

@@ -66,6 +66,8 @@
         :object="domainObject"
         :show-edit-view="showEditView"
         :object-path="objectPath"
+        :font-size="fontSize"
+        :font="font"
     />
 </div>
 </template>
@@ -103,6 +105,14 @@ export default {
         showEditView: {
             type: Boolean,
             default: true
+        },
+        fontSize: {
+            type: String,
+            default: ''
+        },
+        font: {
+            type: String,
+            default: ''
         }
     },
     data() {

src/ui/components/ObjectView.vue

@@ -20,12 +20,30 @@ export default {
             default: () => {
                 return [];
             }
+        },
+        fontSize: {
+            type: String,
+            default: ''
+        },
+        font: {
+            type: String,
+            default: ''
         }
     },
     watch: {
         object(newObject, oldObject) {
             this.currentObject = newObject;
             this.debounceUpdateView();
+        },
+        fontSize(newSize, oldSize) {
+            if (newSize !== oldSize) {
+                this.setFontSize(newSize);
+            }
+        },
+        font(newFont, oldFont) {
+            if (newFont !== oldFont) {
+                this.setFont(newFont);
+            }
         }
     },
     destroyed() {
@@ -63,8 +81,9 @@ export default {
         if (this.currentObject) {
             //This is to apply styles to subobjects in a layout
             this.initObjectStyles();
+            this.setFontSize(this.fontSize);
+            this.setFont(this.font);
         }
-
     },
     methods: {
         clear() {
@@ -91,6 +110,15 @@ export default {
 
             this.openmct.objectViews.off('clearData', this.clearData);
         },
+        getStyleReceiver() {
+            let styleReceiver = this.$el.querySelector('.js-style-receiver');
+
+            if (!styleReceiver) {
+                styleReceiver = this.$el.querySelector(':first-child');
+            }
+
+            return styleReceiver;
+        },
         invokeEditModeHandler(editMode) {
             let edit;
 
@@ -111,20 +139,20 @@ export default {
                 return;
             }
             let keys = Object.keys(styleObj);
+            let elemToStyle = this.getStyleReceiver();
             keys.forEach(key => {
-                let firstChild = this.$el.querySelector(':first-child');
+                if (elemToStyle) {
-                if (firstChild) {
                     if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
-                        if (firstChild.style[key]) {
+                        if (elemToStyle.style[key]) {
-                            firstChild.style[key] = '';
+                            elemToStyle.style[key] = '';
                         }
                     } else {
-                        if (!styleObj.isStyleInvisible && firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
+                        if (!styleObj.isStyleInvisible && elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
-                            firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+                            elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
-                        } else if (styleObj.isStyleInvisible && !firstChild.classList.contains(styleObj.isStyleInvisible)) {
+                        } else if (styleObj.isStyleInvisible && !elemToStyle.classList.contains(styleObj.isStyleInvisible)) {
-                            firstChild.classList.add(styleObj.isStyleInvisible);
+                            elemToStyle.classList.add(styleObj.isStyleInvisible);
                         }
-                        firstChild.style[key] = styleObj[key];
+                        elemToStyle.style[key] = styleObj[key];
                     }
                 }
             });
@@ -305,6 +333,14 @@ export default {
                 parentObject = objectPath[1];
 
             return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
+        },
+        setFontSize(newSize) {
+            let elemToStyle = this.getStyleReceiver();
+            elemToStyle.dataset.fontSize = newSize;
+        },
+        setFont(newFont) {
+            let elemToStyle = this.getStyleReceiver();
+            elemToStyle.dataset.font = newFont;
         }
     }
 }

src/ui/components/search.scss

@@ -1,3 +1,9 @@
+@mixin visibleRegexButton {
+    opacity: 1;
+    padding: 1px 3px;
+    width: 24px;
+}
+
 .c-search {
     @include wrappedInput();
 
@@ -9,8 +15,39 @@
         content: $glyph-icon-magnify;
     }
 
+    &__use-regex {
+        // Button
+        $c: $colorBodyFg;
+        background: rgba($c, 0.2);
+        border: 1px solid rgba($c, 0.3);
+        color: $c;
+        border-radius: $controlCr;
+        font-weight: bold;
+        letter-spacing: 1px;
+        font-size: 0.8em;
+        margin-left: $interiorMarginSm;
+        min-width: 0;
+        opacity: 0;
+        order: 2;
+        overflow: hidden;
+        padding: 1px 0;
+        transform-origin: left;
+        transition: $transOut;
+        width: 0;
+
+        &.is-active {
+            $c: $colorBtnActiveBg;
+            @include visibleRegexButton();
+            background: rgba($c, 0.3);
+            border-color: $c;
+            color: $c;
+        }
+    }
+
     &__clear-input {
         display: none;
+        order: 99;
+        padding: 1px 0;
     }
 
     &.is-active {
@@ -21,6 +58,15 @@
 
     input[type='text'],
     input[type='search'] {
+        margin-left: $interiorMargin;
+        order: 3;
         text-align: left;
     }
+
+    &:hover {
+        .c-search__use-regex {
+            @include visibleRegexButton();
+            transition: $transIn;
+        }
+    }
 }

src/ui/components/search.vue

@@ -15,6 +15,7 @@
         class="c-search__clear-input icon-x-in-circle"
         @click="clearInput"
     ></a>
+    <slot></slot>
 </div>
 </template>
 

src/ui/inspector/ObjectName.vue

@@ -2,7 +2,7 @@
 <div class="c-inspector__header">
     <div v-if="!multiSelect"
          class="c-inspector__selected c-object-label"
-         :class="{'is-missing': domainObject.status === 'missing' }"
+         :class="{'is-missing': domainObject && domainObject.status === 'missing' }"
     >
         <div class="c-object-label__type-icon"
              :class="typeCssClass"

src/ui/preview/preview-header.vue

@@ -10,7 +10,6 @@
             <span class="l-browse-bar__object-name c-object-label__name">
                 {{ domainObject.name }}
             </span>
-            <context-menu-drop-down :object-path="objectPath" />
         </div>
     </div>
     <div class="l-browse-bar__end">
@@ -21,12 +20,6 @@
                 :current-view="currentView"
                 @setView="setView"
             />
-            <NotebookMenuSwitcher v-if="showNotebookMenuSwitcher"
-                                  :domain-object="domainObject"
-                                  :ignore-link="true"
-                                  :object-path="objectPath"
-                                  class="c-notebook-snapshot-menubutton"
-            />
         </div>
     </div>
 </div>
@@ -34,18 +27,13 @@
 
 
 <script>
-import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
-import NotebookMenuSwitcher from '@/plugins/notebook/components/notebook-menu-switcher.vue';
 import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
 
 export default {
     inject: [
-        'openmct',
+        'openmct'
-        'objectPath'
     ],
     components: {
-        ContextMenuDropDown,
-        NotebookMenuSwitcher,
         ViewSwitcher
     },
     props: {
@@ -67,12 +55,6 @@ export default {
                 return false;
             }
         },
-        showNotebookMenuSwitcher: {
-            type: Boolean,
-            default: () => {
-                return false;
-            }
-        },
         views: {
             type: Array,
             default: () => {

src/ui/toolbar/components/toolbar-select-menu.vue

@@ -50,7 +50,7 @@ export default {
                 return selectedOption.name || selectedOption.value
             }
             // If no selected option, then options are non-specific
-            return '??px';
+            return '??';
         },
         nonSpecific() {
             return this.options.nonSpecific === true;