cherry-pick(#7052): Allow Data Visualization in inspector based on cu…

…rrent selection (#7062)

Allow Data Visualization in inspector based on current selection (#7052)

* visualize data in inspector per selection

---------

Co-authored-by: David Tsay <[email protected]>
Co-authored-by: Khalid Adil <[email protected]>
Co-authored-by: John Hill <[email protected]>

src/plugins/inspectorDataVisualization/DataVisualization.vue

@@ -0,0 +1,186 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, 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-data-visualization-inspect-properties c-inspector__data-pivot c-data-visualization-inspector__flex-column"
+  >
+    <div class="c-inspect-properties">
+      <div class="c-inspect-properties__header">Data Visualization</div>
+    </div>
+
+    <div v-if="isLoading" class="c-inspector__data-pivot-placeholder">Loading...</div>
+
+    <div v-else-if="hasDataRanges">
+      <div
+        v-if="selectedDataRange !== undefined && hasDescription"
+        class="c-inspector__data-pivot-coordinates-wrapper"
+      >
+        <span
+          class="c-tree__item__type-icon c-object-label__type-icon"
+          :class="description.icon"
+        ></span>
+        <span class="c-inspector__data-pivot-coordinates">
+          {{ description.text }}
+        </span>
+      </div>
+
+      <select class="c-inspector__data-pivot-range-selector" v-model="selectedDataRangeIndex">
+        <option
+          v-for="(dataRange, index) in descendingDataRanges"
+          :key="index"
+          :value="index"
+          :selected="selectedDataRangeIndex === index"
+        >
+          {{ displayDataRange(dataRange) }}
+        </option>
+      </select>
+    </div>
+
+    <div
+      v-else-if="dataRanges && dataRanges.length === 0"
+      class="c-inspector__data-pivot-placeholder"
+    >
+      No data for the current {{ description.name }}
+    </div>
+
+    <div v-else-if="hasPlaceholderText" class="c-inspector__data-pivot-placeholder">
+      {{ placeholderText }}
+    </div>
+
+    <template v-if="selectedBounds !== undefined">
+      <NumericData
+        :bounds="selectedBounds"
+        :telemetry-keys="plotTelemetryKeys"
+        :no-numeric-data-text="noNumericDataText"
+      />
+      <Imagery v-if="hasImagery" :bounds="selectedBounds" :telemetry-keys="imageryTelemetryKeys" />
+    </template>
+  </div>
+</template>
+<script>
+import NumericData from './NumericData.vue';
+import Imagery from './Imagery.vue';
+
+const TIMESTAMP_VIEW_BUFFER = 30 * 1000;
+const timestampBufferText = `${TIMESTAMP_VIEW_BUFFER / 1000} seconds`;
+
+export default {
+  components: {
+    NumericData,
+    Imagery
+  },
+  inject: ['timeFormatter', 'placeholderText', 'plotOptions', 'imageryOptions'],
+  props: {
+    description: {
+      type: Object,
+      default: () => {}
+    },
+    dataRanges: {
+      type: Array,
+      default: () => undefined
+    },
+    plotTelemetryKeys: {
+      type: Array,
+      default: () => []
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedDataRangeIndex: 0
+    };
+  },
+  computed: {
+    hasPlaceholderText() {
+      return this.placeholderText.length > 0;
+    },
+    descendingDataRanges() {
+      return this.dataRanges?.slice().reverse();
+    },
+    hasDescription() {
+      return this.description?.text?.length > 0;
+    },
+    hasDataRanges() {
+      return this.dataRanges?.length > 0;
+    },
+    selectedDataRange() {
+      if (!this.hasDataRanges || this.selectedDataRangeIndex === undefined) {
+        return;
+      }
+
+      return this.descendingDataRanges[this.selectedDataRangeIndex];
+    },
+    selectedBounds() {
+      if (this.selectedDataRange === undefined) {
+        return;
+      }
+
+      const { start, end } = this.selectedDataRange.bounds;
+
+      if (start === end) {
+        return {
+          start: start - TIMESTAMP_VIEW_BUFFER,
+          end: end + TIMESTAMP_VIEW_BUFFER
+        };
+      }
+
+      return this.selectedDataRange.bounds;
+    },
+    imageryTelemetryKeys() {
+      return this.imageryOptions?.telemetryKeys;
+    },
+    hasImagery() {
+      return this.imageryTelemetryKeys?.length;
+    },
+    noNumericDataText() {
+      return this.plotOptions?.noNumericDataText;
+    }
+  },
+  methods: {
+    shortDate(date) {
+      return date.slice(0, date.indexOf('.')).replace('T', ' ');
+    },
+    displayDataRange(dataRange) {
+      const startTime = dataRange.bounds.start;
+      const endTime = dataRange.bounds.end;
+      if (startTime === endTime) {
+        return `${this.shortDate(this.timeFormatter.format(startTime))} +/- ${timestampBufferText}`;
+      }
+      return `${this.shortDate(this.timeFormatter.format(startTime))} - ${this.shortDate(
+        this.timeFormatter.format(endTime)
+      )}`;
+    },
+    isSelectedDataRange(dataRange, index) {
+      const selectedDataRange = this.descendingDataRanges[index];
+
+      return (
+        dataRange.bounds.start === selectedDataRange.bounds.start &&
+        dataRange.bounds.end === selectedDataRange.bounds.end
+      );
+    }
+  }
+};
+</script>

src/plugins/inspectorDataVisualization/Imagery.vue

@@ -0,0 +1,127 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, 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
+    v-if="camerasWithImagesInBounds.length > 0"
+    class="c-inspect-properties c-inspector__imagery-view"
+  >
+    <div class="c-inspect-properties__header">Imagery View</div>
+    <div
+      v-for="(camera, index) in camerasWithImagesInBounds"
+      :key="index"
+      class="c-imagery-view__camera-image-set"
+    >
+      <TelemetryFrame :bounds="bounds" :telemetry-object="camera">
+        <div class="c-imagery-view__camera-image-list">
+          <span
+            v-for="(cameraImage, imageIndex) in camera.imagesInBounds"
+            :key="imageIndex"
+            class="c-imagery-view__camera-image"
+          >
+            <img :src="cameraImage.value" />
+            <span class="c-imagery-view__camera-image-timestamp">
+              {{ cameraImage.timestamp }}
+            </span>
+          </span>
+        </div>
+      </TelemetryFrame>
+    </div>
+  </div>
+</template>
+
+<script>
+import TelemetryFrame from './TelemetryFrame.vue';
+
+export default {
+  components: {
+    TelemetryFrame
+  },
+  inject: ['openmct'],
+  props: {
+    bounds: {
+      type: Object,
+      default: () => {}
+    },
+    telemetryKeys: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      camerasWithImagesInBounds: []
+    };
+  },
+  watch: {
+    bounds() {
+      this.getCameraImagesInBounds();
+    }
+  },
+  mounted() {
+    this.getCameraImagesInBounds();
+  },
+  methods: {
+    async getCameraImagesInBounds() {
+      this.camerasWithImagesInBounds = [];
+      this.cameraImagesList = [];
+      const { start, end } = this.bounds;
+      const cameraObjectPromises = [];
+      this.telemetryKeys.forEach((telemetryKey) => {
+        const cameraPromise = this.openmct.objects.get(telemetryKey);
+        cameraObjectPromises.push(cameraPromise);
+      });
+      const cameraObjects = await Promise.all(cameraObjectPromises);
+
+      const cameraTelemetryPromises = [];
+      cameraObjects.forEach((cameraObject) => {
+        const cameraTelemetryPromise = this.openmct.telemetry.request(cameraObject, {
+          start,
+          end
+        });
+        cameraTelemetryPromises.push(cameraTelemetryPromise);
+      });
+      const cameraImages = await Promise.all(cameraTelemetryPromises);
+
+      cameraObjects.forEach((cameraObject, index) => {
+        cameraObject.images = cameraImages[index];
+      });
+
+      cameraObjects.forEach((cameraObject) => {
+        if (cameraObject.images.length > 0) {
+          const imagesInBounds = cameraObject.images.filter((imageDetails) => {
+            if (!imageDetails.timestamp) {
+              return false;
+            }
+            const timestamp = Date.parse(imageDetails.timestamp);
+            return timestamp >= start && timestamp <= end;
+          });
+          if (imagesInBounds.length > 0) {
+            cameraObject.imagesInBounds = imagesInBounds;
+            this.camerasWithImagesInBounds.push(cameraObject);
+          }
+        }
+      });
+    }
+  }
+};
+</script>

src/plugins/inspectorDataVisualization/InspectorDataVisualizationComponent.vue

@@ -0,0 +1,65 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, 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__properties c-data-visualization-inspector__properties c-data-visualization-inspector__flex-column"
+  >
+    <DataVisualization
+      :data-ranges="dataRanges"
+      :plot-telemetry-keys="plotTelemetryKeys"
+      :description="description"
+      :is-loading="isLoading"
+    />
+  </div>
+</template>
+
+<script>
+import DataVisualization from './DataVisualization.vue';
+
+export default {
+  components: {
+    DataVisualization
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    dataRanges() {
+      return this.context.dataRanges;
+    },
+    plotTelemetryKeys() {
+      return this.context.telemetryKeys;
+    },
+    description() {
+      return this.context.description;
+    },
+    isLoading() {
+      return Boolean(this.context.loading);
+    }
+  }
+};
+</script>