[IGNORE] lint: align config

.eslintrc.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// Base eslint configuration for typescript projects
 module.exports = {
   extends: [
     'eslint:recommended',
@@ -48,19 +49,28 @@ module.exports = {
   },
 
   rules: {
+    '@typescript-eslint/explicit-function-return-type': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'error',
+
     'prettier/prettier': 'error',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/array-type': [
       'error',
       {
         default: 'array-simple',
       },
     ],
+    eqeqeq: ['error', 'always'],
     'import/order': 'error',
     // you must disable the base rule as it can report incorrect errors
     'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
 
     'react/prop-types': 'off',
     'react-hooks/exhaustive-deps': 'error',
@@ -72,6 +82,30 @@ module.exports = {
     // because it avoids false errors on cases where we have a regular
     // import and an `import type`.
     'import/no-duplicates': 'error',
+
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            /**
+             * This library is gigantic and named imports end up slowing down builds/blowing out bundle sizes,
+             * so this prevents that style of import.
+             */
+            group: ['mdi-material-ui', '!mdi-material-ui/'],
+            message: `
+Please use the default import from the icon file directly rather than using a named import.
+
+Good:
+import IconName from 'mdi-material-ui/IconName';
+
+Bad:
+import { IconName } from 'mdi-material-ui';
+`,
+          },
+        ],
+      },
+    ],
   },
 
   ignorePatterns: ['**/dist'],

clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx

@@ -47,7 +47,7 @@ export function ClickHouseLogQueryEditor(props: ClickHouseQueryEditorProps): Rea
   };
 
   // Immediate query execution on Enter or blur
