refactor: remove some 'any' types (#2644)

src/component/1d/ExclusionZonesAnnotations.tsx

@@ -12,7 +12,7 @@ import ExclusionZoneAnnotation from './ExclusionZoneAnnotation';
 interface ExclusionZonesAnnotationsInnerProps {
   displayerKey: string;
   spectra: Spectrum1D[];
-  xDomains: any;
+  xDomains: Record<string, number[]>;
   shiftY: number;
 }
 

src/component/1d/database/ResurrectedDatabaseRanges.tsx

@@ -32,7 +32,7 @@ function ResurrectedDatabaseRanges() {
 
   const { ranges = [] } = highlight.sourceData.extra || {};
 
-  const yDomain: any[] = [0, 0];
+  const yDomain: number[] = [0, 0];
 
   const spectra = ranges.map((range) => {
     const { from, to } = range;

src/component/1d/multiplicityTree/MultiplicityTree.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { Spectrum1D } from 'nmr-load-save';
-import { Range, checkMultiplicity } from 'nmr-processing';
+import { Range, Signal1D, checkMultiplicity } from 'nmr-processing';
 import { CSSProperties, useMemo } from 'react';
 
 import {
@@ -18,7 +18,7 @@ import { AssignmentActionsButtons } from '../ranges/AssignmentActionsButtons';
 import LevelNode from './LevelNode';
 import StringNode from './StringNode';
 import TreeNodes from './TreeNodes';
-import createTreeNodes from './buildTreeNode';
+import createTreeNodes, { TreeNodeData } from './buildTreeNode';
 
 const styles = {
   cursor: 'default',
@@ -156,11 +156,21 @@ export function MultiplicityTree(props: MultiplicityTreeProps) {
     </g>
   );
 }
-
+interface TreeResult {
+  isMassive: boolean;
+  startX: number;
+  startY: number;
+  width: number;
+  height: number;
+  levelHeight: number;
+  nodes: TreeNodeData[];
+  signal: Signal1D;
+  range: Omit<Range, 'signals'>;
+}
 function getTree(range: Range, spectrum: Spectrum1D, scale) {
   const SHIFT_X = 30;
 
-  const treeResult: any[] = [];
+  const treeResult: TreeResult[] = [];
 
   const { signals = [], ...otherRangeProps } = range;
   for (const signal of signals) {
@@ -169,7 +179,7 @@ function getTree(range: Range, spectrum: Spectrum1D, scale) {
     let width = 0;
     let height = 0;
     let levelHeight = 0;
-    let nodes = [];
+    const nodes: TreeNodeData[] = [];
     let startX = 0;
 
     const { from, to } = range;
@@ -179,9 +189,10 @@ function getTree(range: Range, spectrum: Spectrum1D, scale) {
       const jIndices = signal.multiplicity
         .split('')
         .map((_mult, i) => (hasCouplingConstant(_mult) ? i : undefined))
-        .filter((_i) => _i !== undefined);
+        .filter((i) => i !== undefined) as number[];
 
-      nodes = buildTreeNodesData(0, jIndices, [], signal.delta);
+      const treeNodes = buildTreeNodesData(0, jIndices, [], signal.delta);
+      if (treeNodes) nodes.push(...treeNodes);
     }
 
     // +2 because of multiplicity text and start level node before the actual tree starts

src/component/1d/multiplicityTree/buildTreeNode.ts

@@ -1,4 +1,5 @@
 import lodashGet from 'lodash/get';
+import { Spectrum1D } from 'nmr-load-save';
 import { Signal1D } from 'nmr-processing';
 
 import {
@@ -8,12 +9,20 @@ import {
 
 import { TREE_LEVEL_COLORS } from './TreeColors';
 
-function createTreeNodes(signal: Signal1D, spectrumData) {
+export interface TreeNodeData {
+  startX: number;
+  _startX: number;
+  ratio: number;
+  multiplicityIndex: number;
+  color: string;
+}
+
+function createTreeNodes(signal: Signal1D, spectrumData: Spectrum1D) {
   function buildTreeNodesData(
-    multiplicityIndex,
-    jIndices,
-    treeNodesData,
-    startX,
+    multiplicityIndex: number,
+    jIndices: number[],
+    treeNodesData: TreeNodeData[],
+    startX: number,
   ) {
     if (!signal.multiplicity) {
       return null;

src/component/2d/Viewer2D.tsx

@@ -1,5 +1,7 @@
+import { Spectrum1D } from 'nmr-load-save';
 import { useCallback, useEffect, useMemo, ReactNode, useRef } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
+import { assert } from 'react-science/ui';
 
 import BrushXY, { BRUSH_TYPE } from '../1d-2d/tools/BrushXY';
 import CrossLinePointer from '../1d-2d/tools/CrossLinePointer';
@@ -44,20 +46,22 @@ function Viewer2D({ emptyText = undefined }: Viewer2DProps) {
   const dispatch = useDispatch();
   const brushStartRef = useRef<{ x: number; y: number } | null>(null);
 
-  const spectrumData: any[] = useMemo(() => {
+  const spectrumData: Spectrum1D[] = useMemo(() => {
     const nuclei = activeTab.split(',');
-
-    return nuclei.map((nucleus) => {
-      const spectra = activeSpectra[nucleus];
-      if (spectra?.length === 1) {
-        const id = spectra[0].id;
-        const spectrum = data.find(
-          (datum) => datum.id === id && !datum.info.isFid,
-        );
-        return spectrum;
-      }
-      return null;
-    });
+    return nuclei
+      .map((nucleus) => {
+        const spectra = activeSpectra[nucleus];
+        if (spectra?.length === 1) {
+          const id = spectra[0].id;
+          const spectrum = data.find(
+            (datum) => datum.id === id && !datum.info.isFid,
+          );
+          assert(spectrum, `Spectrum with id ${id} not found`);
+          return spectrum;
+        }
+        return null;
+      })
+      .filter((d) => d !== null) as Spectrum1D[];
   }, [activeTab, data, activeSpectra]);
 
   const DIMENSION = get2DDimensionLayout(state);
@@ -253,7 +257,7 @@ function Viewer2D({ emptyText = undefined }: Viewer2DProps) {
 interface ViewerResponsiveWrapperProps {
   width: number;
   height: number;
-  children: any;
+  children: ReactNode;
 }
 
 export function ViewerResponsiveWrapper(props: ViewerResponsiveWrapperProps) {

src/component/elements/ColorInput.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { useCallback, memo, useState, useEffect } from 'react';
-import { ColorPicker } from 'react-science/ui';
+import { ColorPicker, ColorPickerProps } from 'react-science/ui';
 
 const style = css`
   display: flex;
@@ -67,7 +67,7 @@ const style = css`
 export interface ColorInputProps {
   value?: string;
   name: string;
-  onColorChange?: (element: any) => void;
+  onColorChange?: ColorPickerProps['onChangeComplete'];
 }
 
 function ColorInput(props: ColorInputProps) {

src/component/elements/ContextMenu.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useEffect,
   forwardRef,
+  MouseEvent,
 } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -49,25 +50,28 @@ const styles = css`
     border: none;
   }
 `;
-interface ContextMenuItem {
-  onClick: <T>(data: T) => void;
+interface ContextMenuItem<T> {
+  onClick: (data?: T) => void;
   label: string;
 }
 
-export interface ContextMenuProps {
-  context: ContextMenuItem[] | null;
+export interface ContextMenuProps<T = unknown> {
+  context: Array<ContextMenuItem<T>>;
 }
 // TODO: remove this hacky ref usage.
-function ContextMenu({ context }: ContextMenuProps, ref: any) {
-  const [position, setPosition] = useState<{ left: any; top: any }>({
+function ContextMenu<T = unknown>({ context }: ContextMenuProps<T>, ref: any) {
+  const [position, setPosition] = useState<{
+    left: string | number;
+    top: string | number;
+  }>({
     left: 0,
     top: 0,
   });
   const { rootRef, elementsWrapperRef } = useGlobal();
-  const [data, setData] = useState();
+  const [data, setData] = useState<T>();
   const [isVisible, show] = useState<boolean>();
   const [sourceElement, setSourceElement] = useState(null);
-  const root = useRef<any>();
+  const root = useRef<HTMLDivElement>();
 
   useEffect(() => {
     root.current = document.createElement('div');
@@ -94,37 +98,23 @@ function ContextMenu({ context }: ContextMenuProps, ref: any) {
     const rootH = 0;
 
     const right = screenW - clickX > rootW;
-    let left: any = !right;
-    let top: any = screenH - clickY > rootH;
-    const bottom = !top;
-    if (right) {
-      left = `${clickX + 5}px`;
-    }
-
-    if (left) {
-      left = `${clickX - rootW - 5}px`;
-    }
+    const bottom = screenH - clickY <= rootH;
 
-    if (top) {
-      top = `${clickY + 5}px`;
-    }
-
-    if (bottom) {
-      top = `${clickY - rootH - 5}px`;
-    }
+    const left = right ? `${clickX + 5}px` : `${clickX - rootW - 5}px`;
+    const top = bottom ? `${clickY - rootH - 5}px` : `${clickY + 5}px`;
 
     setPosition({ left, top });
   };
 
   useImperativeHandle(ref, () => ({
-    handleContextMenu: (e, _data) => {
+    handleContextMenu: (e, _data: T) => {
       setData(_data);
       contextMenuHandler(e);
     },
   }));
 
   const clickHandler = useCallback(
-    (event, click) => {
+    (event: MouseEvent, click: (data?: T) => void) => {
       event.preventDefault();
       click(data);
       show(false);

src/component/elements/EditableColumn.tsx

@@ -21,13 +21,13 @@ function extractNumber(val: string | number, type: string) {
 
 interface EditableColumnProps
   extends Omit<InputProps, 'style' | 'value' | 'type'> {
-  onSave?: (element: any) => void;
-  onEditStart?: (element: any) => void;
+  onSave?: (element: KeyboardEvent<HTMLInputElement>) => void;
+  onEditStart?: (element: boolean) => void;
   type?: 'number' | 'text';
   editStatus?: boolean;
   value: string | number;
   style?: CSSProperties;
-  validate?: (value?: any) => boolean;
+  validate?: (value?: string | number) => boolean;
   textOverFlowEllipses?: boolean;
 }
 

src/component/elements/InputRange.tsx

@@ -34,7 +34,7 @@ const styles: Record<'container' | 'label', CSSProperties> = {
 interface InputRangeProps {
   name: string;
   value?: number;
-  onChange: (element: any) => void;
+  onChange: (element: { value: number; name: string }) => void;
   label?: string;
   shortLabel?: string;
   style?: CSSProperties;

src/component/elements/MenuButton.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import { SerializedStyles, css } from '@emotion/react';
 import { ReactNode, useState, useCallback, useRef } from 'react';
 
 import ToolTip from './ToolTip/ToolTip';
@@ -70,14 +70,24 @@ function MenuItem({ icon, label, onClick }: MenuItemProps) {
     </button>
   );
 }
+export interface BoundingBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
 
 interface MenuListProps {
   items: Array<MenuItemProps & { id: string }>;
   onClick: (element: MenuItemProps & { id: string }) => void;
-  boxBounding: any;
+  boxBounding?: BoundingBox;
 }
 
-function MenuList({ items, boxBounding, onClick }: MenuListProps) {
+function MenuList({
+  items,
+  boxBounding = { x: 0, y: 0, width: 0, height: 0 },
+  onClick,
+}: MenuListProps) {
   return (
     <div
       className="menu"
@@ -94,13 +104,11 @@ function MenuList({ items, boxBounding, onClick }: MenuListProps) {
   );
 }
 
-interface MenuButtonProps {
-  style?: any;
-  component: any;
+interface MenuButtonProps extends Pick<MenuListProps, 'items' | 'onClick'> {
+  style?: SerializedStyles;
+  component: ReactNode;
   toolTip: string;
   className?: string;
-  items: any[];
-  onClick: (element: any) => void;
 }
 
 export default function MenuButton({

src/component/elements/NextPrev.tsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import {
-  ReactNode,
   useState,
   Children,
   useMemo,
   useEffect,
   useCallback,
   memo,
   CSSProperties,
+  ReactElement,
 } from 'react';
 import { FaAngleLeft } from 'react-icons/fa';
 import { useMeasure } from 'react-use';
@@ -63,7 +63,7 @@ function Arrow({ direction, onClick, style = {} }: ArrowProps) {
 const transition = 0.45;
 
 interface NextPrevProps {
-  children: ReactNode;
+  children: ReactElement | ReactElement[];
   loop?: boolean;
   defaultIndex?: number;
   onChange?: (element: number) => void;
@@ -86,7 +86,7 @@ function NextPrev(props: NextPrevProps) {
 
   const Sliders = useMemo(
     () =>
-      Children.map(children, (child: any) => {
+      Children.map(children, (child: ReactElement) => {
         return (
           <div
             key={child.key}

src/component/elements/NumberInput.tsx

@@ -13,9 +13,9 @@ export interface NumberInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
   pattern?: string;
   name?: string;
-  step?: any;
-  min?: any;
-  max?: any;
+  step?: string;
+  min?: number | string;
+  max?: number | string;
   value?: number;
   style?: CSSProperties;
   autoSelect?: boolean;