~80 additional lint fixes

static/js/apps/eval_retrieval_generation/app.tsx

@@ -72,30 +72,31 @@ export function App(props: AppPropType): JSX.Element {
   const [allCall, setAllCall] = useState<Record<number, DcCalls>>(null);
   const [evalType, setEvalType] = useState<EvalType>(null);
 
-  async function handleUserSignIn(
-    user: User,
-    credential: OAuthCredential
-  ): Promise<void> {
-    if (credential.accessToken) {
-      setUser(user); // Set the user state to the signed-in user
-      const doc = new GoogleSpreadsheet(props.sheetId, {
-        token: credential.accessToken,
-      });
-      await doc.loadInfo();
-      setDoc(doc);
-      getDocInfo(doc).then((docInfo) => {
-        setAllCall(docInfo.allCall);
-        setAllQuery(docInfo.allQuery);
-        setFeedbackStage(getFirstFeedbackStage(docInfo.evalType));
-        setEvalType(docInfo.evalType);
-        setSessionQueryId(getFirstQuery(docInfo.allQuery, user.email));
-      });
-    }
-  }
-
   // Sign in automatically.
   useEffect(() => {
     const scopes = ["https://www.googleapis.com/auth/spreadsheets"];
+
+    const handleUserSignIn = async (
+      user: User,
+      credential: OAuthCredential
+    ): Promise<void> => {
+      if (credential.accessToken) {
+        setUser(user); // Set the user state to the signed-in user
+        const doc = new GoogleSpreadsheet(props.sheetId, {
+          token: credential.accessToken,
+        });
+        await doc.loadInfo();
+        setDoc(doc);
+        getDocInfo(doc).then((docInfo) => {
+          setAllCall(docInfo.allCall);
+          setAllQuery(docInfo.allQuery);
+          setFeedbackStage(getFirstFeedbackStage(docInfo.evalType));
+          setEvalType(docInfo.evalType);
+          setSessionQueryId(getFirstQuery(docInfo.allQuery, user.email));
+        });
+      }
+    };
+
     signInWithGoogle(scopes, handleUserSignIn);
   }, []);
 

static/js/apps/eval_retrieval_generation/call_feedback.tsx

@@ -86,7 +86,7 @@ export function CallFeedback(): JSX.Element {
         setStatus(FormStatus.NotStarted);
       }
     });
-  }, [sheetId, sessionQueryId, sessionCallId, applyToNext]);
+  }, [sheetId, sessionQueryId, sessionCallId, applyToNext, evalType]);
 
   useEffect(() => {
     if (!(sessionQueryId in allCall)) {
@@ -106,7 +106,7 @@ export function CallFeedback(): JSX.Element {
     } else {
       setEvalInfo(null);
     }
-  }, [doc, allCall, sessionQueryId, sessionCallId]);
+  }, [doc, allCall, sessionQueryId, sessionCallId, evalType]);
 
   const checkAndSubmit = async (): Promise<boolean> => {
     if (status === FormStatus.InProgress) {

static/js/apps/eval_retrieval_generation/overall_feedback.tsx

@@ -149,7 +149,7 @@ export function OverallFeedback(): JSX.Element {
       })
       .finally(() => removeSpinner(FEEDBACK_PANE_ID));
     return () => void (subscribed = false);
-  }, [sheetId, sessionQueryId, sessionCallId, feedbackStage]);
+  }, [sheetId, sessionQueryId, sessionCallId, feedbackStage, evalType]);
 
   const checkAndSubmit = async (): Promise<boolean> => {
     if (isSubmitted) {

static/js/apps/eval_retrieval_generation/query_section.tsx

@@ -225,7 +225,7 @@ export function QuerySection(props: QuerySectionPropType): JSX.Element {
       if (props.evalType !== EvalType.RIG) return;
       window.removeEventListener("click", onClick);
     };
-  }, []);
+  }, [props.evalType]);
 
   useEffect(() => {
     // Remove highlight from previous annotation

static/js/apps/eval_retrieval_generation/sxs/app.tsx

@@ -92,36 +92,37 @@ export function App(props: AppPropType): JSX.Element {
     sessionQueryId
   );
 
-  async function handleUserSignIn(
-    user: User,
-    credential: OAuthCredential
-  ): Promise<void> {
-    if (credential.accessToken) {
-      setUser(user); // Set the user state to the signed-in user
-      const docA = new GoogleSpreadsheet(props.sheetIdA, {
-        token: credential.accessToken,
-      });
-      const docB = new GoogleSpreadsheet(props.sheetIdB, {
-        token: credential.accessToken,
-      });
-      // Wait for documents to load
-      await Promise.all([docA.loadInfo(), docB.loadInfo()]);
-      // Get and set information about each document
-      Promise.all([getDocInfo(docA), getDocInfo(docB)]).then(
-        ([docInfoA, docInfoB]) => {
-          setCombinedDocInfo({
-            docInfoA,
-            docInfoB,
-            sortedQueryIds: getSortedQueryIds(docInfoA, docInfoB),
-          });
-        }
-      );
-    }
-  }
-
   // Sign in automatically.
   useEffect(() => {
     const scopes = ["https://www.googleapis.com/auth/spreadsheets"];
+
+    const handleUserSignIn = async (
+      user: User,
+      credential: OAuthCredential
+    ): Promise<void> => {
+      if (credential.accessToken) {
+        setUser(user); // Set the user state to the signed-in user
+        const docA = new GoogleSpreadsheet(props.sheetIdA, {
+          token: credential.accessToken,
+        });
+        const docB = new GoogleSpreadsheet(props.sheetIdB, {
+          token: credential.accessToken,
+        });
+        // Wait for documents to load
+        await Promise.all([docA.loadInfo(), docB.loadInfo()]);
+        // Get and set information about each document
+        Promise.all([getDocInfo(docA), getDocInfo(docB)]).then(
+          ([docInfoA, docInfoB]) => {
+            setCombinedDocInfo({
+              docInfoA,
+              docInfoB,
+              sortedQueryIds: getSortedQueryIds(docInfoA, docInfoB),
+            });
+          }
+        );
+      }
+    };
+
     signInWithGoogle(scopes, handleUserSignIn);
   }, []);
 

static/js/apps/topic_page/page_selector.tsx

@@ -18,7 +18,6 @@
  * Component for selecting topic and place.
  */
 
-import _ from "lodash";
 import React, { useEffect, useState } from "react";
 
 import { NamedTypedPlace } from "../../shared/types";
@@ -155,6 +154,7 @@ function getMorePlaces(
   });
 }
 