-  const handleQueryExecute = (query: string) => {
+  const handleQueryExecute = (query: string): void => {
     onChange(
       produce(value, (draft) => {
         draft.query = query;

clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx

@@ -47,7 +47,7 @@ export function ClickHouseTimeSeriesQueryEditor(props: ClickHouseTimeSeriesQuery
   };
 
   // Immediate query execution on Enter or blur
-  const handleQueryExecute = (query: string) => {
+  const handleQueryExecute = (query: string): void => {
     onChange(
       produce(value, (draft) => {
         draft.query = query;

datasourcevariable/src/DatasourceVariable.tsx

@@ -13,15 +13,15 @@
 
 import { OptionsEditorProps, useListPluginMetadata, VariablePlugin } from '@perses-dev/plugin-system';
 import { Autocomplete, TextField } from '@mui/material';
-import { useEffect, useMemo } from 'react';
+import { ReactElement, useEffect, useMemo } from 'react';
 
 type StaticListVariableOptions = {
   datasourcePluginKind: string;
 };
 
 const EMPTY_SELECTED_KIND = { label: '', value: '' };
 
-export const DatasourceVariableOptionEditor = (props: OptionsEditorProps<StaticListVariableOptions>) => {
+export const DatasourceVariableOptionEditor = (props: OptionsEditorProps<StaticListVariableOptions>): ReactElement => {
   const { onChange, value } = props;
   const { datasourcePluginKind } = value;
   const { data: datasourcePlugins } = useListPluginMetadata(['Datasource']);

flamechart/src/components/CustomBreadcrumb.tsx

@@ -47,7 +47,7 @@ const StyledBreadcrumb = styled(Chip)(({ theme }) => {
 export function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement {
   const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;
 
-  const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
+  const handleClick = (event: React.MouseEvent<Element, MouseEvent>): void => {
     event.preventDefault();
     onSelectedIdChange(0);
   };

flamechart/src/components/FlameChartPanel.tsx

@@ -68,13 +68,13 @@ export const FlameChartPanel: FC<FlameChartPanelProps> = (props) => {
 
   const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;
 
-  const onChangePalette = (newPalette: 'package-name' | 'value') => {
+  const onChangePalette = (newPalette: 'package-name' | 'value'): void => {
     setLiveSpec((prev) => {
       return { ...prev, palette: newPalette };
     });
   };
 
-  const onDisplayChange = (value: 'table' | 'flame-graph' | 'both' | 'none') => {
+  const onDisplayChange = (value: 'table' | 'flame-graph' | 'both' | 'none'): void => {
     let showTable = true;
     let showFlameGraph = true;
     if (value === 'table') {

flamechart/src/components/Settings.tsx

@@ -39,27 +39,27 @@ export function Settings(props: SettingsProps): ReactElement {
     minWidth: 'auto',
   };
 
-  const handleChangeColorShemeClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleChangeColorShemeClick = (event: React.MouseEvent<HTMLElement>): void => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleByPackageNameClick = () => {
+  const handleByPackageNameClick = (): void => {
     onChangePalette('package-name');
     handleClose();
   };
 
-  const handleByValueClick = () => {
+  const handleByValueClick = (): void => {
     onChangePalette('value');
     handleClose();
   };
 
-  const handleClose = () => {
+  const handleClose = (): void => {
     setAnchorEl(null);
   };
 
-  const isTableSelected = () => selectedView === 'table';
-  const isFlameGraphSelected = () => selectedView === 'flame-graph';
-  const isBothSelected = () => selectedView === 'both';
+  const isTableSelected = (): boolean => selectedView === 'table';
+  const isFlameGraphSelected = (): boolean => selectedView === 'flame-graph';
+  const isBothSelected = (): boolean => selectedView === 'both';
 
   // Update selected view based on the value of showTable and showFlameGraph
   const selectedView: 'table' | 'flame-graph' | 'both' | 'none' = useMemo(() => {

flamechart/src/components/TableChart.tsx

@@ -58,7 +58,7 @@ export function TableChart(props: TableChartProps): ReactElement {
         align: 'left',
         enableSorting: true,
         width: 0.5 * availableWidth,
-        cell: (ctx) => {
+        cell: (ctx): ReactElement => {
           const cellValue = ctx.getValue();
           return (
             <Link
@@ -84,7 +84,7 @@ export function TableChart(props: TableChartProps): ReactElement {
         align: 'right',
         enableSorting: true,
         width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,
-        cell: (ctx) => {
+        cell: (ctx): string => {
           const cellValue = ctx.getValue();
           return formatItemValue(unit, cellValue);
         },
@@ -96,7 +96,7 @@ export function TableChart(props: TableChartProps): ReactElement {
         align: 'right',
         enableSorting: true,
         width: 0.25 * availableWidth,
-        cell: (ctx) => {
+        cell: (ctx): string => {
           const cellValue = ctx.getValue();
           return formatItemValue(unit, cellValue);
         },

flamechart/src/utils/data-transform.test.ts

@@ -17,7 +17,7 @@ import { filterStackTraceById, buildSamples } from './data-transform';
 import { getSpanColor } from './palette-gen';
 
 // define the structuredClone function
-global.structuredClone = (val) => JSON.parse(JSON.stringify(val));
+global.structuredClone = (val): unknown => JSON.parse(JSON.stringify(val));
 
 describe('filterStackTraceById', () => {
   const emptyJson: StackTrace = {} as StackTrace;

heatmapchart/src/components/HeatMapChart.tsx

@@ -18,6 +18,7 @@ import { use, EChartsCoreOption } from 'echarts/core';
 import { CustomChart } from 'echarts/charts';
 import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';
 import { useTheme } from '@mui/material';
+import { CustomSeriesRenderItemReturn } from 'echarts/types/dist/echarts';
 import { LOG_BASE } from '../heat-map-chart-model';
 import { getFormattedHeatmapAxisLabel } from '../utils';
 import { generateTooltipHTML } from './HeatMapTooltip';
@@ -90,7 +91,7 @@ export function HeatMapChart({
     return {
       tooltip: {
         appendToBody: true,
-        formatter: (params: { data: HeatMapDataItem; marker: string }) => {
+        formatter: (params: { data: HeatMapDataItem; marker: string }): string => {
           return generateTooltipHTML({
             data: params.data.value,
             label: params.data.label,
@@ -154,7 +155,10 @@ export function HeatMapChart({
         {
           name: 'HeatMap',
           type: 'custom',
-          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {
+          renderItem: function (
+            params: CustomSeriesRenderItemParams,
+            api: CustomSeriesRenderItemAPI
+          ): CustomSeriesRenderItemReturn {
             const xIndex = api.value(0) as number;
             const yLower = api.value(1) as number;
             const yUpper = api.value(2) as number;

heatmapchart/src/components/HeatMapChartPanel.tsx

@@ -72,8 +72,8 @@ export function HeatMapChartPanel(props: HeatMapChartPanelProps): ReactElement |
     }
 
     if (
-      queryResults.length != 1 ||
-      queryResults[0]!.data.series.length != 1 ||
+      queryResults.length !== 1 ||
+      queryResults[0]!.data.series.length !== 1 ||
       queryResults[0]!.data.series[0]!.histograms === undefined
     ) {
       return {

histogramchart/src/components/HistogramChart.tsx

@@ -17,6 +17,7 @@ import { EChart, getFormattedAxis, useChartsTheme } from '@perses-dev/components
 import { use, EChartsCoreOption } from 'echarts/core';
 import { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';
 import { CustomChart } from 'echarts/charts';
+import { CustomSeriesRenderItemReturn } from 'echarts/types/dist/echarts';
 import { getColorFromThresholds } from '../utils';
 import { LOG_BASE } from '../histogram-chart-model';
 
@@ -137,7 +138,10 @@ export function HistogramChart({
       series: [
         {
           type: 'custom',
-          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {
+          renderItem: function (
+            params: CustomSeriesRenderItemParams,
+            api: CustomSeriesRenderItemAPI
+          ): CustomSeriesRenderItemReturn {
             const lowerBound = api.value(0) as number;
             const upperBound = api.value(1) as number;
             const yValue = api.value(2) as number;

logstable/src/components/LogRow/LogRow.test.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent, RenderResult } from '@testing-library/react';
 import { LogEntry } from '@perses-dev/core';
 import { LogRow } from './LogRow';
 
@@ -29,7 +29,7 @@ describe('LogRow', () => {
     labels: { level: 'info', service: 'foo', region: 'bar' },
   };
 
-  const renderLogRow = ({ onSelect = jest.fn(), isSelected = false } = {}) => {
+  const renderLogRow = ({ onSelect = jest.fn(), isSelected = false } = {}): RenderResult => {
     return render(
       <LogRow
         log={mockLog}
@@ -57,7 +57,7 @@ describe('LogRow', () => {
   });
 
   describe('copy formats', () => {
-    const openCopyMenu = async () => {
+    const openCopyMenu = async (): Promise<{ container: HTMLElement }> => {
       const { container } = renderLogRow();
       const row = container.querySelector('[data-log-index="0"]')!;
 

logstable/src/components/LogRow/LogRow.tsx

@@ -73,7 +73,7 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
 
   // Cleanup timeout on unmount
   useEffect(() => {
-    return () => {
+    return (): void => {
       if (copyTimeoutRef.current) {
         window.clearTimeout(copyTimeoutRef.current);
       }

logstable/src/components/VirtualizedLogsList.tsx

@@ -194,7 +194,7 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
     [selectedRows, lastSelectedIndex]
   );
 
-  const renderLogRow = (index: number) => {
+  const renderLogRow = (index: number): ReactNode | null => {
     const log = logs[index];
     if (!log) return null;
 
@@ -218,7 +218,7 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
     );
   };
 
-  const handleCopy = (e: React.ClipboardEvent<HTMLDivElement>) => {
+  const handleCopy = (e: React.ClipboardEvent<HTMLDivElement>): void => {
     const selection = window.getSelection();
     const hasTextSelection = selection && selection.rangeCount > 0 && selection.toString().length > 0;
 
@@ -242,7 +242,7 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
 
   // Keyboard shortcuts for selection
   useEffect(() => {
-    const handleKeyDown = async (e: KeyboardEvent) => {
+    const handleKeyDown = async (e: KeyboardEvent): Promise<void> => {
       // Cmd/Ctrl+A: Select all logs
       if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
         e.preventDefault();
@@ -279,14 +279,14 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
     };
 
     window.addEventListener('keydown', handleKeyDown);
-    return () => {
+    return (): void => {
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [logs, selectedRows, showCopyPopover]);
 
   // Cleanup timer on unmount
   useEffect(() => {
-    return () => {
+    return (): void => {
       if (copyPopoverTimerRef.current) {
         window.clearTimeout(copyPopoverTimerRef.current);
       }

logstable/src/components/hooks/useExpandedRows.ts

@@ -13,7 +13,13 @@
 
 import { useState, useCallback } from 'react';
 
-export const useExpandedRows = () => {
+export interface UseExpandedRowsReturn {
+  expandedRows: Set<number>;
+  toggleExpand: (index: number) => void;
+  clearExpanded: () => void;
+}
+
+export const useExpandedRows = (): UseExpandedRowsReturn => {
   const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());
 
   const toggleExpand = useCallback((index: number) => {

logstable/src/components/hooks/useSeverity.ts

@@ -15,7 +15,7 @@ import { useTheme } from '@mui/material';
 import { LogEntry } from '@perses-dev/core';
 import { getSeverity } from '../utils';
 
-export const useSeverityColor = (log?: LogEntry) => {
+export const useSeverityColor = (log?: LogEntry): string => {
   const theme = useTheme();
   if (!log) {
     return theme.palette.text.secondary;

loki/src/components/complete.ts

@@ -409,7 +409,7 @@ function createLineFilterCompletion(operator: string, detail: string): Completio
   return {
     label: `${operator} ""`,
     detail,
-    apply: (view, _completion, from, to) => {
+    apply: (view, _completion, from, to): void => {
       const insert = `${operator} ""`;
       view.dispatch({
         changes: { from, to, insert },
@@ -421,7 +421,7 @@ function createLineFilterCompletion(operator: string, detail: string): Completio
   };
 }
 
-function escapeString(input: string, quoteChar: string) {
+function escapeString(input: string, quoteChar: string): string {
   // do not escape raw strings (when using backticks)
   if (quoteChar === '`') {
     return input;