@equinor/esv-intersection 3.0.8 → 3.0.10

package/src/control/ZoomPanHandler.ts

@@ -12,20 +12,19 @@ export type RescaleFunction = (event: OnRescaleEvent) => void;
  * Handle zoom and pan for intersection layers
  */
 export class ZoomPanHandler {
-  zoom: ZoomBehavior<Element, unknown> = null;
-  elm: HTMLElement = null;
-  container: Selection<HTMLElement, unknown, null, undefined> = null;
-  onRescale: RescaleFunction = null;
-  options: ZoomAndPanOptions = null;
+  zoom!: ZoomBehavior<HTMLElement, unknown>;
+  container: Selection<HTMLElement, unknown, null, undefined>;
+  onRescale: RescaleFunction;
+  options: ZoomAndPanOptions;
   xBounds: [number, number] = [0, 1];
   yBounds: [number, number] = [0, 1];
   translateBoundsX: [number, number] = [0, 1];
   translateBoundsY: [number, number] = [0, 1];
-  scaleX: ScaleLinear<number, number> = null;
-  scaleY: ScaleLinear<number, number> = null;
-  _zFactor: number = 1;
-  _enableTranslateExtent: boolean;
-  currentTransform: ZoomTransform;
+  scaleX: ScaleLinear<number, number>;
+  scaleY: ScaleLinear<number, number>;
+  _zFactor = 1;
+  _enableTranslateExtent = false;
+  currentTransform: ZoomTransform | undefined;
 
   /**
    * Constructor
@@ -66,7 +65,7 @@ export class ZoomPanHandler {
    * @returns  width
    */
   get width(): number {
-    return this.scaleX.range()[1];
+    return this.scaleX.range()[1] ?? 0;
   }
 
   /**
@@ -74,7 +73,7 @@ export class ZoomPanHandler {
    * @returns  height
    */
   get height(): number {
-    return this.scaleY.range()[1];
+    return this.scaleY.range()[1] ?? 0;
   }
 
   /**
@@ -111,8 +110,8 @@ export class ZoomPanHandler {
    * @returns  ratio
    */
   get xRatio(): number {
-    const domain: number[] = this.scaleX.domain();
-    const ratio: number = Math.abs(this.width / (domain[1] - domain[0]));
+    const domain = this.scaleX.domain() as [number, number];
+    const ratio = Math.abs(this.width / (domain[1] - domain[0]));
     return ratio;
   }
 
@@ -121,8 +120,8 @@ export class ZoomPanHandler {
    * @returns  ratio
    */
   get yRatio(): number {
-    const domain: number[] = this.scaleY.domain();
-    const ratio: number = Math.abs(this.height / (domain[1] - domain[0]));
+    const domain = this.scaleY.domain() as [number, number];
+    const ratio = Math.abs(this.height / (domain[1] - domain[0]));
     return ratio;
   }
 
@@ -183,10 +182,10 @@ export class ZoomPanHandler {
   updateTranslateExtent(): void {
     const { width, xSpan, zFactor, enableTranslateExtent, translateBoundsX, translateBoundsY } = this;
 
-    let x1: number = -Infinity;
-    let y1: number = -Infinity;
-    let x2: number = +Infinity;
-    let y2: number = +Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    let x2 = +Infinity;
+    let y2 = +Infinity;
 
     if (enableTranslateExtent) {
       const ppu: number = width / xSpan;
@@ -237,8 +236,7 @@ export class ZoomPanHandler {
    * Initialized handler
    */
   init(): void {
-    this.zoom = zoom().scaleExtent([this.options.minZoomLevel, this.options.maxZoomLevel]).on('zoom', this.onZoom);
-
+    this.zoom = zoom<HTMLElement, unknown>().scaleExtent([this.options.minZoomLevel, this.options.maxZoomLevel]).on('zoom', this.onZoom);
     this.container.call(this.zoom);
   }
 
@@ -292,19 +290,20 @@ export class ZoomPanHandler {
   setViewport(cx?: number, cy?: number, displ?: number, duration?: number): void {
     const { zoom, container, calculateTransform, scaleX, scaleY, isXInverted } = this;
 
-    if (isNaN(cx) || isNaN(displ)) {
-      const xd: number[] = scaleX.domain();
+    if (cx == null || displ == null || isNaN(cx) || isNaN(displ)) {
+      const xd = scaleX.domain() as [number, number];
       const dspan: number = xd[1] - xd[0];
-      if (isNaN(cx)) {
+
+      if (cx == null || isNaN(cx)) {
         cx = xd[0] + dspan / 2 || 0;
       }
-      if (isNaN(displ)) {
+      if (displ == null || isNaN(displ)) {
         displ = Math.abs(dspan) || 1;
       }
     }
 
-    if (isNaN(cy)) {
-      const yd: number[] = scaleY.domain();
+    if (cy == null || isNaN(cy)) {
+      const yd = scaleY.domain() as [number, number];
       cy = yd[0] + (yd[1] - yd[0]) / 2 || 0;
     }
 
@@ -315,7 +314,7 @@ export class ZoomPanHandler {
 
     const t: ZoomTransform = calculateTransform(dx0, dx1, cy);
 
-    if (Number.isFinite(duration) && duration > 0) {
+    if (duration != null && Number.isFinite(duration) && duration > 0) {
       zoom.transform(container.transition().duration(duration), t);
     } else {
       zoom.transform(container, t);
@@ -346,19 +345,25 @@ export class ZoomPanHandler {
    * Adjust zoom due to changes in size of target
    * @param  force - force update even if size did not change
    */
-  adjustToSize(width?: number | boolean, height?: number, force: boolean = false): void {
+  adjustToSize(): void;
+  adjustToSize(autoAdjust: boolean): void;
+  adjustToSize(width: number, height: number, force: boolean): void;
+  adjustToSize(widthOrAutoAdjust?: unknown, height?: number, force = false): void {
     const { width: oldWidth, height: oldHeight, scaleX, scaleY, recalculateZoomTransform } = this;
 
     let w = 0;
     let h = 0;
 
-    if (typeof width === 'undefined' || typeof width === 'boolean') {
-      const { width: containerWidth, height: containerHeight } = this.container.node().getBoundingClientRect();
-      w = containerWidth;
-      h = containerHeight;
-    } else {
-      w = width;
+    if (typeof widthOrAutoAdjust === 'number' && typeof height === 'number') {
       h = height;
+      w = widthOrAutoAdjust;
+    } else {
+      const containerEl = this.container.node();
+      if (containerEl) {
+        const { width: containerWidth, height: containerHeight } = containerEl.getBoundingClientRect();
+        w = containerWidth;
+        h = containerHeight;
+      }
     }
 
     const newWidth: number = Math.max(1, w);
@@ -386,15 +391,15 @@ export class ZoomPanHandler {
   calculateTransform(dx0: number, dx1: number, dy: number): ZoomTransform {
     const { scaleX, xSpan, xBounds, yBounds, zFactor, viewportRatio: ratio, isXInverted, isYInverted } = this;
 
-    const [rx1, rx2] = scaleX.range();
-    const displ: number = Math.abs(dx1 - dx0);
-    const k: number = xSpan / displ;
-    const unitsPerPixels: number = displ / (rx2 - rx1);
+    const [rx1, rx2] = scaleX.range() as [number, number];
+    const displ = Math.abs(dx1 - dx0);
+    const k = xSpan / displ;
+    const unitsPerPixels = displ / (rx2 - rx1);
 
-    const dy0: number = dy - (isYInverted ? -displ : displ) / zFactor / ratio / 2;
+    const dy0 = dy - (isYInverted ? -displ : displ) / zFactor / ratio / 2;
 
-    const tx: number = (xBounds[0] - dx0) / (isXInverted ? -unitsPerPixels : unitsPerPixels);
-    const ty: number = (yBounds[0] - dy0) / ((isYInverted ? -unitsPerPixels : unitsPerPixels) / zFactor);
+    const tx = (xBounds[0] - dx0) / (isXInverted ? -unitsPerPixels : unitsPerPixels);
+    const ty = (yBounds[0] - dy0) / ((isYInverted ? -unitsPerPixels : unitsPerPixels) / zFactor);
 
     return zoomIdentity.translate(tx, ty).scale(k);
   }
@@ -405,8 +410,8 @@ export class ZoomPanHandler {
   recalculateZoomTransform(): void {
     const { scaleX, scaleY, container, calculateTransform, updateTranslateExtent } = this;
 
-    const [dx0, dx1] = scaleX.domain();
-    const [dy0, dy1] = scaleY.domain();
+    const [dx0, dx1] = scaleX.domain() as [number, number];
+    const [dy0, dy1] = scaleY.domain() as [number, number];
 
     const dy: number = dy0 + (dy1 - dy0) / 2;
 

package/src/control/interfaces.ts

@@ -18,8 +18,8 @@ export interface ControllerOptions {
 }
 
 interface OverlayEvent<T> {
-  target?: Element;
-  source: Element;
+  target: Element | undefined;
+  source: Element | undefined;
   caller: T;
 }
 
@@ -33,7 +33,7 @@ export interface OverlayMouseMoveEvent<T> extends OverlayEvent<T> {
   y: number;
 }
 
-export interface OverlayMouseExitEvent<T> extends OverlayEvent<T> {}
+export type OverlayMouseExitEvent<T> = OverlayEvent<T>;
 
 export interface OverlayCallbacks<T> {
   onMouseMove?(event: OverlayMouseMoveEvent<T>): void;

package/src/control/overlay.ts

@@ -2,8 +2,8 @@ import { select, Selection, pointer, ContainerElement } from 'd3-selection';
 import { OverlayCallbacks } from './interfaces';
 
 export class Overlay<T> {
-  elm: Selection<Element, unknown, null, undefined>;
-  source: Element;
+  elm: Selection<HTMLDivElement, unknown, null, undefined>;
+  source: HTMLDivElement | undefined;
   elements: { [propName: string]: Element } = {};
   listeners: { [propName: string]: OverlayCallbacks<T> } = {};
   enabled = true;
@@ -11,8 +11,7 @@ export class Overlay<T> {
   constructor(caller: T, container: HTMLElement) {
     const con = select(container);
     this.elm = con.append('div').attr('id', 'overlay').style('z-index', '11').style('position', 'absolute');
-
-    this.source = this.elm.node();
+    this.source = this.elm.node() ?? undefined;
 
     const { elm } = this;
     elm.on('resize', (event) => {
@@ -24,11 +23,11 @@ export class Overlay<T> {
       }
 
       Object.keys(this.listeners).forEach((key: string) => {
-        const target = this.elements[key] || null;
+        const target = this.elements[key] ?? undefined;
         const ops = this.listeners[key];
         if (ops && ops.onResize) {
           requestAnimationFrame(() =>
-            ops.onResize({
+            ops.onResize?.({
               target,
               source: this.source,
               caller,
@@ -47,12 +46,12 @@ export class Overlay<T> {
 
       const [mx, my] = pointer(event, this.elm.node() as ContainerElement);
       Object.keys(this.listeners).forEach((key: string) => {
-        const target = this.elements[key] || null;
+        const target = this.elements[key] ?? undefined;
         const ops = this.listeners[key];
 
         if (ops && ops.onMouseMove) {
           requestAnimationFrame(() =>
-            ops.onMouseMove({
+            ops.onMouseMove?.({
               x: mx,
               y: my,
               target,
@@ -69,11 +68,11 @@ export class Overlay<T> {
         return;
       }
       Object.keys(this.listeners).forEach((key: string) => {
-        const target = this.elements[key] || null;
+        const target = this.elements[key] || undefined;
         const ops = this.listeners[key];
         if (ops && ops.onMouseExit) {
           requestAnimationFrame(() =>
-            ops.onMouseExit({
+            ops.onMouseExit?.({
               target,
               source: this.source,
               caller,
@@ -84,13 +83,18 @@ export class Overlay<T> {
     });
   }
 
-  create(key: string, callbacks?: OverlayCallbacks<T>): HTMLElement {
+  create(key: string, callbacks?: OverlayCallbacks<T>): HTMLElement | undefined {
     const newElm = this.elm.append('div').style('position', 'relative').style('pointer-events', 'none').node();
-    this.elements[key] = newElm;
-    if (callbacks) {
-      this.listeners[key] = callbacks;
+
+    if (newElm != null) {
+      this.elements[key] = newElm;
+      if (callbacks) {
+        this.listeners[key] = callbacks;
+      }
+      return newElm;
+    } else {
+      return undefined;
     }
-    return newElm;
   }
 
   register(key: string, callbacks: OverlayCallbacks<T>): void {
@@ -111,7 +115,7 @@ export class Overlay<T> {
   }
 
   destroy(): void {
-    this.source.remove();
+    this.source?.remove();
   }
 }
 

package/src/datautils/colortable.ts

@@ -1,13 +1,13 @@
 import { scaleLinear } from 'd3-scale';
 import { color } from 'd3-color';
 
-export function createColorTable(colorMap: string[], size: number): number[][] {
+export function createColorTable(colorMap: string[], size: number): [number, number, number][] {
   const colorDomain = colorMap.map((_v, i) => (i * size) / colorMap.length);
   const colorScale = scaleLinear<string>().domain(colorDomain).range(colorMap);
 
-  const table = Array.from(new Array(size).keys()).map((i) => {
-    const rgb = color(colorScale(i)).rgb();
-    return [rgb.r, rgb.g, rgb.b];
+  const table = Array.from(new Array(size).keys()).map<[number, number, number]>((i) => {
+    const rgb = color(colorScale(i))?.rgb();
+    return rgb != null ? [rgb.r, rgb.g, rgb.b] : [0, 0, 0];
   });
 
   return table;

package/src/datautils/findsample.ts

@@ -47,15 +47,16 @@ export function findIndexOfSample(data: number[][], pos: number): number {
   return index;
 }
 
-export function findSampleAtPos(data: number[][], pos: number, topLimit: number = null, bottomLimit: number = null): number {
-  let y: number = null;
+export function findSampleAtPos(data: number[][], pos: number, topLimit = 0, bottomLimit = 0): number {
+  let y = 0;
   const index = findIndexOfSample(data, pos);
   if (index !== -1) {
-    const v1 = data[index][1];
-    const v2 = data[index + 1][1];
-    if (v2 && v2) {
-      const x1 = data[index][0];
-      const x2 = data[index + 1][0];
+    const v1 = data[index]?.[1];
+    const v2 = data[index + 1]?.[1];
+
+    if (v1 && v2) {
+      const x1 = data[index]?.[0] ?? 0;
+      const x2 = data[index + 1]?.[0] ?? 0;
       const span = x2 - x1;
       const d = pos - x1;
       const f = d / span;

package/src/datautils/picks.ts

@@ -103,7 +103,7 @@ function getFilteredExitPicks(formationPicks: PairedPickAndUnit[]): Annotation[]
 
 export const getPicksData = (picksData: { unitPicks: PairedPickAndUnit[]; nonUnitPicks: PickWithId[] }): Annotation[] =>
   [...getReferencePicks(picksData.nonUnitPicks), ...getEntryPicks(picksData.unitPicks), ...getFilteredExitPicks(picksData.unitPicks)].sort(
-    (a, b) => a.md - b.md,
+    (a, b) => a.md! - b.md!,
   );
 
 /**
@@ -142,7 +142,7 @@ function findGaps(from: number, to: number, arr: { from: number; to: number; itm
   let d = from;
   let i = 0;
   while (d < to && i < arr.length) {
-    const itm = arr[i];
+    const itm = arr[i]!;
     if (itm.from > d) {
       gaps.push([d, Math.min(itm.from, to)]);
     }
@@ -171,13 +171,13 @@ function joinPicksAndStratColumn(picks: Pick[], stratColumn: Unit[]): { joined:
   const nonUnitPicks: PickWithId[] = [];
   const joined: PickAndUnit[] = [];
   picks.forEach((p: Pick) => {
-    const matches = transformed.filter((u: UnitDto) => p.pickIdentifier.search(new RegExp(`(${u.topSurface}|${u.baseSurface})`, 'i')) !== -1);
+    const matches = transformed.filter((u: UnitDto) => p.pickIdentifier?.search(new RegExp(`(${u.topSurface}|${u.baseSurface})`, 'i')) !== -1);
     if (matches.length > 0) {
       matches.forEach((u: UnitDto) =>
         joined.push({
           md: p.md,
           tvd: p.tvd,
-          identifier: p.pickIdentifier,
+          identifier: p.pickIdentifier!,
           confidence: p.confidence,
           mdUnit: p.mdUnit,
           depthReferencePoint: p.depthReferencePoint,
@@ -185,7 +185,7 @@ function joinPicksAndStratColumn(picks: Pick[], stratColumn: Unit[]): { joined:
         }),
       );
     } else {
-      nonUnitPicks.push({ identifier: p.pickIdentifier, ...p });
+      nonUnitPicks.push({ identifier: p.pickIdentifier!, ...p });
     }
   });
 
@@ -206,7 +206,7 @@ function pairJoinedPicks(joined: PickAndUnit[]): PairedPickAndUnit[] {
     .sort((a: PickAndUnit, b: PickAndUnit) => a.unitName.localeCompare(b.unitName) || a.md - b.md || a.ageTop - b.ageTop);
 
   while (sorted.length > 0) {
-    current = sorted.shift();
+    current = sorted.shift()!;
     const name = current.identifier;
     let pairWithName: string;
 
@@ -222,8 +222,8 @@ function pairJoinedPicks(joined: PickAndUnit[]): PairedPickAndUnit[] {
       continue;
     }
 
-    let top: PickAndUnit;
-    let base: PickAndUnit;
+    let top: PickAndUnit | undefined;
+    let base: PickAndUnit | undefined;
 
     const pairWith = sorted.find((p: PickAndUnit) => p.identifier === pairWithName);
     if (!pairWith) {
@@ -233,7 +233,7 @@ function pairJoinedPicks(joined: PickAndUnit[]): PairedPickAndUnit[] {
         base = joined
           .filter((d: PickAndUnit) => d.level)
           .sort((a: PickAndUnit, b: PickAndUnit) => a.md - b.md)
-          .find((p: PickAndUnit) => p.md > top.md);
+          .find((p: PickAndUnit) => p.md > top!.md);
         if (base) {
           console.warn(`Using ${base.identifier} as base for ${name}`);
         } else {
@@ -245,7 +245,7 @@ function pairJoinedPicks(joined: PickAndUnit[]): PairedPickAndUnit[] {
         top = joined
           .filter((d: PickAndUnit) => d.level)
           .sort((a: PickAndUnit, b: PickAndUnit) => b.md - a.md)
-          .find((p: PickAndUnit) => p.md < base.md);
+          .find((p: PickAndUnit) => p.md < base!.md);
         if (top) {
           console.warn(`Using ${top.identifier} as top for ${name}`);
         } else {
@@ -303,10 +303,10 @@ export function transformFormationData(picks: Pick[], stratColumn: Unit[]): { un
   // given presedence over lower levels for overlapping picks.
   const unitPicks = [];
   while (itemstack.length > 0) {
-    const first = itemstack.pop();
+    const first = itemstack.pop()!;
     const group: PairedPickAndUnit[] = [];
-    while (itemstack.length > 0 && itemstack[itemstack.length - 1].level > first.level) {
-      group.push(itemstack.pop());
+    while (itemstack.length > 0 && itemstack[itemstack.length - 1]?.level! > first.level) {
+      group.push(itemstack.pop()!);
     }
     group.reverse();
     group.push(first);

package/src/datautils/schematicShapeGenerator.ts

@@ -51,15 +51,15 @@ export interface CasingRenderObject {
 }
 
 export const getEndLines = (
-  rightPath: IPoint[],
-  leftPath: IPoint[],
+  rightPath: [IPoint, IPoint, ...IPoint[]],
+  leftPath: [IPoint, IPoint, ...IPoint[]],
 ): {
-  top: IPoint[];
-  bottom: IPoint[];
+  top: [IPoint, IPoint];
+  bottom: [IPoint, IPoint];
 } => {
   return {
     top: [rightPath[0], leftPath[0]],
-    bottom: [rightPath[rightPath.length - 1], leftPath[leftPath.length - 1]],
+    bottom: [rightPath[rightPath.length - 1] as IPoint, leftPath[leftPath.length - 1] as IPoint],
   };
 };
 
@@ -215,8 +215,8 @@ export const createComplexRopeSegmentsForCement = (
     throw new Error(`Invalid cement data, can't find referenced casing/completion string for cement with id '${cement.id}'`);
   }
 
-  attachedStrings.sort((a: Casing, b: Casing) => a.end - b.end); // ascending
-  const bottomOfCement = attachedStrings[attachedStrings.length - 1].end;
+  attachedStrings.sort((a, b) => a.end - b.end); // ascending
+  const bottomOfCement = attachedStrings[attachedStrings.length - 1]!.end;
 
   const { overlappingOuterStrings, overlappingHoles } = findIntersectingItems(cement.toc, bottomOfCement, nonAttachedStrings, holes);
 
@@ -232,7 +232,7 @@ export const createComplexRopeSegmentsForCement = (
       return [];
     }
 
-    const nextDepth = list[index + 1];
+    const nextDepth = list[index + 1]!;
     const diameterAtChangeDepth = findCementOuterDiameterAtDepth(attachedStrings, overlappingOuterStrings, overlappingHoles, depth);
 
     return [{ top: depth, bottom: nextDepth, diameter: diameterAtChangeDepth * exaggerationFactor }];
@@ -258,7 +258,7 @@ const splitByReferencedStrings = (
       }
       return { ...acc, nonAttachedStrings: [...acc.nonAttachedStrings, current] };
     },
-    { attachedStrings: [], nonAttachedStrings: [] },
+    { attachedStrings: [] as (Casing | Completion)[], nonAttachedStrings: [] as (Casing | Completion)[] },
   );
 
 export const createComplexRopeSegmentsForCementSqueeze = (
@@ -289,7 +289,7 @@ export const createComplexRopeSegmentsForCementSqueeze = (
       return [];
     }
 
-    const nextDepth = list[index + 1];
+    const nextDepth = list[index + 1]!;
 
     const diameterAtDepth = findCementOuterDiameterAtDepth(attachedStrings, overlappingOuterStrings, overlappingHoles, depth);
 
@@ -327,7 +327,7 @@ export const createComplexRopeSegmentsForCementPlug = (
       return [];
     }
 
-    const nextDepth = list[index + 1];
+    const nextDepth = list[index + 1]!;
     const diameterAtDepth = findCementPlugInnerDiameterAtDepth(attachedStrings, overlappingOuterStrings, overlappingHoles, depth);
 
     return [{ top: depth, bottom: nextDepth, diameter: diameterAtDepth * exaggerationFactor }];
@@ -364,6 +364,10 @@ export const createHoleBaseTexture = ({ firstColor, secondColor }: HoleOptions,
   canvas.height = height;
   const canvasCtx = canvas.getContext('2d');
 
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
+
   canvasCtx.fillStyle = createGradientFill(canvas, canvasCtx, firstColor, secondColor, 0);
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -376,6 +380,9 @@ export const createScreenTexture = ({ scalingFactor }: ScreenOptions): Texture =
   canvas.width = size;
   canvas.height = size;
   const canvasCtx = canvas.getContext('2d');
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
 
   canvasCtx.fillStyle = 'white';
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
@@ -401,6 +408,10 @@ export const createTubingTexture = ({ innerColor, outerColor, scalingFactor }: T
   canvas.width = size;
   canvas.height = size;
   const canvasCtx = canvas.getContext('2d');
+
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
   const gradient = canvasCtx.createLinearGradient(0, 0, 0, size);
 
   const innerColorStart = 0.3;
@@ -425,6 +436,10 @@ export const createCementTexture = ({ firstColor, secondColor, scalingFactor }:
   canvas.height = size;
   const canvasCtx = canvas.getContext('2d');
 
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
+
   canvasCtx.fillStyle = firstColor;
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
   canvasCtx.lineWidth = lineWidth;
@@ -449,6 +464,10 @@ export const createCementPlugTexture = ({ firstColor, secondColor, scalingFactor
   canvas.height = size;
   const canvasCtx = canvas.getContext('2d');
 
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
+
   canvasCtx.fillStyle = firstColor;
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
   canvasCtx.lineWidth = scalingFactor;
@@ -475,6 +494,10 @@ export const createCementSqueezeTexture = ({ firstColor, secondColor, scalingFac
   canvas.height = size;
 
   const canvasCtx = canvas.getContext('2d');
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
+
   canvasCtx.lineWidth = lineWidth;
   canvasCtx.fillStyle = firstColor;
   canvasCtx.strokeStyle = secondColor;
@@ -535,7 +558,7 @@ export const getCasingIntervalsWithWindows = (casing: Casing): CasingInterval[]
             ? createCasingInterval(nextLastBottom, casing.end)
             : null;
 
-        const newIntervals: CasingInterval[] = [startCasingInterval, windowInterval, endCasingInterval].filter((i) => i);
+        const newIntervals: CasingInterval[] = [startCasingInterval, windowInterval, endCasingInterval].filter((i): i is CasingInterval => i != null);
 
         return { intervals: [...intervals, ...newIntervals], lastBottom: nextLastBottom };
       },
@@ -599,7 +622,7 @@ export const createComplexRopeSegmentsForPerforation = (
       return [];
     }
 
-    const nextDepth = list[index + 1];
+    const nextDepth = list[index + 1]!;
 
     const diameterAtDepth = findPerforationOuterDiameterAtDepth(overlappingOuterStrings, overlappingHoles, depth, perforation.subKind);
 
@@ -769,14 +792,17 @@ const errorTexture = (errorMessage = 'Error!', existingContext?: { canvas: HTMLC
   const xy: [number, number] = [0, 0];
   const wh: [number, number] = [canvas.width, canvas.height];
 
+  if (canvasCtx == null) {
+    throw Error('Could not get canvas context!');
+  }
   canvasCtx.fillStyle = '#ff00ff';
   canvasCtx.fillRect(...xy, ...wh);
 
   const texture = new Texture(
     Texture.from(canvas, { wrapMode: WRAP_MODES.CLAMP }).baseTexture,
-    null,
+    undefined,
     new Rectangle(0, 0, canvas.width, canvas.height),
-    null,
+    undefined,
     groupD8.MIRROR_HORIZONTAL,
   );
   return texture;
@@ -793,15 +819,19 @@ const createPerforationCanvas = (
   canvas.height = size;
   const ctx = canvas.getContext('2d');
 
+  if (ctx == null) {
+    throw Error('Could not get canvas context!');
+  }
+
   return { canvas, ctx };
 };
 
 const createPerforationTexture = (canvas: HTMLCanvasElement) => {
   const texture = new Texture(
     Texture.from(canvas, { wrapMode: WRAP_MODES.CLAMP }).baseTexture,
-    null,
+    undefined,
     new Rectangle(0, 0, canvas.width, canvas.height),
-    null,
+    undefined,
     groupD8.MIRROR_HORIZONTAL,
   );
   return texture;