[Custom DC] Fix Disappearing Stat Var bug on Map and Scatter tool

server/__init__.py

@@ -398,6 +398,10 @@ def create_app(nl_root=DEFAULT_NL_ROOT):
     blocklist_svg = ["dc/g/Uncategorized", "oecd/g/OECD"]
   app.config['BLOCKLIST_SVG'] = blocklist_svg
 
+  # Set whether to filter stat vars with low geographic coverage in the
+  # map and scatter tools.
+  app.config['USE_STAT_VAR_FILTERING'] = cfg.USE_STAT_VAR_FILTERING
+
   if not cfg.TEST:
     urls = get_health_check_urls()
     libutil.check_backend_ready(urls)

server/app_env/_base.py

@@ -81,4 +81,8 @@ class Config:
   # Optional: custom dc template folder name:
   # /server/templates/custom_dc/<CUSTOM_DC_TEMPLATE_FOLDER>/
   # Defaults to the custom DC application environment name (Config.ENV value)
-  CUSTOM_DC_TEMPLATE_FOLDER = ''
+  CUSTOM_DC_TEMPLATE_FOLDER = ''
+  # Optional: Whether to hide stat vars with low geographic coverage from
+  # the map and scatter tools. Enabling this filtering prevents users from
+  # encountering almost-empty maps and sparse scatter plots.
+  USE_STAT_VAR_FILTERING = True

server/app_env/custom.py

@@ -24,11 +24,12 @@ class Config(_base.Config):
   SHOW_DISASTER = False
   USE_LLM = False
   USE_MEMCACHE = False
+  USE_STAT_VAR_FILTERING = False
 
 
 class LocalConfig(Config, local.Config):
   pass
 
 
 class ComposeConfig(Config, local.Config):
-  pass
+  pass

server/templates/tools/map.html

@@ -35,6 +35,7 @@
   <div id="main-pane"></div>
   <script>
     infoConfig = {{info_json|tojson|safe}};
+    globalThis.useStatVarFiltering = {{ config['USE_STAT_VAR_FILTERING'] | lower }};
   </script>
 {% endblock %}
 

server/templates/tools/scatter.html

@@ -31,6 +31,7 @@
 <div id="main-pane"></div>
 <script>
   infoConfig = {{info_json|tojson|safe}};
+  globalThis.useStatVarFiltering = {{ config['USE_STAT_VAR_FILTERING'] | lower }};
 </script>
 {% endblock %}
 

server/templates/tools/visualization.html

@@ -29,6 +29,7 @@
   <div id="main-pane"></div>
   <script>
     infoConfig = {{info_json|tojson|safe}};
+    globalThis.useStatVarFiltering = {{ config['USE_STAT_VAR_FILTERING'] | lower }};
   </script>
 {% endblock %}
 

static/js/apps/visualization/stat_var_selector.tsx

@@ -35,7 +35,10 @@ import {
 import { Spinner } from "../../components/spinner";
 import { getStatVarInfo } from "../../shared/stat_var";
 import { StatVarHierarchy } from "../../stat_var_hierarchy/stat_var_hierarchy";
-import { getFilteredStatVarPromise } from "../../utils/app/visualization_utils";
+import {
+  getFilteredStatVarPromise,
+  getNumEntitiesExistence,
+} from "../../utils/app/visualization_utils";
 import { AppContext } from "./app_context";
 import { VIS_TYPE_CONFIG } from "./vis_type_configs";
 
@@ -104,9 +107,9 @@ export function StatVarSelector(props: StatVarSelectorPropType): JSX.Element {
             selectSV={addSv}
             searchLabel={""}
             deselectSV={removeSv}
-            numEntitiesExistence={Math.min(
-              Math.max(samplePlaces.length, 1),
-              visTypeConfig.svHierarchyNumExistence || 1
+            numEntitiesExistence={getNumEntitiesExistence(
+              samplePlaces,
+              visTypeConfig
             )}
           />
         )}

static/js/shared/ga_events.test.tsx

@@ -89,6 +89,7 @@ import { ScatterChartType } from "../tools/scatter/util";
 import { Chart as TimelineToolChart } from "../tools/timeline/chart";
 import * as dataFetcher from "../tools/timeline/data_fetcher";
 import { axiosMock } from "../tools/timeline/mock_functions";
+import { getNumEntitiesExistence } from "../utils/app/visualization_utils";
 import {
   GA_EVENT_PLACE_CATEGORY_CLICK,
   GA_EVENT_PLACE_CHART_CLICK,

static/js/tools/download/mock_functions.ts

@@ -117,6 +117,13 @@ export function axiosMock(): void {
       numEntitiesExistence: undefined,
     })
     .mockResolvedValue(rootGroupsData);
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Root",
+      entities: [],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(rootGroupsData);
 
   // get root stat var group for places in geoId/06
   when(axios.post)
@@ -126,6 +133,13 @@ export function axiosMock(): void {
       numEntitiesExistence: undefined,
     })
     .mockResolvedValue(rootGroupsData);
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Root",
+      entities: ["geoId/06001", "geoId/06002"],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
@@ -134,6 +148,13 @@ export function axiosMock(): void {
       numEntitiesExistence: undefined,
     })
     .mockResolvedValue(rootGroupsData);
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Root",
+      entities: ["geoId/06002", "geoId/06001"],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(rootGroupsData);
 
   // get demographics stat var group for places in geoId/06
   when(axios.post)
