display validation errors for specific input modified

provide reasonable defaults for conductor configuration
section-hint without section-separator styling
2020-05-11 19:51:30 -07:00 · 2020-05-11 16:49:13 -07:00 · 2020-05-11 16:45:01 -07:00 · 2020-05-08 11:58:20 -07:00 · 2020-05-08 11:52:25 -07:00 · 2020-05-07 10:20:50 -07:00
58 changed files with 1298 additions and 422 deletions
--- a/.circleci/config.yml
+++ b/.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
--- a/example/simpleVuePlugin/HelloWorld.vue
+++ b/example/simpleVuePlugin/HelloWorld.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="example">{{ msg }}</div>
+<div class="example">{{ msg }}</div>
 </template>

 <script>
 export default {
-  data () {
-    return {
-      msg: 'Hello world!'
+    data() {
+        return {
+            msg: 'Hello world!'
+        }
    }
-  }
 }
 </script>

--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2017, United States Government
+ Open MCT, Copyright (c) 2014-2020, United States Government
 as represented by the Administrator of the National Aeronautics and Space
 Administration. All rights reserved.

@@ -34,8 +34,8 @@
    <body>
    </body>
    <script>
-        const FIVE_MINUTES = 5 * 60 * 1000;
-        const THIRTY_MINUTES = 30 * 60 * 1000;
+        const THIRTY_SECONDS = 30 * 1000;
+        const THIRTY_MINUTES = THIRTY_SECONDS * 60;

        [
            'example/eventGenerator'
@@ -43,9 +43,9 @@
            openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
        );

+        openmct.install(openmct.plugins.LocalStorage());
        openmct.install(openmct.plugins.Espresso());
        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalStorage());
        openmct.install(openmct.plugins.Generator());
        openmct.install(openmct.plugins.ExampleImagery());
        openmct.install(openmct.plugins.UTCTimeSystem());
@@ -63,7 +63,34 @@
                    bounds: {
                        start: Date.now() - THIRTY_MINUTES,
                        end: Date.now()
-                    }
+                    },
+                    presets: [
+                        {
+                            label: 'Last Day',
+                            bounds: {
+                                start: Date.now() - 1000 * 60 * 60 * 24,
+                                end: Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last 2 hours',
+                            bounds: {
+                                start: Date.now() - 1000 * 60 * 60 * 2,
+                                end: Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last hour',
+                            bounds: {
+                                start: Date.now() - 1000 * 60 * 60,
+                                end: Date.now()
+                            }
+                        }
+                    ],
+                    // maximum entries to retain in conductor history
+                    records: 10,
+                    // maximum duration between start and end bounds
+                    limit: 1000 * 60 * 60 * 24
                },
                {
                    name: "Realtime",
@@ -71,7 +98,7 @@
                    clock: 'local',
                    clockOffsets: {
                        start: - THIRTY_MINUTES,
-                        end: FIVE_MINUTES
+                        end: THIRTY_SECONDS
                    }
                }
            ]
