Added sources="<URL>" attribute to web components (#4053)

Added `source` parameter to all web components to let user optionally
override the source urls.

Example usage:

```
<datacommons-pie
      header="Custom Source California Farms by Size"
      place="geoId/06"
      variables="Count_Farm_1To9.9Acre Count_Farm_10To49.9Acre Count_Farm_50To179Acre Count_Farm_180To499Acre Count_Farm_500To999Acre Count_1000OnwardsAcre"
      donut
      sources="https://example.com/source https://example.org/source"
    ></datacommons-pie>
```

Screenshot:

![custom-source](https://github.com/datacommonsorg/website/assets/13766/0c9e1143-3f9d-4811-996c-07b359a8feb3)

packages/web-components/examples/all-charts.html

@@ -178,6 +178,13 @@ <h2>Bar Chart</h2>
       childPlaceType="Country"
       perCapita="sdg/AG_PRD_FIESMSN"
     ></datacommons-bar>
+    <datacommons-bar
+      header="Custom Source Median income by gender of select US states (stacked)"
+      variables="Median_Income_Person_15OrMoreYears_Male_WithIncome Median_Income_Person_15OrMoreYears_Female_WithIncome"
+      places="geoId/01 geoId/02 geoId/04 geoId/05"
+      stacked
+      sources="https://example.com/source1 https://example.com/source2"
+    ></datacommons-bar>
     <h2>Pie/Donut</h2>
     <datacommons-pie
       header="California Farms by Size"
@@ -197,6 +204,13 @@ <h2>Pie/Donut</h2>
       variables="Count_Farm_1To9.9Acre Count_Farm_10To49.9Acre Count_Farm_50To179Acre Count_Farm_180To499Acre Count_Farm_500To999Acre Count_1000OnwardsAcre"
       donut
     ></datacommons-pie>
+    <datacommons-pie
+      header="Custom Source California Farms by Size"
+      place="geoId/06"
+      variables="Count_Farm_1To9.9Acre Count_Farm_10To49.9Acre Count_Farm_50To179Acre Count_Farm_180To499Acre Count_Farm_500To999Acre Count_1000OnwardsAcre"
+      donut
+      sources="https://example.com/source"
+    ></datacommons-pie>
     <h2>Gauge</h2>
     <datacommons-gauge
       header="Percentage of US Population that are Internet Users"
@@ -220,6 +234,15 @@ <h2>Gauge</h2>
       min="0"
       max="100"
     ></datacommons-gauge>
+    <datacommons-gauge
+      header="Custom Sources Percent of Population With Moderate or Severe Food Insecurity in United States"
+      variable="sdg/AG_PRD_FIESMSN"
+      place="country/USA"
+      perCapita="sdg/AG_PRD_FIESMSN"
+      min="0"
+      max="100"
+      sources="https://example.com/source"
+    ></datacommons-gauge>
     <h2>Highlight</h2>
     <datacommons-highlight
       description="Population of the United States"
@@ -255,7 +278,12 @@ <h2>Highlight</h2>
       variable="sdg/ER_GRF_ANIMRCNTN"
       place="country/USA"
     ></datacommons-highlight>
-
+    <datacommons-highlight
+      header="Custom Source Local Breeds With Adequate Genetic Resources for Reconstitution in United States"
+      variable="sdg/ER_GRF_ANIMRCNTN"
+      place="country/USA"
+      sources="https://example.com/source"
+    ></datacommons-highlight>
     <h2>Map</h2>
     <datacommons-map
       header="Population"
@@ -326,6 +354,14 @@ <h2>Map with year slider</h2>
       variable="sdg/AG_PRD_FIESMSN"
       perCapita="sdg/AG_PRD_FIESMSN"
     ></datacommons-map>
+    <datacommons-map
+      header="Custom Source Percent of Population With Moderate or Severe Food Insecurity in the World"
+      parentPlace="Earth"
+      childPlaceType="Country"
+      variable="sdg/AG_PRD_FIESMSN"
+      perCapita="sdg/AG_PRD_FIESMSN"
+      sources="https://example.com/source1 https://example.com/source2"
+    ></datacommons-map>
     <h2>Ranking</h2>
     <datacommons-ranking
       header="US States with the Highest Population"
@@ -340,6 +376,14 @@ <h2>Ranking</h2>
       variable="Count_Person"
       showLowest
     ></datacommons-ranking>
+    <datacommons-ranking
+      header="Custom Sources US States with the Lowest Population"
+      parentPlace="country/USA"
+      childPlaceType="State"
+      variable="Count_Person"
+      showLowest
+      sources="https://example.com/source1 https://example.com/source2"
+    ></datacommons-ranking>
     <h3>Line</h3>
     <datacommons-line
       header="US Population Over Time"
@@ -431,6 +475,13 @@ <h3>Line</h3>
       variables="sdg/AG_PRD_FIESMSN"
       perCapita="sdg/AG_PRD_FIESMSN"
     ></datacommons-line>
+    <datacommons-line
+      header="Custom Source Percent of Population With Moderate or Severe Food Insecurity in United States"
+      places="country/USA"
+      variables="sdg/AG_PRD_FIESMSN"
+      perCapita="sdg/AG_PRD_FIESMSN"
+      sources="https://example.com/source1 https://example.com/source2"
+    ></datacommons-line>
     <h2>Lollipop</h2>
     <datacommons-bar
       header="Population in States of United States"
@@ -490,5 +541,13 @@ <h2>Scatter</h2>
       childPlaceType="Country"
       placeNameProp="unDataLabel"
     ></datacommons-scatter>
+    <datacommons-scatter
+      header="Custom Source Population vs Cell Subscription for Countries in Europe (with place name prop)"
+      variables="Count_Person Count_Product_MobileCellularSubscription_AsFractionOf_Count_Person"
+      parentPlace="europe"
+      childPlaceType="Country"
+      placeNameProp="unDataLabel"
+      sources="https://example.com/source1 https://example.com/source2"
+    ></datacommons-scatter>
   </body>
 </html>

static/js/components/tiles/bar_tile.tsx

@@ -132,13 +132,12 @@ export function BarTile(props: BarTilePropType): JSX.Element {
   }, [props, barChartData]);
 
   useDrawOnResize(drawFn, chartContainerRef.current);
-
   return (
     <ChartTileContainer
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={barChartData && barChartData.sources}
+      sources={props.sources || (barChartData && barChartData.sources)}
       replacementStrings={getReplacementStrings(barChartData)}
       className={`${props.className} bar-chart`}
       allowEmbed={true}

static/js/components/tiles/chart_tile.tsx

@@ -28,15 +28,15 @@ import {
   formatString,
   getChartTitle,
   getMergedSvg,
-  getSourcesJsx,
   ReplacementStrings,
+  TileSources,
 } from "../../utils/tile_utils";
 import { NlChartFeedback } from "../nl_feedback";
 import { ChartFooter } from "./chart_footer";
 interface ChartTileContainerProp {
   id: string;
   title: string;
-  sources: Set<string>;
+  sources: Set<string> | string[];
   children: React.ReactNode;
   replacementStrings: ReplacementStrings;
   // Whether or not to allow chart embedding action.
@@ -92,7 +92,7 @@ export function ChartTileContainer(props: ChartTileContainerProp): JSX.Element {
               <div className="subheader">{props.subtitle}</div>
             ) : null}
           </slot>
-          {showSources && getSourcesJsx(props.sources)}
+          {showSources && <TileSources sources={props.sources} />}
         </div>
         {props.children}
       </div>

static/js/components/tiles/donut_tile.tsx

@@ -69,6 +69,8 @@ export interface DonutTilePropType {
   title: string;
   // Chart subtitle
   subtitle?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 interface DonutChartData {
@@ -108,7 +110,7 @@ export function DonutTile(props: DonutTilePropType): JSX.Element {
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={donutChartData && donutChartData.sources}
+      sources={props.sources || (donutChartData && donutChartData.sources)}
       replacementStrings={getReplacementStrings(props, donutChartData)}
       className={`${props.className} bar-chart`}
       allowEmbed={true}

static/js/components/tiles/gauge_tile.tsx

@@ -61,6 +61,8 @@ export interface GaugeTilePropType {
   title: string;
   // Chart subtitle
   subtitle?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 export interface GaugeChartData {
@@ -112,7 +114,7 @@ export function GaugeTile(props: GaugeTilePropType): JSX.Element {
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={gaugeData && gaugeData.sources}
+      sources={props.sources || (gaugeData && gaugeData.sources)}
       replacementStrings={replacementStrings}
       allowEmbed={true}
       className={`bar-chart`}

static/js/components/tiles/highlight_tile.tsx

@@ -34,9 +34,9 @@ import {
   formatString,
   getDenomInfo,
   getNoDataErrorMsg,
-  getSourcesJsx,
   getStatFormat,
   ReplacementStrings,
+  TileSources,
 } from "../../utils/tile_utils";
 
 // units that should be formatted as part of the number
@@ -53,6 +53,8 @@ export interface HighlightTilePropType {
   place: NamedTypedPlace;
   // Variable to get data for
   statVarSpec: StatVarSpec;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 interface HighlightData extends Observation {
@@ -122,9 +124,9 @@ export function HighlightTile(props: HighlightTilePropType): JSX.Element {
       {highlightData && highlightData.errorMsg && (
         <span>{highlightData.errorMsg}</span>
       )}
-      {!_.isEmpty(highlightData.sources) &&
-        !highlightData.errorMsg &&
-        getSourcesJsx(highlightData.sources)}
+      {!_.isEmpty(highlightData.sources) && !highlightData.errorMsg && (
+        <TileSources sources={props.sources || highlightData.sources} />
+      )}
     </div>
   );
 }

static/js/components/tiles/line_tile.tsx

@@ -97,6 +97,8 @@ export interface LineTilePropType {
   endDate?: string;
   // Date to highlight on the chart.
   highlightDate?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 export interface LineChartData {
@@ -138,7 +140,7 @@ export function LineTile(props: LineTilePropType): JSX.Element {
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={chartData && chartData.sources}
+      sources={props.sources || (chartData && chartData.sources)}
       replacementStrings={getReplacementStrings(props)}
       className={`${props.className} line-chart`}
       allowEmbed={true}

static/js/components/tiles/map_tile.tsx

@@ -121,6 +121,8 @@ export interface MapTilePropType {
   subtitle?: string;
   // Function used to get processed stat var names.
   getProcessedSVNameFn?: (name: string) => string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 // Api responses associated with a single layer of the map
@@ -245,7 +247,7 @@ export function MapTile(props: MapTilePropType): JSX.Element {
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={mapChartData && mapChartData.sources}
+      sources={props.sources || (mapChartData && mapChartData.sources)}
       replacementStrings={
         mapChartData && getReplacementStrings(props, mapChartData)
       }

static/js/components/tiles/ranking_tile.tsx

@@ -63,6 +63,8 @@ export interface RankingTilePropType
   rankingMetadata: RankingTileSpec;
   showLoadingSpinner?: boolean;
   footnote?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 // TODO: Use ChartTileContainer like other tiles.
@@ -109,7 +111,7 @@ export function RankingTile(props: RankingTilePropType): JSX.Element {
       chartHtml,
       "",
       "",
-      Array.from(sources)
+      props.sources || Array.from(sources)
     );
   }
 
@@ -145,6 +147,7 @@ export function RankingTile(props: RankingTilePropType): JSX.Element {
               rankingData={rankingData}
               rankingMetadata={props.rankingMetadata}
               showChartEmbed={showChartEmbed}
+              sources={props.sources}
               statVar={statVar}
               entityType={props.enclosedPlaceType}
               title={props.title}

static/js/components/tiles/scatter_tile.tsx

@@ -81,6 +81,8 @@ export interface ScatterTilePropType {
   placeNameProp?: string;
   // Chart subtitle
   subtitle?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 interface RawData {
@@ -149,7 +151,7 @@ export function ScatterTile(props: ScatterTilePropType): JSX.Element {
       id={props.id}
       title={props.title}
       subtitle={props.subtitle}
-      sources={scatterChartData && scatterChartData.sources}
+      sources={props.sources || (scatterChartData && scatterChartData.sources)}
       replacementStrings={getReplacementStrings(props, scatterChartData)}
       className={`${props.className} scatter-chart`}
       allowEmbed={true}

static/js/components/tiles/sv_ranking_units.tsx

@@ -28,7 +28,7 @@ import {
 } from "../../types/ranking_unit_types";
 import { RankingTileSpec } from "../../types/subject_page_proto_types";
 import { getHash } from "../../utils/app/visualization_utils";
-import { formatString, getSourcesJsx } from "../../utils/tile_utils";
+import { formatString, TileSources } from "../../utils/tile_utils";
 import { NlChartFeedback } from "../nl_feedback";
 import { RankingUnit } from "../ranking_unit";
 import { ChartFooter } from "./chart_footer";
@@ -56,6 +56,8 @@ interface SvRankingUnitsProps {
   onHoverToggled?: (placeDcid: string, hover: boolean) => void;
   errorMsg?: string;
   footnote?: string;
+  // Optional: Override sources for this tile
+  sources?: string[];
 }
 
 /**
@@ -92,7 +94,7 @@ export function SvRankingUnits(props: SvRankingUnitsProps): JSX.Element {
       chartHeight,
       chartHtml,
       points,
-      Array.from(rankingGroup.sources),
+      props.sources || Array.from(rankingGroup.sources),
       rankingGroup.svName
     );
   }
@@ -110,7 +112,8 @@ export function SvRankingUnits(props: SvRankingUnitsProps): JSX.Element {
             props.apiRoot,
             highestRankingUnitRef,
             props.onHoverToggled,
-            props.errorMsg
+            props.errorMsg,
+            props.sources
           )}
           {!props.hideFooter && (
             <ChartFooter
@@ -139,7 +142,9 @@ export function SvRankingUnits(props: SvRankingUnitsProps): JSX.Element {
                 true,
                 props.apiRoot,
                 highestRankingUnitRef,
-                props.onHoverToggled
+                props.onHoverToggled,
+                undefined,
+                props.sources
               )}
               {!props.hideFooter && (
                 <ChartFooter
@@ -165,7 +170,9 @@ export function SvRankingUnits(props: SvRankingUnitsProps): JSX.Element {
                 false,
                 props.apiRoot,
                 lowestRankingUnitRef,
-                props.onHoverToggled
+                props.onHoverToggled,
+                undefined,
+                props.sources
               )}
               {!props.hideFooter && (
                 <ChartFooter
@@ -254,6 +261,9 @@ export function getRankingUnitPoints(
  * @param rankingMetadata the RankingTileSpec to get the ranking unit for
  * @param isHighest whether or not this ranking unit is showing highest
  * @param rankingUnitRef ref object to attach to the ranking unit
+ * @param onHoverToggled callback when user hovers over a row
+ * @param errorMsg Erorr message
+ * @param sources Optional: Override sources list with this list of  URLs
  */
 export function getRankingUnit(
   tileConfigTitle: string,
@@ -265,7 +275,8 @@ export function getRankingUnit(
   apiRoot: string,
   rankingUnitRef?: RefObject<HTMLDivElement>,
   onHoverToggled?: (placeDcid: string, hover: boolean) => void,
-  errorMsg?: string
+  errorMsg?: string,
+  sources?: string[]
 ): JSX.Element {
   const { topPoints, bottomPoints } = getRankingUnitPoints(
     rankingMetadata,
@@ -294,7 +305,11 @@ export function getRankingUnit(
         rankingMetadata.showMultiColumn ? rankingGroup.svName : undefined
       }
       onHoverToggled={onHoverToggled}
-      headerChild={errorMsg ? null : getSourcesJsx(rankingGroup.sources)}
+      headerChild={
+        errorMsg ? null : (
+          <TileSources sources={sources || rankingGroup.sources} />
+        )
+      }
       errorMsg={errorMsg}
       apiRoot={apiRoot}
       entityType={entityType}