Updated Chart.js dependency

guide/results-viewer-react/package.json

@@ -29,8 +29,8 @@
   "homepage": "https://github.com/FamilySearch/pewpew/tree/master/lib/config-wasm#readme",
   "dependencies": {
     "@fs/hdr-histogram-wasm": "file:./lib/hdr-histogram-wasm",
-    "chart.js": "^3.9.1",
-    "chartjs-adapter-date-fns": "^2.0.1",
+    "chart.js": "~4.2.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.29.3",
     "file-saver": "^2.0.5",
     "immutability-helper": "^3.1.1",

guide/results-viewer-react/src/chartjs-adapter-date-fns.d.ts

@@ -0,0 +1,2 @@
+// https://stackoverflow.com/questions/72374653/typescript-types-for-chartjs-adapter-date-fns
+declare module "chartjs-adapter-date-fns";

guide/results-viewer-react/src/components/TestResults/charts.ts

@@ -1,4 +1,3 @@
-import "chartjs-adapter-date-fns";
 import {
   Chart,
   ChartDataset,
@@ -12,6 +11,7 @@ import {
   LinearScale,
   LogarithmicScale,
   PointElement,
+  ScatterDataPoint,
   TimeScale,
   Title,
   Tooltip
@@ -69,44 +69,41 @@ export function RTT (el: HTMLCanvasElement, dataPoints: DataPoint[]): Chart {
     const borderColor = colors[i % colors.length];
     const backgroundColor = borderColor + "46";
     let label: string;
-    let data: Chart.ChartPoint[];
-    // eslint-disable-next-line eqeqeq
-    if (type == "avg") {
+    // It's a ScatterDataPoint but thanks to chartjs-adapter-date-fns it will date Dates as well as numbers
+    let data: (Omit<ScatterDataPoint, "x"> & { x: Date | number })[];
+    if (type === "avg") {
       label = "Avg";
       data = dataPoints.map((dp) => ({
         x: dp.time,
         y: dp.rttHistogram.getTotalCount()
           ? Math.round(dp.rttHistogram.getMean()) / MICROS_TO_MS
           : NaN
       }));
-      // eslint-disable-next-line eqeqeq
-    } else if (type == "min") {
+    } else if (type === "min") {
       label = "Min";
       data = dataPoints.map((dp) => ({
         x: dp.time,
         y: dp.rttHistogram.getTotalCount()
           ? Number(dp.rttHistogram.getMinNonZeroValue()) / MICROS_TO_MS
           : NaN
       }));
-      // eslint-disable-next-line eqeqeq
-    } else if (type == "max") {
+    } else if (type === "max") {
       label = "Max";
       data = dataPoints.map((dp) => ({
         x: dp.time,
         y: dp.rttHistogram.getTotalCount()
           ? Number(dp.rttHistogram.getMaxValue()) / MICROS_TO_MS
           : NaN
       }));
-      // eslint-disable-next-line eqeqeq
-    } else if (type == "std") {
+    } else if (type === "std") {
       label = "Std Dev";
       data = dataPoints.map((dp) => ({
         x: dp.time,
         y: dp.rttHistogram.getTotalCount()
           ? Math.round(dp.rttHistogram.getStdDeviation()) / MICROS_TO_MS
           : NaN
       }));
-    } else if (typeof type == "number") {
+    } else if (typeof type === "number") {
       label = type + "th PCTL";
       data = dataPoints.map((dp) => ({
         x: dp.time,

guide/results-viewer-react/src/components/TestResults/index.tsx

@@ -84,6 +84,7 @@ export interface TestResultProps {
 }
 
 export interface TestResultState {
+  defaultMessage: string;
   /** Filters the results Data by a tag equalling this value. I.e. 'method', 'url', '_id' */
   summaryTagFilter: string;
   /** Filters the results Data by a summaryTagFilter's value containing this value */
@@ -155,8 +156,7 @@ const minMaxTime = (testResults: any) => {
 
   const startTime3: Date = new Date(startTime2);
   const endTime3: Date = new Date(endTime2);
-  // eslint-disable-next-line eqeqeq
-  const includeDateWithStart = startTime3.toLocaleDateString() == endTime3.toLocaleDateString();
+  const includeDateWithStart = startTime3.toLocaleDateString() === endTime3.toLocaleDateString();
   testTimes.startTime = dateToString(startTime3, includeDateWithStart);
   testTimes.endTime = dateToString(endTime3, false);
 
@@ -189,8 +189,12 @@ const freeHistograms = (resultsData: ParsedFileEntry[] | undefined, summaryData:
   for (const [bucketId, dataPoints] of oldData) {
     let counter = 0;
     for (const dataPoint of dataPoints) {
-      log(`Freeing histogram ${JSON.stringify(bucketId)}: ${counter++}`, LogLevel.DEBUG);
-      dataPoint.rttHistogram.free();
+      try {
+        log(`Freeing histogram ${JSON.stringify(bucketId)}: ${counter++}`, LogLevel.DEBUG);
+        dataPoint.rttHistogram.free();
+      } catch (error) {
+        log(`Freeing histogram ${JSON.stringify(bucketId)} failed: ${counter}`, LogLevel.WARN, error);
+      }
     }
   }
 };
@@ -280,7 +284,9 @@ const getSummaryData = ({
 };
 
 export const TestResults = ({ resultsText }: TestResultProps) => {
+  const defaultMessage = "Select Results File";
   const defaultState: TestResultState = {
+    defaultMessage,
     summaryTagFilter: "",
     summaryTagValueFilter: "",
     resultsData: undefined,
@@ -296,6 +302,9 @@ export const TestResults = ({ resultsText }: TestResultProps) => {
     setState((oldState: TestResultState) => ({ ...oldState, ...newState }));
 
   const updateResultsData = async (resultsText: string): Promise<void> => {
+    updateState({
+      defaultMessage: "Results Loading..."
+    });
     try {
       // if there are multiple jsons (new format), split them up and parse them separately
       const results = resultsText.replace(/}{/g, "}\n{")
@@ -324,6 +333,7 @@ export const TestResults = ({ resultsText }: TestResultProps) => {
 
       log("updateResultsData", LogLevel.DEBUG, { filteredData: filteredData?.length, resultsData: resultsData?.length, summaryData });
       updateState({
+        defaultMessage,
         resultsData,
         filteredData,
         summaryData,
@@ -333,6 +343,7 @@ export const TestResults = ({ resultsText }: TestResultProps) => {
     } catch (error) {
       log("Error parsing Data", LogLevel.ERROR, error);
       updateState({
+        defaultMessage,
         error: formatError(error)
       });
     }
@@ -376,6 +387,11 @@ export const TestResults = ({ resultsText }: TestResultProps) => {
     });
   };
 
+  useEffect(() => {
+    import("chartjs-adapter-date-fns")
+    .catch((error) => log("Could not load chartjs-adapter-date-fns import", LogLevel.ERROR, error));
+  }, []);
+
   useEffect(() => {
     updateResultsData(resultsText);
   }, [resultsText]);
@@ -422,7 +438,7 @@ export const TestResults = ({ resultsText }: TestResultProps) => {
           })}
         </TIMETAKEN>
       ) : (
-        <p>No Results Found</p>
+        <p>{state.defaultMessage}</p>
       )}
     </React.Fragment>
   );
@@ -562,8 +578,7 @@ const Endpoint = ({ bucketId, dataPoints }: EndpointProps) => {
         </H3>
         <UL>
           {Object.entries(bucketId).map(([key, value], idx) => {
-            // eslint-disable-next-line eqeqeq
-            if (key != "method" && key != "url") {
+            if (key !== "method" && key !== "url") {
               return (
                 <li key={idx}>
                   {key} - {value}

guide/results-viewer-react/src/components/TestResults/model.ts

@@ -4,7 +4,7 @@ type Check = [string, CheckType];
 
 // eslint-disable-next-line  @typescript-eslint/ban-types
 function isObject (o: unknown): o is object {
-  return typeof o == "object" && !!o;
+  return typeof o === "object" && !!o;
 }
 
 /**
@@ -172,7 +172,7 @@ function isStatusCounts (sc: unknown): sc is StatusCounts {
   // check that the keys can be parsed as a number and the values are numbers
   return Object.entries(sc).every(
     ([k, v]: [string, unknown]) =>
-      Number.parseInt(k, 10) > 0 && typeof v == "number"
+      Number.parseInt(k, 10) > 0 && typeof v === "number"
   );
 }
 
@@ -181,7 +181,7 @@ function isTestErrors (sc: unknown): sc is TestErrors {
     return false;
   }
   // check that the values are all numbers
-  return Object.values(sc).every((v: unknown) => typeof v == "number");
+  return Object.values(sc).every((v: unknown) => typeof v === "number");
 }
 
 export interface DataPointPreProcessed {

guide/results-viewer-react/src/components/YamlWriterForm/index.tsx

@@ -80,8 +80,7 @@ export interface YamlWriterFormState {
 }
 
 const nameReg = new RegExp("^[A-Za-z_-].*$");
-// eslint-disable-next-line no-useless-escape
-const valueReg = new RegExp("^[A-Za-z0-9_-\{\}\$].*$");
+const valueReg = new RegExp("^[A-Za-z0-9_-{}$].*$");
 
 const defaults = "default";
 type YamlWriterBooleanState = "default" | "filterHeaders" | "authenticated";