@equinor/esv-intersection 3.0.8 → 3.0.10

package/src/datautils/seismicimage.ts

@@ -44,11 +44,11 @@ export function getSeismicInfo(data: { datapoints: number[][]; yAxisValues: numb
   if (!(data && data.datapoints)) {
     return null;
   }
-  const minX = trajectory.reduce((acc: number, val: number[]) => Math.min(acc, val[0]), 0);
-  const maxX = trajectory.reduce((acc: number, val: number[]) => Math.max(acc, val[0]), 0);
+  const minX = trajectory.reduce((acc: number, val: number[]) => Math.min(acc, val[0]!), 0);
+  const maxX = trajectory.reduce((acc: number, val: number[]) => Math.max(acc, val[0]!), 0);
 
-  const minTvdMsl = data.yAxisValues && data.yAxisValues[0];
-  const maxTvdMsl = data.yAxisValues && data.yAxisValues[data.yAxisValues.length - 1];
+  const minTvdMsl = data.yAxisValues && data.yAxisValues[0]!;
+  const maxTvdMsl = data.yAxisValues && data.yAxisValues[data.yAxisValues.length - 1]!;
 
   // Find value domain
   const dp = data.datapoints || [];
@@ -117,8 +117,7 @@ export async function generateSeismicSliceImage(
     difference: dmax - dmin,
   };
 
-  const length = trajectory[0][0] - trajectory[trajectory.length - 1][0];
-  // eslint-disable-next-line no-magic-numbers
+  const length = trajectory[0]?.[0]! - trajectory[trajectory.length - 1]?.[0]!;
   const width = Math.abs(Math.floor(length / 5));
   const height = data.yAxisValues.length;
 
@@ -132,7 +131,7 @@ export async function generateSeismicSliceImage(
   let offset = 0;
   const colorFactor = (colorTableSize - 1) / domain.difference;
 
-  let pos = options?.isLeftToRight == null ? trajectory[0][0] : trajectory[trajectory.length - 1][0];
+  let pos = options?.isLeftToRight ? trajectory[0]?.[0]! : trajectory[trajectory.length - 1]?.[0]!;
 
   const step = (length / width) * (options?.isLeftToRight ? -1 : 1);
 
@@ -147,15 +146,15 @@ export async function generateSeismicSliceImage(
   for (let x = 0; x < width; x++) {
     offset = x * 4;
     const index = findIndexOfSample(trajectory, pos);
-    const x1 = trajectory[index][0];
-    const x2 = trajectory[index + 1][0];
+    const x1 = trajectory[index]?.[0]!;
+    const x2 = trajectory[index + 1]?.[0]!;
     const span = x2 - x1;
     const dx = pos - x1;
     const ratio = dx / span;
 
     for (let y = 0; y < height; y++) {
-      val1 = dp[y][index];
-      val2 = dp[y][index + 1];
+      val1 = dp[y]?.[index]!;
+      val2 = dp[y]?.[index + 1]!;
       if (val1 == null || val2 == null) {
         col = black;
         opacity = 0;
@@ -163,11 +162,11 @@ export async function generateSeismicSliceImage(
         val = val1 * (1 - ratio) + val2 * ratio;
         i = (val - domain.min) * colorFactor;
         i = clamp(~~i, 0, colorTableSize - 1);
-        col = colorTable[i];
+        col = colorTable[i]!;
         opacity = 255;
       }
 
-      d.set([col[0], col[1], col[2], opacity], offset);
+      d.set([col[0]!, col[1]!, col[2]!, opacity], offset);
 
       offset += width * 4;
     }

package/src/datautils/surfacedata.ts

@@ -91,7 +91,7 @@ function getSurfaceLines(mappedSurfaces: MappedSurfaces[], trajectory: number[][
       label: l.name,
       width: 2,
       color: convertColor(l.color || 'black'),
-      data: trajectory.map((p, j) => [p[0], l.values[j]]),
+      data: trajectory.map((p, j) => [p[0]!, l.values[j]!]),
     }));
 
   return lines;
@@ -99,13 +99,14 @@ function getSurfaceLines(mappedSurfaces: MappedSurfaces[], trajectory: number[][
 
 function generateGroupAreas(groups: MappedGroup[], trajectory: number[][]): SurfaceArea[] {
   const groupAreas = groups.map((g: MappedGroup, i: number) => {
-    const next: MappedGroup | null = i + 1 < groups.length ? groups[i + 1] : null;
+    const next: MappedGroup | null = i + 1 < groups.length ? groups[i + 1]! : null;
     return {
       id: g.id,
       color: convertColor(g.color),
-      data: trajectory.map((p: number[], j: number) => [p[0], g.top[j], next ? next.top[j] : null]),
+      data: trajectory.map((p: number[], j: number) => [p[0]!, g.top[j]!, ...(next ? [next.top[j]!] : [])]),
     };
   });
+
   return groupAreas;
 }
 
@@ -113,7 +114,7 @@ function mapGroups(stratGroups: Map<string, StratGroup>, surfaceAreas: SurfaceAr
   const groups = Array.from(stratGroups.values())
     .sort((a: StratGroup, b: StratGroup) => a.age - b.age)
     .filter((g: StratGroup) => {
-      const surfaces: SurfaceArea[] = surfaceAreas[g.name];
+      const surfaces = surfaceAreas[g.name];
       const isValid = surfaces && surfaces.length > 0;
       if (!isValid) {
         console.warn(`Intersection surface group '${g.name}' has no valid entries and will be discarded.`);
@@ -121,13 +122,13 @@ function mapGroups(stratGroups: Map<string, StratGroup>, surfaceAreas: SurfaceAr
       return isValid;
     })
     .map((g: StratGroup, i: number) => {
-      const surface: SurfaceArea[] = surfaceAreas[g.name];
-      const top = surface[0];
+      const surface = surfaceAreas[g.name]!;
+      const top = surface[0]!;
       return {
         id: g.name,
         label: g.name,
         color: unassignedColorScale(i),
-        top: top.data.map((d: number[]) => d[1]),
+        top: top.data.map((d: number[]) => d[1]!),
       };
     });
   return groups;
@@ -144,11 +145,11 @@ function combineSurfacesAndStratColumn(
     .filter((d: MappedSurfaces) => d.visualization === 'interval' || d.visualization === 'none')
     .map((s: MappedSurfaces) => {
       const path: StratUnit[] = [];
-      const stratUnit: StratUnit = findStratcolumnUnit(stratColumn, s.name, path);
+      const stratUnit = findStratcolumnUnit(stratColumn, s.name, path);
       if (!stratUnit) {
         console.warn(`No match for ${s.name} in strat column`);
       }
-      const group: StratUnit = path[0] || stratUnit;
+      const group = path[0]! || stratUnit;
       const groupName: string = (group && group.identifier) || defaultGroupName;
       if (group && !stratGroups.has(groupName)) {
         stratGroups.set(groupName, {
@@ -158,7 +159,7 @@ function combineSurfacesAndStratColumn(
       }
       return {
         ...s,
-        unit: stratUnit,
+        unit: stratUnit!,
         group: groupName,
       };
     });
@@ -201,13 +202,13 @@ function sortStratigraphies(stratigrafies: Stratigraphy[]): void {
  * @param {[]} path
  */
 function findStratcolumnUnit(units: StratUnit[], unitname: string, path: StratUnit[] = []): StratUnit | null {
-  const unit: StratUnit = units.find((u: StratUnit) => u.identifier.toLowerCase() === unitname.toLowerCase());
+  const unit = units.find((u: StratUnit) => u.identifier.toLowerCase() === unitname.toLowerCase());
   if (unit) {
     // Build path
-    let temp: StratUnit = unit;
+    let temp: StratUnit | undefined = unit;
     do {
       path.unshift(temp);
-      temp = units.find((u: StratUnit) => u.identifier === temp.stratUnitParent);
+      temp = units.find((u: StratUnit) => u.identifier === temp!.stratUnitParent);
     } while (temp);
 
     return unit;
@@ -247,11 +248,11 @@ const unassignedColorScale = scaleOrdinal<number, string>()
 /**
  * Find the best matching base index based on name or by values
  */
-function findBestMatchingBaseIndex(top: Stratigraphy, index: number, surfaces: Stratigraphy[], stratColumn: StratUnit[]): number {
+function findBestMatchingBaseIndex(top: Stratigraphy, index: number, surfaces: Stratigraphy[], stratColumn: StratUnit[]): number | undefined {
   const nextIndex: number = index + 1;
 
   if (!surfaces || nextIndex >= surfaces.length) {
-    return null;
+    return undefined;
   }
 
   // If there is a matching base by name, use that. More robust, does not rely on sorting
@@ -262,14 +263,14 @@ function findBestMatchingBaseIndex(top: Stratigraphy, index: number, surfaces: S
 
   for (let i = nextIndex; i < surfaces.length; i++) {
     const candidate = surfaces[i];
-    if (!candidate.isBase) {
+    if (!candidate?.isBase) {
       return i;
     }
     if (isAnchestor(top, candidate, stratColumn)) {
       return i;
     }
   }
-  return null;
+  return undefined;
 }
 
 function isAnchestor(descendant: Stratigraphy, candidate: Stratigraphy, stratColumn: StratUnit[]): boolean {
@@ -284,15 +285,15 @@ function generateSurfaceAreas(projection: number[][], surfaces: Stratigraphy[],
       if (!acc[surface.group]) {
         acc[surface.group] = [];
       }
-      const baseIndex: number = findBestMatchingBaseIndex(surface, i, surfaces, stratColumn);
-      acc[surface.group].push({
+      const baseIndex = findBestMatchingBaseIndex(surface, i, surfaces, stratColumn);
+      acc[surface.group]?.push({
         id: surface.name,
         label: surface.name,
         color: (surface.unit && getColorFromUnit(surface.unit)) || WHITE,
         exclude: surface.visualization === 'none' || !surface.unit,
         data: projection.map((p, j) => {
-          const baseValue: number = surface.values[j] !== null ? getBaseValue(baseIndex, surfaces, j) : null;
-          return [p[0], surface.values[j], baseValue];
+          const baseValue = surface.values[j] != null ? getBaseValue(baseIndex, surfaces, j) : undefined;
+          return [p[0]!, surface.values[j]!, baseValue!];
         }),
       });
     }
@@ -303,15 +304,15 @@ function generateSurfaceAreas(projection: number[][], surfaces: Stratigraphy[],
 
 // get the value from the surface with the supplied index,
 // iterate to next surface if value is null
-function getBaseValue(index: number, surfaces: Stratigraphy[], datapoint: number): number {
+function getBaseValue(index: number | undefined, surfaces: Stratigraphy[], datapoint: number): number | undefined {
   if (!surfaces || !index || index >= surfaces.length) {
-    return null;
+    return undefined;
   }
 
   for (let i: number = index; i < surfaces.length; i++) {
-    if (surfaces[i].values[datapoint] !== null) {
-      return surfaces[i].values[datapoint];
+    if (surfaces[i]?.values[datapoint] != null) {
+      return surfaces[i]?.values[datapoint];
     }
   }
-  return null;
+  return undefined;
 }

package/src/datautils/trajectory.ts

@@ -15,19 +15,21 @@ const pathSteps = 10;
  * Code originally developed for REP
  * @param {[]} poslog Position log from SMDA
  */
-export function generateProjectedWellborePath(poslog: SurveySample[]): number[][] {
+export function generateProjectedWellborePath(poslog: SurveySample[]): [number, number][] {
   if (!poslog || poslog.length === 0) {
     return [];
   }
 
-  const points: number[][] = poslog ? poslog.map((p: SurveySample) => [p.easting, p.northing, p.tvd, p.md]) : [];
+  const points: [number, number, number, number][] = poslog ? poslog.map((p: SurveySample) => [p.easting, p.northing, p.tvd, p.md]) : [];
 
-  const projection: number[][] = simplify(projectCurtain(points));
-  const offset: number = projection[projection.length - 1][0];
+  const projection = simplify(projectCurtain(points));
+  const offset = projection[projection.length - 1]?.[0];
 
-  projection.forEach((p, i) => {
-    projection[i][0] = offset - p[0];
-  });
+  if (offset != null) {
+    projection.forEach((p, i) => {
+      projection[i]![0] = offset - p[0];
+    });
+  }
 
   return projection;
 }
@@ -43,25 +45,25 @@ export function generateProjectedTrajectory(poslog: SurveySample[], defaultInter
     return [];
   }
 
-  const points: number[][] = poslog ? poslog.map((p) => [p.easting, p.northing, p.tvd, p.md]) : [];
+  const points: [number, number, number, number][] = poslog ? poslog.map((p) => [p.easting, p.northing, p.tvd, p.md]) : [];
 
   const interpolator: CurveInterpolator = new CurveInterpolator(points, { tension: 0.75, arcDivisions: 5000 });
   const displacement: number = interpolator.length;
 
   const nPoints: number = Math.round(displacement * pathSteps);
-  let path: number[][] = null;
+  let path: [number, number][];
   if (nPoints > 0) {
     const maxOffset = 0.0005;
     const maxDistance = 10;
     path = simplify(interpolator.getPoints(nPoints), maxOffset, maxDistance);
   } else {
-    path = [[points[0][0], points[0][1]]];
+    path = [[points[0]![0], points[0]![1]]];
   }
 
-  const first: number[] = path[0];
-  const last: number[] = path[path.length - 1];
+  const first = path[0]!;
+  const last = path[path.length - 1]!;
   const relativeDist: number = Vector2.distance(first, last);
-  let v: Vector2 = null;
+  let v: Vector2;
 
   if (relativeDist < thresholdRelativeDist) {
     const oneEighty = 180;
@@ -72,9 +74,9 @@ export function generateProjectedTrajectory(poslog: SurveySample[], defaultInter
   }
   const extensionLengthStart: number = Math.max(0, extensionLength - displacement);
   const offset: number = extensionLengthStart + displacement;
-  const trajectory: number[][] = [];
+  const trajectory: [number, number][] = [];
 
-  let firstPoints: number[][] = [];
+  let firstPoints: [number, number][] = [];
 
   // Reference to initial vector
   const initial: number[] = v.toArray();
@@ -93,7 +95,7 @@ export function generateProjectedTrajectory(poslog: SurveySample[], defaultInter
   }
   trajectory.push(...path);
 
-  const endPoints: number[][] = seqI(Math.ceil(extensionLength * stepSize))
+  const endPoints = seqI(Math.ceil(extensionLength * stepSize))
     .map((t) =>
       v
         .set(initial)
@@ -105,7 +107,7 @@ export function generateProjectedTrajectory(poslog: SurveySample[], defaultInter
 
   trajectory.push(...endPoints);
 
-  const projectedTrajectory: number[][] = projectCurtain(trajectory, null, offset);
+  const projectedTrajectory: number[][] = projectCurtain(trajectory, undefined, offset);
 
   return projectedTrajectory;
 }
@@ -124,7 +126,7 @@ function getDirectionVector(path: number[][], threshold: number): Vector2 {
 
   for (let i = 0; i < path.length - 1; i++) {
     const index = path.length - 1 - i;
-    temp.set(path[index]).sub(path[index - 1]);
+    temp.set(path[index]!).sub(path[index - 1]!);
     res.add(temp);
 
     len = res.magnitude;
@@ -152,25 +154,25 @@ function getDirectionVector(path: number[][], threshold: number): Vector2 {
  *
  * @return {Number[]}    Simplified array
  */
-function simplify(inputArr: number[][], maxOffset = 0.001, maxDistance = 10): number[][] {
+function simplify(inputArr: [number, number][], maxOffset = 0.001, maxDistance = 10): [number, number][] {
   if (inputArr.length <= 4) {
     return inputArr;
   }
-  const [o0, o1] = inputArr[0];
-  const arr = inputArr.map((d) => [d[0] - o0, d[1] - o1]);
-  let [a0, a1] = arr[0];
-  const sim: number[][] = [inputArr[0]];
+  const [o0, o1] = inputArr[0]!;
+  const arr = inputArr.map<[number, number]>((d) => [d[0]! - o0, d[1]! - o1]);
+  let [a0, a1] = arr[0]!;
+  const sim = [inputArr[0]!];
 
   for (let i = 1; i + 1 < arr.length; i++) {
-    const [t0, t1] = arr[i];
-    const [b0, b1] = arr[i + 1];
+    const [t0, t1] = arr[i] ?? [];
+    const [b0, b1] = arr[i + 1] ?? [];
 
     // If t->b vector is NOT [0, 0]
-    if (b0 - t0 !== 0 || b1 - t1 !== 0) {
+    if (t0 != null && t1 != null && b0 != null && b1 != null && (b0 - t0 !== 0 || b1 - t1 !== 0)) {
       // Proximity check
       const proximity: number = Math.abs(a0 * b1 - a1 * b0 + b0 * t1 - b1 * t0 + a1 * t0 - a0 * t1) / Math.sqrt((b0 - a0) ** 2 + (b1 - a1) ** 2);
 
-      const dir: number[] = [a0 - t0, a1 - t1];
+      const dir: [number, number] = [a0 - t0, a1 - t1];
       const len: number = Math.sqrt(dir[0] ** 2 + dir[1] ** 2);
 
       if (proximity > maxOffset || len >= maxDistance) {
@@ -179,7 +181,7 @@ function simplify(inputArr: number[][], maxOffset = 0.001, maxDistance = 10): nu
       }
     }
   }
-  const last: number[] = arr[arr.length - 1];
+  const last = arr[arr.length - 1]!;
   sim.push([last[0] + o0, last[1] + o1]);
 
   return sim;
@@ -192,15 +194,15 @@ function simplify(inputArr: number[][], maxOffset = 0.001, maxDistance = 10): nu
  * @param offset
  * @returns {array}
  */
-function projectCurtain(points: number[][], origin: number[] = null, offset = 0): number[][] {
-  let p0: number[] = origin || points[0];
+function projectCurtain(points: [number, number, ...number[]][], origin?: [number, number, number, number], offset = 0): [number, number][] {
+  let p0 = origin || points[0]!;
   let l = 0;
-  const projected = points.map((p1: number[]) => {
+  const projected = points.map<[number, number]>((p1) => {
     const dx = p1[0] - p0[0];
     const dy = p1[1] - p0[1];
     l += Math.sqrt(dx ** 2 + dy ** 2);
     p0 = p1;
-    return [offset > 0 ? offset - l : l, p1[2] || 0];
+    return [offset > 0 ? offset - l : l, p1[2] ?? 0];
   });
   return projected;
 }

package/src/interfaces.ts

@@ -15,7 +15,7 @@ export interface OnMountEvent extends LayerEvent {
   height?: number;
 }
 
-export interface OnUnmountEvent extends LayerEvent {}
+export type OnUnmountEvent = LayerEvent;
 
 export interface OnResizeEvent extends LayerEvent {
   width: number;

package/src/layers/CalloutCanvasLayer.ts

@@ -47,10 +47,10 @@ export interface CalloutOptions<T extends Annotation[]> extends LayerOptions<T>
 }
 
 export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
-  rescaleEvent: OnRescaleEvent;
-  xRatio: number;
-  callouts: Callout[];
-  groupFilter: string[] = null;
+  rescaleEvent: OnRescaleEvent | undefined;
+  xRatio: number | undefined;
+  callouts: Callout[] = [];
+  groupFilter: string[] = [];
   minFontSize: number;
   maxFontSize: number;
   fontSizeFactor: number;
@@ -60,25 +60,23 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   constructor(id?: string, options?: CalloutOptions<T>) {
     super(id, options);
-    this.minFontSize = options.minFontSize || DEFAULT_MIN_FONT_SIZE;
-    this.maxFontSize = options.maxFontSize || DEFAULT_MAX_FONT_SIZE;
-    this.fontSizeFactor = options.fontSizeFactor || DEFAULT_FONT_SIZE_FACTOR;
-    this.offsetMin = options.offsetMin || DEFAULT_OFFSET_MIN;
-    this.offsetMax = options.offsetMax || DEFAULT_OFFSET_MAX;
-    this.offsetFactor = options.offsetFactor || DEFAULT_OFFSET_FACTOR;
+    this.minFontSize = options?.minFontSize || DEFAULT_MIN_FONT_SIZE;
+    this.maxFontSize = options?.maxFontSize || DEFAULT_MAX_FONT_SIZE;
+    this.fontSizeFactor = options?.fontSizeFactor || DEFAULT_FONT_SIZE_FACTOR;
+    this.offsetMin = options?.offsetMin || DEFAULT_OFFSET_MIN;
+    this.offsetMax = options?.offsetMax || DEFAULT_OFFSET_MAX;
+    this.offsetFactor = options?.offsetFactor || DEFAULT_OFFSET_FACTOR;
   }
 
   setGroupFilter(filter: string[]): void {
     this.groupFilter = filter;
-    this.callouts = undefined;
+    this.callouts = [];
     this.render();
   }
 
   override onUpdate(event: OnUpdateEvent<T>): void {
     super.onUpdate(event);
-
-    this.callouts = undefined;
-
+    this.callouts = [];
     this.render();
   }
 
@@ -102,14 +100,14 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
       const fontSize = calcSize(this.fontSizeFactor, this.minFontSize, this.maxFontSize, xScale);
 
-      if (!isPanning || !this.callouts) {
+      if (!isPanning || this.callouts.length <= 0) {
         const { data, ctx, groupFilter } = this;
         const { calculateDisplacementFromBottom } = this.referenceSystem.options;
         const isLeftToRight = calculateDisplacementFromBottom ? xBounds[0] < xBounds[1] : xBounds[0] > xBounds[1];
         const scale = 0;
 
-        ctx.font = `bold ${fontSize}px arial`;
-        const filtered = data.filter((d: Annotation) => !groupFilter || groupFilter.includes(d.group));
+        ctx != null && (ctx.font = `bold ${fontSize}px arial`);
+        const filtered = data.filter((d: Annotation) => groupFilter.length <= 0 || groupFilter.includes(d.group));
         const offset = calcSize(this.offsetFactor, this.offsetMin, this.offsetMax, xScale);
         this.callouts = this.positionCallouts(filtered, isLeftToRight, xScale, yScale, scale, fontSize, offset);
       }
@@ -138,27 +136,24 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     this.renderText(label, x, y, fontSize, color);
   };
 
-  private renderText(
-    title: string,
-    x: number,
-    y: number,
-    fontSize: number,
-    color: string,
-    font: string = 'arial',
-    fontStyle: string = 'normal',
-  ): void {
+  private renderText(title: string, x: number, y: number, fontSize: number, color: string, font = 'arial', fontStyle = 'normal'): void {
     const { ctx } = this;
-    ctx.font = `${fontStyle} ${fontSize}px ${font}`;
-    ctx.fillStyle = color;
-    ctx.fillText(title, x, y);
+    if (ctx != null) {
+      ctx.font = `${fontStyle} ${fontSize}px ${font}`;
+      ctx.fillStyle = color;
+      ctx.fillText(title, x, y);
+    }
   }
 
-  private renderPoint(x: number, y: number, radius: number = 3): void {
+  private renderPoint(x: number, y: number, radius = 3): void {
     const { ctx } = this;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fill();
+
+    if (ctx != null) {
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
   }
 
   private renderCallout(title: string, label: string, boundingBox: BoundingBox, color: string, location: string): void {
@@ -172,25 +167,27 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     this.renderLine(x, y, width, dotX, dotY, color, placeLeft);
   }
 
-  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft: boolean = true): void => {
+  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft = true): void => {
     const { ctx } = this;
     const textX = placeLeft ? x : x + width;
     const inverseTextX = placeLeft ? x + width : x;
     const textY = y + 2;
 
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
+    if (ctx != null) {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
 
-    ctx.beginPath();
-    ctx.moveTo(dotX, dotY);
-    ctx.lineTo(textX, textY);
-    ctx.lineTo(inverseTextX, textY);
+      ctx.beginPath();
+      ctx.moveTo(dotX, dotY);
+      ctx.lineTo(textX, textY);
+      ctx.lineTo(inverseTextX, textY);
 
-    ctx.stroke();
+      ctx.stroke();
+    }
   };
 
   private getPosition(boundingBox: BoundingBox, location: string): Point {
-    const { x, y, offsetX, offsetY, width } = boundingBox;
+    const { x, y, offsetX = 0, offsetY = 0, width } = boundingBox;
     switch (location) {
       case Location.topleft:
         return {
@@ -228,7 +225,7 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     yScale: ScaleLinear<number, number>,
     _scale: number,
     fontSize: number,
-    offset: number = 20,
+    offset = 20,
   ): Callout[] {
     if (annotations.length === 0) {
       return [];
@@ -236,12 +233,12 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     const alignment = isLeftToRight ? Location.topleft : Location.topright;
 
     const nodes = annotations.map((a) => {
-      const pos = a.pos ? a.pos : this.referenceSystem.project(a.md);
+      const pos = a.pos ? a.pos : this.referenceSystem?.project(a.md!)!;
       return {
         title: a.title,
         label: a.label,
         color: a.color,
-        pos: { x: pos[0], y: pos[1] },
+        pos: { x: pos?.[0]!, y: pos?.[1]! },
         group: a.group,
         alignment,
         boundingBox: this.getAnnotationBoundingBox(a.title, a.label, pos, xScale, yScale, fontSize),
@@ -250,7 +247,7 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
       };
     });
 
-    const top = [nodes[nodes.length - 1]];
+    const top = [nodes[nodes.length - 1]!];
     const bottom: Callout[] = [];
 
     // Initial best effort
@@ -274,11 +271,11 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     height: number,
   ): { x: number; y: number; width: number; height: number } {
     const { ctx } = this;
-    const ax1 = xScale(pos[0]);
-    const ay1 = yScale(pos[1]);
+    const ax1 = xScale(pos[0]!);
+    const ay1 = yScale(pos[1]!);
 
-    const labelWidth = ctx.measureText(label).width;
-    const titleWidth = ctx.measureText(title).width;
+    const labelWidth = ctx?.measureText(label).width ?? 0;
+    const titleWidth = ctx?.measureText(title).width ?? 0;
     const width = Math.max(labelWidth, titleWidth);
 
     const bbox = {
@@ -292,15 +289,15 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   chooseTopOrBottomPosition(nodes: Callout[], bottom: Callout[], top: Callout[]): void {
     for (let i = nodes.length - 2; i >= 0; --i) {
-      const node = nodes[i];
-      const prevNode = top[0];
+      const node = nodes[i]!;
+      const prevNode = top[0]!;
 
       const overlap = isOverlapping(node.boundingBox, prevNode.boundingBox);
       if (overlap) {
         node.alignment = node.alignment === Location.topleft ? Location.bottomright : Location.bottomleft;
         bottom.push(node);
         if (i > 0) {
-          top.unshift(nodes[--i]);
+          top.unshift(nodes[--i]!);
         }
       } else {
         top.unshift(node);
@@ -310,9 +307,9 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   adjustTopPositions(top: Callout[]): void {
     for (let i = top.length - 2; i >= 0; --i) {
-      const currentNode = top[i];
+      const currentNode = top[i]!;
       for (let j = top.length - 1; j > i; --j) {
-        const prevNode = top[j];
+        const prevNode = top[j]!;
         const overlap = getOverlapOffset(currentNode.boundingBox, prevNode.boundingBox);
         if (overlap) {
           currentNode.dy += overlap.dy;
@@ -324,9 +321,9 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   adjustBottomPositions(bottom: Callout[]): void {
     for (let i = bottom.length - 2; i >= 0; --i) {
-      const currentNode = bottom[i];
+      const currentNode = bottom[i]!;
       for (let j = bottom.length - 1; j > i; --j) {
-        const prevNode = bottom[j];
+        const prevNode = bottom[j]!;
         const overlap = getOverlapOffset(prevNode.boundingBox, currentNode.boundingBox);
         if (overlap) {
           currentNode.dy += overlap.dy;