From cab98205efebad8e3a72a50cc0f2bb12738eed4d Mon Sep 17 00:00:00 2001 From: Gabriel Mechali Date: Mon, 13 Jan 2025 13:25:02 -0500 Subject: [PATCH] Just my changes --- .../js/apps/eval_retrieval_generation/app.tsx | 43 ++++++++------- .../call_feedback.tsx | 4 +- .../overall_feedback.tsx | 2 +- .../query_section.tsx | 2 +- .../eval_retrieval_generation/sxs/app.tsx | 55 ++++++++++--------- static/js/apps/topic_page/page_selector.tsx | 3 +- static/js/biomedical/protein/chart.ts | 2 +- static/js/chart/base.test.ts | 21 ++++--- static/js/chart/draw_bar.ts | 26 ++++++++- static/js/chart/draw_leaflet_map.ts | 2 +- .../nl_search_bar/auto_complete_input.tsx | 2 +- static/js/components/ranking_unit.tsx | 4 +- static/js/components/subject_page/column.tsx | 2 +- .../subject_page/data_fetch_context.tsx | 10 +++- .../subject_page/disaster_event_block.tsx | 6 +- static/js/components/subject_page/sidebar.tsx | 4 +- .../js/components/tiles/answer_table_tile.tsx | 2 +- static/js/components/tiles/bar_tile.test.tsx | 6 +- static/js/components/tiles/bar_tile.tsx | 6 +- static/js/components/tiles/chart_footer.tsx | 6 +- .../tiles/disaster_event_map_filters.tsx | 16 ++++-- .../tiles/disaster_event_map_tile.tsx | 2 +- static/js/components/tiles/donut_tile.tsx | 6 +- static/js/components/tiles/gauge_tile.tsx | 5 +- .../components/mapping_page.tsx | 21 +------ static/js/import_wizard2/components/page.tsx | 7 +-- .../components/preview_table.tsx | 1 - .../shared/mapping_column_input.tsx | 2 +- .../shared/mapping_constant_input.tsx | 3 +- .../shared/mapping_header_input.tsx | 8 +-- .../components/shared/mapping_place_input.tsx | 4 +- .../stat_var_group_node.tsx | 2 +- static/js/tools/download/preview.tsx | 9 ++- static/js/tools/map/leaflet_map.tsx | 27 ++++----- static/js/tools/scatter/app.test.tsx | 3 +- static/js/tools/scatter/chart_loader.tsx | 4 +- .../tools/scatter/place_and_type_options.tsx | 4 +- static/nodejs_server/tiles/map_tile.ts | 3 +- static/nodejs_server/tiles/scatter_tile.ts | 3 +- 39 files changed, 183 insertions(+), 155 deletions(-) diff --git a/static/js/apps/eval_retrieval_generation/app.tsx b/static/js/apps/eval_retrieval_generation/app.tsx index 506767e29f..1c58f6351e 100644 --- a/static/js/apps/eval_retrieval_generation/app.tsx +++ b/static/js/apps/eval_retrieval_generation/app.tsx @@ -72,30 +72,31 @@ export function App(props: AppPropType): JSX.Element { const [allCall, setAllCall] = useState>(null); const [evalType, setEvalType] = useState(null); - async function handleUserSignIn( - user: User, - credential: OAuthCredential - ): Promise { - if (credential.accessToken) { - setUser(user); // Set the user state to the signed-in user - const doc = new GoogleSpreadsheet(props.sheetId, { - token: credential.accessToken, - }); - await doc.loadInfo(); - setDoc(doc); - getDocInfo(doc).then((docInfo) => { - setAllCall(docInfo.allCall); - setAllQuery(docInfo.allQuery); - setFeedbackStage(getFirstFeedbackStage(docInfo.evalType)); - setEvalType(docInfo.evalType); - setSessionQueryId(getFirstQuery(docInfo.allQuery, user.email)); - }); - } - } - // Sign in automatically. useEffect(() => { const scopes = ["https://www.googleapis.com/auth/spreadsheets"]; + + const handleUserSignIn = async ( + user: User, + credential: OAuthCredential + ): Promise => { + if (credential.accessToken) { + setUser(user); // Set the user state to the signed-in user + const doc = new GoogleSpreadsheet(props.sheetId, { + token: credential.accessToken, + }); + await doc.loadInfo(); + setDoc(doc); + getDocInfo(doc).then((docInfo) => { + setAllCall(docInfo.allCall); + setAllQuery(docInfo.allQuery); + setFeedbackStage(getFirstFeedbackStage(docInfo.evalType)); + setEvalType(docInfo.evalType); + setSessionQueryId(getFirstQuery(docInfo.allQuery, user.email)); + }); + } + }; + signInWithGoogle(scopes, handleUserSignIn); }, []); diff --git a/static/js/apps/eval_retrieval_generation/call_feedback.tsx b/static/js/apps/eval_retrieval_generation/call_feedback.tsx index 6f228d3151..25adb65a2c 100644 --- a/static/js/apps/eval_retrieval_generation/call_feedback.tsx +++ b/static/js/apps/eval_retrieval_generation/call_feedback.tsx @@ -86,7 +86,7 @@ export function CallFeedback(): JSX.Element { setStatus(FormStatus.NotStarted); } }); - }, [sheetId, sessionQueryId, sessionCallId, applyToNext]); + }, [sheetId, sessionQueryId, sessionCallId, applyToNext, evalType]); useEffect(() => { if (!(sessionQueryId in allCall)) { @@ -106,7 +106,7 @@ export function CallFeedback(): JSX.Element { } else { setEvalInfo(null); } - }, [doc, allCall, sessionQueryId, sessionCallId]); + }, [doc, allCall, sessionQueryId, sessionCallId, evalType]); const checkAndSubmit = async (): Promise => { if (status === FormStatus.InProgress) { diff --git a/static/js/apps/eval_retrieval_generation/overall_feedback.tsx b/static/js/apps/eval_retrieval_generation/overall_feedback.tsx index a276ae4784..5964f9d0d5 100644 --- a/static/js/apps/eval_retrieval_generation/overall_feedback.tsx +++ b/static/js/apps/eval_retrieval_generation/overall_feedback.tsx @@ -149,7 +149,7 @@ export function OverallFeedback(): JSX.Element { }) .finally(() => removeSpinner(FEEDBACK_PANE_ID)); return () => void (subscribed = false); - }, [sheetId, sessionQueryId, sessionCallId, feedbackStage]); + }, [sheetId, sessionQueryId, sessionCallId, feedbackStage, evalType]); const checkAndSubmit = async (): Promise => { if (isSubmitted) { diff --git a/static/js/apps/eval_retrieval_generation/query_section.tsx b/static/js/apps/eval_retrieval_generation/query_section.tsx index d1d0463e77..c02ae10283 100644 --- a/static/js/apps/eval_retrieval_generation/query_section.tsx +++ b/static/js/apps/eval_retrieval_generation/query_section.tsx @@ -225,7 +225,7 @@ export function QuerySection(props: QuerySectionPropType): JSX.Element { if (props.evalType !== EvalType.RIG) return; window.removeEventListener("click", onClick); }; - }, []); + }, [props.evalType]); useEffect(() => { // Remove highlight from previous annotation diff --git a/static/js/apps/eval_retrieval_generation/sxs/app.tsx b/static/js/apps/eval_retrieval_generation/sxs/app.tsx index 4214722dfa..cf7f81c7f3 100644 --- a/static/js/apps/eval_retrieval_generation/sxs/app.tsx +++ b/static/js/apps/eval_retrieval_generation/sxs/app.tsx @@ -92,36 +92,37 @@ export function App(props: AppPropType): JSX.Element { sessionQueryId ); - async function handleUserSignIn( - user: User, - credential: OAuthCredential - ): Promise { - if (credential.accessToken) { - setUser(user); // Set the user state to the signed-in user - const docA = new GoogleSpreadsheet(props.sheetIdA, { - token: credential.accessToken, - }); - const docB = new GoogleSpreadsheet(props.sheetIdB, { - token: credential.accessToken, - }); - // Wait for documents to load - await Promise.all([docA.loadInfo(), docB.loadInfo()]); - // Get and set information about each document - Promise.all([getDocInfo(docA), getDocInfo(docB)]).then( - ([docInfoA, docInfoB]) => { - setCombinedDocInfo({ - docInfoA, - docInfoB, - sortedQueryIds: getSortedQueryIds(docInfoA, docInfoB), - }); - } - ); - } - } - // Sign in automatically. useEffect(() => { const scopes = ["https://www.googleapis.com/auth/spreadsheets"]; + + const handleUserSignIn = async ( + user: User, + credential: OAuthCredential + ): Promise => { + if (credential.accessToken) { + setUser(user); // Set the user state to the signed-in user + const docA = new GoogleSpreadsheet(props.sheetIdA, { + token: credential.accessToken, + }); + const docB = new GoogleSpreadsheet(props.sheetIdB, { + token: credential.accessToken, + }); + // Wait for documents to load + await Promise.all([docA.loadInfo(), docB.loadInfo()]); + // Get and set information about each document + Promise.all([getDocInfo(docA), getDocInfo(docB)]).then( + ([docInfoA, docInfoB]) => { + setCombinedDocInfo({ + docInfoA, + docInfoB, + sortedQueryIds: getSortedQueryIds(docInfoA, docInfoB), + }); + } + ); + } + }; + signInWithGoogle(scopes, handleUserSignIn); }, []); diff --git a/static/js/apps/topic_page/page_selector.tsx b/static/js/apps/topic_page/page_selector.tsx index d49eb18161..3a4569335b 100644 --- a/static/js/apps/topic_page/page_selector.tsx +++ b/static/js/apps/topic_page/page_selector.tsx @@ -18,7 +18,6 @@ * Component for selecting topic and place. */ -import _ from "lodash"; import React, { useEffect, useState } from "react"; import { NamedTypedPlace } from "../../shared/types"; @@ -155,6 +154,7 @@ function getMorePlaces( }); } +/* TODO(chejennifer): Consider deleting or reintroducing the commented out block below and lines 67-118 above. function selectPlace( currentTopic: string, event: React.ChangeEvent @@ -179,3 +179,4 @@ function selectTopic( window.open(`/topic/${topic}/${currentPlace}`, "_self"); } } +*/ diff --git a/static/js/biomedical/protein/chart.ts b/static/js/biomedical/protein/chart.ts index 2400560251..9f54726e57 100644 --- a/static/js/biomedical/protein/chart.ts +++ b/static/js/biomedical/protein/chart.ts @@ -192,7 +192,7 @@ const NUM_TICKS = 10; const GRAPH_HEIGHT_XS = 130; const GRAPH_HEIGHT_S = 200; const GRAPH_HEIGHT_M = 400; -const GRAPH_HEIGHT_L = 800; +// const GRAPH_HEIGHT_L = 800; Re-add if necessary. const GRAPH_WIDTH_S = 660; const GRAPH_WIDTH_M = 700; const GRAPH_WIDTH_L = 760; diff --git a/static/js/chart/base.test.ts b/static/js/chart/base.test.ts index eb3953a150..acb0e333eb 100644 --- a/static/js/chart/base.test.ts +++ b/static/js/chart/base.test.ts @@ -80,17 +80,22 @@ test("shouldFillInValues", () => { beforeEach(() => { // JSDom does not define SVGTSpanElements, and use SVGElement instead. Defines // a shim for getComputedTextLength where each character is 1 px wide. - (window.SVGElement as any).prototype.getComputedTextLength = function () { - // Title elements don't contribute to width - if (this.tagName === "title") { - return 0; - } - return this.textContent.length; - }; + // eslint-disable-next-line + (window.SVGElement as any).prototype.getComputedTextLength = + function (): number { + // Title elements don't contribute to width + if (this.tagName === "title") { + return 0; + } + return this.textContent.length; + }; // JSDom does not define SVGTSpanElements, and use SVGElement instead. Defines // a shim for getBBox (only returns width) where each character is 1 px wide. - (window.SVGElement as any).prototype.getBBox = function () { + // eslint-disable-next-line + (window.SVGElement as any).prototype.getBBox = function (): { + width: number; + } { let maxWidth = 0; const children = this.childNodes; for (let i = 0; i < children.length; i++) { diff --git a/static/js/chart/draw_bar.ts b/static/js/chart/draw_bar.ts index ba225e00e8..640eaae71c 100644 --- a/static/js/chart/draw_bar.ts +++ b/static/js/chart/draw_bar.ts @@ -24,7 +24,7 @@ import _ from "lodash"; import { ASYNC_ELEMENT_CLASS } from "../constants/css_constants"; import { formatNumber } from "../i18n/i18n"; import { Boundary } from "../shared/types"; -import { DataGroup, getColorFn } from "./base"; +import { DataGroup, DataPoint, getColorFn } from "./base"; import { AXIS_TEXT_FILL, HIGHLIGHT_TIMEOUT, @@ -548,7 +548,18 @@ function drawHorizontalGroupedBars( unit?: string ): void { const numGroups = dataGroups[0].value.length; - const setData = (dg: DataGroup) => { + const setData = ( + dg: DataGroup + ): { + dataGroupValue: DataPoint; + label: string; + statVar: string; + value: number; + place: string; + date: string; + index: number; + unit: string; + }[] => { return dg.value.map((dgv, index) => ({ dataGroupValue: dgv, label: dg.label, @@ -829,7 +840,16 @@ function drawLollipops( legendKeyFn: (l: string) => string, unit?: string ): void { - const setData = (dg: DataGroup) => { + const setData = ( + dg: DataGroup + ): { + statVar: string; + value: number; + dcid: string; + place: string; + date: string; + unit: string; + }[] => { return dg.value.map((dp) => ({ statVar: dp.label, value: dp.value, diff --git a/static/js/chart/draw_leaflet_map.ts b/static/js/chart/draw_leaflet_map.ts index d717f573ad..364c9a5415 100644 --- a/static/js/chart/draw_leaflet_map.ts +++ b/static/js/chart/draw_leaflet_map.ts @@ -98,7 +98,7 @@ export function addGeotiffLayer( const geotiffLayer = new GeoRasterLayer({ georaster: geoRaster, opacity: 1, - pixelValuesToColorFn: (value) => { + pixelValuesToColorFn: (value: { number: number }): string => { if (value[GEORASTER_DATA_BAND] === NO_DATA_VALUE) { return null; } else { diff --git a/static/js/components/nl_search_bar/auto_complete_input.tsx b/static/js/components/nl_search_bar/auto_complete_input.tsx index a500daf9e0..92c030d36a 100644 --- a/static/js/components/nl_search_bar/auto_complete_input.tsx +++ b/static/js/components/nl_search_bar/auto_complete_input.tsx @@ -338,7 +338,7 @@ export function AutoCompleteInput( aria-label={props.placeholder} value={inputText} onChange={onInputChange} - onKeyDown={(event) => handleKeydownEvent(event)} + onKeyDown={(event): void => handleKeydownEvent(event)} className="pac-target-input search-input-text" autoComplete="one-time-code" autoFocus={props.shouldAutoFocus} diff --git a/static/js/components/ranking_unit.tsx b/static/js/components/ranking_unit.tsx index d78c5876dd..b0e41d65f7 100644 --- a/static/js/components/ranking_unit.tsx +++ b/static/js/components/ranking_unit.tsx @@ -210,13 +210,13 @@ export function RankingUnit(props: RankingUnitPropType): JSX.Element { apiRoot={props.apiRoot} > } - onMouseEnter={() => { + onMouseEnter={(): void => { if (!props.onHoverToggled) { return; } props.onHoverToggled(point.placeDcid, true); }} - onMouseLeave={() => { + onMouseLeave={(): void => { if (!props.onHoverToggled) { return; } diff --git a/static/js/components/subject_page/column.tsx b/static/js/components/subject_page/column.tsx index ce4e3e225a..2dcff57928 100644 --- a/static/js/components/subject_page/column.tsx +++ b/static/js/components/subject_page/column.tsx @@ -58,7 +58,7 @@ export function Column(props: ColumnPropType): JSX.Element { {isNlInterface() && props.config.tiles.length > NL_NUM_TILES_SHOWN && ( { + onClick={(e): void => { onShowMore(); e.preventDefault(); }} diff --git a/static/js/components/subject_page/data_fetch_context.tsx b/static/js/components/subject_page/data_fetch_context.tsx index d0401a12f6..8cdf23ad04 100644 --- a/static/js/components/subject_page/data_fetch_context.tsx +++ b/static/js/components/subject_page/data_fetch_context.tsx @@ -19,7 +19,13 @@ * data fetches. */ -import React, { createContext, useCallback, useMemo, useRef } from "react"; +import React, { + createContext, + ReactElement, + useCallback, + useMemo, + useRef, +} from "react"; interface DataFetchContextType { // A function to use to fetch data with a given cache key and data promise. @@ -40,7 +46,7 @@ interface DataFetchContextProviderPropType { export function DataFetchContextProvider( props: DataFetchContextProviderPropType -) { +): ReactElement { // Map of key to data promise that holds all pairs of cacheKey and dataPromise // that have been used when calling fetchData. const fetchingCache = useRef>>({}); diff --git a/static/js/components/subject_page/disaster_event_block.tsx b/static/js/components/subject_page/disaster_event_block.tsx index 9c1061ae18..014f5fb6d6 100644 --- a/static/js/components/subject_page/disaster_event_block.tsx +++ b/static/js/components/subject_page/disaster_event_block.tsx @@ -43,7 +43,6 @@ import { import { fetchDisasterEventPoints, getDate, - getHashValue, getSeverityFilters, getUpdatedHash, getUseCache, @@ -193,7 +192,7 @@ export const DisasterEventBlock = memo(function DisasterEventBlock( {!hideFilters && (
setShowFilters(!showFilters)} + onClick={(): void => setShowFilters(!showFilters)} title="Toggle filters" > tune @@ -308,7 +307,8 @@ export function fetchDisasterEventData( }; specIds.push(spec.id); const cacheKey = getDataFetchCacheKey(specDataOptions); - const promiseFn = () => fetchDisasterEventPoints(specDataOptions, apiRoot); + const promiseFn = (): Promise => + fetchDisasterEventPoints(specDataOptions, apiRoot); const promise = fetchData ? fetchData(cacheKey, promiseFn) : promiseFn(); promises.push(promise); }); diff --git a/static/js/components/subject_page/sidebar.tsx b/static/js/components/subject_page/sidebar.tsx index cccc731747..2a558a33f6 100644 --- a/static/js/components/subject_page/sidebar.tsx +++ b/static/js/components/subject_page/sidebar.tsx @@ -98,7 +98,7 @@ function renderItem(
  • { + onClick={(): void => { const target = document.getElementById(redirectItemId); if (target) { // Calculate the scroll position of the target section @@ -136,7 +136,7 @@ export function SdgSubjectPageSidebar( data-bs-target={`#collapse${idx}`} aria-expanded="false" aria-controls={`collapse${idx}`} - onClick={() => setSdgIndex(idx)} + onClick={(): void => setSdgIndex(idx)} >
    diff --git a/static/js/components/tiles/answer_table_tile.tsx b/static/js/components/tiles/answer_table_tile.tsx index 4da39a1b3b..77d686bf3b 100644 --- a/static/js/components/tiles/answer_table_tile.tsx +++ b/static/js/components/tiles/answer_table_tile.tsx @@ -250,7 +250,7 @@ function generateCsv( } // Helper function to encase each csv cell in quotes and escape double quotes - const sanitize = (cell: string) => { + const sanitize = (cell: string): string => { return `"${cell.replaceAll('"', '""')}"`; }; diff --git a/static/js/components/tiles/bar_tile.test.tsx b/static/js/components/tiles/bar_tile.test.tsx index 5074462421..d86a98f04f 100644 --- a/static/js/components/tiles/bar_tile.test.tsx +++ b/static/js/components/tiles/bar_tile.test.tsx @@ -60,7 +60,7 @@ beforeAll(() => { }); function mockAxios(): void { - mockedAxios.post.mockImplementation((url, _) => { + mockedAxios.post.mockImplementation((url) => { if (url === "/api/place/name") { return Promise.resolve({ data: { @@ -79,7 +79,7 @@ function mockAxios(): void { return Promise.resolve({}); }); - mockedAxios.get.mockImplementation((url, _) => { + mockedAxios.get.mockImplementation((url) => { if (url === "/api/observations/point/within") { /* eslint-disable camelcase */ return Promise.resolve({ @@ -117,12 +117,12 @@ function mockAxios(): void { }, }, }); - /* eslint-enable camelcase */ } else if (url === "/api/node/propvals/out") { return Promise.resolve({ data: { sector_property: [] }, }); } + /* eslint-enable camelcase */ console.log("axios.get URL", url, "not handled.. returning empty response"); return Promise.resolve({}); }); diff --git a/static/js/components/tiles/bar_tile.tsx b/static/js/components/tiles/bar_tile.tsx index 14cca3b22d..950ca36706 100644 --- a/static/js/components/tiles/bar_tile.tsx +++ b/static/js/components/tiles/bar_tile.tsx @@ -148,7 +148,7 @@ export function BarTile(props: BarTilePropType): JSX.Element { !_.isEqual(barChartData.props, props) || !_.isEqual(barChartData.dateOverride, dateOverride) ) { - (async () => { + (async (): Promise => { try { setIsLoading(true); const data = await fetchData(props, dateOverride); @@ -174,7 +174,7 @@ export function BarTile(props: BarTilePropType): JSX.Element { * component */ useEffect(() => { - const eventHandler = (e: CustomEvent) => { + const eventHandler = (e: CustomEvent): void => { if (e.detail.property === "date") { setDateOverride(e.detail.value); } @@ -283,7 +283,7 @@ export function getReplacementStrings( export const fetchData = async ( props: BarTilePropType, dateOverride?: string -) => { +): Promise => { const statSvs = props.variables .map((spec) => spec.statVar) .filter((sv) => !!sv); diff --git a/static/js/components/tiles/chart_footer.tsx b/static/js/components/tiles/chart_footer.tsx index 9a4c178731..c11e3cea29 100644 --- a/static/js/components/tiles/chart_footer.tsx +++ b/static/js/components/tiles/chart_footer.tsx @@ -53,7 +53,7 @@ export function ChartFooter(props: ChartFooterPropType): JSX.Element { download { + onClick={(event): void => { event.preventDefault(); triggerGAEvent(GA_EVENT_TILE_DOWNLOAD, { [GA_PARAM_TILE_TYPE]: props.exploreLink?.displayText, @@ -72,7 +72,7 @@ export function ChartFooter(props: ChartFooterPropType): JSX.Element { href={props.exploreLink.url} rel="noopener noreferrer" target="_blank" - onClick={(event) => { + onClick={(): boolean => { triggerGAEvent(GA_EVENT_TILE_EXPLORE_MORE, { [GA_PARAM_TILE_TYPE]: props.exploreLink?.displayText, }); @@ -106,7 +106,7 @@ function Footnote(props: { text: string }): JSX.Element { {hideToggle || showFullText ? props.text : `${shortText}...`} setShowFullText(!showFullText)} + onClick={(): void => setShowFullText(!showFullText)} > {!hideToggle && (showFullText ? " Show less" : " Show more")} diff --git a/static/js/components/tiles/disaster_event_map_filters.tsx b/static/js/components/tiles/disaster_event_map_filters.tsx index d47ce15907..9665ef14ef 100644 --- a/static/js/components/tiles/disaster_event_map_filters.tsx +++ b/static/js/components/tiles/disaster_event_map_filters.tsx @@ -98,7 +98,7 @@ export function DisasterEventMapFilters( min: + onChange={(e): void => onFilterInputChanged( disasterType, Number(e.target.value), @@ -106,15 +106,17 @@ export function DisasterEventMapFilters( ) } value={severityFilter.lowerLimit} - onBlur={() => updateFilter()} - onKeyPress={(e) => e.key === "Enter" && updateFilter()} + onBlur={(): void => updateFilter()} + onKeyPress={(e): void => + e.key === "Enter" && updateFilter() + } />
    max: + onChange={(e): void => onFilterInputChanged( disasterType, Number(e.target.value), @@ -122,8 +124,10 @@ export function DisasterEventMapFilters( ) } value={severityFilter.upperLimit} - onBlur={() => updateFilter()} - onKeyPress={(e) => e.key === "Enter" && updateFilter()} + onBlur={(): void => updateFilter()} + onKeyPress={(e): void => + e.key === "Enter" && updateFilter() + } />
    diff --git a/static/js/components/tiles/disaster_event_map_tile.tsx b/static/js/components/tiles/disaster_event_map_tile.tsx index 0781804ec1..00f58fead7 100644 --- a/static/js/components/tiles/disaster_event_map_tile.tsx +++ b/static/js/components/tiles/disaster_event_map_tile.tsx @@ -241,7 +241,7 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
    toggleEventTypeSelection(spec.id)} + onClick={(): void => toggleEventTypeSelection(spec.id)} >
    { + (async (): Promise => { const data = await fetchData(props); setDonutChartData(data); })(); @@ -185,7 +185,9 @@ export function getReplacementStrings( }; } -export const fetchData = async (props: DonutTilePropType) => { +export const fetchData = async ( + props: DonutTilePropType +): Promise => { // Assume all variables will have the same date // TODO: Handle different dates for different variables const date = getFirstCappedStatVarSpecDate(props.statVarSpec); diff --git a/static/js/components/tiles/gauge_tile.tsx b/static/js/components/tiles/gauge_tile.tsx index be04b942a9..45e2c66d96 100644 --- a/static/js/components/tiles/gauge_tile.tsx +++ b/static/js/components/tiles/gauge_tile.tsx @@ -151,7 +151,7 @@ export function GaugeTile(props: GaugeTilePropType): JSX.Element { ); } -const fetchData = async (props: GaugeTilePropType) => { +const fetchData = async (props: GaugeTilePropType): Promise => { try { const statResp = await getPoint( props.apiRoot, @@ -199,7 +199,7 @@ const fetchData = async (props: GaugeTilePropType) => { _.isNull(value) || _.isUndefined(value) ? getNoDataErrorMsg([props.statVarSpec]) : ""; - return { + const gaugeChartData: GaugeChartData = { value, date: statData.date, sources, @@ -209,6 +209,7 @@ const fetchData = async (props: GaugeTilePropType) => { props, errorMsg, }; + return gaugeChartData; } catch (error) { console.log(error); return null; diff --git a/static/js/import_wizard2/components/mapping_page.tsx b/static/js/import_wizard2/components/mapping_page.tsx index 6e48f99889..973123f525 100644 --- a/static/js/import_wizard2/components/mapping_page.tsx +++ b/static/js/import_wizard2/components/mapping_page.tsx @@ -24,14 +24,7 @@ import React, { useEffect, useRef, useState } from "react"; import { Button } from "reactstrap"; import { TEMPLATE_MAPPING_COMPONENTS } from "../templates"; -import { - Column, - CsvData, - MappedThing, - Mapping, - MappingVal, - ValueMap, -} from "../types"; +import { Column, CsvData, MappedThing, Mapping, MappingVal } from "../types"; import { MappingPreviewSection } from "./mapping_preview_section"; import { PreviewTable } from "./preview_table"; @@ -45,20 +38,12 @@ interface MappingPageProps { } export function MappingPage(props: MappingPageProps): JSX.Element { - // TODO: get valueMap from MappingSectionComponent - const [valueMap, setValueMap] = useState({}); + // TODO(chejennifer): Get the valueMap from MappingSectionComponent const [showPreview, setShowPreview] = useState(false); const [inputErrors, setInputErrors] = useState(new Set()); const previewRef = useRef(null); const containerRef = useRef(null); - let fileName = ""; - if (props.csvData && props.csvData.rawCsvFile) { - fileName = props.csvData.rawCsvFile.name; - } else if (props.csvData && props.csvData.rawCsvUrl) { - fileName = props.csvData.rawCsvUrl; - } - function scrollToPreview(): void { if (showPreview && containerRef.current && previewRef.current) { containerRef.current.scrollTop = previewRef.current.offsetTop; @@ -149,7 +134,7 @@ export function MappingPage(props: MappingPageProps): JSX.Element { { if (hasError) { diff --git a/static/js/import_wizard2/components/page.tsx b/static/js/import_wizard2/components/page.tsx index d71757ea06..e57e500769 100644 --- a/static/js/import_wizard2/components/page.tsx +++ b/static/js/import_wizard2/components/page.tsx @@ -21,7 +21,7 @@ import React, { useEffect, useState } from "react"; import { TEMPLATE_OPTIONS, TEMPLATE_PREDICTION_VALIDATION } from "../templates"; -import { Mapping, ValueMap } from "../types"; +import { Mapping } from "../types"; import { DownloadPage } from "./download_page"; import { Info } from "./info"; import { MappingPage } from "./mapping_page"; @@ -54,8 +54,7 @@ export function Page(): JSX.Element { // TODO: call detection API to get predicted mappings const [predictedMapping, setPredictedMapping] = useState(new Map()); const [userMapping, setUserMapping] = useState(new Map()); - // TODO: get valueMap from MappingSectionComponent - const [valueMap, setValueMap] = useState({}); + // TODO(chejennifer): Get the valueMap from MappingSectionComponent const currPageType = ORDERED_PAGES[currPage]; @@ -111,7 +110,7 @@ export function Page(): JSX.Element { predictedMapping={predictedMapping} correctedMapping={userMapping} csvData={csvData} - valueMap={valueMap} + valueMap={{}} // TODO(chejennifer): Pass in the real ValueMap onBackClicked={(): void => setCurrPage((prev) => prev - 1)} /> )} diff --git a/static/js/import_wizard2/components/preview_table.tsx b/static/js/import_wizard2/components/preview_table.tsx index e1062be29f..1f0b9e014d 100644 --- a/static/js/import_wizard2/components/preview_table.tsx +++ b/static/js/import_wizard2/components/preview_table.tsx @@ -18,7 +18,6 @@ * Component to show csv data in a table */ -import _ from "lodash"; import React from "react"; import { CsvData } from "../types"; diff --git a/static/js/import_wizard2/components/shared/mapping_column_input.tsx b/static/js/import_wizard2/components/shared/mapping_column_input.tsx index 1ce0601acf..221c8200ed 100644 --- a/static/js/import_wizard2/components/shared/mapping_column_input.tsx +++ b/static/js/import_wizard2/components/shared/mapping_column_input.tsx @@ -68,7 +68,7 @@ export function MappingColumnInput( ? props.mappingVal.column.columnIdx : "" } - onChange={(e) => onSelectionChange(e.target.value)} + onChange={(e): void => onSelectionChange(e.target.value)} >
    {headers.length > 1 && ( { + onClick={(): void => { const updatedMappingVal = _.cloneDeep(props.mappingVal); updatedMappingVal.headers.splice(idx, 1); onMappingValUpdate(updatedMappingVal); @@ -153,7 +153,7 @@ export function MappingHeaderInput( ); })}
    { + onClick={(): void => { onColumnSelectionChange("", headers.length); }} className="mapping-header-input-add" diff --git a/static/js/import_wizard2/components/shared/mapping_place_input.tsx b/static/js/import_wizard2/components/shared/mapping_place_input.tsx index 190987ca74..ed5b2227fe 100644 --- a/static/js/import_wizard2/components/shared/mapping_place_input.tsx +++ b/static/js/import_wizard2/components/shared/mapping_place_input.tsx @@ -79,7 +79,7 @@ export function MappingPlaceInput(props: MappingPlaceInputProps): JSX.Element { ? props.mappingVal.placeType.dcid : "" } - onChange={(e) => { + onChange={(e): void => { const placeType = placeTypes.find( (type) => type.dcid === e.target.value ); @@ -106,7 +106,7 @@ export function MappingPlaceInput(props: MappingPlaceInputProps): JSX.Element { ? props.mappingVal.placeProperty.dcid : "" } - onChange={(e) => { + onChange={(e): void => { const placeProperty = validPlaceProperties.find( (prop) => prop.dcid === e.target.value ); 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 6252d1442e..de0411eb7a 100644 --- a/static/js/stat_var_hierarchy/stat_var_group_node.tsx +++ b/static/js/stat_var_hierarchy/stat_var_group_node.tsx @@ -215,7 +215,7 @@ export class StatVarGroupNode extends React.Component< trigger={getTrigger(false)} triggerWhenOpen={getTrigger(true)} open={shouldOpen} - handleTriggerClick={() => { + handleTriggerClick={(): void => { this.setState({ isOpen: !this.state.isOpen }); }} transitionTime={200} diff --git a/static/js/tools/download/preview.tsx b/static/js/tools/download/preview.tsx index 0cf873df59..cfecf97d55 100644 --- a/static/js/tools/download/preview.tsx +++ b/static/js/tools/download/preview.tsx @@ -125,7 +125,14 @@ export function Preview(props: PreviewProps): JSX.Element { ); - function getCsvReqPayload() { + function getCsvReqPayload(): { + parentPlace: string; + childType: string; + statVars: string[]; + facetMap: Record; + minDate: string; + maxDate: string; + } { // When both minDate and maxDate are set as "latest", the api will get the // data for the latest date. let minDate = props.selectedOptions.minDate; diff --git a/static/js/tools/map/leaflet_map.tsx b/static/js/tools/map/leaflet_map.tsx index a2bc9eb808..c4cbdcc05b 100644 --- a/static/js/tools/map/leaflet_map.tsx +++ b/static/js/tools/map/leaflet_map.tsx @@ -59,7 +59,6 @@ const DEBOUNCE_INTERVAL_MS = 30; export function LeafletMap(props: LeafletMapProps): JSX.Element { const { placeInfo, statVar, display } = useContext(Context); - const [errorMessage, setErrorMessage] = useState(""); const chartContainerRef = useRef(); const legendContainerRef = useRef(null); const leafletMap = useRef(null); @@ -165,20 +164,16 @@ export function LeafletMap(props: LeafletMapProps): JSX.Element { } }, [props.geoRaster, plot]); - if (errorMessage) { - return
    {errorMessage}
    ; - } else { - return ( -
    -
    -
    -
    -
    + return ( +
    +
    +
    +
    - ); - } +
    + ); } diff --git a/static/js/tools/scatter/app.test.tsx b/static/js/tools/scatter/app.test.tsx index 60f8153e0b..12f485c49b 100644 --- a/static/js/tools/scatter/app.test.tsx +++ b/static/js/tools/scatter/app.test.tsx @@ -749,7 +749,8 @@ test("all functionalities", async () => { app.find("#swap-axes").at(0).simulate("click"); }); await app.update(); - const expectTitle = (title: string) => expect(app.text()).toContain(title); + const expectTitle = (title: string): void => + expect(app.text()).toContain(title); expectTitle("Employed (2016)vsHousing Units (2016)"); expectCircles(3, app); diff --git a/static/js/tools/scatter/chart_loader.tsx b/static/js/tools/scatter/chart_loader.tsx index a2279ebd39..df1103c9ca 100644 --- a/static/js/tools/scatter/chart_loader.tsx +++ b/static/js/tools/scatter/chart_loader.tsx @@ -93,7 +93,7 @@ export function ChartLoader(): JSX.Element { cache.allStatVarsData, cache.metadataMap ); - const onSvFacetIdUpdated = (update) => { + const onSvFacetIdUpdated = (update): void => { for (const sv of Object.keys(update)) { if (x.value.statVarDcid === sv) { x.setMetahash(update[sv]); @@ -268,7 +268,7 @@ function useChartData(cache: Cache): ChartData { const downloadButton = document.getElementById("download-link"); if (downloadButton) { downloadButton.style.display = "inline-block"; - downloadButton.onclick = () => + downloadButton.onclick = (): void => downloadData(xVal, yVal, placeVal, chartData.points); } }, [cache, xVal, yVal, placeVal, display.chartType]); diff --git a/static/js/tools/scatter/place_and_type_options.tsx b/static/js/tools/scatter/place_and_type_options.tsx index e5ccb964d5..c49d1cddc7 100644 --- a/static/js/tools/scatter/place_and_type_options.tsx +++ b/static/js/tools/scatter/place_and_type_options.tsx @@ -62,7 +62,7 @@ function PlaceAndTypeOptions(props: PlaceAndTypeOptionsProps): JSX.Element { if (isPlacePicked(place.value) && _.isEmpty(place.value.enclosedPlaces)) { loadEnclosedPlaces(place, isLoading); } - }, [place.value]); + }, [place, isLoading]); /** * If map view is selected, check that map view is possible before rendering @@ -86,7 +86,7 @@ function PlaceAndTypeOptions(props: PlaceAndTypeOptionsProps): JSX.Element { ); } } - }, [place.value, display.chartType]); + }, [place.value, display]); return (