[node server] enable multiple places for line chart (#3642)

<img width="558" alt="Screenshot 2023-09-27 at 4 06 16 PM"
src="https://github.com/datacommonsorg/website/assets/69875368/3949b16e-1d5f-4106-a792-0a36e13cdf6b">

url used to get this:
http://localhost:3030/nodejs/chart-info?config={%22comparisonPlaces%22:[%22self%22,%22geoId/06%22],%22title%22:%22Prevalence%20of%20Health%20Conditions%20in%20Placer%20County%20(${date})%22,%22type%22:%22LINE%22}&place=geoId/06061&svSpec=[{%22name%22:%22Chronic%20Kidney%20Disease%22,%22statVar%22:%22Percent_Person_WithChronicKidneyDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Chronic%20Obstructive%20Pulmonary%20Disease%22,%22statVar%22:%22Percent_Person_WithChronicObstructivePulmonaryDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Coronary%20Heart%20Disease%22,%22statVar%22:%22Percent_Person_WithCoronaryHeartDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Diabetes%22,%22statVar%22:%22Percent_Person_WithDiabetes%22,%22unit%22:%22%25%22}]

static/js/components/subject_page/block.tsx

@@ -27,7 +27,6 @@ import {
   COLUMN_ID_PREFIX,
   HIDE_COLUMN_CLASS,
   HIDE_TILE_CLASS,
-  SELF_PLACE_DCID_PLACEHOLDER,
   TILE_ID_PREFIX,
 } from "../../constants/subject_page_constants";
 import { NamedPlace, NamedTypedPlace } from "../../shared/types";
@@ -41,6 +40,7 @@ import {
   getId,
   getMinTileIdxToHide,
 } from "../../utils/subject_page_utils";
+import { getComparisonPlaces } from "../../utils/tile_utils";
 import { BarTile } from "../tiles/bar_tile";
 import { BivariateTile } from "../tiles/bivariate_tile";
 import { DonutTile } from "../tiles/donut_tile";
@@ -200,11 +200,7 @@ function renderTiles(
     const place = tile.placeDcidOverride
       ? overridePlaces[tile.placeDcidOverride]
       : props.place;
-    const comparisonPlaces = tile.comparisonPlaces
-      ? tile.comparisonPlaces.map((p) =>
-          p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p
-        )
-      : undefined;
+    const comparisonPlaces = getComparisonPlaces(tile, place);
     const className = classNameList.join(" ");
     switch (tile.type) {
       case "HIGHLIGHT":

static/js/utils/tile_utils.tsx

@@ -24,14 +24,15 @@ import _ from "lodash";
 import React from "react";
 
 import { NL_SOURCE_REPLACEMENTS } from "../constants/app/nl_interface_constants";
+import { SELF_PLACE_DCID_PLACEHOLDER } from "../constants/subject_page_constants";
 import {
   GA_EVENT_TILE_EXPLORE_MORE,
   GA_PARAM_URL,
   triggerGAEvent,
 } from "../shared/ga_events";
 import { PointApiResponse, SeriesApiResponse } from "../shared/stat_types";
 import { getStatsVarLabel } from "../shared/stats_var_labels";
-import { StatVarSpec } from "../shared/types";
+import { NamedTypedPlace, StatVarSpec } from "../shared/types";
 import { urlToDisplayText } from "../shared/util";
 import { getMatchingObservation } from "../tools/shared_util";
 import { EventTypeSpec, TileConfig } from "../types/subject_page_proto_types";
@@ -526,3 +527,20 @@ export function showError(errorMsg: string, container: HTMLDivElement): void {
   // Show error message in the container
   containerSelection.html(errorMsg);
 }
+
+/**
+ * Gets the list of comparison places to use
+ * @param tileConfig tile config to get comparison places from
+ * @param place the main place for the tile
+ */
+export function getComparisonPlaces(
+  tileConfig: TileConfig,
+  place: NamedTypedPlace
+): string[] {
+  if (!tileConfig.comparisonPlaces) {
+    return undefined;
+  }
+  return tileConfig.comparisonPlaces.map((p) =>
+    p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p
+  );
+}

static/nodejs_server/bar_tile.ts

@@ -27,11 +27,10 @@ import {
   fetchData,
   getReplacementStrings,
 } from "../js/components/tiles/bar_tile";
-import { SELF_PLACE_DCID_PLACEHOLDER } from "../js/constants/subject_page_constants";
 import { NamedTypedPlace, StatVarSpec } from "../js/shared/types";
 import { TileConfig } from "../js/types/subject_page_proto_types";
 import { dataGroupsToCsv } from "../js/utils/chart_csv_utils";
-import { getChartTitle } from "../js/utils/tile_utils";
+import { getChartTitle, getComparisonPlaces } from "../js/utils/tile_utils";
 import { CHART_ID, DOM_ID, SVG_HEIGHT, SVG_WIDTH } from "./constants";
 import { TileResult } from "./types";
 import { getChartUrl, getProcessedSvg, getSources, getSvgXml } from "./utils";
@@ -44,11 +43,7 @@ function getTileProp(
   statVarSpec: StatVarSpec[],
   apiRoot: string
 ): BarTilePropType {
-  const comparisonPlaces = tileConfig.comparisonPlaces
-    ? tileConfig.comparisonPlaces.map((p) =>
-        p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p
-      )
-    : undefined;
+  const comparisonPlaces = getComparisonPlaces(tileConfig, place);
   const barTileSpec = tileConfig.barTileSpec || {};
   return {
     id,

static/nodejs_server/line_tile.ts

@@ -28,7 +28,7 @@ import {
 import { NamedTypedPlace, StatVarSpec } from "../js/shared/types";
 import { TileConfig } from "../js/types/subject_page_proto_types";
 import { dataGroupsToCsv } from "../js/utils/chart_csv_utils";
-import { getChartTitle } from "../js/utils/tile_utils";
+import { getChartTitle, getComparisonPlaces } from "../js/utils/tile_utils";
 import { CHART_ID, DOM_ID, SVG_HEIGHT, SVG_WIDTH } from "./constants";
 import { TileResult } from "./types";
 import { getChartUrl, getProcessedSvg, getSources, getSvgXml } from "./utils";
@@ -40,6 +40,7 @@ function getTileProp(
   statVarSpec: StatVarSpec[],
   apiRoot: string
 ): LineTilePropType {
+  const comparisonPlaces = getComparisonPlaces(tileConfig, place);
   return {
     apiRoot,
     id,
@@ -48,6 +49,7 @@ function getTileProp(
     svgChartHeight: SVG_HEIGHT,
     svgChartWidth: SVG_WIDTH,
     title: tileConfig.title,
+    comparisonPlaces,
   };
 }