Add tests for inspector data pivoting (#7282)

* inspector view needs renderWhenVisible function

* add a default visualization source

* add plugin to exercise data pivotting

* use correct key string

* test skeleton

* add e2e test

---------

Co-authored-by: David Tsay <david.e.tsay@nasa.gov>
Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>

e2e/helper/addInitDataVisualization.js

@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// This should be used to install the Example User
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.example.ExampleDataVisualizationSourcePlugin());
+  openmct.install(
+    openmct.plugins.InspectorDataVisualization({ type: 'exampleDataVisualizationSource' })
+  );
+});

e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* global __dirname */
+
+const { test, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const path = require('path');
+
+test.describe('Testing numeric data with inspector data visualization (i.e., data pivoting)', () => {
+  test.beforeEach(async ({ page }) => {
+    // eslint-disable-next-line no-undef
+    await page.addInitScript({
+      path: path.join(__dirname, '../../../../helper/', 'addInitDataVisualization.js')
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Can click on telemetry and see data in inspector', async ({ page }) => {
+    const exampleDataVisualizationSource = await createDomainObjectWithDefaults(page, {
+      type: 'Example Data Visualization Source'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'First Sine Wave Generator',
+      parent: exampleDataVisualizationSource.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Second Sine Wave Generator',
+      parent: exampleDataVisualizationSource.uuid
+    });
+
+    await page.goto(exampleDataVisualizationSource.url);
+
+    await page.getByRole('tab', { name: 'Data Visualization' }).click();
+    await page.getByRole('cell', { name: /First Sine Wave Generator/ }).click();
+    await expect(page.getByText('Numeric Data')).toBeVisible();
+    await expect(
+      page.locator('span.plot-series-name', { hasText: 'First Sine Wave Generator Hz' })
+    ).toBeVisible();
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+
+    await page.getByRole('cell', { name: /Second Sine Wave Generator/ }).click();
+    await expect(page.getByText('Numeric Data')).toBeVisible();
+    await expect(
+      page.locator('span.plot-series-name', { hasText: 'Second Sine Wave Generator Hz' })
+    ).toBeVisible();
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+  });
+});

example/dataVisualization/ExampleDataVisualizationSourceViewProvider.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import ExampleDataVisualizationSource from './components/ExampleDataVisualizationSource.vue';
+
+export default function ExampleDataVisualizationSourceViewProvider(openmct) {
+  return {
+    key: 'exampleDataVisualizationSource',
+    name: 'Example Data Visualization Source',
+    cssClass: 'icon-telemetry',
+    canView: function (domainObject) {
+      return domainObject.type === 'exampleDataVisualizationSource';
+    },
+    canEdit: function (domainObject) {
+      if (domainObject.type === 'exampleDataVisualizationSource') {
+        return true;
+      }
+    },
+    view: function (domainObject) {
+      let _destroy = null;
+
+      return {
+        show: function (element, isEditing) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                ExampleDataVisualizationSource
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: '<example-data-visualization-source></example-data-visualization-source>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    },
+    priority: function () {
+      return 1;
+    }
+  };
+}

example/dataVisualization/components/ExampleDataVisualizationSource.vue

@@ -0,0 +1,128 @@
+<!--
+ 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-table c-list-view c-list-view--selectable">
+    <table class="c-table__body">
+      <thead class="c-table__header">
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="item in items"
+          :key="item.keyString"
+          class="c-list-item js-folder-child"
+          @click="selectItem(item, $event)"
+        >
+          <td class="c-list-item__name">
+            <a ref="objectLink" class="c-object-label">
+              <div
+                class="c-object-label__type-icon c-list-item__name__type-icon"
+                :class="item.type.cssClass"
+              ></div>
+              <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>
+            </a>
+          </td>
+          <td class="c-list-item__type">
+            {{ item.type.name }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      items: []
+    };
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.composition.on('add', this.addedTelemetry);
+    this.composition.on('remove', this.removedTelemetry);
+    this.composition.load();
+  },
+  unmounted() {
+    this.composition.off('add', this.addedTelemetry);
+    this.composition.off('remove', this.removedTelemetry);
+  },
+  methods: {
+    selectItem(item, event) {
+      event.stopPropagation();
+      const bounds = this.openmct.time.getBounds();
+      const selection = [
+        {
+          element: this.$el,
+          context: {
+            dataVisualization: {
+              telemetryKeys: [item.objectKeyString],
+              description: {
+                text: item.model.name,
+                icon: item.type.cssClass
+              },
+              dataRanges: [
+                {
+                  bounds
+                }
+              ],
+              loading: false
+            },
+            item: this.domainObject
+          }
+        }
+      ];
+      this.openmct.selection.select(selection, false);
+    },
+    addedTelemetry(child) {
+      const type = this.openmct.types.get(child.type) || {
+        definition: {
+          cssClass: 'icon-object-unknown',
+          name: 'Unknown Type'
+        }
+      };
+      this.items.push({
+        model: child,
+        type: type.definition,
+        isAlias: this.keystring !== child.location,
+        objectPath: [child].concat(this.openmct.router.path),
+        objectKeyString: this.openmct.objects.makeKeyString(child.identifier)
+      });
+    },
+    removedTelemetry(identifier) {
+      this.items = this.items.filter((i) => {
+        return (
+          i.model.identifier.key !== identifier.key ||
+          i.model.identifier.namespace !== identifier.namespace
+        );
+      });
+    }
+  }
+};
+</script>

example/dataVisualization/plugin.js

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import ExampleDataVisualizationSourceViewProvider from './ExampleDataVisualizationSourceViewProvider';
+
+export default function () {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new ExampleDataVisualizationSourceViewProvider(openmct));
+
+    openmct.types.addType('exampleDataVisualizationSource', {
+      name: 'Example Data Visualization Source',
+      creatable: true,
+      description: 'An example data visualization source to be used with an inspector.',
+      cssClass: 'icon-telemetry',
+      initialize(domainObject) {
+        domainObject.composition = [];
+      }
+    });
+
+    openmct.composition.addPolicy((parent, child) => {
+      if (parent.type === 'exampleDataVisualizationSource') {
+        return Object.prototype.hasOwnProperty.call(child, 'telemetry');
+      } else {
+        return true;
+      }
+    });
+  };
+}

src/plugins/inspectorDataVisualization/InspectorDataVisualizationViewProvider.js

@@ -49,7 +49,8 @@ export default function InspectorDataVisualizationViewProvider(openmct, configur
       const context = selection[0][0].context;
       const domainObject = context.item;
       const dataVisualizationContext = context?.dataVisualization ?? {};
-      const timeFormatter = openmct.telemetry.getFormatter('iso');
+      const timeFormatter =
+        openmct.telemetry.getFormatter('iso') || openmct.telemetry.getFormatter('utc');
 
       return {
         show(element) {

src/plugins/plugins.js

@@ -29,6 +29,7 @@ define([
   './myItems/plugin',
   '../../example/generator/plugin',
   '../../example/eventGenerator/plugin',
+  '../../example/dataVisualization/plugin',
   './autoflow/AutoflowTabularPlugin',
   './timeConductor/plugin',
   '../../example/imagery/plugin',
@@ -94,6 +95,7 @@ define([
   MyItems,
   GeneratorPlugin,
   EventGeneratorPlugin,
+  ExampleDataVisualizationSourcePlugin,
   AutoflowPlugin,
   TimeConductorPlugin,
   ExampleImagery,
@@ -158,6 +160,8 @@ define([
   plugins.example.ExampleImagery = ExampleImagery.default;
   plugins.example.ExampleFaultSource = ExampleFaultSource.default;
   plugins.example.EventGeneratorPlugin = EventGeneratorPlugin.default;
+  plugins.example.ExampleDataVisualizationSourcePlugin =
+    ExampleDataVisualizationSourcePlugin.default;
   plugins.example.ExampleTags = ExampleTags.default;
   plugins.example.Generator = () => GeneratorPlugin.default;