--- a/karma.conf.js
+++ b/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,27 +68,27 @@ 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' ]
+            'platform/**/*Spec.js': ['webpack', 'sourcemap'],
+            'src/**/*Spec.js': ['webpack', 'sourcemap']
        },
        webpack: webpackConfig,
        webpackMiddleware: {
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
  "description": "The Open MCT core platform",
  "dependencies": {},
  "devDependencies": {
-    "acorn": "6.2.0",
-    "angular": "1.4.14",
+    "angular": "1.7.9",
    "angular-route": "1.4.14",
    "babel-eslint": "8.2.6",
    "comma-separated-values": "^3.6.4",
@@ -43,6 +42,7 @@
    "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",
@@ -53,9 +53,9 @@
    "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",
+    "moment-timezone": "0.5.28",
    "node-bourbon": "^4.2.3",
    "node-sass": "^4.9.2",
    "painterro": "^0.2.65",
@@ -76,14 +76,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",
--- a/platform/framework/src/FrameworkLayer.js
+++ b/platform/framework/src/FrameworkLayer.js
@@ -87,6 +87,11 @@ define([
                bootstrapper
            );

+        // Override of angular1.6 ! hashPrefix
+        app.config(['$locationProvider', function ($locationProvider) {
+            $locationProvider.hashPrefix('');
+        }]);
+
        // Apply logging levels; this must be done now, before the
        // first log statement.
        new LogLevel(logLevel).configure(app, $log);
--- a/platform/persistence/elastic/bundle.js
+++ b/platform/persistence/elastic/bundle.js
@@ -71,7 +71,7 @@ define([
                    },
                    {
                        "key": "ELASTIC_PATH",
-                        "value": "mct/domain_object",
+                        "value": "mct/_doc",
                        "priority": "fallback"
                    },
                    {
--- a/platform/persistence/elastic/src/ElasticPersistenceProvider.js
+++ b/platform/persistence/elastic/src/ElasticPersistenceProvider.js
@@ -32,9 +32,9 @@ define(
        // JSLint doesn't like underscore-prefixed properties,
        // so hide them here.
        var SRC = "_source",
-            REV = "_version",
-            ID = "_id",
-            CONFLICT = 409;
+            CONFLICT = 409,
+            SEQ_NO = "_seq_no",
+            PRIMARY_TERM = "_primary_term";

        /**
         * The ElasticPersistenceProvider reads and writes JSON documents
@@ -104,7 +104,8 @@ define(
        // Get a domain object model out of ElasticSearch's response
        ElasticPersistenceProvider.prototype.getModel = function (response) {
            if (response && response[SRC]) {
-                this.revs[response[ID]] = response[REV];
+                this.revs[response[SEQ_NO]] = response[SEQ_NO];
+                this.revs[response[PRIMARY_TERM]] = response[PRIMARY_TERM];
                return response[SRC];
            } else {
                return undefined;
@@ -116,7 +117,8 @@ define(
        // indicate that the request failed.
        ElasticPersistenceProvider.prototype.checkResponse = function (response, key) {
            if (response && !response.error) {
-                this.revs[key] = response[REV];
+                this.revs[SEQ_NO] = response[SEQ_NO];
+                this.revs[PRIMARY_TERM] = response[PRIMARY_TERM];
                return response;
            } else {
                return this.handleError(response, key);
@@ -147,7 +149,7 @@ define(
            function checkUpdate(response) {
                return self.checkResponse(response, key);
            }
-            return this.put(key, value, { version: this.revs[key] })
+            return this.put(key, value)
                .then(checkUpdate);
        };

--- a/platform/persistence/elastic/test/ElasticPersistenceProviderSpec.js
+++ b/platform/persistence/elastic/test/ElasticPersistenceProviderSpec.js
@@ -85,7 +85,7 @@ define(
            it("allows object creation", function () {
                var model = { someKey: "some value" };
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 1 }
+                    data: { "_id": "abc", "_seq_no": 1, "_primary_term": 1 }
                }));
                provider.createObject("testSpace", "abc", model).then(capture);
                expect(mockHttp).toHaveBeenCalledWith({
@@ -100,7 +100,7 @@ define(
            it("allows object models to be read back", function () {
                var model = { someKey: "some value" };
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 1, "_source": model }
+                    data: { "_id": "abc", "_seq_no": 1, "_primary_term": 1, "_source": model }
                }));
                provider.readObject("testSpace", "abc").then(capture);
                expect(mockHttp).toHaveBeenCalledWith({
@@ -117,19 +117,19 @@ define(

                // First do a read to populate rev tags...
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 42, "_source": {} }
+                    data: { "_id": "abc", "_source": {} }
                }));
                provider.readObject("testSpace", "abc");

                // Now perform an update
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 43, "_source": {} }
+                    data: { "_id": "abc", "_seq_no": 1, "_source": {} }
                }));
                provider.updateObject("testSpace", "abc", model).then(capture);
                expect(mockHttp).toHaveBeenCalledWith({
                    url: "/test/db/abc",
                    method: "PUT",
-                    params: { version: 42 },
+                    params: undefined,
                    data: model
                });
                expect(capture.calls.mostRecent().args[0]).toBeTruthy();
@@ -138,13 +138,13 @@ define(
            it("allows object deletion", function () {
                // First do a read to populate rev tags...
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 42, "_source": {} }
+                    data: { "_id": "abc", "_source": {} }
                }));
                provider.readObject("testSpace", "abc");

                // Now perform an update
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 42, "_source": {} }
+                    data: { "_id": "abc", "_source": {} }
                }));
                provider.deleteObject("testSpace", "abc", {}).then(capture);
                expect(mockHttp).toHaveBeenCalledWith({
@@ -167,13 +167,13 @@ define(
                expect(capture).toHaveBeenCalledWith(undefined);
            });

-            it("handles rejection due to version", function () {
+            it("handles rejection due to _seq_no", function () {
                var model = { someKey: "some value" },
                    mockErrorCallback = jasmine.createSpy('error');

                // First do a read to populate rev tags...
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 42, "_source": {} }
+                    data: { "_id": "abc", "_seq_no": 1, "_source": {} }
                }));
                provider.readObject("testSpace", "abc");

@@ -196,7 +196,7 @@ define(

                // First do a read to populate rev tags...
                mockHttp.and.returnValue(mockPromise({
-                    data: { "_id": "abc", "_version": 42, "_source": {} }
+                    data: { "_id": "abc", "_seq_no": 1, "_source": {} }
                }));
                provider.readObject("testSpace", "abc");

--- a/scripts/test-coverage.sh
+++ b/scripts/test-coverage.sh
@@ -0,0 +1,2 @@
+export NODE_OPTIONS=--max_old_space_size=4096
+cross-env COVERAGE=true karma start --single-run
--- a/src/plugins/condition/Condition.js
+++ b/src/plugins/condition/Condition.js
@@ -204,7 +204,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 => {
--- a/src/plugins/condition/ConditionManager.js
+++ b/src/plugins/condition/ConditionManager.js
@@ -55,7 +55,7 @@ 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)
        );
        this.updateConditionTelemetry();
    }
@@ -258,9 +258,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 +272,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 +290,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 +329,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]);
--- a/src/plugins/condition/ConditionSetMetadataProvider.js
+++ b/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
+                    }
                }
            ])
        };
--- a/src/plugins/condition/ConditionSetTelemetryProvider.js
+++ b/src/plugins/condition/ConditionSetTelemetryProvider.js
@@ -45,7 +45,7 @@ export default class ConditionSetTelemetryProvider {

        return conditionManager.requestLADConditionSetOutput()
            .then(latestOutput => {
-                return latestOutput ? [latestOutput] : [];
+                return latestOutput;
            });
    }

--- a/src/plugins/condition/StyleRuleManager.js
+++ b/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,9 +85,13 @@ export default class StyleRuleManager extends EventEmitter {
            let isNewConditionSet = !this.conditionSetIdentifier ||
                                    !this.openmct.objects.areIdsEqual(this.conditionSetIdentifier, styleConfiguration.conditionSetIdentifier);
            this.initialize(styleConfiguration);
-            //Only resubscribe if the conditionSet has changed.
-            if (isNewConditionSet) {
-                this.subscribeToConditionSet();
+            if (this.isEditing) {
+                this.applySelectedConditionStyle();
+            } else {
+                //Only resubscribe if the conditionSet has changed.
+                if (isNewConditionSet) {
+                    this.subscribeToConditionSet();
+                }
            }
        }
    }
@@ -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,7 @@ export default class StyleRuleManager extends EventEmitter {
        }
        delete this.stopProvidingTelemetry;
        this.conditionSetIdentifier = undefined;
+        this.isEditing = undefined;
    }

 }
--- a/src/plugins/condition/components/Condition.vue
+++ b/src/plugins/condition/components/Condition.vue
@@ -30,6 +30,7 @@
 >
    <div class="c-condition-h__drop-target"></div>
    <div v-if="isEditing"
+         :class="{'is-current': condition.id === currentConditionId}"
         class="c-condition c-condition--edit"
    >
        <!-- Edit view -->
@@ -167,6 +168,7 @@
    </div>
    <div v-else
         class="c-condition c-condition--browse"
+         :class="{'is-current': condition.id === currentConditionId}"
    >
        <!-- Browse view -->
        <div class="c-condition__header">
@@ -199,6 +201,10 @@ export default {
        ConditionDescription
    },
    props: {
+        currentConditionId: {
+            type: String,
+            default: ''
+        },
        condition: {
            type: Object,
            required: true
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -58,6 +58,7 @@
            <Condition v-for="(condition, index) in conditionCollection"
                       :key="condition.id"
                       :condition="condition"
+                       :current-condition-id="currentConditionId"
                       :condition-index="index"
                       :telemetry="telemetryObjs"
                       :is-editing="isEditing"
@@ -107,7 +108,8 @@ export default {
            moveIndex: undefined,
            isDragging: false,
            defaultOutput: undefined,
-            dragCounter: 0
+            dragCounter: 0,
+            currentConditionId: ''
        };
    },
    watch: {
@@ -145,6 +147,7 @@ export default {
    },
    methods: {
        handleConditionSetResultUpdated(data) {
+            this.currentConditionId = data.conditionId;
            this.$emit('conditionSetResultUpdated', data)
        },
        observeForChanges() {
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -190,6 +190,7 @@
 }

 .c-condition {
+    border: 1px solid transparent;
    flex-direction: column;
    min-width: 400px;

@@ -234,6 +235,12 @@
    &__summary {
        flex: 1 1 auto;
    }
+
+    &.is-current {
+        $c: $colorBodyFg;
+        border-color: rgba($c, 0.2);
+        background: rgba($c, 0.2);
+    }
 }

 /***************************** CONDITION DEFINITION, EDITING */
--- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue
+++ b/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);
        }
--- a/src/plugins/condition/components/inspector/conditional-styles.scss
+++ b/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.2);
+            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 {
--- a/src/plugins/condition/criterion/AllTelemetryCriterion.js
+++ b/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,
-            {
-                strategy: 'latest',
-                size: 1
-            }
-        );
+    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
                };
            });
    }
--- a/src/plugins/condition/criterion/TelemetryCriterion.js
+++ b/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,
-            {
-                strategy: 'latest',
-                size: 1
-            }
-        );
+    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)
            };
        });
    }
--- a/src/plugins/condition/utils/operations.js
+++ b/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);
        }
    },
    {
--- a/src/plugins/displayLayout/mixins/objectStyles-mixin.js
+++ b/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);
            }
--- a/src/plugins/localTimeSystem/LocalTimeSystem.js
+++ b/src/plugins/localTimeSystem/LocalTimeSystem.js
@@ -41,7 +41,7 @@ define([], function () {
        this.timeFormat = 'local-format';
        this.durationFormat = 'duration';

-        this.isUTCBased = false;
+        this.isUTCBased = true;
    }

    return LocalTimeSystem;
--- a/src/plugins/notebook/components/notebook-embed.vue
+++ b/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) {
--- a/src/plugins/notebook/components/notebook-entry.vue
+++ b/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);
--- a/src/plugins/notebook/components/notebook-menu-switcher.vue
+++ b/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];
-            const bounds = this.openmct.time.bounds();
-            const objectPath = this.openmct.router.path;
-            const snapshotMeta = {
-                bounds,
-                link: window.location.href,
-                objectPath,
-                openmct: this.openmct
-            };
+            this.hideMenu();

-            this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+            this.$nextTick(() => {
+                const element = document.querySelector('.c-overlay__contents')
+                    || document.getElementsByClassName('l-shell__main-container')[0];
+
+                const bounds = this.openmct.time.bounds();
+                const link = !this.ignoreLink
+                    ? window.location.href
+                    : null;
+
+                const objectPath = this.objectPath || this.openmct.router.path;
+                const snapshotMeta = {
+                    bounds,
+                    link,
+                    objectPath,
+                    openmct: this.openmct
+                };
+
+                this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+            });
        }
    }
 }
