Resolves more lint warnings. Down to 221. (#4814)

More and more return types on functions that did not have it. Down to
281 remaining warnings.

static/js/biomedical/landing/highlights_section.tsx

@@ -65,7 +65,7 @@ const Label = styled.div`
 `;
 
 const Highlight = styled.div`
-  color: ${(props) => props.theme.highlightColors.dark};
+  color: ${(props): string => props.theme.highlightColors.dark};
   font-size: 45px;
   font-weight: 400;
   line-height: 52px;

static/js/browser/stat_var_charts.tsx

@@ -65,7 +65,7 @@ export class StatVarCharts extends React.Component<
       <Collapsible
         trigger={trigger}
         open={this.props.selected}
-        onOpening={() => this.setState({ renderContent: true })}
+        onOpening={(): void => this.setState({ renderContent: true })}
         containerElementProps={
           this.props.selected ? { className: "highlighted-stat-var" } : {}
         }
@@ -92,12 +92,12 @@ export class StatVarCharts extends React.Component<
     );
   }
 
-  private onClickStatVarLink = () => {
+  private onClickStatVarLink = (): void => {
     const uri = URI_PREFIX + this.props.statVar.id;
     window.open(uri);
   };
 
-  private onClickPlaceStatVarLink = () => {
+  private onClickPlaceStatVarLink = (): void => {
     const uri = `${URI_PREFIX}${this.props.place.dcid}?statVar=${this.props.statVar.id}`;
     window.open(uri);
   };

static/js/chart/base.ts

@@ -373,7 +373,7 @@ export function computePlotParams(
 }
 
 export function shouldFillInValues(series: number[][]): boolean {
-  const defined = (d) => {
+  const defined = (d): boolean => {
     return d[1] !== null;
   };
   const n = series.length;

static/js/chart/draw_bar.ts

@@ -193,7 +193,7 @@ function addHighlightOnHover(
   let hideFn: ReturnType<typeof setTimeout> = null;
 
   // define tooltip mouse behavior
-  const mouseoverFn = function () {
+  const mouseoverFn = function (): void {
     if (hideFn) {
       clearTimeout(hideFn);
     }
@@ -204,15 +204,15 @@ function addHighlightOnHover(
     svg.selectAll("rect, circle").style("opacity", 0.5);
     d3.select(this).style("opacity", 1);
   };
-  const mouseoutFn = function () {
+  const mouseoutFn = function (): void {
     // Slightly delay hiding tooltip and resetting styling so quickly mousing
     // over a stream of bars doesn't result in the tooltip flickering in and out
     hideFn = setTimeout(() => {
       svg.selectAll("rect, circle").style("opacity", 1);
       tooltip.style("display", "none");
     }, HIGHLIGHT_TIMEOUT);
   };
-  const mousemoveFn = function () {
+  const mousemoveFn = function (): void {
     const [mouseX, mouseY] = d3.mouse(container.node() as HTMLElement);
     positionTooltip(tooltip, mouseX, mouseY, chartAreaBoundary);
   };

static/js/chart/draw_d3_map.ts

@@ -194,7 +194,7 @@ const onMouseMove =
     containerElement: HTMLDivElement,
     getTooltipHtml: (place: NamedPlace) => string
   ) =>
-  (geo: GeoJsonFeature) => {
+  (geo: GeoJsonFeature): void => {
     const placeDcid = geo.properties.geoDcid;
     mouseHoverAction(
       containerElement,
@@ -216,7 +216,7 @@ const onMapClick =
     containerElement: HTMLDivElement,
     redirectAction: (properties: GeoJsonFeatureProperties) => void
   ) =>
-  (geo: GeoJsonFeature) => {
+  (geo: GeoJsonFeature): void => {
     if (!canClickRegion(geo.properties.geoDcid)) return;
     redirectAction(geo.properties);
     mouseOutAction(containerElement, geo.properties.geoDcid, [
@@ -407,7 +407,7 @@ function getValue(
   dataValues: {
     [placeDcid: string]: number;
   }
-) {
+): number {
   // returns undefined if there is no value
   if (
     !_.isEmpty(dataValues) &&

static/js/chart/draw_leaflet_map.ts

@@ -56,7 +56,7 @@ function updateTooltip(
   tooltipLayer: Layer,
   latLng: LatLng,
   placeName?: string
-) {
+): void {
   const val = geoblaze.identify(geoRaster, [latLng.lng, latLng.lat]);
   if (val && val.length > GEORASTER_DATA_BAND) {
     tooltipLayer.setTooltipContent(

static/js/chart/draw_map_utils.ts

@@ -494,7 +494,7 @@ export function highlightPlaceToggle(
   containerElement: HTMLElement,
   placeDcid: string,
   shouldHighlight: boolean
-) {
+): void {
   const container = d3.select(containerElement);
   const region = container
     .select(`#${getPlacePathId(placeDcid)}`)
@@ -535,7 +535,7 @@ export function getTooltipHtmlFn(
     }
   }
 
