Vista table sync (#2423)

* Working version of integrated tables

* Fixed bug with multi-composition in tables

* Changes to support tables from VISTA

src/plugins/telemetryTable/TelemetryTable.js

@@ -26,6 +26,7 @@ define([
     './collections/BoundedTableRowCollection',
     './collections/FilteredTableRowCollection',
     './TelemetryTableRow',
+    './TelemetryTableColumn',
     './TelemetryTableConfiguration'
 ], function (
     EventEmitter,
@@ -33,6 +34,7 @@ define([
     BoundedTableRowCollection,
     FilteredTableRowCollection,
     TelemetryTableRow,
+    TelemetryTableColumn,
     TelemetryTableConfiguration
 ) {
     class TelemetryTable extends EventEmitter {
@@ -94,8 +96,6 @@ define([
                 this.tableComposition.load().then((composition) => {
 
                     composition = composition.filter(this.isTelemetryObject);
-
-                    this.configuration.addColumnsForAllObjects(composition);
                     composition.forEach(this.addTelemetryObject);
 
                     this.tableComposition.on('add', this.addTelemetryObject);
@@ -105,7 +105,7 @@ define([
         }
 
         addTelemetryObject(telemetryObject) {
-            this.configuration.addColumnsForObject(telemetryObject, true);
+            this.addColumnsForObject(telemetryObject, true);
             this.requestDataFor(telemetryObject);
             this.subscribeTo(telemetryObject);
             this.telemetryObjects.push(telemetryObject);
@@ -132,6 +132,13 @@ define([
             this.emit('object-removed', objectIdentifier);
         }
 
+        /**
+         * @private
+         */
+        createRow(datum, columnMap, keyString, limitEvaluator) {
+            return new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
+        }
+
         requestDataFor(telemetryObject) {
             this.incrementOutstandingRequests();
             let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
@@ -145,7 +152,7 @@ define([
                     let columnMap = this.getColumnMapForObject(keyString);
                     let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
 
-                    let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                    let telemetryRows = telemetryData.map(datum => this.createRow(datum, columnMap, keyString, limitEvaluator));
                     this.boundedRows.add(telemetryRows);
                 }).finally(() => {
                     this.decrementOutstandingRequests();
@@ -191,6 +198,19 @@ define([
             }, {});
         }
 
+        addColumnsForObject(telemetryObject) {
+            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            metadataValues.forEach(metadatum => {
+                let column = this.createColumn(metadatum);
+                this.configuration.addSingleColumnForObject(telemetryObject, column);
+            });
+        }
+
+        createColumn(metadatum) {
+            return new TelemetryTableColumn(this.openmct, metadatum);
+        }
+
         subscribeTo(telemetryObject) {
             let subscribeOptions = this.buildOptionsFromConfiguration(telemetryObject);
             let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
@@ -202,7 +222,7 @@ define([
                 if (!this.telemetryObjects.includes(telemetryObject)) {
                     return;
                 }
-                this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                this.boundedRows.add(this.createRow(datum, columnMap, keyString, limitEvaluator));
             }, subscribeOptions);
         }
 

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -22,9 +22,8 @@
 
 define([
     'lodash',
-    'EventEmitter',
+    'EventEmitter'
-    './TelemetryTableColumn'
+], function (_, EventEmitter) {
-], function (_, EventEmitter, TelemetryTableColumn) {
 
     class TelemetryTableConfiguration extends EventEmitter {
         constructor(domainObject, openmct) {
@@ -34,7 +33,6 @@ define([
             this.openmct = openmct;
             this.columns = {};
 
-            this.addColumnsForObject = this.addColumnsForObject.bind(this);
             this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
             this.objectMutated = this.objectMutated.bind(this);
             //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
@@ -48,6 +46,7 @@ define([
             configuration.hiddenColumns = configuration.hiddenColumns || {};
             configuration.columnWidths = configuration.columnWidths || {};
             configuration.columnOrder = configuration.columnOrder || [];
+            configuration.cellFormat = configuration.cellFormat || {};
             configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
 
             return configuration;
@@ -65,26 +64,18 @@ define([
             //Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
             this.domainObject = object;
             //Was it the configuration that changed?
-            if (!_.eq(object.configuration, this.oldConfiguration)) {
+            if (object.configuration !== undefined && !_.eq(object.configuration, this.oldConfiguration)) {
                 //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
                 this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
                 this.emit('change', object.configuration);
             }
         }
 
-        addColumnsForAllObjects(objects) {
+        addSingleColumnForObject(telemetryObject, column, position) {
-            objects.forEach(object => this.addColumnsForObject(object, false));
-        }
-
-        addColumnsForObject(telemetryObject) {
-            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
             let objectKeyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            this.columns[objectKeyString] = [];
+            this.columns[objectKeyString] = this.columns[objectKeyString] || [];
-
+            position = position || this.columns[objectKeyString].length;
-            metadataValues.forEach(metadatum => {
+            this.columns[objectKeyString].splice(position, 0, column);
-                let column = new TelemetryTableColumn(this.openmct, metadatum);
-                this.columns[objectKeyString].push(column);
-            });
         }
 
         removeColumnsForObject(objectIdentifier) {

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -42,12 +42,19 @@ define([], function () {
             return column && column.getFormattedValue(this.datum[key]);
         }
 
-        getRowLimitClass() {
+        getCellComponentName(key) {
-            if (!this.rowLimitClass) {
+            let column = this.columns[key];
+            return column &&
+                column.getCellComponentName &&
+                column.getCellComponentName();
+        }
+
+        getRowClass() {
+            if (!this.rowClass) {
                 let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
-                this.rowLimitClass = limitEvaluation && limitEvaluation.cssClass;
+                this.rowClass = limitEvaluation && limitEvaluation.cssClass;
             }
-            return this.rowLimitClass;
+            return this.rowClass;
         }
 
         getCellLimitClasses() {

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -22,12 +22,10 @@
 
 define([
     './components/table.vue',
-    '../../exporters/CSVExporter',
     './TelemetryTable',
     'vue'
 ], function (
     TableComponent,
-    CSVExporter,
     TelemetryTable,
     Vue
 ) {
@@ -51,7 +49,6 @@ define([
                 return domainObject.type === 'table';
             },
             view(domainObject) {
-                let csvExporter = new CSVExporter.default();
                 let table = new TelemetryTable(domainObject, openmct);
                 let component;
                 return {
@@ -67,7 +64,6 @@ define([
                             },
                             provide: {
                                 openmct,
-                                csvExporter,
                                 table
                             },
                             el: element,

src/plugins/telemetryTable/components/table-cell.vue

@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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>
+    <td>{{formattedValue}}</td>
+</template>
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        row: {
+            type: Object,
+            required: true
+        },
+        columnKey: {
+            type: String,
+            require: true
+        }
+    },
+    computed: {
+        formattedValue() {
+            return this.row.getFormattedValue(this.columnKey);
+        }
+    }
+};
+</script>

src/plugins/telemetryTable/components/table-configuration.vue

@@ -23,6 +23,8 @@
 </style>
 
 <script>
+import TelemetryTableColumn from '../TelemetryTableColumn';
+
 export default {
     inject: ['tableConfiguration', 'openmct'],
     data() {
@@ -43,7 +45,7 @@ export default {
             this.tableConfiguration.updateConfiguration(this.configuration);
         },
         addObject(domainObject) {
-            this.tableConfiguration.addColumnsForObject(domainObject, true);
+                this.addColumnsForObject(domainObject, true);
             this.updateHeaders(this.tableConfiguration.getAllHeaders());
         },
         removeObject(objectIdentifier) {
@@ -56,6 +58,17 @@ export default {
         toggleAutosize() {
             this.configuration.autosize = !this.configuration.autosize;
             this.tableConfiguration.updateConfiguration(this.configuration);
+        },
+        addColumnsForAllObjects(objects) {
+            objects.forEach(object => this.addColumnsForObject(object, false));
+        },
+        addColumnsForObject(telemetryObject) {
+            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            metadataValues.forEach(metadatum => {
+                let column = new TelemetryTableColumn(this.openmct, metadatum);
+                this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
+            });
         }
     },
     mounted() {
@@ -65,7 +78,7 @@ export default {
 
         compositionCollection.load()
             .then((composition) => {
-                this.tableConfiguration.addColumnsForAllObjects(composition);
+                this.addColumnsForAllObjects(composition);
                 this.updateHeaders(this.tableConfiguration.getAllHeaders());
 
                 compositionCollection.on('add', this.addObject);

src/plugins/telemetryTable/components/table-row.vue

@@ -20,12 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<tr :style="{ top: rowTop }" :class="rowLimitClass">
+<tr :style="{ top: rowTop }" :class="rowClass">
-    <td v-for="(title, key) in headers" 
+    <component
+        v-for="(title, key) in headers"
         :key="key"
+        :is="componentList[key]"
+        :columnKey="key"
         :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
         :title="formattedRow[key]"
-        :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
+        :class="cellLimitClasses[key]"
+        class="is-selectable"
+        @click="selectCell($event.currentTarget, key)"
+        :row="row"></component>
 </tr>
 </template>
 
@@ -33,13 +39,19 @@
 </style>
 
 <script>
+import TableCell from './table-cell.vue';
+
 export default {
     data: function () {
         return {
             rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
             formattedRow: this.row.getFormattedDatum(this.headers),
-            rowLimitClass: this.row.getRowLimitClass(),
+            rowClass: this.row.getRowClass(),
-            cellLimitClasses: this.row.getCellLimitClasses()
+            cellLimitClasses: this.row.getCellLimitClasses(),
+            componentList: Object.keys(this.headers).reduce((components, header) => {
+                components[header] = this.row.getCellComponentName(header) || 'table-cell';
+                return components
+            }, {})
         }
     },
     props: {
@@ -77,8 +89,25 @@ export default {
         },
         formatRow: function (row) {
             this.formattedRow = row.getFormattedDatum(this.headers);
-            this.rowLimitClass = row.getRowLimitClass();
+            this.rowClass = row.getRowClass();
             this.cellLimitClasses = row.getCellLimitClasses();
+        },
+        selectCell(element, columnKey) {
+            //TODO: This is a hack. Cannot get parent this way.
+            this.openmct.selection.select([{
+                element: element,
+                context: {
+                    type: 'table-cell',
+                    row: this.row.objectKeyString,
+                    column: columnKey
+                }
+            },{
+                element: this.openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: this.openmct.router.path[0]
+                }
+            }], false);
+            event.stopPropagation();
         }
     },
     // TODO: use computed properties
@@ -88,6 +117,9 @@ export default {
             handler: 'formatRow',
             deep: false
         }
+    },
+    components: {
+        TableCell
     }
 }
 </script>

src/plugins/telemetryTable/components/table.vue

@@ -22,7 +22,8 @@
 <template>
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
      :class="{'loading': loading}">
-    <div class="c-table__control-bar c-control-bar">
+    <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}"><slot></slot></div>
+    <div v-if="allowExport" class="c-table__control-bar c-control-bar">
         <button class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
@@ -40,7 +41,7 @@
                         :key="key"
                         :headerKey="key"
                         :headerIndex="headerIndex"
-                        @sort="sortBy(key)"
+                        @sort="allowSorting && sortBy(key)"
                         @resizeColumn="resizeColumn"
                         @dropTargetOffsetChanged="setDropTargetOffset"
                         @dropTargetActive="dropTargetActive"
@@ -279,6 +280,7 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
+import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 
 const VISIBLE_ROW_COUNT = 100;
@@ -295,11 +297,23 @@ export default {
         TableColumnHeader,
         search
     },
-    inject: ['table', 'openmct', 'csvExporter'],
+    inject: ['table', 'openmct'],
     props: {
         isEditing: {
             type: Boolean,
             default: false
+        },
+        allowExport: {
+            type: Boolean,
+            default: true
+        },
+        allowFiltering: {
+            'type': Boolean,
+            'default': true
+        },
+        allowSorting: {
+            'type': Boolean,
+            'default': true
         }
     },
     data() {
@@ -611,12 +625,17 @@ export default {
                 scrollTop = this.scrollable.scrollTop;
             }, RESIZE_POLL_INTERVAL);
         },
+        clearRowsAndRerender() {
+            this.visibleRows = [];
+            this.$nextTick().then(this.updateVisibleRows);
+        }
 
     },
     created() {
         this.filterChanged = _.debounce(this.filterChanged, 500);
     },
     mounted() {
+        this.csvExporter = new CSVExporter();
         this.rowsAdded = _.throttle(this.rowsAdded, 200);
         this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
         this.scroll = _.throttle(this.scroll, 100);
@@ -624,6 +643,7 @@ export default {
         this.table.on('object-added', this.addObject);
         this.table.on('object-removed', this.removeObject);
         this.table.on('outstanding-requests', this.outstandingRequests);
+        this.table.on('refresh', this.clearRowsAndRerender);
 
         this.table.filteredRows.on('add', this.rowsAdded);
         this.table.filteredRows.on('remove', this.rowsRemoved);
@@ -649,6 +669,7 @@ export default {
         this.table.off('object-added', this.addObject);
         this.table.off('object-removed', this.removeObject);
         this.table.off('outstanding-requests', this.outstandingRequests);
+        this.table.off('refresh', this.clearRowsAndRerender);
 
         this.table.filteredRows.off('add', this.rowsAdded);
         this.table.filteredRows.off('remove', this.rowsRemoved);

src/plugins/telemetryTable/table-row.html

@@ -1,6 +0,0 @@
-<tr :style="{ top: rowTop }" :class="rowLimitClass">
-    <td v-for="(title, key, headerIndex) in headers" 
-        :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}" 
-        :title="formattedRow[key]"
-        :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
-</tr>

webpack.config.js

@@ -24,6 +24,7 @@ const webpackConfig = {
     output: {
         filename: '[name].js',
         library: '[name]',
+        libraryTarget: 'umd',
         path: path.resolve(__dirname, 'dist')
     },
     resolve: {