build(srcts): Turn on TypeScript strict mode

AGENTS.md

@@ -55,6 +55,6 @@ Read it before working in `R/` or `srcts/`.
 
 ## Conventions
 
-- Source is TypeScript (`tsconfig.json`, `strict` off for now). Lint is eslint 10 + typescript-eslint + prettier 3 (`eslint.config.mjs`, `prettier.config.js`).
+- Source is TypeScript (`tsconfig.json`, `strict` on). Lint is eslint 10 + typescript-eslint + prettier 3 (`eslint.config.mjs`, `prettier.config.js`).
 - Add a NEWS.md entry for user-facing changes (CONTRIBUTING.md).
 - New top-level files need an entry in `.Rbuildignore`, or R CMD check will warn.

memory-bank/jsBuild.md

@@ -31,7 +31,7 @@ blank lines.
 | File | Role |
 | --- | --- |
 | `package.json` | npm scripts, `pre-commit` / `lint-staged` hook config, dependencies |
-| `tsconfig.json` | `tsc` settings: `noEmit`, `target` es2021, `moduleResolution` bundler, `strict` off |
+| `tsconfig.json` | `tsc` settings: `noEmit`, `target` es2021, `moduleResolution` bundler, `strict` on |
 | `srcts/modules.d.ts` | `declare module` for untyped `cytoscape` / `cytoscape-dagre`, and the `window` globals |
 | `srcts/cyto/cytoFlowType.ts` | Hand-written types for the parts of cytoscape the app uses |
 | `eslint.config.mjs` / `prettier.config.js` | Lint and format rules |
@@ -68,9 +68,9 @@ blank lines.
 - `typescript` is pinned to `~6.0`. TypeScript 7 (the Go port) does not offer
   the JS API that `typescript-eslint` needs, and `typescript-eslint` 8 lists
   `typescript <6.1` as its peer.
-- `strict` is off. `npx tsc -p . --strict` reports about 40 errors, mostly
-  missing null checks, implicit `any`, and class fields that are set outside
-  the constructor. Fix those in their own change.
+- `strict` is on. `GraphAtStep` fields filled by `initStepInfo()` and
+  `updateFinalFilteredGraph()` (called from the constructor) are marked with
+  `!`. `no-explicit-any` is still off, so `any` still skips checks.
 - cytoscape 3.15 (the locked version) has no bundled types, so it is declared
   as an untyped module and the app uses the hand-written types in
   `cyto/cytoFlowType.ts`. Newer cytoscape ships `index.d.ts`, but upgrading it

memory-bank/viewerUi.md

@@ -24,7 +24,7 @@ Key files:
 | `srcts/layout/progressBar.ts` | Timeline fill, ticks, click/drag to seek |
 | `srcts/layout/logEntry.ts` | Step / time / session / status text and the raw JSON panel |
 | `srcts/cyto/cytoOn.ts` | Mouse events on the graph (hover, tap, double click) |
-| `srcts/utils/queryString.ts`, `srcts/utils/shinytest.ts` | Read `?test=1` |
+| `srcts/utils/shinytest.ts` | Read `?test=1` |
 | `inst/reactlog/reactlogAsset/` | `reactlog.css`, font CSS, `images/*.svg`, built `reactlog.js` |
 
 ## The HTML template
