From b8bff1aa528cfab5eb081fed39418baee1208e8d Mon Sep 17 00:00:00 2001 From: Gabriel Mechali Date: Fri, 20 Dec 2024 12:00:46 -0500 Subject: [PATCH 1/2] Resolves around 100 lint warnings --- static/js/apps/explore/debug_info.tsx | 4 ++-- .../js/apps/visualization/selector_wrapper.tsx | 1 - .../vis_type_configs/scatter_config.tsx | 6 +++--- static/js/biomedical/landing/card.tsx | 8 +++++--- static/js/tools/shared/tool_chart_footer.tsx | 6 +++--- static/js/tools/stat_var/page.tsx | 6 +++--- static/js/tools/timeline/chart.tsx | 16 ++++++++-------- static/js/tools/timeline/chart_region.tsx | 14 +++++++------- static/js/tools/timeline/data_fetcher.test.ts | 2 ++ static/js/tools/timeline/mock_functions.tsx | 2 ++ static/js/tools/timeline/page.test.tsx | 2 +- static/js/tools/timeline/page.tsx | 12 ++++++------ static/js/types/app/explore_types.ts | 2 +- static/js/utils/disaster_event_map_utils.tsx | 6 ++++-- static/js/utils/place_utils.ts | 3 +-- static/js/utils/stat_metadata_utils.test.ts | 2 +- static/library/index.ts | 2 +- static/library/slider_component.ts | 13 +++---------- 18 files changed, 53 insertions(+), 54 deletions(-) diff --git a/static/js/apps/explore/debug_info.tsx b/static/js/apps/explore/debug_info.tsx index 44445f8713..a59e3a8a2c 100644 --- a/static/js/apps/explore/debug_info.tsx +++ b/static/js/apps/explore/debug_info.tsx @@ -57,8 +57,8 @@ const svToSentences = (
  • {sentence.sentence} (cosine: {sentence.score.toFixed(4)} - {sentence.rerank_score - ? " - rerank:" + sentence.rerank_score.toFixed(4) + {sentence.rerankScore + ? " - rerank:" + sentence.rerankScore.toFixed(4) : ""} )
    • diff --git a/static/js/apps/visualization/selector_wrapper.tsx b/static/js/apps/visualization/selector_wrapper.tsx index f68df5d54f..18abeadc55 100644 --- a/static/js/apps/visualization/selector_wrapper.tsx +++ b/static/js/apps/visualization/selector_wrapper.tsx @@ -18,7 +18,6 @@ * Wrapper for selectors used in the selector pane. */ -import _ from "lodash"; import React from "react"; interface SelectorWrapperPropType { diff --git a/static/js/apps/visualization/vis_type_configs/scatter_config.tsx b/static/js/apps/visualization/vis_type_configs/scatter_config.tsx index 3863f5aa03..316f04e783 100644 --- a/static/js/apps/visualization/vis_type_configs/scatter_config.tsx +++ b/static/js/apps/visualization/vis_type_configs/scatter_config.tsx @@ -76,7 +76,7 @@ function getDisplayInputs(appContext: AppContextType): InputInfo[] { return [ { isChecked: appContext.displayOptions.scatterQuadrants, - onUpdated: (isChecked: boolean) => { + onUpdated: (isChecked: boolean): void => { const newDisplayOptions = _.cloneDeep(appContext.displayOptions); newDisplayOptions.scatterQuadrants = isChecked; appContext.setDisplayOptions(newDisplayOptions); @@ -86,7 +86,7 @@ function getDisplayInputs(appContext: AppContextType): InputInfo[] { }, { isChecked: appContext.displayOptions.scatterPlaceLabels, - onUpdated: (isChecked: boolean) => { + onUpdated: (isChecked: boolean): void => { const newDisplayOptions = _.cloneDeep(appContext.displayOptions); newDisplayOptions.scatterPlaceLabels = isChecked; appContext.setDisplayOptions(newDisplayOptions); @@ -122,7 +122,7 @@ function getFacetSelector(appContext: AppContextType): JSX.Element { }; }); }); - const onSvFacetIdUpdated = (svFacetId: Record) => { + const onSvFacetIdUpdated = (svFacetId: Record): void => { const facetsChanged = statVars.filter( (sv) => sv.facetId !== svFacetId[sv.dcid] ); diff --git a/static/js/biomedical/landing/card.tsx b/static/js/biomedical/landing/card.tsx index 5feefa5e8f..14489354e2 100644 --- a/static/js/biomedical/landing/card.tsx +++ b/static/js/biomedical/landing/card.tsx @@ -43,7 +43,7 @@ const CardContainer = styled.a` `; const Text = styled.div` - color: ${(props) => props.theme.textColor || "#146C2E"}; + color: ${(props: CardProps): string => props.theme.textColor || "#146C2E"}; font-size: 24px; font-weight: 400; line-height: 32px; @@ -57,9 +57,11 @@ const Text = styled.div` const Tag = styled.div` align-items: center; - background-color: ${(props) => props.theme.tagBackgroundColor || "#C4EED0"}; + background-color: ${(props: CardProps): string => + props.theme.tagBackgroundColor || "#C4EED0"}; border-radius: 28px; - color: ${(props) => props.theme.tagLabelColor || "#072711"}; + color: ${(props: CardProps): string => + props.theme.tagLabelColor || "#072711"}; display: flex; font-size: 12px; font-weight: 500; diff --git a/static/js/tools/shared/tool_chart_footer.tsx b/static/js/tools/shared/tool_chart_footer.tsx index 620d517250..f1d1721100 100644 --- a/static/js/tools/shared/tool_chart_footer.tsx +++ b/static/js/tools/shared/tool_chart_footer.tsx @@ -93,7 +93,7 @@ export function ToolChartFooter(props: ToolChartFooterPropType): JSX.Element { )}
    setChartOptionsOpened(!chartOptionsOpened)} + onClick={(): void => setChartOptionsOpened(!chartOptionsOpened)} className={`${SELECTOR_PREFIX}-options-button`} > Chart Options @@ -110,7 +110,7 @@ export function ToolChartFooter(props: ToolChartFooterPropType): JSX.Element { id={ratioCheckboxId} type="checkbox" checked={props.isPerCapita} - onChange={() => { + onChange={(): void => { props.onIsPerCapitaUpdated(!props.isPerCapita); if (!props.isPerCapita) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -129,7 +129,7 @@ export function ToolChartFooter(props: ToolChartFooterPropType): JSX.Element { { + onSvFacetIdUpdated={(svFacetId): void => { props.onSvFacetIdUpdated(svFacetId); triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { [GA_PARAM_TOOL_CHART_OPTION]: diff --git a/static/js/tools/stat_var/page.tsx b/static/js/tools/stat_var/page.tsx index 0911c77e0a..e34c092537 100644 --- a/static/js/tools/stat_var/page.tsx +++ b/static/js/tools/stat_var/page.tsx @@ -82,7 +82,7 @@ class Page extends Component { this.toggleSvHierarchyModal = this.toggleSvHierarchyModal.bind(this); } - private handleHashChange = () => { + private handleHashChange = (): void => { const dataset = getUrlToken(SV_URL_PARAMS.DATASET); const source = getUrlToken(SV_URL_PARAMS.SOURCE); const sv = getUrlToken(SV_URL_PARAMS.STAT_VAR); @@ -117,9 +117,9 @@ class Page extends Component { collapsible={false} svHierarchyType={StatVarHierarchyType.STAT_VAR} sampleEntities={entities} - deselectSVs={() => updateHash({ [SV_URL_PARAMS.STAT_VAR]: "" })} + deselectSVs={(): void => updateHash({ [SV_URL_PARAMS.STAT_VAR]: "" })} selectedSVs={svs} - selectSV={(sv) => updateHash({ [SV_URL_PARAMS.STAT_VAR]: sv })} + selectSV={(sv): void => updateHash({ [SV_URL_PARAMS.STAT_VAR]: sv })} disableAlert={true} />
    diff --git a/static/js/tools/timeline/chart.tsx b/static/js/tools/timeline/chart.tsx index ebb75bd294..3dcf415ef7 100644 --- a/static/js/tools/timeline/chart.tsx +++ b/static/js/tools/timeline/chart.tsx @@ -131,7 +131,7 @@ class Chart extends Component { title={this.props.statVarInfos[statVar].title} color={color} removeChip={this.props.removeStatVar} - onTextClick={() => + onTextClick={(): void => window.open(`/tools/statvar#sv=${statVar}`) } /> @@ -152,10 +152,10 @@ class Chart extends Component { } svFacetId={svFacetId} facetList={facetList} - onSvFacetIdUpdated={(svFacetId) => setMetahash(svFacetId)} + onSvFacetIdUpdated={(svFacetId): void => setMetahash(svFacetId)} hideIsRatio={false} isPerCapita={this.props.pc} - onIsPerCapitaUpdated={(isPerCapita: boolean) => + onIsPerCapitaUpdated={(isPerCapita: boolean): void => setChartOption(this.props.chartId, "pc", isPerCapita) } > @@ -167,7 +167,7 @@ class Chart extends Component { className="is-delta-input" type="checkbox" checked={this.props.delta} - onChange={() => { + onChange={(): void => { setChartOption( this.props.chartId, "delta", @@ -247,7 +247,7 @@ class Chart extends Component { this.processData(); } - private handleWindowResize() { + private handleWindowResize(): void { if (!this.svgContainer.current) { return; } @@ -271,7 +271,7 @@ class Chart extends Component { }); } - private loadRawData() { + private loadRawData(): void { const places = Object.keys(this.props.placeNameMap); const statVars = Object.keys(this.props.statVarInfos); fetchRawData(places, statVars, this.props.denom) @@ -284,7 +284,7 @@ class Chart extends Component { }); } - private processData() { + private processData(): void { if (!this.state.rawData) { return; } @@ -351,7 +351,7 @@ class Chart extends Component { /** * Draw chart in current svg container based on stats data. */ - private drawChart() { + private drawChart(): void { const dataGroupsDict = {}; if (!this.state.statData) { return; diff --git a/static/js/tools/timeline/chart_region.tsx b/static/js/tools/timeline/chart_region.tsx index b1ae9b0e64..ce30a05465 100644 --- a/static/js/tools/timeline/chart_region.tsx +++ b/static/js/tools/timeline/chart_region.tsx @@ -67,7 +67,7 @@ class ChartRegion extends Component { "download-link" ) as HTMLAnchorElement; if (this.downloadLink) { - this.downloadLink.onclick = () => { + this.downloadLink.onclick = (): void => { saveToFile("export.csv", this.createDataCsv(this.props.placeName)); }; } @@ -75,7 +75,7 @@ class ChartRegion extends Component { "bulk-download-link" ) as HTMLAnchorElement; if (this.bulkDownloadLink) { - this.bulkDownloadLink.onclick = () => { + this.bulkDownloadLink.onclick = (): void => { // Carry over hash params, which is used by the bulk download tool for // stat var parsing. window.location.href = window.location.href.replace( @@ -114,7 +114,7 @@ class ChartRegion extends Component { denom={chartGroupInfo.chartIdToOptions[mprop].denom} delta={chartGroupInfo.chartIdToOptions[mprop].delta} onDataUpdate={this.onDataUpdate.bind(this)} - removeStatVar={(statVar) => { + removeStatVar={(statVar): void => { removeToken("statsVar", statVarSep, statVar); setMetahash({ [statVar]: "" }); }} @@ -122,7 +122,7 @@ class ChartRegion extends Component { getMetahash(), chartGroupInfo.chartIdToStatVars[mprop] )} - onMetadataMapUpdate={(metadataMap) => { + onMetadataMapUpdate={(metadataMap): void => { this.metadataMap = { ...this.metadataMap, ...metadataMap }; }} > @@ -132,7 +132,7 @@ class ChartRegion extends Component { ); } - componentWillUnmount() { + componentWillUnmount(): void { if (this.downloadLink) { this.downloadLink.style.display = "none"; } @@ -141,7 +141,7 @@ class ChartRegion extends Component { } } - private onDataUpdate(groupId: string, data: StatData) { + private onDataUpdate(groupId: string, data: StatData): void { this.allStatData[groupId] = data; const displayStyle = Object.keys(this.allStatData).length > 0 ? "inline-block" : "none"; @@ -184,7 +184,7 @@ class ChartRegion extends Component { }; } - private createDataCsv(placeNames: Record) { + private createDataCsv(placeNames: Record): string { // Get all the dates let allDates = new Set(); for (const mprop in this.allStatData) { diff --git a/static/js/tools/timeline/data_fetcher.test.ts b/static/js/tools/timeline/data_fetcher.test.ts index 80cc6420de..821f4eaffa 100644 --- a/static/js/tools/timeline/data_fetcher.test.ts +++ b/static/js/tools/timeline/data_fetcher.test.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable camelcase */ + import { expect } from "@jest/globals"; import axios from "axios"; import { when } from "jest-when"; diff --git a/static/js/tools/timeline/mock_functions.tsx b/static/js/tools/timeline/mock_functions.tsx index 939cd52537..3fc25bb3be 100644 --- a/static/js/tools/timeline/mock_functions.tsx +++ b/static/js/tools/timeline/mock_functions.tsx @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable camelcase */ + jest.mock("axios"); import { expect } from "@jest/globals"; diff --git a/static/js/tools/timeline/page.test.tsx b/static/js/tools/timeline/page.test.tsx index f9ff79e339..751c3a8de7 100644 --- a/static/js/tools/timeline/page.test.tsx +++ b/static/js/tools/timeline/page.test.tsx @@ -38,7 +38,7 @@ beforeEach(() => { window.infoConfig = {}; }); -async function waitForComponentUpdates(wrapper: ReactWrapper) { +async function waitForComponentUpdates(wrapper: ReactWrapper): Promise { // Wait for state updates await waitFor(() => { expect(wrapper.text()).toContain(""); diff --git a/static/js/tools/timeline/page.tsx b/static/js/tools/timeline/page.tsx index 1a3df0c0ec..d7debd0f29 100644 --- a/static/js/tools/timeline/page.tsx +++ b/static/js/tools/timeline/page.tsx @@ -111,7 +111,7 @@ class Page extends Component { }); } - private onSvHierarchyModalOpened() { + private onSvHierarchyModalOpened(): void { if ( this.svHierarchyModalRef.current && this.svHierarchyContainerRef.current @@ -122,7 +122,7 @@ class Page extends Component { } } - private onSvHierarchyModalClosed() { + private onSvHierarchyModalClosed(): void { document .getElementById("explore") .appendChild(this.svHierarchyContainerRef.current); @@ -142,7 +142,7 @@ class Page extends Component { sv.includes("|") ? sv.split("|")[0] : sv ); - const deselectSVs = (svList: string[]) => { + const deselectSVs = (svList: string[]): void => { const availableSVs = statVars.filter((sv) => svList.indexOf(sv) === -1); const statVarTokenInfo = { name: TIMELINE_URL_PARAM_KEYS.STAT_VAR, @@ -167,7 +167,7 @@ class Page extends Component { sampleEntities={namedPlaces} deselectSVs={deselectSVs} selectedSVs={svToSvInfo} - selectSV={(sv) => + selectSV={(sv): void => addToken(TIMELINE_URL_PARAM_KEYS.STAT_VAR, statVarSep, sv) } /> @@ -189,13 +189,13 @@ class Page extends Component { { + addPlace={(place): void => { addToken(TIMELINE_URL_PARAM_KEYS.PLACE, placeSep, place); triggerGAEvent(GA_EVENT_TOOL_PLACE_ADD, { [GA_PARAM_PLACE_DCID]: place, }); }} - removePlace={(place) => { + removePlace={(place): void => { removeToken( TIMELINE_URL_PARAM_KEYS.PLACE, placeSep, diff --git a/static/js/types/app/explore_types.ts b/static/js/types/app/explore_types.ts index 02de1d2f9c..896a0ef035 100644 --- a/static/js/types/app/explore_types.ts +++ b/static/js/types/app/explore_types.ts @@ -61,7 +61,7 @@ export interface SVScores { export interface SentenceScore { sentence: string; score: number; - rerank_score: number; + rerankScore: number; } export interface DebugInfo { diff --git a/static/js/utils/disaster_event_map_utils.tsx b/static/js/utils/disaster_event_map_utils.tsx index 6fe50bb006..1191a8327f 100644 --- a/static/js/utils/disaster_event_map_utils.tsx +++ b/static/js/utils/disaster_event_map_utils.tsx @@ -176,7 +176,7 @@ function getGeoJsonFeature( eventDcid: string, geoJsonProp: string, propVals: { [prop: string]: { vals: string[] } } -) { +): string { let geoJson = null; if (propVals[geoJsonProp] && !_.isEmpty(propVals[geoJsonProp].vals)) { // Remove any extra backslashes that that are in the prop val string. @@ -465,7 +465,9 @@ export function onPointClicked( const infoCard = d3.select(infoCardElement); ReactDOM.render( d3.select(infoCardElement).style("visibility", "hidden")} + onClose={(): d3.Selection => + d3.select(infoCardElement).style("visibility", "hidden") + } eventData={point} />, infoCardElement diff --git a/static/js/utils/place_utils.ts b/static/js/utils/place_utils.ts index 2e8e4ff9fe..a16182ef20 100644 --- a/static/js/utils/place_utils.ts +++ b/static/js/utils/place_utils.ts @@ -201,8 +201,7 @@ export function getPlaceNames( */ export async function getPlaceType( dcid: string, - apiRoot?: string, - prop?: string + apiRoot?: string ): Promise { if (!dcid) { return THING_PLACE_TYPE; diff --git a/static/js/utils/stat_metadata_utils.test.ts b/static/js/utils/stat_metadata_utils.test.ts index a8d96a8636..f07e3cfd92 100644 --- a/static/js/utils/stat_metadata_utils.test.ts +++ b/static/js/utils/stat_metadata_utils.test.ts @@ -53,5 +53,5 @@ test("getUnit", () => { unit: testUnit, unitDisplayName: shortUnit, }; - expect(getUnit(sourceSeriesWithUnitAndScalingFactor) === shortUnit); + expect(getUnit(sourceSeriesWithUnitDisplayName) === shortUnit); }); diff --git a/static/library/index.ts b/static/library/index.ts index fb03e74a12..1de044c095 100644 --- a/static/library/index.ts +++ b/static/library/index.ts @@ -60,7 +60,7 @@ globalThis.datacommons = { * Web components can't load external fonts directly, so instead add them * directly to the parent page */ -function loadStyles() { +function loadStyles(): void { const googleSansEl = document.createElement("link"); googleSansEl.href = "https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;700&family=Google+Sans+Text:wght@300;400;500;700&display=swap"; diff --git a/static/library/slider_component.ts b/static/library/slider_component.ts index 615d97d685..725a14803a 100644 --- a/static/library/slider_component.ts +++ b/static/library/slider_component.ts @@ -463,24 +463,17 @@ export class DatacommonsSliderComponent extends LitElement { `; } - private defaultHeader() { + private defaultHeader(): TemplateResult { return html`

    Explore trends over time

    `; } - private getDateText() { + private getDateText(): string { if (this._value < 0 || this._value >= this._dates.length) { return "Unknown"; } return this._dates[this._value]; } - private getEndDateText() { - if (this._dates.length === 0) { - return "Unknown"; - } - return this._dates[this._dates.length - 1]; - } - private onSliderChange(e: Event): void { const target = e.currentTarget as HTMLInputElement; const newValue = Number(target.value); @@ -523,7 +516,7 @@ export class DatacommonsSliderComponent extends LitElement { ); } - private async fetchObservationDates() { + private async fetchObservationDates(): Promise { const apiRoot = getApiRoot(this.apiRoot); const dataCommonsWebClient = new DataCommonsWebClient({ apiRoot }); if ( From 481e9ab666882c1b15818c6527c16f27ae592146 Mon Sep 17 00:00:00 2001 From: Gabriel Mechali Date: Fri, 20 Dec 2024 12:27:50 -0500 Subject: [PATCH 2/2] Lot more fixes --- static/js/shared/util.test.ts | 2 + static/js/tools/download/mock_functions.ts | 2 + static/js/tools/scatter/app.test.tsx | 2 + .../tools/scatter/place_and_type_options.tsx | 4 +- static/js/tools/scatter/plot_options.tsx | 46 ++++++------------- static/js/tools/scatter/statvar.tsx | 22 +++++---- static/js/tools/scatter/util.test.ts | 29 ++++++++---- static/js/tools/scatter/util.ts | 4 +- static/js/tools/shared/stat_var_widget.tsx | 5 +- .../js/tools/shared/tile_metadata_modal.tsx | 8 ++-- static/js/tools/stat_var/dataset_selector.tsx | 4 +- static/js/tools/timeline/chart.tsx | 2 +- static/js/utils/app/visualization_utils.tsx | 4 +- static/js/utils/axios.ts | 4 +- static/js/utils/data_commons_client.ts | 2 +- 15 files changed, 72 insertions(+), 68 deletions(-) diff --git a/static/js/shared/util.test.ts b/static/js/shared/util.test.ts index b5c893c456..57f1367193 100644 --- a/static/js/shared/util.test.ts +++ b/static/js/shared/util.test.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable camelcase */ + import { MAX_DATE, MAX_YEAR } from "./constants"; import { getCappedStatVarDate, isDateTooFar } from "./util"; diff --git a/static/js/tools/download/mock_functions.ts b/static/js/tools/download/mock_functions.ts index 1393b08539..521c17dcec 100644 --- a/static/js/tools/download/mock_functions.ts +++ b/static/js/tools/download/mock_functions.ts @@ -16,6 +16,8 @@ /* mocked axios calls for Page test for download tool. */ +/* eslint-disable camelcase */ + jest.mock("axios"); import axios from "axios"; import { when } from "jest-when"; diff --git a/static/js/tools/scatter/app.test.tsx b/static/js/tools/scatter/app.test.tsx index 0de44b8370..a5b30a7e09 100644 --- a/static/js/tools/scatter/app.test.tsx +++ b/static/js/tools/scatter/app.test.tsx @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable camelcase */ + jest.mock("axios"); import { act, waitFor } from "@testing-library/react"; diff --git a/static/js/tools/scatter/place_and_type_options.tsx b/static/js/tools/scatter/place_and_type_options.tsx index bfdaf96276..e5ccb964d5 100644 --- a/static/js/tools/scatter/place_and_type_options.tsx +++ b/static/js/tools/scatter/place_and_type_options.tsx @@ -107,7 +107,7 @@ function PlaceAndTypeOptions(props: PlaceAndTypeOptionsProps): JSX.Element { ? "selected-chart-option" : "chart-type-option" }`} - onClick={() => display.setChartType(ScatterChartType.SCATTER)} + onClick={(): void => display.setChartType(ScatterChartType.SCATTER)} > scatter_plot
    @@ -117,7 +117,7 @@ function PlaceAndTypeOptions(props: PlaceAndTypeOptionsProps): JSX.Element { ? "selected-chart-option" : "chart-type-option" }`} - onClick={() => display.setChartType(ScatterChartType.MAP)} + onClick={(): void => display.setChartType(ScatterChartType.MAP)} > public
    diff --git a/static/js/tools/scatter/plot_options.tsx b/static/js/tools/scatter/plot_options.tsx index dc786221f3..8c82820ea2 100644 --- a/static/js/tools/scatter/plot_options.tsx +++ b/static/js/tools/scatter/plot_options.tsx @@ -19,12 +19,10 @@ * lower and upper bounds for populations. */ -import _ from "lodash"; import React, { useContext, useState } from "react"; import { Button, Card, FormGroup, Input, Label } from "reactstrap"; import { Container } from "reactstrap"; -import { DENOM_INPUT_PLACEHOLDER } from "../../shared/constants"; import { GA_EVENT_TOOL_CHART_OPTION_CLICK, GA_PARAM_TOOL_CHART_OPTION, @@ -65,18 +63,6 @@ function swapAxes(x: AxisWrapper, y: AxisWrapper): void { y.set(xValue); } -/** - * Toggles whether to plot per capita values for an axis. - * @param axis - * @param event - */ -function checkPerCapita( - axis: AxisWrapper, - event: React.ChangeEvent -): void { - axis.setPerCapita(event.target.checked); -} - /** * Toggles whether to plot an axis on log scale. * @param axis @@ -178,8 +164,6 @@ function PlotOptions(): JSX.Element { const [upperBound, setUpperBound] = useState( place.value.upperBound.toString() ); - const [xDenomInput, setXDenomInput] = useState(x.value.denom); - const [yDenomInput, setYDenomInput] = useState(y.value.denom); const yAxisLabel = display.chartType === ScatterChartType.SCATTER ? "Y-axis" @@ -217,7 +201,7 @@ function PlotOptions(): JSX.Element { id="per-capita-y" type="checkbox" checked={y.value.perCapita} - onChange={(e) => { + onChange={(e): void => { y.setPerCapita(e.target.checked); if (!y.value.perCapita) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -237,7 +221,7 @@ function PlotOptions(): JSX.Element { id="log-y" type="checkbox" checked={y.value.log} - onChange={(e) => { + onChange={(e): void => { checkLog(y, e); if (!y.value.log) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -264,7 +248,7 @@ function PlotOptions(): JSX.Element { id="per-capita-x" type="checkbox" checked={x.value.perCapita} - onChange={(e) => { + onChange={(e): void => { x.setPerCapita(e.target.checked); if (!x.value.perCapita) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -284,7 +268,7 @@ function PlotOptions(): JSX.Element { id="log-x" type="checkbox" checked={x.value.log} - onChange={(e) => { + onChange={(e): void => { checkLog(x, e); if (!x.value.log) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -309,7 +293,7 @@ function PlotOptions(): JSX.Element { id="swap-axes" size="sm" color="light" - onClick={() => { + onClick={(): void => { swapAxes(x, y); triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { [GA_PARAM_TOOL_CHART_OPTION]: @@ -328,7 +312,7 @@ function PlotOptions(): JSX.Element { id="quadrants" type="checkbox" checked={display.showQuadrants} - onChange={(e) => { + onChange={(e): void => { checkQuadrants(display, e); if (!display.showQuadrants) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -349,7 +333,7 @@ function PlotOptions(): JSX.Element { id="quadrants" type="checkbox" checked={display.showLabels} - onChange={(e) => { + onChange={(e): void => { checkLabels(display, e); if (!display.showLabels) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -370,7 +354,7 @@ function PlotOptions(): JSX.Element { id="density" type="checkbox" checked={display.showDensity} - onChange={(e) => { + onChange={(e): void => { checkDensity(display, e); if (!display.showDensity) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -396,7 +380,7 @@ function PlotOptions(): JSX.Element { { + onChange={(e): void => { selectShowPopulation(display, e); if (display.showPopulation !== SHOW_POPULATION_OFF) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -416,7 +400,7 @@ function PlotOptions(): JSX.Element { display.showPopulation === SHOW_POPULATION_LINEAR } id="show-population-linear" - onChange={(e) => { + onChange={(e): void => { selectShowPopulation(display, e); if (display.showPopulation !== SHOW_POPULATION_LINEAR) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -434,7 +418,7 @@ function PlotOptions(): JSX.Element { { + onChange={(e): void => { selectShowPopulation(display, e); if (display.showPopulation !== SHOW_POPULATION_LOG) { triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { @@ -459,11 +443,11 @@ function PlotOptions(): JSX.Element { + onChange={(e): void => selectLowerBound(place, e, setLowerBound) } value={lowerBound} - onBlur={() => { + onBlur={(): void => { setLowerBound(place.value.lowerBound.toString()); triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { [GA_PARAM_TOOL_CHART_OPTION]: @@ -479,11 +463,11 @@ function PlotOptions(): JSX.Element { + onChange={(e): void => selectUpperBound(place, e, setUpperBound) } value={upperBound} - onBlur={() => { + onBlur={(): void => { setUpperBound(place.value.upperBound.toString()); triggerGAEvent(GA_EVENT_TOOL_CHART_OPTION_CLICK, { [GA_PARAM_TOOL_CHART_OPTION]: diff --git a/static/js/tools/scatter/statvar.tsx b/static/js/tools/scatter/statvar.tsx index c2ffd6abdf..5972da6d5e 100644 --- a/static/js/tools/scatter/statvar.tsx +++ b/static/js/tools/scatter/statvar.tsx @@ -90,7 +90,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { ); setSamplePlaces(samplePlaces); }, [place.value.enclosedPlaces]); - const closeModal = () => { + const closeModal = (): void => { setThirdStatVar(emptyStatVar); setModalOpen(false); }; @@ -155,13 +155,15 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { collapsible={true} svHierarchyType={StatVarHierarchyType.SCATTER} sampleEntities={samplePlaces} - deselectSVs={(svList: string[]) => + deselectSVs={(svList: string[]): void => svList.forEach((sv) => { removeStatVar(x, y, sv); }) } selectedSVs={selectedSvs} - selectSV={(sv) => addStatVar(x, y, sv, setThirdStatVar, setModalOpen)} + selectSV={(sv): void => + addStatVar(x, y, sv, setThirdStatVar, setModalOpen) + } /> {/* Modal for selecting 2 stat vars when a third is selected */} @@ -181,7 +183,9 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { type="radio" name="statvar" defaultChecked={modalSelected.x} - onClick={() => setModalSelected({ x: true, y: false })} + onClick={(): void => + setModalSelected({ x: true, y: false }) + } /> {xTitle} @@ -193,7 +197,9 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element { type="radio" name="statvar" defaultChecked={modalSelected.y} - onClick={() => setModalSelected({ x: false, y: true })} + onClick={(): void => + setModalSelected({ x: false, y: true }) + } /> {yTitle} @@ -204,7 +210,7 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element {