More fixes and rule adjustments

.eslintrc.yaml

@@ -31,9 +31,10 @@ parserOptions:
 settings:
   react:
     version: detect
-  import/internal-regex: ^@foxglove-studio/
+  import/internal-regex: "^@foxglove-studio/"
 
 rules:
+  no-console: off # configured in no-restricted-syntax
   "@typescript-eslint/ban-ts-comment": off # TODO: remove once we fix all TS issues
   # It's sometimes useful to explicitly name to guard against future changes
   "@typescript-eslint/no-inferrable-types": off
@@ -52,7 +53,6 @@ rules:
       template: null
 
   curly: error
-  no-console: [error, { allow: [warn, error, debug] }]
   "@typescript-eslint/no-unused-vars":
     [error, { vars: all, args: after-used, varsIgnorePattern: "^_", argsIgnorePattern: "^_" }]
   no-underscore-dangle: [error, { allowAfterThis: true }]
@@ -81,3 +81,5 @@ rules:
       message: "Property getters are not allowed; prefer function syntax instead."
     - selector: "MethodDefinition[kind='set'], Property[kind='set']"
       message: "Property setters are not allowed; prefer function syntax instead."
+    - selector: "CallExpression[callee.object.name='console'][callee.property.name!=/^(warn|error|debug|assert)$/]"
+      message: "Unexpected property on console object was called"

app/.eslintrc.yaml

@@ -1,2 +1,6 @@
 parserOptions:
   project: app/tsconfig.json
+settings:
+  import/resolver:
+    webpack:
+      config: ./webpack.renderer.config.ts

app/GlobalConfig.ts

@@ -39,7 +39,6 @@ const defaultHooks = {
         throw new Error(`Failed to fetch layout from URL: ${e.message}`);
       });
   },
