From f948da241e3756396404335340505195bc34dead Mon Sep 17 00:00:00 2001 From: Gabriel Mechali Date: Mon, 23 Dec 2024 14:05:08 -0500 Subject: [PATCH] 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. --- .../biomedical/landing/highlights_section.tsx | 2 +- static/js/browser/stat_var_charts.tsx | 6 ++-- static/js/chart/base.ts | 2 +- static/js/chart/draw_bar.ts | 6 ++-- static/js/chart/draw_d3_map.ts | 6 ++-- static/js/chart/draw_leaflet_map.ts | 2 +- static/js/chart/draw_map_utils.ts | 4 +-- static/js/chart/draw_scatter.ts | 13 +++++---- static/js/chart/draw_utils.ts | 10 +++---- static/js/components/error_boundary.tsx | 6 ++-- .../form_components/icon_buttons.tsx | 8 ++++-- static/js/components/google_map.tsx | 2 +- static/js/components/nl_feedback.tsx | 10 +++---- .../import_wizard/utils/detect_date.test.tsx | 1 - static/js/import_wizard/utils/detect_place.ts | 6 ++-- .../utils/obs_generation.test.tsx | 4 +++ .../js/import_wizard/utils/obs_generation.ts | 6 +++- .../js/import_wizard/utils/tmcf_generation.ts | 2 -- static/js/import_wizard/utils/validation.ts | 2 +- .../components/download_page.tsx | 4 ++- .../components/mapping_page.tsx | 5 ++-- .../components/mapping_preview_section.tsx | 2 +- .../mapping_templates/constant_var.tsx | 14 ++++++---- .../mapping_templates/multi_var_col.tsx | 13 +++++---- .../multi_var_mulit_date_col.tsx | 12 ++++---- .../single_var_multi_date_col.tsx | 15 ++++++---- static/js/import_wizard2/components/page.tsx | 15 +++++----- .../import_wizard2/utils/detection.test.tsx | 3 ++ .../utils/obs_generation.test.tsx | 4 +++ .../js/import_wizard2/utils/obs_generation.ts | 6 +++- static/js/place/dev_place_main.tsx | 22 ++++++++------- static/js/place/menu.tsx | 4 +-- static/js/place/place_search.tsx | 7 +++-- static/js/search/all_results.tsx | 1 - static/js/search/search_input.tsx | 22 +++++++++------ static/js/search/statvar_results.tsx | 4 +-- static/js/shared/chip.tsx | 4 +-- static/js/shared/components.tsx | 4 +-- static/js/shared/facet_selector.tsx | 6 ++-- static/js/shared/place_search_bar.tsx | 8 ++++-- static/js/shared/place_selector.tsx | 6 ++-- static/js/stat_var_hierarchy/node_header.tsx | 6 ++-- .../stat_var_group_node.tsx | 12 ++++++-- .../stat_var_hierarchy/stat_var_hierarchy.tsx | 6 ++-- .../js/stat_var_hierarchy/stat_var_search.tsx | 14 ++++++---- .../stat_var_section_input.tsx | 28 ++++++++++--------- static/js/tools/download/page.test.tsx | 5 ++-- static/js/tools/download/page.tsx | 26 +++++++++-------- static/js/tools/download/preview.tsx | 2 +- static/js/tools/download/stat_var_chooser.tsx | 8 +++--- static/js/tools/map/app.tsx | 4 +-- static/js/tools/map/chart.tsx | 12 ++++---- static/js/tools/map/compute/breadcrumb.ts | 2 +- static/js/tools/map/compute/geojson.ts | 2 +- static/js/tools/map/compute/map_point.ts | 2 +- .../js/tools/map/compute/map_value_dates.ts | 2 +- static/js/tools/map/condition_hooks.ts | 2 +- static/js/tools/map/place_details.tsx | 4 +-- static/js/tools/map/stat_var_chooser.tsx | 4 +-- static/js/tools/map/time_slider.tsx | 2 +- static/js/tools/map/util.test.ts | 10 ++++--- 61 files changed, 247 insertions(+), 185 deletions(-) diff --git a/static/js/biomedical/landing/highlights_section.tsx b/static/js/biomedical/landing/highlights_section.tsx index e24e5045bd..63b3840d52 100644 --- a/static/js/biomedical/landing/highlights_section.tsx +++ b/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; diff --git a/static/js/browser/stat_var_charts.tsx b/static/js/browser/stat_var_charts.tsx index 780ac6fe5f..649e85ff11 100644 --- a/static/js/browser/stat_var_charts.tsx +++ b/static/js/browser/stat_var_charts.tsx @@ -65,7 +65,7 @@ export class StatVarCharts extends React.Component< 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); }; diff --git a/static/js/chart/base.ts b/static/js/chart/base.ts index 1fb6fb062d..abba653857 100644 --- a/static/js/chart/base.ts +++ b/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; diff --git a/static/js/chart/draw_bar.ts b/static/js/chart/draw_bar.ts index d7182ca70f..ba225e00e8 100644 --- a/static/js/chart/draw_bar.ts +++ b/static/js/chart/draw_bar.ts @@ -193,7 +193,7 @@ function addHighlightOnHover( let hideFn: ReturnType = null; // define tooltip mouse behavior - const mouseoverFn = function () { + const mouseoverFn = function (): void { if (hideFn) { clearTimeout(hideFn); } @@ -204,7 +204,7 @@ 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(() => { @@ -212,7 +212,7 @@ function addHighlightOnHover( 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); }; diff --git a/static/js/chart/draw_d3_map.ts b/static/js/chart/draw_d3_map.ts index 9c2b14d2e6..ab28670f76 100644 --- a/static/js/chart/draw_d3_map.ts +++ b/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) && diff --git a/static/js/chart/draw_leaflet_map.ts b/static/js/chart/draw_leaflet_map.ts index ce6a4ec0e9..d717f573ad 100644 --- a/static/js/chart/draw_leaflet_map.ts +++ b/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( diff --git a/static/js/chart/draw_map_utils.ts b/static/js/chart/draw_map_utils.ts index a3e1973b94..7b3bcae86c 100644 --- a/static/js/chart/draw_map_utils.ts +++ b/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]; diff --git a/static/js/chart/draw_scatter.ts b/static/js/chart/draw_scatter.ts index c2331eef3b..25a2d433ce 100644 --- a/static/js/chart/draw_scatter.ts +++ b/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, scaleType: ScaleType) { +function formatAxisTicks( + axis: d3.Axis, + 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) diff --git a/static/js/chart/draw_utils.ts b/static/js/chart/draw_utils.ts index 166f59d460..3c50659bd9 100644 --- a/static/js/chart/draw_utils.ts +++ b/static/js/chart/draw_utils.ts @@ -229,7 +229,7 @@ export function addYAxis( yScale: d3.ScaleLinear, textFontFamily?: string, unit?: string -) { +): number { const tickLength = chartWidth - MARGIN.right - MARGIN.left; const [displayUnit, label] = getDisplayUnitAndLabel(unit); axis @@ -447,7 +447,7 @@ export function appendLegendElem( // define mouse behavior functions let hideFn: ReturnType = null; const highlightSelector = `.${LEGEND_HIGHLIGHT_CLASS}`; - const mouseoverFn = function () { + const mouseoverFn = function (): void { if (hideFn) { clearTimeout(hideFn); } @@ -455,7 +455,7 @@ export function appendLegendElem( 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, 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; diff --git a/static/js/components/error_boundary.tsx b/static/js/components/error_boundary.tsx index 4cf8fe92c3..fd483ed3e7 100644 --- a/static/js/components/error_boundary.tsx +++ b/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 ( diff --git a/static/js/components/form_components/icon_buttons.tsx b/static/js/components/form_components/icon_buttons.tsx index 6f92512ff9..ea97540e37 100644 --- a/static/js/components/form_components/icon_buttons.tsx +++ b/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 { navigator.clipboard.writeText(props.textToCopy)} + onClick={(): Promise => + navigator.clipboard.writeText(props.textToCopy) + } label="Copy" > ); @@ -132,7 +134,7 @@ export function DownloadButton(props: DownloadButtonProps): JSX.Element { saveToFile(props.filename, props.content)} + onClick={(): void => saveToFile(props.filename, props.content)} label="Download" > ); diff --git a/static/js/components/google_map.tsx b/static/js/components/google_map.tsx index 152c24e564..0a9087b185 100644 --- a/static/js/components/google_map.tsx +++ b/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) { diff --git a/static/js/components/nl_feedback.tsx b/static/js/components/nl_feedback.tsx index 37e07d2a61..8ce9235610 100644 --- a/static/js/components/nl_feedback.tsx +++ b/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} diff --git a/static/js/import_wizard/utils/detect_date.test.tsx b/static/js/import_wizard/utils/detect_date.test.tsx index 11d2b77977..04fc26f588 100644 --- a/static/js/import_wizard/utils/detect_date.test.tsx +++ b/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"; diff --git a/static/js/import_wizard/utils/detect_place.ts b/static/js/import_wizard/utils/detect_place.ts index daf7ce2c5c..c453514e5d 100644 --- a/static/js/import_wizard/utils/detect_place.ts +++ b/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(); 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(); @@ -212,7 +212,7 @@ export class PlaceDetector { /** * Process the statesJSON object to generate the required sets. */ - preProcessUSStates() { + preProcessUSStates(): void { this.stateNames = new Set(); this.stateISO = new Set(); this.stateFipsAlpha = new Set(); diff --git a/static/js/import_wizard/utils/obs_generation.test.tsx b/static/js/import_wizard/utils/obs_generation.test.tsx index 6557cca5a0..95764cb7af 100644 --- a/static/js/import_wizard/utils/obs_generation.test.tsx +++ b/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> = new Map([ [1, ["Value of Count_Person_Female for CAN in 2022 is 329000000 USDollar"]], diff --git a/static/js/import_wizard/utils/obs_generation.ts b/static/js/import_wizard/utils/obs_generation.ts index 5465ffefe1..9ab0438833 100644 --- a/static/js/import_wizard/utils/obs_generation.ts +++ b/static/js/import_wizard/utils/obs_generation.ts @@ -54,7 +54,11 @@ function hasRequiredProps(obs: Observation): boolean { return true; } -function getCellVal(row: Array, colIdx: number, valueMap: ValueMap) { +function getCellVal( + row: Array, + colIdx: number, + valueMap: ValueMap +): string { const cellVal = row[colIdx]; if (cellVal in valueMap) { return valueMap[cellVal]; diff --git a/static/js/import_wizard/utils/tmcf_generation.ts b/static/js/import_wizard/utils/tmcf_generation.ts index 108966a56a..fe9bf4e35a 100644 --- a/static/js/import_wizard/utils/tmcf_generation.ts +++ b/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"; diff --git a/static/js/import_wizard/utils/validation.ts b/static/js/import_wizard/utils/validation.ts index 318de47912..cb7d1838a6 100644 --- a/static/js/import_wizard/utils/validation.ts +++ b/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, diff --git a/static/js/import_wizard2/components/download_page.tsx b/static/js/import_wizard2/components/download_page.tsx index 980b5316b2..f44a531f45 100644 --- a/static/js/import_wizard2/components/download_page.tsx +++ b/static/js/import_wizard2/components/download_page.tsx @@ -121,7 +121,9 @@ export function DownloadPage(props: DownloadPagePropType): JSX.Element { )}
onDownload(fileKey, fileContentPromise[fileKey])} + onClick={(): void => + onDownload(fileKey, fileContentPromise[fileKey]) + } className="file-download-button" > { + onContinueClicked={(hasError: boolean): void => { if (hasError) { scrollToPreview(); } else { @@ -169,7 +168,7 @@ export function MappingPage(props: MappingPageProps): JSX.Element { diff --git a/static/js/import_wizard2/components/mapping_templates/constant_var.tsx b/static/js/import_wizard2/components/mapping_templates/constant_var.tsx index 9941ba50f2..b0feb17aeb 100644 --- a/static/js/import_wizard2/components/mapping_templates/constant_var.tsx +++ b/static/js/import_wizard2/components/mapping_templates/constant_var.tsx @@ -18,7 +18,6 @@ * Component for the mapping section for the constantVar template */ -import _ from "lodash"; import React from "react"; import { INVALID_VARIABLE_MSG } from "../../constants"; @@ -35,7 +34,10 @@ export function ConstantVar(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={( + mappingVal: MappingVal, + hasInputErrors: boolean + ): void => props.onMappingValUpdate( MappedThing.STAT_VAR, mappingVal, @@ -49,7 +51,7 @@ export function ConstantVar(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.DATE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -58,7 +60,7 @@ export function ConstantVar(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.PLACE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -66,7 +68,7 @@ export function ConstantVar(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.VALUE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -75,7 +77,7 @@ export function ConstantVar(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.UNIT, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} diff --git a/static/js/import_wizard2/components/mapping_templates/multi_var_col.tsx b/static/js/import_wizard2/components/mapping_templates/multi_var_col.tsx index beb0af0929..44f8077de1 100644 --- a/static/js/import_wizard2/components/mapping_templates/multi_var_col.tsx +++ b/static/js/import_wizard2/components/mapping_templates/multi_var_col.tsx @@ -18,13 +18,11 @@ * Component for the mapping section for the multiVarCol template */ -import _ from "lodash"; import React from "react"; import { INVALID_VARIABLE_MSG } from "../../constants"; import { MappingTemplateProps } from "../../templates"; import { - Column, MAPPED_THING_NAMES, MappedThing, MappingType, @@ -41,7 +39,7 @@ export function MultiVarCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.PLACE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -49,7 +47,7 @@ export function MultiVarCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.DATE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -60,7 +58,10 @@ export function MultiVarCol(props: MappingTemplateProps): JSX.Element { MAPPED_THING_NAMES[MappedThing.STAT_VAR] || MappedThing.STAT_VAR } mappingVal={props.userMapping.get(MappedThing.STAT_VAR)} - onMappingValUpdate={(mappingVal: MappingVal, hasInputErrors: boolean) => + onMappingValUpdate={( + mappingVal: MappingVal, + hasInputErrors: boolean + ): void => props.onMappingValUpdate( MappedThing.STAT_VAR, mappingVal, @@ -74,7 +75,7 @@ export function MultiVarCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal): void => props.onMappingValUpdate(MappedThing.UNIT, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} diff --git a/static/js/import_wizard2/components/mapping_templates/multi_var_mulit_date_col.tsx b/static/js/import_wizard2/components/mapping_templates/multi_var_mulit_date_col.tsx index 6972b67b5a..2c62e9d8ca 100644 --- a/static/js/import_wizard2/components/mapping_templates/multi_var_mulit_date_col.tsx +++ b/static/js/import_wizard2/components/mapping_templates/multi_var_mulit_date_col.tsx @@ -18,7 +18,6 @@ * Component for the mapping section for the multiVarMultiDateCol template */ -import _ from "lodash"; import React from "react"; import { isValidDate } from "../../../utils/string_utils"; @@ -40,7 +39,7 @@ export function MultiVarMultiDateCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal): void => props.onMappingValUpdate(MappedThing.STAT_VAR, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -49,7 +48,7 @@ export function MultiVarMultiDateCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.PLACE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -59,7 +58,10 @@ export function MultiVarMultiDateCol(props: MappingTemplateProps): JSX.Element { MAPPED_THING_NAMES[MappedThing.DATE] || MappedThing.DATE } mappingVal={props.userMapping.get(MappedThing.DATE)} - onMappingValUpdate={(mappingVal: MappingVal, hasInputErrors: boolean) => + onMappingValUpdate={( + mappingVal: MappingVal, + hasInputErrors: boolean + ): void => props.onMappingValUpdate(MappedThing.DATE, mappingVal, hasInputErrors) } orderedColumns={props.csvData.orderedColumns} @@ -69,7 +71,7 @@ export function MultiVarMultiDateCol(props: MappingTemplateProps): JSX.Element { + onMappingValUpdate={(mappingVal): void => props.onMappingValUpdate(MappedThing.UNIT, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} diff --git a/static/js/import_wizard2/components/mapping_templates/single_var_multi_date_col.tsx b/static/js/import_wizard2/components/mapping_templates/single_var_multi_date_col.tsx index f82b23dfb8..713954b177 100644 --- a/static/js/import_wizard2/components/mapping_templates/single_var_multi_date_col.tsx +++ b/static/js/import_wizard2/components/mapping_templates/single_var_multi_date_col.tsx @@ -18,7 +18,6 @@ * Component for the mapping section for the singleVarMultiDateCol template */ -import _ from "lodash"; import React from "react"; import { isValidDate } from "../../../utils/string_utils"; @@ -44,7 +43,10 @@ export function SingleVarMultiDateCol( + onMappingValUpdate={( + mappingVal: MappingVal, + hasInputErrors: boolean + ): void => props.onMappingValUpdate( MappedThing.STAT_VAR, mappingVal, @@ -58,7 +60,7 @@ export function SingleVarMultiDateCol( + onMappingValUpdate={(mappingVal: MappingVal): void => props.onMappingValUpdate(MappedThing.PLACE, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} @@ -68,7 +70,10 @@ export function SingleVarMultiDateCol( MAPPED_THING_NAMES[MappedThing.DATE] || MappedThing.DATE } mappingVal={props.userMapping.get(MappedThing.DATE)} - onMappingValUpdate={(mappingVal: MappingVal, hasInputErrors: boolean) => + onMappingValUpdate={( + mappingVal: MappingVal, + hasInputErrors: boolean + ): void => props.onMappingValUpdate(MappedThing.DATE, mappingVal, hasInputErrors) } orderedColumns={props.csvData.orderedColumns} @@ -78,7 +83,7 @@ export function SingleVarMultiDateCol( + onMappingValUpdate={(mappingVal): void => props.onMappingValUpdate(MappedThing.UNIT, mappingVal, false) } orderedColumns={props.csvData.orderedColumns} diff --git a/static/js/import_wizard2/components/page.tsx b/static/js/import_wizard2/components/page.tsx index 92747ed50b..d71757ea06 100644 --- a/static/js/import_wizard2/components/page.tsx +++ b/static/js/import_wizard2/components/page.tsx @@ -18,7 +18,6 @@ * Main component for the import wizard. */ -import _ from "lodash"; import React, { useEffect, useState } from "react"; import { TEMPLATE_OPTIONS, TEMPLATE_PREDICTION_VALIDATION } from "../templates"; @@ -74,11 +73,11 @@ export function Page(): JSX.Element { return ( <> {currPageType === PageType.INFO && ( - setCurrPage(currPage + 1)} /> + setCurrPage(currPage + 1)} /> )} {currPageType === PageType.TEMPLATE && ( { + onContinueClicked={(): void => { setCurrPage((prev) => prev + 1); }} selectedTemplate={templateId} @@ -92,8 +91,8 @@ export function Page(): JSX.Element { uploadedFile={uploadedFile} csvData={csvData} onCsvDataUpdated={setCsvData} - onBackClicked={() => setCurrPage((prev) => prev - 1)} - onContinueClicked={() => setCurrPage((prev) => prev + 1)} + onBackClicked={(): void => setCurrPage((prev) => prev - 1)} + onContinueClicked={(): void => setCurrPage((prev) => prev + 1)} /> )} {currPageType === PageType.MAPPING && ( @@ -102,8 +101,8 @@ export function Page(): JSX.Element { onUserMappingUpdated={setUserMapping} csvData={csvData} selectedTemplate={templateId} - onBackClicked={() => setCurrPage((prev) => prev - 1)} - onContinueClicked={() => setCurrPage((prev) => prev + 1)} + onBackClicked={(): void => setCurrPage((prev) => prev - 1)} + onContinueClicked={(): void => setCurrPage((prev) => prev + 1)} /> )} {currPageType === PageType.DOWNLOAD && ( @@ -113,7 +112,7 @@ export function Page(): JSX.Element { correctedMapping={userMapping} csvData={csvData} valueMap={valueMap} - onBackClicked={() => setCurrPage((prev) => prev - 1)} + onBackClicked={(): void => setCurrPage((prev) => prev - 1)} /> )} diff --git a/static/js/import_wizard2/utils/detection.test.tsx b/static/js/import_wizard2/utils/detection.test.tsx index f54a22675b..ad1db2c156 100644 --- a/static/js/import_wizard2/utils/detection.test.tsx +++ b/static/js/import_wizard2/utils/detection.test.tsx @@ -13,6 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +/* eslint-disable camelcase */ + import _ from "lodash"; import { Mapping, TypeProperty } from "../types"; diff --git a/static/js/import_wizard2/utils/obs_generation.test.tsx b/static/js/import_wizard2/utils/obs_generation.test.tsx index 5cf5dd3e0f..397d07db23 100644 --- a/static/js/import_wizard2/utils/obs_generation.test.tsx +++ b/static/js/import_wizard2/utils/obs_generation.test.tsx @@ -233,10 +233,14 @@ test("GenerateRowObservations_SingleValueColumn_ValueMap", () => { lastDataRow: 1000, lastFileRow: 1000, }; + + /* 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> = new Map([ [2, ["Value of Count_Person_Female for CAN in 2022 is 329000000 USDollar"]], diff --git a/static/js/import_wizard2/utils/obs_generation.ts b/static/js/import_wizard2/utils/obs_generation.ts index a43f34f239..0744dda11e 100644 --- a/static/js/import_wizard2/utils/obs_generation.ts +++ b/static/js/import_wizard2/utils/obs_generation.ts @@ -55,7 +55,11 @@ function hasRequiredProps(obs: Observation): boolean { return true; } -function getCellVal(row: Array, colIdx: number, valueMap: ValueMap) { +function getCellVal( + row: Array, + colIdx: number, + valueMap: ValueMap +): string { const cellVal = row[colIdx]; if (cellVal in valueMap) { return valueMap[cellVal]; diff --git a/static/js/place/dev_place_main.tsx b/static/js/place/dev_place_main.tsx index d801c19756..e549010302 100644 --- a/static/js/place/dev_place_main.tsx +++ b/static/js/place/dev_place_main.tsx @@ -162,7 +162,7 @@ const PlaceHeader = (props: { category: string; place: NamedTypedPlace; placeSubheader: string; -}) => { +}): React.JSX.Element => { const { category, place, placeSubheader } = props; return (
@@ -201,7 +201,7 @@ const PlaceTopicTabs = ({ forceDevPlaces: boolean; category: string; place: NamedTypedPlace; -}) => { +}): React.JSX.Element => { return (
Relevant topics @@ -307,13 +307,15 @@ const PlaceTopicTabs = ({ * @param props.placeDcid The DCID of the place to show statistics for * @returns A table component showing key demographic statistics, or null if data not loaded */ -const PlaceOverviewTable = (props: { placeDcid: string }) => { +const PlaceOverviewTable = (props: { + placeDcid: string; +}): React.JSX.Element => { const { placeDcid } = props; const [dataRows, setDataRows] = useState([]); const containerRef = useRef(null); // Fetch key demographic statistics for the place when it changes useEffect(() => { - (async () => { + (async (): Promise => { const placeOverviewDataRows = await defaultDataCommonsClient.getDataRows({ entities: [placeDcid], variables: [ @@ -409,7 +411,7 @@ const PlaceOverview = (props: { place: NamedTypedPlace; placeSummary: string; parentPlaces: NamedTypedPlace[]; -}) => { +}): React.JSX.Element => { const { place, placeSummary, parentPlaces } = props; const isInUsa = isPlaceContainedInUsa( parentPlaces.map((place) => place.dcid) @@ -446,7 +448,7 @@ const PlaceOverview = (props: { const RelatedPlaces = (props: { place: NamedTypedPlace; childPlaces: NamedTypedPlace[]; -}) => { +}): React.JSX.Element => { const [isCollapsed, setIsCollapsed] = useState(true); const { place, childPlaces } = props; if (!childPlaces || childPlaces.length === 0) { @@ -458,7 +460,7 @@ const RelatedPlaces = (props: { const truncatedPlaces = childPlaces.slice(0, NUM_PLACES); const numPlacesCollapsed = childPlaces.length - NUM_PLACES; - const toggleShowMore = () => { + const toggleShowMore = (): void => { setIsCollapsed(!isCollapsed); }; @@ -502,7 +504,7 @@ const PlaceCharts = (props: { childPlaceType: string; place: NamedTypedPlace; pageConfig: SubjectPageConfig; -}) => { +}): React.JSX.Element => { const { childPlaceType, place, pageConfig } = props; return (
@@ -521,7 +523,7 @@ const PlaceCharts = (props: { * Main component for the dev place page. Manages state and data fetching for place information, * related places, and chart data. */ -export const DevPlaceMain = () => { +export const DevPlaceMain = (): React.JSX.Element => { // Core place data const [place, setPlace] = useState(); const [placeSummary, setPlaceSummary] = useState(); @@ -570,7 +572,7 @@ export const DevPlaceMain = () => { if (!place) { return; } - (async () => { + (async (): Promise => { const [placeChartsApiResponse, relatedPlacesApiResponse] = await Promise.all([ defaultDataCommonsWebClient.getPlaceCharts({ diff --git a/static/js/place/menu.tsx b/static/js/place/menu.tsx index 8b6b9d7245..53120b6dac 100644 --- a/static/js/place/menu.tsx +++ b/static/js/place/menu.tsx @@ -53,7 +53,7 @@ class MenuCategory extends React.Component { href={hrefString} className={`nav-link ${selectCategory === category ? "active" : ""}`} text={this.props.categoryDisplayStr} - handleClick={() => + handleClick={(): void => triggerGAEvent(GA_EVENT_PLACE_CATEGORY_CLICK, { [GA_PARAM_PLACE_CATEGORY_CLICK]: category, [GA_PARAM_PLACE_CATEGORY_CLICK_SOURCE]: @@ -128,7 +128,7 @@ class Menu extends React.Component { description: "Text for header or subheader of Overview charts on place pages.", })} - handleClick={() => + handleClick={(): void => triggerGAEvent(GA_EVENT_PLACE_CATEGORY_CLICK, { [GA_PARAM_PLACE_CATEGORY_CLICK]: GA_VALUE_PLACE_CATEGORY_CLICK_OVERVIEW, diff --git a/static/js/place/place_search.tsx b/static/js/place/place_search.tsx index 2b94fada0d..488b6cacbc 100644 --- a/static/js/place/place_search.tsx +++ b/static/js/place/place_search.tsx @@ -41,7 +41,7 @@ export function PlaceSearch(props: PlaceSearchPropType): JSX.Element {
setShowSearchBar(true)} + onClick={(): void => setShowSearchBar(true)} style={{ display: `${showSearchBar ? "none" : ""}` }} > {toggleText} @@ -61,7 +61,10 @@ export function PlaceSearch(props: PlaceSearchPropType): JSX.Element { />
-
setShowSearchBar(false)}> +
setShowSearchBar(false)} + > cancel
diff --git a/static/js/search/all_results.tsx b/static/js/search/all_results.tsx index b737ca5b0c..286272ae25 100644 --- a/static/js/search/all_results.tsx +++ b/static/js/search/all_results.tsx @@ -22,7 +22,6 @@ import _ from "lodash"; import React, { useEffect, useState } from "react"; -import { NamedNode } from "../shared/types"; import { getPlaceDcids } from "../utils/place_utils"; import { getStatVarSearchResults } from "../utils/search_utils"; import { PlaceResults } from "./place_results"; diff --git a/static/js/search/search_input.tsx b/static/js/search/search_input.tsx index bc04836ccb..8b7d252d7b 100644 --- a/static/js/search/search_input.tsx +++ b/static/js/search/search_input.tsx @@ -61,16 +61,16 @@ export function SearchInput(props: SearchInputPropType): JSX.Element { <>
{ + onBlur={(event): void => { if (!event.currentTarget.contains(event.relatedTarget as Node)) { setShowResults(false); } }} - onKeyDown={(event) => handleKeydownEvent(event)} + onKeyDown={(event): void => handleKeydownEvent(event)} >
{ + onSubmit={(event): void => { event.preventDefault(); redirectAction(inputText, "", ""); }} @@ -80,14 +80,14 @@ export function SearchInput(props: SearchInputPropType): JSX.Element { className="search-input-box" type="text" value={inputText} - onChange={(event) => onInputChanged(event.target.value)} + onChange={(event): void => onInputChanged(event.target.value)} placeholder="Search for places, variables, and more on Data Commons" />
{!_.isEmpty(inputText) && ( onInputChanged("")} + onClick={(): void => onInputChanged("")} > clear @@ -99,7 +99,7 @@ export function SearchInput(props: SearchInputPropType): JSX.Element { className={`search-input-result ${ 0 === hoveredIdx ? "search-input-result-highlighted" : "" }`} - onClick={() => redirectAction(inputText, "", "")} + onClick={(): void => redirectAction(inputText, "", "")} key={"search-input-result-0"} > {inputText} @@ -114,7 +114,9 @@ export function SearchInput(props: SearchInputPropType): JSX.Element { : "" }`} key={"search-input-result-" + result.dcid} - onClick={() => redirectAction(result.name, result.dcid, "")} + onClick={(): void => + redirectAction(result.name, result.dcid, "") + } > {getHighlightedJSX(result.dcid, result.name, matches)}
@@ -129,7 +131,9 @@ export function SearchInput(props: SearchInputPropType): JSX.Element { ? "search-input-result-highlighted" : "" }`} - onClick={() => redirectAction(result.name, "", result.dcid)} + onClick={(): void => + redirectAction(result.name, "", result.dcid) + } key={"search-input-result-" + result.dcid} > {getHighlightedJSX(result.dcid, result.name, matches)} @@ -141,7 +145,7 @@ export function SearchInput(props: SearchInputPropType): JSX.Element {
redirectAction(inputText, "", "")} + onClick={(): void => redirectAction(inputText, "", "")} > diff --git a/static/js/search/statvar_results.tsx b/static/js/search/statvar_results.tsx index 57cbadaaa4..2252e76847 100644 --- a/static/js/search/statvar_results.tsx +++ b/static/js/search/statvar_results.tsx @@ -81,7 +81,7 @@ export function StatVarResults(props: StatVarResultsProps): JSX.Element {
{canExpand && (
setShowAll(true)} + onClick={(): void => setShowAll(true)} className="search-results-sv-show-more" > show {props.statVars.length - NUM_EXAMPLE_SV} more @@ -89,7 +89,7 @@ export function StatVarResults(props: StatVarResultsProps): JSX.Element { )} {showAll && (
setShowAll(false)} + onClick={(): void => setShowAll(false)} className="search-results-sv-show-more" > show less diff --git a/static/js/shared/chip.tsx b/static/js/shared/chip.tsx index 21ac12af65..4efeabd189 100644 --- a/static/js/shared/chip.tsx +++ b/static/js/shared/chip.tsx @@ -43,7 +43,7 @@ export function Chip(props: ChipPropsType): JSX.Element { className={`chip-text${ props.onTextClick ? " chip-clickable-text" : "" }`} - onClick={() => { + onClick={(): void => { if (props.onTextClick) { props.onTextClick(); } @@ -54,7 +54,7 @@ export function Chip(props: ChipPropsType): JSX.Element { @@ -118,7 +118,7 @@ export function FacetSelector(props: FacetSelectorPropType): JSX.Element { className={`${SELECTOR_PREFIX}-modal`} style={{ maxWidth: MODAL_MAX_WIDTH }} > - setModalOpen(false)}> + setModalOpen(false)}> Source Selector @@ -228,7 +228,7 @@ function getFacetOptionJsx( type="radio" name={facetInfo.dcid} defaultChecked={selectedFacetId === facetId} - onClick={() => { + onClick={(): void => { setModalSelections({ ...modalSelections, [facetInfo.dcid]: facetId, diff --git a/static/js/shared/place_search_bar.tsx b/static/js/shared/place_search_bar.tsx index 9ffbd3e642..8d5eb1e73b 100644 --- a/static/js/shared/place_search_bar.tsx +++ b/static/js/shared/place_search_bar.tsx @@ -112,7 +112,7 @@ class PlaceSearchBar extends Component { this.getPlaceAndRender(customPlace) ) ); - this.ac.addListener("place_changed", (e) => this.getPlaceAndRender(null)); + this.ac.addListener("place_changed", () => this.getPlaceAndRender(null)); } this.setPlaceholder(); } @@ -126,10 +126,11 @@ class PlaceSearchBar extends Component { return HARDCODED_RESULTS[inputVal.toLowerCase()]; } + /* eslint-disable camelcase */ private onAutocompleteKeyUp( e, onMouseDown: (customPlace: { name: string; place_id?: string }) => void - ) { + ): void { // Test for, and respond to, a few hardcoded results. const inputVal = (e.target as HTMLInputElement).value; const dcid = PlaceSearchBar.getHardcodedResultDcid(inputVal); @@ -183,8 +184,9 @@ class PlaceSearchBar extends Component { } } } + /* eslint-enable camelcase */ - private setPlaceholder() { + private setPlaceholder(): void { this.inputElem.current.value = ""; const numPlaces = Object.keys(this.props.places).length; this.inputElem.current.disabled = false; diff --git a/static/js/shared/place_selector.tsx b/static/js/shared/place_selector.tsx index 035831a3a8..e755ff1510 100644 --- a/static/js/shared/place_selector.tsx +++ b/static/js/shared/place_selector.tsx @@ -126,13 +126,13 @@ export function PlaceSelector(props: PlaceSelectorProps): JSX.Element { ? { [props.selectedPlace.dcid]: props.selectedPlace.name } : {} } - addPlace={(e) => { + addPlace={(e): void => { selectPlace(e, props.onPlaceSelected); triggerGAEvent(GA_EVENT_TOOL_PLACE_ADD, { [GA_PARAM_PLACE_DCID]: e, }); }} - removePlace={() => + removePlace={(): void => unselectPlace(props.onPlaceSelected, setChildPlaceTypes) } numPlacesLimit={1} @@ -146,7 +146,7 @@ export function PlaceSelector(props: PlaceSelectorProps): JSX.Element { id={`${SELECTOR_PREFIX}-place-type`} type="select" value={props.enclosedPlaceType} - onChange={(e) => + onChange={(e): void => selectEnclosedPlaceType(e, props.onEnclosedPlaceTypeSelected) } className="pac-target-input" diff --git a/static/js/stat_var_hierarchy/node_header.tsx b/static/js/stat_var_hierarchy/node_header.tsx index 5f0832a983..2c4b3a10aa 100644 --- a/static/js/stat_var_hierarchy/node_header.tsx +++ b/static/js/stat_var_hierarchy/node_header.tsx @@ -31,7 +31,7 @@ const DOWN_ARROW_HTML = arrow_drop_down; const RIGHT_ARROW_HTML = arrow_right; const TOOLTIP_TOP_OFFSET = 10; -interface StatVarHierarchyNodeHeaderPropType { +export interface StatVarHierarchyNodeHeaderPropType { childrenStatVarCount: number; selectionCount: number; title: string; @@ -76,7 +76,7 @@ export class StatVarHierarchyNodeHeader extends React.Component hideTooltip()} + onMouseOut={(): void => hideTooltip()} > {this.props.title} {this.props.childrenStatVarCount > 0 && @@ -90,7 +90,7 @@ export class StatVarHierarchyNodeHeader extends React.Component { + private mouseMoveAction = (e: React.MouseEvent): void => { const containerClientRect = ( d3.select(`#${SV_HIERARCHY_SECTION_ID}`).node() as HTMLElement ).getBoundingClientRect(); diff --git a/static/js/stat_var_hierarchy/stat_var_group_node.tsx b/static/js/stat_var_hierarchy/stat_var_group_node.tsx index 5f30fb93af..6252d1442e 100644 --- a/static/js/stat_var_hierarchy/stat_var_group_node.tsx +++ b/static/js/stat_var_hierarchy/stat_var_group_node.tsx @@ -33,7 +33,10 @@ import { StatVarHierarchyType, StatVarInfo, } from "../shared/types"; -import { StatVarHierarchyNodeHeader } from "./node_header"; +import { + StatVarHierarchyNodeHeader, + StatVarHierarchyNodeHeaderPropType, +} from "./node_header"; import { StatVarGroupSection } from "./stat_var_group_section"; import { StatVarSection } from "./stat_var_section"; @@ -184,7 +187,12 @@ export class StatVarGroupNode extends React.Component< : this.state.childSVG.filter((svg) => { return svg.descendentStatVarCount > 0 || svgOnSvPath.has(svg.id); }); - const getTrigger = (opened: boolean) => { + const getTrigger = ( + opened: boolean + ): React.CElement< + StatVarHierarchyNodeHeaderPropType, + StatVarHierarchyNodeHeader + > => { return React.createElement(StatVarHierarchyNodeHeader, { childrenStatVarCount: this.props.data.descendentStatVarCount, highlighted: this.props.isSelected, diff --git a/static/js/stat_var_hierarchy/stat_var_hierarchy.tsx b/static/js/stat_var_hierarchy/stat_var_hierarchy.tsx index b8aa196cae..a7d4c7d61b 100644 --- a/static/js/stat_var_hierarchy/stat_var_hierarchy.tsx +++ b/static/js/stat_var_hierarchy/stat_var_hierarchy.tsx @@ -174,7 +174,7 @@ export class StatVarHierarchy extends React.Component< className={`material-icons-outlined ${ this.state.showAllSV ? "toggle-on" : "toggle-off" }`} - onClick={() => + onClick={(): void => this.setState({ showAllSV: !this.state.showAllSV }) } > @@ -185,7 +185,7 @@ export class StatVarHierarchy extends React.Component<
hideTooltip()} + onMouseOut={(): void => hideTooltip()} className="material-icons-outlined" > info @@ -387,7 +387,7 @@ export class StatVarHierarchy extends React.Component< }); } - private onMouseOverInfoIcon = () => { + private onMouseOverInfoIcon = (): void => { const html = "
  • The number in parentheses represents the number of stat vars " + "within the group where we have data for the chosen place(s).
    • " + diff --git a/static/js/stat_var_hierarchy/stat_var_search.tsx b/static/js/stat_var_hierarchy/stat_var_search.tsx index a0947506a8..f9f8d0b570 100644 --- a/static/js/stat_var_hierarchy/stat_var_search.tsx +++ b/static/js/stat_var_hierarchy/stat_var_search.tsx @@ -20,7 +20,7 @@ */ import _ from "lodash"; -import React from "react"; +import React, { ChangeEvent } from "react"; import { GA_EVENT_TOOL_STAT_VAR_SEARCH_NO_RESULT, @@ -105,7 +105,7 @@ export class StatVarHierarchySearch extends React.Component< return (
    { + onBlur={(event): void => { if (!event.currentTarget.contains(event.relatedTarget as Node)) { this.setState({ showResults: false }); } @@ -195,7 +195,9 @@ export class StatVarHierarchySearch extends React.Component< return result; } - private onInputChanged = (event) => { + private onInputChanged = ( + event: React.ChangeEvent + ): void => { this.setState({ showResults: true }); const query = event.target.value; // When the seach text is fully removed, should call onSelectChange to @@ -215,7 +217,7 @@ export class StatVarHierarchySearch extends React.Component< } }; - private search = (query: string) => () => { + private search = (query: string) => (): void => { getStatVarSearchResults(query, this.props.entities, false) .then((data) => { const currQuery = this.state.query; @@ -241,7 +243,7 @@ export class StatVarHierarchySearch extends React.Component< }); }; - private onInputClear = () => { + private onInputClear = (): void => { this.props.onSelectionChange(""); this.setState({ query: "", @@ -252,7 +254,7 @@ export class StatVarHierarchySearch extends React.Component< }); }; - private onResultSelected = (selectedID: string) => () => { + private onResultSelected = (selectedID: string) => (): void => { this.props.onSelectionChange(selectedID); let displayName = ""; if (this.state.svResults) { diff --git a/static/js/stat_var_hierarchy/stat_var_section_input.tsx b/static/js/stat_var_hierarchy/stat_var_section_input.tsx index 592a63fd5f..aa02cda11b 100644 --- a/static/js/stat_var_hierarchy/stat_var_section_input.tsx +++ b/static/js/stat_var_hierarchy/stat_var_section_input.tsx @@ -167,7 +167,7 @@ export class StatVarSectionInput extends React.Component< } htmlFor={sectionId} onMouseMove={this.mouseMoveAction(this.props.statVar.hasData)} - onMouseOut={() => hideTooltip()} + onMouseOut={(): void => hideTooltip()} > {displayName} @@ -257,18 +257,20 @@ export class StatVarSectionInput extends React.Component< return html; } - private mouseMoveAction = (hasData: boolean) => (e) => { - const html = this.getTooltipHtml(hasData); - if (_.isEmpty(html)) { - return; - } - const containerClientRect = ( - d3.select(`#${SV_HIERARCHY_SECTION_ID}`).node() as HTMLElement - ).getBoundingClientRect(); - const top = e.pageY - containerClientRect.y + TOOLTIP_TOP_OFFSET; - const left = e.pageX - containerClientRect.x; - showTooltip(html, { left, top }); - }; + private mouseMoveAction = + (hasData: boolean) => + (e): void => { + const html = this.getTooltipHtml(hasData); + if (_.isEmpty(html)) { + return; + } + const containerClientRect = ( + d3.select(`#${SV_HIERARCHY_SECTION_ID}`).node() as HTMLElement + ).getBoundingClientRect(); + const top = e.pageY - containerClientRect.y + TOOLTIP_TOP_OFFSET; + const left = e.pageX - containerClientRect.x; + showTooltip(html, { left, top }); + }; } StatVarSectionInput.contextType = Context; diff --git a/static/js/tools/download/page.test.tsx b/static/js/tools/download/page.test.tsx index e3e6b43bdd..f104ecf2e9 100644 --- a/static/js/tools/download/page.test.tsx +++ b/static/js/tools/download/page.test.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +/* eslint-disable camelcase */ jest.mock("axios"); jest.setTimeout(100000); @@ -38,9 +39,9 @@ const INFO_PLACES: [InfoPlace, InfoPlace] = [ { name: "Place 2", dcid: "dcid/2" }, ]; -async function waitForComponentUpdates(wrapper: ReactWrapper) { +async function waitForComponentUpdates(wrapper: ReactWrapper): Promise { // Wait for state updates - await waitFor(() => { + await waitFor((): void => { expect(wrapper.text()).toContain(""); }); // Wait for stat var info and place info fetching diff --git a/static/js/tools/download/page.tsx b/static/js/tools/download/page.tsx index 39cb13264f..d499555dee 100644 --- a/static/js/tools/download/page.tsx +++ b/static/js/tools/download/page.tsx @@ -91,7 +91,7 @@ export function Page(props: PagePropType): JSX.Element { // request object used to get facetListPromise const facetsReqObj = useRef({}); const [isSvModalOpen, updateSvModalOpen] = useState(false); - const toggleSvModalCallback = () => updateSvModalOpen(!isSvModalOpen); + const toggleSvModalCallback = (): void => updateSvModalOpen(!isSvModalOpen); useEffect(() => { if (showPreview) { @@ -191,12 +191,12 @@ export function Page(props: PagePropType): JSX.Element { + onPlaceSelected={(place): void => setSelectedOptions((prev) => { return { ...prev, selectedPlace: place, enclosedPlaceType: "" }; }) } - onEnclosedPlaceTypeSelected={(enclosedPlaceType) => + onEnclosedPlaceTypeSelected={(enclosedPlaceType): void => setSelectedOptions((prev) => { return { ...prev, enclosedPlaceType }; }) @@ -215,7 +215,7 @@ export function Page(props: PagePropType): JSX.Element { defaultChecked={ selectedOptions.dateType === DownloadDateTypes.LATEST } - onClick={() => + onClick={(): void => setSelectedOptions((prev) => { return { ...prev, @@ -236,7 +236,7 @@ export function Page(props: PagePropType): JSX.Element { defaultChecked={ selectedOptions.dateType === DownloadDateTypes.ALL } - onClick={() => + onClick={(): void => setSelectedOptions((prev) => { return { ...prev, dateType: DownloadDateTypes.ALL }; }) @@ -254,7 +254,7 @@ export function Page(props: PagePropType): JSX.Element { defaultChecked={ selectedOptions.dateType === DownloadDateTypes.RANGE } - onClick={() => + onClick={(): void => setSelectedOptions((prev) => { return { ...prev, dateType: DownloadDateTypes.RANGE }; }) @@ -275,7 +275,7 @@ export function Page(props: PagePropType): JSX.Element { : "" }`} type="text" - onChange={(e) => { + onChange={(e): void => { const date = e.target.value; setSelectedOptions((prev) => { return { ...prev, minDate: date }; @@ -286,7 +286,9 @@ export function Page(props: PagePropType): JSX.Element { DownloadDateTypes.RANGE } value={selectedOptions.minDate} - onBlur={(e) => validateDate(e.target.value, true)} + onBlur={(e): void => + validateDate(e.target.value, true) + } />
    @@ -302,7 +304,7 @@ export function Page(props: PagePropType): JSX.Element { : "" }`} type="text" - onChange={(e) => { + onChange={(e): void => { const date = e.target.value; setSelectedOptions((prev) => { return { ...prev, maxDate: date }; @@ -313,7 +315,9 @@ export function Page(props: PagePropType): JSX.Element { DownloadDateTypes.RANGE } value={selectedOptions.maxDate} - onBlur={(e) => validateDate(e.target.value, false)} + onBlur={(e): void => + validateDate(e.target.value, false) + } />
@@ -356,7 +360,7 @@ export function Page(props: PagePropType): JSX.Element { { + onSvFacetIdUpdated={(svFacetId): void => { setSelectedOptions((prev) => { return { ...prev, selectedFacets: svFacetId }; }); diff --git a/static/js/tools/download/preview.tsx b/static/js/tools/download/preview.tsx index 9980a01623..0cf873df59 100644 --- a/static/js/tools/download/preview.tsx +++ b/static/js/tools/download/preview.tsx @@ -147,7 +147,7 @@ export function Preview(props: PreviewProps): JSX.Element { }; } - function onDownloadClicked() { + function onDownloadClicked(): void { if (_.isEmpty(csvReqPayload.current)) { return; } diff --git a/static/js/tools/download/stat_var_chooser.tsx b/static/js/tools/download/stat_var_chooser.tsx index 1131078b4f..64464c90b4 100644 --- a/static/js/tools/download/stat_var_chooser.tsx +++ b/static/js/tools/download/stat_var_chooser.tsx @@ -106,13 +106,13 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { collapsible={false} svHierarchyType={StatVarHierarchyType.DOWNLOAD} sampleEntities={samplePlaces} - deselectSVs={(svList: string[]) => + deselectSVs={(svList: string[]): void => svList.forEach((sv) => { props.onStatVarRemoved(sv); }) } selectedSVs={selectedSVs} - selectSV={(sv) => selectSV(sv)} + selectSV={(sv): void => selectSV(sv)} /> {/* Modal for selecting stat var to replace when too many are selected */} @@ -140,7 +140,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { (_.isEmpty(modalSelection) && idx === 0) || modalSelection === sv } - onClick={() => setModalSelection(sv)} + onClick={(): void => setModalSelection(sv)} /> {sv in props.statVars ? props.statVars[sv].title || sv @@ -153,7 +153,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { - diff --git a/static/js/tools/map/app.tsx b/static/js/tools/map/app.tsx index 424d22c2b6..b4e14e3e46 100644 --- a/static/js/tools/map/app.tsx +++ b/static/js/tools/map/app.tsx @@ -42,7 +42,7 @@ import { function App(): JSX.Element { const [isSvModalOpen, updateSvModalOpen] = useState(false); - const toggleSvModalCallback = () => updateSvModalOpen(!isSvModalOpen); + const toggleSvModalCallback = (): void => updateSvModalOpen(!isSvModalOpen); return ( @@ -77,7 +77,7 @@ export function AppWithContext(): JSX.Element { const store = useInitialContext(params); useEffect(() => updateHash(store), [store]); - window.onhashchange = () => applyHash(store); + window.onhashchange = (): void => applyHash(store); return ( diff --git a/static/js/tools/map/chart.tsx b/static/js/tools/map/chart.tsx index 8cc6713ad6..fb0339bddb 100644 --- a/static/js/tools/map/chart.tsx +++ b/static/js/tools/map/chart.tsx @@ -170,12 +170,12 @@ export function Chart(props: ChartProps): JSX.Element { mMethods={null} svFacetId={{ [statVarDcid]: statVar.value.metahash }} facetList={props.facetList} - onSvFacetIdUpdated={(svFacetId) => + onSvFacetIdUpdated={(svFacetId): void => statVar.setMetahash(svFacetId[statVar.value.dcid]) } hideIsRatio={props.mapType === MAP_TYPE.LEAFLET} isPerCapita={statVar.value.perCapita} - onIsPerCapitaUpdated={(isPerCapita: boolean) => + onIsPerCapitaUpdated={(isPerCapita: boolean): void => statVar.setPerCapita(isPerCapita) } > @@ -187,7 +187,9 @@ export function Chart(props: ChartProps): JSX.Element { id="show-installations" type="checkbox" checked={display.value.showMapPoints} - onChange={(e) => display.setShowMapPoints(e.target.checked)} + onChange={(e): void => + display.setShowMapPoints(e.target.checked) + } /> Show Installations @@ -199,7 +201,7 @@ export function Chart(props: ChartProps): JSX.Element { ); } -const onDateRangeMouseOver = () => { +const onDateRangeMouseOver = (): void => { const offset = 20; const left = (d3.select(`#${DATE_RANGE_INFO_ID}`).node() as HTMLElement).offsetLeft + @@ -209,6 +211,6 @@ const onDateRangeMouseOver = () => { .style("visibility", "visible"); }; -const onDateRangeMouseOut = () => { +const onDateRangeMouseOut = (): void => { d3.select(`#${DATE_RANGE_INFO_TEXT_ID}`).style("visibility", "hidden"); }; diff --git a/static/js/tools/map/compute/breadcrumb.ts b/static/js/tools/map/compute/breadcrumb.ts index b91de59e06..6eafb2e664 100644 --- a/static/js/tools/map/compute/breadcrumb.ts +++ b/static/js/tools/map/compute/breadcrumb.ts @@ -32,7 +32,7 @@ import { getPlaceChartData } from "../util"; export function useComputeBreadcrumbValues( chartStore: ChartStore, dispatchChartStore: Dispatch -) { +): void { const { dateCtx, statVar, placeInfo } = useContext(Context); const breadcrumbStatReady = useBreadcrumbStatReady(chartStore); const breadcrumbDenomStatReady = useBreadcrumbDenomStatReady(chartStore); diff --git a/static/js/tools/map/compute/geojson.ts b/static/js/tools/map/compute/geojson.ts index b5212341e0..0ce14eeca5 100644 --- a/static/js/tools/map/compute/geojson.ts +++ b/static/js/tools/map/compute/geojson.ts @@ -30,7 +30,7 @@ import { getGeoJsonDataFeatures, MANUAL_GEOJSON_DISTANCES } from "../util"; export function useUpdateGeoJson( chartStore: ChartStore, dispatch: Dispatch -) { +): void { const { placeInfo } = useContext(Context); const defaultStatReady = useDefaultStatReady(chartStore); diff --git a/static/js/tools/map/compute/map_point.ts b/static/js/tools/map/compute/map_point.ts index 0001978811..a0e58ee1aa 100644 --- a/static/js/tools/map/compute/map_point.ts +++ b/static/js/tools/map/compute/map_point.ts @@ -30,7 +30,7 @@ export function useComputeMapPointValues( dispatchChartStore: Dispatch, dispatchSources: Dispatch>, dispatchMetadata: Dispatch> -) { +): void { const { statVar, placeInfo, dateCtx } = useContext(Context); const mapPointStatReady = useMapPointStatReady(chartStore); useEffect(() => { diff --git a/static/js/tools/map/compute/map_value_dates.ts b/static/js/tools/map/compute/map_value_dates.ts index 7311fd18c6..fb37f63e3b 100644 --- a/static/js/tools/map/compute/map_value_dates.ts +++ b/static/js/tools/map/compute/map_value_dates.ts @@ -40,7 +40,7 @@ export function useComputeMapValueAndDate( dispatchChartStore: Dispatch, dispatchSources: Dispatch>, dispatchMetadata: Dispatch> -) { +): void { const { statVar, placeInfo, dateCtx } = useContext(Context); const allStatReady = useAllStatReady(chartStore); const defaultStatReady = useDefaultStatReady(chartStore); diff --git a/static/js/tools/map/condition_hooks.ts b/static/js/tools/map/condition_hooks.ts index 06fddfa481..814e945d9a 100644 --- a/static/js/tools/map/condition_hooks.ts +++ b/static/js/tools/map/condition_hooks.ts @@ -21,7 +21,7 @@ import { useContext, useMemo } from "react"; import { Context } from "./context"; // Custom hook to check if needs to compute ratio for the stat. -export function useIfRatio() { +export function useIfRatio(): boolean { const { statVar } = useContext(Context); return useMemo(() => { return !!statVar.value.perCapita && !!statVar.value.denom; diff --git a/static/js/tools/map/place_details.tsx b/static/js/tools/map/place_details.tsx index 073ac698ac..7d1bce6e22 100644 --- a/static/js/tools/map/place_details.tsx +++ b/static/js/tools/map/place_details.tsx @@ -133,7 +133,7 @@ export function PlaceDetails(props: PlaceDetailsPropType): JSX.Element { ); } -function highlightPlace(e: React.MouseEvent) { +function highlightPlace(e: React.MouseEvent): void { const target = e.target as HTMLAnchorElement; const placeDcid = target.dataset.geodcid; highlightPlaceToggle( @@ -143,7 +143,7 @@ function highlightPlace(e: React.MouseEvent) { ); } -function unhighlightPlace(e: React.MouseEvent) { +function unhighlightPlace(e: React.MouseEvent): void { const target = e.target as HTMLAnchorElement; const placeDcid = target.dataset.geodcid; highlightPlaceToggle( diff --git a/static/js/tools/map/stat_var_chooser.tsx b/static/js/tools/map/stat_var_chooser.tsx index 1a99ba73ae..0122aa86e9 100644 --- a/static/js/tools/map/stat_var_chooser.tsx +++ b/static/js/tools/map/stat_var_chooser.tsx @@ -90,7 +90,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { } }, [statVar.value]); - const deselectSVs = (svList: string[]) => { + const deselectSVs = (svList: string[]): void => { if (!_.isEmpty(svList)) { // map tool can only have one stat var selected at a time so if a stat var // is deselected, just set the selected stat var to empty. @@ -109,7 +109,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { sampleEntities={samplePlaces} deselectSVs={deselectSVs} selectedSVs={selectedSVs} - selectSV={(svDcid) => + selectSV={(svDcid): void => selectStatVar(dateCtx, statVar, display, placeInfo, svDcid) } /> diff --git a/static/js/tools/map/time_slider.tsx b/static/js/tools/map/time_slider.tsx index 8ac80b3058..6efa46f878 100644 --- a/static/js/tools/map/time_slider.tsx +++ b/static/js/tools/map/time_slider.tsx @@ -135,7 +135,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element { {props.currentDate}
-
setPlay(!play)}> +
setPlay(!play)}> {!play && ( play_arrow )} diff --git a/static/js/tools/map/util.test.ts b/static/js/tools/map/util.test.ts index 20a53e6b70..3d706782f5 100644 --- a/static/js/tools/map/util.test.ts +++ b/static/js/tools/map/util.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { ContextType } from "./context"; +import { ContextType, DisplayOptions, PlaceInfo, StatVar } from "./context"; import { observationDates } from "./test_data"; import { applyHashDisplay, @@ -86,7 +86,8 @@ test("updateHashDisplay", () => { test("applyHashPlaceInfo", () => { const context = { statVar: {}, placeInfo: {} } as ContextType; - context.placeInfo.set = (value) => (context.placeInfo.value = value); + context.placeInfo.set = (value): PlaceInfo => + (context.placeInfo.value = value); const urlParams = new URLSearchParams( decodeURIComponent( "#%26sv%3DCount_Person%26svn%3DPeople%26pc%3D0%26pd%3DgeoId%2F10&ept=County" @@ -106,7 +107,7 @@ test("applyHashPlaceInfo", () => { test("applyHashStatVarInfo", () => { const context = { statVar: {}, placeInfo: {} } as ContextType; - context.statVar.set = (value) => (context.statVar.value = value); + context.statVar.set = (value): StatVar => (context.statVar.value = value); const urlParams = new URLSearchParams( decodeURIComponent( "#%26sv%3DCount_Person%26svn%3DPeople%26pc%3D0%26denom%3DCount_Person%26pd%3DgeoId%2F10%26pn%3DDelaware%26pt%3DCounty" @@ -118,7 +119,8 @@ test("applyHashStatVarInfo", () => { test("applyHashDisplay", () => { const context = { statVar: {}, placeInfo: {}, display: {} } as ContextType; - context.display.set = (value) => (context.display.value = value); + context.display.set = (value): DisplayOptions => + (context.display.value = value); const urlParams = new URLSearchParams( decodeURIComponent("%23%26domain%3D-10%3A50%3A100%26color%3Dred").replace( "#",