Down to 181 lint warnings.

static/js/apps/visualization/stat_var_selector.tsx

@@ -120,7 +120,7 @@ export function StatVarSelector(props: StatVarSelectorPropType): JSX.Element {
           {selectedStatVars.length >= (visTypeConfig.numSv || 1) && (
             <div
               className="primary-button continue-button"
-              onClick={() => setStatVars(selectedStatVars)}
+              onClick={(): void => setStatVars(selectedStatVars)}
             >
               Display
             </div>
@@ -135,7 +135,7 @@ export function StatVarSelector(props: StatVarSelectorPropType): JSX.Element {
           id="statvar-modal"
         >
           <ModalHeader
-            toggle={() => {
+            toggle={(): void => {
               removeSv(extraSv.dcid);
               setExtraSv(null);
             }}
@@ -158,7 +158,7 @@ export function StatVarSelector(props: StatVarSelectorPropType): JSX.Element {
                             type="radio"
                             name="statvar"
                             defaultChecked={idx === modalSelection}
-                            onClick={() => setModalSelection(idx)}
+                            onClick={(): void => setModalSelection(idx)}
                           />
                           {sv.info.title || sv.dcid}
                         </Label>
@@ -171,7 +171,7 @@ export function StatVarSelector(props: StatVarSelectorPropType): JSX.Element {
           <ModalFooter>
             <Button
               color="primary"
-              onClick={() => {
+              onClick={(): void => {
                 const newStatVars = _.cloneDeep(selectedStatVars).filter(
                   (sv) => sv.dcid !== extraSv.dcid
                 );

static/js/chart/draw_line.ts

@@ -493,7 +493,7 @@ export function drawLineChart(
         `line ${LEGEND_HIGHLIGHT_CLASS} ${legendKeyFn(dataGroup.label)}`
       )
       .attr("d", line)
-      .attr("part", (d) =>
+      .attr("part", () =>
         ["series", `series-variable-${dataGroup.label}`].join(" ")
       )
       .style("fill", "none")
@@ -513,7 +513,7 @@ export function drawLineChart(
         )
         .attr("cx", (d) => xScale(d.time))
         .attr("cy", (d) => yScale(d.value))
-        .attr("part", (d) =>
+        .attr("part", () =>
           ["series-point", `series-point-variable-${dataGroup.label}`].join(" ")
         )
         .attr("r", (d) => (d.value === null ? 0 : 3))
@@ -549,7 +549,7 @@ export function drawLineChart(
       top: 0,
     };
     const dataGroupsDict = { [DATAGROUP_UNKNOWN_PLACE]: dataGroups };
-    const highlightColorFn = (_: string, dataGroup: DataGroup) => {
+    const highlightColorFn = (_: string, dataGroup: DataGroup): string => {
       return colorFn(dataGroup.label);
     };
 
@@ -813,7 +813,7 @@ export function drawGroupLineChart(
     right: width - legendWidth + LEGEND.marginLeft,
     top: 0,
   };
-  const highlightColorFn = (place: string, dataGroup: DataGroup) => {
+  const highlightColorFn = (place: string, dataGroup: DataGroup): string => {
     return plotParams.lines[place + dataGroup.label].color;
   };
   addHighlightOnHover(

static/js/components/nl_search_bar/auto_complete_input.tsx

@@ -50,8 +50,8 @@ const LOCATION_SEARCH = "location_search";
 
 export interface AutoCompleteResult {
   dcid: string;
-  match_type: string;
-  matched_query: string;
+  matchType: string;
+  matchedQuery: string;
   name: string;
 }
 
@@ -68,6 +68,17 @@ interface AutoCompleteInputPropType {
   barType: string;
 }
 
+function convertJSONToAutoCompleteResults(
+  json: object[]
+): AutoCompleteResult[] {
+  return json.map((json) => ({
+    dcid: json["dcid"],
+    matchType: json["match_type"],
+    matchedQuery: json["matched_query"],
+    name: json["name"],
+  }));
+}
+
 export function AutoCompleteInput(
   props: AutoCompleteInputPropType
 ): ReactElement {
@@ -206,7 +217,9 @@ export function AutoCompleteInput(
       .then((response) => {
         if (!controller.current.signal.aborted) {
           setResults({
-            placeResults: response["data"]["predictions"],
+            placeResults: convertJSONToAutoCompleteResults(
+              response["data"]["predictions"]
+            ),
             svResults: [],
           });
         }
@@ -259,7 +272,7 @@ export function AutoCompleteInput(
     query: string,
     result: AutoCompleteResult
   ): string {
-    return stripPatternFromQuery(query, result.matched_query) + result.name;
+    return stripPatternFromQuery(query, result.matchedQuery) + result.name;
   }
 
   function processArrowKey(selectedIndex: number): void {
@@ -281,10 +294,10 @@ export function AutoCompleteInput(
     });
 
     if (
-      result["match_type"] == LOCATION_SEARCH &&
-      stripPatternFromQuery(baseInput, result.matched_query).trim() === ""
+      result.matchType == LOCATION_SEARCH &&
+      stripPatternFromQuery(baseInput, result.matchedQuery).trim() === ""
     ) {
-      // If this is a location result, and the matched_query matches the base input
+      // If this is a location result, and the matchedQuery matches the base input
       // then that means there are no other parts of the query, so it's a place only
       // redirection.
       if (result.dcid) {

static/js/components/nl_search_bar/auto_complete_suggestions.tsx

@@ -40,8 +40,8 @@ export function AutoCompleteSuggestions(
 ): ReactElement {
   const [triggered, setTriggered] = useState(false);
 
-  function getIcon(query: string, matched_query: string): string {
-    if (query.trim() == matched_query.trim()) {
+  function getIcon(query: string, matchedQuery: string): string {
+    if (query.trim() == matchedQuery.trim()) {
       return "location_on";
     }
     return "search";
@@ -72,16 +72,16 @@ export function AutoCompleteSuggestions(
                 <div
                   className="search-input-result"
                   key={"search-input-result-" + result.dcid}
-                  onClick={() => props.onClick(result, idx)}
+                  onClick={(): void => props.onClick(result, idx)}
                 >
                   <span className="material-icons-outlined search-result-icon">
-                    {getIcon(props.baseInput, result.matched_query)}
+                    {getIcon(props.baseInput, result.matchedQuery)}
                   </span>
                   <div className="query-result">
                     <span>
                       {stripPatternFromQuery(
                         props.baseInput,
-                        result.matched_query
+                        result.matchedQuery
                       )}
                       <span className="query-suggestion">{result.name}</span>
                     </span>

static/js/components/tiles/bar_tile.test.tsx

@@ -50,12 +50,17 @@ declare global {
 }
 
 beforeAll(() => {
-  SVGElement.prototype.getComputedTextLength = () => 100;
-  SVGElement.prototype.getBBox = () => ({ x: 1, y: 1, width: 1, height: 1 });
+  SVGElement.prototype.getComputedTextLength = (): number => 100;
+  SVGElement.prototype.getBBox = (): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } => ({ x: 1, y: 1, width: 1, height: 1 });
 });
 
 function mockAxios(): void {
-  mockedAxios.post.mockImplementation((url, options) => {
+  mockedAxios.post.mockImplementation((url, _) => {
     if (url === "/api/place/name") {
       return Promise.resolve({
         data: {
@@ -74,8 +79,9 @@ function mockAxios(): void {
     return Promise.resolve({});
   });
 
-  mockedAxios.get.mockImplementation((url, options) => {
+  mockedAxios.get.mockImplementation((url, _) => {
     if (url === "/api/observations/point/within") {
+      /* eslint-disable camelcase */
       return Promise.resolve({
         data: {
           data: {
@@ -111,6 +117,7 @@ function mockAxios(): void {
           },
         },
       });
+      /* eslint-enable camelcase */
     } else if (url === "/api/node/propvals/out") {
       return Promise.resolve({
         data: { sector_property: [] },

static/js/components/tiles/disaster_event_map_tile.tsx

@@ -406,7 +406,7 @@ export function fetchChartData(
     "polygonGeoJsonProp",
     props.apiRoot
   );
-  const childGeoJsonPromiseFn = () =>
+  const childGeoJsonPromiseFn = (): Promise<GeoJsonData> =>
     fetchGeoJsonData(
       props.place,
       props.enclosedPlaceType,
@@ -426,7 +426,7 @@ export function fetchChartData(
       break;
     }
   }
-  const placeGeoJsonPromiseFn = () =>
+  const placeGeoJsonPromiseFn = (): Promise<GeoJsonData> =>
     fetchNodeGeoJson([props.place.dcid], placeGeoJsonProp, props.apiRoot);
   const placeGeoJsonPromise = fetchData
     ? fetchData(
@@ -439,7 +439,7 @@ export function fetchChartData(
       ? Promise.resolve(props.parentPlaces)
       : null;
   if (!parentPlacesPromise) {
-    const parentPlacesPromiseFn = () =>
+    const parentPlacesPromiseFn = (): Promise<Array<NamedTypedPlace>> =>
       getParentPlacesPromise(props.place.dcid, props.apiRoot);
     parentPlacesPromise = fetchData
       ? fetchData(`parents-${props.place.dcid}`, parentPlacesPromiseFn)

static/js/components/tiles/gauge_tile.tsx

@@ -99,7 +99,7 @@ export function GaugeTile(props: GaugeTilePropType): JSX.Element {
     }
     // fetch data
     if (!gaugeData || !_.isEqual(gaugeData.props, props)) {
-      (async () => {
+      (async (): Promise<void> => {
         const data = await fetchData(props);
         setGaugeData(data);
       })();
@@ -171,7 +171,7 @@ const fetchData = async (props: GaugeTilePropType) => {
       props.apiRoot
     );
 
-    const { unit, scaling } = getStatFormat(props.statVarSpec, statResp);
+    const scaling = getStatFormat(props.statVarSpec, statResp).scaling;
     const sources = new Set<string>();
     const statData = statResp.data[props.statVarSpec.statVar][props.place.dcid];
     if (statResp.facets[statData.facet]) {

static/js/components/tiles/highlight_tile.tsx

@@ -70,7 +70,7 @@ export function HighlightTile(props: HighlightTilePropType): JSX.Element {
   );
 
   useEffect(() => {
-    (async () => {
+    (async (): Promise<void> => {
       try {
         const data = await fetchData(props);
         setHighlightData(data);
@@ -151,7 +151,9 @@ export function getDescription(
   return description;
 }
 
-export const fetchData = async (props: HighlightTilePropType) => {
+export const fetchData = async (
+  props: HighlightTilePropType
+): Promise<HighlightData> => {
   // Now assume highlight only talks about one stat var.
   const statPromise = getPoint(
     props.apiRoot,

static/js/components/tiles/line_tile.tsx

@@ -128,7 +128,7 @@ export function LineTile(props: LineTilePropType): JSX.Element {
       return;
     }
     if (!chartData || !_.isEqual(chartData.props, props)) {
-      (async () => {
+      (async (): Promise<void> => {
         try {
           setIsLoading(true);
           const data = await fetchData(props);
@@ -231,7 +231,7 @@ function getDataCsvCallback(props: LineTilePropType): () => Promise<string> {
  * @param props LineTile props
  * @returns Array of place dcids
  */
-function getPlaceDcids(props: LineTilePropType) {
+function getPlaceDcids(props: LineTilePropType): string[] {
   return props.comparisonPlaces && props.comparisonPlaces.length > 0
     ? props.comparisonPlaces
     : [props.place.dcid];
@@ -246,7 +246,9 @@ export function getReplacementStrings(
   };
 }
 
-export const fetchData = async (props: LineTilePropType) => {
+export const fetchData = async (
+  props: LineTilePropType
+): Promise<LineChartData> => {
   const facetToVariable = { [EMPTY_FACET_ID_KEY]: [] };
   for (const spec of props.statVarSpec) {
     const facetId = spec.facetId || EMPTY_FACET_ID_KEY;

static/js/components/tiles/loading_header.tsx

@@ -31,10 +31,10 @@ export function LoadingHeader(props: {
   isLoading: boolean;
   title?: string;
 }): JSX.Element {
-  const { isLoading, title, ...headerProps } = props;
+  const { isLoading, title } = props;
   return (
     <h4 {...{ part: "header" }}>
-      {props.isLoading ? (
+      {isLoading ? (
         <>
           <Spinner color="secondary" size="sm" className="mr-1" />
           {title ? title : "Loading..."}

static/js/components/tiles/map_tile.tsx

@@ -219,7 +219,7 @@ export function MapTile(props: MapTilePropType): JSX.Element {
       !_.isEqual(mapChartData.props, props) ||
       !_.isEqual(mapChartData.dateOverride, dateOverride)
     ) {
-      (async () => {
+      (async (): Promise<void> => {
         try {
           setIsLoading(true);
           const data = await fetchData(props, dateOverride);
@@ -283,7 +283,7 @@ export function MapTile(props: MapTilePropType): JSX.Element {
   }, [props, mapChartData, svgContainer, legendContainer, mapContainer]);
   useDrawOnResize(drawFn, svgContainer.current);
   useEffect(() => {
-    const eventHandler = (e: CustomEvent<ChartEventDetail>) => {
+    const eventHandler = (e: CustomEvent<ChartEventDetail>): void => {
       if (e.detail.property === "date") {
         setDateOverride(e.detail.value);
       }
@@ -315,7 +315,7 @@ export function MapTile(props: MapTilePropType): JSX.Element {
       }
       className={`${props.className} map-chart`}
       allowEmbed={true}
-      getDataCsv={async () => {
+      getDataCsv={async (): Promise<string> => {
         const layers = getDataSpec(props);
         const rows: DataRow[] = [];
         for (const layer of layers) {

static/js/components/tiles/ranking_tile.tsx

@@ -86,7 +86,7 @@ export function RankingTile(props: RankingTilePropType): JSX.Element {
     if (props.lazyLoad && !shouldLoad) {
       return;
     }
-    (async () => {
+    (async (): Promise<void> => {
       try {
         setIsLoading(true);
         const rankingData = await fetchData(props);

static/js/components/tiles/scatter_tile.tsx

@@ -134,7 +134,7 @@ export function ScatterTile(props: ScatterTilePropType): JSX.Element {
       // only re-fetch if the props that affect data fetch are not equal
       return;
     }
-    (async () => {
+    (async (): Promise<void> => {
       try {
         setIsLoading(true);
         const data = await fetchData(props);
@@ -294,7 +294,9 @@ function getPopulationPromise(
   }
 }
 
-export const fetchData = async (props: ScatterTilePropType) => {
+export const fetchData = async (
+  props: ScatterTilePropType
+): Promise<ScatterChartData> => {
   if (props.statVarSpec.length < 2) {
     // TODO: add error message
     return;

static/js/components/tiles/use_draw_on_resize.ts

@@ -19,15 +19,18 @@ import { useEffect } from "react";
 // Number of ms to debounce re-draws when chart is resized
 export const RESIZE_DEBOUNCE_INTERVAL_MS = 10;
 
-export function useDrawOnResize(drawFn: () => void, chartContainer: Element) {
+export function useDrawOnResize(
+  drawFn: () => void,
+  chartContainer: Element
+): void {
   useEffect(() => {
     if (!chartContainer) {
       return;
     }
     const debouncedHandler = _.debounce(drawFn, RESIZE_DEBOUNCE_INTERVAL_MS);
     const resizeObserver = new ResizeObserver(debouncedHandler);
     resizeObserver.observe(chartContainer);
-    return () => {
+    return (): void => {
       resizeObserver.unobserve(chartContainer);
       debouncedHandler.cancel();
     };

static/js/homepage/carousel.tsx

@@ -59,7 +59,7 @@ export function Carousel(props: CarouselPropType): JSX.Element {
         })}
       </div>
       <div
-        onClick={() => setIdxStart((idxStart + 1) % props.items.length)}
+        onClick={(): void => setIdxStart((idxStart + 1) % props.items.length)}
         className="navigation-button"
       >
         <span className="material-icons-outlined">navigate_next</span>