--- a/src/plugins/notebook/components/notebook.vue
+++ b/src/plugins/notebook/components/notebook.vue
@@ -495,7 +495,7 @@ export default {
                return;
            }

-            if (section.id !== defaultNotebookSection.id) {
+            if (id !== defaultNotebookSection.id) {
                return;
            }

--- a/src/plugins/plot/res/templates/stacked-plot.html
+++ b/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()"
--- a/src/plugins/plot/src/chart/MCTChartController.js
+++ b/src/plugins/plot/src/chart/MCTChartController.js
@@ -54,27 +54,29 @@ function (
     * @constructor
     */
    function MCTChartController($scope) {
-        this.$scope = $scope;
-        this.isDestroyed = false;
-        this.lines = [];
-        this.pointSets = [];
-        this.alarmSets = [];
-        this.offset = {};
-        this.config = $scope.config;
-        this.listenTo(this.$scope, '$destroy', this.destroy, this);
-        this.draw = this.draw.bind(this);
-        this.scheduleDraw = this.scheduleDraw.bind(this);
-        this.seriesElements = new WeakMap();
+        this.$onInit = () => {
+            this.$scope = $scope;
+            this.isDestroyed = false;
+            this.lines = [];
+            this.pointSets = [];
+            this.alarmSets = [];
+            this.offset = {};
+            this.config = $scope.config;
+            this.listenTo(this.$scope, '$destroy', this.destroy, this);
+            this.draw = this.draw.bind(this);
+            this.scheduleDraw = this.scheduleDraw.bind(this);
+            this.seriesElements = new WeakMap();

-        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);
-        this.$scope.$watch('rectangles', this.scheduleDraw);
-        this.config.series.forEach(this.onSeriesAdd, this);
+            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);
+            this.$scope.$watch('rectangles', this.scheduleDraw);
+            this.config.series.forEach(this.onSeriesAdd, this);
+        }
    }

    eventHelpers.extend(MCTChartController.prototype);