-  getDemoModeComponent: () => null,
   async importHooksAsync() {
     return new Promise<void>((resolve, reject) => {
       if (importedPanelsByCategory && importedPerPanelHooks) {
@@ -157,7 +156,7 @@ const defaultHooks = {
     const { REMOTE_BAG_URL_2_QUERY_KEY } = require("@foxglove-studio/app/util/globalConstants");
     return [REMOTE_BAG_URL_2_QUERY_KEY];
   },
-  updateUrlToTrackLayoutChanges: async (opt: { store: Store; skipPatch: boolean }) => {
+  updateUrlToTrackLayoutChanges: async (_opt: { store: Store; skipPatch: boolean }) => {
     // Persist the layout state in URL or remote storage if needed.
     await Promise.resolve();
   },

app/PanelAPI/useMessageReducer.ts

@@ -12,7 +12,6 @@
 //   You may not use this file except in compliance with the License.
 
 import { useRef, useCallback, useMemo, useState, useEffect, useContext } from "react";
-import { $Shape } from "utility-types";
 import uuid from "uuid";
 
 import {

app/components/GradientPicker.stories.tsx

@@ -30,8 +30,6 @@ function Story({
   initialMaxColor?: Color;
 }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const minRef = useRef();
-  const maxRef = useRef();
   const [minColor, setMinColor] = useState(initialMinColor ?? { r: 0, g: 0, b: 0, a: 0 });
   const [maxColor, setMaxColor] = useState(initialMaxColor ?? { r: 0, g: 0, b: 0, a: 0 });
 

app/components/Icon.tsx

@@ -13,7 +13,6 @@
 
 import cx from "classnames";
 import * as React from "react";
-import { $Shape } from "utility-types";
 
 import styles from "./icon.module.scss";
 import Tooltip from "@foxglove-studio/app/components/Tooltip";

app/components/Menu/index.stories.tsx

@@ -12,7 +12,6 @@
 //   You may not use this file except in compliance with the License.
 
 import { storiesOf } from "@storybook/react";
-import React, { ReactInstance } from "react";
 import ReactDOM from "react-dom";
 
 import Menu, { Item, SubMenu } from "@foxglove-studio/app/components/Menu";

app/components/MessagePathSyntax/constants.ts

@@ -11,8 +11,6 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $Keys } from "utility-types";
-
 const RosPrimitives = {
   bool: null,
   int8: null,

app/components/MessagePipeline/index.tsx

@@ -13,7 +13,7 @@
 
 import { debounce, flatten, groupBy, isEqual } from "lodash";
 import * as React from "react";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import { Time, TimeUtil } from "rosbag";
 import { $Shape } from "utility-types";
 

app/components/PanelToolbar/MosaicDragHandle.tsx

@@ -13,7 +13,7 @@
 
 import _ from "lodash";
 import React, { useContext, ReactNode } from "react";
-import { DragObjectWithType, useDrag } from "react-dnd";
+import { useDrag } from "react-dnd";
 import { MosaicDragType, MosaicWindowContext } from "react-mosaic-component";
 import { useSelector, useDispatch } from "react-redux";
 import { bindActionCreators } from "redux";

app/components/ReactChartjs/ChartJSManager.ts

@@ -281,11 +281,10 @@ export default class ChartJSManager {
         const nearestElements = chartInstance.getElementsAtEventForMode(event, "nearest", {
           intersect: false,
         });
-        const nearestXAxisElement = nearestElements.find((
-          item: any, // eslint-disable-next-line no-underscore-dangle
-        ) =>
+        const nearestXAxisElement = nearestElements.find((item: any) =>
           xAxisElements.some(
             (item2: any) =>
+              // eslint-disable-next-line no-underscore-dangle
               item._index === item2._index && item._datasetIndex === item2._datasetIndex,
           ),
         );

app/components/ReactChartjs/index.tsx

@@ -24,7 +24,6 @@
 import Hammer from "hammerjs";
 import React from "react";
 import uuid from "uuid";
-import ChartJSWorker from "worker-loader!./ChartJSWorker.worker.ts";
 
 import { ScaleOptions as ManagerScaleOptions } from "./ChartJSManager";
 // eslint-disable-next-line import/no-unresolved
@@ -33,6 +32,8 @@ import { objectValues } from "@foxglove-studio/app/util";
 import { getFakeRpcs, RpcLike } from "@foxglove-studio/app/util/FakeRpc";
 import WebWorkerManager from "@foxglove-studio/app/util/WebWorkerManager";
 import supportsOffscreenCanvas from "@foxglove-studio/app/util/supportsOffscreenCanvas";
+// eslint-disable-next-line import/default
+import ChartJSWorker from "worker-loader!./ChartJSWorker.worker.ts";
 
 const getMainThreadChartJSWorker = () =>
   import(

app/components/ShareJsonModal.stories.tsx

@@ -19,7 +19,7 @@ import { importPanelLayout } from "@foxglove-studio/app/actions/panels";
 import ShareJsonModal from "@foxglove-studio/app/components/ShareJsonModal";
 import { ImportPanelLayoutPayload } from "@foxglove-studio/app/types/panels";
 
-const onLayoutChange = (layout: ImportPanelLayoutPayload, isFromUrl: boolean = false) => {
+const onLayoutChange = (layout: ImportPanelLayoutPayload, _isFromUrl: boolean = false) => {
   importPanelLayout(layout);
 };
 

app/components/TimeBasedChart/index.stories.tsx

@@ -35,7 +35,7 @@ const tooltipData: any = {
   startTime: { sec: 1396293889, nsec: 156763 },
 };
 
-const props: any = {
+const commonProps: any = {
   isSynced: true,
   zoom: true,
   width: 867.272705078125,
@@ -110,15 +110,15 @@ function CleansUpTooltipExample() {
   return (
     <div style={{ width: "100%", height: "100%", background: "black" }} ref={refFn}>
       <MockMessagePipelineProvider>
-        {!hasRenderedOnce && <TimeBasedChart {...props} />}
+        {!hasRenderedOnce && <TimeBasedChart {...commonProps} />}
       </MockMessagePipelineProvider>
     </div>
   );
 }
 
 function ZoomExample() {
   const [, forceUpdate] = useState(0);
-  const newProps = cloneDeep(props);
+  const newProps = cloneDeep(commonProps);
   const newDataPoint = cloneDeep(newProps.data.datasets[0].data[0]);
   newDataPoint.x = 20;
   newProps.data.datasets[0].data[1] = newDataPoint;
@@ -228,7 +228,7 @@ storiesOf("<TimeBasedChart>", module)
     return (
       <div style={{ width: "100%", height: "100%", background: "black" }}>
         <MockMessagePipelineProvider>
-          <TimeBasedChart {...props} />
+          <TimeBasedChart {...commonProps} />
         </MockMessagePipelineProvider>
       </div>
     );
@@ -250,7 +250,7 @@ storiesOf("<TimeBasedChart>", module)
         }}
       >
         <MockMessagePipelineProvider>
-          <TimeBasedChart {...props} />
+          <TimeBasedChart {...commonProps} />
         </MockMessagePipelineProvider>
       </div>
     );
@@ -270,7 +270,7 @@ storiesOf("<TimeBasedChart>", module)
         }}
       >
         <MockMessagePipelineProvider>
-          <TimeBasedChart {...props} />
+          <TimeBasedChart {...commonProps} />
         </MockMessagePipelineProvider>
       </div>
     );

app/components/TooltipBase.tsx

@@ -85,7 +85,7 @@ export default class Tooltip extends React.Component<Props, State> {
   // show the tooltip at absolute position with given contents
   static show(x: number, y: number, contents: Contents, props?: Omit<Props, "contents">) {
     // extract defaultShown and defaultMousePosition from props since we specify those explicitly
-    const { defaultShown, defaultMousePosition, ...rest } = props ?? {};
+    const { defaultShown: _, defaultMousePosition: __, ...rest } = props ?? {};
     const container = getPortal();
     // satisfy flow
     if (!container) {
@@ -142,7 +142,7 @@ export default class Tooltip extends React.Component<Props, State> {
     }
   };
 
-  onMouseLeave = (e: React.MouseEvent<Element>): void => {
+  onMouseLeave = (_e: React.MouseEvent<Element>): void => {
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
@@ -171,7 +171,7 @@ export default class Tooltip extends React.Component<Props, State> {
         }}
         {...referenceProps}
       >
-        {({ ref, style, scheduleUpdate, placement, arrowProps }) => {
+        {({ ref, style, scheduleUpdate, placement: renderedPlacement, arrowProps }) => {
           const { body } = document;
           if (!body) {
             return null;
@@ -182,7 +182,7 @@ export default class Tooltip extends React.Component<Props, State> {
             <div
               ref={ref}
               style={{ ...style, zIndex: 99999, pointerEvents: "none" }}
-              data-placement={placement}
+              data-placement={renderedPlacement}
             >
               {arrow &&
                 React.cloneElement(arrow, {

app/dataProviders/ApiCheckerDataProvider.ts

@@ -23,7 +23,6 @@ import {
   GetMessagesTopics,
   InitializationResult,
 } from "@foxglove-studio/app/dataProviders/types";
-import { Message } from "@foxglove-studio/app/players/types";
 import sendNotification from "@foxglove-studio/app/util/sendNotification";
 import { formatTimeRaw } from "@foxglove-studio/app/util/time";
 

app/dataProviders/BagDataProvider.ts

@@ -278,7 +278,7 @@ export default class BagDataProvider implements DataProvider {
       endTime: end,
       noParse: true,
       decompress: {
-        bz2: (buffer: Buffer, size: number) => {
+        bz2: (buffer: Buffer, _size: number) => {
           try {
             return Buffer.from(Bzip2.decompressFile(buffer));
           } catch (error) {

app/dataProviders/WorkerDataProvider.ts

@@ -12,19 +12,20 @@
 //   You may not use this file except in compliance with the License.
 
 import { Time } from "rosbag";
-import WorkerDataProviderWorker from "worker-loader!@foxglove-studio/app/dataProviders/WorkerDataProvider.worker";
 
-import { DataProvider, InitializationResult } from "./types";
-import RpcDataProvider from "@foxglove-studio/app/dataProviders/RpcDataProvider";
 import {
+  DataProvider,
+  InitializationResult,
   DataProviderDescriptor,
   ExtensionPoint,
   GetMessagesResult,
   GetMessagesTopics,
-} from "@foxglove-studio/app/dataProviders/types";
+} from "./types";
+import RpcDataProvider from "@foxglove-studio/app/dataProviders/RpcDataProvider";
 import { getGlobalHooks } from "@foxglove-studio/app/loadWebviz";
 import Rpc from "@foxglove-studio/app/util/Rpc";
-// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/default
+import WorkerDataProviderWorker from "worker-loader!@foxglove-studio/app/dataProviders/WorkerDataProvider.worker";
 
 const params = new URLSearchParams(window.location.search);
 const secondSourceUrlParams = getGlobalHooks().getSecondSourceUrlParams();

app/panels/ImageView/ImageCanvas.tsx

@@ -22,7 +22,6 @@ import ReactResizeDetector from "react-resize-detector";
 import shallowequal from "shallowequal";
 import styled from "styled-components";
 import uuid from "uuid";
-import ImageCanvasWorker from "worker-loader!./ImageCanvas.worker";
 
 import styles from "./ImageCanvas.module.scss";
 // eslint-disable-next-line import/no-unresolved
@@ -41,6 +40,7 @@ import WebWorkerManager from "@foxglove-studio/app/util/WebWorkerManager";
 import debouncePromise from "@foxglove-studio/app/util/debouncePromise";
 import sendNotification from "@foxglove-studio/app/util/sendNotification";
 import supportsOffscreenCanvas from "@foxglove-studio/app/util/supportsOffscreenCanvas";
+import ImageCanvasWorker from "worker-loader!./ImageCanvas.worker";
 
 type OnFinishRenderImage = () => void;
 type Props = {

app/panels/NodePlayground/BottomBar/index.tsx

@@ -54,8 +54,6 @@ const HeaderItem = ({ isOpen, numItems, text }: HeaderItemProps) => (
   </SHeaderItem>
 );
 
-type BottomBarDisplayState = "closed" | "diagnostics" | "logs";
-
 const BottomBar = ({ nodeId, isSaved, save, diagnostics, logs }: Props) => {
   const [bottomBarDisplay, setBottomBarDisplay] = useState("closed");
   const [autoScroll, setAutoScroll] = useState(true);

app/panels/RawMessages/RawMessagesIcons.tsx

@@ -14,7 +14,7 @@ import ChartBubbleIcon from "@mdi/svg/svg/chart-bubble.svg";
 import ChartLineVariantIcon from "@mdi/svg/svg/chart-line-variant.svg";
 import DotsHorizontalIcon from "@mdi/svg/svg/dots-horizontal.svg";
 import TargetIcon from "@mdi/svg/svg/target.svg";
-import React, { ReactElement, ReactNode, useCallback } from "react";
+import { ReactElement, useCallback } from "react";
 
 import { ValueAction } from "./getValueActionForValue";
 import styles from "./index.module.scss";

app/panels/RawMessages/index.tsx

@@ -297,6 +297,7 @@ function RawMessages(props: Props) {
                   <Icon
                     fade
                     className={styles.icon}
+                    // eslint-disable-next-line no-console
                     onClick={() => console.log(itemValue)}
                     tooltip="Log data to browser console"
                   >

app/panels/ThreeDimensionalViz/LayoutToolbar.tsx

@@ -75,7 +75,6 @@ function LayoutToolbar({
   onToggleDebug,
   polygonBuilder,
   rootTf,
-  saveConfig,
   searchInputRef,
   searchText,
   searchTextMatches,

app/panels/ThreeDimensionalViz/TopicTree/Layout.tsx

@@ -704,7 +704,6 @@ export default function Layout({
   const { isHovered } = useContext(PanelContext) || {};
   const isDemoMode = useExperimentalFeature("demoMode");
   const isHidden = isDemoMode && !isHovered;
-  const DemoModeComponent = getGlobalHooks().getDemoModeComponent();
 
   const { MapComponent, videoRecordingStyle } = useMemo(
     () => ({

app/panels/ThreeDimensionalViz/TopicTree/useTopicTree.test.tsx

@@ -16,7 +16,6 @@ import * as React from "react";
 
 import { UseTreeInput } from "./types";
 import useTopicTree, { generateNodeKey, getBaseKey } from "./useTopicTree";
-import { TOPIC_DISPLAY_MODES } from "@foxglove-studio/app/panels/ThreeDimensionalViz/TopicTree/TopicViewModeSelector";
 import { Topic } from "@foxglove-studio/app/players/types";
 
 const TREE_CONFIG = {

app/panels/ThreeDimensionalViz/commands/PointClouds/buffers.ts

@@ -160,7 +160,7 @@ export function createPositionBuffer({
   }
 
   // We cannot use positions as is from data buffer. Extract them.
-  console.info(
+  console.warn(
     `Vertex buffer stride will be too big (${stride}). Extracting positions from data in CPU`,
   );
   return extractValues({
@@ -208,7 +208,7 @@ export function createColorBuffer({
       };
     }
     // stride is too big. Extract colors from data
-    console.info(
+    console.warn(
       `Vertex buffer stride will be too big (${
         4 * stride
       }). Extracting RGB colors from data in CPU`,
@@ -249,7 +249,7 @@ export function createColorBuffer({
 
   // Color datatype is not float or stride is too big
   // Just extract color data from buffer using CPU
-  console.info("Cannot reinterpret data. Extracting color buffer using CPU");
+  console.warn("Cannot reinterpret data. Extracting color buffer using CPU");
   return extractValues({
     data,
     readers: [colorField.reader],