Condition Widgets trigger hundreds of persistence calls. #5137

src/MCT.js

@@ -232,6 +232,7 @@ define([
         this.actions = new api.ActionsAPI(this);
 
         this.status = new api.StatusAPI(this);
+        this.styleManager = new api.StyleManagerAPI(this);
 
         this.priority = api.PriorityAPI;
 

src/api/api.js

@@ -31,6 +31,7 @@ define([
     './objects/ObjectAPI',
     './priority/PriorityAPI',
     './status/StatusAPI',
+    './styles/StyleManagerAPI',
     './telemetry/TelemetryAPI',
     './time/TimeAPI',
     './types/TypeRegistry',
@@ -46,6 +47,7 @@ define([
     ObjectAPI,
     PriorityAPI,
     StatusAPI,
+    StyleManagerAPI,
     TelemetryAPI,
     TimeAPI,
     TypeRegistry,
@@ -62,6 +64,7 @@ define([
         ObjectAPI: ObjectAPI,
         PriorityAPI: PriorityAPI.default,
         StatusAPI: StatusAPI.default,
+        StyleManagerAPI: StyleManagerAPI.default,
         TelemetryAPI: TelemetryAPI,
         TimeAPI: TimeAPI.default,
         TypeRegistry: TypeRegistry,

src/api/styles/StyleManagerAPI.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 EventEmitter from 'EventEmitter';
+
+export default class StyleManagerAPI extends EventEmitter {
+    constructor(openmct) {
+        super();
+
+        this._openmct = openmct;
+        this._styleCache = {};
+
+        this.get = this.get.bind(this);
+        this.set = this.set.bind(this);
+        this.observe = this.observe.bind(this);
+    }
+
+    get(identifier) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        return this._styleCache[keyString];
+    }
+
+    set(identifier, value) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        this._styleCache[keyString] = value;
+        this.emit(keyString, value);
+    }
+
+    delete(identifier) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        this._styleCache[keyString] = undefined;
+        this.emit(keyString, undefined);
+        delete this._styleCache[keyString];
+    }
+
+    observe(identifier, callback) {
+        let key = this._openmct.objects.makeKeyString(identifier);
+
+        this.on(key, callback);
+
+        return () => {
+            this.off(key, callback);
+        };
+    }
+}

src/plugins/condition/StyleRuleManager.js

@@ -25,6 +25,7 @@ import EventEmitter from 'EventEmitter';
 export default class StyleRuleManager extends EventEmitter {
     constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {
         super();
+
         this.openmct = openmct;
         this.callback = callback;
         this.refreshData = this.refreshData.bind(this);
@@ -152,6 +153,7 @@ export default class StyleRuleManager extends EventEmitter {
 
     updateDomainObjectStyle() {
         if (this.callback) {
+            this.emit('updateStyles', this.currentStyle);
             this.callback(Object.assign({}, this.currentStyle));
         }
     }

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -27,7 +27,7 @@
     :href="url"
 >
     <div class="c-condition-widget__label">
-        {{ internalDomainObject.conditionalLabel || internalDomainObject.label }}
+        {{ label }}
     </div>
 </component>
 </template>
@@ -39,10 +39,16 @@ export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
         return {
-            internalDomainObject: this.domainObject
+            internalDomainObject: this.domainObject,
+            conditionalLabel: ''
         };
     },
     computed: {
+        label() {
+            return this.conditionalLabel.length
+                ? this.conditionalLabel
+                : this.internalDomainObject.label;
+        },
         urlDefined() {
             return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
         },
@@ -52,13 +58,31 @@ export default {
     },
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+
+        this.unobserve = this.openmct.styleManager.observe(this.internalDomainObject.identifier, this.observeStyleManagerChanges.bind(this));
     },
     beforeDestroy() {
         if (this.unlisten) {
             this.unlisten();
         }
+
+        if (this.unobserve) {
+            this.openmct.styleManager.delete(this.internalDomainObject.identifier);
+            this.unobserve();
+        }
     },
     methods: {
+        observeStyleManagerChanges(styleManager) {
+            if (styleManager) {
+                this.styleManager = styleManager;
+                this.styleManager.on('updateStyles', this.updateConditionLabel);
+            } else {
+                this.styleManager.off('updateStyles', this.updateConditionLabel);
+            }
+        },
+        updateConditionLabel(styleObj = {}) {
+            this.conditionalLabel = styleObj.output || '';
+        },
         updateInternalDomainObject(domainObject) {
             this.internalDomainObject = domainObject;
         }

src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js

@@ -132,12 +132,6 @@ export default {
                     }
                 }
             });
-
-            if (this.object && this.object.type === 'conditionWidget' && keys.includes('output')) {
-                this.openmct.objects.mutate(this.object, 'conditionalLabel', styleObj.output);
-            } else {
-                this.openmct.objects.mutate(this.object, 'conditionalLabel', '');
-            }
         }
     }
 };

src/ui/components/ObjectView.vue

@@ -127,6 +127,10 @@ export default {
     },
     methods: {
         clear() {
+            if (this.domainObject) {
+                this.openmct.styleManager.delete(this.domainObject.identifier);
+            }
+
             if (this.currentView) {
                 this.currentView.destroy();
                 if (this.$refs.objectViewWrapper) {
@@ -213,12 +217,6 @@ export default {
                     }
                 }
             });
-
-            if (this.domainObject && this.domainObject.type === 'conditionWidget' && keys.includes('output')) {
-                this.openmct.objects.mutate(this.domainObject, 'conditionalLabel', styleObj.output);
-            } else {
-                this.openmct.objects.mutate(this.domainObject, 'conditionalLabel', '');
-            }
         },
         updateView(immediatelySelect) {
             this.clear();
@@ -310,8 +308,10 @@ export default {
             this.initObjectStyles();
         },
         initObjectStyles() {
+            this.styleRuleManager = this.openmct.styleManager.get(this.domainObject.identifier);
             if (!this.styleRuleManager) {
                 this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
+                this.openmct.styleManager.set(this.domainObject.identifier, this.styleRuleManager);
             } else {
                 this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
             }