@@ -157,7 +157,7 @@ Node time labels are separate: `rlog.displayTimeOnNodes` is true unless `window.
 
 ## Query params and test mode
 
-`parseQuery()` (`srcts/utils/queryString.ts`) turns `window.location.search` into an object. The only key read is `test`: `inTestMode = parseQuery().test === "1"` (`srcts/utils/shinytest.ts`). In test mode:
+`srcts/utils/shinytest.ts` reads the `test` query parameter with `URLSearchParams`: `inTestMode` is true when the URL has `?test=1`. In test mode:
 
 - the header time and session show `(shinytest)` (`logEntry.ts`),
 - `Node.calculationTimeStr` returns `(shinytest)`.

srcts/cyto/cytoOn.ts

@@ -77,7 +77,8 @@ let onMouseOver = function (cyto: CytoscapeType) {
 };
 
 let onClick = function (cyto: CytoscapeType) {
-  let cytoClickedBefore, cytoClickedTimeout;
+  let cytoClickedBefore: CytoEvent["target"] | null = null;
+  let cytoClickedTimeout: ReturnType<typeof setTimeout> | undefined;
 
   return function (evt: CytoEvent) {
     // remove focus on search

srcts/graph/Graph.ts

@@ -14,7 +14,6 @@ import { GhostEdge } from "./GhostEdge";
 import { HoverStatus } from "./HoverStatus";
 import { expectPrevStatus } from "./StatusArr";
 
-import { flatMap } from "../utils/ArrayHelper";
 import console from "../utils/console";
 
 import type { CytoscapeType } from "../cyto/cytoFlowType";
@@ -106,7 +105,7 @@ class Graph {
 
       let reactId = data.reactId;
       let depOnReactId = data.depOnReactId;
-      let hasMatchingEdge = function (edges) {
+      let hasMatchingEdge = function (edges: Array<Edge | GhostEdge>) {
         return _some(edges, function (edge) {
           if (edge.reactId === reactId && edge.depOnReactId === depOnReactId) {
             return true;
@@ -148,7 +147,7 @@ class Graph {
       // highlight all the edges (and ghost edges) that have the same source and target
       let reactId = data.reactId;
       let depOnReactId = data.depOnReactId;
-      let selectMatchingEdges = function (edge) {
+      let selectMatchingEdges = function (edge: Edge | GhostEdge) {
         if (edge.reactId === reactId && edge.depOnReactId === depOnReactId) {
           onFn(edge);
         }
@@ -239,15 +238,15 @@ class Graph {
       let originalReactId = reactId;
       let seenMap = new Set<ReactIdType>();
       let reactIdArr = [reactId];
-      while (reactIdArr.length > 0) {
-        reactId = reactIdArr.pop();
-        if (!seenMap.has(reactId)) {
-          this.parentNodeIds(reactId).forEach(function (parentReactId) {
+      let curId: ReactIdType | undefined;
+      while ((curId = reactIdArr.pop()) !== undefined) {
+        if (!seenMap.has(curId)) {
+          this.parentNodeIds(curId).forEach(function (parentReactId) {
             if (parentReactId) {
               reactIdArr.push(parentReactId);
             }
           });
-          seenMap.add(reactId);
+          seenMap.add(curId);
         }
       }
       seenMap.delete(originalReactId);
@@ -260,11 +259,11 @@ class Graph {
     let originalReactId = reactId;
     let seenMap = new Set<ReactIdType>();
     let reactIdArr = [reactId];
-    while (reactIdArr.length > 0) {
-      reactId = reactIdArr.pop();
-      if (!seenMap.has(reactId)) {
-        reactIdArr = reactIdArr.concat(this.childrenNodeIds(reactId));
-        seenMap.add(reactId);
+    let curId: ReactIdType | undefined;
+    while ((curId = reactIdArr.pop()) !== undefined) {
+      if (!seenMap.has(curId)) {
+        reactIdArr = reactIdArr.concat(this.childrenNodeIds(curId));
+        seenMap.add(curId);
       }
     }
     seenMap.delete(originalReactId);
@@ -294,23 +293,23 @@ class Graph {
   familyTreeNodeIdsForDatas(datas: Array<SomeGraphData>): Array<ReactIdType> {
     let self = this;
     return _union(
-      flatMap(datas, function (data) {
+      datas.flatMap(function (data) {
         return self.familyTreeNodeIds(data);
       })
     );
   }
   decendentNodeIdsForDatas(datas: Array<SomeGraphData>): Array<ReactIdType> {
     let self = this;
     return _union(
-      flatMap(datas, function (data: SomeGraphData) {
+      datas.flatMap(function (data) {
         return self.decendentNodeIds(data);
       })
     );
   }
   ancestorNodeIdsForDatas(datas: Array<SomeGraphData>): Array<ReactIdType> {
     let self = this;
     return _union(
-      flatMap(datas, function (data) {
+      datas.flatMap(function (data) {
         return self.ancestorNodeIds(data);
       })
     );
@@ -475,7 +474,8 @@ class Graph {
         node = this.nodes.get(data.reactId);
         switch (data.action) {
           case LogStates.exit: {
-            let activeEnterNode = this.nodes.get(_last(this.activeNodeEnter));
+            lastNodeId = _last(this.activeNodeEnter);
+            let activeEnterNode = lastNodeId && this.nodes.get(lastNodeId);
             if (activeEnterNode) {
               activeEnterNode.enterStatus.reset();
             }
@@ -491,9 +491,8 @@ class Graph {
           }
           case LogStates.invalidateEnd: {
             // turn off the previously active node
-            let curActiveNode = this.nodes.get(
-              _last(this.activeInvalidateEnter)
-            );
+            lastNodeId = _last(this.activeInvalidateEnter);
+            let curActiveNode = lastNodeId && this.nodes.get(lastNodeId);
             if (curActiveNode) {
               curActiveNode.invalidateStatus.resetActive();
             }
@@ -572,7 +571,7 @@ class Graph {
 
         if (edge) {
           node = this.nodes.get(edge.reactId);
-          if (node && node.statusLast().action === LogStates.isolateEnter) {
+          if (node && node.statusLast()?.action === LogStates.isolateEnter) {
             edge.status = "isolate";
           } else {
             edge.status = "normal";

srcts/graph/GraphAtStep.ts

@@ -47,22 +47,22 @@ class GraphAtStep {
   hoverData: SomeGraphData | null | undefined;
   stickyDatas: Array<SomeGraphData>;
 
-  finalFilteredGraph: Graph;
+  finalFilteredGraph!: Graph;
   finalCompleteGraph: Graph;
   finalCyto: any;
 
   cytoLayout: any;
 
-  steps: Array<number>;
-  stepsVisible: Array<number>;
-  filteredStepsVisible: Array<number>;
-  stepsAsyncStart: Array<number>;
-  stepsAsyncStop: Array<number>;
-  stepsIdle: Array<number>;
-  stepsOutputCalc: Array<number>;
-  stepsUserMark: Array<number>;
-  minStep: number;
-  maxStep: number;
+  steps!: Array<number>;
+  stepsVisible!: Array<number>;
+  filteredStepsVisible!: Array<number>;
+  stepsAsyncStart!: Array<number>;
+  stepsAsyncStop!: Array<number>;
+  stepsIdle!: Array<number>;
+  stepsOutputCalc!: Array<number>;
+  stepsUserMark!: Array<number>;
+  minStep!: number;
+  maxStep!: number;
 
   constructor(log: LogType) {
     this.originalLog = log;
@@ -557,7 +557,7 @@ class GraphAtStep {
     let nodesLRB = cyNodes.diff(graphNodes);
     // .removeStyle()
 
-    let onLayoutReady = [];
+    let onLayoutReady: Array<() => void> = [];
     let someNodeHasNewLabel = false;
 
     // enter visible nodes

srcts/graph/Node.ts

@@ -82,7 +82,7 @@ class Node {
     }
   }
 
-  get calculationTimeStr(): string {
+  get calculationTimeStr(): string | null {
     if (_isNil(this.calculationTime)) {
       return null;
     }
@@ -115,7 +115,7 @@ class Node {
     this.statusArr.add(logEntry as StatusEntry);
     return this.statusArr;
   }
-  statusRemove(logEntry: LogEntryAnyType): StatusEntry {
+  statusRemove(logEntry: LogEntryAnyType): StatusEntry | undefined {
     if (logEntry.action === LogStates.exit) {
       let startEntryTime = this.calculationStartMap.get(logEntry.ctxId);
       if (!_isNil(startEntryTime)) {
@@ -125,7 +125,7 @@ class Node {
     }
     return this.statusArr.remove();
   }
-  statusLast(): StatusEntry {
+  statusLast(): StatusEntry | undefined {
     return this.statusArr.last();
   }
   get inEnter(): boolean {

srcts/graph/StatusArr.ts

@@ -11,7 +11,7 @@ class StatusArr {
   constructor(statusArr: StatusArr | Array<StatusEntry> = []) {
     if (statusArr instanceof StatusArr) {
       this.statusArr = _cloneDeep(statusArr.statusArr);
-    } else if (Array.isArray(statusArr)) {
+    } else {
       this.statusArr = statusArr;
     }
   }
@@ -21,10 +21,10 @@ class StatusArr {
   add(obj: StatusEntry) {
     return this.statusArr.push(obj);
   }
-  remove(): StatusEntry {
+  remove(): StatusEntry | undefined {
     return this.statusArr.pop();
   }
-  last(): StatusEntry {
+  last(): StatusEntry | undefined {
     return _last(this.statusArr);
   }
   containsStatus(status: string) {
@@ -46,15 +46,15 @@ type StatusEntry = {
 
 let expectPrevStatus = function (
   curStatus: StatusEntry,
-  prevStatus: StatusEntry,
+  prevStatus: StatusEntry | undefined,
   expectedAction: string
 ) {
-  function onError(msg: string) {
+  function onError(msg: string): never {
     console.error("curStatus: ", curStatus);
     console.error("prevStatus: ", prevStatus);
     throw msg;
   }
-  if (prevStatus.action !== expectedAction) {
+  if (prevStatus?.action !== expectedAction) {
     onError(`prior node status does not have "${expectedAction}" status`);
   }
   if (prevStatus.ctxId !== curStatus.ctxId) {

srcts/layout/logEntry.ts

@@ -79,7 +79,7 @@ let updateLogEntry = function (): void {
     }
   }
 
-  let stepDisplayValPadding = function (i) {
+  let stepDisplayValPadding = function (i: number) {
     return `${i}`.padStart(`${logInfo.logLength}`.length, " ");
   };
 

srcts/layout/progressBar.ts

@@ -44,7 +44,7 @@ let updateFromProgressBar = function (e: JQuery.TriggeredEvent): void {
 
   let timeline = $(e.currentTarget)[0] as HTMLElement;
   // pixels from the left edge of the timeline
-  let pos = e.pageX - $(timeline).offset().left;
+  let pos = originalEvent.clientX - timeline.getBoundingClientRect().left;
 
   let width = timeline.offsetWidth; // width in pixels
 

srcts/updateGraph/searchString.ts

@@ -33,7 +33,7 @@ let searchStringWith = function (str: string, exact: boolean = false) {
   }
   // escape the string
   // https://stackoverflow.com/a/17606289
-  let escapeRegExp = function (str) {
+  let escapeRegExp = function (str: string) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
   };
   let pattern = escapeRegExp(str);
@@ -63,7 +63,7 @@ let searchStringWithData = function (obj: Node | Edge | GhostEdge) {
 let searchStringContainer = function (searchElement_: JQuery) {
   searchElement = searchElement_;
   searchElement.on("input", function (e) {
-    searchStringWith($(e.target).val().toString());
+    searchStringWith(`${$(e.target).val() ?? ""}`);
   });
 };
 

srcts/utils/shinytest.ts

@@ -1,6 +1,5 @@
-import { parseQuery } from "./queryString";
-
-let inTestMode = parseQuery().test === "1";
+let inTestMode =
+  new URLSearchParams(window.location.search).get("test") === "1";
 
 const shinytest = "(shinytest)";
 

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "bundler",
     "lib": ["es2021", "dom"],
     "types": ["jquery"],
-    "strict": false,
+    "strict": true,
     "noEmit": true,
     "isolatedModules": true,
     "esModuleInterop": true