Chore: more any/type assertion improvements (#59229)

more any/type assertion improvements

.betterer.results

@@ -6644,16 +6644,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -6665,22 +6657,13 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/plugins/datasource/prometheus/querybuilder/shared/parsingUtils.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "public/app/plugins/datasource/prometheus/querybuilder/state.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "public/app/plugins/datasource/prometheus/querybuilder/state.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/plugins/datasource/prometheus/result_transformer.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -6716,8 +6699,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "31"]
     ],
     "public/app/plugins/datasource/prometheus/result_transformer.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/datasource/prometheus/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -6727,8 +6709,7 @@ exports[`better eslint`] = {
     ],
     "public/app/plugins/datasource/tempo/QueryEditor/QueryField.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "1"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/plugins/datasource/tempo/QueryEditor/ServiceGraphSection.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -6762,16 +6743,15 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
+      [0, 0, 0, "Do not use any type assertions.", "8"],
       [0, 0, 0, "Do not use any type assertions.", "9"],
       [0, 0, 0, "Do not use any type assertions.", "10"],
       [0, 0, 0, "Do not use any type assertions.", "11"],
       [0, 0, 0, "Do not use any type assertions.", "12"],
-      [0, 0, 0, "Do not use any type assertions.", "13"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "16"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "16"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "17"]
     ],
     "public/app/plugins/datasource/tempo/language_provider.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -6805,33 +6785,7 @@ exports[`better eslint`] = {
     ],
     "public/app/plugins/datasource/tempo/traceql/autocomplete.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "16"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "17"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "18"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "19"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "20"]
-    ],
-    "public/app/plugins/datasource/tempo/traceql/autocomplete.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
     ],
     "public/app/plugins/datasource/testdata/ConfigEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -6988,9 +6942,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/plugins/panel/barchart/TickSpacingEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/barchart/bars.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -7007,29 +6958,10 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/barchart/quadtree.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/barchart/suggestions.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "public/app/plugins/panel/barchart/utils.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
-    ],
     "public/app/plugins/panel/barchart/utils.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/panel/bargauge/BarGaugeMigrations.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/plugins/panel/bargauge/BarGaugePanel.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/candlestick/CandlestickPanel.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -7099,8 +7031,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
     "public/app/plugins/panel/canvas/utils.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/panel/dashlist/module.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -7117,12 +7048,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/debug/RenderInfoViewer.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/flamegraph/components/FlameGraphHeader.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/gauge/GaugeMigrations.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/gauge/GaugeMigrations.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -7140,16 +7065,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
-    "public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
     "public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/panel/geomap/editor/StyleEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"],
@@ -7160,8 +7081,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "8"],
       [0, 0, 0, "Do not use any type assertions.", "9"],
       [0, 0, 0, "Do not use any type assertions.", "10"],
-      [0, 0, 0, "Do not use any type assertions.", "11"],
+      [0, 0, 0, "Do not use any type assertions.", "11"]
-      [0, 0, 0, "Do not use any type assertions.", "12"]
     ],
     "public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -7187,9 +7107,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
-    "public/app/plugins/panel/geomap/style/utils.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/geomap/utils/layers.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
@@ -7201,14 +7118,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/plugins/panel/geomap/view.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
-    "public/app/plugins/panel/gettingstarted/GettingStarted.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/gettingstarted/components/Step.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -7554,9 +7463,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "public/app/plugins/panel/graph/utils.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/heatmap-old/axes_editor.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -7833,31 +7739,19 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/plugins/panel/nodeGraph/Edge.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
     "public/app/plugins/panel/nodeGraph/EdgeLabel.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/nodeGraph/Legend.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
-    ],
     "public/app/plugins/panel/nodeGraph/Legend.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/nodeGraph/Node.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/plugins/panel/nodeGraph/NodeGraph.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [0, 0, 0, "Do not use any type assertions.", "3"]
-      [0, 0, 0, "Do not use any type assertions.", "4"]
     ],
     "public/app/plugins/panel/nodeGraph/ViewControls.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx

