Reduce bundle size

.webpack/webpack.common.js

@@ -69,9 +69,9 @@ const config = {
       csv: 'comma-separated-values',
       EventEmitter: 'eventemitter3',
       bourbon: 'bourbon.scss',
-      'plotly-basic': 'plotly.js-basic-dist',
-      'plotly-gl2d': 'plotly.js-gl2d-dist',
-      printj: path.join(projectRootDir, 'node_modules/printj/dist/printj.min.js'),
+      'plotly-basic': 'plotly.js-basic-dist-min',
+      'plotly-gl2d': 'plotly.js-gl2d-dist-min',
+      printj: 'printj/printj.mjs',
       styles: path.join(projectRootDir, 'src/styles'),
       MCT: path.join(projectRootDir, 'src/MCT'),
       testUtils: path.join(projectRootDir, 'src/utils/testUtils.js'),

package.json

@@ -10,6 +10,9 @@
     "@percy/cli": "1.27.4",
     "@percy/playwright": "1.0.4",
     "@playwright/test": "1.39.0",
+    "@types/d3-axis": "3.0.6",
+    "@types/d3-scale": "4.0.8",
+    "@types/d3-selection": "3.0.10",
     "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "5.1.2",
     "@types/lodash": "4.14.192",
@@ -61,8 +64,8 @@
     "npm-run-all2": "6.1.1",
     "nyc": "15.1.0",
     "painterro": "1.2.87",
-    "plotly.js-basic-dist": "2.20.0",
-    "plotly.js-gl2d-dist": "2.20.0",
+    "plotly.js-basic-dist-min": "2.20.0",
+    "plotly.js-gl2d-dist-min": "2.20.0",
     "prettier": "2.8.7",
     "printj": "1.3.1",
     "resolve-url-loader": "5.0.0",
@@ -71,6 +74,7 @@
     "sass-loader": "13.3.2",
     "sinon": "17.0.0",
     "style-loader": "3.3.3",
+    "terser-webpack-plugin": "5.3.9",
     "tiny-emitter": "2.1.0",
     "typescript": "5.2.2",
     "uuid": "9.0.1",

src/api/telemetry/TelemetryValueFormatter.js

@@ -20,133 +20,132 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['lodash', 'printj'], function (_, printj) {
-  // TODO: needs reference to formatService;
-  function TelemetryValueFormatter(valueMetadata, formatMap) {
-    const numberFormatter = {
-      parse: function (x) {
-        return Number(x);
-      },
-      format: function (x) {
-        return x;
-      },
-      validate: function (x) {
-        return true;
-      }
-    };
-
-    this.valueMetadata = valueMetadata;
-
-    function getNonArrayValue(value) {
-      //metadata format could have array formats ex. string[]/number[]
-      const arrayRegex = /\[\]$/g;
-      if (value && value.match(arrayRegex)) {
-        return value.replace(arrayRegex, '');
-      }
-
-      return value;
+import _ from 'lodash';
+import { sprintf } from 'printj';
+
+// TODO: needs reference to formatService;
+export default function TelemetryValueFormatter(valueMetadata, formatMap) {
+  const numberFormatter = {
+    parse: function (x) {
+      return Number(x);
+    },
+    format: function (x) {
+      return x;
+    },
+    validate: function (x) {
+      return true;
     }
+  };
 
-    let valueMetadataFormat = getNonArrayValue(valueMetadata.format);
-
-    //Is there an existing formatter for the format specified? If not, default to number format
-    this.formatter = formatMap.get(valueMetadataFormat) || numberFormatter;
+  this.valueMetadata = valueMetadata;
 
-    if (valueMetadataFormat === 'enum') {
-      this.formatter = {};
-      this.enumerations = valueMetadata.enumerations.reduce(
-        function (vm, e) {
-          vm.byValue[e.value] = e.string;
-          vm.byString[e.string] = e.value;
+  function getNonArrayValue(value) {
+    //metadata format could have array formats ex. string[]/number[]
+    const arrayRegex = /\[\]$/g;
+    if (value && value.match(arrayRegex)) {
+      return value.replace(arrayRegex, '');
+    }
 
-          return vm;
-        },
-        {
-          byValue: {},
-          byString: {}
-        }
-      );
-      this.formatter.format = function (value) {
-        if (Object.prototype.hasOwnProperty.call(this.enumerations.byValue, value)) {
-          return this.enumerations.byValue[value];
-        }
+    return value;
+  }
 
-        return value;
-      }.bind(this);
-      this.formatter.parse = function (string) {
-        if (typeof string === 'string') {
-          if (Object.prototype.hasOwnProperty.call(this.enumerations.byString, string)) {
-            return this.enumerations.byString[string];
-          }
-        }
+  let valueMetadataFormat = getNonArrayValue(valueMetadata.format);
 
-        return Number(string);
-      }.bind(this);
-    }
+  //Is there an existing formatter for the format specified? If not, default to number format
+  this.formatter = formatMap.get(valueMetadataFormat) || numberFormatter;
 
-    // Check for formatString support once instead of per format call.
-    if (valueMetadata.formatString) {
-      const baseFormat = this.formatter.format;
-      const formatString = getNonArrayValue(valueMetadata.formatString);
-      this.formatter.format = function (value) {
-        return printj.sprintf(formatString, baseFormat.call(this, value));
-      };
-    }
+  if (valueMetadataFormat === 'enum') {
+    this.formatter = {};
+    this.enumerations = valueMetadata.enumerations.reduce(
+      function (vm, e) {
+        vm.byValue[e.value] = e.string;
+        vm.byString[e.string] = e.value;
 
-    if (valueMetadataFormat === 'string') {
-      this.formatter.parse = function (value) {
-        if (value === undefined) {
-          return '';
-        }
+        return vm;
+      },
+      {
+        byValue: {},
+        byString: {}
+      }
+    );
+    this.formatter.format = function (value) {
+      if (Object.prototype.hasOwnProperty.call(this.enumerations.byValue, value)) {
+        return this.enumerations.byValue[value];
+      }
 
-        if (typeof value === 'string') {
-          return value;
-        } else {
-          return value.toString();
+      return value;
+    }.bind(this);
+    this.formatter.parse = function (string) {
+      if (typeof string === 'string') {
+        if (Object.prototype.hasOwnProperty.call(this.enumerations.byString, string)) {
+          return this.enumerations.byString[string];
         }
-      };
+      }
 
-      this.formatter.format = function (value) {
-        return value;
-      };
+      return Number(string);
+    }.bind(this);
+  }
 
-      this.formatter.validate = function (value) {
-        return typeof value === 'string';
-      };
-    }
+  // Check for formatString support once instead of per format call.
+  if (valueMetadata.formatString) {
+    const baseFormat = this.formatter.format;
+    const formatString = getNonArrayValue(valueMetadata.formatString);
+    this.formatter.format = function (value) {
+      return sprintf(formatString, baseFormat.call(this, value));
+    };
   }
 
-  TelemetryValueFormatter.prototype.parse = function (datum) {
-    const isDatumArray = Array.isArray(datum);
-    if (_.isObject(datum)) {
-      const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
-      if (Array.isArray(objectDatum)) {
-        return objectDatum.map((item) => {
-          return this.formatter.parse(item);
-        });
-      } else {
-        return this.formatter.parse(objectDatum);
+  if (valueMetadataFormat === 'string') {
+    this.formatter.parse = function (value) {
+      if (value === undefined) {
+        return '';
       }
-    }
 
-    return this.formatter.parse(datum);
-  };
-
-  TelemetryValueFormatter.prototype.format = function (datum) {
-    const isDatumArray = Array.isArray(datum);
-    if (_.isObject(datum)) {
-      const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
-      if (Array.isArray(objectDatum)) {
-        return objectDatum.map((item) => {
-          return this.formatter.format(item);
-        });
+      if (typeof value === 'string') {
+        return value;
       } else {
-        return this.formatter.format(objectDatum);
+        return value.toString();
       }
+    };
+
+    this.formatter.format = function (value) {
+      return value;
+    };
+
+    this.formatter.validate = function (value) {
+      return typeof value === 'string';
+    };
+  }
+}
+
+TelemetryValueFormatter.prototype.parse = function (datum) {
+  const isDatumArray = Array.isArray(datum);
+  if (_.isObject(datum)) {
+    const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
+    if (Array.isArray(objectDatum)) {
+      return objectDatum.map((item) => {
+        return this.formatter.parse(item);
+      });
+    } else {
+      return this.formatter.parse(objectDatum);
     }
+  }
 
-    return this.formatter.format(datum);
-  };
+  return this.formatter.parse(datum);
+};
+
+TelemetryValueFormatter.prototype.format = function (datum) {
+  const isDatumArray = Array.isArray(datum);
+  if (_.isObject(datum)) {
+    const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
+    if (Array.isArray(objectDatum)) {
+      return objectDatum.map((item) => {
+        return this.formatter.format(item);
+      });
+    } else {
+      return this.formatter.format(objectDatum);
+    }
+  }
 
-  return TelemetryValueFormatter;
-});
+  return this.formatter.format(datum);
+};

src/plugins/displayLayout/CustomStringFormatter.js

@@ -1,4 +1,4 @@
-import printj from 'printj';
+import { sprintf } from 'printj';
 
 export default class CustomStringFormatter {
   constructor(openmct, valueMetadata, itemFormat) {
@@ -14,7 +14,7 @@ export default class CustomStringFormatter {
     }
 
     if (!this.itemFormat.startsWith('&')) {
-      return printj.sprintf(this.itemFormat, datum[this.valueMetadata.key]);
+      return sprintf(this.itemFormat, datum[this.valueMetadata.key]);
     }
 
     try {

src/plugins/timeConductor/ConductorAxis.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import * as d3Axis from 'd3-axis';
+import { axisTop } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
-import * as d3Selection from 'd3-selection';
+import { select } from 'd3-selection';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants';
 import utcMultiTimeFormat from './utcMultiTimeFormat.js';
@@ -78,9 +78,9 @@ export default {
     }
   },
   mounted() {
-    let vis = d3Selection.select(this.$refs.axisHolder).append('svg:svg');
+    let vis = select(this.$refs.axisHolder).append('svg:svg');
 
-    this.xAxis = d3Axis.axisTop();
+    this.xAxis = axisTop();
     this.dragging = false;
 
     // draw x axis with labels. CSS is used to position them.

src/ui/components/TimeSystemAxis.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import * as d3Axis from 'd3-axis';
+import { axisTop } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
-import * as d3Selection from 'd3-selection';
+import { select } from 'd3-selection';
 
 import utcMultiTimeFormat from '@/plugins/timeConductor/utcMultiTimeFormat';
 
@@ -89,7 +89,7 @@ export default {
       this.useSVG = true;
     }
 
-    this.container = d3Selection.select(this.$refs.axisHolder);
+    this.container = select(this.$refs.axisHolder);
     this.svgElement = this.container.append('svg:svg');
     // draw x axis with labels. CSS is used to position them.
     this.axisElement = this.svgElement
@@ -165,7 +165,7 @@ export default {
       this.xScale.range([PADDING, this.offsetWidth - PADDING * 2]);
     },
     setAxis() {
-      this.xAxis = d3Axis.axisTop(this.xScale);
+      this.xAxis = axisTop(this.xScale);
       this.xAxis.tickFormat(utcMultiTimeFormat);
 
       if (this.width > 1800) {