Resolve all tsc errors

.gitignore

@@ -42,3 +42,4 @@ gens/static/css/*
 !gens/static/css/.gitkeep
 *.min.css
 *.min.js
+*.map

CHANGELOG.md

@@ -15,6 +15,7 @@ About changelog [here](https://keepachangelog.com/en/1.0.0/)
  - Switched from JS to TS and updated required parts of the build chain.
 
 ### Fixed
+ - Resolved all type errors from tsc
  - Initial type hints added to command and db modules
 
 ## 3.0.1

assets/js/constants.ts

@@ -0,0 +1,9 @@
+// FIXME: Move all UI style variables here
+export const COLORS = {
+    "lightgray": "#e5e5e5"
+}
+
+export const FONTSIZES = {
+    "small": 10,
+    "medium": 18
+}

assets/js/draw/graph.ts

@@ -1,10 +1,22 @@
 // graph related objects
+import { COLORS, FONTSIZES } from "../constants";
 import { drawRect, drawLine, drawRotatedText, drawText } from "./shapes";
 
 // Draws vertical tick marks for selected values between
 // xStart and xEnd with step length.
 // The amplitude scales the values to drawing size
-export function drawVerticalTicks(
+export function drawVerticalTicks({
+  ctx,
+  renderX,
+  y,
+  xStart,
+  xEnd,
+  xoStart,
+  xoEnd,
+  width,
+  yMargin,
+  titleColor,
+}:{
   ctx: CanvasRenderingContext2D,
   renderX: number,
   y: number,
@@ -15,7 +27,7 @@ export function drawVerticalTicks(
   width: number,
   yMargin: number,
   titleColor: string,
-) {
+} ) {
   const lineThickness = 1;
   const lineWidth = 5;
   const regionSize = xEnd - xStart;
@@ -39,15 +51,15 @@ export function drawVerticalTicks(
     const value = numberWithCommas(step.toFixed(0));
 
     // Draw text and ticks only for the leftmost box
-    drawRotatedText(
+    drawRotatedText({
       ctx,
-      value,
-      10,
-      renderX + xStep + 8,
-      y - value.length - 3 * yMargin,
-      -Math.PI / 4,
-      titleColor,
-    );
+      text: value,
+      textSize: FONTSIZES.small,
+      posx: renderX + xStep + 8,
+      posy: y - value.length - 3 * yMargin,
+      rotDegrees: -Math.PI / 4,
+      color: titleColor,
+    });
 
     // Draw tick line
     drawLine({
@@ -66,15 +78,27 @@ export function drawVerticalTicks(
 // yStart and yEnd with step length.
 // The amplitude scales the values to drawing size
 export function drawGraphLines(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  yStart: number,
-  yEnd: number,
-  stepLength: number,
-  yMargin: number,
-  width: number,
-  height: number,
+  {
+    ctx,
+    x,
+    y,
+    yStart,
+    yEnd,
+    stepLength,
+    yMargin,
+    width,
+    height,
+  }: {
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    yStart: number,
+    yEnd: number,
+    stepLength: number,
+    yMargin: number,
+    width: number,
+    height: number,
+  } 
 ) {
   const ampl = (height - 2 * yMargin) / (yStart - yEnd); // Amplitude for scaling y-axis to fill whole height
   const lineThickness = 1;
@@ -88,13 +112,13 @@ export function drawGraphLines(
       y: yPos,
       x2: x + width - 2 * lineThickness,
       y2: yPos,
-      color: "#e5e5e5",
+      color: COLORS.lightgray,
     });
   }
 }
 
 // Creates a graph for one chromosome data type
-export function createGraph(
+export function createGraph({
   ctx,
   x,
   y,
@@ -106,8 +130,21 @@ export function createGraph(
   step,
   addTicks,
   color = "black",
-  open,
-) {
+  open = false,
+}: {
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  yMargin: number,
+  yStart: number,
+  yEnd: number,
+  step: number,
+  addTicks: boolean,
+  color?: string,
+  open?: boolean
+}) {
   // Draw tick marks
   if (addTicks) {
     drawTicks(
@@ -153,7 +190,6 @@ function drawTicks(
       x: x - lineWidth,
       y: y + (yStart - step) * ampl + 2.2,
       text: step.toFixed(1),
-      textSize: 10,
       align: "right",
     });
 

assets/js/draw/shapes.ts

@@ -4,9 +4,11 @@
 export function drawPoints({
   ctx,
   data,
+  color, // FIXME: Currently not used?
 }: {
   ctx: CanvasRenderingContext2D;
   data: number[];
+  color: string,
 }) {
   ctx.fillStyle = "#000";
   for (let i = 0; i < data.length; i += 2) {
@@ -28,23 +30,23 @@
   text,
   posx,
   posy,
-  rot_degrees,
   textSize,
+  rotDegrees,
   color = "black",
 }: {
   ctx: CanvasRenderingContext2D;
   text: string;
   posx: number;
   posy: number;
-  rot_degrees: number;
   textSize: number;
-  color: string;
+  rotDegrees?: number;
+  color?: string;
 }) {
   ctx.save();
   ctx.fillStyle = color;
   ctx.font = "".concat(textSize.toString(), "px Arial");
   ctx.translate(posx, posy); // Position for text
-  ctx.rotate(rot_degrees); // Rotate rot degrees
+  ctx.rotate(rotDegrees); // Rotate rot degrees
   ctx.textAlign = "center";
   ctx.fillText(text, 0, 9);
   ctx.restore();
@@ -63,11 +65,11 @@
   x: number;
   y: number;
   text: string;
-  fontProp: string;
-  align: CanvasTextAlign;
+  fontProp?: number|string;
+  align?: CanvasTextAlign;
 }) {
   ctx.save();
-  ctx.font = "".concat(fontProp, "px Arial");
+  ctx.font = "".concat(fontProp.toString(), "px Arial");
   ctx.textAlign = align;
   ctx.textBaseline = "middle";
   ctx.fillStyle = "black";
@@ -98,8 +100,8 @@
   y: number;
   x2: number;
   y2: number;
-  lineWidth: number;
-  color: string;
+  lineWidth?: number;
+  color?: string;
 }) {
   // transpose coordinates .5 px to become sharper
   x = Math.floor(x) + 0.5;
@@ -135,10 +137,10 @@
   width: number;
   height: number;
   lineWidth: number;
-  color: string | null;
-  fillColor: string | null;
-  open: boolean;
-  debug: boolean;
+  color?: string | null;
+  fillColor?: string | null;
+  open?: boolean;
+  debug?: boolean;
 }) {
   x = Math.floor(x) + 0.5;
   y = Math.floor(y) + 0.5;
@@ -186,8 +188,8 @@
   y: number;
   dir: number;
   height: number;
-  lineWidth: number;
-  color: string;
+  lineWidth?: number;
+  color?: string;
 }) {
   const width = dir * lineWidth;
   ctx.save();
@@ -220,8 +222,8 @@
   y: number;
   x2: number;
   height: number;
-  color: string;
-  lineWidth: number;
+  color?: string;
+  lineWidth?: number;
 }) {
   ctx.save();
   ctx.strokeStyle = color;

assets/js/fetch.ts

@@ -2,9 +2,9 @@
 // functions for making api requests to Gens
 /* global _apiHost */
 
