Fix Tooltip Rendering Issue by Upgrading react-charts

This PR addresses the tooltip rendering issues
encountered in [email protected].
The issue has been resolved in [email protected].

https://bugzilla.redhat.com/show_bug.cgi?id=2281587
Signed-off-by: Timothy Asir Jeyasingh <[email protected]>

analyzeTest.ts

@@ -1,7 +1,8 @@
 import * as fs from 'fs';
+import * as JSONStream from 'JSONStream';
 
 const pluginName = process.env.PLUGIN;
-const MAX_ASSET_SIZE = 17; //17 MiB
+const MAX_ASSET_SIZE = 19; // 19 MiB
 
 const getStatsFilePath = () => `./plugins/${pluginName}/dist/stats.json`;
 
@@ -10,23 +11,40 @@ const toMiB = (value: number) => value / 1024 ** 2;
 const stringifyMiB = (value: ReturnType<typeof toMiB>): string =>
   `${value.toFixed(2)} MB`;
 
-const getParsedStatFile = () => {
+const getParsedStatFile = async (): Promise<any> => {
   const filePath = getStatsFilePath();
-  const statsFile = fs.readFileSync(filePath, 'utf-8');
-  return JSON.parse(statsFile);
+  return new Promise((resolve, reject) => {
+    const fileStream = fs.createReadStream(filePath);
+    const parser = JSONStream.parse('assets.*');
+    const assets: any[] = [];
+
+    fileStream.pipe(parser);
+
+    parser.on('data', (data) => {
+      assets.push(data);
+    });
+
+    parser.on('end', () => {
+      resolve({ assets });
+    });
+
+    parser.on('error', (error) => {
+      reject(error);
+    });
+  });
 };
 
-type BundleDataMap = Record<string, number>;
+type BundleDataMap = Record<string, string>;
 
-// [Valid Bundles, Violating Bunldes]
-type GetBundleInformation = () => [BundleDataMap, BundleDataMap];
+// [Valid Bundles, Violating Bundles]
+type GetBundleInformation = () => Promise<[BundleDataMap, BundleDataMap]>;
 
-const getBundleInformation: GetBundleInformation = () => {
-  const statsData = getParsedStatFile();
-  const validAssets = {};
-  const violatingAssets = {};
+const getBundleInformation: GetBundleInformation = async () => {
+  const statsData = await getParsedStatFile();
+  const validAssets: BundleDataMap = {};
+  const violatingAssets: BundleDataMap = {};
 
-  statsData.assets.forEach((asset) => {
+  statsData.assets.forEach((asset: { name: string; size: number }) => {
     const assetSize = toMiB(asset.size);
     const readableSize = stringifyMiB(assetSize);
     if (assetSize > MAX_ASSET_SIZE) {
@@ -39,8 +57,8 @@ const getBundleInformation: GetBundleInformation = () => {
   return [validAssets, violatingAssets];
 };
 
-const validateBuild = () => {
-  const [validAssets, violatingAssets] = getBundleInformation();
+const validateBuild = async () => {
+  const [validAssets, violatingAssets] = await getBundleInformation();
   if (Object.keys(violatingAssets).length > 0) {
     // eslint-disable-next-line no-console
     console.error('Assets are larger than expected', violatingAssets);

package.json

@@ -63,14 +63,15 @@
     "@openshift-console/dynamic-plugin-sdk-webpack": "1.1.0",
     "@openshift-console/plugin-shared": "^0.0.1",
     "@patternfly/patternfly": "5.0.2",
-    "@patternfly/react-charts": "7.1.0",
+    "@patternfly/react-charts": "7.3.0",
     "@patternfly/react-core": "5.1.0",
     "@patternfly/react-icons": "5.0.1",
     "@patternfly/react-table": "5.1.0",
     "@patternfly/react-tokens": "5.1.0",
     "@patternfly/react-topology": "5.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/react-dnd-html5-backend": "^3.0.2",
+    "JSONStream": "^1.3.5",
     "buffer": "^6.0.3",
     "cache-loader": "1.x",
     "circular-dependency-plugin": "5.x",

packages/shared/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "5.0.2",
-    "@patternfly/react-charts": "7.1.0",
+    "@patternfly/react-charts": "7.3.0",
     "@patternfly/react-core": "5.1.0",
     "@patternfly/react-icons": "5.0.1",
     "@patternfly/react-table": "5.1.0",