chore(ts): Type the graph, lasso, and some rendering code (#788)

chanzuckerberg · Feb 27, 2024 · 91ef413 · 91ef413
1 parent 67502f6
commit 91ef413
Show file tree

Hide file tree

Showing 13 changed files with 618 additions and 689 deletions.
diff --git a/client/__tests__/e2e/screenshot_env.js b/client/__tests__/e2e/screenshot_env.js
diff --git a/client/__tests__/e2e/takeScreenshot.js b/client/__tests__/e2e/takeScreenshot.js
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -127,7 +127,7 @@
     "@storybook/react-webpack5": "^7.6.12",
     "@storybook/server-webpack5": "^7.6.12",
     "@storybook/test": "^7.6.12",
-    "@types/d3": "^7.0.0",
+    "@types/d3": "^4.0.0",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/flatbuffers": "^1.10.0",
     "@types/is-number": "^7.0.1",

diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx
@@ -83,8 +83,6 @@ class App extends React.Component<Props> {
                       </Controls>
                       <Legend />
                       <Graph
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- FIXME: added to solve linting error with ts-ignore
-                        // @ts-ignore FIXME: Type '{ key: any; viewportRef: any; }' is not assi... Remove this comment to see the full error message
                         viewportRef={viewportRef}
                         key={graphRenderCounter}
                       />

diff --git a/client/src/components/graph/drawPointsRegl.ts b/client/src/components/graph/drawPointsRegl.ts
@@ -1,7 +1,18 @@
+import { Regl } from "regl";
 import { glPointFlags, glPointSize } from "../../util/glHelpers";
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-export default function drawPointsRegl(regl: any) {
+interface ReglProps {
+  position: Float32Array;
+  color: Float32Array;
+  flag: Float32Array;
+  distance: number;
+  projView: number[];
+  nPoints: number;
+  minViewportDimension: number;
+  count: number;
+}
+
+export default function drawPointsRegl(regl: Regl) {
   return regl({
     vert: `
     precision mediump float;
@@ -53,19 +64,21 @@ export default function drawPointsRegl(regl: any) {
     }`,
 
     attributes: {
-      position: regl.prop("position"),
-      color: regl.prop("color"),
-      flag: regl.prop("flag"),
+      position: regl.prop<ReglProps, "position">("position"),
+      color: regl.prop<ReglProps, "color">("color"),
+      flag: regl.prop<ReglProps, "flag">("flag"),
     },
 
     uniforms: {
-      distance: regl.prop("distance"),
-      projView: regl.prop("projView"),
-      nPoints: regl.prop("nPoints"),
-      minViewportDimension: regl.prop("minViewportDimension"),
+      distance: regl.prop<ReglProps, "distance">("distance"),
+      projView: regl.prop<ReglProps, "projView">("projView"),
+      nPoints: regl.prop<ReglProps, "nPoints">("nPoints"),
+      minViewportDimension: regl.prop<ReglProps, "minViewportDimension">(
+        "minViewportDimension"
+      ),
     },
 
-    count: regl.prop("count"),
+    count: regl.prop<ReglProps, "count">("count"),
 
     primitive: "points",