-async function request(url, params, method = "GET") {
-  // options passed to hte fetch request
-  const options = {
+async function request(url: string, params: string, method: RequestType = "GET") {
+  // options passed to the fetch request
+  const options: RequestOptions = {
     method,
     headers: {
       "Content-Type": "application/json",
@@ -20,6 +20,7 @@ async function request(url, params, method = "GET") {
     }
   }
   // fetch returns a promise
+  // @ts-expect-error - FIXME: This should not be global
   const response = await fetch(_apiHost + url, options);
 
   if (response.status !== 200) {
@@ -42,7 +43,8 @@ export function objectToQueryString(obj) {
 }
 
 //  A generic error handler that just returns an object with status=error and message
-function generateErrorResponse(message) {
+function generateErrorResponse(message: string): Error {
+  // @ts-expect-error - FIXME: This should not take two arguments or?
   return new Error({
     status: "error",
     message,

assets/js/gens.test.ts

@@ -7,7 +7,9 @@
   delete window.location;
   const inputElem = document.createElement("input");
   document.createElement = jest.fn().mockReturnValueOnce(inputElem);
+  // @ts-expect-error FIXME: Unsure about these, look into at a later point
   delete window.createElement;
+  // @ts-expect-error
   window.location = new URL("https://www.example.com/sampleId?foo=bar&doo=moo");
   // run function
   copyPermalink("38", "1:10-100");

assets/js/gens.ts

@@ -29,6 +29,15 @@ export function initCanvases({
   scoutBaseURL,
   selectedVariant,
   annotationFile,
+}: {
+  sampleName: string,
+  caseId: string,
+  genomeBuild: number,
+  hgFileDir: string,
+  uiColors: UIColors,
+  scoutBaseURL: string,
+  selectedVariant: string,
+  annotationFile: string
 }) {
   // initialize and return the different canvases
   // WEBGL values