fix: remove use of any in 1D components and brush tracker

Author: targos

src/component/1d-2d/FieldEdition.tsx

@@ -2,7 +2,7 @@ import type { PopoverProps } from '@blueprintjs/core';
 import { Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
@@ -34,7 +34,7 @@ const validationSchema = (inputType: 'number' | 'text') =>
     value: (inputType === 'number' ? Yup.number() : Yup.string()).required(),
   });
 
-function stopPropagation(e: any) {
+function stopPropagation(e: MouseEvent) {
   e.stopPropagation();
 }
 

src/component/1d/BrushTracker1D.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import type { MouseEvent, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
 import { useOnOff } from 'react-science/ui';
 
@@ -106,7 +106,7 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
 
   const [brushData, setBrushData] = useState<BrushTrackerData | null>(null);
 
-  function handleBrush(brushData: any) {
+  function handleBrush(brushData: BrushTrackerData) {
     const { mouseButton } = brushData;
     const brushDataInPPM = convertToPPM(brushData);
 
@@ -120,7 +120,7 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
       dispatch({ type: 'MOVE', payload: { shiftX, shiftY: 0 } });
     }
   }
-  function handleInsetBrush(brushData: any) {
+  function handleInsetBrush(brushData: BrushTrackerData) {
     const { mouseButton } = brushData;
     const brushDataInPPM = convertToPPM(brushData);
 
@@ -140,13 +140,13 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
   }
 
   const handleBrushEnd = useCallback<OnBrush>(
-    (brushData) => {
+    (brushData: BrushTrackerData) => {
       //reset the brush start
       brushStartRef.current = null;
       setBrushData(brushData);
       const brushDataInPPM = convertToPPM(brushData);
 
-      const keyModifiers = getModifiersKey(brushData as unknown as MouseEvent);
+      const keyModifiers = getModifiersKey(brushData);
 
       const selectRange = sortRange(brushDataInPPM.startX, brushDataInPPM.endX);
 
@@ -339,8 +339,8 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
   );
 
   const handleOnDoubleClick = useCallback(
-    (event: any) => {
-      const keyModifiers = getModifiersKey(event as unknown as MouseEvent);
+    (event: MouseEvent) => {
+      const keyModifiers = getModifiersKey(event);
       if (primaryKeyIdentifier === keyModifiers && !isClickDebounced) return;
 
       dispatch({
@@ -352,8 +352,8 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
   );
 
   const handleInsetOnDoubleClick = useCallback(
-    (event: any) => {
-      const keyModifiers = getModifiersKey(event as unknown as MouseEvent);
+    (event: MouseEvent) => {
+      const keyModifiers = getModifiersKey(event);
       if (primaryKeyIdentifier === keyModifiers) return;
 
       if (!inset) {
@@ -420,7 +420,7 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
         xPPM,
       });
 
-      const keyModifiers = getModifiersKey(event as unknown as MouseEvent);
+      const keyModifiers = getModifiersKey(event);
 
       switch (keyModifiers) {
         case primaryKeyIdentifier: {

src/component/1d/FooterBanner.tsx

@@ -74,15 +74,15 @@ function FooterBannerInner({
     return <FooterContainer />;
   }
 
-  function getXIndex(xPosition: any) {
+  function getXIndex(xPosition: number) {
     if (spectrum) {
       const data = get1DDataXY(spectrum);
       return xFindClosestIndex(data.x, scaleX().invert(xPosition));
     }
     return 0;
   }
 
-  function getYValue(xPosition: any) {
+  function getYValue(xPosition: number) {
     if (spectrum) {
       const data = get1DDataXY(spectrum);
       const xIndex = getXIndex(xPosition);

src/component/1d/LinesSeries.tsx

@@ -94,8 +94,8 @@ function HeadlightRectStackMode(props: HeadlightRectStackModeProps) {
       x={margin.left}
       width={`${innerWidth}px`}
       height={`${BOX_SIZE}px`}
-      onClick={(e) => {
-        setActiveSpectrum(e as unknown as MouseEvent, spectrumID);
+      onClick={(event) => {
+        setActiveSpectrum(event, spectrumID);
       }}
       data-no-export="true"
     />

src/component/1d/SimilarityTree.tsx

@@ -1,3 +1,4 @@
+import type { Tree } from 'ml-tree-similarity';
 import { createTree } from 'ml-tree-similarity';
 import type { CSSProperties } from 'react';
 import { Fragment } from 'react';
@@ -93,9 +94,9 @@ interface TreeItem {
 }
 
 function mapTreeToArray(
-  node: any,
+  node: Tree | null,
   level: number,
-  parentCenter = null,
+  parentCenter: number | null = null,
   parentLevel = -1,
 ): TreeItem[] {
   if (!node) return [];

src/component/1d/integral/IntegralResizable.tsx

@@ -5,6 +5,7 @@ import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
 import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import type { Position } from '../../elements/resizer/SVGResizer.tsx';
 import { useHighlight } from '../../highlight/index.js';
 import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
@@ -41,7 +42,7 @@ function IntegralResizable({
     extra: { id, spectrumID: spectrum.id },
   });
 
-  function handleOnStopResizing(position: any) {
+  function handleOnStopResizing(position: Position) {
     dispatch({
       type: 'RESIZE_INTEGRAL',
       payload: {

src/component/1d/matrix/Boxplot.tsx

@@ -43,7 +43,7 @@ interface UsePathAreaPoints {
   y2: NumberArray;
 }
 
-function useYScale(scaleRatio: number, yDomain: any) {
+function useYScale(scaleRatio: number, yDomain: number[]) {
   const { margin, height } = useChartData();
   const { spectraBottomMargin } = useScaleChecked();
 
@@ -59,7 +59,7 @@ function useYScale(scaleRatio: number, yDomain: any) {
 function usePath(
   pathPoints: UsePathLinePoints,
   scaleRatio: number,
-  yDomain: any,
+  yDomain: number[],
 ) {
   const { scaleX } = useScaleChecked();
   const scaleY = useYScale(scaleRatio, yDomain);
@@ -78,7 +78,7 @@ function usePath(
 function useAreaPath(
   pathPoints: UsePathAreaPoints,
   scaleRatio: number,
-  yDomain: any,
+  yDomain: number[],
 ) {
   const { scaleX } = useScaleChecked();
   const scaleY = useYScale(scaleRatio, yDomain);

src/component/1d/multiAnalysis/AnalysisRange.tsx

@@ -4,6 +4,7 @@ import { useCallback } from 'react';
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
 import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import type { Position } from '../../elements/resizer/SVGResizer.tsx';
 import { useHighlight } from '../../highlight/index.js';
 import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
@@ -34,7 +35,7 @@ function AnalysisRange({
   const { dispatch } = usePreferences();
 
   const resizeEndHandler = useCallback(
-    (resized: any) => {
+    (resized: Position) => {
       const { x1, x2 } = resized;
       const start = scaleX().invert(x2);
       const end = scaleX().invert(x1);

src/component/1d/peaks/PeakEditionManager.tsx

@@ -1,5 +1,10 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import type { KeyboardEvent, PropsWithChildren, ReactNode } from 'react';
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
 import {
   createContext,
   useCallback,
@@ -60,7 +65,7 @@ function usePeaksEditionManager() {
   return context;
 }
 
-function stopPropagation(e: any) {
+function stopPropagation(e: MouseEvent) {
   e.stopPropagation();
 }
 

src/component/1d/peaks/Peaks.tsx

@@ -170,7 +170,11 @@ const MemoizedPeaksPanel = memo(InnerPeaks);
 
 const emptyData = { peaks: {}, ranges: {}, info: {}, display: {} };
 
-export default function Peaks(props: any) {
+interface PeaksProps {
+  peaksSource: PeaksSource;
+}
+
+export default function Peaks(props: PeaksProps) {
   const { peaksSource } = props;
   const {
     view: {