review communication loop

Author: zendive

src/api-monitor-cs-main.ts

@@ -1,18 +1,15 @@
 import { EMsg, windowListen, windowPost } from './api/communication.ts';
 import { IS_DEV } from './api/env.ts';
+import { TELEMETRY_FREQUENCY_1PS } from './api/const.ts';
+import { adjustTelemetryDelay, Timer } from './api/time.ts';
 import {
-  TELEMETRY_FREQUENCY_1PS,
-  TELEMETRY_FREQUENCY_30PS,
-} from './api/const.ts';
-import { Timer } from './api/time.ts';
-import {
-  wrapperOnEachSecond as onEachSecond,
+  onEachSecond,
   setSettings,
   cleanHistory,
   collectMetrics,
   runMediaCommand,
+  runTimerCommand,
 } from './wrapper/Wrapper.ts';
-import { ETimerType } from './wrapper/TimerWrapper.ts';
 
 const eachSecond = new Timer({ delay: 1e3, repetitive: true }, onEachSecond);
 const tick = new Timer(
@@ -22,18 +19,15 @@ const tick = new Timer(
 
     windowPost({
       msg: EMsg.TELEMETRY,
-      collectingStartTime: now,
+      timeOfCollection: now,
       telemetry: collectMetrics(),
     });
   }
 );
 
 windowListen((o) => {
   if (o.msg === EMsg.TELEMETRY_ACKNOWLEDGED) {
-    // adaptive update-frequency
-    const ackTrafficDuration = Date.now() - o.timeSent;
-    const newDelay = (o.trafficDuration + ackTrafficDuration) * 3;
-    tick.delay = Math.max(TELEMETRY_FREQUENCY_30PS, newDelay);
+    tick.delay = adjustTelemetryDelay(o.timeOfCollection);
   } else if (
     o.msg === EMsg.SETTINGS &&
     o.settings &&
@@ -49,12 +43,8 @@ windowListen((o) => {
   } else if (o.msg === EMsg.RESET_WRAPPER_HISTORY) {
     cleanHistory();
     !tick.isPending && tick.trigger();
-  } else if (o.msg === EMsg.CLEAR_TIMER_HANDLER) {
-    if (o.type === ETimerType.TIMEOUT) {
-      window.clearTimeout(o.handler);
-    } else {
-      window.clearInterval(o.handler);
-    }
+  } else if (o.msg === EMsg.TIMER_COMMAND) {
+    runTimerCommand(o.type, o.handler);
   } else if (o.msg === EMsg.MEDIA_COMMAND) {
     runMediaCommand(o.mediaId, o.cmd, o.property);
   }

src/api/communication.ts

@@ -105,7 +105,7 @@ export enum EMsg {
   TELEMETRY_ACKNOWLEDGED,
   MEDIA_COMMAND,
   RESET_WRAPPER_HISTORY,
-  CLEAR_TIMER_HANDLER,
+  TIMER_COMMAND,
 }
 
 export interface TMsgStartObserve {
@@ -117,8 +117,8 @@ export interface TMsgStopObserve {
 export interface TMsgResetHistory {
   msg: EMsg.RESET_WRAPPER_HISTORY;
 }
-export interface TMsgClearHandler {
-  msg: EMsg.CLEAR_TIMER_HANDLER;
+export interface TMsgTimerCommand {
+  msg: EMsg.TIMER_COMMAND;
   type: ETimerType;
   handler: number;
 }
@@ -127,13 +127,12 @@ export interface TMsgLoaded {
 }
 export interface TMsgTelemetry {
   msg: EMsg.TELEMETRY;
-  collectingStartTime: number;
+  timeOfCollection: number;
   telemetry: TTelemetry;
 }
 export interface TMsgTelemetryAcknowledged {
   msg: EMsg.TELEMETRY_ACKNOWLEDGED;
-  trafficDuration: number;
-  timeSent: number;
+  timeOfCollection: number;
 }
 export interface TMsgSettings {
   msg: EMsg.SETTINGS;
@@ -152,6 +151,6 @@ export type TMsgOptions =
   | TMsgStopObserve
   | TMsgLoaded
   | TMsgResetHistory
-  | TMsgClearHandler
+  | TMsgTimerCommand
   | TMsgSettings
   | TMsgMediaCommand;

src/api/const.ts

@@ -4,7 +4,7 @@ export const ERRORS_IGNORED = [
 ];
 export const TELEMETRY_FREQUENCY_30PS = 33.3333333333; // ms
 export const TELEMETRY_FREQUENCY_1PS = 1000; // ms
-export const MAX_TRAFFIC_DURATION_BEFORE_AUTOPAUSE = 2e3; // ms
+export const MAX_SENDING_TIME_LAG = 2e3; // ms
 export const FRAME_1of60 = 0.0166666666667; // ms
 export const VARIABLE_ANIMATION_THROTTLE = 3500; // eye blinking average frequency
 export const CALLED_ABORTED_TOOLTIP = '<called>-<aborted>/<abort-locations>';

src/api/time.ts

@@ -3,6 +3,7 @@ import {
   clearTimeout,
   requestAnimationFrame,
   cancelAnimationFrame,
+  TELEMETRY_FREQUENCY_30PS,
 } from './const.ts';
 
 export function callingOnce<T extends (...args: any[]) => any>(
@@ -223,3 +224,12 @@ export function trim2microsecond(ms: any) {
 export function msToHms(delay: number | unknown): string | undefined {
   return delay && Number(delay) > 10e3 ? Stopper.toString(delay) : undefined;
 }
+
+const TICK_TIME_LAG_SCALAR = 3;
+
+export function adjustTelemetryDelay(timeOfCollection: number) {
+  const timeLag = Date.now() - timeOfCollection;
+  const newDelay = timeLag * TICK_TIME_LAG_SCALAR;
+
+  return Math.max(TELEMETRY_FREQUENCY_30PS, newDelay);
+}

src/view/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { runtimeListen, portPost, EMsg } from '../api/communication.ts';
   import { IS_DEV } from '../api/env.ts';
-  import { MAX_TRAFFIC_DURATION_BEFORE_AUTOPAUSE } from '../api/const.ts';
+  import { MAX_SENDING_TIME_LAG } from '../api/const.ts';
   import { getSettings, setSettings } from '../api/settings.ts';
   import type { TTelemetry } from '../wrapper/Wrapper.ts';
   import { onMount } from 'svelte';
@@ -35,19 +35,18 @@
     } else if (o.msg === EMsg.TELEMETRY) {
       telemetry = o.telemetry;
 
-      const now = Date.now();
-      const trafficDuration = now - o.collectingStartTime;
+      const shouldPause =
+        Date.now() - o.timeOfCollection > MAX_SENDING_TIME_LAG;
 
-      if (trafficDuration > MAX_TRAFFIC_DURATION_BEFORE_AUTOPAUSE) {
+      if (shouldPause) {
         if (!paused) {
           onTogglePause();
           autopauseAlertEl?.show();
         }
       } else {
         portPost({
           msg: EMsg.TELEMETRY_ACKNOWLEDGED,
-          trafficDuration,
-          timeSent: now,
+          timeOfCollection: o.timeOfCollection,
         });
       }
 

src/view/components/ActiveTimers.svelte

@@ -13,7 +13,7 @@
 
   function onRemoveHandler(metric: TOnlineTimerMetrics) {
     portPost({
-      msg: EMsg.CLEAR_TIMER_HANDLER,
+      msg: EMsg.TIMER_COMMAND,
       type: metric.type,
       handler: metric.handler,
     });

src/wrapper/TimerWrapper.ts

@@ -466,6 +466,14 @@ export class TimerWrapper {
     };
   }
 
+  runCommand(type: ETimerType, handler: number) {
+    if (type === ETimerType.TIMEOUT) {
+      window.clearTimeout(handler);
+    } else {
+      window.clearInterval(handler);
+    }
+  }
+
   cleanHistory() {
     this.setTimeoutHistory.clear();
     this.clearTimeoutHistory.clear();

src/wrapper/TraceUtil.ts

@@ -105,7 +105,7 @@ export class TraceUtil {
     const stack = stackString.split(REGEX_STACKTRACE_SPLIT) || [];
     const rv: TTrace[] = [];
 
-    // loop from the end, excluding error name at [0] and self trace at [1|x]
+    // loop from the end, excluding error name at [0] and self trace at [1|n]
     for (let n = stack.length - 1; n > 1; n--) {
       const parsed = this.#parseTraceRow(stack[n]);
 
@@ -134,7 +134,7 @@ export class TraceUtil {
   #getShortTrace(stackString: string): TTrace | null {
     const stack = stackString.split(REGEX_STACKTRACE_SPLIT) || [];
 
-    // loop from the start, excluding error name at [0] and self trace at [1|x]
+    // loop from the start, excluding error name at [0] and self trace at [1|n]
     for (let n = 2, N = stack.length; n < N; n++) {
       const parsed = this.#parseTraceRow(stack[n]);
 

src/wrapper/Wrapper.ts

@@ -83,7 +83,7 @@ export function setSettings(settings: TSettings) {
   wrapApis();
 }
 
-export function wrapperOnEachSecond() {
+export function onEachSecond() {
   apiMedia.meetMedia();
   if (
     panels.requestAnimationFrame.wrap &&
@@ -128,6 +128,12 @@ export function runMediaCommand(
   apiMedia.runCommand(...args);
 }
 
+export function runTimerCommand(
+  ...args: Parameters<TimerWrapper['runCommand']>
+) {
+  apiTimer.runCommand(...args);
+}
+
 export function cleanHistory() {
   apiEval.cleanHistory();
   apiTimer.cleanHistory();