add timing instrumentation

debugging section extended with a timings button so the times of each of the expensive steps can be seen.
andymchugh · Feb 24, 2024 · 582000b · 582000b
1 parent db9a441
commit 582000b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 28 deletions.
diff --git a/src/components/DebuggingEditor.tsx b/src/components/DebuggingEditor.tsx
@@ -63,6 +63,12 @@ export function displayMappingsInner(panelConfig: PanelConfig, svgHolder: SvgHol
   console.log('Debugging Mappings: unmapped svg ids:', unmappedSvgIds);
 }
 
+function displayTimings(context: any, onChange: any) {
+  const ctrs = {...context.options.debuggingCtr};
+  ctrs.timingsCtr = (ctrs.timingsCtr || 0) + 1;
+  onChange(ctrs);
+}
+
 function displayColors(context: any, onChange: any) {
   const ctrs = {...context.options.debuggingCtr};
   ctrs.colorsCtr = (ctrs.colorsCtr || 0) + 1;
@@ -105,6 +111,7 @@ export const DebuggingEditor = ({context, onChange}: StandardEditorProps<number>
       <Button onClick={() => displayUnits()}>Units</Button>
       <Button onClick={() => displayColors(context, onChange)}>Colors</Button>
       <Button onClick={() => displaySvg(context, onChange)}>SVG</Button>
+      <Button onClick={() => displayTimings(context, onChange)}>Timings</Button>
     </div>
   </div>
 };

diff --git a/src/components/FlowPanel.tsx b/src/components/FlowPanel.tsx
@@ -74,6 +74,22 @@ function clickHandlerFactory(elementLinks: Map<string, Link>) {
   }
 }
 
+function wrapperTimer(label: string, fn: Function) {
+  return function(...args: any[]) {
+    const start = performance.now();
+    const fnResult = fn(...args);
+    const delta = performance.now() - start;
+    console.log(`Debugging time: ${label}: ${delta.toFixed(3)} ms`);
+    return fnResult;
+  };
+}
+
+function wrapperPassThrough(label: string, fn: Function) {
+  return function(...args: any[]) {
+    return fn(...args);
+   };
+}
+
 export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZone }) => {
   //---------------------------------------------------------------------------
   // State for 'load -> init -> update' startup phasing
@@ -127,24 +143,57 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
   //---------------------------------------------------------------------------
   // Interpolate time-series data
 
+  const instrument = options.debuggingCtr.timingsCtr && (options.debuggingCtr.timingsCtr !== debuggingCtrRef.current.timingsCtr) ? wrapperTimer : wrapperPassThrough;
   const templateSrv = getTemplateSrv();
   const timeMin = Number(templateSrv.replace("${__from}"));
   const timeMax = Number(templateSrv.replace("${__to}"));
 
-  const dataFrames = data.series ? data.series.map((item) => toDataFrame(item)) : [];
-  let tsData = seriesTransform(dataFrames, timeMin, timeMax);
+  const dataConverter = function(arr: any[]) { return arr.map((item: any) => toDataFrame(item)) };
+  const dataFrames = instrument('toDataFrame', dataConverter)(data.series || []);
+  let tsData = instrument('transform', seriesTransform)(dataFrames, timeMin, timeMax);
 
   if (options.testDataEnabled) {
-    seriesExtend(tsData, timeMin, timeMax);
+    instrument('seriesExtend', seriesExtend)(tsData, timeMin, timeMax);
   }
 
-  seriesInterpolate(tsData, timeSliderScalarRef.current);
+  instrument('seriesInterpolate', seriesInterpolate)(tsData, timeSliderScalarRef.current);
+
+  //---------------------------------------------------------------------------
+  // Update the SVG Attributes with the interpolated time-series data 
+
+  let svgHolder = svgHolderRef.current;
+  if (svgHolder) {
+    // Snapshot the monitored variable states
+    const variableValues = svgHolder.attribs.variableValues;
+    templateSrv.getVariables().forEach((variable: any) => {
+      try {
+        if (typeof variableValues.get(variable.id) !== 'undefined') {
+          variableValues.set(variable.id, variable.current.value);
+        }
+      }
+      catch (err) {
+        console.log('Error occured accessing variable', variable, ', error =', err);
+      }
+    });
+
+    // Update the svg with current time-series and variable settings
+    instrument('svgUpdate', svgUpdate)(svgHolder, tsData);
+  }
+  const svgElement = (svgHolder ? svgHolder.doc : svgDocBlankRef.current).childNodes[0] as HTMLElement;
 
   //---------------------------------------------------------------------------
   // Debugging data exports
 
   useEffect(() => {
     if (svgHolderRef.current && debuggingCtrRef.current) {
+      if (options.debuggingCtr.timingsCtr) {
+        if (options.debuggingCtr.timingsCtr !== debuggingCtrRef.current.timingsCtr) {
+          // The ctr delta was detected upstream and the timings enabled for this pass
+          // via the instrument function. Here we just reset the timers.
+          debuggingCtrRef.current.timingsCtr = options.debuggingCtr.timingsCtr;
+        }
+      }
+
       if (options.debuggingCtr.colorsCtr) {
         if (options.debuggingCtr.colorsCtr !== debuggingCtrRef.current.colorsCtr) {
           debuggingCtrRef.current.colorsCtr = options.debuggingCtr.colorsCtr;
@@ -172,30 +221,7 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
         }
       }
     }
-  }, [options.debuggingCtr, data.series, tsData, panelConfig]);
-
-  //---------------------------------------------------------------------------
-  // Update the SVG Attributes with the interpolated time-series data 
-
-  let svgHolder = svgHolderRef.current;
-  if (svgHolder) {
-    // Snapshot the monitored variable states
-    const variableValues = svgHolder.attribs.variableValues;
-    templateSrv.getVariables().forEach((variable: any) => {
-      try {
-        if (typeof variableValues.get(variable.id) !== 'undefined') {
-          variableValues.set(variable.id, variable.current.value);
-        }
-      }
-      catch (err) {
-        console.log('Error occured accessing variable', variable, ', error =', err);
-      }
-    });
-
-    // Update the svg with current time-series and variable settings
-    svgUpdate(svgHolder, tsData);
-  }
-  const svgElement = (svgHolder ? svgHolder.doc : svgDocBlankRef.current).childNodes[0] as HTMLElement;
+  }, [options.debuggingCtr, data.series, tsData, svgElement.outerHTML, panelConfig]);
 
   //---------------------------------------------------------------------------
   // TimeSlider

diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,5 @@
 export type DebuggingCtrs = {
+  timingsCtr: number;
   colorsCtr: number;
   mappingsCtr: number;
   dataCtr: number;