@@ -166,7 +166,7 @@ export function OperationEditor({
 function useFlash(flash?: boolean) {
   const [keepFlash, setKeepFlash] = useState(true);
   useEffect(() => {
-    let t: any;
+    let t: ReturnType<typeof setTimeout>;
     if (flash) {
       t = setTimeout(() => {
         setKeepFlash(false);

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
+import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { FlexItem } from '@grafana/experimental';
@@ -13,7 +14,7 @@ export interface Props {
   def: QueryBuilderOperationDef;
   index: number;
   queryModeller: VisualQueryModeller;
-  dragHandleProps: any;
+  dragHandleProps?: DraggableProvidedDragHandleProps;
   onChange: (index: number, update: QueryBuilderOperation) => void;
   onRemove: (index: number) => void;
 }

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.test.tsx

@@ -2,11 +2,12 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { DataSourceApi } from '@grafana/data';
+import { DataSourceApi, DataSourceInstanceSettings } from '@grafana/data';
 
 import { PrometheusDatasource } from '../../datasource';
 import PromQlLanguageProvider from '../../language_provider';
 import { EmptyLanguageProviderMock } from '../../language_provider.mock';
+import { PromOptions } from '../../types';
 import { promQueryModeller } from '../PromQueryModeller';
 import { PromVisualQuery } from '../types';
 
@@ -69,8 +70,8 @@ function setup(query: PromVisualQuery = defaultQuery) {
       {
         url: '',
         jsonData: {},
-        meta: {} as any,
+        meta: {},
-      } as any,
+      } as DataSourceInstanceSettings<PromOptions>,
       undefined,
       undefined,
       languageProvider

public/app/plugins/datasource/prometheus/querybuilder/shared/parsingUtils.ts

@@ -1,6 +1,6 @@
 import { SyntaxNode, TreeCursor } from '@lezer/common';
 
-import { QueryBuilderOperation } from './types';
+import { QueryBuilderOperation, QueryBuilderOperationParamValue } from './types';
 
 // Although 0 isn't explicitly provided in the lezer-promql & @grafana/lezer-logql library as the error node ID, it does appear to be the ID of error nodes within lezer.
 export const ErrorId = 0;
@@ -97,7 +97,7 @@ export function makeBinOp(
   numberNode: SyntaxNode,
   hasBool: boolean
 ): QueryBuilderOperation {
-  const params: any[] = [parseFloat(getString(expr, numberNode))];
+  const params: QueryBuilderOperationParamValue[] = [parseFloat(getString(expr, numberNode))];
   if (opDef.comparison) {
     params.push(hasBool);
   }
@@ -184,7 +184,7 @@ function jsonToText(
   let text = newIndent + name;
 
   const children = node.children;
-  children.forEach((child: any, index: number) => {
+  children.forEach((child, index) => {
     const isLastChild = index === children.length - 1;
     text +=
       '\n' +

public/app/plugins/datasource/prometheus/querybuilder/state.test.ts

@@ -17,7 +17,7 @@ describe('getQueryWithDefaults(', () => {
   });
 
   it('should set both range and instant to true when in Explore', () => {
-    expect(getQueryWithDefaults({ refId: 'A' } as any, CoreApp.Explore)).toEqual({
+    expect(getQueryWithDefaults({ refId: 'A' } as PromQuery, CoreApp.Explore)).toEqual({
       editorMode: 'builder',
       expr: '',
       legendFormat: '__auto',
@@ -45,6 +45,8 @@ describe('getQueryWithDefaults(', () => {
       expect(query.editorMode).toBe(QueryEditorMode.Code);
     });
 
-    expect(getQueryWithDefaults({ refId: 'A' } as any, CoreApp.Dashboard).editorMode).toEqual(QueryEditorMode.Code);
+    expect(getQueryWithDefaults({ refId: 'A' } as PromQuery, CoreApp.Dashboard).editorMode).toEqual(
+      QueryEditorMode.Code
+    );
   });
 });

public/app/plugins/datasource/prometheus/querybuilder/state.ts

@@ -22,7 +22,7 @@ function getDefaultEditorMode(expr: string) {
     return QueryEditorMode.Code;
   }
 
-  const value = store.get(queryEditorModeDefaultLocalStorageKey) as QueryEditorMode;
+  const value: QueryEditorMode = store.get(queryEditorModeDefaultLocalStorageKey);
   switch (value) {
     case QueryEditorMode.Builder:
     case QueryEditorMode.Code:

public/app/plugins/datasource/prometheus/result_transformer.ts

@@ -156,13 +156,13 @@ export function transformV2(
 
   // Everything else is processed as time_series result and graph preferredVisualisationType
   const otherFrames = framesWithoutTableHeatmapsAndExemplars.map((dataFrame) => {
-    const df = {
+    const df: DataFrame = {
       ...dataFrame,
       meta: {
         ...dataFrame.meta,
         preferredVisualisationType: 'graph',
       },
-    } as DataFrame;
+    };
     return df;
   });
 

public/app/plugins/datasource/tempo/QueryEditor/QueryField.tsx

@@ -214,7 +214,7 @@ function SearchSection({ logsDatasourceUid, onChange, onRunQuery, query }: Searc
           datasource={ds}
           onChange={onChange}
           onRunQuery={onRunQuery}
-          query={query.linkedQuery ?? ({ refId: 'linked' } as any)}
+          query={query.linkedQuery ?? ({ refId: 'linked' } as LokiQuery)}
           history={[]}
         />
       </>

public/app/plugins/datasource/tempo/datasource.ts

@@ -366,7 +366,7 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
       method: 'GET',
       url: `${this.instanceSettings.url}/api/echo`,
     };
-    const response = await lastValueFrom(getBackendSrv().fetch<any>(options));
+    const response = await lastValueFrom(getBackendSrv().fetch(options));
 
     if (response?.ok) {
       return { status: 'success', message: 'Data source is working' };

public/app/plugins/datasource/tempo/traceql/autocomplete.test.ts

@@ -1,4 +1,4 @@
-import { DataSourceInstanceSettings, PluginType } from '@grafana/data/src';
+import { DataSourceInstanceSettings, PluginMetaInfo, PluginType } from '@grafana/data';
 import { monacoTypes } from '@grafana/ui';
 
 import { TempoDatasource } from '../datasource';
@@ -14,7 +14,10 @@ jest.mock('@grafana/runtime', () => ({
 describe('CompletionProvider', () => {
   it('suggests tags, intrinsics and scopes', async () => {
     const { provider, model } = setup('{}', 1, defaultTags);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       ...CompletionProvider.scopes.map((s) => expect.objectContaining({ label: s, insertText: s })),
       ...CompletionProvider.intrinsics.map((s) => expect.objectContaining({ label: s, insertText: s })),
@@ -38,7 +41,10 @@ describe('CompletionProvider', () => {
         })
     );
 
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       expect.objectContaining({ label: 'foobar', insertText: '"foobar"' }),
     ]);
@@ -59,7 +65,10 @@ describe('CompletionProvider', () => {
         })
     );
 
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       expect.objectContaining({ label: 'foobar', insertText: 'foobar' }),
     ]);
@@ -67,13 +76,19 @@ describe('CompletionProvider', () => {
 
   it('suggests nothing without tags', async () => {
     const { provider, model } = setup('{foo="}', 7, []);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([]);
   });
 
   it('suggests tags on empty input', async () => {
     const { provider, model } = setup('', 0, defaultTags);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       ...CompletionProvider.scopes.map((s) => expect.objectContaining({ label: s, insertText: `{ ${s}` })),
       ...CompletionProvider.intrinsics.map((s) => expect.objectContaining({ label: s, insertText: `{ ${s}` })),
@@ -84,7 +99,10 @@ describe('CompletionProvider', () => {
 
   it('suggests operators after a space after the tag name', async () => {
     const { provider, model } = setup('{ foo }', 6, defaultTags);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual(
       CompletionProvider.operators.map((s) => expect.objectContaining({ label: s, insertText: s }))
     );
@@ -92,7 +110,10 @@ describe('CompletionProvider', () => {
 
   it('suggests tags after a scope', async () => {
     const { provider, model } = setup('{ resource. }', 11, defaultTags);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       ...CompletionProvider.intrinsics.map((s) => expect.objectContaining({ label: s, insertText: s })),
       ...defaultTags.map((s) => expect.objectContaining({ label: s, insertText: s })),
@@ -101,7 +122,10 @@ describe('CompletionProvider', () => {
 
   it('suggests logical operators and close bracket after the value', async () => {
     const { provider, model } = setup('{foo=300 }', 9, defaultTags);
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       ...CompletionProvider.logicalOps.map((s) => expect.objectContaining({ label: s, insertText: s })),
       expect.objectContaining({ label: '}', insertText: '}' }),
@@ -122,7 +146,10 @@ describe('CompletionProvider', () => {
           ]);
         })
     );
-    const result = await provider.provideCompletionItems(model as any, {} as any);
+    const result = await provider.provideCompletionItems(
+      model as unknown as monacoTypes.editor.ITextModel,
+      {} as monacoTypes.Position
+    );
     expect((result! as monacoTypes.languages.CompletionList).suggestions).toEqual([
       expect.objectContaining({ label: 'foobar', insertText: 'foobar' }),
     ]);
@@ -185,7 +212,7 @@ const defaultSettings: DataSourceInstanceSettings<TempoJsonData> = {
     id: 'tempo',
     name: 'tempo',
     type: PluginType.datasource,
-    info: {} as any,
+    info: {} as PluginMetaInfo,
     module: '',
     baseUrl: '',
   },

public/app/plugins/datasource/tempo/traceql/autocomplete.ts

@@ -124,7 +124,7 @@ export class CompletionProvider implements monacoTypes.languages.CompletionItemP
         return CompletionProvider.operators.map((key) => ({
           label: key,
           insertText: key,
-          type: 'OPERATOR' as CompletionType,
+          type: 'OPERATOR',
         }));
       case 'SPANSET_IN_VALUE':
         const tagName = this.overrideTagName(situation.tagName);
@@ -144,7 +144,7 @@ export class CompletionProvider implements monacoTypes.languages.CompletionItemP
         return CompletionProvider.logicalOps.concat('}').map((key) => ({
           label: key,
           insertText: key,
-          type: 'OPERATOR' as CompletionType,
+          type: 'OPERATOR',
         }));
       default:
         throw new Error(`Unexpected situation ${situation}`);
@@ -157,7 +157,7 @@ export class CompletionProvider implements monacoTypes.languages.CompletionItemP
       .map((key) => ({
         label: key,
         insertText: (prepend || '') + key,
-        type: 'TAG_NAME' as CompletionType,
+        type: 'TAG_NAME',
       }));
   }
 
@@ -165,7 +165,7 @@ export class CompletionProvider implements monacoTypes.languages.CompletionItemP
     return CompletionProvider.intrinsics.map((key) => ({
       label: key,
       insertText: (prepend || '') + key,
-      type: 'KEYWORD' as CompletionType,
+      type: 'KEYWORD',
     }));
   }
 
@@ -173,7 +173,7 @@ export class CompletionProvider implements monacoTypes.languages.CompletionItemP
     return CompletionProvider.scopes.map((key) => ({
       label: key,
       insertText: (prepend || '') + key,
-      type: 'SCOPE' as CompletionType,
+      type: 'SCOPE',
     }));
   }
 

public/app/plugins/panel/barchart/TickSpacingEditor.tsx

@@ -26,7 +26,7 @@ const GAPS_OPTIONS: Array<SelectableValue<number>> = [
   },
 ];
 
-export const TickSpacingEditor: React.FC<StandardEditorProps<number, any>> = (props) => {
+export const TickSpacingEditor: React.FC<StandardEditorProps<number>> = (props) => {
   let value = props.value ?? 0;
   const isRTL = value < 0;
   if (isRTL) {

public/app/plugins/panel/barchart/suggestions.ts

@@ -1,5 +1,5 @@
 import { VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data';
-import { StackingMode, VisibilityMode } from '@grafana/schema';
+import { LegendDisplayMode, StackingMode, VisibilityMode } from '@grafana/schema';
 import { SuggestionName } from 'app/types/suggestions';
 
 import { PanelFieldConfig, PanelOptions } from './models.gen';
@@ -12,9 +12,11 @@ export class BarChartSuggestionsSupplier {
       options: {
         showValue: VisibilityMode.Never,
         legend: {
+          calcs: [],
+          displayMode: LegendDisplayMode.List,
           showLegend: true,
           placement: 'right',
-        } as any,
+        },
       },
       fieldConfig: {
         defaults: {

public/app/plugins/panel/barchart/utils.test.ts

@@ -19,7 +19,7 @@ import {
   SortOrder,
 } from '@grafana/schema';
 
-import { PanelFieldConfig } from './models.gen';
+import { PanelFieldConfig, PanelOptions } from './models.gen';
 import { BarChartOptionsEX, prepareBarChartDisplayValues, preparePlotConfigBuilder } from './utils';
 
 function mockDataFrame() {
@@ -69,7 +69,7 @@ function mockDataFrame() {
     state: {},
   });
 
-  const info = prepareBarChartDisplayValues([df1], createTheme(), {} as any);
+  const info = prepareBarChartDisplayValues([df1], createTheme(), {} as PanelOptions);
 
   if (!('aligned' in info)) {
     throw new Error('Bar chart not prepared correctly');
@@ -158,7 +158,7 @@ describe('BarChart utils', () => {
 
   describe('prepareGraphableFrames', () => {
     it('will warn when there is no data in the response', () => {
-      const result = prepareBarChartDisplayValues([], createTheme(), { stacking: StackingMode.None } as any);
+      const result = prepareBarChartDisplayValues([], createTheme(), { stacking: StackingMode.None } as PanelOptions);
       const warning = assertIsDefined('warn' in result ? result : null);
 
       expect(warning.warn).toEqual('No data in response');
@@ -171,7 +171,7 @@ describe('BarChart utils', () => {
           { name: 'value', values: [1, 2, 3, 4, 5] },
         ],
       });
-      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as any);
+      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as PanelOptions);
       const warning = assertIsDefined('warn' in result ? result : null);
       expect(warning.warn).toEqual('Bar charts requires a string or time field');
       expect(warning).not.toHaveProperty('viz');
@@ -184,7 +184,7 @@ describe('BarChart utils', () => {
           { name: 'value', type: FieldType.boolean, values: [true, true, true, true, true] },
         ],
       });
-      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as any);
+      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as PanelOptions);
       const warning = assertIsDefined('warn' in result ? result : null);
       expect(warning.warn).toEqual('No numeric fields found');
       expect(warning).not.toHaveProperty('viz');
@@ -197,7 +197,7 @@ describe('BarChart utils', () => {
           { name: 'value', values: [-10, NaN, 10, -Infinity, +Infinity] },
         ],
       });
-      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as any);
+      const result = prepareBarChartDisplayValues([df], createTheme(), { stacking: StackingMode.None } as PanelOptions);
       const displayValues = assertIsDefined('viz' in result ? result : null);
 
       const field = displayValues.viz[0].fields[1];
@@ -224,7 +224,7 @@ describe('BarChart utils', () => {
 
       const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), {
         legend: { sortBy: 'Min', sortDesc: false },
-      } as any);
+      } as PanelOptions);
       const displayValuesAsc = assertIsDefined('viz' in resultAsc ? resultAsc : null).viz[0];
       expect(displayValuesAsc.fields[0].type).toBe(FieldType.string);
       expect(displayValuesAsc.fields[1].name).toBe('a');
@@ -233,7 +233,7 @@ describe('BarChart utils', () => {
 
       const resultDesc = prepareBarChartDisplayValues([frame], createTheme(), {
         legend: { sortBy: 'Min', sortDesc: true },
-      } as any);
+      } as PanelOptions);
       const displayValuesDesc = assertIsDefined('viz' in resultDesc ? resultDesc : null).viz[0];
       expect(displayValuesDesc.fields[0].type).toBe(FieldType.string);
       expect(displayValuesDesc.fields[1].name).toBe('b');

public/app/plugins/panel/bargauge/BarGaugeMigrations.test.ts

@@ -49,7 +49,7 @@ describe('BarGauge Panel Migrations', () => {
     const newOptions = barGaugePanelMigrationHandler(panel as PanelModel);
 
     // should mutate panel model and move field config out of panel.options
-    expect((panel as any).fieldConfig).toMatchInlineSnapshot(`
+    expect((panel as PanelModel).fieldConfig).toMatchInlineSnapshot(`
       Object {
         "defaults": Object {
           "color": Object {

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -111,7 +111,7 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
 }
 export type BarGaugePanelProps = PanelProps<PanelOptions>;
 
-export function clearNameForSingleSeries(count: number, field: FieldConfig<any>, display: DisplayValue): DisplayValue {
+export function clearNameForSingleSeries(count: number, field: FieldConfig, display: DisplayValue): DisplayValue {
   if (count === 1 && !field.displayName) {
     return {
       ...display,

public/app/plugins/panel/canvas/utils.ts

@@ -46,10 +46,7 @@ interface RegistrySelectInfo {
   current: Array<SelectableValue<string>>;
 }
 
-export function getElementTypesOptions(
+export function getElementTypesOptions(items: CanvasElementItem[], current: string | undefined): RegistrySelectInfo {
-  items: Array<CanvasElementItem<any>>,
-  current: string | undefined
-): RegistrySelectInfo {
   const selectables: RegistrySelectInfo = { options: [], current: [] };
   const alpha: Array<SelectableValue<string>> = [];
 

public/app/plugins/panel/flamegraph/components/FlameGraphHeader.tsx

@@ -33,7 +33,7 @@ const FlameGraphHeader = ({
 }: Props) => {
   const styles = useStyles2((theme) => getStyles(theme, app));
 
-  let viewOptions: Array<{ value: string; label: string; description: string }> = [
+  let viewOptions: Array<{ value: SelectedView; label: string; description: string }> = [
     { value: SelectedView.TopTable, label: 'Top Table', description: 'Only show top table' },
     { value: SelectedView.FlameGraph, label: 'Flame Graph', description: 'Only show flame graph' },
   ];
@@ -74,11 +74,11 @@ const FlameGraphHeader = ({
       </div>
 
       <div className={styles.rightContainer}>
-        <RadioButtonGroup
+        <RadioButtonGroup<SelectedView>
           options={viewOptions}
           value={selectedView}
           onChange={(view) => {
-            setSelectedView(view as SelectedView);
+            setSelectedView(view);
           }}
         />
       </div>

public/app/plugins/panel/gauge/GaugeMigrations.test.ts

@@ -141,7 +141,7 @@ describe('Gauge Panel Migrations', () => {
   });
 
   it('change from angular singlestat to gauge', () => {
-    const old: any = {
+    const old = {
       angular: {
         format: 'ms',
         decimals: 7,

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -240,11 +240,11 @@ export class GeomapPanel extends Component<Props, State> {
     this.setState({ ttipOpen: false, ttip: undefined });
   };
 
-  pointerClickListener = (evt: MapBrowserEvent<UIEvent>) => {
+  pointerClickListener = (evt: MapBrowserEvent<MouseEvent>) => {
     pointerClickListener(evt, this);
   };
 
-  pointerMoveListener = (evt: MapBrowserEvent<UIEvent>) => {
+  pointerMoveListener = (evt: MapBrowserEvent<MouseEvent>) => {
     pointerMoveListener(evt, this);
   };
 

public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx

@@ -40,9 +40,12 @@ export const FrameSelectionEditor: FC<StandardEditorProps<MatcherConfig>> = ({ v
     }));
   }, [context.data]);
 
-  const [priorSelectionState, updatePriorSelectionState] = useState({
+  const [priorSelectionState, updatePriorSelectionState] = useState<{
-    refIds: [] as SelectableValue[],
+    refIds: SelectableValue[];
-    value: undefined as string | undefined,
+    value: string | undefined;
+  }>({
+    refIds: [],
+    value: undefined,
   });
 
   const currentValue = useMemo(() => {

public/app/plugins/panel/geomap/editor/StyleEditor.tsx

@@ -42,7 +42,7 @@ export interface StyleEditorOptions {
   displayRotation?: boolean;
 }
 
-export const StyleEditor: FC<StandardEditorProps<StyleConfig, StyleEditorOptions, any>> = ({
+export const StyleEditor: FC<StandardEditorProps<StyleConfig, StyleEditorOptions>> = ({
   value,
   context,
   onChange,

public/app/plugins/panel/geomap/style/utils.test.ts

@@ -31,7 +31,7 @@ describe('style utils', () => {
     };
 
     const state = await getStyleConfigState(cfg);
-    state.config = null as any; // not interesting in the snapshot
+    state.config = null as unknown as StyleConfig; // not interesting in the snapshot
     expect(state.hasText).toBe(false);
     expect(state).toMatchInlineSnapshot(`
       Object {

public/app/plugins/panel/geomap/utils/tootltip.ts

@@ -18,7 +18,7 @@ export const setTooltipListeners = (panel: GeomapPanel) => {
   });
 };
 
-export const pointerClickListener = (evt: MapBrowserEvent<UIEvent>, panel: GeomapPanel) => {
+export const pointerClickListener = (evt: MapBrowserEvent<MouseEvent>, panel: GeomapPanel) => {
   if (pointerMoveListener(evt, panel)) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -27,7 +27,7 @@ export const pointerClickListener = (evt: MapBrowserEvent<UIEvent>, panel: Geoma
   }
 };
 
-export const pointerMoveListener = (evt: MapBrowserEvent<UIEvent>, panel: GeomapPanel) => {
+export const pointerMoveListener = (evt: MapBrowserEvent<MouseEvent>, panel: GeomapPanel) => {
   // If measure menu is open, bypass tooltip logic and display measuring mouse events
   if (panel.state.measureMenuActive) {
     return true;
@@ -35,7 +35,7 @@ export const pointerMoveListener = (evt: MapBrowserEvent<UIEvent>, panel: Geomap
   if (!panel.map || panel.state.ttipOpen) {
     return false;
   }
-  const mouse = evt.originalEvent as MouseEvent; // eslint-disable-line
+  const mouse = evt.originalEvent;
   const pixel = panel.map.getEventPixel(mouse);
   const hover = toLonLat(panel.map.getCoordinateFromPixel(pixel));
 

public/app/plugins/panel/geomap/view.ts

@@ -14,18 +14,18 @@ export enum MapCenterID {
 
 export const centerPointRegistry = new Registry<MapCenterItems>(() => [
   {
-    id: MapCenterID.Fit as string,
+    id: MapCenterID.Fit,
     name: 'Fit to data',
     zoom: 15, // max zoom
   },
   {
-    id: MapCenterID.Zero as string,
+    id: MapCenterID.Zero,
     name: '(0°, 0°)',
     lat: 0,
     lon: 0,
   },
   {
-    id: MapCenterID.Coordinates as string,
+    id: MapCenterID.Coordinates,
     name: 'Coordinates',
   },
   {

public/app/plugins/panel/gettingstarted/GettingStarted.tsx

@@ -71,7 +71,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
 
     dashboard?.removePanel(panel!);
 
-    backendSrv.put('/api/user/helpflags/1', undefined, { showSuccessAlert: false }).then((res: any) => {
+    backendSrv.put('/api/user/helpflags/1', undefined, { showSuccessAlert: false }).then((res) => {
       contextSrv.user.helpFlags1 = res.helpFlags1;
     });
   };

public/app/plugins/panel/gettingstarted/components/Step.tsx

@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
-import { Card, SetupStep, TutorialCardType } from '../types';
+import { SetupStep, TutorialCardType } from '../types';
 
 import { DocsCard } from './DocsCard';
 import { TutorialCard } from './TutorialCard';
@@ -23,7 +23,7 @@ export const Step: FC<Props> = ({ step }) => {
         <p>{step.info}</p>
       </div>
       <div className={styles.cards}>
-        {step.cards.map((card: Card | TutorialCardType, index: number) => {
+        {step.cards.map((card, index) => {
           const key = `${card.title}-${index}`;
           if (card.type === 'tutorial') {
             return <TutorialCard key={key} card={card as TutorialCardType} />;

public/app/plugins/panel/graph/utils.ts

@@ -30,7 +30,7 @@ export function getDataTimeRange(frames: DataFrame[]): AbsoluteTimeRange | undef
   return found ? range : undefined;
 }
 
-// Check wether event is LegacyGraphHoverEvent
+// Check whether event is LegacyGraphHoverEvent
-export function isLegacyGraphHoverEvent(event: any): event is LegacyGraphHoverEventPayload {
+export function isLegacyGraphHoverEvent(event: unknown): event is LegacyGraphHoverEventPayload {
-  return event.hasOwnProperty('pos');
+  return Boolean(event && typeof event === 'object' && event.hasOwnProperty('pos'));
 }

public/app/plugins/panel/nodeGraph/Edge.tsx

@@ -30,7 +30,7 @@ export const Edge = memo(function Edge(props: Props) {
     <g
       onClick={(event) => onClick(event, edge)}
       style={{ cursor: 'pointer' }}
-      aria-label={`Edge from: ${(edge.source as NodeDatum).id} to: ${(edge.target as NodeDatum).id}`}
+      aria-label={`Edge from: ${source.id} to: ${target.id}`}
     >
       <line
         strokeWidth={hovering ? 2 : 1}

public/app/plugins/panel/nodeGraph/Legend.test.tsx

@@ -12,16 +12,14 @@ describe('Legend', () => {
   });
 
   it('renders ok with color fields', () => {
-    const nodes: NodeDatum[] = [
+    const nodes = [
       {
         id: 'nodeId',
-        mainStat: { config: { displayName: 'stat1' } } as any,
+        mainStat: { config: { displayName: 'stat1' } },
-        secondaryStat: { config: { displayName: 'stat2' } } as any,
+        secondaryStat: { config: { displayName: 'stat2' } },
-        arcSections: [
+        arcSections: [{ config: { displayName: 'error', color: { mode: FieldColorModeId.Fixed, fixedColor: 'red' } } }],
-          { config: { displayName: 'error', color: { mode: FieldColorModeId.Fixed, fixedColor: 'red' } } } as any,
+      },
-        ],
+    ] as NodeDatum[];
-      } as any,
-    ];
     render(<Legend nodes={nodes} onSort={(sort) => {}} sortable={false} />);
     const items = screen.getAllByLabelText(/VizLegend series/);
     expect(items.length).toBe(3);

public/app/plugins/panel/nodeGraph/Node.tsx

@@ -155,7 +155,10 @@ function ColorCircle(props: { node: NodeDatum }) {
     );
   }
 
-  const { elements } = nonZero.reduce(
+  const { elements } = nonZero.reduce<{
+    elements: React.ReactNode[];
+    percent: number;
+  }>(
     (acc, section) => {
       const color = section.config.color?.fixedColor || '';
       const value = section.values.get(node.dataFrameRowIndex);
@@ -182,7 +185,7 @@ function ColorCircle(props: { node: NodeDatum }) {
       acc.percent = acc.percent + value;
       return acc;
     },
-    { elements: [] as React.ReactNode[], percent: 0 }
+    { elements: [], percent: 0 }
   );
 
   return <>{elements}</>;

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
-import React, { memo, MouseEvent, MutableRefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import useMeasure from 'react-use/lib/useMeasure';
 
 import { DataFrame, GrafanaTheme2, LinkModel } from '@grafana/data';
@@ -184,7 +184,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
   const topLevelRef = useCallback(
     (r: HTMLDivElement) => {
       measureRef(r);
-      (zoomRef as MutableRefObject<HTMLElement | null>).current = r;
+      zoomRef.current = r;
     },
     [measureRef, zoomRef]
   );

public/app/plugins/panel/nodeGraph/useZoom.ts

@@ -28,7 +28,7 @@ interface Options {
  * used to zoom in/out with mouse wheel.
  */
 export function useZoom({ stepUp, stepDown, min, max } = defaultOptions) {
-  const ref = useRef<HTMLElement>(null);
+  const ref = useRef<HTMLElement | null>(null);
   const [scale, setScale] = useState(1);
 
   const onStepUp = useCallback(() => {