Skip to content

[Vis Tools] Remove Map drill down #5874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliawu merged 4 commits into from
Jan 22, 2026
Merged

[Vis Tools] Remove Map drill down #5874

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5959939
Remove redirect from d3 map
juliawu Dec 26, 2025
dcdeecc
Remove unnecessary canClick logic
juliawu Dec 26, 2025
148f791
Remove unused euro countries references
juliawu Dec 26, 2025
c213972
Merge branch 'master' into map-drill-down
juliawu Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions static/js/tools/map/chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ interface ChartProps {
unit: string;
mapPointValues: { [dcid: string]: number };
mapPoints: Array<MapPoint>;
europeanCountries: Array<NamedPlace>;
rankingLink: string;
facetList: FacetSelectorFacetInfo[];
facetListLoading: boolean;
Expand Down Expand Up @@ -145,7 +144,6 @@ export function Chart(props: ChartProps): ReactElement {
unit={props.unit}
mapPointValues={props.mapPointValues}
mapPoints={props.mapPoints}
europeanCountries={props.europeanCountries}
borderGeoJsonData={props.borderGeoJsonData}
/>
{/* )} */}
Expand Down
1 change: 0 additions & 1 deletion static/js/tools/map/chart_loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,6 @@ export function ChartLoader(): ReactElement {
unit={chartStore.mapValuesDates.data.unit}
mapPointValues={chartStore.mapPointValues.data}
mapPoints={chartStore.mapPointCoordinate.data}
europeanCountries={europeanCountries}
rankingLink={rankingLink}
facetList={facetList}
borderGeoJsonData={
Expand Down
88 changes: 6 additions & 82 deletions static/js/tools/map/d3_map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,17 @@ import {
getProjection,
} from "../../chart/draw_d3_map";
import { generateLegendSvg, getColorScale } from "../../chart/draw_map_utils";
import {
GeoJsonData,
GeoJsonFeatureProperties,
MapPoint,
} from "../../chart/types";
import { GeoJsonData, MapPoint } from "../../chart/types";
import { MapLayerData } from "../../components/tiles/map_tile";
import { BORDER_STROKE_COLOR } from "../../constants/map_constants";
import { formatNumber } from "../../i18n/i18n";
import {
EUROPE_NAMED_TYPED_PLACE,
USA_PLACE_DCID,
} from "../../shared/constants";
import { USA_PLACE_DCID } from "../../shared/constants";
import { DataPointMetadata, NamedPlace, StatVarSpec } from "../../shared/types";
import { loadSpinner, removeSpinner } from "../../shared/util";
import { isChildPlaceOf, shouldShowMapBoundaries } from "../shared_util";
import { MAP_CONTAINER_ID, SECTION_CONTAINER_ID } from "./chart";
import { Context, DisplayOptions, PlaceInfo, StatVar } from "./context";
import {
CHART_LOADER_SCREEN,
getAllChildPlaceTypes,
getParentPlaces,
getRedirectLink,
} from "./util";
import { Context } from "./context";
import { CHART_LOADER_SCREEN } from "./util";
import { shouldShowBorder } from "./util";

interface D3MapProps {
Expand All @@ -67,7 +55,6 @@ interface D3MapProps {
unit: string;
mapPointValues: { [dcid: string]: number };
mapPoints: Array<MapPoint>;
europeanCountries: Array<NamedPlace>;
// Geojson for drawing border of containing place
borderGeoJsonData?: GeoJsonData;
}
Expand Down Expand Up @@ -101,12 +88,6 @@ export function D3Map(props: D3MapProps): JSX.Element {
).innerHTML = `<div id="legend-unit">${props.unit || ""}</div>`;
const width = document.getElementById(CHART_CONTAINER_ID).offsetWidth;
const height = (width * 2) / 5;
const redirectAction = getMapRedirectAction(
statVar.value,
placeInfo.value,
display.value,
props.europeanCountries
);
const zoomDcid =
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

With the removal of getMapRedirectAction, props.europeanCountries is no longer used inside the draw function. You can remove it from the useCallback dependency array on line 226 to prevent unnecessary re-renders.

Copy link
Contributor Author

@juliawu juliawu Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good bot. props.europeanCountries and the logic to pass it through has been removed.

placeInfo.value.enclosingPlace.dcid !== placeInfo.value.selectedPlace.dcid
? placeInfo.value.selectedPlace.dcid
Expand Down Expand Up @@ -189,14 +170,14 @@ export function D3Map(props: D3MapProps): JSX.Element {
[layerData],
height,
width - legendWidth,
redirectAction,
_.noop,
getTooltipHtml(
props.metadata,
props.mapDataValues,
statVar.value.perCapita,
props.unit
),
canClickRegion(placeInfo.value, props.europeanCountries),
() => false,
projection,
zoomDcid,
zoomParams
Expand Down Expand Up @@ -241,7 +222,6 @@ export function D3Map(props: D3MapProps): JSX.Element {
removeSpinner(CHART_LOADER_SCREEN);
}, [
props.borderGeoJsonData,
props.europeanCountries,
props.geoJsonData,
props.mapDataValues,
props.mapPointValues,
Expand Down Expand Up @@ -307,40 +287,6 @@ export function D3Map(props: D3MapProps): JSX.Element {
}
}

const getMapRedirectAction =
(
statVar: StatVar,
placeInfo: PlaceInfo,
displayOptions: DisplayOptions,
europeanCountries: Array<NamedPlace>
) =>
(geoProperties: GeoJsonFeatureProperties): void => {
const selectedPlace = {
dcid: geoProperties.geoDcid,
name: geoProperties.name,
types: [placeInfo.enclosedPlaceType],
};
const enclosingPlace =
europeanCountries.findIndex(
(country) => country.dcid === selectedPlace.dcid
) > -1
? EUROPE_NAMED_TYPED_PLACE
: placeInfo.enclosingPlace;
const parentPlaces = getParentPlaces(
selectedPlace,
enclosingPlace,
placeInfo.parentPlaces
);
const redirectLink = getRedirectLink(
statVar,
selectedPlace,
parentPlaces,
placeInfo.mapPointPlaceType,
displayOptions
);
window.open(redirectLink, "_self");
};

const getTooltipHtml =
(
metadataMapping: { [dcid: string]: DataPointMetadata },
Expand Down Expand Up @@ -384,25 +330,3 @@ const getTooltipHtml =
}<br />` + footer;
return html;
};

const canClickRegion =
(placeInfo: PlaceInfo, europeanCountries: Array<NamedPlace>) =>
(placeDcid: string): boolean => {
const enclosingPlace =
europeanCountries.findIndex((country) => country.dcid === placeDcid) > -1
? EUROPE_NAMED_TYPED_PLACE
: placeInfo.enclosingPlace;
const parentPlaces = getParentPlaces(
placeInfo.selectedPlace,
enclosingPlace,
placeInfo.parentPlaces
);
const placeAsNamedTypedPlace = {
dcid: placeDcid,
name: placeDcid,
types: [placeInfo.enclosedPlaceType],
};
return !_.isEmpty(
getAllChildPlaceTypes(placeAsNamedTypedPlace, parentPlaces)
);
};
Loading