extend traces on subscribe

* Don't allow recursive Preview actions #2775

* actionsToBeIncluded and actionsToBeSkipped passed in as options object.

* Revert "actionsToBeIncluded and actionsToBeSkipped passed in as options object."

This reverts commit f501d0b4ba.

* Revert "Don't allow recursive Preview actions #2775"

This reverts commit 5563cbea3a.

* Don't allow recursive Preview actions

Co-authored-by: Andrew Henry <akhenry@gmail.com>

.circleci/config.yml

@@ -20,8 +20,8 @@ jobs:
             paths:
               - node_modules
         - run:
-            name: npm run test
-            command: npm run test
+            name: npm run test:coverage
+            command: npm run test:coverage
         - run:
             name: npm run lint
             command: npm run lint

.eslintrc.js

@@ -8,12 +8,9 @@ module.exports = {
     "globals": {
         "_": "readonly"
     },
-    "plugins": ["lodash"],
     "extends": [
         "eslint:recommended",
-        "plugin:vue/recommended",
-        "plugin:lodash/recommended",
-        "plugin:you-dont-need-lodash-underscore/compatible"
+        "plugin:vue/recommended"
     ],
     "parser": "vue-eslint-parser",
     "parserOptions": {
@@ -25,17 +22,6 @@ module.exports = {
         }
     },
     "rules": {
-        "you-dont-need-lodash-underscore/omit": "off",
-        "lodash/prefer-lodash-method": "off",
-        "lodash/prefer-lodash-typecheck": "off",
-        "lodash/prefer-constant": "off",
-        "lodash/prefer-noop": "off",
-        "lodash/prefer-matches": "off",
-        "lodash/prefer-includes": "off",
-        "lodash/prefer-startswith": "off",
-        "lodash/prefer-get": "off",
-        "lodash/prefer-is-nil": "off",
-        "lodash/import-scope": "off",
         "no-bitwise": "error",
         "curly": "error",
         "eqeqeq": "error",

karma.conf.js

@@ -24,16 +24,27 @@
 
 const devMode = process.env.NODE_ENV !== 'production';
 const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
+const coverageEnabled = process.env.COVERAGE === 'true';
+const reporters = ['progress', 'html'];
+
+if (coverageEnabled) {
+    reporters.push('coverage-istanbul');
+}
 
 module.exports = (config) => {
     const webpackConfig = require('./webpack.config.js');
     delete webpackConfig.output;
 
-    if (!devMode) {
+    if (!devMode || coverageEnabled) {
         webpackConfig.module.rules.push({
             test: /\.js$/,
-            exclude: /node_modules|example/,
-            use: 'istanbul-instrumenter-loader'
+            exclude: /node_modules|example|lib|dist/,
+            use: {
+                loader: 'istanbul-instrumenter-loader',
+                options: {
+                    esModules: true
+                }
+            }
         });
     }
 
@@ -45,11 +56,7 @@ module.exports = (config) => {
             'src/**/*Spec.js'
         ],
         port: 9876,
-        reporters: [
-            'progress',
-            'coverage',
-            'html'
-        ],
+        reporters: reporters,
         browsers: browsers,
         customLaunchers: {
             ChromeDebugging: {
@@ -61,25 +68,25 @@ module.exports = (config) => {
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: true,
-        coverageReporter: {
-            dir: process.env.CIRCLE_ARTIFACTS ?
-                process.env.CIRCLE_ARTIFACTS + '/coverage' :
-                "dist/reports/coverage",
-            check: {
-                global: {
-                    lines: 80,
-                    excludes: ['src/plugins/plot/**/*.js']
-                }
-            }
-        },
         // HTML test reporting.
         htmlReporter: {
             outputDir: "dist/reports/tests",
             preserveDescribeNesting: true,
             foldAll: false
         },
+        coverageIstanbulReporter: {
+            fixWebpackSourcePaths: true,
+            dir: process.env.CIRCLE_ARTIFACTS ?
+                process.env.CIRCLE_ARTIFACTS + '/coverage' :
+                "dist/reports/coverage",
+            reports: ['html', 'lcovonly', 'text-summary'],
+            thresholds: {
+                global: {
+                    lines: 62
+                }
+            }
+        },
         preprocessors: {
-            // add webpack as preprocessor
             'platform/**/*Spec.js': ['webpack', 'sourcemap'],
             'src/**/*Spec.js': ['webpack', 'sourcemap']
         },

package.json

@@ -2,7 +2,9 @@
   "name": "openmct",
   "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
-  "dependencies": {},
+  "dependencies": {
+    "plotly.js-dist": "^1.54.1"
+  },
   "devDependencies": {
     "angular": "1.7.9",
     "angular-route": "1.4.14",
@@ -23,9 +25,7 @@
     "d3-time": "1.0.x",
     "d3-time-format": "2.1.x",
     "eslint": "5.2.0",
-    "eslint-plugin-lodash": "^6.0.0",
     "eslint-plugin-vue": "^6.0.0",
-    "eslint-plugin-you-dont-need-lodash-underscore": "^6.10.0",
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
@@ -44,17 +44,18 @@
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.2",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-html-reporter": "^0.2.7",
     "karma-jasmine": "^1.1.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
     "location-bar": "^3.0.1",
-    "lodash": "^4.17.12",
+    "lodash": "^3.10.1",
     "markdown-toc": "^0.11.7",
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.11.1",
+    "moment": "^2.25.3",
     "moment-duration-format": "^2.2.2",
     "moment-timezone": "^0.5.21",
     "node-bourbon": "^4.2.3",
@@ -77,14 +78,16 @@
     "zepto": "^1.2.0"
   },
   "scripts": {
+    "clean": "rm -rf ./dist",
     "start": "node app.js",
-    "lint": "eslint platform example src/**/*.{js,vue} openmct.js",
-    "lint:fix": "eslint platform example src/**/*.{js,vue} openmct.js --fix",
+    "lint": "eslint platform example src --ext .js,.vue openmct.js",
+    "lint:fix": "eslint platform example src --ext .js,.vue openmct.js --fix",
     "build:prod": "cross-env NODE_ENV=production webpack",
     "build:dev": "webpack",
     "build:watch": "webpack --watch",
     "test": "karma start --single-run",
-    "test-debug": "cross-env NODE_ENV=debug karma start --no-single-run",
+    "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
+    "test:coverage": "./scripts/test-coverage.sh",
     "test:watch": "karma start --no-single-run",
     "verify": "concurrently 'npm:test' 'npm:lint'",
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",

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

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function (_) {
+define(['lodash'], function (_) {
 
     /**
      * The ExportAsJSONAction is available from context menus and allows a user
@@ -121,8 +121,8 @@ define([], function (_) {
      */
     ExportAsJSONAction.prototype.rewriteLink = function (child, parent) {
         this.externalIdentifiers.push(this.getId(child));
-        var index = parent.composition.findIndex(function (id) {
-            return JSON.stringify(child.identifier) === JSON.stringify(id);
+        var index = _.findIndex(parent.composition, function (id) {
+            return _.isEqual(child.identifier, id);
         });
         var copyOfChild = this.copyObject(child);
         copyOfChild.identifier.key = this.identifierService.generate();

platform/search/src/services/GenericSearchProvider.js

@@ -25,7 +25,8 @@
  * Module defining GenericSearchProvider. Created by shale on 07/16/2015.
  */
 define([
-    '../../../../src/api/objects/object-utils'
+    '../../../../src/api/objects/object-utils',
+    'lodash'
 ], function (
     objectUtils,
     _
@@ -190,7 +191,9 @@ define([
         }
 
         var domainObject = objectUtils.toNewFormat(model, id);
-        var composition = this.openmct.composition.registry.find(p => p.appliesTo(domainObject));
+        var composition = _.find(this.openmct.composition.registry, function (p) {
+            return p.appliesTo(domainObject);
+        });
 
         if (!composition) {
             return;

platform/telemetry/src/TelemetryCapability.js

@@ -25,7 +25,8 @@
  */
 define(
     [
-        '../../../src/api/objects/object-utils'
+        '../../../src/api/objects/object-utils',
+        'lodash'
     ],
     function (
         objectUtils,
@@ -234,8 +235,7 @@ define(
             var defaultRange = metadata.valuesForHints(['range'])[0];
             defaultRange = defaultRange ? defaultRange.key : undefined;
 
-            const keyBy = (array, k) => (array || []).reduce((r, x) => ({ ...r, [k ? x[k] : x]: x }), {});
-            var sourceMap = keyBy(metadata.values(), 'key');
+            var sourceMap = _.indexBy(metadata.values(), 'key');
 
             var isLegacyProvider = telemetryAPI.findRequestProvider(domainObject) ===
                 telemetryAPI.legacyProvider;
@@ -300,8 +300,7 @@ define(
             var defaultRange = metadata.valuesForHints(['range'])[0];
             defaultRange = defaultRange ? defaultRange.key : undefined;
 
-            const keyBy = (array, k) => (array || []).reduce((r, x) => ({ ...r, [k ? x[k] : x]: x }), {});
-            var sourceMap = keyBy(metadata.values(), 'key');
+            var sourceMap = _.indexBy(metadata.values(), 'key');
 
             var isLegacyProvider = telemetryAPI.findSubscriptionProvider(domainObject) ===
                 telemetryAPI.legacyProvider;

scripts/test-coverage.sh

@@ -0,0 +1,2 @@
+export NODE_OPTIONS=--max_old_space_size=4096
+cross-env COVERAGE=true karma start --single-run

src/MCT.js

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

src/api/composition/DefaultCompositionProvider.js

@@ -196,8 +196,8 @@ define([
      * @private
      */
     DefaultCompositionProvider.prototype.includes = function (parent, childId) {
-        return parent.composition.some(composee =>
-            this.publicAPI.objects.areIdsEqual(composee, childId));
+        return parent.composition.findIndex(composee =>
+            this.publicAPI.objects.areIdsEqual(composee, childId)) !== -1;
     };
 
     DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {

src/api/telemetry/DefaultMetadataProvider.js

@@ -85,9 +85,9 @@ define([
                             value: +e.value
                         };
                     }), 'e.value');
-                valueMetadata.values = Object.entries(valueMetadata.enumerations).reduce((a, [key, {value}]) => {a [key] = value; return a}, []);
-                valueMetadata.max = Math.max(...valueMetadata.values);
-                valueMetadata.min = Math.min(...valueMetadata.values);
+                valueMetadata.values = _.pluck(valueMetadata.enumerations, 'value');
+                valueMetadata.max = _.max(valueMetadata.values);
+                valueMetadata.min = _.min(valueMetadata.values);
             }
 
             valueMetadatas.push(valueMetadata);

src/api/telemetry/TelemetryAPI.js

@@ -370,7 +370,7 @@ define([
     TelemetryAPI.prototype.commonValuesForHints = function (metadatas, hints) {
         var options = metadatas.map(function (metadata) {
             var values = metadata.valuesForHints(hints);
-            return _.keyBy(values, 'key');
+            return _.indexBy(values, 'key');
         }).reduce(function (a, b) {
             var results = {};
             Object.keys(a).forEach(function (key) {
@@ -383,7 +383,7 @@ define([
         var sortKeys = hints.map(function (h) {
             return 'hints.' + h;
         });
-        return _.sortBy(options, sortKeys);
+        return _.sortByAll(options, sortKeys);
     };
 
     /**

src/api/telemetry/TelemetryMetadataManager.js

@@ -57,13 +57,13 @@ define([
 
         if (valueMetadata.format === 'enum') {
             if (!valueMetadata.values) {
-                valueMetadata.values = Object.entries(valueMetadata.enumerations).reduce((a, [key, {value}]) => {a [key] = value; return a}, []);
+                valueMetadata.values = _.pluck(valueMetadata.enumerations, 'value');
             }
             if (!valueMetadata.hasOwnProperty('max')) {
-                valueMetadata.max = Math.max(...valueMetadata.values) + 1;
+                valueMetadata.max = _.max(valueMetadata.values) + 1;
             }
             if (!valueMetadata.hasOwnProperty('min')) {
-                valueMetadata.min = Math.min(...valueMetadata.values) - 1;
+                valueMetadata.min = _.min(valueMetadata.values) - 1;
             }
         }
 
@@ -121,7 +121,7 @@ define([
                 return metadata.hints[hint];
             }
         });
-        return _.sortBy(matchingMetadata, ...iteratees);
+        return _.sortByAll(matchingMetadata, ...iteratees);
     };
 
     TelemetryMetadataManager.prototype.getFilterableValues = function () {

src/plugins/LADTable/components/LADTable.vue

@@ -75,7 +75,7 @@ export default {
             this.items.push(item);
         },
         removeItem(identifier) {
-            let index = this.items.findIndex(item => this.openmct.objects.makeKeyString(identifier) === item.key);
+            let index = _.findIndex(this.items, (item) => this.openmct.objects.makeKeyString(identifier) === item.key);
 
             this.items.splice(index, 1);
         },

src/plugins/LADTable/components/LadTableSet.vue

@@ -102,7 +102,7 @@ export default {
             this.compositions.push({composition, addCallback, removeCallback});
         },
         removePrimary(identifier) {
-            let index = this.primaryTelemetryObjects.findIndex(primary => this.openmct.objects.makeKeyString(identifier) === primary.key),
+            let index = _.findIndex(this.primaryTelemetryObjects, (primary) => this.openmct.objects.makeKeyString(identifier) === primary.key),
                 primary = this.primaryTelemetryObjects[index];
 
             this.$set(this.secondaryTelemetryObjects, primary.key, undefined);
@@ -130,7 +130,7 @@ export default {
         removeSecondary(primary) {
             return (identifier) => {
                 let array = this.secondaryTelemetryObjects[primary.key],
-                    index = array.findIndex(secondary => this.openmct.objects.makeKeyString(identifier) === secondary.key);
+                    index = _.findIndex(array, (secondary) => this.openmct.objects.makeKeyString(identifier) === secondary.key);
 
                 array.splice(index, 1);
 

src/plugins/condition/Condition.js

@@ -69,7 +69,6 @@ export default class ConditionClass extends EventEmitter {
             console.log('no data received');
             return;
         }
-
         this.criteria.forEach(criterion => {
             if (this.isAnyOrAllTelemetry(criterion)) {
                 criterion.getResult(datum, this.conditionManager.telemetryObjects);
@@ -204,7 +203,7 @@ export default class ConditionClass extends EventEmitter {
         let latestTimestamp;
         let criteriaResults = {};
         const criteriaRequests = this.criteria
-            .map(criterion => criterion.requestLAD({telemetryObjects: this.conditionManager.telemetryObjects}));
+            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects));
 
         return Promise.all(criteriaRequests)
             .then(results => {

src/plugins/condition/ConditionManager.js

@@ -55,8 +55,9 @@ export default class ConditionManager extends EventEmitter {
         this.telemetryObjects[id] = Object.assign({}, endpoint, {telemetryMetaData: this.openmct.telemetry.getMetadata(endpoint).valueMetadatas});
         this.subscriptions[id] = this.openmct.telemetry.subscribe(
             endpoint,
-            this.telemetryReceived.bind(this, id)
+            this.telemetryReceived.bind(this, endpoint)
         );
+        // TODO check if this is needed
         this.updateConditionTelemetry();
     }
 
@@ -258,9 +259,13 @@ export default class ConditionManager extends EventEmitter {
                             this.openmct.time.timeSystem()
                         );
                     });
-                    const currentCondition = this.getCurrentConditionLAD(conditionResults);
 
-                    return Object.assign(
+                    if (!Object.values(latestTimestamp).some(timeSystem => timeSystem)) {
+                        return [];
+                    }
+
+                    const currentCondition = this.getCurrentConditionLAD(conditionResults);
+                    const currentOutput = Object.assign(
                         {
                             output: currentCondition.configuration.output,
                             id: this.conditionSetDomainObject.identifier,
@@ -268,11 +273,15 @@ export default class ConditionManager extends EventEmitter {
                         },
                         latestTimestamp
                     );
+
+                    return [currentOutput];
                 });
         });
     }
 
-    isTelemetryUsed(id) {
+    isTelemetryUsed(endpoint) {
+        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+
         for(const condition of this.conditionClassCollection) {
             if (condition.isTelemetryUsed(id)) {
                 return true;
@@ -282,12 +291,12 @@ export default class ConditionManager extends EventEmitter {
         return false;
     }
 
-    telemetryReceived(id, datum) {
-        if (!this.isTelemetryUsed(id)) {
+    telemetryReceived(endpoint, datum) {
+        if (!this.isTelemetryUsed(endpoint)) {
             return;
         }
 
-        const normalizedDatum = this.createNormalizedDatum(datum, id);
+        const normalizedDatum = this.createNormalizedDatum(datum, endpoint);
         const timeSystemKey = this.openmct.time.timeSystem().key;
         let timestamp = {};
         timestamp[timeSystemKey] = normalizedDatum[timeSystemKey];
@@ -321,8 +330,11 @@ export default class ConditionManager extends EventEmitter {
         return data;
     }
 
-    createNormalizedDatum(telemetryDatum, id) {
-        const normalizedDatum = Object.values(this.telemetryObjects[id].telemetryMetaData).reduce((datum, metadatum) => {
+    createNormalizedDatum(telemetryDatum, endpoint) {
+        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+        const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
+
+        const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
             const testValue = this.getTestData(metadatum);
             const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
             datum[metadatum.key] = testValue !== undefined ?  formatter.parse(testValue) : formatter.parse(telemetryDatum[metadatum.source]);

src/plugins/condition/ConditionSetMetadataProvider.js

@@ -54,13 +54,22 @@ export default class ConditionSetMetadataProvider {
         return {
             values: this.getDomains().concat([
                 {
-                    name: 'Output',
-                    key: 'output',
-                    format: 'enum',
+                    key: "state",
+                    source: "output",
+                    name: "State",
+                    format: "enum",
                     enumerations: enumerations,
                     hints: {
                         range: 1
                     }
+                },
+                {
+                    key: "output",
+                    name: "Value",
+                    format: "string",
+                    hints: {
+                        range: 2
+                    }
                 }
             ])
         };

src/plugins/condition/ConditionSetTelemetryProvider.js

@@ -45,7 +45,7 @@ export default class ConditionSetTelemetryProvider {
 
         return conditionManager.requestLADConditionSetOutput()
             .then(latestOutput => {
-                return latestOutput ? [latestOutput] : [];
+                return latestOutput;
             });
     }
 

src/plugins/condition/StyleRuleManager.js

@@ -23,10 +23,13 @@
 import EventEmitter from 'EventEmitter';
 
 export default class StyleRuleManager extends EventEmitter {
-    constructor(styleConfiguration, openmct, callback) {
+    constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {
         super();
         this.openmct = openmct;
         this.callback = callback;
+        if (suppressSubscriptionOnEdit) {
+            this.openmct.editor.on('isEditing', this.toggleSubscription.bind(this));
+        }
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
@@ -37,9 +40,25 @@ export default class StyleRuleManager extends EventEmitter {
         }
     }
 
+    toggleSubscription(isEditing) {
+        this.isEditing = isEditing;
+        if (this.isEditing) {
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
+            if (this.conditionSetIdentifier) {
+                this.applySelectedConditionStyle();
+            }
+        } else if (this.conditionSetIdentifier) {
+            this.subscribeToConditionSet();
+        }
+    }
+
     initialize(styleConfiguration) {
         this.conditionSetIdentifier = styleConfiguration.conditionSetIdentifier;
         this.staticStyle = styleConfiguration.staticStyle;
+        this.selectedConditionId = styleConfiguration.selectedConditionId;
+        this.defaultConditionId = styleConfiguration.defaultConditionId;
         this.updateConditionStylesMap(styleConfiguration.styles || []);
     }
 
@@ -54,7 +73,7 @@ export default class StyleRuleManager extends EventEmitter {
                         this.handleConditionSetResultUpdated(output[0]);
                     }
                 });
-            this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, output => this.handleConditionSetResultUpdated(output));
+            this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
         });
     }
 
@@ -66,12 +85,16 @@ export default class StyleRuleManager extends EventEmitter {
             let isNewConditionSet = !this.conditionSetIdentifier ||
                                     !this.openmct.objects.areIdsEqual(this.conditionSetIdentifier, styleConfiguration.conditionSetIdentifier);
             this.initialize(styleConfiguration);
+            if (this.isEditing) {
+                this.applySelectedConditionStyle();
+            } else {
                 //Only resubscribe if the conditionSet has changed.
                 if (isNewConditionSet) {
                     this.subscribeToConditionSet();
                 }
             }
         }
+    }
 
     updateConditionStylesMap(conditionStyles) {
         let conditionStyleMap = {};
@@ -103,6 +126,16 @@ export default class StyleRuleManager extends EventEmitter {
         }
     }
 
+    applySelectedConditionStyle() {
+        const conditionId = this.selectedConditionId || this.defaultConditionId;
+        if (!conditionId) {
+            this.applyStaticStyle();
+        } else if (this.conditionalStyleMap[conditionId]) {
+            this.currentStyle = this.conditionalStyleMap[conditionId];
+            this.updateDomainObjectStyle();
+        }
+    }
+
     applyStaticStyle() {
         if (this.staticStyle) {
             this.currentStyle = this.staticStyle.style;
@@ -123,6 +156,8 @@ export default class StyleRuleManager extends EventEmitter {
         }
         delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
+        this.isEditing = undefined;
+        this.callback = undefined;
     }
 
 }

src/plugins/condition/components/ConditionCollection.vue

@@ -197,7 +197,7 @@ export default {
             this.$emit('telemetryUpdated', this.telemetryObjs);
         },
         removeTelemetryObject(identifier) {
-            let index = this.telemetryObjs.findIndex(obj => {
+            let index = _.findIndex(this.telemetryObjs, (obj) => {
                 let objId = this.openmct.objects.makeKeyString(obj.identifier);
                 let id = this.openmct.objects.makeKeyString(identifier);
                 return objId === id;

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -79,6 +79,8 @@
             <div v-for="(conditionStyle, index) in conditionalStyles"
                  :key="index"
                  class="c-inspect-styles__condition"
+                 :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
+                 @click="applySelectedConditionStyle(conditionStyle.conditionId)"
             >
                 <condition-error :show-label="true"
                                  :condition="getCondition(conditionStyle.conditionId)"
@@ -126,7 +128,8 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             conditions: undefined,
             conditionsLoaded: false,
-            navigateToPath: ''
+            navigateToPath: '',
+            selectedConditionId: ''
         }
     },
     destroyed() {
@@ -191,6 +194,9 @@ export default {
             if (this.stopObservingItems) {
                 this.stopObservingItems();
             }
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
         },
         initialize(conditionSetDomainObject) {
             //If there are new conditions in the conditionSet we need to set those styles to default
@@ -200,6 +206,13 @@ export default {
         },
         setEditState(isEditing) {
             this.isEditing = isEditing;
+            if (this.isEditing) {
+                if (this.stopProvidingTelemetry) {
+                    this.stopProvidingTelemetry();
+                }
+            } else {
+                this.subscribeToConditionSet();
+            }
         },
         addConditionSet() {
             let conditionSetDomainObject;
@@ -270,6 +283,8 @@ export default {
             let domainObjectStyles =  (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
             if (this.itemId) {
                 domainObjectStyles[this.itemId].conditionSetIdentifier = undefined;
+                domainObjectStyles[this.itemId].selectedConditionId = undefined;
+                domainObjectStyles[this.itemId].defaultConditionId = undefined;
                 delete domainObjectStyles[this.itemId].conditionSetIdentifier;
                 domainObjectStyles[this.itemId].styles = undefined;
                 delete domainObjectStyles[this.itemId].styles;
@@ -278,6 +293,8 @@ export default {
                 }
             } else {
                 domainObjectStyles.conditionSetIdentifier = undefined;
+                domainObjectStyles.selectedConditionId = undefined;
+                domainObjectStyles.defaultConditionId = undefined;
                 delete domainObjectStyles.conditionSetIdentifier;
                 domainObjectStyles.styles = undefined;
                 delete domainObjectStyles.styles;
@@ -287,16 +304,23 @@ export default {
             }
 
             this.persist(domainObjectStyles);
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
         },
         updateDomainObjectItemStyles(newItems) {
             //check that all items that have been styles still exist. Otherwise delete those styles
             let domainObjectStyles =  (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
             let itemsToRemove = [];
             let keys = Object.keys(domainObjectStyles);
+            //TODO: Need an easier way to find which properties are itemIds
             keys.forEach((key) => {
-                if ((key !== 'styles') &&
+                const keyIsItemId = (key !== 'styles') &&
                     (key !== 'staticStyle') &&
-                    (key !== 'conditionSetIdentifier')) {
+                    (key !== 'defaultConditionId') &&
+                    (key !== 'selectedConditionId') &&
+                    (key !== 'conditionSetIdentifier');
+                if (keyIsItemId) {
                     if (!(newItems.find(item => item.id === key))) {
                         itemsToRemove.push(key);
                     }
@@ -324,6 +348,9 @@ export default {
             }
             let conditionalStyles = [];
             this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
+                if (conditionConfiguration.isDefault) {
+                    this.selectedConditionId = conditionConfiguration.id;
+                }
                 this.conditions[conditionConfiguration.id] = conditionConfiguration;
                 let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
                 if (foundStyle) {
@@ -339,7 +366,27 @@ export default {
             //we're doing this so that we remove styles for any conditions that have been removed from the condition set
             this.conditionalStyles = conditionalStyles;
             this.conditionsLoaded = true;
-            this.persist(this.getDomainObjectConditionalStyle());
+            this.persist(this.getDomainObjectConditionalStyle(this.selectedConditionId));
+            if (!this.isEditing) {
+                this.subscribeToConditionSet();
+            }
+        },
+        subscribeToConditionSet() {
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
+            if (this.conditionSetDomainObject) {
+                this.openmct.telemetry.request(this.conditionSetDomainObject)
+                    .then(output => {
+                        if (output && output.length) {
+                            this.handleConditionSetResultUpdated(output[0]);
+                        }
+                    });
+                this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(this.conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
+            }
+        },
+        handleConditionSetResultUpdated(resultData) {
+            this.selectedConditionId = resultData ? resultData.conditionId : '';
         },
         initializeStaticStyle(objectStyles) {
             let staticStyle = objectStyles && objectStyles.staticStyle;
@@ -364,14 +411,19 @@ export default {
             let found = this.findStyleByConditionId(conditionStyle.conditionId);
             if (found) {
                 found.style = conditionStyle.style;
+                this.selectedConditionId = found.conditionId;
                 this.persist(this.getDomainObjectConditionalStyle());
             }
         },
-        getDomainObjectConditionalStyle() {
+        getDomainObjectConditionalStyle(defaultConditionId) {
             let objectStyle = {
                 styles: this.conditionalStyles,
-                staticStyle: this.staticStyle
+                staticStyle: this.staticStyle,
+                selectedConditionId: this.selectedConditionId
             };
+            if (defaultConditionId) {
+                objectStyle.defaultConditionId = defaultConditionId;
+            }
             if (this.conditionSetDomainObject) {
                 objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier;
             }
@@ -393,6 +445,10 @@ export default {
         getCondition(id) {
             return this.conditions ? this.conditions[id] : {};
         },
+        applySelectedConditionStyle(conditionId) {
+            this.selectedConditionId = conditionId;
+            this.persist(this.getDomainObjectConditionalStyle());
+        },
         persist(style) {
             this.openmct.objects.mutate(this.domainObject, 'configuration.objectStyles', style);
         }

src/plugins/condition/components/inspector/conditional-styles.scss

@@ -60,6 +60,31 @@
 
     &__condition {
         @include discreteItem();
+        border: 1px solid transparent;
+        pointer-events: none; // Prevent selecting when the object isn't being edited
+
+        &.is-current {
+            $c: $colorBodyFg;
+            border-color: rgba($c, 0.5);
+            background: rgba($c, 0.2);
+        }
+
+        .is-editing & {
+            cursor: pointer;
+            pointer-events: initial;
+            transition: $transOut;
+
+            &:hover {
+                background: rgba($colorBodyFg, 0.1);
+                transition: $transIn;
+            }
+
+            &.is-current {
+                $c: $editUIColorBg;
+                border-color: $c;
+                background: rgba($c, 0.1);
+            }
+        }
     }
 
     .c-style {

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -22,6 +22,7 @@
 
 import TelemetryCriterion from './TelemetryCriterion';
 import { evaluateResults } from "../utils/evaluator";
+import { getLatestTimestamp } from '../utils/time';
 
 export default class AllTelemetryCriterion extends TelemetryCriterion {
 
@@ -107,40 +108,53 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
     }
 
-    requestLAD(options) {
-        options = Object.assign({},
-            options,
-            {
+    requestLAD(telemetryObjects) {
+        const options = {
             strategy: 'latest',
             size: 1
-            }
-        );
+        };
 
         if (!this.isValid()) {
-            return this.formatData({}, options.telemetryObjects);
+            return this.formatData({}, telemetryObjects);
         }
 
-        let keys = Object.keys(Object.assign({}, options.telemetryObjects));
+        let keys = Object.keys(Object.assign({}, telemetryObjects));
         const telemetryRequests = keys
             .map(key => this.openmct.telemetry.request(
-                options.telemetryObjects[key],
+                telemetryObjects[key],
                 options
             ));
 
+        let telemetryDataCache = {};
         return Promise.all(telemetryRequests)
             .then(telemetryRequestsResults => {
-                let latestDatum;
+                let latestTimestamp;
+                const timeSystems = this.openmct.time.getAllTimeSystems();
+                const timeSystem = this.openmct.time.timeSystem();
+
                 telemetryRequestsResults.forEach((results, index) => {
-                    latestDatum = results.length ? results[results.length - 1] : {};
-                    if (index < telemetryRequestsResults.length-1) {
-                        if (latestDatum) {
-                            this.telemetryDataCache[latestDatum.id] = this.computeResult(latestDatum);
-                        }
-                    }
+                    const latestDatum = results.length ? results[results.length - 1] : {};
+                    const datumId = keys[index];
+                    const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObjects[datumId]);
+
+                    telemetryDataCache[datumId] = this.computeResult(normalizedDatum);
+
+                    latestTimestamp = getLatestTimestamp(
+                        latestTimestamp,
+                        normalizedDatum,
+                        timeSystems,
+                        timeSystem
+                    );
                 });
+
+                const datum = {
+                    result: evaluateResults(Object.values(telemetryDataCache), this.telemetry),
+                    ...latestTimestamp
+                };
+
                 return {
                     id: this.id,
-                    data: this.formatData(latestDatum, options.telemetryObjects)
+                    data: datum
                 };
             });
     }

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -61,6 +61,21 @@ export default class TelemetryCriterion extends EventEmitter {
         this.telemetryObject = telemetryObjects[this.telemetryObjectIdAsString];
     }
 
+    createNormalizedDatum(telemetryDatum, endpoint) {
+        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+        const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
+
+        const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
+            const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
+            datum[metadatum.key] = formatter.parse(telemetryDatum[metadatum.source]);
+            return datum;
+        }, {});
+
+        normalizedDatum.id = id;
+
+        return normalizedDatum;
+    }
+
     formatData(data) {
         const datum = {
             result: this.computeResult(data)
@@ -79,14 +94,11 @@ export default class TelemetryCriterion extends EventEmitter {
         this.result = this.computeResult(validatedData);
     }
 
-    requestLAD(options) {
-        options = Object.assign({},
-            options,
-            {
+    requestLAD() {
+        const options = {
             strategy: 'latest',
             size: 1
-            }
-        );
+        };
 
         if (!this.isValid()) {
             return {
@@ -100,9 +112,11 @@ export default class TelemetryCriterion extends EventEmitter {
             options
         ).then(results => {
             const latestDatum = results.length ? results[results.length - 1] : {};
+            const normalizedDatum = this.createNormalizedDatum(latestDatum, this.telemetryObject);
+
             return {
                 id: this.id,
-                data: this.formatData(latestDatum)
+                data: this.formatData(normalizedDatum)
             };
         });
     }

src/plugins/condition/utils/operations.js

@@ -34,6 +34,10 @@ const convertToStrings = (input) => {
     return stringInputs;
 };
 
+const joinValues = (values, length) => {
+    return values.slice(0, length).join(', ');
+};
+
 export const OPERATIONS = [
     {
         name: 'equalTo',
@@ -44,7 +48,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' is ' + values.join(', ');
+            return ' is ' + joinValues(values, 1);
         }
     },
     {
@@ -56,7 +60,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' is not ' + values.join(', ');
+            return ' is not ' + joinValues(values, 1);
         }
     },
     {
@@ -68,7 +72,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' > ' + values.join(', ');
+            return ' > ' + joinValues(values, 1);
         }
     },
     {
@@ -80,7 +84,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' < ' + values.join(', ');
+            return ' < ' + joinValues(values, 1);
         }
     },
     {
@@ -92,7 +96,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' >= ' + values.join(', ');
+            return ' >= ' + joinValues(values, 1);
         }
     },
     {
@@ -104,7 +108,7 @@ export const OPERATIONS = [
         appliesTo: ['number'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' <= ' + values.join(', ');
+            return ' <= ' + joinValues(values, 1);
         }
     },
     {
@@ -146,7 +150,7 @@ export const OPERATIONS = [
         appliesTo: ['string'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' contains ' + values.join(', ');
+            return ' contains ' + joinValues(values, 1);
         }
     },
     {
@@ -158,7 +162,7 @@ export const OPERATIONS = [
         appliesTo: ['string'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' does not contain ' + values.join(', ');
+            return ' does not contain ' + joinValues(values, 1);
         }
     },
     {
@@ -170,7 +174,7 @@ export const OPERATIONS = [
         appliesTo: ['string'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' starts with ' + values.join(', ');
+            return ' starts with ' + joinValues(values, 1);
         }
     },
     {
@@ -182,7 +186,7 @@ export const OPERATIONS = [
         appliesTo: ['string'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' ends with ' + values.join(', ');
+            return ' ends with ' + joinValues(values, 1);
         }
     },
     {
@@ -194,7 +198,7 @@ export const OPERATIONS = [
         appliesTo: ['string'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' is exactly ' + values.join(', ');
+            return ' is exactly ' + joinValues(values, 1);
         }
     },
     {
@@ -231,7 +235,7 @@ export const OPERATIONS = [
         appliesTo: ['enum'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' is ' + values.join(', ');
+            return ' is ' + joinValues(values, 1);
         }
     },
     {
@@ -244,7 +248,7 @@ export const OPERATIONS = [
         appliesTo: ['enum'],
         inputCount: 1,
         getDescription: function (values) {
-            return ' is not ' + values.join(', ');
+            return ' is not ' + joinValues(values, 1);
         }
     },
     {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -68,6 +68,7 @@
 
 <script>
 import uuid from 'uuid';
+
 import SubobjectView from './SubobjectView.vue'
 import TelemetryView from './TelemetryView.vue'
 import BoxView from './BoxView.vue'
@@ -374,9 +375,7 @@ export default {
                 indices.push(selectedItem[0].context.index);
                 this.untrackItem(selectedItem[0].context.layoutItem);
             });
-            while(indices.length) {
-                this.layoutItems.splice(indices.pop(), 1);
-            }
+            _.pullAt(this.layoutItems, indices);
             this.mutate("configuration.items", this.layoutItems);
             this.$el.click();
         },
@@ -513,7 +512,7 @@ export default {
             }
         },
         updateTelemetryFormat(item, format) {
-            let index = this.layoutItems.findIndex(item);
+            let index = _.findIndex(this.layoutItems, item);
             item.format = format;
             this.mutate(`configuration.items[${index}]`, item);
         }

src/plugins/displayLayout/mixins/objectStyles-mixin.js

@@ -52,7 +52,7 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this));
+                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this), true);
             } else {
                 this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
             }

src/plugins/filters/components/FiltersView.vue

@@ -55,7 +55,6 @@ export default {
     },
     computed: {
         hasActiveFilters() {
-            console.log('hasActiveFilters');
             // Should be true when the user has entered any filter values.
             return Object.values(this.persistedFilters).some(filters => {
                 return Object.values(filters).some(comparator => {
@@ -64,7 +63,6 @@ export default {
             });
         },
         hasMixedFilters() {
-            console.log('hasMixedFilters')
             // Should be true when filter values are mixed.
             let filtersToCompare = _.omit(this.persistedFilters[Object.keys(this.persistedFilters)[0]], [USE_GLOBAL]);
             return Object.values(this.persistedFilters).some(filters => {
@@ -72,7 +70,6 @@ export default {
             });
         },
         label() {
-            console.log('label');
             if (this.hasActiveFilters) {
                 if (this.hasMixedFilters) {
                     return FILTER_VIEW_TITLE_MIXED;

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -220,7 +220,7 @@ export default {
                 return;
             }
 
-            const index = _.sortedIndexBy(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
+            const index = _.sortedIndex(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
             this.imageHistory.splice(index, 0, datum);
         },
         updateValues(datum) {

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

@@ -162,19 +162,31 @@ export default {
             }).show(this.embed.snapshot.src);
         },
         changeLocation() {
-            this.openmct.time.stopClock();
-            this.openmct.time.bounds({
-                start: this.embed.bounds.start,
-                end: this.embed.bounds.end
-            });
-
             const link = this.embed.historicLink;
             if (!link) {
                 return;
             }
 
+            const bounds = this.openmct.time.bounds();
+            const isTimeBoundChanged = this.embed.bounds.start !== bounds.start
+                && this.embed.bounds.end !== bounds.end;
+            const isFixedTimespanMode = !this.openmct.time.clock();
+
             window.location.href = link;
-            const message = 'Time bounds changed to fixed timespan mode';
+
+            let message = '';
+            if (isTimeBoundChanged) {
+                this.openmct.time.bounds({
+                    start: this.embed.bounds.start,
+                    end: this.embed.bounds.end
+                });
+                message = 'Time bound values changed';
+            }
+
+            if (!isFixedTimespanMode) {
+                message = 'Time bound values changed to fixed timespan mode';
+            }
+
             this.openmct.notifications.alert(message);
         },
         formatTime(unixTime, timeFormat) {

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

@@ -221,7 +221,7 @@ export default {
             return position;
         },
         formatTime(unixTime, timeFormat) {
-            return Moment(unixTime).format(timeFormat);
+            return Moment.utc(unixTime).format(timeFormat);
         },
         moveSnapshot(snapshotId) {
             const snapshot = this.snapshotContainer.getSnapshot(snapshotId);

src/plugins/notebook/components/notebook-menu-switcher.vue

@@ -40,6 +40,18 @@ export default {
             default() {
                 return {};
             }
+        },
+        ignoreLink: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
+        objectPath: {
+            type: Array,
+            default() {
+                return null;
+            }
         }
     },
     data() {
@@ -97,17 +109,27 @@ export default {
             this.showMenu = false;
         },
         snapshot(notebook) {
-            let element = document.getElementsByClassName("l-shell__main-container")[0];
+            this.hideMenu();
+
+            this.$nextTick(() => {
+                const element = document.querySelector('.c-overlay__contents')
+                    || document.getElementsByClassName('l-shell__main-container')[0];
+
                 const bounds = this.openmct.time.bounds();
-            const objectPath = this.openmct.router.path;
+                const link = !this.ignoreLink
+                    ? window.location.href
+                    : null;
+
+                const objectPath = this.objectPath || this.openmct.router.path;
                 const snapshotMeta = {
                     bounds,
-                link: window.location.href,
+                    link,
                     objectPath,
                     openmct: this.openmct
                 };
 
                 this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+            });
         }
     }
 }

src/plugins/notebook/components/notebook.vue

@@ -111,6 +111,7 @@ import SearchResults from './search-results.vue';
 import Sidebar from './sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSection, setDefaultNotebookPage } from '../utils/notebook-storage';
 import { addNotebookEntry, createNewEmbed, getNotebookEntries } from '../utils/notebook-entries';
+import { throttle } from 'lodash';
 
 const DEFAULT_CLASS = 'is-notebook-default';
 
@@ -174,7 +175,7 @@ export default {
     watch: {
     },
     beforeMount() {
-        this.throttledSearchItem = this.throttle(this.searchItem, 500);
+        this.throttledSearchItem = throttle(this.searchItem, 500);
     },
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
@@ -194,16 +195,6 @@ export default {
         })
     },
     methods: {
-        throttle(func, timeFrame) {
-            let lastTime = 0;
-            return function () {
-                let now = new Date();
-                if (now - lastTime >= timeFrame) {
-                    func();
-                    lastTime = now;
-                }
-            };
-        },
         addDefaultClass() {
             const classList = this.internalDomainObject.classList || [];
             if (classList.includes(DEFAULT_CLASS)) {
@@ -504,7 +495,7 @@ export default {
                 return;
             }
 
-            if (section.id !== defaultNotebookSection.id) {
+            if (id !== defaultNotebookSection.id) {
                 return;
             }
 

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

@@ -21,7 +21,7 @@
 -->
 <div ng-controller="StackedPlotController as stackedPlot"
       class="c-plot c-plot--stacked holder holder-plot has-control-bar">
-    <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
+    <div class="c-control-bar" ng-show="!stackedPlot.hideExportButtons">
        <span class="c-button-set c-button-set--strip-h">
           <button class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"

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

@@ -152,7 +152,7 @@ function (
     MCTChartController.prototype.destroy = function () {
         this.isDestroyed = true;
         this.stopListening();
-        this.lines.map(line => line.destroy());
+        _.invoke(this.lines, 'destroy');
         DrawLoader.releaseDrawAPI(this.drawAPI);
     };
 

src/plugins/plot/src/services/ExportImageService.js

@@ -81,7 +81,8 @@ define(
                         clonedElement.classList.add(className);
                     }
                     element.id = oldId;
-                }
+                },
+                removeContainer: true // Set to false to debug what html2canvas renders
             }).then(function (canvas) {
                 dialog.dismiss();
                 return new Promise(function (resolve, reject) {

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -76,7 +76,7 @@ define([
                 if (childObj) {
                     var index = telemetryObjects.indexOf(childObj);
                     telemetryObjects.splice(index, 1);
-                    $scope.$broadcast('plot:tickWidth', Math.max(...Object.values(tickWidthMap)));
+                    $scope.$broadcast('plot:tickWidth', _.max(tickWidthMap));
                 }
             }
 
@@ -131,7 +131,6 @@ define([
             }
             tickWidthMap[plotId] = Math.max(width, tickWidthMap[plotId]);
             var newTickWidth = _.max(tickWidthMap);
-
             if (newTickWidth !== tickWidth || width !== tickWidth) {
                 tickWidth = newTickWidth;
                 $scope.$broadcast('plot:tickWidth', tickWidth);

src/plugins/plotlyPlot/PlotlyTelemetryProvider.js

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

src/plugins/plotlyPlot/PlotlyViewProvider.js

@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import PlotlyViewLayout from './components/PlotlyViewLayout.vue';
+import Vue from 'vue';
+
+export default function PlotlyViewProvider(openmct) {
+    return {
+        key: 'plotlyPlot',
+        name: 'Plotly Plot',
+        cssClass: 'icon-plot-overlay',
+        canView: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        view: function (domainObject, objectPath) {
+            let component;
+
+            return {
+                show: function (element, isEditing) {
+                    component =  new Vue({
+                        provide: {
+                            openmct,
+                            domainObject,
+                            objectPath
+                        },
+                        el: element,
+                        components: {
+                            PlotlyViewLayout
+                        },
+                        data() {
+                            return {
+                                isEditing
+                            }
+                        },
+                        template: '<plotly-view-layout :isEditing="isEditing"></plotly-view-layout>'
+                    });
+                },
+                onEditModeChange: function (isEditing) {
+                    component.isEditing = isEditing;
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

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

src/plugins/plotlyPlot/components/plotly.scss

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

src/plugins/plotlyPlot/plugin.js

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

src/plugins/plugins.js

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

src/plugins/summaryWidget/src/telemetry/SummaryWidgetEvaluator.js

@@ -154,7 +154,7 @@ define([
                 return _(this.baseState)
                     .values()
                     .map(_.clone)
-                    .keyBy('id')
+                    .indexBy('id')
                     .value();
             }.bind(this));
     };

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -100,7 +100,7 @@ define([
 
         hasColumnWithKey(columnKey) {
             return _.flatten(Object.values(this.columns))
-                .some(column => column.getKey() === columnKey);
+                .findIndex(column => column.getKey() === columnKey) !== -1;
         }
 
         getColumns() {

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -93,7 +93,7 @@ define(
                     // same time stamp
                     let potentialDupes = this.rows.slice(startIx, endIx + 1);
                     // Search potential dupes for exact dupe
-                    isDuplicate = potentialDupes.some(_.isEqual.bind(undefined, row));
+                    isDuplicate = _.findIndex(potentialDupes, _.isEqual.bind(undefined, row)) > -1;
                 }
 
                 if (!isDuplicate) {
@@ -201,7 +201,7 @@ define(
             sortBy(sortOptions) {
                 if (arguments.length > 0) {
                     this.sortOptions = sortOptions;
-                    this.rows = _.orderBy(this.rows, (row) => row.getParsedValue(sortOptions.key) , sortOptions.direction);
+                    this.rows = _.sortByOrder(this.rows, (row) => row.getParsedValue(sortOptions.key) , sortOptions.direction);
                     this.emit('sort');
                 }
                 // Return duplicate to avoid direct modification of underlying object

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -77,7 +77,7 @@ export default {
                     }
                 });
 
-                names.reduce((a, b) => a.concat(b), []);
+                names = _.flatten(names);
                 this.filterNames = names.length === 0 ? names : Array.from(new Set(names));
             });
         },
@@ -99,7 +99,7 @@ export default {
                 }
             });
 
-            return filterNames.reduce((a, b) => a.concat(b), []);
+            return _.flatten(filterNames);
         },
         getFilterLabels(filterObject, metadatum,) {
             let filterLabels = [];

src/plugins/telemetryTable/components/table.scss

@@ -165,7 +165,16 @@
 /******************************* LEGACY */
 .s-status-taking-snapshot,
 .overlay.snapshot {
-    // Handle overflow-y issues with tables and html2canvas
-    // Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
-    .c-table__body-w { overflow: auto; }
+    .c-table {
+        &__body-w {
+            overflow: auto; // Handle overflow-y issues with tables and html2canvas
+        }
+
+        &-control-bar {
+            display: none;
+            + * {
+                margin-top: 0 !important;
+            }
+        }
+    }
 }

src/plugins/telemetryTable/components/table.vue

@@ -260,6 +260,7 @@ 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';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 
 const VISIBLE_ROW_COUNT = 100;
@@ -377,13 +378,13 @@ export default {
         }
     },
     created() {
-        this.filterChanged = this.debounce(this.filterChanged, 500);
+        this.filterChanged = _.debounce(this.filterChanged, 500);
     },
     mounted() {
         this.csvExporter = new CSVExporter();
-        this.rowsAdded = this.throttle(this.rowsAdded, 200);
-        this.rowsRemoved = this.throttle(this.rowsRemoved, 200);
-        this.scroll = this.throttle(this.scroll, 100);
+        this.rowsAdded = _.throttle(this.rowsAdded, 200);
+        this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
+        this.scroll = _.throttle(this.scroll, 100);
 
         this.table.on('object-added', this.addObject);
         this.table.on('object-removed', this.removeObject);
@@ -431,28 +432,6 @@ export default {
         this.table.destroy();
     },
     methods: {
-        debounce(func, wait, immediate) {
-            let timeout;
-            return function () {
-                let context = this, args = arguments;
-                clearTimeout(timeout);
-                timeout = setTimeout(function () {
-                    timeout = null;
-                    if (!immediate) { func.apply(context, args) }
-                }, wait);
-                if (immediate && !timeout) { func.apply(context, args) }
-            };
-        },
-        throttle(func, timeFrame) {
-            let lastTime = 0;
-            return function () {
-                let now = new Date();
-                if (now - lastTime >= timeFrame) {
-                    func();
-                    lastTime = now;
-                }
-            };
-        },
         updateVisibleRows() {
             if (!this.updatingView) {
                 this.updatingView = true;

src/styles/_controls.scss

@@ -565,6 +565,20 @@ select {
         }
     }
 }
+/******************************************************** CONTROL BARS */
+.c-control-bar {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
+    &__label {
+        display: inline-block;
+        white-space: nowrap;
+    }
+}
 
 /******************************************************** PALETTES */
 .c-palette {

src/styles/_legacy-plots.scss

@@ -40,17 +40,51 @@ mct-plot {
         }
     }
 }
+
+.c-plot,
+.gl-plot {
+    .s-status-taking-snapshot & {
+        .c-control-bar {
+            display: none;
+        }
+        .gl-plot-y-label__select {
+            display: none;
+        }
+    }
+}
+
 .c-plot {
-    $p: $mainViewPad;
-    position: absolute;
-    top: $p; right: $p; bottom: $p; left: $p;
+    //$p: $mainViewPad;
+    @include abs($mainViewPad);
+    //position: absolute;
+    //top: $p; right: $p; bottom: $p; left: $p;
+
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    .l-control-bar {
+        flex: 0 0 auto;
+    }
+
+    .l-view-section {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+    }
 
     &--stacked {
-        .l-view-section {
-            //  Make this a flex container
-            display: flex;
-            flex-flow: column nowrap;
-            .gl-plot.child-frame {
+        .child-frame {
+            .has-control-bar {
+                .c-control-bar {
+                    // Hides buttons per plot element in a stacked plot
+                    display: none;
+                }
+            }
+
             mct-plot {
                 display: flex;
                 flex: 1 1 auto;
@@ -58,10 +92,6 @@ mct-plot {
                 position: relative;
             }
             flex: 1 1 auto;
-                &:not(:first-child) {
-                    margin-top: $interiorMargin;
-                }
-            }
         }
 
         .s-status-timeconductor-unsynced .holder-plot {
@@ -70,7 +100,6 @@ mct-plot {
             }
         }
     }
-
 }
 
 
@@ -186,7 +215,7 @@ mct-plot {
             left: 0; top: 0; right: auto; bottom: 0;
             padding-left: 5px;
             text-orientation: mixed;
-            overflow: hidden;
+            //overflow: hidden;
             writing-mode: vertical-lr;
             &:before {
                 // Icon denoting configurability
@@ -339,11 +368,11 @@ mct-plot {
     z-index: -10;
 
     .l-view-section {
-        $m: $interiorMargin;
-        top: $m !important;
-        right: $m;
-        bottom: $m;
-        left: $m;
+        //$m: $interiorMargin;
+        //top: $m !important;
+        //right: $m;
+        //bottom: $m;
+        //left: $m;
 
         .s-status-timeconductor-unsynced .holder-plot {
             .t-object-alert.t-alert-unsynced {

src/styles/_legacy.scss

@@ -19,53 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************************* VIEWS */
-// From _views.scss
-// Legacy overlay and stacked plots depend on this for now
-// Styles for sub-dividing views generically
-.l-control-bar {
-    // Element that can be placed above l-view-section, holds controls, buttons, etc.
-    height: $controlBarH;
-}
-
-.c-control-bar {
-    display: flex;
-    align-items: center;
-
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
-    &__label {
-        display: inline-block;
-        white-space: nowrap;
-    }
-}
-
-.l-view-section {
-    @include abs();
-    overflow: auto;
-}
-
-.has-control-bar {
-    .l-view-section {
-        top: $controlBarH + $interiorMargin;
-    }
-}
-
-.child-frame {
-    .has-control-bar {
-        .l-control-bar,
-        .c-control-bar {
-            // Hides buttons per plot element in a stacked plot
-            display: none;
-        }
-        .l-view-section {
-            top: 0;
-        }
-    }
-}
-
 /*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {

src/styles/notebook.scss

@@ -388,7 +388,21 @@
 .s-status-taking-snapshot,
 .overlay.snapshot {
     // Handle overflow-y issues with tables and html2canvas
+    background: $colorBodyBg; // Prevent html2canvas from using white background
+    color: $colorBodyFg;
+    padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
+
     .l-sticky-headers .l-tabular-body { overflow: auto; }
+    .l-browse-bar {
+        display: none; // Suppress browse-bar when snapshotting from view-large overlay
+        + * {
+            margin-top: 0 !important; // Remove margin from any following elements
+        }
+    }
+
+    * {
+        box-shadow: none !important; // Prevent html2canvas problems with box-shadow
+    }
 }
 
 .c-notebook-snapshot {

src/styles/vue-styles.scss

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

src/ui/components/ObjectFrame.vue

@@ -59,6 +59,8 @@
 <script>
 import ObjectView from './ObjectView.vue'
 import ContextMenuDropDown from './contextMenuDropDown.vue';
+import PreviewHeader from '@/ui/preview/preview-header.vue';
+import Vue from 'vue';
 
 const SIMPLE_CONTENT_TYPES = [
     'clock',
@@ -116,13 +118,41 @@ export default {
                 childElement = parentElement.children[0];
 
             this.openmct.overlays.overlay({
-                element: childElement,
+                element: this.getOverlayElement(childElement),
                 size: 'large',
                 onDestroy() {
                     parentElement.append(childElement);
                 }
             });
         },
+        getOverlayElement(childElement) {
+            const fragment = new DocumentFragment();
+            const header = this.getPreviewHeader();
+            fragment.append(header);
+            fragment.append(childElement);
+
+            return fragment;
+        },
+        getPreviewHeader() {
+            const domainObject = this.objectPath[0];
+            const preview = new Vue({
+                components: {
+                    PreviewHeader
+                },
+                provide: {
+                    openmct: this.openmct,
+                    objectPath: this.objectPath
+                },
+                data() {
+                    return {
+                        domainObject
+                    }
+                },
+                template: '<PreviewHeader :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
+            });
+
+            return preview.$mount().$el;
+        },
         getSelectionContext() {
             return this.$refs.objectView.getSelectionContext();
         }

src/ui/components/ObjectView.vue

@@ -201,7 +201,7 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
+                this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
             } else {
                 this.styleRuleManager.updateObjectStyleConfig(this.currentObject.configuration && this.currentObject.configuration.objectStyles);
             }

src/ui/components/object-frame.scss

@@ -23,9 +23,12 @@
     }
 
     &:not(.c-so-view--no-frame) {
-        background: $colorBodyBg;
         border: $browseFrameBorder;
         padding: $interiorMargin;
+
+        .is-editing & {
+            background: rgba($colorBodyBg, 0.8);
+        }
     }
 
     &--no-frame {

src/ui/inspector/Inspector.vue

@@ -108,7 +108,7 @@ export default {
                 let object = selection[0][0].context.item;
                 if (object) {
                     let type = this.openmct.types.get(object.type);
-                    this.showStyles = (this.excludeObjectTypes.indexOf(object.type) < 0) && type.definition.creatable;
+                    this.showStyles = this.isLayoutObject(selection[0], object.type) || this.isCreatableObject(object, type);
                 }
                 if (!this.currentTabbedView.key || (!this.showStyles && this.currentTabbedView.key === this.tabbedViews[1].key))
                 {
@@ -116,6 +116,14 @@ export default {
                 }
             }
         },
+        isLayoutObject(selection, objectType) {
+            //we allow conditionSets to be styled if they're part of a layout
+            return selection.length > 1 &&
+                ((objectType === 'conditionSet') || (this.excludeObjectTypes.indexOf(objectType) < 0));
+        },
+        isCreatableObject(object, type) {
+            return (this.excludeObjectTypes.indexOf(object.type) < 0) && type.definition.creatable;
+        },
         updateCurrentTab(view) {
             this.currentTabbedView = view;
         },

src/ui/layout/BrowseBar.vue

@@ -36,6 +36,7 @@
         <!-- Action buttons -->
         <NotebookMenuSwitcher v-if="notebookEnabled"
                               :domain-object="domainObject"
+                              :object-path="openmct.router.path"
                               class="c-notebook-snapshot-menubutton"
         />
         <div class="l-browse-bar__actions">

src/ui/preview/Preview.vue

@@ -21,28 +21,12 @@
  *****************************************************************************/
 <template>
 <div class="l-preview-window">
-    <div class="l-browse-bar">
-        <div class="l-browse-bar__start">
-            <div
-                class="l-browse-bar__object-name--w"
-                :class="type.cssClass"
-            >
-                <span class="l-browse-bar__object-name">
-                    {{ domainObject.name }}
-                </span>
-                <context-menu-drop-down :object-path="objectPath" />
-            </div>
-        </div>
-        <div class="l-browse-bar__end">
-            <div class="l-browse-bar__actions">
-                <view-switcher
-                    :views="views"
+    <PreviewHeader
         :current-view="currentView"
+        :domain-object="domainObject"
+        :views="views"
         @setView="setView"
     />
-            </div>
-        </div>
-    </div>
     <div class="l-preview-window__object-view">
         <div ref="objectView"></div>
     </div>
@@ -50,13 +34,11 @@
 </template>
 
 <script>
-import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
-import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+import PreviewHeader from './preview-header.vue';
 
 export default {
     components: {
-        ContextMenuDropDown,
-        ViewSwitcher
+        PreviewHeader
     },
     inject: [
         'openmct',
@@ -64,12 +46,9 @@ export default {
     ],
     data() {
         let domainObject = this.objectPath[0];
-        let type = this.openmct.types.get(domainObject.type);
 
         return {
             domainObject: domainObject,
-            type: type,
-            notebookEnabled: false,
             viewKey: undefined
         };
     },
@@ -97,6 +76,7 @@ export default {
                 this.view.destroy();
                 this.$refs.objectView.innerHTML = '';
             }
+
             delete this.view;
             delete this.viewContainer;
         },

src/ui/preview/PreviewAction.js

@@ -36,7 +36,12 @@ export default class PreviewAction {
          * Dependencies
          */
         this._openmct = openmct;
+
+        if (PreviewAction.isVisible === undefined) {
+            PreviewAction.isVisible = false;
         }
+    }
+
     invoke(objectPath) {
         let preview = new Vue({
             components: {
@@ -59,16 +64,27 @@ export default class PreviewAction {
                     callback: () => overlay.dismiss()
                 }
             ],
-            onDestroy: () => preview.$destroy()
+            onDestroy: () => {
+                PreviewAction.isVisible = false;
+                preview.$destroy()
+            }
         });
+
+        PreviewAction.isVisible = true;
     }
+
     appliesTo(objectPath) {
-        return !this._isNavigatedObject(objectPath)
+        return !PreviewAction.isVisible && !this._isNavigatedObject(objectPath);
     }
+
     _isNavigatedObject(objectPath) {
         let targetObject = objectPath[0];
         let navigatedObject = this._openmct.router.path[0];
         return targetObject.identifier.namespace === navigatedObject.identifier.namespace &&
             targetObject.identifier.key === navigatedObject.identifier.key;
     }
+    _preventPreview(objectPath) {
+        const noPreviewTypes = ['folder'];
+        return noPreviewTypes.includes(objectPath[0].type);
+    }
 }

src/ui/preview/preview-header.vue

@@ -0,0 +1,92 @@
+<template>
+<div class="l-browse-bar">
+    <div class="l-browse-bar__start">
+        <div
+            class="l-browse-bar__object-name--w"
+            :class="type.cssClass"
+        >
+            <span class="l-browse-bar__object-name">
+                {{ domainObject.name }}
+            </span>
+            <context-menu-drop-down :object-path="objectPath" />
+        </div>
+    </div>
+    <div class="l-browse-bar__end">
+        <div class="l-browse-bar__actions">
+            <view-switcher
+                :v-if="!hideViewSwitcher"
+                :views="views"
+                :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>
+</template>
+
+
+<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',
+        'objectPath'
+    ],
+    components: {
+        ContextMenuDropDown,
+        NotebookMenuSwitcher,
+        ViewSwitcher
+    },
+    props: {
+        currentView: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        domainObject: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        hideViewSwitcher: {
+            type: Boolean,
+            default: () => {
+                return false;
+            }
+        },
+        showNotebookMenuSwitcher: {
+            type: Boolean,
+            default: () => {
+                return false;
+            }
+        },
+        views: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            type: this.openmct.types.get(this.domainObject.type)
+        };
+    },
+    methods: {
+        setView(view) {
+            this.$emit('setView', view);
+        }
+    }
+}
+</script>