--- a/src/plugins/plot/src/plot/MCTPlotController.js
+++ b/src/plugins/plot/src/plot/MCTPlotController.js
@@ -34,25 +34,27 @@ define([
     * values near the cursor.
     */
    function MCTPlotController($scope, $element, $window) {
-        this.$scope = $scope;
-        this.$scope.config = this.config;
-        this.$scope.plot = this;
-        this.$element = $element;
-        this.$window = $window;
+        this.$onInit = () => {
+            this.$scope = $scope;
+            this.$scope.config = this.config;
+            this.$scope.plot = this;
+            this.$element = $element;
+            this.$window = $window;

-        this.xScale = new LinearScale(this.config.xAxis.get('displayRange'));
-        this.yScale = new LinearScale(this.config.yAxis.get('displayRange'));
+            this.xScale = new LinearScale(this.config.xAxis.get('displayRange'));
+            this.yScale = new LinearScale(this.config.yAxis.get('displayRange'));

-        this.pan = undefined;
-        this.marquee = undefined;
+            this.pan = undefined;
+            this.marquee = undefined;

-        this.chartElementBounds = undefined;
-        this.tickUpdate = false;
+            this.chartElementBounds = undefined;
+            this.tickUpdate = false;

-        this.$scope.plotHistory = this.plotHistory = [];
-        this.listenTo(this.$scope, 'plot:clearHistory', this.clear, this);
+            this.$scope.plotHistory = this.plotHistory = [];
+            this.listenTo(this.$scope, 'plot:clearHistory', this.clear, this);

-        this.initialize();
+            this.initialize();
+        }
    }

    MCTPlotController.$inject = ['$scope', '$element', '$window'];
@@ -65,10 +67,10 @@ define([
        }
        this.$canvas = this.$element.find('canvas');

-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
        this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
        this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
        this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);

        this.watchForMarquee();
    };
@@ -76,7 +78,6 @@ define([
    MCTPlotController.prototype.initialize = function () {
        this.$canvas = this.$element.find('canvas');

-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
        this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
        this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
        this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
@@ -208,23 +209,6 @@ define([
        this.highlightValues(point);
    };

-    MCTPlotController.prototype.onMouseClick = function ($event) {
-        const isClick = this.isMouseClick();
-        if (this.pan) {
-            this.endPan($event);
-        }
-        if (this.marquee) {
-            this.endMarquee($event);
-        }
-        this.$scope.$apply();
-
-        if (!this.$scope.highlights.length || !isClick) {
-            return;
-        }
-
-        this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
-    };
-
    MCTPlotController.prototype.highlightValues = function (point) {
        this.highlightPoint = point;
        this.$scope.$emit('plot:highlight:update', point);
@@ -272,11 +256,23 @@ define([
    MCTPlotController.prototype.onMouseUp = function ($event) {
        this.stopListening(this.$window, 'mouseup', this.onMouseUp, this);
        this.stopListening(this.$window, 'mousemove', this.trackMousePosition, this);
+
+        if (this.isMouseClick()) {
+            this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
+        }
+
+        if (this.allowPan) {
+            return this.endPan($event);
+        }
+
+        if (this.allowMarquee) {
+            return this.endMarquee($event);
+        }
    };

    MCTPlotController.prototype.isMouseClick = function () {
        if (!this.marquee) {
-            return;
+            return false;
        }

        const { start, end } = this.marquee;
--- a/src/plugins/plot/src/plot/MCTTicksController.js
+++ b/src/plugins/plot/src/plot/MCTTicksController.js
@@ -114,15 +114,17 @@ define([
    }

    function MCTTicksController($scope, $element) {
-        this.$scope = $scope;
-        this.$element = $element;
+        this.$onInit = () => {
+            this.$scope = $scope;
+            this.$element = $element;

-        this.tickCount = 4;
-        this.tickUpdate = false;
-        this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
-        this.listenTo(this.axis, 'change:format', this.updateTicks, this);
-        this.listenTo(this.$scope, '$destroy', this.stopListening, this);
-        this.updateTicks();
+            this.tickCount = 4;
+            this.tickUpdate = false;
+            this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
+            this.listenTo(this.axis, 'change:format', this.updateTicks, this);
+            this.listenTo(this.$scope, '$destroy', this.stopListening, this);
+            this.updateTicks();
+        }
    }

    MCTTicksController.$inject = ['$scope', '$element'];
--- a/src/plugins/plot/src/services/ExportImageService.js
+++ b/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) {
--- a/src/plugins/plot/src/telemetry/PlotController.js
+++ b/src/plugins/plot/src/telemetry/PlotController.js
@@ -227,8 +227,9 @@ define([
    };

    PlotController.prototype.stopLoading = function () {
-        this.$scope.pending -= 1;
-        this.$scope.$digest();
+        this.$scope.$evalAsync(() => {
+            this.$scope.pending -= 1;
+        });
    };

    /**
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -88,7 +88,8 @@ define([
    var bundleMap = {
        LocalStorage: 'platform/persistence/local',
        MyItems: 'platform/features/my-items',
-        CouchDB: 'platform/persistence/couch'
+        CouchDB: 'platform/persistence/couch',
+        Elasticsearch: 'platform/persistence/elastic'
    };

    var plugins = _.mapValues(bundleMap, function (bundleName, pluginName) {
--- a/src/plugins/telemetryTable/components/table.scss
+++ b/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;
+            }
+        }
+    }
 }
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -22,7 +22,12 @@
 <template>
 <div
    class="c-conductor"
-    :class="[isFixed ? 'is-fixed-mode' : 'is-realtime-mode']"
+    :class="[
+        { 'is-zooming': isZooming },
+        { 'is-panning': isPanning },
+        { 'alt-pressed': altPressed },
+        isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+    ]"
 >
    <form
        ref="conductorForm"
@@ -52,7 +57,7 @@
                    type="text"
                    autocorrect="off"
                    spellcheck="false"
-                    @change="validateAllBounds(); submitForm()"
+                    @change="validateAllBounds('startDate'); submitForm()"
                >
                <date-picker
                    v-if="isFixed && isUTCBased"
@@ -92,7 +97,7 @@
                    autocorrect="off"
                    spellcheck="false"
                    :disabled="!isFixed"
-                    @change="validateAllBounds(); submitForm()"
+                    @change="validateAllBounds('endDate'); submitForm()"
                >
                <date-picker
                    v-if="isFixed && isUTCBased"
@@ -122,14 +127,25 @@

            <conductor-axis
                class="c-conductor__ticks"
-                :bounds="rawBounds"
-                @panAxis="setViewFromBounds"
+                :view-bounds="viewBounds"
+                :is-fixed="isFixed"
+                :alt-pressed="altPressed"
+                @endPan="endPan"
+                @endZoom="endZoom"
+                @panAxis="pan"
+                @zoomAxis="zoom"
            />
+
        </div>
        <div class="c-conductor__controls">
-            <!-- Mode, time system menu buttons and duration slider -->
            <ConductorMode class="c-conductor__mode-select" />
            <ConductorTimeSystem class="c-conductor__time-system-select" />
+            <ConductorHistory
+                v-if="isFixed"
+                class="c-conductor__history-select"
+                :bounds="openmct.time.bounds()"
+                :time-system="timeSystem"
+            />
        </div>
        <input
            type="submit"
@@ -145,6 +161,7 @@ import ConductorTimeSystem from './ConductorTimeSystem.vue';
 import DatePicker from './DatePicker.vue';
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorModeIcon from './ConductorModeIcon.vue';
+import ConductorHistory from './ConductorHistory.vue'

 const DEFAULT_DURATION_FORMATTER = 'duration';

@@ -155,7 +172,8 @@ export default {
        ConductorTimeSystem,
        DatePicker,
        ConductorAxis,
-        ConductorModeIcon
+        ConductorModeIcon,
+        ConductorHistory
    },
    data() {
        let bounds = this.openmct.time.bounds();
@@ -165,6 +183,7 @@ export default {
        let durationFormatter = this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);

        return {
+            timeSystem: timeSystem,
            timeFormatter: timeFormatter,
            durationFormatter: durationFormatter,
            offsets: {
@@ -175,29 +194,64 @@ export default {
                start: timeFormatter.format(bounds.start),
                end: timeFormatter.format(bounds.end)
            },
-            rawBounds: {
+            viewBounds: {
                start: bounds.start,
                end: bounds.end
            },
            isFixed: this.openmct.time.clock() === undefined,
            isUTCBased: timeSystem.isUTCBased,
-            showDatePicker: false
+            showDatePicker: false,
+            altPressed: false,
+            isPanning: false,
+            isZooming: false
        }
    },
+    created() {
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Alt') {
+                this.altPressed = true;
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key === 'Alt') {
+                this.altPressed = false;
+            }
+        });
+    },
    mounted() {
        this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-
        this.openmct.time.on('bounds', this.setViewFromBounds);
        this.openmct.time.on('timeSystem', this.setTimeSystem);
        this.openmct.time.on('clock', this.setViewFromClock);
        this.openmct.time.on('clockOffsets', this.setViewFromOffsets)
    },
    methods: {
+        pan(bounds) {
+            this.isPanning = true;
+            this.setViewFromBounds(bounds);
+        },
+        endPan(bounds) {
+            this.isPanning = false;
+            if (bounds) {
+                this.openmct.time.bounds(bounds);
+            }
+        },
+        zoom(bounds) {
+            this.isZooming = true;
+            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+            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);
+        },
        setTimeSystem(timeSystem) {
+            this.timeSystem = timeSystem
            this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
            this.durationFormatter = this.getFormatter(
                timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-
            this.isUTCBased = timeSystem.isUTCBased;
        },
        setOffsetsFromView($event) {
@@ -237,8 +291,8 @@ export default {
        setViewFromBounds(bounds) {
            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
            this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-            this.rawBounds.start = bounds.start;
-            this.rawBounds.end = bounds.end;
+            this.viewBounds.start = bounds.start;
+            this.viewBounds.end = bounds.end;
        },
        setViewFromOffsets(offsets) {
            this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
@@ -251,6 +305,15 @@ export default {
                this.setOffsetsFromView();
            }
        },
+        getBoundsLimit() {
+            const configuration = this.configuration.menuOptions
+                .filter(option => option.timeSystem ===  this.timeSystem.key)
+                .find(option => option.limit);
+
+            const limit = configuration ? configuration.limit : undefined;
+
+            return limit;
+        },
        clearAllValidation() {
            if (this.isFixed) {
                [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
@@ -262,37 +325,37 @@ export default {
            input.setCustomValidity('');
            input.title = '';
        },
-        validateAllBounds() {
-            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
-                let validationResult = true;
-                let formattedDate;
+        validateAllBounds(ref) {
+            const input = this.$refs[ref];
+            let validationResult = true;

-                if (input === this.$refs.startDate) {
-                    formattedDate = this.formattedBounds.start;
-                } else {
-                    formattedDate = this.formattedBounds.end;
-                }
+            const formattedDate = input === this.$refs.startDate
+                ? this.formattedBounds.start
+                : this.formattedBounds.end
+            ;

-                if (!this.timeFormatter.validate(formattedDate)) {
-                    validationResult = 'Invalid date';
+            if (!this.timeFormatter.validate(formattedDate)) {
+                validationResult = 'Invalid date';
+            } else {
+                let boundsValues = {
+                    start: this.timeFormatter.parse(this.formattedBounds.start),
+                    end: this.timeFormatter.parse(this.formattedBounds.end)
+                };
+                const limit = this.getBoundsLimit();
+
+                if (
+                    this.timeSystem.isUTCBased
+                    && limit
+                    && boundsValues.end - boundsValues.start > limit
+                ) {
+                    validationResult = "Start and end difference exceeds allowable limit";
                } else {
-                    let boundsValues = {
-                        start: this.timeFormatter.parse(this.formattedBounds.start),
-                        end: this.timeFormatter.parse(this.formattedBounds.end)
-                    };
                    validationResult = this.openmct.time.validateBounds(boundsValues);
                }

-                if (validationResult !== true) {
-                    input.setCustomValidity(validationResult);
-                    input.title = validationResult;
-                    return false;
-                } else {
-                    input.setCustomValidity('');
-                    input.title = '';
-                    return true;
-                }
-            });
+            }
+
+            this.handleValidationResult(input, validationResult);
        },
        validateAllOffsets(event) {
            return [this.$refs.startOffset, this.$refs.endOffset].every((input) => {
@@ -315,17 +378,20 @@ export default {
                    validationResult = this.openmct.time.validateOffsets(offsetValues);
                }

-                if (validationResult !== true) {
-                    input.setCustomValidity(validationResult);
-                    input.title = validationResult;
-                    return false;
-                } else {
-                    input.setCustomValidity('');
-                    input.title = '';
-                    return true;
-                }
+                this.handleValidationResult(input, validationResult);
            });
        },
+        handleValidationResult(input, validationResult) {
+            if (validationResult !== true) {
+                input.setCustomValidity(validationResult);
+                input.title = validationResult;
+                return false;
+            } else {
+                input.setCustomValidity('');
+                input.title = '';
+                return true;
+            }
+        },
        submitForm() {
            // Allow Vue model to catch up to user input.
            // Submitting form will cause validation messages to display (but only if triggered by button click)
@@ -338,12 +404,12 @@ export default {
        },
        startDateSelected(date) {
            this.formattedBounds.start = this.timeFormatter.format(date);
-            this.validateAllBounds();
+            this.validateAllBounds('startDate');
            this.submitForm();
        },
        endDateSelected(date) {
            this.formattedBounds.end = this.timeFormatter.format(date);
-            this.validateAllBounds();
+            this.validateAllBounds('endDate');
            this.submitForm();
        }
    }
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -24,7 +24,12 @@
    ref="axisHolder"
    class="c-conductor-axis"
    @mousedown="dragStart($event)"
-></div>
+>
+    <div
+        class="c-conductor-axis__zoom-indicator"
+        :style="zoomStyle"
+    ></div>
+</div>
 </template>

 <script>
@@ -43,14 +48,35 @@ const PIXELS_PER_TICK_WIDE = 200;
 export default {
    inject: ['openmct'],
    props: {
-        bounds: {
+        viewBounds: {
            type: Object,
            required: true
+        },
+        isFixed: {
+            type: Boolean,
+            required: true
+        },
+        altPressed: {
+            type: Boolean,
+            required: true
+        }
+    },
+    data() {
+        return {
+            inPanMode: false,
+            dragStartX: undefined,
+            dragX: undefined,
+            zoomStyle: {}
+        }
+    },
+    computed: {
+        inZoomMode() {
+            return !this.inPanMode;
        }
    },
    watch: {
-        bounds: {
-            handler(bounds) {
+        viewBounds: {
+            handler() {
                this.setScale();
            },
            deep: true
@@ -58,18 +84,23 @@ export default {
    },
    mounted() {
        let axisHolder = this.$refs.axisHolder;
-        let height = axisHolder.offsetHeight;
+        this.height = axisHolder.offsetHeight;
+        this.width = axisHolder.clientWidth;
+        const rect = axisHolder.getBoundingClientRect();
+        this.left = Math.round(rect.left);
+
        let vis = d3Selection.select(axisHolder)
            .append("svg:svg")
            .attr("width", "100%")
-            .attr("height", height);
+            .attr("height", this.height);
+

-        this.width = this.$refs.axisHolder.clientWidth;
        this.xAxis = d3Axis.axisTop();
        this.dragging = false;

        // draw x axis with labels. CSS is used to position them.
-        this.axisElement = vis.append("g");
+        this.axisElement = vis.append("g")
+            .attr("class", "axis");

        this.setViewFromTimeSystem(this.openmct.time.timeSystem());
        this.setScale();
@@ -83,12 +114,15 @@ export default {
    methods: {
        setScale() {
            let timeSystem = this.openmct.time.timeSystem();
-            let bounds = this.bounds;

            if (timeSystem.isUTCBased) {
-                this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
+                this.xScale.domain(
+                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
+                );
            } else {
-                this.xScale.domain([bounds.start, bounds.end]);
+                this.xScale.domain(
+                    [this.viewBounds.start, this.viewBounds.end]
+                );
            }

            this.xAxis.scale(this.xScale);
@@ -102,7 +136,7 @@ export default {
                this.xAxis.ticks(this.width / PIXELS_PER_TICK);
            }

-            this.msPerPixel = (bounds.end - bounds.start) / this.width;
+            this.msPerPixel = (this.viewBounds.end - this.viewBounds.start) / this.width;
        },
        setViewFromTimeSystem(timeSystem) {
            //The D3 scale used depends on the type of time system as d3
@@ -120,9 +154,8 @@ export default {
        },
        getActiveFormatter() {
            let timeSystem = this.openmct.time.timeSystem();
-            let isFixed = this.openmct.time.clock() === undefined;

-            if (isFixed) {
+            if (this.isFixed) {
                return this.getFormatter(timeSystem.timeFormat);
            } else {
                return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
@@ -134,42 +167,128 @@ export default {
            }).formatter;
        },
        dragStart($event) {
-            let isFixed = this.openmct.time.clock() === undefined;
-            if (isFixed) {
+            if (this.isFixed) {
                this.dragStartX = $event.clientX;

+                if (this.altPressed) {
+                    this.inPanMode = true;
+                }
+
                document.addEventListener('mousemove', this.drag);
                document.addEventListener('mouseup', this.dragEnd, {
                    once: true
                });
+
+                if (this.inZoomMode) {
+                    this.startZoom();
+                }
            }
        },
        drag($event) {
            if (!this.dragging) {
                this.dragging = true;
-                requestAnimationFrame(()=>{
-                    let deltaX = $event.clientX - this.dragStartX;
-                    let percX = deltaX / this.width;
-                    let bounds = this.openmct.time.bounds();
-                    let deltaTime = bounds.end - bounds.start;
-                    let newStart = bounds.start - percX * deltaTime;
-                    this.$emit('panAxis',{
-                        start: newStart,
-                        end: newStart + deltaTime
-                    });
+
+                requestAnimationFrame(() => {
+                    this.dragX = $event.clientX;
+                    this.inPanMode ? this.pan() : this.zoom();
                    this.dragging = false;
-                })
-            } else {
-                console.log('Rejected drag due to RAF cap');
+                });
            }
        },
        dragEnd() {
+            this.inPanMode ? this.endPan() : this.endZoom();
+
            document.removeEventListener('mousemove', this.drag);
-            this.openmct.time.bounds({
-                start: this.bounds.start,
-                end: this.bounds.end
+            this.dragStartX = undefined;
+            this.dragX = undefined;
+        },
+        pan() {
+            const panBounds = this.getPanBounds();
+            this.$emit('panAxis', panBounds);
+        },
+        endPan() {
+            const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+                ? this.getPanBounds()
+                : undefined;
+            this.$emit('endPan', panBounds);
+            this.inPanMode = false;
+        },
+        getPanBounds() {
+            const bounds = this.openmct.time.bounds();
+            const deltaTime = bounds.end - bounds.start;
+            const deltaX = this.dragX - this.dragStartX;
+            const percX = deltaX / this.width;
+            const panStart = bounds.start - percX * deltaTime;
+
+            return {
+                start: panStart,
+                end: panStart + deltaTime
+            };
+        },
+        startZoom() {
+            const x = this.scaleToBounds(this.dragStartX);
+
+            this.zoomStyle = {
+                left: `${this.dragStartX - this.left}px`
+            };
+
+            this.$emit('zoomAxis', {
+                start: x,
+                end: x
            });
        },
+        zoom() {
+            const zoomRange = this.getZoomRange();
+
+            this.zoomStyle = {
+                left: `${zoomRange.start - this.left}px`,
+                width: `${zoomRange.end - zoomRange.start}px`
+            };
+
+            this.$emit('zoomAxis', {
+                start: this.scaleToBounds(zoomRange.start),
+                end: this.scaleToBounds(zoomRange.end)
+            });
+        },
+        endZoom() {
+            const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+                ? this.getZoomRange()
+                : undefined;
+
+            const zoomBounds = zoomRange
+                ? {
+                    start: this.scaleToBounds(zoomRange.start),
+                    end: this.scaleToBounds(zoomRange.end)
+                }
+                : this.openmct.time.bounds();
+
+            this.zoomStyle = {};
+            this.$emit('endZoom', zoomBounds);
+        },
+        getZoomRange() {
+            const leftBound = this.left;
+            const rightBound = this.left + this.width;
+
+            const zoomStart = this.dragX < leftBound
+                ? leftBound
+                : Math.min(this.dragX, this.dragStartX);
+
+            const zoomEnd = this.dragX > rightBound
+                ? rightBound
+                : Math.max(this.dragX, this.dragStartX);
+
+            return {
+                start: zoomStart,
+                end: zoomEnd
+            };
+        },
+        scaleToBounds(value) {
+            const bounds = this.openmct.time.bounds();
+            const timeDelta = bounds.end - bounds.start;
+            const valueDelta = value - this.left;
+            const offset = valueDelta / this.width * timeDelta;
+            return bounds.start + offset;
+        },
        resize() {
            if (this.$refs.axisHolder.clientWidth !== this.width) {
                this.width = this.$refs.axisHolder.clientWidth;
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -0,0 +1,198 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+<template>
+<div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
+    <button class="c-button--menu c-history-button icon-history"
+            @click.prevent="toggle"
+    >
+        <span class="c-button__label">History</span>
+    </button>
+    <div v-if="open"
+         class="c-menu c-conductor__history-menu"
+    >
+        <ul v-if="hasHistoryPresets">
+            <li
+                v-for="preset in presets"
+                :key="preset.label"
+                class="icon-clock"
+                @click="selectTimespan(preset.bounds)"
+            >
+                {{ preset.label }}
+            </li>
+        </ul>
+
+        <div
+            v-if="hasHistoryPresets"
+            class="c-menu__section-separator"
+        ></div>
+
+        <div class="c-menu__section-hint">
+            Past timeframes, ordered by latest first
+        </div>
+
+        <ul>
+            <li
+                v-for="(timespan, index) in historyForCurrentTimeSystem"
+                :key="index"
+                class="icon-history"
+                @click="selectTimespan(timespan)"
+            >
+                {{ formatTime(timespan.start) }} - {{ formatTime(timespan.end) }}
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import toggleMixin from '../../ui/mixins/toggle-mixin';
+
+const LOCAL_STORAGE_HISTORY_KEY = 'tcHistory';
+const DEFAULT_RECORDS = 10;
+
+export default {
+    inject: ['openmct', 'configuration'],
+    mixins: [toggleMixin],
+    props: {
+        bounds: {
+            type: Object,
+            required: true
+        },
+        timeSystem: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            history: {}, // contains arrays of timespans {start, end}, array key is time system key
+            presets: []
+        }
+    },
+    computed: {
+        hasHistoryPresets() {
+            return this.timeSystem.isUTCBased && this.presets.length;
+        },
+        historyForCurrentTimeSystem() {
+            const history = this.history[this.timeSystem.key];
+
+            return history;
+        }
+    },
+    watch: {
+        bounds: {
+            handler() {
+                this.addTimespan();
+            },
+            deep: true
+        },
+        timeSystem: {
+            handler() {
+                this.loadConfiguration();
+                this.addTimespan();
+            },
+            deep: true
+        },
+        history: {
+            handler() {
+                this.persistHistoryToLocalStorage();
+            },
+            deep: true
+        }
+    },
+    mounted() {
+        this.getHistoryFromLocalStorage();
+    },
+    methods: {
+        getHistoryFromLocalStorage() {
+            if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) {
+                this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY))
+            } else {
+                this.history = {};
+                this.persistHistoryToLocalStorage();
+            }
+        },
+        persistHistoryToLocalStorage() {
+            localStorage.setItem(LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(this.history));
+        },
+        addTimespan() {
+            const key = this.timeSystem.key;
+            let [...currentHistory] = this.history[key] || [];
+            const timespan = {
+                start: this.bounds.start,
+                end: this.bounds.end
+            };
+
+            const isNotEqual = function (entry) {
+                const start = entry.start !== this.start;
+                const end = entry.end !== this.end;
+
+                return start || end;
+            };
+            currentHistory = currentHistory.filter(isNotEqual, timespan);
+
+            while (currentHistory.length >= this.records) {
+                currentHistory.pop();
+            }
+
+            currentHistory.unshift(timespan);
+            this.history[key] = currentHistory;
+        },
+        selectTimespan(timespan) {
+            this.openmct.time.bounds(timespan);
+        },
+        selectHours(hours) {
+            const now = Date.now();
+            this.selectTimespan({
+                start: now - hours * 60 * 60 * 1000,
+                end: now
+            });
+        },
+        loadConfiguration() {
+            const configurations = this.configuration.menuOptions
+                .filter(option => option.timeSystem ===  this.timeSystem.key);
+
+            this.presets = this.loadPresets(configurations);
+            this.records = this.loadRecords(configurations);
+        },
+        loadPresets(configurations) {
+            const configuration = configurations.find(option => option.presets);
+            const presets = configuration ? configuration.presets : [];
+
+            return presets;
+        },
+        loadRecords(configurations) {
+            const configuration = configurations.find(option => option.records);
+            const records = configuration ? configuration.records : DEFAULT_RECORDS;
+
+            return records;
+        },
+        formatTime(time) {
+            const formatter = this.openmct.telemetry.getValueFormatter({
+                format: this.timeSystem.timeFormat
+            }).formatter;
+
+            return formatter.format(time);
+        }
+    }
+}
+</script>
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -110,7 +110,7 @@ export default {
            if (clock === undefined) {
                return {
                    key: 'fixed',
-                    name: 'Fixed Timespan Mode',
+                    name: 'Fixed Timespan',
                    description: 'Query and explore data that falls between two fixed datetimes.',
                    cssClass: 'icon-tabular'
                }
--- a/src/plugins/timeConductor/conductor-axis.scss
+++ b/src/plugins/timeConductor/conductor-axis.scss
@@ -13,7 +13,7 @@
        text-rendering: geometricPrecision;
        width: 100%;
        height: 100%;
-        > g {
+        > g.axis {
            // Overall Tick holder
            transform: translateY($tickYPos);
            path {
@@ -44,7 +44,6 @@
    }

    body.desktop .is-fixed-mode & {
-        @include cursorGrab();
        background-size: 3px 30%;
        background-color: $colorBodyBgSubtle;
        box-shadow: inset rgba(black, 0.4) 0 1px 1px;
@@ -55,17 +54,6 @@
            stroke: $colorBodyBgSubtle;
            transition: $transOut;
        }
-
-        &:hover,
-        &:active {
-            $c: $colorKeySubtle;
-            background-color: $c;
-            transition: $transIn;
-            svg text {
-                stroke: $c;
-                transition: $transIn;
-            }
-        }
    }

    .is-realtime-mode & {
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -57,6 +57,65 @@
        }
    }

+    &.is-fixed-mode {
+        .c-conductor-axis {
+            &__zoom-indicator {
+                border: 1px solid transparent;
+                display: none; // Hidden by default
+            }
+        }
+
+        &:not(.is-panning),
+        &:not(.is-zooming) {
+            .c-conductor-axis {
+                &:hover,
+                &:active {
+                    cursor: col-resize;
+                    filter: $timeConductorAxisHoverFilter;
+                }
+            }
+        }
+
+        &.is-panning,
+        &.is-zooming {
+            .c-conductor-input input {
+                // Styles for inputs while zooming or panning
+                background: rgba($timeConductorActiveBg, 0.4);
+            }
+        }
+
+        &.alt-pressed {
+            .c-conductor-axis:hover {
+                // When alt is being pressed and user is hovering over the axis, set the cursor
+                @include cursorGrab();
+            }
+        }
+
+        &.is-panning {
+            .c-conductor-axis {
+                @include cursorGrab();
+                background-color: $timeConductorActivePanBg;
+                transition: $transIn;
+
+                svg text {
+                    stroke: $timeConductorActivePanBg;
+                    transition: $transIn;
+                }
+            }
+        }
+
+        &.is-zooming {
+            .c-conductor-axis__zoom-indicator {
+                display: block;
+                position: absolute;
+                background: rgba($timeConductorActiveBg, 0.4);
+                border-left-color: $timeConductorActiveBg;
+                border-right-color: $timeConductorActiveBg;
+                top: 0; bottom: 0;
+            }
+        }
+    }
+
    &.is-realtime-mode {
        .c-conductor__time-bounds {
            grid-template-columns: 20px auto 1fr auto auto;
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -142,6 +142,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;

 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -146,6 +146,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;

 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -132,7 +132,7 @@ $colorPausedFg: #fff;
 // Base variations
 $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
 $colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 10%);
+$colorKeySubtle: pushBack($colorKey, 20%);

 // Time Colors
 $colorTime: #618cff;
@@ -142,6 +142,9 @@ $colorTimeHov: pushBack($colorTime, 5%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(0.8);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #A0CDE1;

 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -462,9 +462,17 @@ select {
    text-shadow: $shdwMenuText;
    padding: $interiorMarginSm;
    box-shadow: $shdwMenu;
-    display: block;
+    display: flex;
+    flex-direction: column;
    position: absolute;
    z-index: 100;
+
+    > * {
+        flex: 0 0 auto;
+        //+ * {
+        //    margin-top: $interiorMarginSm;
+        //}
+    }
 }

@mixin menuInner() {
@@ -502,6 +510,23 @@ select {
 .c-menu {
    @include menuOuter();
    @include menuInner();
+
+    &__section-hint {
+        $m: $interiorMargin;
+        margin: $m 0;
+        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+
+        opacity: 0.6;
+        font-size: 0.9em;
+        font-style: italic;
+    }
+
+    &__section-separator {
+        $m: $interiorMargin;
+        border-top: 1px solid $colorInteriorBorder;
+        margin: $m 0;
+        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+    }
 }

 .c-super-menu {
@@ -565,6 +590,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 {
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -40,28 +40,58 @@ 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 {
-                mct-plot {
-                    display: flex;
-                    flex: 1 1 auto;
-                    height: 100%;
-                    position: relative;
-                }
-                flex: 1 1 auto;
-                &:not(:first-child) {
-                    margin-top: $interiorMargin;
+        .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;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
        }

        .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 {
--- a/src/styles/_legacy.scss
+++ b/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 {
--- a/src/styles/notebook.scss
+++ b/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 {
--- a/src/ui/components/ObjectFrame.vue
+++ b/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();
        }
--- a/src/ui/components/ObjectView.vue
+++ b/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);
            }
--- a/src/ui/components/object-frame.scss
+++ b/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 {
--- a/src/ui/inspector/Inspector.vue
+++ b/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;
        },
--- a/src/ui/layout/BrowseBar.vue
+++ b/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">
@@ -198,8 +199,6 @@ export default {
        updateName(event) {
            if (event.target.innerText !== this.domainObject.name && event.target.innerText.match(/\S/)) {
                this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
-            } else {
-                event.target.innerText = this.domainObject.name;
            }
        },
        updateNameOnEnterKeyPress(event) {
--- a/src/ui/preview/Preview.vue
+++ b/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"
-                    :current-view="currentView"
-                    @setView="setView"
-                />
-            </div>
-        </div>
-    </div>
+    <PreviewHeader
+        :current-view="currentView"
+        :domain-object="domainObject"
+        :views="views"
+        @setView="setView"
+    />
    <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;
        },
--- a/src/ui/preview/PreviewAction.js
+++ b/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);
+    }
 }
--- a/src/ui/preview/preview-header.vue
+++ b/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>
Author	SHA1	Message	Date
David Tsay	a7fb75aec6	display validation errors for specific input modified	2020-05-11 19:51:30 -07:00
David Tsay	bbac4df4b8	provide reasonable defaults for conductor configuration	2020-05-11 16:49:13 -07:00
David Tsay	ed2d728f1d	section-hint without section-separator styling	2020-05-11 16:45:01 -07:00
David Tsay	a4ae654de9	remove comments	2020-05-08 11:58:20 -07:00
David Tsay	378769fca7	fix indentation remove logging	2020-05-08 11:52:25 -07:00
David Tsay	2aac221e51	Merge branch 'master' into time-conductor-merge	2020-05-07 10:20:50 -07:00
Deep Tailor	83f9c6c528	improve plot gestures - and clean up (#3013 )	2020-05-06 10:33:59 -07:00
Andrew Henry	a5f3ba6259	Use evalAsync instead of digest() (#3001 ) Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>	2020-05-05 12:23:41 -07:00
Shefali Joshi	a70facf0c8	Merge pull request #3000 from nasa/upgrade-moment Upgrade moment to 2.25.3	2020-05-05 11:01:39 -07:00
Andrew Henry	447fe94325	Merge branch 'upgrade-moment' of https://github.com/nasa/openmct into upgrade-moment	2020-05-05 10:36:43 -07:00
Andrew Henry	8e2b666766	Upgraded moment version to 2.25.3	2020-05-05 10:36:33 -07:00
Shefali Joshi	dcbfbdbb89	Merge branch 'master' into upgrade-moment	2020-05-05 10:12:50 -07:00
Shefali Joshi	4c76bf34ab	Highlight currently winning Condition in Condition Set Edit and Read-only views (#2936 ) * Preview condition styles on selecting that condition or one of it's styles Co-authored-by: charlesh88 <charlesh88@gmail.com>	2020-05-05 09:55:42 -07:00
Andrew Henry	81b7a9d3e0	Merge branch 'master' into upgrade-moment	2020-05-01 16:47:26 -07:00
Andrew Henry	dc573c479c	Upgrade moment to 2.24.0	2020-05-01 16:25:49 -07:00
Nikhil	23303c910e	Don't allow recursive Preview actions #2775 (#2869 ) * 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>	2020-05-01 09:33:10 -07:00
Nikhil	3282934cf6	fix test coverage. (#2951 ) * fix test coverage. * changes per comments + added test-coverage script to increase max-old-space-size of V8 ref: https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_mbytes * renamed test:coverage and test:debug. * circle-ci to use test:coverage. * reduced test coverage thresholds. Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 16:57:53 -07:00
Nikhil	c157fab081	[Notebook] Save snapshot dropdown should be available from "view large" overlay #2922 (#2926 ) * [Notebook] Save snapshot dropdown should be available from "view large" overlay #2922\ * Significant improvements to Snapshot styling * [Notebook] Embed links aren't navigating #2979 Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 16:39:20 -07:00
Nikhil	7c07b66cc9	[Notebook] : Error in event handler for "updateSection": "TypeError: Cannot read property 'id' of undefined" #2921 (#2924 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 16:30:09 -07:00
Shefali Joshi	7a906ccf5c	Preview condition styles on selecting that condition or one of it's styles (#2925 ) * Preview condition styles on selecting that condition or one of it's styles * Do not evaluate conditional styles in edit mode Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 13:00:43 -07:00
Nikhil	ff7debfb81	[Notebook] Entries and Embeds need to use the same timesystem #2920 (#2923 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 11:56:08 -07:00
Joel McKinnon	92ba103f45	modified eslint script and fixed errors found (#2905 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 11:53:07 -07:00
Nikhil	2c2d8d6b56	[Notebook]: Unnecessary notification "Time bounds changed to fixed timespan mode" #2843 (#2866 ) * [Notebook]: Unnecessary notification "Time bounds changed to fixed timespan mode" #2843 * removed stopclock call. Co-authored-by: Andrew Henry <akhenry@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>	2020-04-30 10:47:49 -07:00
Charles Hacskaylo	cfadb9f4fd	Fixes #2901 (#2902 ) - Mod PreviewAction to prevent folders from being previewed; Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-30 09:48:16 -07:00
David Tsay	396817b2d1	handle non-valid requests (#2984 ) Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>	2020-04-29 15:24:12 -07:00
David Tsay	96eb6d6b74	[Conditionals] evaluation fixes (#2981 ) * change single output to state and value * do not send telemetryObjects to telemetry api request cal * normalize data on requests Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>	2020-04-29 14:56:07 -07:00
Shefali Joshi	cb5d47f66f	Use only the values required for description (#2919 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-28 16:58:58 -07:00
Shefali Joshi	ea90d02d66	Show the Styles tab for non creatable layout objects including condition sets (#2975 )	2020-04-28 13:10:29 -07:00
David Tsay	95f73d8eb8	[Conditionals] fix #2961 in master (#2969 ) * use correct id for telemetry requests * request and subscription data cache should be mutually exclusive use latest timestamp for any/all requests * do not add prop to datum remove unnecessary if check Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>	2020-04-28 13:02:23 -07:00
David Tsay	1055733ff5	cleanup	2020-04-24 22:34:22 -07:00
David Tsay	dc642f826e	do not install local time system	2020-04-24 16:07:45 -07:00
David Tsay	920b7a0c72	Merge branch 'time-conductor-merge' into dave/time-conductor	2020-04-24 16:06:39 -07:00
David Tsay	ba7e7321df	add default configurables for examples	2020-04-24 15:54:11 -07:00
David Tsay	30ed5d8fdb	remove lodash	2020-04-24 15:07:01 -07:00
David Tsay	5dc8f2b0d2	fixes for history	2020-04-24 15:02:07 -07:00
Joel McKinnon	a37c686993	Merge pull request #2968 from nasa/revert-2885-lodash-upgrade-test Revert "Lodash upgrade"	2020-04-24 11:55:44 -07:00
Deep Tailor	f12166097c	Revert "Lodash upgrade (#2885 )" This reverts commit `d103a22fa0`.	2020-04-24 11:53:31 -07:00
David Tsay	8161ed7ea6	add presets and records	2020-04-23 22:12:30 -07:00
Joel McKinnon	d103a22fa0	Lodash upgrade (#2885 ) * upgraded lodash, changed method names * native implementations as requested	2020-04-23 10:38:44 -07:00
David Tsay	9644208e6d	add configurable bounds limit to time conductor	2020-04-22 16:51:01 -07:00
Deep Tailor	04a60cfcbb	fixes #2713 (#2928 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-22 15:22:11 -07:00
charlesh88	42b6eb158a	Styling for Time Conductor zoom and pan - Minor fix to hover cursor for alt-pressed panning;	2020-04-22 14:10:41 -07:00
David Tsay	bac9991855	rename inMode vars for clarity	2020-04-22 11:25:05 -07:00
David Tsay	1f545cb969	handle no drag on pan	2020-04-22 11:04:18 -07:00
David Tsay	9271259a4c	move altPressed up to parent	2020-04-22 10:43:50 -07:00
David Tsay	5f51a7cc90	fix zoom	2020-04-21 18:27:19 -07:00
David Tsay	445b9f3788	WIP almost there	2020-04-21 16:47:40 -07:00
Joel McKinnon	8d723960f4	removed acorn from package.json (#2906 ) Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-21 15:50:45 -07:00
Joel McKinnon	6d3cd2c699	Upgrade angular from 1.4.14 to 1.7.9 (#2955 ) * successfully upgraded to v1.6 with $compileProvider.preAssignBindingsEnabled(true) * removed $compileProvider.preAssignBindingsEnabled(true), wrapped constructors for plot and chart inside onInit function Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-04-21 15:34:12 -07:00
Andrew Henry	87bf94fe0a	Updated year in index.html (#2930 )	2020-04-21 15:28:10 -07:00
Joel McKinnon	af93823b6f	Elasticsearch support for change to typeless API (#2941 ) * added elasticsearch to bundlemap	2020-04-21 15:23:43 -07:00
David Tsay	acc0abc903	move zoom/pan styling up to conductor	2020-04-20 10:16:37 -07:00
David Tsay	27dfda904e	fix merge conflict	2020-04-17 17:45:25 -07:00
David Tsay	7aad1101b4	Merge branch 'time-conductor-merge' into dave/time-conductor	2020-04-17 17:44:14 -07:00
charlesh88	46d8d95583	Styling Time Conductor axis and inputs - Moved panning and zooming styles up into `conductor.scss`; - Stubbed in :class names in Conductor.vue; - New theme constants;	2020-04-17 17:24:18 -07:00
David Tsay	f6bd76be0e	resolve merge conflicts	2020-04-17 17:06:12 -07:00
charlesh88	b527bf3810	Styling Time Conductor axis area - Styles for `is-zooming` state and brush; - Styles for `is-alt-key-down` for panning; - Styles for hover modified;	2020-04-17 16:03:25 -07:00
David Tsay	b729c5132b	Merge branch 'time-conductor-merge' into dave/time-conductor	2020-04-17 12:41:00 -07:00
David Tsay	4793fae5d1	refactor to use browser mouse events instead of d3brush	2020-04-17 12:33:45 -07:00
charlesh88	26ba2f889e	Tweaks to Time Conductor History menu - Enhanced styles for `.c-menu`; - Added hint messaging and separator; - Reversed displayed history array so that latest entry is always first;	2020-04-16 16:50:34 -07:00
David Tsay	a4956edf7b	add max duration validation	2020-04-16 10:54:03 -07:00
David Tsay	987e0c698c	change realtime end bound to 30 secondes	2020-04-15 12:36:47 -07:00
David Tsay	a4200e81d9	linting	2020-04-14 11:39:17 -07:00
David Tsay	2b5706f757	more linting	2020-04-14 11:36:48 -07:00
David Tsay	2c2d674b99	linting	2020-04-14 11:35:15 -07:00
David Tsay	aecbbf24b0	linting	2020-04-14 11:20:23 -07:00
David Tsay	0ad6a595b0	Merge branch 'master' into time-conductor-merge	2020-04-14 10:45:52 -07:00
David Tsay	a6ac54383d	fix bounds to use for timespans on pan axis	2019-12-12 12:02:31 -08:00
David Tsay	490f25add8	change tick to timespan to avoid confusion	2019-12-12 11:58:12 -08:00
David Tsay	694255db6b	remove unused function calls	2019-12-04 11:29:10 -08:00
David Tsay	6910ae0a2b	axis visual tuning	2019-11-26 14:59:29 -08:00
David Tsay	b3bf7f2db1	add presets code cleanup	2019-11-26 14:49:11 -08:00
David Tsay	348ba9085b	Merge branch 'topic-core-refactor' into feature/time-conductor-axis/zoom-slider	2019-11-26 11:46:34 -08:00
David Tsay	9d6a5e2e17	clean up refactoring	2019-11-26 11:46:02 -08:00
David Tsay	5cb0e2e885	conductor history functionality complete	2019-11-26 11:30:39 -08:00
David Tsay	ee277f3547	reset axis height after prototyping	2019-11-26 11:30:24 -08:00
David Tsay	bf77d240c7	WIP persistence works	2019-11-25 16:37:47 -08:00
David Tsay	684a3d2807	WIP save history to and pull history from local storage	2019-11-25 10:28:50 -08:00
David Tsay	27e01ef13f	WIP conductor history	2019-11-21 16:35:15 -08:00
David Tsay	4a2b1640e9	set global bounds before emitting change event	2019-11-21 10:31:56 -08:00
David Tsay	38cb92b203	WIP prototyping conductor history	2019-11-18 15:32:16 -08:00
David Tsay	0792ae0ae4	just use d3-brush instead of entire d3 package	2019-11-15 15:47:06 -08:00
David Tsay	d462f5d763	Merge branch 'topic-core-refactor' into feature/time-conductor-axis/zoom-slider	2019-11-15 15:09:48 -08:00
David Tsay	cb8e97dc1c	resize brush on window resize	2019-11-13 15:07:07 -08:00
David Tsay	aed3c19edd	linting	2019-11-13 14:00:17 -08:00
David Tsay	a19c5cfd52	disable cursor for local time and enable for fixed time	2019-11-13 13:59:13 -08:00
David Tsay	03e5241041	pass isFixed as props so we can watch for change from parent	2019-11-13 13:40:37 -08:00
David Tsay	29ed251685	zoom axis sets start and end times	2019-11-13 11:59:50 -08:00
David Tsay	60433a12b8	linting	2019-11-12 17:03:30 -08:00
David Tsay	69b8dd6c37	make isTimeFixed check reusable	2019-11-12 15:48:09 -08:00
David Tsay	e6c78c1826	add LocalTimeSystem	2019-11-12 13:15:10 -08:00
David Tsay	a1657817dc	make LocalTimeSystem UTCBased (Earth based)	2019-11-12 12:05:45 -08:00
David Tsay	29538e6e78	revert selection to times	2019-11-08 16:15:11 -08:00
David Tsay	68e9152d6a	pan and zoom now co-exist	2019-11-08 15:58:16 -08:00
David Tsay	02b2b47411	require alt pressed for grab handle. display only	2019-11-07 16:46:56 -08:00
David Tsay	70624c2c5c	basic brush prototype visible	2019-11-07 13:22:52 -08:00