Adding additional rules

* lazy load tabs

* remove listener on destroy

* fix lint error

* Store current tab position on domainObject

* remove lodash dependency and use keystring

.eslintrc.js

@@ -66,6 +66,23 @@ module.exports = {
         ],
         "dot-notation": "error",
         "indent": ["error", 4],
+        
+        /*"array-callback-return": "error",
+        "consistent-return": "error",
+        "default-case-last": "error",
+        "default-param-last": "error",
+        "grouped-accessor-pairs": "error",
+        "noalert": "error",
+        "no-constructor-return": "error" */
+        "no-case-declarations": "error",
+        "max-classes-per-file": ["error", 1],
+        "no-eq-null": "error",
+        "no-eval": "error",
+        "no-floating-decimal": "error",
+        "no-implicit-coercion": "error",
+
+
+
         "vue/html-indent": [
             "error",
             4,

package.json

@@ -53,9 +53,9 @@
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.11.1",
+    "moment": "2.25.3",
     "moment-duration-format": "^2.2.2",
-    "moment-timezone": "^0.5.21",
+    "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",

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/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"
+                    }
+                ]
             });
         };
     };