Save window location

* Adds conditional styles to Preview window

index.html

@@ -82,6 +82,7 @@
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
         openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        openmct.install(openmct.plugins.WindowLayout());
         openmct.start();
     </script>
 </html>

package.json

@@ -2,9 +2,7 @@
   "name": "openmct",
   "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
-  "dependencies": {
-    "plotly.js-dist": "^1.54.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "angular": "1.7.9",
     "angular-route": "1.4.14",
@@ -55,9 +53,9 @@
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.25.3",
+    "moment": "2.25.3",
     "moment-duration-format": "^2.2.2",
-    "moment-timezone": "^0.5.21",
+    "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",

src/MCT.js

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

src/plugins/condition/Condition.js

@@ -69,6 +69,7 @@ export default class ConditionClass extends EventEmitter {
             console.log('no data received');
             return;
         }
+
         this.criteria.forEach(criterion => {
             if (this.isAnyOrAllTelemetry(criterion)) {
                 criterion.getResult(datum, this.conditionManager.telemetryObjects);

src/plugins/condition/ConditionManager.js

@@ -57,7 +57,6 @@ export default class ConditionManager extends EventEmitter {
             endpoint,
             this.telemetryReceived.bind(this, endpoint)
         );
-        // TODO check if this is needed
         this.updateConditionTelemetry();
     }
 

src/plugins/condition/StyleRuleManager.js

@@ -157,7 +157,6 @@ export default class StyleRuleManager extends EventEmitter {
         delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
         this.isEditing = undefined;
-        this.callback = undefined;
     }
 
 }

src/plugins/condition/components/Condition.vue

@@ -30,6 +30,7 @@
 >
     <div class="c-condition-h__drop-target"></div>
     <div v-if="isEditing"
+         :class="{'is-current': condition.id === currentConditionId}"
          class="c-condition c-condition--edit"
     >
         <!-- Edit view -->
@@ -167,6 +168,7 @@
     </div>
     <div v-else
          class="c-condition c-condition--browse"
+         :class="{'is-current': condition.id === currentConditionId}"
     >
         <!-- Browse view -->
         <div class="c-condition__header">
@@ -199,6 +201,10 @@ export default {
         ConditionDescription
     },
     props: {
+        currentConditionId: {
+            type: String,
+            default: ''
+        },
         condition: {
             type: Object,
             required: true

src/plugins/condition/components/ConditionCollection.vue

@@ -58,6 +58,7 @@
             <Condition v-for="(condition, index) in conditionCollection"
                        :key="condition.id"
                        :condition="condition"
+                       :current-condition-id="currentConditionId"
                        :condition-index="index"
                        :telemetry="telemetryObjs"
                        :is-editing="isEditing"
@@ -107,7 +108,8 @@ export default {
             moveIndex: undefined,
             isDragging: false,
             defaultOutput: undefined,
-            dragCounter: 0
+            dragCounter: 0,
+            currentConditionId: ''
         };
     },
     watch: {
@@ -145,6 +147,7 @@ export default {
     },
     methods: {
         handleConditionSetResultUpdated(data) {
+            this.currentConditionId = data.conditionId;
             this.$emit('conditionSetResultUpdated', data)
         },
         observeForChanges() {

src/plugins/condition/components/conditionals.scss

@@ -190,6 +190,7 @@
 }
 
 .c-condition {
+    border: 1px solid transparent;
     flex-direction: column;
     min-width: 400px;
 
@@ -234,6 +235,12 @@
     &__summary {
         flex: 1 1 auto;
     }
+
+    &.is-current {
+        $c: $colorBodyFg;
+        border-color: rgba($c, 0.2);
+        background: rgba($c, 0.2);
+    }
 }
 
 /***************************** CONDITION DEFINITION, EDITING */

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

@@ -65,7 +65,7 @@
 
         &.is-current {
             $c: $colorBodyFg;
-            border-color: rgba($c, 0.5);
+            border-color: rgba($c, 0.2);
             background: rgba($c, 0.2);
         }
 

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

@@ -29,7 +29,7 @@
 
 <script>
 import Snapshot from '../snapshot';
-import { clearDefaultNotebook, getDefaultNotebook } from '../utils/notebook-storage';
+import { getDefaultNotebook } from '../utils/notebook-storage';
 import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
 
 export default {
@@ -72,28 +72,22 @@ export default {
     methods: {
         async setNotebookTypes() {
             const notebookTypes = [];
-            let defaultPath = '';
             const defaultNotebook = getDefaultNotebook();
 
             if (defaultNotebook) {
-                const domainObject = await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier)
-                    .then(d => d);
+                const domainObject = defaultNotebook.domainObject;
 
-                if (!domainObject.location) {
-                    clearDefaultNotebook();
-                } else {
-                    defaultPath = `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
+                if (domainObject.location) {
+                    const defaultPath = `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
+
+                    notebookTypes.push({
+                        cssClass: 'icon-notebook',
+                        name: `Save to Notebook ${defaultPath}`,
+                        type: NOTEBOOK_DEFAULT
+                    });
                 }
             }
 
-            if (defaultPath.length !== 0) {
-                notebookTypes.push({
-                    cssClass: 'icon-notebook',
-                    name: `Save to Notebook ${defaultPath}`,
-                    type: NOTEBOOK_DEFAULT
-                });
-            }
-
             notebookTypes.push({
                 cssClass: 'icon-notebook',
                 name: 'Save to Notebook Snapshots',

src/plugins/notebook/components/notebook.vue

@@ -239,6 +239,7 @@ export default {
             const section = this.getSelectedSection();
 
             return {
+                domainObject: this.internalDomainObject,
                 notebookMeta,
                 section,
                 page
@@ -440,7 +441,7 @@ export default {
         async updateDefaultNotebook(notebookStorage) {
             const defaultNotebookObject = await this.getDefaultNotebookObject();
             this.removeDefaultClass(defaultNotebookObject);
-            setDefaultNotebook(notebookStorage);
+            setDefaultNotebook(this.openmct, notebookStorage);
             this.addDefaultClass();
             this.defaultSectionId = notebookStorage.section.id;
             this.defaultPageId = notebookStorage.page.id;

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

@@ -1,6 +1,46 @@
 const NOTEBOOK_LOCAL_STORAGE = 'notebook-storage';
+let currentNotebookObject = null;
+let unlisten = null;
+
+function defaultNotebookObjectChanged(newDomainObject) {
+    if (newDomainObject.location !== null) {
+        currentNotebookObject = newDomainObject;
+        const notebookStorage = getDefaultNotebook();
+        notebookStorage.domainObject = newDomainObject;
+        saveDefaultNotebook(notebookStorage);
+
+        return;
+    }
+
+    if (unlisten) {
+        unlisten();
+        unlisten = null;
+    }
+
+    clearDefaultNotebook();
+}
+
+function observeDefaultNotebookObject(openmct, notebookStorage) {
+    const domainObject = notebookStorage.domainObject;
+    if (currentNotebookObject
+            && currentNotebookObject.identifier.key === domainObject.identifier.key) {
+        return;
+    }
+
+    if (unlisten) {
+        unlisten();
+        unlisten = null;
+    }
+
+    unlisten = openmct.objects.observe(notebookStorage.domainObject, '*', defaultNotebookObjectChanged);
+}
+
+function saveDefaultNotebook(notebookStorage) {
+    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+}
 
 export function clearDefaultNotebook() {
+    currentNotebookObject = null;
     window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, null);
 }
 
@@ -10,20 +50,21 @@ export function getDefaultNotebook() {
     return JSON.parse(notebookStorage);
 }
 
-export function setDefaultNotebook(notebookStorage) {
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+export function setDefaultNotebook(openmct, notebookStorage) {
+    observeDefaultNotebookObject(openmct, notebookStorage);
+    saveDefaultNotebook(notebookStorage);
 }
 
 export function setDefaultNotebookSection(section) {
     const notebookStorage = getDefaultNotebook();
 
     notebookStorage.section = section;
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+    saveDefaultNotebook(notebookStorage);
 
 }
 
 export function setDefaultNotebookPage(page) {
     const notebookStorage = getDefaultNotebook();
     notebookStorage.page = page;
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+    saveDefaultNotebook(notebookStorage);
 }

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

@@ -67,10 +67,10 @@ define([
         }
         this.$canvas = this.$element.find('canvas');
 
-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
         this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
 
         this.watchForMarquee();
     };
@@ -78,7 +78,6 @@ define([
     MCTPlotController.prototype.initialize = function () {
         this.$canvas = this.$element.find('canvas');
 
-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
         this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
@@ -210,23 +209,6 @@ define([
         this.highlightValues(point);
     };
 
-    MCTPlotController.prototype.onMouseClick = function ($event) {
-        const isClick = this.isMouseClick();
-        if (this.pan) {
-            this.endPan($event);
-        }
-        if (this.marquee) {
-            this.endMarquee($event);
-        }
-        this.$scope.$apply();
-
-        if (!this.$scope.highlights.length || !isClick) {
-            return;
-        }
-
-        this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
-    };
-
     MCTPlotController.prototype.highlightValues = function (point) {
         this.highlightPoint = point;
         this.$scope.$emit('plot:highlight:update', point);
@@ -274,11 +256,23 @@ define([
     MCTPlotController.prototype.onMouseUp = function ($event) {
         this.stopListening(this.$window, 'mouseup', this.onMouseUp, this);
         this.stopListening(this.$window, 'mousemove', this.trackMousePosition, this);
+
+        if (this.isMouseClick()) {
+            this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
+        }
+
+        if (this.allowPan) {
+            return this.endPan($event);
+        }
+
+        if (this.allowMarquee) {
+            return this.endMarquee($event);
+        }
     };
 
     MCTPlotController.prototype.isMouseClick = function () {
         if (!this.marquee) {
-            return;
+            return false;
         }
 
         const { start, end } = this.marquee;

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

@@ -227,8 +227,9 @@ define([
     };
 
     PlotController.prototype.stopLoading = function () {
-        this.$scope.pending -= 1;
-        this.$scope.$digest();
+        this.$scope.$evalAsync(() => {
+            this.$scope.pending -= 1;
+        });
     };
 
     /**

src/plugins/plotlyPlot/PlotlyTelemetryProvider.js

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

src/plugins/plotlyPlot/PlotlyViewProvider.js

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

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

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

src/plugins/plotlyPlot/components/plotly.scss

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

src/plugins/plotlyPlot/plugin.js

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

src/plugins/plugins.js

@@ -34,7 +34,6 @@ define([
     './URLIndicatorPlugin/URLIndicatorPlugin',
     './telemetryMean/plugin',
     './plot/plugin',
-    './plotlyPlot/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
     './notebook/plugin',
@@ -52,7 +51,8 @@ define([
     './conditionWidget/plugin',
     './themes/espresso',
     './themes/maelstrom',
-    './themes/snow'
+    './themes/snow',
+    './windowLayout/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -67,7 +67,6 @@ define([
     URLIndicatorPlugin,
     TelemetryMean,
     PlotPlugin,
-    PlotlyPlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
     Notebook,
@@ -85,7 +84,8 @@ define([
     ConditionWidgetPlugin,
     Espresso,
     Maelstrom,
-    Snow
+    Snow,
+    WindowLayout
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -173,8 +173,8 @@ define([
     plugins.ExampleImagery = ExampleImagery;
     plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin;
-    plugins.PlotlyPlot = PlotlyPlotPlugin.default;
     plugins.TelemetryTable = TelemetryTablePlugin;
+
     plugins.SummaryWidget = SummaryWidget;
     plugins.TelemetryMean = TelemetryMean;
     plugins.URLIndicator = URLIndicatorPlugin;
@@ -194,6 +194,7 @@ define([
     plugins.Snow = Snow.default;
     plugins.Condition = ConditionPlugin.default;
     plugins.ConditionWidget = ConditionWidgetPlugin.default;
+    plugins.WindowLayout = WindowLayout.default;
 
     return plugins;
 });

src/plugins/tabs/components/tabs.vue

@@ -27,7 +27,7 @@
                 {'is-current': isCurrent(tab)},
                 tab.type.definition.cssClass
             ]"
-            @click="showTab(tab)"
+            @click="showTab(tab, index)"
         >
             <span class="c-button__label">{{ tab.domainObject.name }}</span>
         </button>
@@ -48,6 +48,7 @@
             </div>
         </div>
         <object-view
+            v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
             class="c-tabs-view__object"
             :object="tab.domainObject"
         />
@@ -57,7 +58,6 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
-import _ from 'lodash';
 
 var unknownObjectType = {
     definition: {
@@ -73,6 +73,7 @@ export default {
     },
     data: function () {
         return {
+            internalDomainObject: this.domainObject,
             currentTab: {},
             tabsList: [],
             setCurrentTab: true,
@@ -85,9 +86,17 @@ export default {
             this.composition.on('add', this.addItem);
             this.composition.on('remove', this.removeItem);
             this.composition.on('reorder', this.onReorder);
-            this.composition.load();
+            this.composition.load().then(() => {
+                let currentTabIndex = this.domainObject.currentTabIndex;
+
+                if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
+                    this.currentTab = this.tabsList[currentTabIndex];
+                }
+            });
         }
 
+        this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
@@ -96,18 +105,25 @@ export default {
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.onReorder);
 
+        this.unsubscribe();
+
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
     },
     methods:{
-        showTab(tab) {
+        showTab(tab, index) {
+            if (index !== undefined) {
+                this.storeCurrentTabIndex(index);
+            }
+
             this.currentTab = tab;
         },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
                 tabItem = {
                     domainObject,
-                    type: type
+                    type: type,
+                    key: this.openmct.objects.makeKeyString(domainObject.identifier)
                 };
 
             this.tabsList.push(tabItem);
@@ -126,7 +142,7 @@ export default {
             this.tabsList.splice(pos, 1);
 
             if (this.isCurrent(tabToBeRemoved)) {
-                this.showTab(this.tabsList[this.tabsList.length - 1]);
+                this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
             }
         },
         onReorder(reorderPlan) {
@@ -138,6 +154,7 @@ export default {
         },
         onDrop(e) {
             this.setCurrentTab = true;
+            this.storeCurrentTabIndex(this.tabsList.length);
         },
         dragstart(e) {
             if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -155,7 +172,13 @@ export default {
             this.allowDrop = false;
         },
         isCurrent(tab) {
-            return _.isEqual(this.currentTab, tab)
+            return this.currentTab.key === tab.key;
+        },
+        updateInternalDomainObject(domainObject) {
+            this.internalDomainObject = domainObject;
+        },
+        storeCurrentTabIndex(index) {
+            this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
         }
     }
 }

src/plugins/tabs/plugin.js

@@ -36,7 +36,27 @@ define([
                 cssClass: 'icon-tabs-view',
                 initialize(domainObject) {
                     domainObject.composition = [];
-                }
+                    domainObject.keep_alive = true;
+                },
+                form: [
+                    {
+                        "key": "keep_alive",
+                        "name": "Keep Tabs Alive",
+                        "control": "select",
+                        "options": [
+                            {
+                                'name': 'True',
+                                'value': true
+                            },
+                            {
+                                'name': 'False',
+                                'value': false
+                            }
+                        ],
+                        "required": true,
+                        "cssClass": "l-input"
+                    }
+                ]
             });
         };
     };

src/plugins/windowLayout/components/WindowLayout.vue

@@ -0,0 +1,183 @@
+<template>
+<div v-if="!isOpener"
+     class="c-indicator c-indicator--clickable icon-save s-status-caution"
+>
+    <span class="label c-indicator__label">
+        <button @click="open2Windows">Open 2 Windows</button>
+        <button @click="closeAllWindows">Close Windows</button>
+        <button @click="openSavedWindows">Open Saved Windows</button>
+    </span>
+</div>
+</template>
+<script>
+export default {
+    inject: ['openmct'],
+    computed: {
+        isOpener() {
+            return window.opener;
+        }
+    },
+    mounted() {
+        this.openWindows = {};
+        this.windowFeatures = "menubar=yes,location=yes,tabs=yes, resizable=yes,scrollbars=yes, innerHeight=480,innerWidth=640,screenY=100";
+        window.addEventListener("message", this.receiveMessage, false);
+        if (window.opener) {
+            window.opener.postMessage({
+                status: 'READY',
+                name: window.name
+            },'*');
+            window.addEventListener('beforeunload', () => {
+                window.opener.postMessage({
+                    status: 'CLOSED',
+                    name: window.name
+                },'*');
+            });
+            window.addEventListener('blur', () => {
+                window.opener.postMessage({
+                    query: 'QUERY__SIZE',
+                    info: {
+                        innerHeight: window.innerHeight,
+                        innerWidth: window.innerWidth,
+                        screenLeft: window.screenLeft,
+                        screenTop: window.screenTop,
+                        screenWidth: screen.width,
+                        screenHeight: screen.height,
+                        screenAvailableWidth: screen.availWidth,
+                        screenAvailHeight: screen.availHeight,
+                        devicePixelRatio: window.devicePixelRatio,
+                        url: window.location.href
+                    },
+                    name: window.name
+                },'*');
+            });
+        }
+    },
+    methods: {
+        persistWindowInformation() {
+            window.localStorage.setItem('openmct-windowlayout-items',
+                JSON.stringify(this.getOpenWindowSpecifications()));
+        },
+        getScreenX() {
+            return !Object.keys(this.openWindows).length ? 100: (screen.width - (Object.keys(this.openWindows).length*640));
+        },
+        open2Windows() {
+            this.openWindow(`${this.windowFeatures},screenX=${this.getScreenX()}`);
+            this.openWindow(`${this.windowFeatures},screenX=${this.getScreenX()}`);
+        },
+        openWindow(windowFeatures) {
+            let newWindowName = `Open MCT Window ${Object.keys(this.openWindows).length+1}`;
+            this.openWindows[newWindowName] = { windowReference: window.open(window.location.href, newWindowName, windowFeatures)};
+        },
+        moveWindow() {
+            const key = Object.keys(this.openWindows)[0];
+            this.openWindows[key].postMessage({
+                command: 'moveTo',
+                params: [window.screenLeft + 40, window.screenTop + 40]
+            }, 'http://localhost:8080');
+        },
+        openSavedWindows() {
+            const persistedWindowObjs = window.localStorage.getItem('openmct-windowlayout-items');
+            if (persistedWindowObjs) {
+                const windowObjs = JSON.parse(persistedWindowObjs);
+                windowObjs.forEach(windowObj => {
+                    let newWindowName = windowObj.name;
+                    const features = `menubar=yes,location=yes,resizable=yes,scrollbars=yes,innerHeight=${windowObj.info.innerHeight || 480},innerWidth=${windowObj.info.innerWidth || 640},screenX=${windowObj.info.screenLeft || this.getScreenX()},screenY=${windowObj.info.screenTop || 100}`;
+                    const windowReference = window.open((windowObj.info.url || window.location.href), newWindowName, features);
+                    this.openWindows[newWindowName] = {
+                        windowReference,
+                        name: newWindowName,
+                        info: windowObj.info
+                    }
+                });
+            }
+        },
+        closeAllWindows() {
+            this.persistWindowInformation();
+            Object.keys(this.openWindows).forEach((windowName => {
+                const windowObj = this.openWindows[windowName];
+                windowObj.closedByOpener = true;
+                windowObj.windowReference.close();
+            }));
+        },
+        receiveMessage(event) {
+            const { data, origin, source} = event;
+            switch(origin) {
+            case 'http://localhost:8080':
+                if (data) {
+                    if (data.status === 'READY') {
+                        let newWindowReference = this.openWindows[data.name].windowReference;
+                        newWindowReference.postMessage({
+                            command: 'QUERY__SIZE'
+                        }, 'http://localhost:8080');
+                    } else if (data.status === 'CLOSED') {
+                        const closedByOpener = this.openWindows[data.name].closedByOpener;
+                        this.openWindows[data.name] = undefined;
+                        delete this.openWindows[data.name];
+                        if (!closedByOpener) {
+                            this.persistWindowInformation();
+                        }
+                    } else if (data.command) {
+                        switch(data.command) {
+                        case 'QUERY__SIZE':
+                            source.postMessage({
+                                query: data.command,
+                                info: {
+                                    innerHeight: window.innerHeight,
+                                    innerWidth: window.innerWidth,
+                                    screenLeft: window.screenLeft,
+                                    screenTop: window.screenTop,
+                                    screenWidth: screen.width,
+                                    screenHeight: screen.height,
+                                    screenAvailableWidth: screen.availWidth,
+                                    screenAvailHeight: screen.availHeight,
+                                    devicePixelRatio: window.devicePixelRatio,
+                                    url: window.location.href
+                                },
+                                name: window.name
+                            }, origin);
+                            break;
+                        default:
+                            window[data.command](...data.params);
+                            this.$nextTick(() => {
+                                source.postMessage({
+                                    query: data.command,
+                                    name: window.name
+                                }, origin);
+                            });
+                            break;
+                        }
+                    } else if (data.query) {
+                        if (data.info) {
+                            if (!this.openWindows[data.name]) {
+                                return;
+                            }
+                            this.openWindows[data.name].info = data.info;
+                            this.persistWindowInformation();
+                        } else {
+                            if (!this.openWindows[data.name]) {
+                                return;
+                            }
+                            let newWindowReference = this.openWindows[data.name].windowReference;
+                            newWindowReference.postMessage({
+                                command: 'QUERY__SIZE'
+                            }, 'http://localhost:8080');
+                        }
+                    }
+                }
+
+                break;
+            default:
+                break;
+            }
+        },
+        getOpenWindowSpecifications() {
+            return Object.keys(this.openWindows).map(key => {
+                return {
+                    name: key,
+                    info: this.openWindows[key].info
+                }
+            });
+        }
+    }
+}
+</script>

src/plugins/windowLayout/plugin.js

@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import Vue from 'vue';
+import WindowLayout from "./components/WindowLayout.vue";
+
+export default function plugin() {
+
+    return function install(openmct) {
+        let component = new Vue ({
+                provide: {
+                    openmct
+                },
+                components: {
+                    WindowLayout: WindowLayout
+                },
+                template: '<WindowLayout></WindowLayout>'
+            }),
+            indicator = {
+                element: component.$mount().$el
+            };
+
+        openmct.indicators.add(indicator);
+    };
+}

src/styles/vue-styles.scss

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

src/ui/preview/Preview.vue

@@ -35,6 +35,8 @@
 
 <script>
 import PreviewHeader from './preview-header.vue';
+import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
+import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
 
 export default {
     components: {
@@ -69,6 +71,14 @@ export default {
     },
     destroyed() {
         this.view.destroy();
+        if (this.stopListeningStyles) {
+            this.stopListeningStyles();
+        }
+
+        if (this.styleRuleManager) {
+            this.styleRuleManager.destroy();
+            delete this.styleRuleManager;
+        }
     },
     methods: {
         clear() {
@@ -90,6 +100,46 @@ export default {
 
             this.view = this.currentView.view(this.domainObject, this.objectPath);
             this.view.show(this.viewContainer, false);
+            this.initObjectStyles();
+        },
+        initObjectStyles() {
+            if (!this.styleRuleManager) {
+                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
+            } else {
+                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
+            }
+
+            if (this.stopListeningStyles) {
+                this.stopListeningStyles();
+            }
+
+            this.stopListeningStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
+                //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
+                this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+            });
+        },
+        updateStyle(styleObj) {
+            if (!styleObj) {
+                return;
+            }
+            let keys = Object.keys(styleObj);
+            keys.forEach(key => {
+                let firstChild = this.$refs.objectView.querySelector(':first-child');
+                if (firstChild) {
+                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
+                        if (firstChild.style[key]) {
+                            firstChild.style[key] = '';
+                        }
+                    } else {
+                        if (!styleObj.isStyleInvisible && firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
+                            firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+                        } else if (styleObj.isStyleInvisible && !firstChild.classList.contains(styleObj.isStyleInvisible)) {
+                            firstChild.classList.add(styleObj.isStyleInvisible);
+                        }
+                        firstChild.style[key] = styleObj[key];
+                    }
+                }
+            });
         }
     }
 }