@@ -143,6 +164,13 @@ export function axiosMock(): void {
       numEntitiesExistence: undefined,
     })
     .mockResolvedValue(demographicsGroupsData);
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Demographics",
+      entities: ["geoId/06001", "geoId/06002"],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
@@ -151,6 +179,13 @@ export function axiosMock(): void {
       numEntitiesExistence: undefined,
     })
     .mockResolvedValue(demographicsGroupsData);
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Demographics",
+      entities: ["geoId/06002", "geoId/06001"],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(demographicsGroupsData);
 
   // stat var info for demographics node
   when(axios.get)

static/js/tools/map/stat_var_chooser.tsx

@@ -38,8 +38,6 @@ import {
 } from "./context";
 import { DEFAULT_DISPLAY_OPTIONS, getMapPointPlaceType } from "./util";
 
-const NUM_ENTITIES_EXISTENCE = 10;
-
 interface StatVarChooserProps {
   openSvHierarchyModalCallback: () => void;
   openSvHierarchyModal: boolean;
@@ -114,10 +112,6 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element {
       selectSV={(svDcid) =>
         selectStatVar(dateCtx, statVar, display, placeInfo, svDcid)
       }
-      numEntitiesExistence={Math.min(
-        NUM_ENTITIES_EXISTENCE,
-        samplePlaces.length
-      )}
     />
   );
 }

static/js/tools/scatter/app.test.tsx

@@ -490,99 +490,107 @@ function mockAxios(): void {
     })
     .mockResolvedValue(rootGroupsData);
 
+  when(axios.post)
+    .calledWith("/api/variable-group/info", {
+      dcid: "dc/g/Root",
+      entities: [],
+      numEntitiesExistence: 1,
+    })
+    .mockResolvedValue(rootGroupsData);
+
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10001", "geoId/10003", "geoId/10005"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10001", "geoId/10005", "geoId/10003"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10003", "geoId/10001", "geoId/10005"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10003", "geoId/10005", "geoId/10001"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10005", "geoId/10003", "geoId/10001"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: ["geoId/10005", "geoId/10001", "geoId/10003"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(rootGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10001", "geoId/10003", "geoId/10005"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10001", "geoId/10005", "geoId/10003"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10003", "geoId/10001", "geoId/10005"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10003", "geoId/10005", "geoId/10001"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10005", "geoId/10003", "geoId/10001"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
   when(axios.post)
     .calledWith("/api/variable-group/info", {
       dcid: "dc/g/Demographics",
       entities: ["geoId/10005", "geoId/10001", "geoId/10003"],
-      numEntitiesExistence: 3,
+      numEntitiesExistence: 1,
     })
     .mockResolvedValue(demographicsGroupsData);
 
@@ -686,7 +694,7 @@ test("all functionalities", async () => {
     expect(axios.post).toHaveBeenCalledWith("/api/variable-group/info", {
       dcid: "dc/g/Root",
       entities: [],
-      numEntitiesExistence: 0,
+      numEntitiesExistence: 1,
     });
   });
   await app.update();

static/js/tools/scatter/chart.tsx

@@ -139,11 +139,15 @@ export function Chart(props: ChartPropsType): JSX.Element {
       }
     }, DEBOUNCE_INTERVAL_MS);
     const resizeObserver = new ResizeObserver(debouncedHandler);
-    if (chartContainerRef.current) {
-      resizeObserver.observe(chartContainerRef.current);
+    // The value of chartContainerRef.current may change between setting the
+    // observe and unobserving during cleanup, so we store the current value
+    // in a variable.
+    const currentChartContainerElement = chartContainerRef.current;
+    if (currentChartContainerElement) {
+      resizeObserver.observe(currentChartContainerElement);
     }
     return () => {
-      resizeObserver.unobserve(chartContainerRef.current);
+      resizeObserver.unobserve(currentChartContainerElement);
       debouncedHandler.cancel();
     };
   }, [props, chartContainerRef, geoJsonFetched]);

static/js/tools/scatter/statvar.tsx

@@ -62,8 +62,6 @@ const defaultModalSelected: ModalSelected = Object.freeze({
   y: false,
 });
 
-const NUM_ENTITIES_EXISTENCE = 10;
-
 interface StatVarChooserProps {
   openSvHierarchyModalCallback: () => void;
   openSvHierarchyModal: boolean;
@@ -164,10 +162,6 @@ export function StatVarChooser(props: StatVarChooserProps): JSX.Element {
         }
         selectedSVs={selectedSvs}
         selectSV={(sv) => addStatVar(x, y, sv, setThirdStatVar, setModalOpen)}
-        numEntitiesExistence={Math.min(
-          NUM_ENTITIES_EXISTENCE,
-          samplePlaces.length
-        )}
       />
       {/* Modal for selecting 2 stat vars when a third is selected */}
       <Modal isOpen={modalOpen} backdrop="static" id="statvar-modal">