From f6934a43c9e3d4c4cb9c5f23e3a9a4f0b0080e1c Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 7 Jan 2022 10:17:20 -0800
Subject: [PATCH] Enable independent time conductor for stacked plot and
 overlay plot and bar graphs (#4646)

* Enable independent time conductor for stacked plot and overlay plot.

* Lint fixes

* Fixes for #4503 and #4606
- Added `flex: 0 0 auto` to toggle switch when in ITC to prevent
element from being crunched when window or frame is very small;

* Add independent time conductor to bar graphs

* Add timeContext to bar graphs

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
---
 src/plugins/charts/BarGraphView.vue      | 27 +++++++++++++++++++-----
 src/plugins/timeConductor/conductor.scss |  5 +++++
 src/ui/components/ObjectView.vue         | 13 +++++++++++-
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/plugins/charts/BarGraphView.vue b/src/plugins/charts/BarGraphView.vue
index 20997f1170..d9b49bd6d8 100644
--- a/src/plugins/charts/BarGraphView.vue
+++ b/src/plugins/charts/BarGraphView.vue
@@ -62,12 +62,14 @@ export default {
         }
     },
     mounted() {
+        this.refreshData = this.refreshData.bind(this);
+        this.setTimeContext();
+
         this.loadComposition();
 
-        this.openmct.time.on('bounds', this.refreshData);
     },
     beforeDestroy() {
-        this.openmct.time.off('bounds', this.refreshData);
+        this.stopFollowingTimeContext();
 
         this.removeAllSubscriptions();
 
@@ -79,6 +81,21 @@ export default {
         this.composition.off('remove', this.removeTelemetryObject);
     },
     methods: {
+        setTimeContext() {
+            this.stopFollowingTimeContext();
+
+            this.timeContext = this.openmct.time.getContextForView(this.path);
+            this.followTimeContext();
+
+        },
+        followTimeContext() {
+            this.timeContext.on('bounds', this.refreshData);
+        },
+        stopFollowingTimeContext() {
+            if (this.timeContext) {
+                this.timeContext.off('bounds', this.refreshData);
+            }
+        },
         addTelemetryObject(telemetryObject) {
             // grab information we need from the added telmetry object
             const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
@@ -147,7 +164,7 @@ export default {
             };
         },
         getOptions() {
-            const { start, end } = this.openmct.time.bounds();
+            const { start, end } = this.timeContext.bounds();
 
             return {
                 end,
@@ -247,10 +264,10 @@ export default {
             this.addTrace(trace, key);
         },
         isDataInTimeRange(datum, key) {
-            const timeSystemKey = this.openmct.time.timeSystem().key;
+            const timeSystemKey = this.timeContext.timeSystem().key;
             let currentTimestamp = this.parse(key, timeSystemKey, datum);
 
-            return currentTimestamp && this.openmct.time.bounds().end >= currentTimestamp;
+            return currentTimestamp && this.timeContext.bounds().end >= currentTimestamp;
         },
         format(telemetryObjectKey, metadataKey, data) {
             const formats = this.telemetryObjectFormats[telemetryObjectKey];
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index 453a7b2ac1..7eb6eec8ee 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -185,6 +185,11 @@
         &__inputs,
         &__time-bounds {
             display: flex;
+
+            .c-toggle-switch {
+                // Used in independent Time Conductor
+                flex: 0 0 auto;
+            }
         }
 
         &__inputs {
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index a7104a5c5c..cc462b61a0 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-    <div v-if="domainObject && domainObject.type === 'time-strip'"
+    <div v-if="supportsIndependentTime"
          class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
     >
         <independent-time-conductor :domain-object="domainObject"
@@ -20,6 +20,12 @@ import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
 import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
 import IndependentTimeConductor from '@/plugins/timeConductor/independent/IndependentTimeConductor.vue';
 
+const SupportedViewTypes = [
+    'plot-stacked',
+    'plot-overlay',
+    'bar-graph.view',
+    'time-strip.view'
+];
 export default {
     components: {
         IndependentTimeConductor
@@ -64,6 +70,11 @@ export default {
         },
         font() {
             return this.objectFontStyle ? this.objectFontStyle.font : this.layoutFont;
+        },
+        supportsIndependentTime() {
+            const viewKey = this.getViewKey();
+
+            return this.domainObject && SupportedViewTypes.includes(viewKey);
         }
     },
     destroyed() {