+/* TODO(chejennifer): Consider deleting or reintroducing the commented out block below and lines 67-118 above.
 function selectPlace(
   currentTopic: string,
   event: React.ChangeEvent<HTMLInputElement>
@@ -179,3 +179,4 @@ function selectTopic(
     window.open(`/topic/${topic}/${currentPlace}`, "_self");
   }
 }
+*/

static/js/biomedical/protein/chart.ts

@@ -192,7 +192,7 @@ const NUM_TICKS = 10;
 const GRAPH_HEIGHT_XS = 130;
 const GRAPH_HEIGHT_S = 200;
 const GRAPH_HEIGHT_M = 400;
-const GRAPH_HEIGHT_L = 800;
+// const GRAPH_HEIGHT_L = 800; Re-add if necessary.
 const GRAPH_WIDTH_S = 660;
 const GRAPH_WIDTH_M = 700;
 const GRAPH_WIDTH_L = 760;

static/js/chart/base.test.ts

@@ -80,17 +80,22 @@ test("shouldFillInValues", () => {
 beforeEach(() => {
   // JSDom does not define SVGTSpanElements, and use SVGElement instead. Defines
   // a shim for getComputedTextLength where each character is 1 px wide.
-  (window.SVGElement as any).prototype.getComputedTextLength = function () {
-    // Title elements don't contribute to width
-    if (this.tagName === "title") {
-      return 0;
-    }
-    return this.textContent.length;
-  };
+  // eslint-disable-next-line
+  (window.SVGElement as any).prototype.getComputedTextLength =
+    function (): number {
+      // Title elements don't contribute to width
+      if (this.tagName === "title") {
+        return 0;
+      }
+      return this.textContent.length;
+    };
 
   // JSDom does not define SVGTSpanElements, and use SVGElement instead. Defines
   // a shim for getBBox (only returns width) where each character is 1 px wide.
-  (window.SVGElement as any).prototype.getBBox = function () {
+  // eslint-disable-next-line
+  (window.SVGElement as any).prototype.getBBox = function (): {
+    width: number;
+  } {
     let maxWidth = 0;
     const children = this.childNodes;
     for (let i = 0; i < children.length; i++) {

static/js/chart/draw_bar.ts

@@ -24,7 +24,7 @@ import _ from "lodash";
 import { ASYNC_ELEMENT_CLASS } from "../constants/css_constants";
 import { formatNumber } from "../i18n/i18n";
 import { Boundary } from "../shared/types";
-import { DataGroup, getColorFn } from "./base";
+import { DataGroup, DataPoint, getColorFn } from "./base";
 import {
   AXIS_TEXT_FILL,
   HIGHLIGHT_TIMEOUT,
@@ -548,7 +548,18 @@ function drawHorizontalGroupedBars(
   unit?: string
 ): void {
   const numGroups = dataGroups[0].value.length;
-  const setData = (dg: DataGroup) => {
+  const setData = (
+    dg: DataGroup
+  ): {
+    dataGroupValue: DataPoint;
+    label: string;
+    statVar: string;
+    value: number;
+    place: string;
+    date: string;
+    index: number;
+    unit: string;
+  }[] => {
     return dg.value.map((dgv, index) => ({
       dataGroupValue: dgv,
       label: dg.label,
@@ -829,7 +840,16 @@ function drawLollipops(
   legendKeyFn: (l: string) => string,
   unit?: string
 ): void {
-  const setData = (dg: DataGroup) => {
+  const setData = (
+    dg: DataGroup
+  ): {
+    statVar: string;
+    value: number;
+    dcid: string;
+    place: string;
+    date: string;
+    unit: string;
+  }[] => {
     return dg.value.map((dp) => ({
       statVar: dp.label,
       value: dp.value,

static/js/chart/draw_leaflet_map.ts

@@ -98,7 +98,7 @@ export function addGeotiffLayer(
   const geotiffLayer = new GeoRasterLayer({
     georaster: geoRaster,
     opacity: 1,
-    pixelValuesToColorFn: (value) => {
+    pixelValuesToColorFn: (value: { number: number }): string => {
       if (value[GEORASTER_DATA_BAND] === NO_DATA_VALUE) {
         return null;
       } else {

static/js/components/nl_search_bar/auto_complete_input.tsx

@@ -338,7 +338,7 @@ export function AutoCompleteInput(
               aria-label={props.placeholder}
               value={inputText}
               onChange={onInputChange}
-              onKeyDown={(event) => handleKeydownEvent(event)}
+              onKeyDown={(event): void => handleKeydownEvent(event)}
               className="pac-target-input search-input-text"
               autoComplete="one-time-code"
               autoFocus={props.shouldAutoFocus}

static/js/components/ranking_unit.tsx

@@ -210,13 +210,13 @@ export function RankingUnit(props: RankingUnitPropType): JSX.Element {
                                 apiRoot={props.apiRoot}
                               ></PlaceName>
                             }
-                            onMouseEnter={() => {
+                            onMouseEnter={(): void => {
                               if (!props.onHoverToggled) {
                                 return;
                               }
                               props.onHoverToggled(point.placeDcid, true);
                             }}
-                            onMouseLeave={() => {
+                            onMouseLeave={(): void => {
                               if (!props.onHoverToggled) {
                                 return;
                               }

static/js/components/subject_page/column.tsx

@@ -58,7 +58,7 @@ export function Column(props: ColumnPropType): JSX.Element {
       {isNlInterface() && props.config.tiles.length > NL_NUM_TILES_SHOWN && (
         <a
           className="show-more-expando"
-          onClick={(e) => {
+          onClick={(e): void => {
             onShowMore();
             e.preventDefault();
           }}

static/js/components/subject_page/data_fetch_context.tsx

@@ -19,7 +19,13 @@
  * data fetches.
  */
 
-import React, { createContext, useCallback, useMemo, useRef } from "react";
+import React, {
+  createContext,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 
 interface DataFetchContextType {
   // A function to use to fetch data with a given cache key and data promise.
@@ -40,7 +46,7 @@ interface DataFetchContextProviderPropType {
 
 export function DataFetchContextProvider(
   props: DataFetchContextProviderPropType
-) {
+): ReactElement {
   // Map of key to data promise that holds all pairs of cacheKey and dataPromise
   // that have been used when calling fetchData.
   const fetchingCache = useRef<Record<string, Promise<any>>>({});

static/js/components/subject_page/disaster_event_block.tsx

@@ -43,7 +43,6 @@ import {
 import {
   fetchDisasterEventPoints,
   getDate,
-  getHashValue,
   getSeverityFilters,
   getUpdatedHash,
   getUseCache,
@@ -193,7 +192,7 @@ export const DisasterEventBlock = memo(function DisasterEventBlock(
         {!hideFilters && (
           <div
             className="filter-toggle"
-            onClick={() => setShowFilters(!showFilters)}
+            onClick={(): void => setShowFilters(!showFilters)}
             title="Toggle filters"
           >
             <i className="material-icons">tune</i>
@@ -308,7 +307,8 @@ export function fetchDisasterEventData(
     };
     specIds.push(spec.id);
     const cacheKey = getDataFetchCacheKey(specDataOptions);
-    const promiseFn = () => fetchDisasterEventPoints(specDataOptions, apiRoot);
+    const promiseFn = (): Promise<DisasterEventPointData> =>
+      fetchDisasterEventPoints(specDataOptions, apiRoot);
     const promise = fetchData ? fetchData(cacheKey, promiseFn) : promiseFn();
     promises.push(promise);
   });

static/js/components/subject_page/sidebar.tsx

@@ -98,7 +98,7 @@ function renderItem(
     <li
       key={randDomId()}
       className={`nav-item ${isCategory ? "category" : ""}`}
-      onClick={() => {
+      onClick={(): void => {
         const target = document.getElementById(redirectItemId);
         if (target) {
           // Calculate the scroll position of the target section
@@ -136,7 +136,7 @@ export function SdgSubjectPageSidebar(
                     data-bs-target={`#collapse${idx}`}
                     aria-expanded="false"
                     aria-controls={`collapse${idx}`}
-                    onClick={() => setSdgIndex(idx)}
+                    onClick={(): void => setSdgIndex(idx)}
                   >
                     <div className="sidebar-link">
                       <div className="sidebar-link-icon">

static/js/components/tiles/answer_table_tile.tsx

@@ -250,7 +250,7 @@ function generateCsv(
   }
 
   // Helper function to encase each csv cell in quotes and escape double quotes
-  const sanitize = (cell: string) => {
+  const sanitize = (cell: string): string => {
     return `"${cell.replaceAll('"', '""')}"`;
   };