-  const getTooltipHtml = (place: NamedPlace) => {
+  const getTooltipHtml = (place: NamedPlace): string => {
     const tooltipLines: string[] = [place.name];
     if (place.dcid in allDataValues) {
       const placeValues = allDataValues[place.dcid];

static/js/chart/draw_scatter.ts

@@ -200,7 +200,10 @@ function getScale(
  * @param axis axis to format ticks for
  * @param scaleType type of scale used in the axis
  */
-function formatAxisTicks(axis: d3.Axis<d3.AxisDomain>, scaleType: ScaleType) {
+function formatAxisTicks(
+  axis: d3.Axis<d3.AxisDomain>,
+  scaleType: ScaleType
+): void {
   if (scaleType === ScaleType.SYMLOG) {
     axis.tickFormat((d: number) => {
       return formatNumber(d.valueOf());
@@ -283,7 +286,7 @@ function addQuadrants(
   yMean: number,
   chartWidth: number,
   chartHeight: number
-) {
+): void {
   quadrant
     .append("line")
     .attr("x1", xScale(xMean))
@@ -537,7 +540,7 @@ function addTooltip(
   yPerCapita: boolean
 ): void {
   const div = d3.select(tooltip).style("visibility", "hidden");
-  const onTooltipMouseover = (point: Point) => {
+  const onTooltipMouseover = (point: Point): void => {
     const element = getTooltipElement(
       point,
       xLabel,
@@ -573,7 +576,7 @@ function addTooltip(
       .style("top", top + "px")
       .style("visibility", "visible");
   };
-  const onTooltipMouseout = () => {
+  const onTooltipMouseout = (): void => {
     div.style("visibility", "hidden");
   };
   dots.on("mouseover", onTooltipMouseover).on("mouseout", onTooltipMouseout);
@@ -588,7 +591,7 @@ function addRegressionLine(
   yScale: ScatterScale,
   points: { [placeDcid: string]: Point },
   xMinMax: [number, number]
-) {
+): void {
   const regression = d3Regression
     .regressionLinear()
     .x((point) => point.xVal)

static/js/chart/draw_utils.ts

@@ -229,7 +229,7 @@ export function addYAxis(
   yScale: d3.ScaleLinear<number, any>,
   textFontFamily?: string,
   unit?: string
-) {
+): number {
   const tickLength = chartWidth - MARGIN.right - MARGIN.left;
   const [displayUnit, label] = getDisplayUnitAndLabel(unit);
   axis
@@ -447,15 +447,15 @@ export function appendLegendElem(
     // define mouse behavior functions
     let hideFn: ReturnType<typeof setTimeout> = null;
     const highlightSelector = `.${LEGEND_HIGHLIGHT_CLASS}`;
-    const mouseoverFn = function () {
+    const mouseoverFn = function (): void {
       if (hideFn) {
         clearTimeout(hideFn);
       }
       const selector = this.id ? `.${this.id}` : null;
       svg.selectAll(highlightSelector).style("opacity", 0.3);
       svg.selectAll(selector).style("opacity", 1);
     };
-    const mouseoutFn = function () {
+    const mouseoutFn = function (): void {
       // Slightly delay resetting styling so that quickly mousing over a stream
       // of legend items doesn't result in the chart flickering
       hideFn = setTimeout(() => {
@@ -483,7 +483,7 @@ export function buildInChartLegend(
   legend: d3.Selection<SVGGElement, any, any, any>,
   params: { [key: string]: Style },
   legendTextWidth: number
-) {
+): void {
   let yOffset = 0;
   for (const label in params) {
     // Create a group to hold dash line and legend text.
@@ -530,7 +530,7 @@ export function buildInChartLegend(
  */
 export function computeRanges(dataGroupsDict: {
   [geoId: string]: DataGroup[];
-}) {
+}): number[] {
   let dataGroups: DataGroup[];
   let minV = Number.MAX_VALUE;
   let maxV = Number.MIN_VALUE;

static/js/components/error_boundary.tsx

@@ -21,7 +21,7 @@
  * does not catch async errors.
  */
 
-import React from "react";
+import React, { ErrorInfo } from "react";
 
 interface ErrorBoundaryPropType {
   // Custom element to display when there's an error instead of the default.
@@ -41,13 +41,13 @@ export class ErrorBoundary extends React.Component<
     this.state = { hasError: false };
   }
 
-  componentDidCatch(error, info) {
+  componentDidCatch(error: Error, info: ErrorInfo): void {
     // Display fallback UI
     this.setState({ hasError: true });
     console.log(error, info);
   }
 
-  render() {
+  render(): React.ReactNode {
     if (this.state.hasError) {
       // You can render any custom fallback UI
       return (

static/js/components/form_components/icon_buttons.tsx

@@ -80,7 +80,7 @@ function IconButton(props: ButtonProps): JSX.Element {
     return () => clearTimeout(timerRef.current);
   }, [isClicked]);
 
-  const onClickHandler = () => {
+  const onClickHandler = (): void => {
     props.onClick();
     setIsClicked(true);
   };
@@ -112,7 +112,9 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
     <IconButton
       icon="file_copy"
       iconWhenClicked="done"
-      onClick={() => navigator.clipboard.writeText(props.textToCopy)}
+      onClick={(): Promise<void> =>
+        navigator.clipboard.writeText(props.textToCopy)
+      }
       label="Copy"
     ></IconButton>
   );
@@ -132,7 +134,7 @@ export function DownloadButton(props: DownloadButtonProps): JSX.Element {
     <IconButton
       icon="download"
       iconWhenClicked="download_done"
-      onClick={() => saveToFile(props.filename, props.content)}
+      onClick={(): void => saveToFile(props.filename, props.content)}
       label="Download"
     ></IconButton>
   );

static/js/components/google_map.tsx

@@ -150,7 +150,7 @@ function drawMarker(
  * @param geoJson A complete geoJson feature collection.
  * @param map map to draw in
  */
-function drawGeoJson(geoJson: any, map: google.maps.Map) {
+function drawGeoJson(geoJson: object, map: google.maps.Map): void {
   map.data.addGeoJson(geoJson);
   const bounds = new google.maps.LatLngBounds();
   map.data.forEach(function (feature) {

static/js/components/nl_feedback.tsx

@@ -70,22 +70,22 @@ function Emoji(props: EmojiPropType): JSX.Element {
   const [isPopUpVisible, setPopUpVisible] = useState(false);
   const [textInput, setTextInput] = useState("");
 
-  const handleElementClick = () => {
+  const handleElementClick = (): void => {
     if (props.saved) {
       return;
     }
     setPopUpVisible(true);
   };
 
-  const handlePopUpClose = () => {
+  const handlePopUpClose = (): void => {
     setPopUpVisible(false);
   };
 
-  const handleInputChange = (event) => {
+  const handleInputChange = (event): void => {
     setTextInput(event.target.value);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (): void => {
     // Do something with the submitted text, for example, send it to a server.
     props.action(props.option.sentiment, textInput);
     // Close the pop-up after submission
@@ -100,7 +100,7 @@ function Emoji(props: EmojiPropType): JSX.Element {
             props.saved ? "feedback-emoji-dim" : ""
           }`}
           id={`${props.id}-${props.option.sentiment}`}
-          onClick={() => handleElementClick()}
+          onClick={(): void => handleElementClick()}
         >
           {props.option.icon}
         </span>

static/js/import_wizard/utils/detect_date.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import _ from "lodash";
 
 import * as dd from "./detect_date";
 

static/js/import_wizard/utils/detect_place.ts

@@ -132,7 +132,7 @@ export class PlaceDetector {
   /**
    * Processes columnToTypePropertyMapping to set the placeTypesAndProperties attribute.
    */
-  setValidPlaceTypesAndProperties() {
+  setValidPlaceTypesAndProperties(): void {
     // Process the PLACE_TYPES.
     this.placeTypes = new Map<string, DCType>();
     for (const t of PLACE_TYPES) {
@@ -182,7 +182,7 @@ export class PlaceDetector {
   /**
    * Process the countriesJSON object to generate the required sets.
    */
-  preProcessCountries() {
+  preProcessCountries(): void {
     // TODO: verify that country names do not have special chars. If they do,
     // work out a separate solution.
     this.countryNames = new Set<string>();
@@ -212,7 +212,7 @@ export class PlaceDetector {
   /**
    * Process the statesJSON object to generate the required sets.
    */
-  preProcessUSStates() {
+  preProcessUSStates(): void {
     this.stateNames = new Set<string>();
     this.stateISO = new Set<string>();
     this.stateFipsAlpha = new Set<string>();

static/js/import_wizard/utils/obs_generation.test.tsx

@@ -221,10 +221,14 @@ test("GenerateRowObservations_SingleValueColumn_ValueMap", () => {
       [1000, ["CHN", "Count_Dog", "2022", "100000001"]],
     ]),
   };
+
+  /* eslint-disable camelcase */
   const valueMap = {
     USA: "CAN",
     Count_Person: "Count_Person_Female",
   };
+  /* eslint-enable camelcase */
+
   // NOTE: Row 2 only has no entry because value is empty.
   const expected: Map<RowNumber, Array<string>> = new Map([
     [1, ["Value of Count_Person_Female for CAN in 2022 is 329000000 USDollar"]],

static/js/import_wizard/utils/obs_generation.ts

@@ -54,7 +54,11 @@ function hasRequiredProps(obs: Observation): boolean {
   return true;
 }
 
-function getCellVal(row: Array<string>, colIdx: number, valueMap: ValueMap) {
+function getCellVal(
+  row: Array<string>,
+  colIdx: number,
+  valueMap: ValueMap
+): string {
   const cellVal = row[colIdx];
   if (cellVal in valueMap) {
     return valueMap[cellVal];

static/js/import_wizard/utils/tmcf_generation.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import _ from "lodash";
-
 import { MappedThing, Mapping, MappingType, MappingVal } from "../types";
 
 const FIXED_CSV_TABLE = "CSVTable";

static/js/import_wizard/utils/validation.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import _, { mapValues } from "lodash";
+import _ from "lodash";
 
 import {
   MAPPED_THING_NAMES,