Notebook sanding and polishing

- Fix dialog messages and casing;

platform/forms/bundle.js

@@ -30,7 +30,6 @@ define([
     "./src/controllers/CompositeController",
     "./src/controllers/ColorController",
     "./src/controllers/DialogButtonController",
-    "./src/controllers/SnapshotPreviewController",
     "./res/templates/controls/autocomplete.html",
     "./res/templates/controls/checkbox.html",
     "./res/templates/controls/datetime.html",
@@ -44,8 +43,7 @@ define([
     "./res/templates/controls/menu-button.html",
     "./res/templates/controls/dialog.html",
     "./res/templates/controls/radio.html",
-    "./res/templates/controls/file-input.html",
-    "./res/templates/controls/snap-view.html"
+    "./res/templates/controls/file-input.html"
 ], function (
     MCTForm,
     MCTControl,
@@ -56,7 +54,6 @@ define([
     CompositeController,
     ColorController,
     DialogButtonController,
-    SnapshotPreviewController,
     autocompleteTemplate,
     checkboxTemplate,
     datetimeTemplate,
@@ -70,8 +67,7 @@ define([
     menuButtonTemplate,
     dialogTemplate,
     radioTemplate,
-    fileInputTemplate,
-    snapViewTemplate
+    fileInputTemplate
 ) {
 
     return {
@@ -157,10 +153,6 @@ define([
                     {
                         "key": "file-input",
                         "template": fileInputTemplate
-                    },
-                    {
-                        "key": "snap-view",
-                        "template": snapViewTemplate
                     }
                 ],
                 "controllers": [
@@ -194,14 +186,6 @@ define([
                             "$scope",
                             "dialogService"
                         ]
-                    },
-                    {
-                        "key": "SnapshotPreviewController",
-                        "implementation": SnapshotPreviewController,
-                        "depends": [
-                            "$scope",
-                            "openmct"
-                        ]
                     }
                 ],
                 "components": [

platform/forms/res/templates/controls/snap-view.html

@@ -1,36 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2018, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="SnapshotPreviewController" 
-    class='form-control shell'>
-    <span class='field control {{structure.cssClass}}'>
-        <image 
-               class="c-ne__embed__snap-thumb"
-               src="{{imageUrl || structure.src}}"
-               ng-click="previewImage(imageUrl || structure.src)"
-               name="mctControl">
-        </image>
-        <br>
-        <a title="Annotate" class="s-button icon-pencil" ng-click="annotateImage(ngModel, field, imageUrl || structure.src)">
-            <span class="title-label">Annotate</span>
-        </a>
-    </span>
-</span>

platform/forms/src/controllers/SnapshotPreviewController.js

@@ -1,131 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        'painterro'
-    ],
-    function (Painterro) {
-
-        function SnapshotPreviewController($scope, openmct) {
-
-            $scope.previewImage = function (imageUrl) {
-                let imageDiv = document.createElement('div');
-                imageDiv.classList = 'image-main s-image-main';
-                imageDiv.style.backgroundImage = `url(${imageUrl})`;
-
-                let previewImageOverlay = openmct.overlays.overlay(
-                    {
-                        element: imageDiv,
-                        size: 'large',
-                        buttons: [
-                            {
-                                label: 'Done',
-                                callback: function () {
-                                    previewImageOverlay.dismiss();
-                                }
-                            }
-                        ]
-                    }
-                );
-            };
-
-            $scope.annotateImage = function (ngModel, field, imageUrl) {
-                $scope.imageUrl = imageUrl;
-
-                let div = document.createElement('div'),
-                    painterroInstance = {},
-                    save = false;
-
-                div.id = 'snap-annotation';
-
-                let annotateImageOverlay = openmct.overlays.overlay(
-                    {
-                        element: div,
-                        size: 'large',
-                        buttons: [
-                            {
-                                label: 'Cancel',
-                                callback: function () {
-                                    save = false;
-                                    painterroInstance.save();
-                                    annotateImageOverlay.dismiss();
-                                }
-                            },
-                            {
-                                label: 'Save',
-                                callback: function () {
-                                    save = true;
-                                    painterroInstance.save();
-                                    annotateImageOverlay.dismiss();
-                                }
-                            }
-                        ]
-                    }
-                );
-
-                painterroInstance = Painterro({
-                    id: 'snap-annotation',
-                    activeColor: '#ff0000',
-                    activeColorAlpha: 1.0,
-                    activeFillColor: '#fff',
-                    activeFillColorAlpha: 0.0,
-                    backgroundFillColor: '#000',
-                    backgroundFillColorAlpha: 0.0,
-                    defaultFontSize: 16,
-                    defaultLineWidth: 2,
-                    defaultTool: 'ellipse',
-                    hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
-                    translation: {
-                        name: 'en',
-                        strings: {
-                            lineColor: 'Line',
-                            fillColor: 'Fill',
-                            lineWidth: 'Size',
-                            textColor: 'Color',
-                            fontSize: 'Size',
-                            fontStyle: 'Style'
-                        }
-                    },
-                    saveHandler: function (image, done) {
-                        if (save) {
-                            let url = image.asBlob(),
-                                reader = new window.FileReader();
-
-                            reader.readAsDataURL(url);
-                            reader.onloadend = function () {
-                                $scope.imageUrl = reader.result;
-                                ngModel[field] = reader.result;
-                            };
-                        } else {
-                            ngModel.field = imageUrl;
-                            console.warn('You cancelled the annotation!!!');
-                        }
-                        done(true);
-                    }
-                }).show(imageUrl);
-            };
-        }
-
-        return SnapshotPreviewController;
-    }
-);

src/plugins/condition/Condition.js

@@ -23,8 +23,8 @@
 import EventEmitter from 'EventEmitter';
 import uuid from 'uuid';
 import TelemetryCriterion from "./criterion/TelemetryCriterion";
-import { evaluateResults } from './utils/evaluator';
-import { getLatestTimestamp } from './utils/time';
+import { TRIGGER } from "./utils/constants";
+import {computeCondition, computeConditionByLimit} from "./utils/evaluator";
 import AllTelemetryCriterion from "./criterion/AllTelemetryCriterion";
 
 /*
@@ -56,39 +56,29 @@ export default class ConditionClass extends EventEmitter {
         this.conditionManager = conditionManager;
         this.id = conditionConfiguration.id;
         this.criteria = [];
+        this.criteriaResults = {};
         this.result = undefined;
-        this.timeSystems = this.openmct.time.getAllTimeSystems();
+        this.latestTimestamp = {};
+
         if (conditionConfiguration.configuration.criteria) {
             this.createCriteria(conditionConfiguration.configuration.criteria);
         }
         this.trigger = conditionConfiguration.configuration.trigger;
+        this.conditionManager.on('broadcastTelemetry', this.handleBroadcastTelemetry, this);
     }
 
-    getResult(datum) {
+    handleBroadcastTelemetry(datum) {
         if (!datum || !datum.id) {
             console.log('no data received');
             return;
         }
-
         this.criteria.forEach(criterion => {
-            if (this.isAnyOrAllTelemetry(criterion)) {
-                criterion.getResult(datum, this.conditionManager.telemetryObjects);
+            if (criterion.telemetry && (criterion.telemetry === 'all' || criterion.telemetry === 'any')) {
+                criterion.handleSubscription(datum, this.conditionManager.telemetryObjects);
             } else {
-                criterion.getResult(datum);
+                criterion.emit(`subscription:${datum.id}`, datum);
             }
         });
-
-        this.result = evaluateResults(this.criteria.map(criterion => criterion.result), this.trigger);
-    }
-
-    isAnyOrAllTelemetry(criterion) {
-        return (criterion.telemetry && (criterion.telemetry === 'all' || criterion.telemetry === 'any'));
-    }
-
-    isTelemetryUsed(id) {
-        return this.criteria.some(criterion => {
-            return this.isAnyOrAllTelemetry(criterion) || criterion.telemetryObjectIdAsString === id;
-        });
     }
 
     update(conditionConfiguration) {
@@ -99,6 +89,7 @@ export default class ConditionClass extends EventEmitter {
     updateTrigger(trigger) {
         if (this.trigger !== trigger) {
             this.trigger = trigger;
+            this.handleConditionUpdated();
         }
     }
 
@@ -142,6 +133,7 @@ export default class ConditionClass extends EventEmitter {
             criterion = new TelemetryCriterion(criterionConfigurationWithId, this.openmct);
         }
         criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+        criterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj));
         if (!this.criteria) {
             this.criteria = [];
         }
@@ -170,11 +162,22 @@ export default class ConditionClass extends EventEmitter {
             const newCriterionConfiguration = this.generateCriterion(criterionConfiguration);
             let newCriterion = new TelemetryCriterion(newCriterionConfiguration, this.openmct);
             newCriterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+            newCriterion.on('criterionResultUpdated', (obj) => this.handleCriterionResult(obj));
 
             let criterion = found.item;
             criterion.unsubscribe();
             criterion.off('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+            criterion.off('criterionResultUpdated', (obj) => this.handleCriterionResult(obj));
             this.criteria.splice(found.index, 1, newCriterion);
+            if (this.criteriaResults[criterion.id] !== undefined) {
+                delete this.criteriaResults[criterion.id];
+            }
+        }
+    }
+
+    removeCriterion(id) {
+        if (this.destroyCriterion(id)) {
+            this.handleConditionUpdated();
         }
     }
 
@@ -182,12 +185,15 @@ export default class ConditionClass extends EventEmitter {
         let found = this.findCriterion(id);
         if (found) {
             let criterion = found.item;
-            criterion.off('criterionUpdated', (obj) => {
-                this.handleCriterionUpdated(obj);
-            });
             criterion.destroy();
+            // TODO this is passing the wrong args
+            criterion.off('criterionUpdated', (result) => {
+                this.handleCriterionUpdated(id, result);
+            });
             this.criteria.splice(found.index, 1);
-
+            if (this.criteriaResults[criterion.id] !== undefined) {
+                delete this.criteriaResults[criterion.id];
+            }
             return true;
         }
         return false;
@@ -197,40 +203,59 @@ export default class ConditionClass extends EventEmitter {
         let found = this.findCriterion(criterion.id);
         if (found) {
             this.criteria[found.index] = criterion.data;
+            // TODO nothing is listening to this
+            this.emitEvent('conditionUpdated', {
+                trigger: this.trigger,
+                criteria: this.criteria
+            });
         }
     }
 
+    updateCriteriaResults(eventData) {
+        const id = eventData.id;
+
+        if (this.findCriterion(id)) {
+            // The !! here is important to convert undefined to false otherwise the criteriaResults won't get deleted when the criteria is destroyed
+            this.criteriaResults[id] = !!eventData.data.result;
+        }
+    }
+
+    handleCriterionResult(eventData) {
+        this.updateCriteriaResults(eventData);
+        this.handleConditionUpdated(eventData.data);
+    }
+
     requestLADConditionResult() {
-        let latestTimestamp;
-        let criteriaResults = {};
-        const criteriaRequests = this.criteria
+        const criteriaResults = this.criteria
             .map(criterion => criterion.requestLAD({telemetryObjects: this.conditionManager.telemetryObjects}));
 
-        return Promise.all(criteriaRequests)
+        return Promise.all(criteriaResults)
             .then(results => {
-                results.forEach(resultObj => {
-                    const { id, data, data: { result } } = resultObj;
-                    if (this.findCriterion(id)) {
-                        criteriaResults[id] = !!result;
-                    }
-                    latestTimestamp = getLatestTimestamp(
-                        latestTimestamp,
-                        data,
-                        this.timeSystems,
-                        this.openmct.time.timeSystem()
-                    );
+                results.forEach(result => {
+                    this.updateCriteriaResults(result);
+                    this.latestTimestamp = this.getLatestTimestamp(this.latestTimestamp, result.data)
                 });
+                this.evaluate();
+
                 return {
                     id: this.id,
-                    data: Object.assign(
-                        {},
-                        latestTimestamp,
-                        { result: evaluateResults(Object.values(criteriaResults), this.trigger) }
-                    )
-                };
+                    data: Object.assign({}, this.latestTimestamp, { result: this.result })
+                }
             });
     }
 
+    getTelemetrySubscriptions() {
+        return this.criteria.map(criterion => criterion.telemetryObjectIdAsString);
+    }
+
+    handleConditionUpdated(datum) {
+        // trigger an updated event so that consumers can react accordingly
+        this.evaluate();
+        this.emitEvent('conditionResultUpdated',
+            Object.assign({}, datum, { result: this.result })
+        );
+    }
+
     getCriteria() {
         return this.criteria;
     }
@@ -244,7 +269,41 @@ export default class ConditionClass extends EventEmitter {
         return success;
     }
 
+    evaluate() {
+        if (this.trigger && this.trigger === TRIGGER.XOR) {
+            this.result = computeConditionByLimit(this.criteriaResults, 1);
+        } else if (this.trigger && this.trigger === TRIGGER.NOT) {
+            this.result = computeConditionByLimit(this.criteriaResults, 0);
+        } else {
+            this.result = computeCondition(this.criteriaResults, this.trigger === TRIGGER.ALL);
+        }
+    }
+
+    getLatestTimestamp(current, compare) {
+        const timestamp = Object.assign({}, current);
+
+        this.openmct.time.getAllTimeSystems().forEach(timeSystem => {
+            if (!timestamp[timeSystem.key]
+                || compare[timeSystem.key] > timestamp[timeSystem.key]
+            ) {
+                timestamp[timeSystem.key] = compare[timeSystem.key];
+            }
+        });
+        return timestamp;
+    }
+
+    emitEvent(eventName, data) {
+        this.emit(eventName, {
+            id: this.id,
+            data: data
+        });
+    }
+
     destroy() {
+        this.conditionManager.off('broadcastTelemetry', this.handleBroadcastTelemetry, this);
+        if (typeof this.stopObservingForChanges === 'function') {
+            this.stopObservingForChanges();
+        }
         this.destroyCriteria();
     }
 }

src/plugins/condition/ConditionManager.js

@@ -21,7 +21,6 @@
  *****************************************************************************/
 
 import Condition from "./Condition";
-import { getLatestTimestamp } from './utils/time';
 import uuid from "uuid";
 import EventEmitter from 'EventEmitter';
 
@@ -30,7 +29,8 @@ export default class ConditionManager extends EventEmitter {
         super();
         this.openmct = openmct;
         this.conditionSetDomainObject = conditionSetDomainObject;
-        this.timeSystems = this.openmct.time.getAllTimeSystems();
+        this.timeAPI = this.openmct.time;
+        this.latestTimestamp = {};
         this.composition = this.openmct.composition.get(conditionSetDomainObject);
         this.composition.on('add', this.subscribeToTelemetry, this);
         this.composition.on('remove', this.unsubscribeFromTelemetry, this);
@@ -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.broadcastTelemetry.bind(this, id)
         );
         this.updateConditionTelemetry();
     }
@@ -70,10 +70,10 @@ export default class ConditionManager extends EventEmitter {
         this.subscriptions[id]();
         delete this.subscriptions[id];
         delete this.telemetryObjects[id];
-        this.removeConditionTelemetry();
     }
 
     initialize() {
+        this.conditionResults = {};
         this.conditionClassCollection = [];
         if (this.conditionSetDomainObject.configuration.conditionCollection.length) {
             this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
@@ -86,30 +86,6 @@ export default class ConditionManager extends EventEmitter {
         this.conditionClassCollection.forEach((condition) => condition.updateTelemetry());
     }
 
-    removeConditionTelemetry() {
-        let conditionsChanged = false;
-        this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration) => {
-            conditionConfiguration.configuration.criteria.forEach((criterion, index) => {
-                const isAnyAllTelemetry = criterion.telemetry && (criterion.telemetry === 'any' || criterion.telemetry === 'all');
-                if (!isAnyAllTelemetry) {
-                    const found = Object.values(this.telemetryObjects).find((telemetryObject) => {
-                        return this.openmct.objects.areIdsEqual(telemetryObject.identifier, criterion.telemetry);
-                    });
-                    if (!found) {
-                        criterion.telemetry = '';
-                        criterion.metadata = '';
-                        criterion.input = [];
-                        criterion.operation = '';
-                        conditionsChanged = true;
-                    }
-                }
-            });
-        });
-        if (conditionsChanged) {
-            this.persistConditions();
-        }
-    }
-
     updateCondition(conditionConfiguration, index) {
         let condition = this.conditionClassCollection[index];
         condition.update(conditionConfiguration);
@@ -119,6 +95,7 @@ export default class ConditionManager extends EventEmitter {
 
     initCondition(conditionConfiguration, index) {
         let condition = new Condition(conditionConfiguration, this.openmct, this);
+        condition.on('conditionResultUpdated', this.handleConditionResult.bind(this));
         if (index !== undefined) {
             this.conditionClassCollection.splice(index + 1, 0, condition);
         } else {
@@ -182,16 +159,22 @@ export default class ConditionManager extends EventEmitter {
 
     removeCondition(index) {
         let condition = this.conditionClassCollection[index];
-        condition.destroy();
+        condition.destroyCriteria();
+        condition.off('conditionResultUpdated', this.handleConditionResult.bind(this));
         this.conditionClassCollection.splice(index, 1);
         this.conditionSetDomainObject.configuration.conditionCollection.splice(index, 1);
+        if (this.conditionResults[condition.id] !== undefined) {
+            delete this.conditionResults[condition.id];
+        }
         this.persistConditions();
+        this.handleConditionResult();
     }
 
     findConditionById(id) {
         return this.conditionClassCollection.find(conditionClass => conditionClass.id === id);
     }
 
+    //this.$set(this.conditionClassCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
     reorderConditions(reorderPlan) {
         let oldConditions = Array.from(this.conditionSetDomainObject.configuration.conditionCollection);
         let newCollection = [];
@@ -208,29 +191,53 @@ export default class ConditionManager extends EventEmitter {
         let currentCondition = conditionCollection[conditionCollection.length-1];
 
         for (let i = 0; i < conditionCollection.length - 1; i++) {
-            const condition = this.findConditionById(conditionCollection[i].id)
-            if (condition.result) {
+            if (this.conditionResults[conditionCollection[i].id]) {
                 //first condition to be true wins
                 currentCondition = conditionCollection[i];
                 break;
             }
         }
-
         return currentCondition;
     }
 
-    getCurrentConditionLAD(conditionResults) {
-        const conditionCollection = this.conditionSetDomainObject.configuration.conditionCollection;
-        let currentCondition = conditionCollection[conditionCollection.length-1];
-
-        for (let i = 0; i < conditionCollection.length - 1; i++) {
-            if (conditionResults[conditionCollection[i].id]) {
-                //first condition to be true wins
-                currentCondition = conditionCollection[i];
-                break;
-            }
+    updateConditionResults(resultObj) {
+        if (!resultObj) {
+            return;
         }
-        return currentCondition;
+
+        const id = resultObj.id;
+
+        if (this.findConditionById(id)) {
+            this.conditionResults[id] = resultObj.data.result;
+        }
+
+        this.updateTimestamp(resultObj.data);
+    }
+
+    handleConditionResult(resultObj) {
+        // update conditions results and then calculate the current condition
+        this.updateConditionResults(resultObj);
+        const currentCondition = this.getCurrentCondition();
+        this.emit('conditionSetResultUpdated',
+            Object.assign(
+                {
+                    output: currentCondition.configuration.output,
+                    id: this.conditionSetDomainObject.identifier,
+                    conditionId: currentCondition.id
+                },
+                this.latestTimestamp
+            )
+        )
+    }
+
+    updateTimestamp(timestamp) {
+        this.timeAPI.getAllTimeSystems().forEach(timeSystem => {
+            if (!this.latestTimestamp[timeSystem.key]
+                || timestamp[timeSystem.key] > this.latestTimestamp[timeSystem.key]
+            ) {
+                this.latestTimestamp[timeSystem.key] = timestamp[timeSystem.key];
+            }
+        });
     }
 
     requestLADConditionSetOutput() {
@@ -239,26 +246,13 @@ export default class ConditionManager extends EventEmitter {
         }
 
         return this.compositionLoad.then(() => {
-            let latestTimestamp;
-            let conditionResults = {};
-            const conditionRequests = this.conditionClassCollection
+            const ladConditionResults = this.conditionClassCollection
                 .map(condition => condition.requestLADConditionResult());
 
-            return Promise.all(conditionRequests)
+            return Promise.all(ladConditionResults)
                 .then((results) => {
-                    results.forEach(resultObj => {
-                        const { id, data, data: { result } } = resultObj;
-                        if (this.findConditionById(id)) {
-                            conditionResults[id] = !!result;
-                        }
-                        latestTimestamp = getLatestTimestamp(
-                            latestTimestamp,
-                            data,
-                            this.timeSystems,
-                            this.openmct.time.timeSystem()
-                        );
-                    });
-                    const currentCondition = this.getCurrentConditionLAD(conditionResults);
+                    results.forEach(resultObj => { this.updateConditionResults(resultObj); });
+                    const currentCondition = this.getCurrentCondition();
 
                     return Object.assign(
                         {
@@ -266,48 +260,14 @@ export default class ConditionManager extends EventEmitter {
                             id: this.conditionSetDomainObject.identifier,
                             conditionId: currentCondition.id
                         },
-                        latestTimestamp
+                        this.latestTimestamp
                     );
                 });
         });
     }
 
-    isTelemetryUsed(id) {
-        for(const condition of this.conditionClassCollection) {
-            if (condition.isTelemetryUsed(id)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    telemetryReceived(id, datum) {
-        if (!this.isTelemetryUsed(id)) {
-            return;
-        }
-
-        const normalizedDatum = this.createNormalizedDatum(datum, id);
-        const timeSystemKey = this.openmct.time.timeSystem().key;
-        let timestamp = {};
-        timestamp[timeSystemKey] = normalizedDatum[timeSystemKey];
-
-        this.conditionClassCollection.forEach(condition => {
-            condition.getResult(normalizedDatum);
-        });
-
-        const currentCondition = this.getCurrentCondition();
-
-        this.emit('conditionSetResultUpdated',
-            Object.assign(
-                {
-                    output: currentCondition.configuration.output,
-                    id: this.conditionSetDomainObject.identifier,
-                    conditionId: currentCondition.id
-                },
-                timestamp
-            )
-        )
+    broadcastTelemetry(id, datum) {
+        this.emit(`broadcastTelemetry`, Object.assign({}, this.createNormalizedDatum(datum, id), {id: id}));
     }
 
     getTestData(metadatum) {
@@ -322,16 +282,12 @@ export default class ConditionManager extends EventEmitter {
     }
 
     createNormalizedDatum(telemetryDatum, id) {
-        const normalizedDatum = Object.values(this.telemetryObjects[id].telemetryMetaData).reduce((datum, metadatum) => {
+        return Object.values(this.telemetryObjects[id].telemetryMetaData).reduce((normalizedDatum, 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]);
-            return datum;
+            normalizedDatum[metadatum.key] = testValue !== undefined ?  formatter.parse(testValue) : formatter.parse(telemetryDatum[metadatum.source]);
+            return normalizedDatum;
         }, {});
-
-        normalizedDatum.id = id;
-
-        return normalizedDatum;
     }
 
     updateTestData(testData) {
@@ -347,13 +303,14 @@ export default class ConditionManager extends EventEmitter {
         this.composition.off('add', this.subscribeToTelemetry, this);
         this.composition.off('remove', this.unsubscribeFromTelemetry, this);
         Object.values(this.subscriptions).forEach(unsubscribe => unsubscribe());
-        delete this.subscriptions;
+        this.subscriptions = undefined;
 
         if(this.stopObservingForChanges) {
             this.stopObservingForChanges();
         }
 
         this.conditionClassCollection.forEach((condition) => {
+            condition.off('conditionResultUpdated', this.handleConditionResult);
             condition.destroy();
         })
     }

src/plugins/condition/ConditionManagerSpec.js

@@ -49,7 +49,6 @@ describe('ConditionManager', () => {
     };
     let mockComposition;
     let loader;
-    let mockTimeSystems;
 
     function mockAngularComponents() {
         let mockInjector = jasmine.createSpyObj('$injector', ['get']);
@@ -112,16 +111,10 @@ describe('ConditionManager', () => {
         openmct.objects.observe.and.returnValue(function () {});
         openmct.objects.mutate.and.returnValue(function () {});
 
-        mockTimeSystems = {
-            key: 'utc'
-        };
-        openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems']);
-        openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
-
         conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
 
         conditionMgr.on('conditionSetResultUpdated', mockListener);
-        conditionMgr.on('telemetryReceived', mockListener);
+        conditionMgr.on('broadcastTelemetry', mockListener);
     });
 
     it('creates a conditionCollection with a default condition', function () {

src/plugins/condition/ConditionSpec.js

@@ -25,12 +25,12 @@ import {TRIGGER} from "./utils/constants";
 import TelemetryCriterion from "./criterion/TelemetryCriterion";
 
 let openmct = {},
+    mockListener,
     testConditionDefinition,
     testTelemetryObject,
     conditionObj,
     conditionManager,
-    mockTelemetryReceived,
-    mockTimeSystems;
+    mockBroadcastTelemetry;
 
 describe("The condition", function () {
 
@@ -38,9 +38,10 @@ describe("The condition", function () {
         conditionManager = jasmine.createSpyObj('conditionManager',
             ['on']
         );
-        mockTelemetryReceived = jasmine.createSpy('listener');
-        conditionManager.on('telemetryReceived', mockTelemetryReceived);
+        mockBroadcastTelemetry = jasmine.createSpy('listener');
+        conditionManager.on('broadcastTelemetry', mockBroadcastTelemetry);
 
+        mockListener = jasmine.createSpy('listener');
         testTelemetryObject = {
             identifier:{ namespace: "", key: "test-object"},
             type: "test-object",
@@ -73,12 +74,6 @@ describe("The condition", function () {
         openmct.telemetry.subscribe.and.returnValue(function () {});
         openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry.values);
 
-        mockTimeSystems = {
-            key: 'utc'
-        };
-        openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems']);
-        openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
-
         testConditionDefinition = {
             id: '123-456',
             configuration: {
@@ -102,6 +97,8 @@ describe("The condition", function () {
             openmct,
             conditionManager
         );
+
+        conditionObj.on('conditionUpdated', mockListener);
     });
 
     it("generates criteria with the correct properties", function () {

src/plugins/condition/StyleRuleManager.js

@@ -109,7 +109,7 @@ export default class StyleRuleManager extends EventEmitter {
         } else {
             if (this.currentStyle) {
                 Object.keys(this.currentStyle).forEach(key => {
-                    this.currentStyle[key] = '__no_value';
+                    this.currentStyle[key] = 'transparent';
                 });
             }
         }

src/plugins/condition/components/Condition.vue

@@ -21,167 +21,159 @@
 *****************************************************************************/
 
 <template>
-<div class="c-condition-h"
-     :class="{ 'is-drag-target': draggingOver }"
-     @dragover.prevent
-     @drop.prevent="dropCondition($event, conditionIndex)"
-     @dragenter="dragEnter($event, conditionIndex)"
-     @dragleave="dragLeave($event, conditionIndex)"
+<div v-if="isEditing"
+     class="c-condition c-condition--edit js-condition-drag-wrapper"
 >
-    <div class="c-condition-h__drop-target"></div>
-    <div v-if="isEditing"
-         class="c-condition c-condition--edit"
-    >
-        <!-- Edit view -->
-        <div class="c-condition__header">
-            <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
-                  title="Drag to reorder conditions"
-                  :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
-                  :draggable="!condition.isDefault"
-                  @dragstart="dragStart"
-                  @dragend="dragEnd"
-            ></span>
+    <!-- Edit view -->
+    <div class="c-condition__header">
+        <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
+              title="Drag to reorder conditions"
+              :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
+              :draggable="!condition.isDefault"
+              @dragstart="dragStart"
+              @dragstop="dragStop"
+              @dragover.stop
+        ></span>
 
-            <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
-                  :class="{ 'c-disclosure-triangle--expanded': expanded }"
-                  @click="expanded = !expanded"
-            ></span>
+        <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
+              :class="{ 'c-disclosure-triangle--expanded': expanded }"
+              @click="expanded = !expanded"
+        ></span>
 
-            <span class="c-condition__name">{{ condition.configuration.name }}</span>
-            <span class="c-condition__summary">
-                <template v-if="!canEvaluateCriteria">
-                    Define criteria
-                </template>
-                <span v-else>
-                    <condition-description :show-label="false"
-                                           :condition="condition"
-                    />
-                </span>
+        <span class="c-condition__name">{{ condition.configuration.name }}</span>
+        <span class="c-condition__summary">
+            <template v-if="!canEvaluateCriteria">
+                Define criteria
+            </template>
+            <span v-else>
+                <condition-description :show-label="false"
+                                       :condition="condition"
+                />
             </span>
+        </span>
 
-            <div class="c-condition__buttons">
-                <button v-if="!condition.isDefault"
-                        class="c-click-icon c-condition__duplicate-button icon-duplicate"
-                        title="Duplicate this condition"
-                        @click="cloneCondition"
-                ></button>
+        <div class="c-condition__buttons">
+            <button v-if="!condition.isDefault"
+                    class="c-click-icon c-condition__duplicate-button icon-duplicate"
+                    title="Duplicate this condition"
+                    @click="cloneCondition"
+            ></button>
 
-                <button v-if="!condition.isDefault"
-                        class="c-click-icon c-condition__delete-button icon-trash"
-                        title="Delete this condition"
-                        @click="removeCondition"
-                ></button>
-            </div>
+            <button v-if="!condition.isDefault"
+                    class="c-click-icon c-condition__delete-button icon-trash"
+                    title="Delete this condition"
+                    @click="removeCondition"
+            ></button>
         </div>
-        <div v-if="expanded"
-             class="c-condition__definition c-cdef"
+    </div>
+    <div v-if="expanded"
+         class="c-condition__definition c-cdef"
+    >
+        <span class="c-cdef__separator c-row-separator"></span>
+        <span class="c-cdef__label">Condition Name</span>
+        <span class="c-cdef__controls">
+            <input v-model="condition.configuration.name"
+                   class="t-condition-input__name"
+                   type="text"
+                   @blur="persist"
+            >
+        </span>
+
+        <span class="c-cdef__label">Output</span>
+        <span class="c-cdef__controls">
+            <span class="c-cdef__control">
+                <select v-model="selectedOutputSelection"
+                        @change="setOutputValue"
+                >
+                    <option v-for="option in outputOptions"
+                            :key="option"
+                            :value="option"
+                    >
+                        {{ initCap(option) }}
+                    </option>
+                </select>
+            </span>
+            <span class="c-cdef__control">
+                <input v-if="selectedOutputSelection === outputOptions[2]"
+                       v-model="condition.configuration.output"
+                       class="t-condition-name-input"
+                       type="text"
+                       @blur="persist"
+                >
+            </span>
+        </span>
+
+        <div v-if="!condition.isDefault"
+             class="c-cdef__match-and-criteria"
         >
             <span class="c-cdef__separator c-row-separator"></span>
-            <span class="c-cdef__label">Condition Name</span>
+            <span class="c-cdef__label">Match</span>
             <span class="c-cdef__controls">
-                <input v-model="condition.configuration.name"
-                       class="t-condition-input__name"
-                       type="text"
-                       @change="persist"
+                <select v-model="condition.configuration.trigger"
+                        @change="persist"
                 >
+                    <option v-for="option in triggers"
+                            :key="option.value"
+                            :value="option.value"
+                    > {{ option.label }}</option>
+                </select>
             </span>
 
-            <span class="c-cdef__label">Output</span>
-            <span class="c-cdef__controls">
-                <span class="c-cdef__control">
-                    <select v-model="selectedOutputSelection"
-                            @change="setOutputValue"
-                    >
-                        <option v-for="option in outputOptions"
-                                :key="option"
-                                :value="option"
-                        >
-                            {{ initCap(option) }}
-                        </option>
-                    </select>
-                </span>
-                <span class="c-cdef__control">
-                    <input v-if="selectedOutputSelection === outputOptions[2]"
-                           v-model="condition.configuration.output"
-                           class="t-condition-name-input"
-                           type="text"
-                           @change="persist"
-                    >
-                </span>
-            </span>
-
-            <div v-if="!condition.isDefault"
-                 class="c-cdef__match-and-criteria"
-            >
-                <span class="c-cdef__separator c-row-separator"></span>
-                <span class="c-cdef__label">Match</span>
-                <span class="c-cdef__controls">
-                    <select v-model="condition.configuration.trigger"
-                            @change="persist"
-                    >
-                        <option v-for="option in triggers"
-                                :key="option.value"
-                                :value="option.value"
-                        > {{ option.label }}</option>
-                    </select>
-                </span>
-
-                <template v-if="telemetry.length || condition.configuration.criteria.length">
-                    <div v-for="(criterion, index) in condition.configuration.criteria"
-                         :key="criterion.id"
-                         class="c-cdef__criteria"
-                    >
-                        <Criterion :telemetry="telemetry"
-                                   :criterion="criterion"
-                                   :index="index"
-                                   :trigger="condition.configuration.trigger"
-                                   :is-default="condition.configuration.criteria.length === 1"
-                                   @persist="persist"
-                        />
-                        <div class="c-cdef__criteria__buttons">
-                            <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
-                                    title="Duplicate this criteria"
-                                    @click="cloneCriterion(index)"
-                            ></button>
-                            <button v-if="!(condition.configuration.criteria.length === 1)"
-                                    class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
-                                    title="Delete this criteria"
-                                    @click="removeCriterion(index)"
-                            ></button>
-                        </div>
+            <template v-if="telemetry.length || condition.configuration.criteria.length">
+                <div v-for="(criterion, index) in condition.configuration.criteria"
+                     :key="criterion.id"
+                     class="c-cdef__criteria"
+                >
+                    <Criterion :telemetry="telemetry"
+                               :criterion="criterion"
+                               :index="index"
+                               :trigger="condition.configuration.trigger"
+                               :is-default="condition.configuration.criteria.length === 1"
+                               @persist="persist"
+                    />
+                    <div class="c-cdef__criteria__buttons">
+                        <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
+                                title="Duplicate this criteria"
+                                @click="cloneCriterion(index)"
+                        ></button>
+                        <button v-if="!(condition.configuration.criteria.length === 1)"
+                                class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
+                                title="Delete this criteria"
+                                @click="removeCriterion(index)"
+                        ></button>
                     </div>
-                </template>
-                <div class="c-cdef__separator c-row-separator"></div>
-                <div class="c-cdef__controls"
-                     :disabled="!telemetry.length"
-                >
-                    <button
-                        class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
-                        @click="addCriteria"
-                    >
-                        <span class="c-button__label">Add Criteria</span>
-                    </button>
                 </div>
+            </template>
+            <div class="c-cdef__separator c-row-separator"></div>
+            <div class="c-cdef__controls"
+                 :disabled="!telemetry.length"
+            >
+                <button
+                    class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
+                    @click="addCriteria"
+                >
+                    <span class="c-button__label">Add Criteria</span>
+                </button>
             </div>
         </div>
     </div>
-    <div v-else
-         class="c-condition c-condition--browse"
-    >
-        <!-- Browse view -->
-        <div class="c-condition__header">
-            <span class="c-condition__name">
-                {{ condition.configuration.name }}
-            </span>
-            <span class="c-condition__output">
-                Output: {{ condition.configuration.output }}
-            </span>
-        </div>
-        <div class="c-condition__summary">
-            <condition-description :show-label="false"
-                                   :condition="condition"
-            />
-        </div>
+</div>
+<div v-else
+     class="c-condition c-condition--browse"
+>
+    <!-- Browse view -->
+    <div class="c-condition__header">
+        <span class="c-condition__name">
+            {{ condition.configuration.name }}
+        </span>
+        <span class="c-condition__output">
+            Output: {{ condition.configuration.output }}
+        </span>
+    </div>
+    <div class="c-condition__summary">
+        <condition-description :show-label="false"
+                               :condition="condition"
+        />
     </div>
 </div>
 </template>
@@ -215,14 +207,6 @@ export default {
             type: Array,
             required: true,
             default: () => []
-        },
-        isDragging: {
-            type: Boolean,
-            default: false
-        },
-        moveIndex: {
-            type: Number,
-            default: 0
         }
     },
     data() {
@@ -233,8 +217,8 @@ export default {
             selectedOutputSelection: '',
             outputOptions: ['false', 'true', 'string'],
             criterionIndex: 0,
-            draggingOver: false,
-            isDefault: this.condition.isDefault
+            selectedTelemetryName: '',
+            selectedFieldName: ''
         };
     },
     computed: {
@@ -302,39 +286,11 @@ export default {
         dragStart(e) {
             e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
             e.dataTransfer.effectAllowed = "copyMove";
-            e.dataTransfer.setDragImage(e.target.closest('.c-condition-h'), 0, 0);
+            e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
             this.$emit('setMoveIndex', this.conditionIndex);
         },
-        dragEnd(event) {
-            this.dragStarted = false;
-            event.dataTransfer.clearData();
-            this.$emit('dragComplete');
-        },
-        dropCondition(event, targetIndex) {
-            if (!this.isDragging) { return }
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
-            if (this.isValidTarget(targetIndex)) {
-                this.dragElement = undefined;
-                this.draggingOver = false;
-                this.$emit('dropCondition', targetIndex);
-            }
-        },
-        dragEnter(event, targetIndex) {
-            if (!this.isDragging) { return }
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
-            if (this.isValidTarget(targetIndex)) {
-                this.dragElement = event.target.parentElement;
-                this.draggingOver = true;
-            }
-        },
-        dragLeave(event) {
-            if (event.target.parentElement === this.dragElement) {
-                this.draggingOver = false;
-                this.dragElement = undefined;
-            }
-        },
-        isValidTarget(targetIndex) {
-            return this.moveIndex !== targetIndex;
+        dragStop(e) {
+            e.dataTransfer.clearData();
         },
         destroy() {
         },

src/plugins/condition/components/ConditionCollection.vue

@@ -22,6 +22,7 @@
 
 <template>
 <section id="conditionCollection"
+         class="c-cs__conditions"
          :class="{ 'is-expanded': expanded }"
 >
     <div class="c-cs__header c-section__header">
@@ -52,24 +53,28 @@
             <span class="c-cs-button__label">Add Condition</span>
         </button>
 
-        <div class="c-cs__conditions-h"
-             :class="{ 'is-active-dragging': isDragging }"
-        >
-            <Condition v-for="(condition, index) in conditionCollection"
-                       :key="condition.id"
-                       :condition="condition"
-                       :condition-index="index"
-                       :telemetry="telemetryObjs"
-                       :is-editing="isEditing"
-                       :move-index="moveIndex"
-                       :is-dragging="isDragging"
-                       @updateCondition="updateCondition"
-                       @removeCondition="removeCondition"
-                       @cloneCondition="cloneCondition"
-                       @setMoveIndex="setMoveIndex"
-                       @dragComplete="dragComplete"
-                       @dropCondition="dropCondition"
-            />
+        <div class="c-cs__conditions-h">
+            <div v-for="(condition, index) in conditionCollection"
+                 :key="condition.id"
+                 class="c-condition-h"
+            >
+                <div v-if="isEditing"
+                     class="c-c__drag-ghost"
+                     @drop.prevent="dropCondition"
+                     @dragenter="dragEnter"
+                     @dragleave="dragLeave"
+                     @dragover.prevent
+                ></div>
+                <Condition :condition="condition"
+                           :condition-index="index"
+                           :telemetry="telemetryObjs"
+                           :is-editing="isEditing"
+                           @updateCondition="updateCondition"
+                           @removeCondition="removeCondition"
+                           @cloneCondition="cloneCondition"
+                           @setMoveIndex="setMoveIndex"
+                />
+            </div>
         </div>
     </div>
 </section>
@@ -104,10 +109,9 @@ export default {
             conditionResults: {},
             conditions: [],
             telemetryObjs: [],
-            moveIndex: undefined,
+            moveIndex: Number,
             isDragging: false,
-            defaultOutput: undefined,
-            dragCounter: 0
+            defaultOutput: undefined
         };
     },
     watch: {
@@ -162,7 +166,9 @@ export default {
             this.moveIndex = index;
             this.isDragging = true;
         },
-        dropCondition(targetIndex) {
+        dropCondition(e) {
+            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
             const oldIndexArr = Object.keys(this.conditionCollection);
             const move = function (arr, old_index, new_index) {
                 while (old_index < 0) {
@@ -188,10 +194,20 @@ export default {
             }
 
             this.reorder(reorderPlan);
-        },
-        dragComplete() {
+
+            e.target.classList.remove("dragging");
             this.isDragging = false;
         },
+        dragEnter(e) {
+            if (!this.isDragging) { return }
+            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+            if (this.moveIndex === targetIndex) { return }
+            e.target.classList.add("dragging");
+        },
+        dragLeave(e) {
+            e.target.classList.remove("dragging");
+        },
         addTelemetryObject(domainObject) {
             this.telemetryObjs.push(domainObject);
             this.$emit('telemetryUpdated', this.telemetryObjs);

src/plugins/condition/components/ConditionSet.vue

@@ -23,33 +23,30 @@
 <template>
 <div class="c-cs">
     <section class="c-cs__current-output c-section">
+        <div class="c-cs__header c-section__header">
+            <span class="c-cs__header-label c-section__label">Current Output</span>
+        </div>
         <div class="c-cs__content c-cs__current-output-value">
-            <span class="c-cs__current-output-value__label">Current Output</span>
-            <span class="c-cs__current-output-value__value">
-                <template v-if="currentConditionOutput">
-                    {{ currentConditionOutput }}
-                </template>
-                <template v-else>
-                    {{ defaultConditionOutput }}
-                </template>
-            </span>
+            <template v-if="currentConditionOutput">
+                {{ currentConditionOutput }}
+            </template>
+            <template v-else>
+                {{ defaultConditionOutput }}
+            </template>
         </div>
     </section>
-    <div class="c-cs__test-data-and-conditions-w">
-        <TestData class="c-cs__test-data"
-                  :is-editing="isEditing"
-                  :test-data="testData"
-                  :telemetry="telemetryObjs"
-                  @updateTestData="updateTestData"
-        />
-        <ConditionCollection class="c-cs__conditions"
-                             :is-editing="isEditing"
-                             :test-data="testData"
-                             @conditionSetResultUpdated="updateCurrentOutput"
-                             @updateDefaultOutput="updateDefaultOutput"
-                             @telemetryUpdated="updateTelemetry"
-        />
-    </div>
+    <TestData :is-editing="isEditing"
+              :test-data="testData"
+              :telemetry="telemetryObjs"
+              @updateTestData="updateTestData"
+    />
+    <ConditionCollection
+        :is-editing="isEditing"
+        :test-data="testData"
+        @conditionSetResultUpdated="updateCurrentOutput"
+        @updateDefaultOutput="updateDefaultOutput"
+        @telemetryUpdated="updateTelemetry"
+    />
 </div>
 </template>
 

src/plugins/condition/components/TestData.vue

@@ -23,6 +23,7 @@
 <template>
 <section v-show="isEditing"
          id="test-data"
+         class="c-cs__test-data"
          :class="{ 'is-expanded': expanded }"
 >
     <div class="c-cs__header c-section__header">
@@ -36,7 +37,7 @@
     <div v-if="expanded"
          class="c-cs__content"
     >
-        <div class="c-cs__test-data__controls c-cdef__controls"
+        <div class="c-cdef__controls"
              :disabled="!telemetry.length"
         >
             <label class="c-toggle-switch">
@@ -95,7 +96,7 @@
                         >
                     </span>
                 </span>
-                <div class="c-cs-test__buttons">
+                <div class="c-test-datum__buttons">
                     <button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
                             title="Duplicate this test datum"
                             @click="addTestInput(testInput)"

src/plugins/condition/components/condition-set.scss

@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+.c-cs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        flex: 0 1 auto;
+        overflow: hidden;
+
+        > * {
+            flex: 0 0 auto;
+            overflow: hidden;
+            + * {
+                margin-top: $interiorMarginSm;
+            }
+        }
+
+        .c-button {
+            align-self: start;
+        }
+    }
+
+    .is-editing & {
+        // Add some space to kick away from blue editing border indication
+        padding: $interiorMargin;
+    }
+
+    section {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    &__conditions-h {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        overflow: auto;
+        padding-right: $interiorMarginSm;
+
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
+    }
+
+    &__conditions {
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
+    }
+
+    .hint {
+        padding: $interiorMarginSm;
+    }
+
+    /************************** SPECIFIC ITEMS */
+    &__current-output-value {
+        font-size: 1.25em;
+        padding: $interiorMargin;
+    }
+}
+
+/***************************** TEST DATA */
+.c-cs-tests {
+    flex: 0 1 auto;
+    overflow: auto;
+    padding-right: $interiorMarginSm;
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+}
+
+.c-cs-test {
+    > * {
+        flex: 0 0 auto;
+        + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    &__controls {
+        display: flex;
+        flex: 1 1 auto;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+}
+

src/plugins/condition/components/condition.scss

@@ -0,0 +1,133 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+.c-condition,
+.c-test-datum {
+    @include discreteItem();
+    display: flex;
+    padding: $interiorMargin;
+
+    &--edit {
+        line-height: 160%; // For layout when inputs wrap, like in criteria
+    }
+}
+
+.c-condition {
+    flex-direction: column;
+    min-width: 400px;
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+    &--browse {
+        .c-condition__summary {
+            border-top: 1px solid $colorInteriorBorder;
+            padding-top: $interiorMargin;
+        }
+    }
+
+    /***************************** HEADER */
+    &__header {
+        $h: 22px;
+        display: flex;
+        align-items: start;
+        align-content: stretch;
+        overflow: hidden;
+        min-height: $h;
+        line-height: $h;
+
+        > * {
+            flex: 0 0 auto;
+            + * {
+                margin-left: $interiorMarginSm;
+            }
+        }
+    }
+
+    &__drag-grippy {
+        transform: translateY(50%);
+    }
+
+    &__name {
+        font-weight: bold;
+        align-self: baseline; // Fixes bold line-height offset problem
+    }
+
+    &__output,
+    &__summary {
+        flex: 1 1 auto;
+    }
+}
+
+/***************************** CONDITION DEFINITION, EDITING */
+.c-cdef {
+    display: grid;
+    grid-row-gap: $interiorMarginSm;
+    grid-column-gap: $interiorMargin;
+    grid-auto-columns: min-content 1fr max-content;
+    align-items: start;
+    min-width: 150px;
+    margin-left: 29px;
+    overflow: hidden;
+
+    &__criteria,
+    &__match-and-criteria {
+        display: contents;
+    }
+
+    &__label {
+        grid-column: 1;
+        text-align: right;
+        white-space: nowrap;
+    }
+
+    &__separator {
+        grid-column: 1 / span 3;
+    }
+
+    &__controls {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        grid-column: 2;
+
+        > * > * {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &__buttons {
+        grid-column: 3;
+    }
+}
+
+.c-c__drag-ghost {
+    width: 100%;
+    min-height: $interiorMarginSm;
+
+    &.dragging {
+        min-height: 5em;
+        background-color: lightblue;
+        border-radius: 2px;
+    }
+
+}

src/plugins/condition/components/conditionals.scss

@@ -1,311 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/***************************** DRAGGING */
-.is-active-dragging {
-    .c-condition-h__drop-target {
-        height: 3px;
-        margin-bottom: $interiorMarginSm;
-    }
-}
-
-.c-condition-h {
-    &__drop-target {
-        border-radius: $controlCr;
-        height: 0;
-        min-height: 0;
-        transition: background-color, height;
-        transition-duration: 150ms;
-    }
-
-    &.is-drag-target {
-        .c-condition > * {
-            pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
-        }
-
-        .c-condition-h__drop-target {
-            background-color: rgba($colorKey, 0.7);
-        }
-    }
-}
-
-.c-cs {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-
-    /************************** CONDITION SET LAYOUT */
-    &__current-output {
-        flex: 0 0 auto;
-    }
-
-    &__test-data-and-conditions-w {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    &__test-data,
-    &__conditions {
-        flex: 0 0 auto;
-        overflow: hidden;
-    }
-
-    &__test-data {
-        flex: 0 0 auto;
-        max-height: 50%;
-
-        &.is-expanded {
-            margin-bottom: $interiorMargin * 4;
-        }
-    }
-
-    &__conditions {
-        flex: 1 1 auto;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        overflow: hidden;
-
-        > * {
-            flex: 0 0 auto;
-            overflow: hidden;
-            + * {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        .c-button {
-            align-self: start;
-        }
-    }
-
-    .is-editing & {
-        // Add some space to kick away from blue editing border indication
-        padding: $interiorMargin;
-    }
-
-    section {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    &__conditions-h {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-right: $interiorMarginSm;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    .hint {
-        padding: $interiorMarginSm;
-    }
-
-    /************************** SPECIFIC ITEMS */
-    &__current-output-value {
-        flex-direction: row;
-        align-items: baseline;
-        padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
-
-        > * {
-            padding: $interiorMargin 0; // Must do this to align label and value
-        }
-
-        &__label {
-            color: $colorInspectorSectionHeaderFg;
-            opacity: 0.9;
-            text-transform: uppercase;
-        }
-
-        &__value {
-            $p: $interiorMargin * 3;
-            font-size: 1.25em;
-            margin-left: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-            background: rgba(black, 0.2);
-            border-radius: 5px;
-        }
-    }
-}
-
-/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
-.c-condition,
-.c-test-datum {
-    @include discreteItem();
-    display: flex;
-    padding: $interiorMargin;
-    line-height: 170%; // Aligns text with controls like selects
-}
-
-.c-cdef,
-.c-cs-test {
-    &__controls {
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
-
-        > * > * {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &__buttons {
-        white-space: nowrap;
-    }
-}
-
-.c-condition {
-    flex-direction: column;
-    min-width: 400px;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-    &--browse {
-        .c-condition__summary {
-            border-top: 1px solid $colorInteriorBorder;
-            padding-top: $interiorMargin;
-        }
-    }
-
-    /***************************** HEADER */
-    &__header {
-        $h: 22px;
-        display: flex;
-        align-items: start;
-        align-content: stretch;
-        overflow: hidden;
-        min-height: $h;
-        line-height: $h;
-
-        > * {
-            flex: 0 0 auto;
-            + * {
-                margin-left: $interiorMarginSm;
-            }
-        }
-    }
-
-    &__drag-grippy {
-        transform: translateY(50%);
-    }
-
-    &__name {
-        font-weight: bold;
-        align-self: baseline; // Fixes bold line-height offset problem
-    }
-
-    &__output,
-    &__summary {
-        flex: 1 1 auto;
-    }
-}
-
-/***************************** CONDITION DEFINITION, EDITING */
-.c-cdef {
-    display: grid;
-    grid-row-gap: $interiorMarginSm;
-    grid-column-gap: $interiorMargin;
-    grid-auto-columns: min-content 1fr max-content;
-    align-items: start;
-    min-width: 150px;
-    margin-left: 29px;
-    overflow: hidden;
-
-    &__criteria,
-    &__match-and-criteria {
-        display: contents;
-    }
-
-    &__label {
-        grid-column: 1;
-        text-align: right;
-        white-space: nowrap;
-    }
-
-    &__separator {
-        grid-column: 1 / span 3;
-    }
-
-    &__controls {
-        align-items: flex-start;
-        grid-column: 2;
-
-        > * > * {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &__buttons {
-        grid-column: 3;
-    }
-}
-
-.c-c__drag-ghost {
-    width: 100%;
-    min-height: $interiorMarginSm;
-
-    &.dragging {
-        min-height: 5em;
-        background-color: lightblue;
-        border-radius: 2px;
-    }
-}
-
-/***************************** TEST DATA */
-.c-cs__test-data {
-    &__controls {
-        flex: 0 0 auto;
-    }
-}
-
-.c-cs-tests {
-    flex: 0 1 auto;
-    overflow: auto;
-    padding-right: $interiorMarginSm;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-cs-test {
-    > * + * {
-        margin-left: $interiorMargin;
-    }
-}

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

@@ -105,7 +105,6 @@ import ConditionDescription from "@/plugins/condition/components/ConditionDescri
 import ConditionError from "@/plugins/condition/components/ConditionError.vue";
 import Vue from 'vue';
 import PreviewAction from "@/ui/preview/PreviewAction.js";
-import {getApplicableStylesForItem} from "@/plugins/condition/utils/styleUtils";
 
 export default {
     name: 'ConditionalStylesView',
@@ -116,8 +115,24 @@ export default {
     },
     inject: [
         'openmct',
-        'selection'
+        'domainObject'
     ],
+    props: {
+        itemId: {
+            type: String,
+            default: ''
+        },
+        initialStyles: {
+            type: Object,
+            default() {
+                return undefined;
+            }
+        },
+        canHide: {
+            type: Boolean,
+            default: false
+        }
+    },
     data() {
         return {
             conditionalStyles: [],
@@ -130,11 +145,9 @@ export default {
         }
     },
     destroyed() {
-        this.removeListeners();
+        this.openmct.editor.off('isEditing', this.setEditState);
     },
     mounted() {
-        this.itemId = '';
-        this.getDomainObjectFromSelection();
         this.previewAction = new PreviewAction(this.openmct);
         if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
             let objectStyles = this.itemId ? this.domainObject.configuration.objectStyles[this.itemId] : this.domainObject.configuration.objectStyles;
@@ -149,49 +162,6 @@ export default {
         this.openmct.editor.on('isEditing', this.setEditState);
     },
     methods: {
-        isItemType(type, item) {
-            return item && (item.type === type);
-        },
-        getDomainObjectFromSelection() {
-            let layoutItem;
-            let domainObject;
-
-            if (this.selection[0].length > 1) {
-                //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
-                //The second item in the this.selection[0] list is the container object (usually a layout)
-                layoutItem = this.selection[0][0].context.layoutItem;
-                const item = this.selection[0][0].context.item;
-                this.canHide = true;
-                if (item &&
-                    (!layoutItem || (this.isItemType('subobject-view', layoutItem)))) {
-                    domainObject = item;
-                } else {
-                    domainObject = this.selection[0][1].context.item;
-                    if (layoutItem) {
-                        this.itemId = layoutItem.id;
-                    }
-                }
-            } else {
-                domainObject = this.selection[0][0].context.item;
-            }
-            this.domainObject = domainObject;
-            this.initialStyles = getApplicableStylesForItem(domainObject, layoutItem);
-            this.$nextTick(() => {
-                this.removeListeners();
-                if (this.domainObject) {
-                    this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
-                    this.stopObservingItems = this.openmct.objects.observe(this.domainObject, 'configuration.items', this.updateDomainObjectItemStyles);
-                }
-            });
-        },
-        removeListeners() {
-            if (this.stopObserving) {
-                this.stopObserving();
-            }
-            if (this.stopObservingItems) {
-                this.stopObservingItems();
-            }
-        },
         initialize(conditionSetDomainObject) {
             //If there are new conditions in the conditionSet we need to set those styles to default
             this.conditionSetDomainObject = conditionSetDomainObject;
@@ -288,36 +258,6 @@ export default {
 
             this.persist(domainObjectStyles);
         },
-        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);
-            keys.forEach((key) => {
-                if ((key !== 'styles') &&
-                    (key !== 'staticStyle') &&
-                    (key !== 'conditionSetIdentifier')) {
-                    if (!(newItems.find(item => item.id === key))) {
-                        itemsToRemove.push(key);
-                    }
-                }
-            });
-            if (itemsToRemove.length) {
-                this.removeItemStyles(itemsToRemove, domainObjectStyles);
-            }
-        },
-        removeItemStyles(itemIds, domainObjectStyles) {
-            itemIds.forEach(itemId => {
-                if (domainObjectStyles[itemId]) {
-                    domainObjectStyles[itemId] = undefined;
-                    delete domainObjectStyles[this.itemId];
-                }
-            });
-            if (_.isEmpty(domainObjectStyles)) {
-                domainObjectStyles = undefined;
-            }
-            this.persist(domainObjectStyles);
-        },
         initializeConditionalStyles() {
             if (!this.conditions) {
                 this.conditions = {};
@@ -343,15 +283,9 @@ export default {
         },
         initializeStaticStyle(objectStyles) {
             let staticStyle = objectStyles && objectStyles.staticStyle;
-            if (staticStyle) {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles, staticStyle.style)
-                };
-            } else {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles)
-                };
-            }
+            this.staticStyle = staticStyle || {
+                style: Object.assign({}, this.initialStyles)
+            };
         },
         findStyleByConditionId(id) {
             return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id);

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

@@ -1,269 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2020, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="c-inspector__styles c-inspect-styles">
-    <div class="c-inspect-styles__header">
-        Object Style
-    </div>
-    <div class="c-inspect-styles__content">
-        <div v-if="isStaticAndConditionalStyles"
-             class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
-        >
-            Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice.
-        </div>
-        <div v-if="staticStyle"
-             class="c-inspect-styles__style"
-        >
-            <style-editor class="c-inspect-styles__editor"
-                          :style-item="staticStyle"
-                          :is-editing="isEditing"
-                          :mixed-styles="mixedStyles"
-                          @persist="updateStaticStyle"
-            />
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-
-import StyleEditor from "./StyleEditor.vue";
-import PreviewAction from "@/ui/preview/PreviewAction.js";
-import { getApplicableStylesForItem, getConsolidatedStyleValues, getConditionalStyleForItem } from "@/plugins/condition/utils/styleUtils";
-
-export default {
-    name: 'MultiSelectStylesView',
-    components: {
-        StyleEditor
-    },
-    inject: [
-        'openmct',
-        'selection'
-    ],
-    data() {
-        return {
-            staticStyle: undefined,
-            isEditing: this.openmct.editor.isEditing(),
-            mixedStyles: [],
-            isStaticAndConditionalStyles: false
-        }
-    },
-    destroyed() {
-        this.removeListeners();
-    },
-    mounted() {
-        this.items = [];
-        this.previewAction = new PreviewAction(this.openmct);
-        this.getObjectsAndItemsFromSelection();
-        this.initializeStaticStyle();
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    methods: {
-        isItemType(type, item) {
-            return item && (item.type === type);
-        },
-        hasConditionalStyles(domainObject, id) {
-            return getConditionalStyleForItem(domainObject, id) !== undefined;
-        },
-        getObjectsAndItemsFromSelection() {
-            let domainObject;
-            let subObjects = [];
-
-            //multiple selection
-            let itemInitialStyles = [];
-            let itemStyle;
-            this.selection.forEach((selectionItem) => {
-                const item = selectionItem[0].context.item;
-                const layoutItem = selectionItem[0].context.layoutItem;
-                if (item && this.isItemType('subobject-view', layoutItem)) {
-                    subObjects.push(item);
-                    itemStyle = getApplicableStylesForItem(item);
-                    if (!this.isStaticAndConditionalStyles) {
-                        this.isStaticAndConditionalStyles = this.hasConditionalStyles(item);
-                    }
-                } else {
-                    domainObject = selectionItem[1].context.item;
-                    itemStyle = getApplicableStylesForItem(domainObject, layoutItem || item);
-                    this.items.push({
-                        id: layoutItem.id,
-                        applicableStyles: itemStyle
-                    });
-                    if (!this.isStaticAndConditionalStyles) {
-                        this.isStaticAndConditionalStyles = this.hasConditionalStyles(domainObject, layoutItem.id);
-                    }
-                }
-                itemInitialStyles.push(itemStyle);
-            });
-            const {styles, mixedStyles} = getConsolidatedStyleValues(itemInitialStyles);
-            this.initialStyles = styles;
-            this.mixedStyles = mixedStyles;
-
-            this.domainObject = domainObject;
-            this.removeListeners();
-            if (this.domainObject) {
-                this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
-                this.stopObservingItems = this.openmct.objects.observe(this.domainObject, 'configuration.items', this.updateDomainObjectItemStyles);
-            }
-
-            subObjects.forEach(this.registerListener);
-        },
-        updateDomainObjectItemStyles(newItems) {
-            //check that all items that have been styles still exist. Otherwise delete those styles
-            let keys = Object.keys(this.domainObject.configuration.objectStyles || {});
-            keys.forEach((key) => {
-                if ((key !== 'styles') &&
-                    (key !== 'staticStyle') &&
-                    (key !== 'conditionSetIdentifier')) {
-                    if (!(newItems.find(item => item.id === key))) {
-                        this.removeItemStyles(key);
-                    }
-                }
-            });
-        },
-        registerListener(domainObject) {
-            let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            if (!this.domainObjectsById) {
-                this.domainObjectsById = {};
-            }
-
-            if (!this.domainObjectsById[id]) {
-                this.domainObjectsById[id] = domainObject;
-                this.observeObject(domainObject, id);
-            }
-        },
-        observeObject(domainObject, id) {
-            let unobserveObject = this.openmct.objects.observe(domainObject, '*', function (newObject) {
-                this.domainObjectsById[id] = JSON.parse(JSON.stringify(newObject));
-            }.bind(this));
-            this.unObserveObjects.push(unobserveObject);
-        },
-        removeListeners() {
-            if (this.stopObserving) {
-                this.stopObserving();
-            }
-            if (this.stopObservingItems) {
-                this.stopObservingItems();
-            }
-            if (this.unObserveObjects) {
-                this.unObserveObjects.forEach((unObserveObject) => {
-                    unObserveObject();
-                });
-            }
-            this.unObserveObjects = [];
-        },
-        removeItemStyles(itemId) {
-            let domainObjectStyles =  (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            if (itemId && domainObjectStyles[itemId]) {
-                domainObjectStyles[itemId] = undefined;
-                delete domainObjectStyles[this.itemId];
-
-                if (_.isEmpty(domainObjectStyles)) {
-                    domainObjectStyles = undefined;
-                }
-                this.persist(this.domainObject, domainObjectStyles);
-            }
-        },
-        removeConditionalStyles(domainObjectStyles, itemId) {
-            if (itemId) {
-                domainObjectStyles[itemId].conditionSetIdentifier = undefined;
-                delete domainObjectStyles[itemId].conditionSetIdentifier;
-                domainObjectStyles[itemId].styles = undefined;
-                delete domainObjectStyles[itemId].styles;
-            } else {
-                domainObjectStyles.conditionSetIdentifier = undefined;
-                delete domainObjectStyles.conditionSetIdentifier;
-                domainObjectStyles.styles = undefined;
-                delete domainObjectStyles.styles;
-            }
-        },
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-        },
-        initializeStaticStyle() {
-            this.staticStyle = {
-                style: Object.assign({}, this.initialStyles)
-            };
-        },
-        updateStaticStyle(staticStyle, property) {
-            //update the static style for each of the layoutItems as well as each sub object item
-            this.staticStyle = staticStyle;
-            this.persist(this.domainObject, this.getDomainObjectStyle(this.domainObject, property, this.items));
-            if (this.domainObjectsById) {
-                const keys = Object.keys(this.domainObjectsById);
-                keys.forEach(key => {
-                    let domainObject = this.domainObjectsById[key];
-                    this.persist(domainObject, this.getDomainObjectStyle(domainObject, property));
-                });
-            }
-            this.isStaticAndConditionalStyles = false;
-            let foundIndex = this.mixedStyles.indexOf(property);
-            if (foundIndex > -1) {
-                this.mixedStyles.splice(foundIndex, 1);
-            }
-        },
-        getDomainObjectStyle(domainObject, property, items) {
-            let domainObjectStyles =  (domainObject.configuration && domainObject.configuration.objectStyles) || {};
-
-            if (items) {
-                items.forEach(item => {
-                    let itemStaticStyle = {};
-                    if (domainObjectStyles[item.id] && domainObjectStyles[item.id].staticStyle) {
-                        itemStaticStyle = domainObjectStyles[item.id].staticStyle.style;
-                    }
-                    Object.keys(item.applicableStyles).forEach(key => {
-                        if (property === key) {
-                            itemStaticStyle[key] = this.staticStyle.style[key];
-                        }
-                    });
-                    if (this.isStaticAndConditionalStyles) {
-                        this.removeConditionalStyles(domainObjectStyles, item.id);
-                    }
-                    if (_.isEmpty(itemStaticStyle)) {
-                        itemStaticStyle = undefined;
-                        domainObjectStyles[item.id] = undefined;
-                    } else {
-                        domainObjectStyles[item.id] = Object.assign({}, { staticStyle: { style: itemStaticStyle } });
-                    }
-                });
-            } else {
-                if (!domainObjectStyles.staticStyle) {
-                    domainObjectStyles.staticStyle = {
-                        style: {}
-                    }
-                }
-                if (this.isStaticAndConditionalStyles) {
-                    this.removeConditionalStyles(domainObjectStyles);
-                }
-                domainObjectStyles.staticStyle.style[property] = this.staticStyle.style[property];
-            }
-
-            return domainObjectStyles;
-        },
-
-        persist(domainObject, style) {
-            this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
-        }
-    }
-}
-</script>

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

@@ -22,41 +22,38 @@
 
 <template>
 <div class="c-style">
-    <span :class="[
-              { 'is-style-invisible': styleItem.style.isStyleInvisible },
-              { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
-          ]"
-          :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
-          class="c-style-thumb"
+    <span class="c-style-thumb"
+          :class="{ 'is-style-invisible': styleItem.style.isStyleInvisible }"
+          :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : styleItem.style ]"
     >
         <span class="c-style-thumb__text"
-              :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
+              :class="{ 'hide-nice': !styleItem.style.color }"
         >
             ABC
         </span>
     </span>
     <span class="c-toolbar">
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
+        <toolbar-color-picker v-if="styleItem.style.border"
                               class="c-style__toolbar-button--border-color u-menu-to--center"
                               :options="borderColorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
+        <toolbar-color-picker v-if="styleItem.style.backgroundColor"
                               class="c-style__toolbar-button--background-color u-menu-to--center"
                               :options="backgroundColorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
+        <toolbar-color-picker v-if="styleItem.style.color"
                               class="c-style__toolbar-button--color u-menu-to--center"
                               :options="colorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
+        <toolbar-button v-if="styleItem.style.imageUrl !== undefined"
                         class="c-style__toolbar-button--image-url"
                         :options="imageUrlOption"
                         @change="updateStyleValue"
         />
-        <toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
+        <toolbar-toggle-button v-if="styleItem.style.isStyleInvisible !== undefined"
                                class="c-style__toolbar-button--toggle-visible"
                                :options="isStyleInvisibleOption"
                                @change="updateStyleValue"
@@ -71,7 +68,6 @@ import ToolbarColorPicker from "@/ui/toolbar/components/toolbar-color-picker.vue
 import ToolbarButton from "@/ui/toolbar/components/toolbar-button.vue";
 import ToolbarToggleButton from "@/ui/toolbar/components/toolbar-toggle-button.vue";
 import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
-import {getStylesWithoutNoneValue} from "@/plugins/condition/utils/styleUtils";
 
 export default {
     name: 'StyleEditor',
@@ -87,52 +83,37 @@ export default {
         isEditing: {
             type: Boolean
         },
-        mixedStyles: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
         styleItem: {
             type: Object,
             required: true
         }
     },
     computed: {
-        itemStyle() {
-            return getStylesWithoutNoneValue(this.styleItem.style);
-        },
         borderColorOption() {
-            let value = this.styleItem.style.border.replace('1px solid ', '');
             return {
                 icon: 'icon-line-horz',
                 title: STYLE_CONSTANTS.borderColorTitle,
-                value: this.normalizeValueForSwatch(value),
+                value: this.styleItem.style.border.replace('1px solid ', ''),
                 property: 'border',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('border') > -1
+                isEditing: this.isEditing
             }
         },
         backgroundColorOption() {
-            let value = this.styleItem.style.backgroundColor;
             return {
                 icon: 'icon-paint-bucket',
                 title: STYLE_CONSTANTS.backgroundColorTitle,
-                value: this.normalizeValueForSwatch(value),
+                value: this.styleItem.style.backgroundColor,
                 property: 'backgroundColor',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('backgroundColor') > -1
+                isEditing: this.isEditing
             }
         },
         colorOption() {
-            let value = this.styleItem.style.color;
             return {
                 icon: 'icon-font',
                 title: STYLE_CONSTANTS.textColorTitle,
-                value: this.normalizeValueForSwatch(value),
+                value: this.styleItem.style.color,
                 property: 'color',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('color') > -1
+                isEditing: this.isEditing
             }
         },
         imageUrlOption() {
@@ -157,8 +138,7 @@ export default {
                 property: 'imageUrl',
                 formKeys: ['url'],
                 value: {url: this.styleItem.style.imageUrl},
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('imageUrl') > -1
+                isEditing: this.isEditing
             }
         },
         isStyleInvisibleOption() {
@@ -183,23 +163,7 @@ export default {
         }
     },
     methods: {
-        hasProperty(property) {
-            return property !== undefined;
-        },
-        normalizeValueForSwatch(value) {
-            if (value && value.indexOf('__no_value') > -1) {
-                return value.replace('__no_value', 'transparent');
-            }
-            return value;
-        },
-        normalizeValueForStyle(value) {
-            if (value && value === 'transparent') {
-                return '__no_value';
-            }
-            return value;
-        },
         updateStyleValue(value, item) {
-            value = this.normalizeValueForStyle(value);
             if (item.property === 'border') {
                 value = '1px solid ' + value;
             }
@@ -208,7 +172,7 @@ export default {
             } else {
                 this.styleItem.style[item.property] = value;
             }
-            this.$emit('persist', this.styleItem, item.property);
+            this.$emit('persist', this.styleItem);
         }
     }
 }

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TelemetryCriterion from './TelemetryCriterion';
-import { evaluateResults } from "../utils/evaluator";
+import EventEmitter from 'EventEmitter';
+import {OPERATIONS} from '../utils/operations';
+import {computeCondition} from "@/plugins/condition/utils/evaluator";
 
-export default class AllTelemetryCriterion extends TelemetryCriterion {
+export default class TelemetryCriterion extends EventEmitter {
 
     /**
      * Subscribes/Unsubscribes to telemetry and emits the result
@@ -33,35 +34,23 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
      * @param openmct
      */
     constructor(telemetryDomainObjectDefinition, openmct) {
-        super(telemetryDomainObjectDefinition, openmct);
-    }
+        super();
 
-    initialize() {
-        this.telemetryObjects = { ...this.telemetryDomainObjectDefinition.telemetryObjects };
+        this.openmct = openmct;
+        this.objectAPI = this.openmct.objects;
+        this.telemetryAPI = this.openmct.telemetry;
+        this.timeAPI = this.openmct.time;
+        this.id = telemetryDomainObjectDefinition.id;
+        this.telemetry = telemetryDomainObjectDefinition.telemetry;
+        this.operation = telemetryDomainObjectDefinition.operation;
+        this.telemetryObjects = Object.assign({}, telemetryDomainObjectDefinition.telemetryObjects);
+        this.input = telemetryDomainObjectDefinition.input;
+        this.metadata = telemetryDomainObjectDefinition.metadata;
         this.telemetryDataCache = {};
     }
 
-    isValid() {
-        return (this.telemetry === 'any' || this.telemetry === 'all') && this.metadata && this.operation;
-    }
-
     updateTelemetry(telemetryObjects) {
-        this.telemetryObjects = { ...telemetryObjects };
-        this.removeTelemetryDataCache();
-    }
-
-    removeTelemetryDataCache() {
-        const telemetryCacheIds = Object.keys(this.telemetryDataCache);
-        Object.values(this.telemetryObjects).forEach(telemetryObject => {
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            const foundIndex = telemetryCacheIds.indexOf(id);
-            if (foundIndex > -1) {
-                telemetryCacheIds.splice(foundIndex, 1);
-            }
-        });
-        telemetryCacheIds.forEach(id => {
-            delete (this.telemetryDataCache[id]);
-        });
+        this.telemetryObjects = Object.assign({}, telemetryObjects);
     }
 
     formatData(data, telemetryObjects) {
@@ -79,32 +68,60 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         });
 
         const datum = {
-            result: evaluateResults(Object.values(this.telemetryDataCache), this.telemetry)
+            result: computeCondition(this.telemetryDataCache, this.telemetry === 'all')
         };
 
         if (data) {
-            this.openmct.time.getAllTimeSystems().forEach(timeSystem => {
+            // TODO check back to see if we should format times here
+            this.timeAPI.getAllTimeSystems().forEach(timeSystem => {
                 datum[timeSystem.key] = data[timeSystem.key]
             });
         }
         return datum;
     }
 
-    getResult(data, telemetryObjects) {
-        const validatedData = this.isValid() ? data : {};
-
-        if (validatedData) {
-            this.telemetryDataCache[validatedData.id] = this.computeResult(validatedData);
+    handleSubscription(data, telemetryObjects) {
+        if(this.isValid()) {
+            this.emitEvent('criterionResultUpdated', this.formatData(data, telemetryObjects));
+        } else {
+            this.emitEvent('criterionResultUpdated', this.formatData({}, telemetryObjects));
         }
+    }
 
-        Object.values(telemetryObjects).forEach(telemetryObject => {
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            if (this.telemetryDataCache[id] === undefined) {
-                this.telemetryDataCache[id] = false;
+    findOperation(operation) {
+        for (let i=0; i < OPERATIONS.length; i++) {
+            if (operation === OPERATIONS[i].name) {
+                return OPERATIONS[i].operation;
             }
-        });
+        }
+        return null;
+    }
 
-        this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
+    computeResult(data) {
+        let result = false;
+        if (data) {
+            let comparator = this.findOperation(this.operation);
+            let params = [];
+            params.push(data[this.metadata]);
+            if (this.input instanceof Array && this.input.length) {
+                this.input.forEach(input => params.push(input));
+            }
+            if (typeof comparator === 'function') {
+                result = comparator(params);
+            }
+        }
+        return result;
+    }
+
+    emitEvent(eventName, data) {
+        this.emit(eventName, {
+            id: this.id,
+            data: data
+        });
+    }
+
+    isValid() {
+        return (this.telemetry === 'any' || this.telemetry === 'all') && this.metadata && this.operation;
     }
 
     requestLAD(options) {
@@ -122,7 +139,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
 
         let keys = Object.keys(Object.assign({}, options.telemetryObjects));
         const telemetryRequests = keys
-            .map(key => this.openmct.telemetry.request(
+            .map(key => this.telemetryAPI.request(
                 options.telemetryObjects[key],
                 options
             ));
@@ -146,7 +163,10 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
     }
 
     destroy() {
+        this.emitEvent('criterionRemoved');
         delete this.telemetryObjects;
         delete this.telemetryDataCache;
+        delete this.telemetryObjectIdAsString;
+        delete this.telemetryObject;
     }
 }

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import { OPERATIONS } from '../utils/operations';
+import {OPERATIONS} from '../utils/operations';
 
 export default class TelemetryCriterion extends EventEmitter {
 
@@ -36,27 +36,20 @@ export default class TelemetryCriterion extends EventEmitter {
         super();
 
         this.openmct = openmct;
-        this.telemetryDomainObjectDefinition = telemetryDomainObjectDefinition;
+        this.objectAPI = this.openmct.objects;
+        this.telemetryAPI = this.openmct.telemetry;
+        this.timeAPI = this.openmct.time;
         this.id = telemetryDomainObjectDefinition.id;
         this.telemetry = telemetryDomainObjectDefinition.telemetry;
         this.operation = telemetryDomainObjectDefinition.operation;
         this.input = telemetryDomainObjectDefinition.input;
         this.metadata = telemetryDomainObjectDefinition.metadata;
-        this.result = undefined;
-
-        this.initialize();
+        this.telemetryObject = telemetryDomainObjectDefinition.telemetryObject;
+        this.telemetryObjectIdAsString = this.objectAPI.makeKeyString(telemetryDomainObjectDefinition.telemetry);
+        this.on(`subscription:${this.telemetryObjectIdAsString}`, this.handleSubscription);
         this.emitEvent('criterionUpdated', this);
     }
 
-    initialize() {
-        this.telemetryObject = this.telemetryDomainObjectDefinition.telemetryObject;
-        this.telemetryObjectIdAsString = this.openmct.objects.makeKeyString(this.telemetryDomainObjectDefinition.telemetry);
-    }
-
-    isValid() {
-        return this.telemetryObject && this.metadata && this.operation;
-    }
-
     updateTelemetry(telemetryObjects) {
         this.telemetryObject = telemetryObjects[this.telemetryObjectIdAsString];
     }
@@ -67,44 +60,20 @@ export default class TelemetryCriterion extends EventEmitter {
         };
 
         if (data) {
-            this.openmct.time.getAllTimeSystems().forEach(timeSystem => {
+            // TODO check back to see if we should format times here
+            this.timeAPI.getAllTimeSystems().forEach(timeSystem => {
                 datum[timeSystem.key] = data[timeSystem.key]
             });
         }
         return datum;
     }
 
-    getResult(data) {
-        const validatedData = this.isValid() ? data : {};
-        this.result = this.computeResult(validatedData);
-    }
-
-    requestLAD(options) {
-        options = Object.assign({},
-            options,
-            {
-                strategy: 'latest',
-                size: 1
-            }
-        );
-
-        if (!this.isValid()) {
-            return {
-                id: this.id,
-                data: this.formatData({})
-            };
+    handleSubscription(data) {
+        if(this.isValid()) {
+            this.emitEvent('criterionResultUpdated', this.formatData(data));
+        } else {
+            this.emitEvent('criterionResultUpdated', this.formatData({}));
         }
-
-        return this.openmct.telemetry.request(
-            this.telemetryObject,
-            options
-        ).then(results => {
-            const latestDatum = results.length ? results[results.length - 1] : {};
-            return {
-                id: this.id,
-                data: this.formatData(latestDatum)
-            };
-        });
     }
 
     findOperation(operation) {
@@ -126,7 +95,7 @@ export default class TelemetryCriterion extends EventEmitter {
                 this.input.forEach(input => params.push(input));
             }
             if (typeof comparator === 'function') {
-                result = !!comparator(params);
+                result = comparator(params);
             }
         }
         return result;
@@ -139,9 +108,42 @@ export default class TelemetryCriterion extends EventEmitter {
         });
     }
 
+    isValid() {
+        return this.telemetryObject && this.metadata && this.operation;
+    }
+
+    requestLAD(options) {
+        options = Object.assign({},
+            options,
+            {
+                strategy: 'latest',
+                size: 1
+            }
+        );
+
+        if (!this.isValid()) {
+            return {
+                id: this.id,
+                data: this.formatData({})
+            };
+        }
+
+        return this.telemetryAPI.request(
+            this.telemetryObject,
+            options
+        ).then(results => {
+            const latestDatum = results.length ? results[results.length - 1] : {};
+            return {
+                id: this.id,
+                data: this.formatData(latestDatum)
+            };
+        });
+    }
 
     destroy() {
-        delete this.telemetryObject;
+        this.off(`subscription:${this.telemetryObjectIdAsString}`, this.handleSubscription);
+        this.emitEvent('criterionRemoved');
         delete this.telemetryObjectIdAsString;
+        delete this.telemetryObject;
     }
 }

src/plugins/condition/criterion/TelemetryCriterionSpec.js

@@ -54,7 +54,7 @@ describe("The telemetry criterion", function () {
                     key: "testSource",
                     source: "value",
                     name: "Test",
-                    format: "string"
+                    format: "enum"
                 }]
             }
         };
@@ -80,9 +80,8 @@ describe("The telemetry criterion", function () {
         testCriterionDefinition = {
             id: 'test-criterion-id',
             telemetry: openmct.objects.makeKeyString(testTelemetryObject.identifier),
-            operation: 'textContains',
-            metadata: 'value',
-            input: ['Hell'],
+            operation: 'lessThan',
+            metadata: 'sin',
             telemetryObject: testTelemetryObject
         };
 
@@ -101,21 +100,12 @@ describe("The telemetry criterion", function () {
         expect(telemetryCriterion.telemetryObjectIdAsString).toEqual(testTelemetryObject.identifier.key);
     });
 
-    it("returns a result on new data from relevant telemetry providers", function () {
-        telemetryCriterion.getResult({
+    it("updates and emits event on new data from telemetry providers", function () {
+        spyOn(telemetryCriterion, 'emitEvent').and.callThrough();
+        telemetryCriterion.handleSubscription({
             value: 'Hello',
-            utc: 'Hi',
-            id: testTelemetryObject.identifier.key
+            utc: 'Hi'
         });
-        expect(telemetryCriterion.result).toBeTrue();
+        expect(telemetryCriterion.emitEvent).toHaveBeenCalled();
     });
-
-    // it("does not return a result on new data from irrelavant telemetry providers", function () {
-    //     telemetryCriterion.getResult({
-    //         value: 'Hello',
-    //         utc: 'Hi',
-    //         id: '1234'
-    //     });
-    //     expect(telemetryCriterion.result).toBeFalse();
-    // });
 });

src/plugins/condition/utils/evaluator.js

@@ -19,50 +19,36 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { TRIGGER } from "./constants";
 
-export const evaluateResults = (results, trigger) => {
-    if (trigger && trigger === TRIGGER.XOR) {
-        return matchExact(results, 1);
-    } else if (trigger && trigger === TRIGGER.NOT) {
-        return matchExact(results, 0);
-    } else if (trigger && trigger === TRIGGER.ALL) {
-        return matchAll(results);
-    } else {
-        return matchAny(results);
-    }
-}
-
-function matchAll(results) {
-    for (const result of results) {
-        if (!result) {
-            return false;
+export const computeCondition = (resultMap, allMustBeTrue) => {
+    let result = false;
+    for (let key in resultMap) {
+        if (resultMap.hasOwnProperty(key)) {
+            result = resultMap[key];
+            if (allMustBeTrue && !result) {
+                //If we want all conditions to be true, then even one negative result should break.
+                break;
+            } else if (!allMustBeTrue && result) {
+                //If we want at least one condition to be true, then even one positive result should break.
+                break;
+            }
         }
     }
+    return result;
+};
 
-    return true;
-}
-
-function matchAny(results) {
-    for (const result of results) {
-        if (result) {
-            return true;
+//Returns true only if limit number of results are satisfied
+export const computeConditionByLimit = (resultMap, limit) => {
+    let trueCount = 0;
+    for (let key in resultMap) {
+        if (resultMap.hasOwnProperty(key)) {
+            if (resultMap[key]) {
+                trueCount++;
+            }
+            if (trueCount > limit) {
+                break;
+            }
         }
     }
-
-    return false;
-}
-
-function matchExact(results, target) {
-    let matches = 0;
-    for (const result of results) {
-        if (result) {
-            matches++;
-        }
-        if (matches > target) {
-            return false;
-        }
-    }
-
-    return matches === target;
-}
+    return trueCount === limit;
+};

src/plugins/condition/utils/evaluatorSpec.js

@@ -20,185 +20,47 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { evaluateResults } from './evaluator';
-import { TRIGGER } from './constants';
+import { computeConditionByLimit } from "./evaluator";
 
-describe('evaluate results', () => {
-    // const allTrue = [true, true, true, true, true];
-    // const oneTrue = [false, false, false, false, true];
-    // const multipleTrue = [false, true, false, true, false];
-    // const noneTrue = [false, false, false, false, false];
-    // const allTrueWithUndefined = [true, true, true, undefined, true];
-    // const oneTrueWithUndefined = [undefined, undefined, undefined, undefined, true];
-    // const multipleTrueWithUndefined = [true, undefined, true, undefined, true];
-    // const allUndefined = [undefined, undefined, undefined, undefined, undefined];
-    // const singleTrue = [true];
-    // const singleFalse = [false];
-    // const singleUndefined = [undefined];
-    // const empty = [];
+describe('evaluate results based on trigger', function () {
 
-    const tests = [
-        {
-            name: 'allTrue',
-            values: [true, true, true, true, true],
-            any: true,
-            all: true,
-            not: false,
-            xor: false
-        }, {
-            name: 'oneTrue',
-            values: [false, false, false, false, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: true
-        }, {
-            name: 'multipleTrue',
-            values: [false, true, false, true, false],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'noneTrue',
-            values: [false, false, false, false, false],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'allTrueWithUndefined',
-            values: [true, true, true, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'oneTrueWithUndefined',
-            values: [undefined, undefined, undefined, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: true
-        }, {
-            name: 'multipleTrueWithUndefined',
-            values: [true, undefined, true, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'allUndefined',
-            values: [undefined, undefined, undefined, undefined, undefined],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'singleTrue',
-            values: [true],
-            any: true,
-            all: true,
-            not: false,
-            xor: true
-        }, {
-            name: 'singleFalse',
-            values: [false],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'singleUndefined',
-            values: [undefined],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }
-        // , {
-        //     name: 'empty',
-        //     values: [],
-        //     any: false,
-        //     all: false,
-        //     not: true,
-        //     xor: false
-        // }
-    ];
-
-    describe(`based on trigger ${TRIGGER.ANY}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.ANY);
-                expect(result).toEqual(test[TRIGGER.ANY])
-            });
-        });
+    it('should evaluate to true if trigger is NOT', () => {
+        const results = {
+            result: false,
+            result1: false,
+            result2: false
+        };
+        const result = computeConditionByLimit(results, 0);
+        expect(result).toBeTrue();
     });
 
-    describe(`based on trigger ${TRIGGER.ALL}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.ALL);
-                expect(result).toEqual(test[TRIGGER.ALL])
-            });
-        });
+    it('should evaluate to false if trigger is NOT', () => {
+        const results = {
+            result: true,
+            result1: false,
+            result2: false
+        };
+        const result = computeConditionByLimit(results, 0);
+        expect(result).toBeFalse();
     });
 
-    describe(`based on trigger ${TRIGGER.NOT}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.NOT);
-                expect(result).toEqual(test[TRIGGER.NOT])
-            });
-        });
+    it('should evaluate to true if trigger is XOR', () => {
+        const results = {
+            result: false,
+            result1: true,
+            result2: false
+        };
+        const result = computeConditionByLimit(results, 1);
+        expect(result).toBeTrue();
     });
 
-    describe(`based on trigger ${TRIGGER.XOR}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.XOR);
-                expect(result).toEqual(test[TRIGGER.XOR])
-            });
-        });
+    it('should evaluate to false if trigger is XOR', () => {
+        const results = {
+            result: false,
+            result1: true,
+            result2: true
+        };
+        const result = computeConditionByLimit(results, 1);
+        expect(result).toBeFalse();
     });
-
-    // it('should evaluate to true if trigger is NOT', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: false,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 0);
-    //     expect(result).toBeTrue();
-    // });
-
-    // it('should evaluate to false if trigger is NOT', () => {
-    //     const results = {
-    //         result: true,
-    //         result1: false,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 0);
-    //     expect(result).toBeFalse();
-    // });
-
-    // it('should evaluate to true if trigger is XOR', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: true,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 1);
-    //     expect(result).toBeTrue();
-    // });
-
-    // it('should evaluate to false if trigger is XOR', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: true,
-    //         result2: true
-    //     };
-    //     const result = computeConditionByLimit(results, 1);
-    //     expect(result).toBeFalse();
-    // });
 });

src/plugins/condition/utils/operations.js

@@ -22,18 +22,6 @@
 
 import _ from 'lodash';
 
-const convertToNumbers = (input) => {
-    let numberInputs = [];
-    input.forEach(inputValue => numberInputs.push(Number(inputValue)));
-    return numberInputs;
-};
-
-const convertToStrings = (input) => {
-    let stringInputs = [];
-    input.forEach(inputValue => stringInputs.push(inputValue !== undefined ? inputValue.toString() : ''));
-    return stringInputs;
-};
-
 export const OPERATIONS = [
     {
         name: 'equalTo',
@@ -110,7 +98,8 @@ export const OPERATIONS = [
     {
         name: 'between',
         operation: function (input) {
-            let numberInputs = convertToNumbers(input);
+            let numberInputs = [];
+            input.forEach(inputValue => numberInputs.push(Number(inputValue)));
             let larger = Math.max(...numberInputs.slice(1,3));
             let smaller = Math.min(...numberInputs.slice(1,3));
             return (numberInputs[0] > smaller) && (numberInputs[0] < larger);
@@ -125,7 +114,8 @@ export const OPERATIONS = [
     {
         name: 'notBetween',
         operation: function (input) {
-            let numberInputs = convertToNumbers(input);
+            let numberInputs = [];
+            input.forEach(inputValue => numberInputs.push(Number(inputValue)));
             let larger = Math.max(...numberInputs.slice(1,3));
             let smaller = Math.min(...numberInputs.slice(1,3));
             return (numberInputs[0] < smaller) || (numberInputs[0] > larger);
@@ -224,8 +214,7 @@ export const OPERATIONS = [
     {
         name: 'enumValueIs',
         operation: function (input) {
-            let stringInputs = convertToStrings(input);
-            return stringInputs[0] === stringInputs[1];
+            return input[0] === input[1];
         },
         text: 'is',
         appliesTo: ['enum'],
@@ -237,8 +226,7 @@ export const OPERATIONS = [
     {
         name: 'enumValueIsNot',
         operation: function (input) {
-            let stringInputs = convertToStrings(input);
-            return stringInputs[0] !== stringInputs[1];
+            return input[0] !== input[1];
         },
         text: 'is not',
         appliesTo: ['enum'],
@@ -250,10 +238,9 @@ export const OPERATIONS = [
     {
         name: 'valueIs',
         operation: function (input) {
-            const lhsValue = input[0] !== undefined ? input[0].toString() : '';
             if (input[1]) {
                 const values = input[1].split(',');
-                return values.find((value) => lhsValue === _.trim(value.toString()));
+                return values.find((value) => input[0].toString() === _.trim(value.toString()));
             }
             return false;
         },
@@ -267,10 +254,9 @@ export const OPERATIONS = [
     {
         name: 'valueIsNot',
         operation: function (input) {
-            const lhsValue = input[0] !== undefined ? input[0].toString() : '';
             if (input[1]) {
                 const values = input[1].split(',');
-                const found = values.find((value) => lhsValue === _.trim(value.toString()));
+                const found = values.find((value) => input[0].toString() === _.trim(value.toString()));
                 return !found;
             }
             return false;

src/plugins/condition/utils/operationsSpec.js

@@ -25,10 +25,8 @@ let isOneOfOperation = OPERATIONS.find((operation) => operation.name === 'valueI
 let isNotOneOfOperation = OPERATIONS.find((operation) => operation.name === 'valueIsNot');
 let isBetween = OPERATIONS.find((operation) => operation.name === 'between');
 let isNotBetween = OPERATIONS.find((operation) => operation.name === 'notBetween');
-let enumIsOperation = OPERATIONS.find((operation) => operation.name === 'enumValueIs');
-let enumIsNotOperation = OPERATIONS.find((operation) => operation.name === 'enumValueIsNot');
 
-describe('operations', function () {
+describe('Is one of and is not one of operations', function () {
 
     it('should evaluate isOneOf to true for number inputs', () => {
         const inputs = [45, "5,6,45,8"];
@@ -89,54 +87,4 @@ describe('operations', function () {
         const inputs = ["45", "30", "50"];
         expect(!!isNotBetween.operation(inputs)).toBeFalse();
     });
-
-    it('should evaluate enumValueIs to true for number inputs', () => {
-        const inputs = [1, "1"];
-        expect(!!enumIsOperation.operation(inputs)).toBeTrue();
-    });
-
-    it('should evaluate enumValueIs to true for string inputs', () => {
-        const inputs = ["45", "45"];
-        expect(!!enumIsOperation.operation(inputs)).toBeTrue();
-    });
-
-    it('should evaluate enumValueIsNot to true for number inputs', () => {
-        const inputs = [45, "46"];
-        expect(!!enumIsNotOperation.operation(inputs)).toBeTrue();
-    });
-
-    it('should evaluate enumValueIsNot to true for string inputs', () => {
-        const inputs = ["45", "46"];
-        expect(!!enumIsNotOperation.operation(inputs)).toBeTrue();
-    });
-
-    it('should evaluate enumValueIs to false for number inputs', () => {
-        const inputs = [1, "2"];
-        expect(!!enumIsOperation.operation(inputs)).toBeFalse();
-    });
-
-    it('should evaluate enumValueIs to false for string inputs', () => {
-        const inputs = ["45", "46"];
-        expect(!!enumIsOperation.operation(inputs)).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to false for number inputs', () => {
-        const inputs = [45, "45"];
-        expect(!!enumIsNotOperation.operation(inputs)).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to false for string inputs', () => {
-        const inputs = ["45", "45"];
-        expect(!!enumIsNotOperation.operation(inputs)).toBeFalse();
-    });
-
-    it('should evaluate enumValueIs to false for undefined input', () => {
-        const inputs = [undefined, "45"];
-        expect(!!enumIsOperation.operation(inputs)).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to true for undefined input', () => {
-        const inputs = [undefined, "45"];
-        expect(!!enumIsNotOperation.operation(inputs)).toBeTrue();
-    });
 });

src/plugins/condition/utils/styleUtils.js

@@ -19,154 +19,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-const NONE_VALUE = '__no_value';
 
-const styleProps = {
-    backgroundColor: {
-        svgProperty: 'fill',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view' ||
-                                      type === 'telemetry-view' ||
-                                      type === 'box-view' ||
-                                      type === 'subobject-view');
-        }
-    },
-    border: {
-        svgProperty: 'stroke',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view' ||
-                                            type === 'telemetry-view' ||
-                                            type === 'box-view' ||
-                                            type === 'image-view' ||
-                                            type === 'line-view'||
-                                            type === 'subobject-view');
-        }
-    },
-    color: {
-        svgProperty: 'color',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view' ||
-                                    type === 'telemetry-view'||
-                                    type === 'subobject-view');
-        }
-    },
-    imageUrl: {
-        svgProperty: 'url',
-        noneValue: '',
-        applicableForType: type => {
-            return !type ? false : type === 'image-view';
-        }
-    }
-};
-
-const aggregateStyleValues = (accumulator, currentStyle) => {
-    const styleKeys = Object.keys(currentStyle);
-    const properties = Object.keys(styleProps);
-    properties.forEach((property) => {
-        if (!accumulator[property]) {
-            accumulator[property] = [];
-        }
-        const found = styleKeys.find(key => key === property);
-        if (found) {
-            accumulator[property].push(currentStyle[found]);
-        }
-    });
-    return accumulator;
-};
-
-// Returns a union of styles used by multiple items.
-// Styles that are common to all items but don't have the same value are added to the mixedStyles list
-export const getConsolidatedStyleValues = (multipleItemStyles) => {
-    let aggregatedStyleValues = multipleItemStyles.reduce(aggregateStyleValues, {});
-
-    let styleValues = {};
-    let mixedStyles = [];
-    const properties = Object.keys(styleProps);
-    properties.forEach((property) => {
-        const values = aggregatedStyleValues[property];
-        if (values.length) {
-            if (values.every(value => value === values[0])) {
-                styleValues[property] = values[0];
-            } else {
-                styleValues[property] = '';
-                mixedStyles.push(property);
-            }
-        }
-    });
-    return {
-        styles: styleValues,
-        mixedStyles
+export const getStyleProp = (key, defaultValue) => {
+    let styleProp = undefined;
+    switch(key) {
+    case 'fill': styleProp = {
+        backgroundColor: defaultValue || 'transparent'
     };
-};
-
-const getStaticStyleForItem = (domainObject, id) => {
-    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
-    if (domainObjectStyles) {
-        if (id) {
-            if(domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
-                return domainObjectStyles[id].staticStyle.style;
-            }
-        } else if (domainObjectStyles.staticStyle) {
-            return domainObjectStyles.staticStyle.style;
-        }
+        break;
+    case 'stroke': styleProp = {
+        border: '1px solid ' + (defaultValue || 'transparent')
+    };
+        break;
+    case 'color': styleProp = {
+        color: defaultValue || 'transparent'
+    };
+        break;
+    case 'url': styleProp = {
+        imageUrl: defaultValue || 'transparent'
+    };
+        break;
     }
-};
-
-export const getConditionalStyleForItem = (domainObject, id) => {
-    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
-    if (domainObjectStyles) {
-        if (id) {
-            if (domainObjectStyles[id] && domainObjectStyles[id].conditionSetIdentifier) {
-                return domainObjectStyles[id].styles;
-            }
-        } else if (domainObjectStyles.staticStyle) {
-            return domainObjectStyles.styles;
-        }
-    }
-};
-
-//Returns either existing static styles or uses SVG defaults if available
-export const getApplicableStylesForItem = (domainObject, item) => {
-    const type = item && item.type;
-    const id = item && item.id;
-    let style = {};
-
-    let staticStyle = getStaticStyleForItem(domainObject, id);
-
-    const properties = Object.keys(styleProps);
-    properties.forEach(property => {
-        const styleProp = styleProps[property];
-        if (styleProp.applicableForType(type)) {
-            let defaultValue;
-            if (staticStyle) {
-                defaultValue = staticStyle[property];
-            } else if (item) {
-                defaultValue = item[styleProp.svgProperty];
-            }
-            style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
-        }
-    });
-
-    return style;
-};
-
-export const getStylesWithoutNoneValue = (style) => {
-    if (_.isEmpty(style) || !style) {
-        return;
-    }
-    let styleObj = {};
-    const keys = Object.keys(style);
-    keys.forEach(key => {
-        if ((typeof style[key] === 'string')) {
-            if (style[key].indexOf('__no_value') > -1) {
-                style[key] = '';
-            } else {
-                styleObj[key] = style[key];
-            }
-        }
-    });
-    return styleObj;
+
+    return styleProp;
 };

src/plugins/condition/utils/time.js

@@ -1,52 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export const getLatestTimestamp = (
-    currentTimestamp,
-    compareTimestamp,
-    timeSystems,
-    currentTimeSystem
-) => {
-    let latest = { ...currentTimestamp };
-    const compare = { ...compareTimestamp };
-    const key = currentTimeSystem.key;
-
-    if (!latest || !latest[key]) {
-        latest = updateLatestTimeStamp(compare, timeSystems)
-    }
-
-    if (compare[key] > latest[key]) {
-        latest = updateLatestTimeStamp(compare, timeSystems)
-    }
-
-    return latest;
-}
-
-function updateLatestTimeStamp(timestamp, timeSystems) {
-    let latest = {};
-
-    timeSystems.forEach(timeSystem => {
-        latest[timeSystem.key] = timestamp[timeSystem.key];
-    });
-
-    return latest;
-}

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -21,14 +21,13 @@
 *****************************************************************************/
 
 <template>
-<component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget"
-           :href="urlDefined ? internalDomainObject.url : null"
+<a class="c-condition-widget"
+   :href="internalDomainObject.url"
 >
     <div class="c-condition-widget__label">
         {{ internalDomainObject.label }}
     </div>
-</component>
+</a>
 </template>
 
 <script>
@@ -39,11 +38,6 @@ export default {
             internalDomainObject: this.domainObject
         }
     },
-    computed: {
-        urlDefined() {
-            return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
-        }
-    },
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
     },

src/plugins/conditionWidget/components/condition-widget.scss

@@ -28,12 +28,10 @@
     border: 1px solid transparent;
     display: inline-block;
     padding: $interiorMarginLg $interiorMarginLg * 2;
-}
-
-a.c-condition-widget {
-    // Widget is conditionally made into a <a> when URL property has been defined
-    cursor: pointer !important;
-    pointer-events: inherit;
+    cursor: inherit !important;
+    &[href] {
+        cursor: pointer !important;
+    }
 }
 
 // Make Condition Widget expand when in a hidden frame Layout context

src/plugins/displayLayout/components/BoxView.vue

@@ -43,7 +43,7 @@ export default {
     makeDefinition() {
         return {
             fill: '#717171',
-            stroke: '',
+            stroke: 'transparent',
             x: 1,
             y: 1,
             width: 10,
@@ -74,14 +74,13 @@ export default {
     },
     computed: {
         style() {
-            if (this.itemStyle) {
-                return this.itemStyle;
-            } else {
-                return {
-                    backgroundColor: this.item.fill,
-                    border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
-                };
-            }
+            return Object.assign({
+                backgroundColor: this.item.fill,
+                border: '1px solid ' + this.item.stroke
+            }, this.itemStyle);
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/ImageView.vue

@@ -74,18 +74,13 @@ export default {
     },
     computed: {
         style() {
-            let backgroundImage = 'url(' + this.item.url + ')';
-            let border = '1px solid ' + this.item.stroke;
-            if (this.itemStyle) {
-                if (this.itemStyle.imageUrl !== undefined) {
-                    backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';
-                }
-                border = this.itemStyle.border;
-            }
             return {
-                backgroundImage,
-                border
+                backgroundImage: this.itemStyle ? ('url(' + this.itemStyle.imageUrl + ')') : 'url(' + this.item.url + ')',
+                border: (this.itemStyle && this.itemStyle.border) ? this.itemStyle.border : ('1px solid ' + this.item.stroke)
             };
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/LineView.vue

@@ -127,11 +127,8 @@ export default {
             return {x, y, x2, y2};
         },
         stroke() {
-            if (this.itemStyle) {
-                if (this.itemStyle.border) {
-                    return this.itemStyle.border.replace('1px solid ', '');
-                }
-                return '';
+            if (this.itemStyle && this.itemStyle.border) {
+                return this.itemStyle.border.replace('1px solid ', '');
             } else {
                 return this.item.stroke;
             }
@@ -149,6 +146,9 @@ export default {
                 height: `${height}px`
             };
         },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
+        },
         startHandleClass() {
             return START_HANDLE_QUADRANTS[this.vectorQuadrant];
         },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,13 +30,14 @@
     <div
         v-if="domainObject"
         class="c-telemetry-view"
-        :class="styleClass"
         :style="styleObject"
         @contextmenu.prevent="showContextMenu"
     >
         <div
             v-if="showLabel"
             class="c-telemetry-view__label"
+            :class="[styleClass]"
+            :style="objectStyle"
         >
             <div class="c-telemetry-view__label-text">
                 {{ domainObject.name }}
@@ -47,7 +48,8 @@
             v-if="showValue"
             :title="fieldName"
             class="c-telemetry-view__value"
-            :class="[telemetryClass]"
+            :class="[telemetryClass, !telemetryClass && styleClass]"
+            :style="!telemetryClass && objectStyle"
         >
             <div class="c-telemetry-view__value-text">
                 {{ telemetryValue }}
@@ -60,7 +62,7 @@
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 import printj from 'printj'
-import conditionalStylesMixin from "../mixins/objectStyles-mixin";
+import StyleRuleManager from "../../condition/StyleRuleManager";
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
     DEFAULT_POSITION = [1, 1],
@@ -79,8 +81,8 @@ export default {
             height: DEFAULT_TELEMETRY_DIMENSIONS[1],
             displayMode: 'all',
             value: metadata.getDefaultDisplayValue(),
-            stroke: "",
-            fill: "",
+            stroke: "transparent",
+            fill: "transparent",
             color: "",
             size: "13px"
         };
@@ -89,7 +91,6 @@ export default {
     components: {
         LayoutFrame
     },
-    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -112,7 +113,8 @@ export default {
             datum: undefined,
             formats: undefined,
             domainObject: undefined,
-            currentObjectPath: undefined
+            currentObjectPath: undefined,
+            objectStyle: ''
         }
     },
     computed: {
@@ -125,10 +127,15 @@ export default {
             return displayMode === 'all' || displayMode === 'value';
         },
         styleObject() {
-            return Object.assign({}, {
+            return {
+                backgroundColor: this.item.fill,
+                borderColor: this.item.stroke,
+                color: this.item.color,
                 fontSize: this.item.size
-            }, this.itemStyle);
-
+            }
+        },
+        styleClass() {
+            return this.objectStyle && this.objectStyle.isStyleInvisible;
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;
@@ -183,6 +190,15 @@ export default {
             this.removeSelectable();
         }
 
+        if (this.unlistenStyles) {
+            this.unlistenStyles();
+        }
+
+        if (this.styleRuleManager) {
+            this.styleRuleManager.destroy();
+            delete this.styleRuleManager;
+        }
+
         this.openmct.time.off("bounds", this.refreshData);
     },
     methods: {
@@ -225,6 +241,7 @@ export default {
         },
         setObject(domainObject) {
             this.domainObject = domainObject;
+            this.initObjectStyles();
             this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
             this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
             this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
@@ -249,6 +266,30 @@ export default {
         },
         showContextMenu(event) {
             this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+        },
+        initObjectStyles() {
+            if (this.domainObject.configuration) {
+                this.styleRuleManager = new StyleRuleManager(this.domainObject.configuration.objectStyles, this.openmct, this.updateStyle.bind(this));
+
+                if (this.unlistenStyles) {
+                    this.unlistenStyles();
+                }
+                this.unlistenStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
+                    //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
+                    this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+                });
+            }
+        },
+        updateStyle(styleObj) {
+            let keys = Object.keys(styleObj);
+            keys.forEach(key => {
+                if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
+                    if (styleObj[key]) {
+                        styleObj[key] = '';
+                    }
+                }
+            });
+            this.objectStyle = styleObj;
         }
     }
 }

src/plugins/displayLayout/components/TextView.vue

@@ -32,7 +32,7 @@
         :class="[styleClass]"
         :style="style"
     >
-        <div class="c-text-view__text">{{ item.text }}</div>
+        {{ item.text }}
     </div>
 </layout-frame>
 </template>
@@ -44,8 +44,8 @@ import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 export default {
     makeDefinition(openmct, gridSize, element) {
         return {
-            fill: '',
-            stroke: '',
+            fill: 'transparent',
+            stroke: 'transparent',
             size: '13px',
             color: '',
             x: 1,
@@ -80,8 +80,14 @@ export default {
     computed: {
         style() {
             return Object.assign({
+                backgroundColor: this.item.fill,
+                border: '1px solid ' + this.item.stroke,
+                color: this.item.color,
                 fontSize: this.item.size
             }, this.itemStyle);
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/layout-frame.scss

@@ -16,8 +16,6 @@
 .is-editing {
     /******************* STYLES FOR C-FRAME WHILE EDITING */
     .c-frame {
-        border: 1px solid rgba($editFrameColorHov, 0.3);
-
         &:not([s-selected]) {
             &:hover {
                 border: $editFrameBorderHov;

src/plugins/displayLayout/components/text-view.scss

@@ -1,8 +1,6 @@
 .c-text-view {
     display: flex;
-    align-items: center; // Vertically center text
-    overflow: hidden;
-    padding: $interiorMargin;
+    align-items: stretch;
 
     .c-frame & {
         @include abs();

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

@@ -21,20 +21,18 @@
  *****************************************************************************/
 
 import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
-import {getStylesWithoutNoneValue} from "@/plugins/condition/utils/styleUtils";
 
 export default {
     inject: ['openmct'],
     data() {
         return {
-            itemStyle: undefined,
-            styleClass: ''
+            itemStyle: this.itemStyle
         }
     },
     mounted() {
-        this.parentDomainObject = this.$parent.domainObject;
+        this.domainObject = this.$parent.domainObject;
         this.itemId = this.item.id;
-        this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
+        this.objectStyle = this.getObjectStyleForItem(this.domainObject.configuration.objectStyles);
         this.initObjectStyles();
     },
     destroyed() {
@@ -61,7 +59,7 @@ export default {
                 this.stopListeningObjectStyles();
             }
 
-            this.stopListeningObjectStyles = this.openmct.objects.observe(this.parentDomainObject, 'configuration.objectStyles', (newObjectStyle) => {
+            this.stopListeningObjectStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
                 //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
                 let newItemObjectStyle = this.getObjectStyleForItem(newObjectStyle);
                 if (this.objectStyle !== newItemObjectStyle) {
@@ -71,8 +69,13 @@ export default {
             });
         },
         updateStyle(style) {
-            this.itemStyle = getStylesWithoutNoneValue(style);
-            this.styleClass = this.itemStyle && this.itemStyle.isStyleInvisible;
+            this.itemStyle = style;
+            let keys = Object.keys(this.itemStyle);
+            keys.forEach((key) => {
+                if ((typeof this.itemStyle[key] === 'string') && (this.itemStyle[key].indexOf('transparent') > -1)) {
+                    delete this.itemStyle[key];
+                }
+            });
         }
     }
 };

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

@@ -17,7 +17,7 @@
         <div v-if="embed.snapshot"
              class="c-ne__embed__time"
         >
-            {{ formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss') }}
+            {{ createdOn }}
         </div>
     </div>
 </div>
@@ -27,7 +27,7 @@
 import Moment from 'moment';
 import PopupMenu from './popup-menu.vue';
 import PreviewAction from '../../../ui/preview/PreviewAction';
-import Painterro from 'painterro';
+import PainterroInstance from '../utils/painterroInstance';
 import RemoveDialog from '../utils/removeDialog';
 import SnapshotTemplate from './snapshot-template.html';
 import Vue from 'vue';
@@ -56,7 +56,10 @@ export default {
             popupMenuItems: []
         }
     },
-    watch: {
+    computed: {
+        createdOn() {
+            return this.formatTime(this.embed.createdOn, 'YYYY-MM-DD HH:mm:ss');
+        }
     },
     mounted() {
         this.addPopupMenuItems();
@@ -77,89 +80,42 @@ export default {
             this.popupMenuItems = [removeEmbed, preview];
         },
         annotateSnapshot() {
-            const self = this;
-
-            let save = false;
-            let painterroInstance = {};
+            let painterroInstance = null;
             const annotateVue = new Vue({
                 template: '<div id="snap-annotation"></div>'
             });
 
-            let annotateOverlay = self.openmct.overlays.overlay({
+            const annotateOverlay = this.openmct.overlays.overlay({
                 element: annotateVue.$mount().$el,
                 size: 'large',
                 dismissable: false,
                 buttons: [
                     {
                         label: 'Cancel',
-                        callback: function () {
-                            save = false;
-                            painterroInstance.save();
+                        emphasis: true,
+                        callback: () => {
+                            painterroInstance.dismiss();
                             annotateOverlay.dismiss();
                         }
                     },
                     {
                         label: 'Save',
-                        callback: function () {
-
-                            save = true;
+                        callback: () => {
                             painterroInstance.save();
                             annotateOverlay.dismiss();
+                            this.snapshotOverlay.dismiss();
+                            this.openSnapshot();
                         }
                     }
                 ],
-                onDestroy: function () {
+                onDestroy: () => {
                     annotateVue.$destroy(true);
                 }
             });
 
-            painterroInstance = Painterro({
-                id: 'snap-annotation',
-                activeColor: '#ff0000',
-                activeColorAlpha: 1.0,
-                activeFillColor: '#fff',
-                activeFillColorAlpha: 0.0,
-                backgroundFillColor: '#000',
-                backgroundFillColorAlpha: 0.0,
-                defaultFontSize: 16,
-                defaultLineWidth: 2,
-                defaultTool: 'ellipse',
-                hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
-                translation: {
-                    name: 'en',
-                    strings: {
-                        lineColor: 'Line',
-                        fillColor: 'Fill',
-                        lineWidth: 'Size',
-                        textColor: 'Color',
-                        fontSize: 'Size',
-                        fontStyle: 'Style'
-                    }
-                },
-                saveHandler: function (image, done) {
-                    if (save) {
-                        const url = image.asBlob();
-                        const reader = new window.FileReader();
-                        reader.readAsDataURL(url);
-                        reader.onloadend = function () {
-                            const snapshot = reader.result;
-                            const snapshotObject = {
-                                src: snapshot,
-                                type: url.type,
-                                size: url.size,
-                                modified: Date.now()
-                            };
-
-                            self.embed.snapshot = snapshotObject;
-                            self.updateEmbed(self.embed);
-                        };
-                    } else {
-                        console.log('You cancelled the annotation!!!');
-                    }
-
-                    done(true);
-                }
-            }).show(this.embed.snapshot.src);
+            painterroInstance = new PainterroInstance();
+            painterroInstance.callback = this.updateSnapshot;
+            painterroInstance.show(this.embed.snapshot.src);
         },
         changeLocation() {
             this.openmct.time.stopClock();
@@ -169,9 +125,6 @@ export default {
             });
 
             const link = this.embed.historicLink;
-            if (!link) {
-                return;
-            }
 
             window.location.href = link;
             const message = 'Time bounds changed to fixed timespan mode';
@@ -189,22 +142,21 @@ export default {
             removeDialog.show();
         },
         openSnapshot() {
-            const self = this;
             const snapshot = new Vue({
                 data: () => {
                     return {
-                        embed: self.embed
+                        createdOn: this.createdOn,
+                        embed: this.embed
                     };
                 },
                 methods: {
-                    formatTime: self.formatTime,
-                    annotateSnapshot: self.annotateSnapshot
+                    annotateSnapshot: this.annotateSnapshot.bind(this)
                 },
                 template: SnapshotTemplate
-            });
+            }).$mount();
 
-            const snapshotOverlay = this.openmct.overlays.overlay({
-                element: snapshot.$mount().$el,
+            this.snapshotOverlay = this.openmct.overlays.overlay({
+                element: snapshot.$el,
                 onDestroy: () => { snapshot.$destroy(true) },
                 size: 'large',
                 dismissable: true,
@@ -213,7 +165,7 @@ export default {
                         label: 'Done',
                         emphasis: true,
                         callback: () => {
-                            snapshotOverlay.dismiss();
+                            this.snapshotOverlay.dismiss();
                         }
                     }
                 ]
@@ -233,6 +185,10 @@ export default {
         },
         updateEmbed(embed) {
             this.$emit('updateEmbed', embed);
+        },
+        updateSnapshot(snapshotObject) {
+            this.embed.snapshot = snapshotObject;
+            this.updateEmbed(this.embed);
         }
     }
 }

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

@@ -1,13 +1,13 @@
 <template>
 <div class="c-notebook__entry c-ne has-local-controls"
-     @dragover="dragover"
-     @drop.capture="dropCapture"
-     @drop.prevent="dropOnEntry(entry.id, $event)"
+     @dragover="changeCursor"
+     @drop.capture="cancelEditMode"
+     @drop.prevent="dropOnEntry"
 >
     <div class="c-ne__time-and-content">
         <div class="c-ne__time">
-            <span>{{ formatTime(entry.createdOn, 'YYYY-MM-DD') }}</span>
-            <span>{{ formatTime(entry.createdOn, 'HH:mm:ss') }}</span>
+            <span>{{ createdOnDate }}</span>
+            <span>{{ createdOnTime }}</span>
         </div>
         <div class="c-ne__content">
             <div :id="entry.id"
@@ -15,8 +15,8 @@
                  :class="{'c-input-inline' : !readOnly }"
                  :contenteditable="!readOnly"
                  :style="!entry.text.length ? defaultEntryStyle : ''"
-                 @blur="textBlur($event, entry.id)"
-                 @focus="textFocus($event, entry.id)"
+                 @blur="updateEntryValue($event, entry.id)"
+                 @focus="updateCurrentEntryValue($event, entry.id)"
             >{{ entry.text.length ? entry.text : defaultText }}</div>
             <div class="c-snapshots c-ne__embeds">
                 <NotebookEmbed v-for="embed in entry.embeds"
@@ -114,29 +114,32 @@ export default {
             defaultText: 'add description'
         }
     },
-    watch: {
-        entry() {
+    computed : {
+        createdOnDate() {
+            return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
         },
-        readOnly(readOnly) {
-        },
-        selectedSection(selectedSection) {
-        },
-        selectedPage(selectedSection) {
+        createdOnTime() {
+            return this.formatTime(this.entry.createdOn, 'HH:mm:ss');
         }
     },
     mounted() {
         this.updateEntries = this.updateEntries.bind(this);
-    },
-    beforeDestory() {
+        this.dropOnEntry = this.dropOnEntry.bind(this);
     },
     methods: {
+        cancelEditMode(event) {
+            const isEditing = this.openmct.editor.isEditing();
+            if (isEditing) {
+                this.openmct.editor.cancel();
+            }
+        },
+        changeCursor() {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+        },
         deleteEntry() {
             const self = this;
-            if (!self.domainObject || !self.selectedSection || !self.selectedPage || !self.entry.id) {
-                return;
-            }
-
-            const entryPosById = this.entryPosById(this.entry.id);
+            const entryPosById = self.entryPosById(self.entry.id);
             if (entryPosById === -1) {
                 return;
             }
@@ -151,7 +154,7 @@ export default {
                         callback: () => {
                             const entries = getNotebookEntries(self.domainObject, self.selectedSection, self.selectedPage);
                             entries.splice(entryPosById, 1);
-                            this.updateEntries(entries);
+                            self.updateEntries(entries);
                             dialog.dismiss();
                         }
                     },
@@ -164,24 +167,10 @@ export default {
                 ]
             });
         },
-        dragover() {
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "copy";
-        },
-        dropCapture(event) {
-            const isEditing = this.openmct.editor.isEditing();
-            if (isEditing) {
-                this.openmct.editor.cancel();
-            }
-        },
-        dropOnEntry(entryId, $event) {
+        dropOnEntry($event) {
             event.stopImmediatePropagation();
 
-            if (!this.domainObject || !this.selectedSection || !this.selectedPage) {
-                return;
-            }
-
-            const snapshotId = $event.dataTransfer.getData('snapshot/id');
+            const snapshotId = $event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 this.moveSnapshot(snapshotId);
 
@@ -190,7 +179,7 @@ export default {
 
             const data = $event.dataTransfer.getData('openmct/domain-object-path');
             const objectPath = JSON.parse(data);
-            const entryPos = this.entryPosById(entryId);
+            const entryPos = this.entryPosById(this.entry.id);
             const bounds = this.openmct.time.bounds();
             const snapshotMeta = {
                 bounds,
@@ -253,7 +242,44 @@ export default {
             selection.removeAllRanges();
             selection.addRange(range);
         },
-        textBlur($event, entryId) {
+        updateCurrentEntryValue($event) {
+            if (this.readOnly) {
+                return;
+            }
+
+            const target = $event.target
+            this.currentEntryValue = target ? target.innerText : '';
+
+            if (!this.entry.text.length) {
+                this.selectTextInsideElement(target);
+            }
+        },
+        updateEmbed(newEmbed) {
+            this.entry.embeds.some(e => {
+                const found = (e.id === newEmbed.id);
+                if (found) {
+                    e = newEmbed;
+                }
+
+                return found;
+            });
+
+            this.updateEntry(this.entry);
+        },
+        updateEntry(newEntry) {
+            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
+            entries.some(entry => {
+                const found = (entry.id === newEntry.id);
+                if (found) {
+                    entry = newEntry;
+                }
+
+                return found;
+            });
+
+            this.updateEntries(entries);
+        },
+        updateEntryValue($event, entryId) {
             if (!this.domainObject || !this.selectedSection || !this.selectedPage) {
                 return;
             }
@@ -272,42 +298,6 @@ export default {
                 this.updateEntries(entries);
             }
         },
-        textFocus($event) {
-            if (this.readOnly || !this.domainObject || !this.selectedSection || !this.selectedPage) {
-                return;
-            }
-
-            const target = $event.target
-            this.currentEntryValue = target ? target.innerText : '';
-
-            if (!this.entry.text.length) {
-                this.selectTextInsideElement(target);
-            }
-        },
-        updateEmbed(newEmbed) {
-            let embed = this.entry.embeds.find(e => e.id === newEmbed.id);
-
-            if (!embed) {
-                return;
-            }
-
-            embed = newEmbed;
-            this.updateEntry(this.entry);
-        },
-        updateEntry(newEntry) {
-            if (!this.domainObject || !this.selectedSection || !this.selectedPage) {
-                return;
-            }
-
-            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
-            entries.forEach(entry => {
-                if (entry.id === newEntry.id) {
-                    entry = newEntry;
-                }
-            });
-
-            this.updateEntries(entries);
-        },
         updateEntries(entries) {
             this.$emit('updateEntries', entries);
         }

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

@@ -1,8 +1,8 @@
 <template>
-<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+<div class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left">
     <button
         class="c-button--menu icon-notebook"
-        title="Take a Notebook Snapshot"
+        title="Switch view type"
         @click="setNotebookTypes"
         @click.stop="toggleMenu"
     >
@@ -64,9 +64,7 @@ export default {
             const defaultNotebook = getDefaultNotebook();
 
             if (defaultNotebook) {
-                const domainObject = await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier)
-                    .then(d => d);
-
+                const domainObject = await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier);
                 if (!domainObject.location) {
                     clearDefaultNotebook();
                 } else {

src/plugins/notebook/components/notebook-snapshot-container.vue

@@ -31,7 +31,7 @@
             <NotebookEmbed ref="notebookEmbed"
                            :key="snapshot.id"
                            :embed="snapshot"
-                           :remove-action-string="'Delete Snapshot'"
+                           :remove-action-string="'Delete This Snapshot'"
                            @updateEmbed="updateSnapshot"
                            @removeEmbed="removeSnapshot"
             />
@@ -69,7 +69,7 @@ export default {
     data() {
         return {
             popupMenuItems: [],
-            removeActionString: 'Delete all snapshots',
+            removeActionString: 'Delete All Snapshots',
             snapshots: []
         }
     },
@@ -78,8 +78,6 @@ export default {
         this.snapshotContainer.on(EVENT_SNAPSHOTS_UPDATED, this.snapshotsUpdated);
         this.snapshots = this.snapshotContainer.getSnapshots();
     },
-    beforeDestory() {
-    },
     methods: {
         addPopupMenuItems() {
             const removeSnapshot = {
@@ -119,7 +117,7 @@ export default {
         },
         startEmbedDrag(snapshot, event) {
             event.dataTransfer.setData('text/plain', snapshot.id);
-            event.dataTransfer.setData('snapshot/id', snapshot.id);
+            event.dataTransfer.setData('openmct/snapshot/id', snapshot.id);
         },
         updateSnapshot(snapshot) {
             this.snapshotContainer.updateSnapshot(snapshot);

src/plugins/notebook/components/notebook.vue

@@ -9,8 +9,10 @@
     </div>
     <SearchResults v-if="search.length"
                    ref="searchResults"
-                   :results="getSearchResults()"
+                   :domain-object="internalDomainObject"
+                   :results="searchedEntries"
                    @changeSectionPage="changeSelectedSection"
+                   @updateEntries="updateEntries"
     />
 
     <div v-if="!search.length"
@@ -49,19 +51,13 @@
                             class="c-notebook__controls__time"
                     >
                         <option value="0"
-                                :selected="showTime === 0"
+                                selected="selected"
                         >
                             Show all
                         </option>
-                        <option value="1"
-                                :selected="showTime === 1"
-                        >Last hour</option>
-                        <option value="8"
-                                :selected="showTime === 8"
-                        >Last 8 hours</option>
-                        <option value="24"
-                                :selected="showTime === 24"
-                        >Last 24 hours</option>
+                        <option value="1">Last hour</option>
+                        <option value="8">Last 8 hours</option>
+                        <option value="24">Last 24 hours</option>
                     </select>
                     <select v-model="defaultSort"
                             class="c-notebook__controls__time"
@@ -138,21 +134,16 @@ export default {
     },
     computed: {
         filteredAndSortedEntries() {
-            const filterTime = Date.now();
             const pageEntries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage) || [];
 
-            const hours = parseInt(this.showTime, 10);
-            const filteredPageEntriesByTime = hours
-                ? pageEntries.filter(entry => (filterTime - entry.createdOn) <= hours * 60 * 60 * 1000)
-                : pageEntries;
-
-            return this.defaultSort === 'oldest'
-                ? filteredPageEntriesByTime
-                : [...filteredPageEntriesByTime].reverse();
+            return pageEntries.sort(this.sortEntries);
         },
         pages() {
             return this.getPages() || [];
         },
+        searchedEntries() {
+            return this.getSearchResults();
+        },
         sections() {
             return this.internalDomainObject.configuration.sections || [];
         },
@@ -172,8 +163,6 @@ export default {
             return this.sections.find(section => section.isSelected);
         }
     },
-    watch: {
-    },
     beforeMount() {
         this.throttledSearchItem = throttle(this.searchItem, 500);
     },
@@ -258,7 +247,7 @@ export default {
             event.preventDefault();
             event.stopImmediatePropagation();
 
-            const snapshotId = event.dataTransfer.getData('snapshot/id');
+            const snapshotId = event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
                 this.newEntry(snapshot);
@@ -434,6 +423,11 @@ export default {
         searchItem(input) {
             this.search = input;
         },
+        sortEntries(right, left) {
+            return this.defaultSort === 'newest'
+                ? left.createdOn - right.createdOn
+                : right.createdOn - left.createdOn;
+        },
         toggleNav() {
             this.showNav = !this.showNav;
         },

src/plugins/notebook/components/page-collection.vue

@@ -70,12 +70,6 @@ export default {
         return {
         }
     },
-    watch: {
-    },
-    mounted() {
-    },
-    destroyed() {
-    },
     methods: {
         deletePage(id) {
             const selectedSection = this.sections.find(s => s.isSelected);

src/plugins/notebook/components/page-component.vue

@@ -55,8 +55,6 @@ export default {
         this.addPopupMenuItems();
         this.toggleContentEditable();
     },
-    destroyed() {
-    },
     methods: {
         addPopupMenuItems() {
             const removePage = {

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

@@ -1,10 +1,13 @@
 <template>
-<button
-    class="c-popup-menu-button c-disclosure-button"
-    title="popup menu"
-    @click="showMenuItems"
->
-</button>
+<div class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+    <button
+        class="l-browse-bar__context-actions c-disclosure-button"
+        title="popup menu"
+        @click="showMenuItems"
+    >
+        <span class="c-button__label"></span>
+    </button>
+</div>
 </template>
 
 <script>

src/plugins/notebook/components/search-results.vue

@@ -4,12 +4,14 @@
     <div class="c-notebook__entries">
         <NotebookEntry v-for="(result, index) in results"
                        :key="index"
+                       :domain-object="domainObject"
                        :result="result"
                        :entry="result.entry"
                        :read-only="true"
-                       :selected-page="null"
-                       :selected-section="null"
+                       :selected-page="result.page"
+                       :selected-section="result.section"
                        @changeSectionPage="changeSectionPage"
+                       @updateEntries="updateEntries"
         />
     </div>
 </div>
@@ -19,11 +21,17 @@
 import NotebookEntry from './notebook-entry.vue';
 
 export default {
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'snapshotContainer'],
     components: {
         NotebookEntry
     },
     props:{
+        domainObject: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
         results: {
             type: Array,
             default() {
@@ -31,19 +39,12 @@ export default {
             }
         }
     },
-    data() {
-        return {}
-    },
-    watch: {
-        results(newResults) {}
-    },
-    destroyed() {
-    },
-    mounted() {
-    },
     methods: {
         changeSectionPage(data) {
             this.$emit('changeSectionPage', data);
+        },
+        updateEntries(entries) {
+            this.$emit('updateEntries', entries);
         }
     }
 }

src/plugins/notebook/components/section-collection.vue

@@ -57,12 +57,6 @@ export default {
         return {
         }
     },
-    watch: {
-    },
-    mounted() {
-    },
-    destroyed() {
-    },
     methods: {
         deleteSection(id) {
             const section = this.sections.find(s => s.id === id);

src/plugins/notebook/components/section-component.vue

@@ -58,8 +58,6 @@ export default {
         this.addPopupMenuItems();
         this.toggleContentEditable();
     },
-    destroyed() {
-    },
     methods: {
         addPopupMenuItems() {
             const removeSection = {

src/plugins/notebook/components/sidebar.vue

@@ -139,8 +139,6 @@ export default {
             this.addSection();
         }
     },
-    destroyed() {
-    },
     methods: {
         addPage() {
             const pageTitle = this.pageTitle;

src/plugins/notebook/components/snapshot-template.html

@@ -13,7 +13,7 @@
 
         <div class="l-browse-bar__end">
             <div class="l-browse-bar__snapshot-datetime">
-                SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
+                SNAPSHOT {{ createdOn }}
             </div>
             <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
                 <span class="title-label">Annotate</span>

src/plugins/notebook/utils/painterroInstance.js

@@ -0,0 +1,75 @@
+import Painterro from 'painterro';
+
+const defaultConfig = {
+    id: 'snap-annotation',
+    activeColor: '#ff0000',
+    activeColorAlpha: 1.0,
+    activeFillColor: '#fff',
+    activeFillColorAlpha: 0.0,
+    backgroundFillColor: '#000',
+    backgroundFillColorAlpha: 0.0,
+    defaultFontSize: 16,
+    defaultLineWidth: 2,
+    defaultTool: 'ellipse',
+    hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
+    translation: {
+        name: 'en',
+        strings: {
+            lineColor: 'Line',
+            fillColor: 'Fill',
+            lineWidth: 'Size',
+            textColor: 'Color',
+            fontSize: 'Size',
+            fontStyle: 'Style'
+        }
+    }
+};
+
+export default class PainterroInstance {
+    constructor() {
+        this.callback = null;
+        this.config = Object.assign({}, defaultConfig);
+        this.config.id = this.config.id;
+        this.config.saveHandler = this.saveHandler.bind(this);
+        this.isSave = false;
+
+        this.painterro = Painterro(this.config);
+        this.painterroInstance = null;
+    }
+
+    dismiss() {
+        this.isSave = false;
+        this.painterroInstance.save();
+    }
+
+    save() {
+        this.isSave = true;
+        this.painterroInstance.save();
+    }
+
+    saveHandler(image, done) {
+        if (this.isSave) {
+            const self = this;
+            const url = image.asBlob();
+            const reader = new window.FileReader();
+            reader.readAsDataURL(url);
+            reader.onloadend = () => {
+                const snapshot = reader.result;
+                const snapshotObject = {
+                    src: snapshot,
+                    type: url.type,
+                    size: url.size,
+                    modified: Date.now()
+                };
+
+                self.callback(snapshotObject);
+            };
+        }
+
+        done(true);
+    }
+
+    show(src) {
+        this.painterroInstance = this.painterro.show(src);
+    }
+}

src/plugins/themes/espresso-theme.scss

@@ -13,6 +13,7 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
+@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";

src/plugins/themes/maelstrom-theme.scss

@@ -13,6 +13,7 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
+@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";

src/plugins/themes/snow-theme.scss

@@ -13,6 +13,7 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
+@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";

src/plugins/timeConductor/Conductor.vue

@@ -37,12 +37,6 @@
             ></button>
             <ConductorModeIcon class="c-conductor__mode-icon" />
 
-            <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" />
-            </div>
-
             <div
                 v-if="isFixed"
                 class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
@@ -132,6 +126,11 @@
                 @panAxis="setViewFromBounds"
             />
         </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" />
+        </div>
         <input
             type="submit"
             class="invisible"

src/plugins/timeConductor/conductor.scss

@@ -16,8 +16,8 @@
 
         // Default: fixed mode, desktop
         grid-template-rows: 1fr;
-        grid-template-columns: 20px auto auto 1fr auto;
-        grid-template-areas: "tc-mode-icon tc-controls tc-start tc-ticks tc-end";
+        grid-template-columns: 20px auto 1fr auto;
+        grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
     }
 
     &__mode-icon {
@@ -59,8 +59,8 @@
 
     &.is-realtime-mode {
         .c-conductor__time-bounds {
-            grid-template-columns: 20px auto auto 1fr auto auto;
-            grid-template-areas: "tc-mode-icon tc-controls tc-start tc-ticks tc-updated tc-end";
+            grid-template-columns: 20px auto 1fr auto auto;
+            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
         }
 
         .c-conductor__end-fixed {
@@ -75,6 +75,10 @@
             grid-template-columns: 20px auto auto;
         }
 
+        .c-conductor__controls {
+            padding-left: 25px; // Line up visually with other controls
+        }
+
         &__mode-icon {
             grid-row: 1;
         }
@@ -101,7 +105,6 @@
                 grid-template-areas:
                     "tc-mode-icon tc-start tc-start"
                     "tc-mode-icon tc-end tc-end"
-                    "tc-mode-icon tc-controls tc-controls";
                 }
             }
 
@@ -109,8 +112,7 @@
             .c-conductor__time-bounds {
                 grid-template-areas:
                     "tc-mode-icon tc-start tc-updated"
-                    "tc-mode-icon tc-end tc-end"
-                    "tc-mode-icon tc-controls tc-controls";
+                    "tc-mode-icon tc-end tc-end";
             }
 
             .c-conductor__end-fixed {

src/styles/_constants-espresso.scss

@@ -77,8 +77,7 @@ $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brigh
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
-$colorInteriorBorder: rgba($colorBodyFg, 0.3);
-$colorInteriorEdge: rgba(black, 0.2);
+$colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3); // Tree, location items
@@ -87,7 +86,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Layout
 $shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 10px;
+$shellPanePad: $interiorMargin, 7px;
 $drawerBg: lighten($colorBodyBg, 5%);
 $drawerFg: lighten($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
@@ -270,7 +269,7 @@ $formInputH: 22px;
 $formRowCtrlsH: 14px;
 
 // Inspector
-$colorInspectorBg: pushBack($colorBodyBg, 3%);
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 20%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
@@ -383,7 +382,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: rgba($colorBodyFg, 0.2);
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;

src/styles/_constants-maelstrom.scss

@@ -82,7 +82,6 @@ $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) br
 $colorKeySelectedBg: $colorKey;
 $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
-$colorInteriorEdge: rgba(black, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3); // Tree, location items
@@ -387,7 +386,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: rgba($colorBodyFg, 0.2);
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;

src/styles/_constants-snow.scss

@@ -78,7 +78,6 @@ $colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) br
 $colorKeySelectedBg: $colorKey;
 $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
-$colorInteriorEdge: rgba($colorBodyFg, 0.1);
 $colorA: #999;
 $colorAHov: $colorKey;
 $filterHov: brightness(1.3); // Tree, location items
@@ -383,7 +382,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: rgba($colorBodyFg, 0.2);
+$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey;
 $colorSplitterActive: $colorKey;

src/styles/_controls.scss

@@ -122,8 +122,13 @@ button {
         margin-left: $interiorMargin;
     }
 
+    $c1: nth($mixedSettingBg, 1);
+    $c2: nth($mixedSettingBg, 2);
+    $mixedBgD: $mixedSettingBgSize $mixedSettingBgSize;
+
     &--mixed {
-        @include mixedBg();
+        // E.g. click-icons in toolbar that apply to multiple selected items with different settings
+        @include bgStripes2Color($c1, $c2, $bgSize: $mixedBgD);
     }
 
     &--swatched {
@@ -146,6 +151,13 @@ button {
             flex: 1 1 auto;
             font-size: 1.1em;
         }
+
+        &--mixed {
+            // Styling for swatched buttons when settings are mixed
+            > [class*='swatch'] {
+                @include bgStripes2Color($c1, $c2, $bgSize: $mixedBgD);
+            }
+        }
     }
 }
 
@@ -232,10 +244,18 @@ button {
 
 /******************************************************** SECTION */
 section {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     overflow: hidden;
     + section {
         margin-top: $interiorMargin;
+
+        &.is-expanded {
+            margin-bottom: $interiorMargin * 3;
+        }
+    }
+
+    &.is-expanded {
+        flex: 0 1 auto;
     }
 
     .c-section__header {
@@ -809,10 +829,6 @@ select {
     box-shadow: rgba($colorBodyFg, 0.4) 0 0 3px;
     flex: 0 0 auto;
     padding: $interiorMargin $interiorMarginLg;
-
-    &--mixed {
-        @include mixedBg();
-    }
 }
 
 /******************************************************** SLIDERS */

src/styles/_global.scss

@@ -88,12 +88,6 @@ body.desktop {
             background: $scrollbarThumbColorMenuHov;
         }
     }
-
-    div, span {
-        // Firefox
-        scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
-        scrollbar-width: thin;
-    }
 }
 
 /******************************************************** HTML ENTITIES */

src/styles/_layout.scss

@@ -0,0 +1,87 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/************************** BROWSE BAR */
+.l-browse-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    [class*="__"] {
+        // Removes extraneous horizontal white space
+        display: inline-flex;
+    }
+
+    &__start {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        margin-right: $interiorMargin;
+        min-width: 0; // Forces interior to compress when pushed on
+    }
+
+    &__end {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+
+        [class*="__"] + [class*="__"] {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &__nav-to-parent-button,
+    &__disclosure-button {
+        flex: 0 0 auto;
+    }
+
+    &__nav-to-parent-button {
+        // This is an icon-button
+        $p: $interiorMargin;
+        margin-right: $interiorMargin;
+        padding-left: $p;
+        padding-right: $p;
+
+        .is-editing & {
+            display: none;
+        }
+    }
+
+    &__object-name--w {
+        flex: 0 1 auto;
+        @include headerFont(1.4em);
+        min-width: 0;
+
+        &:before {
+            // Icon
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &__object-name {
+        flex: 0 1 auto;
+    }
+
+    &__object-details {
+        opacity: 0.5;
+    }
+}

src/styles/_legacy.scss

@@ -72,7 +72,6 @@
     display: flex;
     align-items: center;
     font-size: 1.25em;
-    overflow: hidden;
 
     > * {
         flex: 0 0 auto;
@@ -83,12 +82,6 @@
     &__value {
         color: $colorBodyFgEm;
     }
-
-    .c-frame & {
-        // When in a Display or Flexible Layout
-        @include abs();
-        padding: $interiorMargin;
-    }
 }
 
 .c-clock {

src/styles/_mixins.scss

@@ -50,14 +50,6 @@
 }
 
 /************************** EFFECTS */
-@mixin mixedBg() {
-    $c1: nth($mixedSettingBg, 1);
-    $c2: nth($mixedSettingBg, 2);
-    $mixedBgD: $mixedSettingBgSize $mixedSettingBgSize;
-    @include bgStripes2Color($c1, $c2, $bgSize: $mixedBgD);
-}
-
-
 @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
     @keyframes #{$animName} {
         0%   { opacity: $opacity0; }

src/styles/notebook.scss

@@ -444,7 +444,7 @@
         font-size: 1.25em;
         font-style: italic;
         opacity: 0.7;
-        padding-bottom: $interiorMarginLg;
+        padding: $interiorMarginLg;
         text-align: center;
     }
 }

src/styles/vue-styles.scss

@@ -1,6 +1,7 @@
 @import "../api/overlays/components/dialog-component.scss";
 @import "../api/overlays/components/overlay-component.scss";
-@import "../plugins/condition/components/conditionals.scss";
+@import "../plugins/condition/components/condition.scss";
+@import "../plugins/condition/components/condition-set.scss";
 @import "../plugins/conditionWidget/components/condition-widget.scss";
 @import "../plugins/condition/components/inspector/conditional-styles.scss";
 @import "../plugins/displayLayout/components/box-view.scss";

src/ui/components/ObjectView.vue

@@ -104,7 +104,7 @@ export default {
             keys.forEach(key => {
                 let firstChild = this.$el.querySelector(':first-child');
                 if (firstChild) {
-                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
+                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
                         if (firstChild.style[key]) {
                             firstChild.style[key] = '';
                         }

src/ui/inspector/Inspector.vue

@@ -81,7 +81,7 @@ export default {
         }
     },
     mounted() {
-        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet', 'summary-widget', 'hyperlink'];
+        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet'];
         this.openmct.selection.on('change', this.updateInspectorViews);
     },
     destroyed() {

src/ui/inspector/StylesInspectorView.vue

@@ -26,8 +26,8 @@
 
 <script>
 import ConditionalStylesView from '../../plugins/condition/components/inspector/ConditionalStylesView.vue';
-import MultiSelectStylesView from '../../plugins/condition/components/inspector/MultiSelectStylesView.vue';
 import Vue from 'vue';
+import { getStyleProp } from "../../plugins/condition/utils/styleUtils";
 
 export default {
     inject: ['openmct'],
@@ -44,9 +44,35 @@ export default {
         this.openmct.selection.off('change', this.updateSelection);
     },
     methods: {
+        getStyleProperties(item) {
+            let styleProps = {};
+            Object.keys(item).forEach((key) => {
+                Object.assign(styleProps, getStyleProp(key, item[key]));
+            });
+            return styleProps;
+        },
         updateSelection(selection) {
             if (selection.length > 0 && selection[0].length > 0) {
-                let template = selection.length > 1 ? '<multi-select-styles-view></multi-select-styles-view>' : '<conditional-styles-view></conditional-styles-view>';
+                let isChildItem = false;
+                let domainObject = selection[0][0].context.item;
+                let layoutItem = {};
+                let styleProps = this.getStyleProperties({
+                    fill: 'transparent',
+                    stroke: 'transparent',
+                    color: 'transparent'
+                });
+                if (selection[0].length > 1) {
+                    isChildItem = true;
+                    //If there are more than 1 items in the selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
+                    //The second item in the selection[0] list is the container object (usually a layout)
+                    if (!domainObject) {
+                        styleProps = {};
+                        layoutItem = selection[0][0].context.layoutItem;
+                        styleProps = this.getStyleProperties(layoutItem);
+                        domainObject = selection[0][1].context.item;
+                    }
+                }
+
                 if (this.component) {
                     this.component.$destroy();
                     this.component = undefined;
@@ -57,14 +83,20 @@ export default {
                 this.component = new Vue({
                     provide: {
                         openmct: this.openmct,
-                        selection: selection
+                        domainObject: domainObject
                     },
                     el: viewContainer,
                     components: {
-                        ConditionalStylesView,
-                        MultiSelectStylesView
+                        ConditionalStylesView
                     },
-                    template: template
+                    data() {
+                        return {
+                            layoutItem,
+                            styleProps,
+                            isChildItem
+                        }
+                    },
+                    template: '<conditional-styles-view :can-hide="isChildItem" :item-id="layoutItem.id" :initial-styles="styleProps"></conditional-styles-view>'
                 });
             }
         }

src/ui/inspector/inspector.scss

@@ -84,7 +84,7 @@
     }
 
     .l-multipane {
-        .c-pane {
+        .l-pane {
             min-height: 50px;
         }
     }

src/ui/layout/BrowseBar.vue

@@ -28,7 +28,6 @@
 
     <div class="l-browse-bar__end">
         <view-switcher
-            v-if="!isEditing"
             :current-view="currentView"
             :views="views"
             @setView="setView"
@@ -41,12 +40,10 @@
         <div class="l-browse-bar__actions">
             <button
                 v-if="isViewEditable & !isEditing"
-                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil labeled"
+                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
                 title="Edit"
                 @click="edit()"
-            >
-                <span class="c-button__label">Edit</span>
-            </button>
+            ></button>
 
             <div
                 v-if="isEditing"

src/ui/layout/Layout.vue

@@ -49,50 +49,38 @@
         >
             <mct-tree class="l-shell__tree" />
         </pane>
-        <pane class="l-shell__pane-main c-pane--holds-multipane">
+        <pane class="l-shell__pane-main">
             <browse-bar
                 ref="browseBar"
                 class="l-shell__main-view-browse-bar"
             />
-
-            <multipane class="l-shell__main-view-and-inspector"
-                       type="horizontal"
-            >
-                <pane class="l-shell__pane-main-view">
-                    <toolbar
-                            v-if="toolbar"
-                            class="l-shell__toolbar"
-                    />
-                    <object-view
-                            ref="browseObject"
-                            class="l-shell__main-container"
-                            :show-edit-view="true"
-                            data-selectable
-                    />
-                </pane>
-                <pane
-                        class="l-shell__pane-inspector c-pane--holds-multipane"
-                        handle="before"
-                        label="Inspect"
-                        collapsable
-                >
-                    <Inspector
-                            ref="inspector"
-                            :is-editing="isEditing"
-                    />
-                </pane>
-            </multipane>
-
-
-
-
+            <toolbar
+                v-if="toolbar"
+                class="l-shell__toolbar"
+            />
+            <object-view
+                ref="browseObject"
+                class="l-shell__main-container"
+                :show-edit-view="true"
+                data-selectable
+            />
+            <component
+                :is="conductorComponent"
+                class="l-shell__time-conductor"
+            />
+        </pane>
+        <pane
+            class="l-shell__pane-inspector l-pane--holds-multipane"
+            handle="before"
+            label="Inspect"
+            collapsable
+        >
+            <Inspector
+                ref="inspector"
+                :is-editing="isEditing"
+            />
         </pane>
     </multipane>
-
-    <component
-            :is="conductorComponent"
-            class="l-shell__time-conductor"
-    />
 </div>
 </template>
 

src/ui/layout/ViewSwitcher.vue

@@ -6,7 +6,7 @@
     <button
         class="c-button--menu"
         :class="currentView.cssClass"
-        title="Change the current view"
+        title="Switch view type"
         @click.stop="toggleViewMenu"
     >
         <span class="c-button__label">

src/ui/layout/layout.scss

@@ -1,24 +1,3 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
 /******************************* SHELL */
 .l-shell {
     position: absolute;
@@ -67,7 +46,7 @@
     &__pane-tree,
     &__pane-inspector,
     &__pane-main {
-        .c-pane__contents {
+        .l-pane__contents {
             display: flex;
             flex-flow: column nowrap;
             overflow-x: hidden;
@@ -76,9 +55,9 @@
 
     &__pane-tree,
     &__pane-main {
-        .c-pane__contents {
+        .l-pane__contents {
             > * {
-                //flex: 0 0 auto;
+                flex: 0 0 auto;
 
                 + * {
                     margin-top: $interiorMarginLg;
@@ -87,6 +66,10 @@
         }
     }
 
+    &__pane-main {
+        .l-pane__header { display: none; }
+    }
+
     body.mobile & {
         &__pane-main,
         &__pane-tree {
@@ -108,13 +91,13 @@
         &__pane-tree {
             width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
 
-            + .c-pane {
+            + .l-pane {
                 // Hide pane-main when this pane is expanded
                 opacity: 0;
                 pointer-events: none;
             }
 
-            &[class*="--collapsed"] + .c-pane {
+            &[class*="--collapsed"] + .l-pane {
                 // Show pane-main when tree is collapsed
                 opacity: 1;
                 pointer-events: inherit;
@@ -137,11 +120,12 @@
     }
 
     /******************************* HEAD */
+    &__main-view-browse-bar {
+        flex: 0 0 auto;
+    }
+
     body.mobile & .l-shell__main-view-browse-bar {
         margin-left: $mobileMenuIconD; // Make room for the hamburger!
-        .c-button[class*='__actions__edit'] {
-            display: none; // Hide the main view edit button when in mobile context
-        }
     }
 
     &__head {
@@ -211,10 +195,6 @@
     }
 
     /******************************* MAIN AREA */
-    &__main-view-browse-bar {
-        flex: 0 0 auto;
-    }
-
     &__main-container {
         // Wrapper for main views
         flex: 1 1 auto !important;
@@ -228,34 +208,26 @@
     }
 
     &__time-conductor {
-        border-top: 1px solid $colorInteriorEdge;
-        padding: $interiorMargin;
+        border-top: 1px solid $colorInteriorBorder;
+        padding-top: $interiorMargin;
     }
 
-    //&__main {
-        //> .c-pane {
-        //    padding: nth($shellPanePad, 1) 0;
-        //}
-    //}
+    &__main {
+        > .l-pane {
+            padding: nth($shellPanePad, 1) 0;
+        }
+    }
 
     body.desktop & {
         &__main {
             // Top and bottom padding in container that holds tree, __pane-main and Inspector
-            //padding: $interiorMargin 0;
+            padding: nth($shellPanePad, 1) 0;
             min-height: 0;
 
-            //> .c-pane {
-            //    padding-top: 0;
-            //    padding-bottom: 0;
-            //}
-        }
-
-        &__pane-main-view {
-            padding-bottom: $interiorMarginLg;
-        }
-
-        &__main-view-browse-bar {
-            padding: $interiorMarginLg $interiorMarginLg 0 0;
+            > .l-pane {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
         }
 
         &__pane-tree,
@@ -265,26 +237,12 @@
 
         &__pane-tree {
             width: 300px;
-            padding: $interiorMargin $interiorMarginLg;
-
-            > .c-pane__handle {
-                top: $interiorMargin;
-                bottom: $interiorMargin;
-            }
+            padding-left: nth($shellPanePad, 2);
         }
 
         &__pane-inspector {
-            $br: $basicCr;
-            $m: $interiorMargin;
-            background: $colorInspectorBg;
-            border-top-left-radius: $br;
             width: 200px;
-            padding: $m $m $m $m * 2 !important;
-
-            > .c-pane__handle {
-                background: none;
-                left: 2px;
-            }
+            padding-right: nth($shellPanePad, 2);
         }
     }
 
@@ -299,8 +257,10 @@
 
 .is-editing {
     .l-shell__main-container {
+        $m: 3px;
         box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
-        margin: 3px;
+        margin-left: $m;
+        margin-right: $m;
 
         &[s-selected] {
             // Provide a clearer selection context articulation for the main edit area
@@ -309,79 +269,6 @@
     }
 }
 
-/************************** BROWSE BAR */
-.l-browse-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    [class*="__"] {
-        // Removes extraneous horizontal white space
-        display: inline-flex;
-    }
-
-    &__start,
-    &__end,
-    &__actions {
-        display: flex;
-        align-items: center;
-    }
-
-    &__actions,
-    &__end {
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-    }
-
-    &__start {
-        flex: 1 1 auto;
-        margin-right: $interiorMargin;
-        min-width: 0; // Forces interior to compress when pushed on
-    }
-
-    &__end {
-        flex: 0 0 auto;
-    }
-
-    &__nav-to-parent-button,
-    &__disclosure-button {
-        flex: 0 0 auto;
-    }
-
-    &__nav-to-parent-button {
-        // This is an icon-button
-        $p: $interiorMargin;
-        margin-right: $interiorMargin;
-        padding-left: $p;
-        padding-right: $p;
-
-        .is-editing & {
-            display: none;
-        }
-    }
-
-    &__object-name--w,
-    &__object-name {
-        flex: 0 1 auto;
-    }
-
-    &__object-name--w {
-        @include headerFont(1.4em);
-        min-width: 0;
-
-        &:before {
-            // Icon
-            margin-right: $interiorMargin;
-        }
-    }
-
-    &__object-details {
-        opacity: 0.5;
-    }
-}
-
-/************************** DRAWER */
 .c-drawer {
     /* New sliding overlay or push element to contain things
     * Designed for mobile and compact desktop scenarios
@@ -445,3 +332,4 @@
         }
     }
 }
+

src/ui/layout/pane.scss

@@ -5,24 +5,24 @@
     overflow: hidden;
 
     &--horizontal,
-    > .c-pane {
+    > .l-pane {
         flex-flow: row nowrap;
     }
 
     &--vertical,
-    > .c-pane  {
+    > .l-pane  {
         flex-flow: column nowrap;
     }
 
     &--vertical {
         height: 100%;
-        > .c-pane .c-pane__contents {
+        > .l-pane .l-pane__contents {
             padding-right: $interiorMarginSm; // Fend off scrollbar
         }
     }
 }
 
-.c-pane {
+.l-pane {
     backface-visibility: hidden;
     display: flex;
     min-width: 0px;
@@ -52,7 +52,7 @@
         flex-basis: 0px !important;
         transition: all 350ms ease;
 
-        .c-pane__contents {
+        .l-pane__contents {
             transition: opacity 150ms ease;
             opacity: 0;
             pointer-events: none;
@@ -68,7 +68,7 @@
     &[class*="--horizontal"] {
         padding-left: $interiorMargin;
         padding-right: $interiorMargin;
-        &.c-pane--collapsed {
+        &.l-pane--collapsed {
             padding-left: 0 !important;
             padding-right: 0 !important;
         }
@@ -77,7 +77,7 @@
     &[class*="--vertical"] {
         padding-top: $interiorMargin;
         padding-bottom: $interiorMargin;
-        &.c-pane--collapsed {
+        &.l-pane--collapsed {
             padding-top: 0 !important;
             padding-bottom: 0 !important;
         }
@@ -90,7 +90,7 @@
         pointer-events: inherit;
         transition: opacity 250ms ease 250ms;
 
-        .c-pane__contents {
+        .l-pane__contents {
             // Don't pad all nested __contents
             padding: 0;
         }
@@ -138,11 +138,11 @@
             // User is dragging the handle and resizing a pane
             @include userSelectNone();
 
-            + .c-pane {
+            + .l-pane {
                 @include userSelectNone();
             }
 
-            .c-pane {
+            .l-pane {
                 &__handle {
                     background: $colorSplitterHover;
                 }
@@ -156,17 +156,17 @@
             min-width: $d;
             min-height: $d;
 
-            > .c-pane__handle {
+            > .l-pane__handle {
                 display: none;
             }
 
-            .c-pane__header {
+            .l-pane__header {
                 &:hover {
                     color: $splitterCollapsedBtnColorFgHov;
-                    .c-pane__label {
+                    .l-pane__label {
                         color: inherit;
                     }
-                    .c-pane__collapse-button {
+                    .l-pane__collapse-button {
                         background: $splitterCollapsedBtnColorBgHov;
                         color: inherit;
                         transition: $transIn;
@@ -174,17 +174,17 @@
                 }
             }
 
-            .c-pane__collapse-button {
+            .l-pane__collapse-button {
                 background: $splitterCollapsedBtnColorBg;
                 color: $splitterCollapsedBtnColorFg;
             }
         }
 
         &[class*="--horizontal"] {
-            > .c-pane__handle {
-                cursor: ew-resize;
-                top: $interiorMargin;
-                bottom: $interiorMargin;
+            > .l-pane__handle {
+                cursor: col-resize;
+                top: 0;
+                bottom: 0;
                 width: $splitterHandleD;
 
                 &:before {
@@ -196,7 +196,7 @@
                 }
             }
 
-            .c-pane__collapse-button {
+            .l-pane__collapse-button {
                 &:before {
                     content: $glyph-icon-arrow-right-equilateral;
                 }
@@ -217,7 +217,7 @@
                     z-index: 1;
                 }
 
-                .c-pane__collapse-button {
+                .l-pane__collapse-button {
                     border-top-left-radius: 0;
                     border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
                     position: absolute;
@@ -238,13 +238,13 @@
                 margin-left: nth($shellPanePad, 2);
                 padding-left: nth($shellPanePad, 2);
 
-                > .c-pane__handle {
-                    //left: 0;
+                > .l-pane__handle {
+                    left: 0;
                     transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                 }
 
                 &[class*="--collapsed"] {
-                    .c-pane__collapse-button {
+                    .l-pane__collapse-button {
                         transform: scaleX(-1);
                     }
                 }
@@ -256,13 +256,13 @@
                 margin-right: nth($shellPanePad, 2);
                 padding-right: nth($shellPanePad, 2);
 
-                > .c-pane__handle {
+                > .l-pane__handle {
                     right: 0;
                     transform: translateX(floor($splitterHandleD / 2));
                 }
 
                 &:not([class*="--collapsed"]) {
-                    .c-pane__collapse-button {
+                    .l-pane__collapse-button {
                         transform: scaleX(-1);
                     }
                 }
@@ -270,9 +270,9 @@
         }
 
         &[class*="--vertical"] {
-            // c-pane--vertical
+            // l-pane--vertical
 
-            > .c-pane__handle {
+            > .l-pane__handle {
                 cursor: row-resize;
                 left: 0;
                 right: 0;
@@ -293,17 +293,17 @@
                 $m: $interiorMarginLg;
                 margin-top: $m;
                 padding-top: $m;
-                > .c-pane__handle {
+                > .l-pane__handle {
                     top: 0;
                     transform: translateY(floor($splitterHandleD / -1));
                 }
 
-                .c-pane__collapse-button:before {
+                .l-pane__collapse-button:before {
                     content: $glyph-icon-arrow-down;
                 }
 
-                &.c-pane--collapsed {
-                    > .c-pane__collapse-button {
+                &.l-pane--collapsed {
+                    > .l-pane__collapse-button {
                         transform: scaleY(-1);
                     }
                 }
@@ -312,12 +312,12 @@
             /************************** Vertical Splitter After */
             // Pane collapses upward. Not sure we'll ever use this...
             &[class*="-after"] {
-                > .c-pane__handle {
+                > .l-pane__handle {
                     bottom: 0;
                     transform: translateY(floor($splitterHandleD / 1));
                 }
 
-                &:not(.c-pane--collapsed) > .c-pane__collapse-button {
+                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
                     &:after {
                         transform: scaleY(-1);
                     }
@@ -325,4 +325,4 @@
             }
         }
     } // Ends .body.desktop
-} // Ends .c-pane
+} // Ends .l-pane

src/ui/layout/pane.vue

@@ -1,30 +1,32 @@
 <template>
 <div
-    class="c-pane"
+    class="l-pane"
     :class="{
-        'c-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
-        'c-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
-        'c-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
-        'c-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
-        'c-pane--collapsed': collapsed,
-        'c-pane--reacts': !handle,
-        'c-pane--resizing': resizing === true
+        'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
+        'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
+        'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
+        'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
+        'l-pane--collapsed': collapsed,
+        'l-pane--reacts': !handle,
+        'l-pane--resizing': resizing === true
     }"
 >
     <div
         v-if="handle"
-        class="c-pane__handle"
+        class="l-pane__handle"
         @mousedown="start"
     ></div>
-    <div v-if="label" class="c-pane__header">
-        <span class="c-pane__label">{{ label }}</span>
+    <div class="l-pane__header">
+        <span v-if="label"
+              class="l-pane__label"
+        >{{ label }}</span>
         <button
             v-if="collapsable"
-            class="c-pane__collapse-button c-button"
+            class="l-pane__collapse-button c-button"
             @click="toggleCollapse"
         ></button>
     </div>
-    <div class="c-pane__contents">
+    <div class="l-pane__contents">
         <slot></slot>
     </div>
 </div>