@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/core/Grapher.js

@@ -0,0 +1,581 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import React from "react";
+import {
+  observable,
+  computed,
+  action,
+  autorun,
+  reaction,
+  makeObservable
+} from "mobx";
+import {
+  bind,
+  next,
+  sampleFrom,
+  exposeInstanceOnWindow,
+  strToQueryParams,
+  queryParamsToStr,
+  setWindowQueryStr
+} from "../../utils/index.js";
+import { BodyPortal } from "../../components/index.js";
+import {
+  ScaleType,
+  GrapherTooltipAnchor
+} from "../../types/index.js";
+import {
+  GRAPHER_LOADED_EVENT_NAME,
+  GrapherModal
+} from "../core/GrapherConstants.js";
+import { FullScreen } from "../fullScreen/FullScreen.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { TooltipContainer } from "../tooltip/Tooltip.js";
+import { EntitySelectorModal } from "../modal/EntitySelectorModal.js";
+import { DownloadModal } from "../modal/DownloadModal.js";
+import { observer } from "mobx-react";
+import "d3-transition";
+import { SourcesModal } from "../modal/SourcesModal.js";
+import { CommandPalette } from "../controls/CommandPalette.js";
+import { EmbedModal } from "../modal/EmbedModal.js";
+import Mousetrap from "mousetrap";
+import { legacyToChartsTableAndDimensionsWithMandatorySlug } from "./LegacyToChartsTable.js";
+import classnames from "classnames";
+import { SidePanel } from "../sidePanel/SidePanel.js";
+import { EntitySelector } from "../entitySelector/EntitySelector.js";
+import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer.js";
+import { Chart } from "../chart/Chart.js";
+import { flushSync } from "react-dom";
+const DEFAULT_MS_PER_TICK = 100;
+let Grapher = class extends React.Component {
+  constructor(props) {
+    super(props);
+    // #region Observable props not in any interface
+    // stored on Grapher so state is preserved when switching to full-screen mode
+    this.legacyVariableDataJson = void 0;
+    this.hasLoggedGAViewEvent = false;
+    this.hasBeenVisible = false;
+    this.uncaughtError = void 0;
+    this._shortcutsBound = false;
+    this.debounceMode = false;
+    makeObservable(this, {
+      legacyVariableDataJson: observable,
+      hasBeenVisible: observable,
+      uncaughtError: observable
+    });
+  }
+  get grapherState() {
+    return this.props.grapherState;
+  }
+  // Convenience method for debugging
+  windowQueryParams(str = location.search) {
+    return strToQueryParams(str);
+  }
+  _setInputTable(json, legacyConfig) {
+    const startMark = performance.now();
+    const tableWithColors = legacyToChartsTableAndDimensionsWithMandatorySlug(
+      json,
+      legacyConfig.dimensions ?? [],
+      legacyConfig.selectedEntityColors
+    );
+    this.grapherState.createPerformanceMeasurement(
+      "legacyToChartsTableAndDimensions",
+      startMark
+    );
+    this.grapherState.inputTable = tableWithColors;
+  }
+  rebuildInputChartsTable() {
+    if (!this.legacyVariableDataJson) return;
+    this._setInputTable(
+      this.legacyVariableDataJson,
+      this.grapherState.legacyConfigAsAuthored
+    );
+  }
+  dispose() {
+    this.grapherState.disposers.forEach((dispose) => dispose());
+  }
+  setError(err) {
+    this.uncaughtError = err;
+  }
+  clearErrors() {
+    this.uncaughtError = void 0;
+  }
+  get commandPalette() {
+    return this.props.grapherState.enableKeyboardShortcuts ? /* @__PURE__ */ React.createElement(CommandPalette, { commands: this.keyboardShortcuts, display: "none" }) : null;
+  }
+  toggleTabCommand() {
+    this.grapherState.setTab(
+      next(this.grapherState.availableTabs, this.grapherState.activeTab)
+    );
+  }
+  togglePlayingCommand() {
+    void this.grapherState.timelineController.togglePlay();
+  }
+  get keyboardShortcuts() {
+    const temporaryFacetTestCommands = _.range(0, 10).map((num) => {
+      return {
+        combo: `${num}`,
+        fn: () => this.randomSelection(num)
+      };
+    });
+    const shortcuts = [
+      ...temporaryFacetTestCommands,
+      {
+        combo: "t",
+        fn: () => this.toggleTabCommand(),
+        title: "Toggle tab",
+        category: "Navigation"
+      },
+      {
+        combo: "?",
+        fn: () => CommandPalette.togglePalette(),
+        title: `Toggle Help`,
+        category: "Navigation"
+      },
+      {
+        combo: "a",
+        fn: () => {
+          if (this.grapherState.selection.hasSelection) {
+            this.grapherState.selection.clearSelection();
+            this.grapherState.focusArray.clear();
+          } else {
+            this.grapherState.selection.setSelectedEntities(
+              this.grapherState.availableEntityNames
+            );
+          }
+        },
+        title: this.grapherState.selection.hasSelection ? `Select None` : `Select All`,
+        category: "Selection"
+      },
+      {
+        combo: "f",
+        fn: () => {
+          this.grapherState.hideFacetControl = !this.grapherState.hideFacetControl;
+        },
+        title: `Toggle Faceting`,
+        category: "Chart"
+      },
+      {
+        combo: "p",
+        fn: () => this.togglePlayingCommand(),
+        title: this.grapherState.isPlaying ? `Pause` : `Play`,
+        category: "Timeline"
+      },
+      {
+        combo: "l",
+        fn: () => this.toggleYScaleTypeCommand(),
+        title: "Toggle Y log/linear",
+        category: "Chart"
+      },
+      {
+        combo: "w",
+        fn: () => this.toggleFullScreenMode(),
+        title: `Toggle full-screen mode`,
+        category: "Chart"
+      },
+      {
+        combo: "s",
+        fn: () => {
+          const isSourcesModalOpen = this.grapherState.activeModal === GrapherModal.Sources;
+          this.grapherState.activeModal = isSourcesModalOpen ? void 0 : GrapherModal.Sources;
+        },
+        title: `Toggle sources modal`,
+        category: "Chart"
+      },
+      {
+        combo: "d",
+        fn: () => {
+          const isDownloadModalOpen = this.grapherState.activeModal === GrapherModal.Download;
+          this.grapherState.activeModal = isDownloadModalOpen ? void 0 : GrapherModal.Download;
+        },
+        title: "Toggle download modal",
+        category: "Chart"
+      },
+      { combo: "esc", fn: () => this.clearErrors() },
+      {
+        combo: "z",
+        fn: () => this.toggleTimelineCommand(),
+        title: "Latest/Earliest/All period",
+        category: "Timeline"
+      },
+      {
+        combo: "shift+o",
+        fn: () => this.grapherState.clearQueryParams(),
+        title: "Reset to original",
+        category: "Navigation"
+      },
+      {
+        combo: "g",
+        fn: () => this.grapherState.globeController.toggleGlobe(),
+        title: "Toggle globe view",
+        category: "Map"
+      }
+    ];
+    if (this.grapherState.slideShow) {
+      const slideShow = this.grapherState.slideShow;
+      shortcuts.push({
+        combo: "right",
+        fn: () => slideShow.playNext(),
+        title: "Next chart",
+        category: "Browse"
+      });
+      shortcuts.push({
+        combo: "left",
+        fn: () => slideShow.playPrevious(),
+        title: "Previous chart",
+        category: "Browse"
+      });
+    }
+    return shortcuts;
+  }
+  toggleTimelineCommand() {
+    this.grapherState.setTimeFromTimeQueryParam(
+      next(["latest", "earliest", ".."], this.grapherState.timeParam)
+    );
+  }
+  toggleYScaleTypeCommand() {
+    this.grapherState.yAxis.scaleType = next(
+      [ScaleType.linear, ScaleType.log],
+      this.grapherState.yAxis.scaleType
+    );
+  }
+  randomSelection(num) {
+    this.clearErrors();
+    const currentSelection = this.grapherState.selection.selectedEntityNames.length;
+    const newNum = num ? num : currentSelection ? currentSelection * 2 : 10;
+    this.grapherState.selection.setSelectedEntities(
+      sampleFrom(
+        this.grapherState.availableEntityNames,
+        newNum,
+        Date.now()
+      )
+    );
+  }
+  toggleFullScreenMode() {
+    this.grapherState.isInFullScreenMode = !this.grapherState.isInFullScreenMode;
+  }
+  dismissFullScreen() {
+    if (this.grapherState.isModalOpen || this.grapherState.isShareMenuActive) {
+      this.grapherState.isEntitySelectorModalOrDrawerOpen = false;
+      this.grapherState.activeModal = void 0;
+      this.grapherState.isShareMenuActive = false;
+    } else {
+      this.grapherState.isInFullScreenMode = false;
+    }
+  }
+  renderError() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        title: this.uncaughtError?.message,
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          lineHeight: 1.5,
+          padding: "48px"
+        }
+      },
+      /* @__PURE__ */ React.createElement("p", { style: { color: "#cc0000", fontWeight: 700 } }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faExclamationTriangle }), "There was a problem loading this chart"),
+      /* @__PURE__ */ React.createElement("p", null, "We have been notified of this error, please check back later whether it's been fixed. If the error persists, get in touch with us at", " ", /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: `mailto:info@ourworldindata.org?subject=Broken chart on page ${window.location.href}`
+        },
+        "info@ourworldindata.org"
+      ), "."),
+      this.uncaughtError && this.uncaughtError.message && /* @__PURE__ */ React.createElement("pre", { style: { fontSize: "11px" } }, "Error: ", this.uncaughtError.message)
+    );
+  }
+  renderGrapherComponent() {
+    const containerClasses = classnames({
+      GrapherComponent: true,
+      GrapherPortraitClass: this.grapherState.isPortrait,
+      isStatic: this.grapherState.isStatic,
+      isExportingToSvgOrPng: this.grapherState.isExportingToSvgOrPng,
+      GrapherComponentNarrow: this.grapherState.isNarrow,
+      GrapherComponentSemiNarrow: this.grapherState.isSemiNarrow,
+      GrapherComponentSmall: this.grapherState.isSmall,
+      GrapherComponentMedium: this.grapherState.isMedium
+    });
+    const containerStyle = {
+      width: this.grapherState.activeBounds.width,
+      height: this.grapherState.activeBounds.height,
+      fontSize: this.grapherState.isExportingToSvgOrPng ? 18 : Math.min(16, this.grapherState.fontSize)
+      // cap font size at 16px
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.grapherState.base,
+        className: containerClasses,
+        style: containerStyle,
+        "data-grapher-url": JSON.stringify({
+          grapherUrl: this.grapherState.canonicalUrl,
+          narrativeChartName: this.grapherState.narrativeChartInfo?.name
+        })
+      },
+      this.commandPalette,
+      this.uncaughtError ? this.renderError() : this.renderReady()
+    );
+  }
+  render() {
+    if (this.grapherState.isExportingToSvgOrPng)
+      return /* @__PURE__ */ React.createElement(Chart, { manager: this.grapherState });
+    if (this.grapherState.isInFullScreenMode) {
+      return /* @__PURE__ */ React.createElement(
+        FullScreen,
+        {
+          onDismiss: this.dismissFullScreen,
+          overlayColor: this.grapherState.isModalOpen ? "#999999" : "#fff"
+        },
+        this.renderGrapherComponent()
+      );
+    }
+    return this.renderGrapherComponent();
+  }
+  renderReady() {
+    if (!this.hasBeenVisible) return null;
+    const entitySelectorArray = this.grapherState.isOnMapTab ? this.grapherState.mapConfig.selection : this.grapherState.selection;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "CaptionedChartAndSidePanel" }, /* @__PURE__ */ React.createElement(Chart, { manager: this.grapherState }), this.grapherState.sidePanelBounds && /* @__PURE__ */ React.createElement(SidePanel, { bounds: this.grapherState.sidePanelBounds }, /* @__PURE__ */ React.createElement(
+      EntitySelector,
+      {
+        manager: this.grapherState,
+        selection: entitySelectorArray
+      }
+    ))), this.grapherState.activeModal === GrapherModal.Sources && this.grapherState.isReady && /* @__PURE__ */ React.createElement(SourcesModal, { manager: this.grapherState }), this.grapherState.activeModal === GrapherModal.Download && this.grapherState.isReady && /* @__PURE__ */ React.createElement(DownloadModal, { manager: this.grapherState }), this.grapherState.activeModal === GrapherModal.Embed && this.grapherState.isReady && /* @__PURE__ */ React.createElement(EmbedModal, { manager: this.grapherState }), this.grapherState.isEntitySelectorModalOpen && /* @__PURE__ */ React.createElement(EntitySelectorModal, { manager: this.grapherState }), /* @__PURE__ */ React.createElement(
+      SlideInDrawer,
+      {
+        grapherRef: this.grapherState.base,
+        active: this.grapherState.isEntitySelectorDrawerOpen,
+        toggle: () => {
+          this.grapherState.isEntitySelectorModalOrDrawerOpen = !this.grapherState.isEntitySelectorModalOrDrawerOpen;
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        EntitySelector,
+        {
+          manager: this.grapherState,
+          selection: entitySelectorArray,
+          autoFocus: true
+        }
+      )
+    ), this.grapherState.shouldPinTooltipToBottom ? /* @__PURE__ */ React.createElement(BodyPortal, null, /* @__PURE__ */ React.createElement(
+      TooltipContainer,
+      {
+        tooltipManager: this.grapherState,
+        anchor: GrapherTooltipAnchor.bottom
+      }
+    )) : /* @__PURE__ */ React.createElement(
+      TooltipContainer,
+      {
+        tooltipManager: this.grapherState,
+        containerBounds: this.grapherState.captionedChartBounds
+      }
+    ));
+  }
+  setUpIntersectionObserver() {
+    if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+      const observer2 = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              flushSync(
+                action(() => {
+                  this.hasBeenVisible = true;
+                })
+              );
+              if (!this.hasLoggedGAViewEvent) {
+                this.hasLoggedGAViewEvent = true;
+                if (this.grapherState.narrativeChartInfo) {
+                  this.grapherState.analytics.logGrapherView(
+                    this.grapherState.narrativeChartInfo.parentChartSlug,
+                    {
+                      narrativeChartName: this.grapherState.narrativeChartInfo.name
+                    }
+                  );
+                  this.hasLoggedGAViewEvent = true;
+                } else if (this.grapherState.slug) {
+                  this.grapherState.analytics.logGrapherView(
+                    this.grapherState.slug
+                  );
+                  this.hasLoggedGAViewEvent = true;
+                }
+              }
+              const tooltip = this.grapherState.tooltip?.get();
+              const isNotVisible = !entry.isIntersecting;
+              const isPartiallyVisible = entry.isIntersecting && entry.intersectionRatio < 0.66;
+              if (tooltip && (isNotVisible || isPartiallyVisible)) {
+                tooltip.dismiss?.();
+              }
+            }
+          });
+        },
+        { threshold: [0, 0.66] }
+      );
+      observer2.observe(this.grapherState.containerElement);
+      this.grapherState.disposers.push(() => observer2.disconnect());
+    } else {
+      this.hasBeenVisible = true;
+    }
+  }
+  setBaseFontSize() {
+    this.grapherState.baseFontSize = this.grapherState.computeBaseFontSizeFromWidth(
+      this.grapherState.captionedChartBounds
+    );
+  }
+  // Binds chart properties to global window title and URL. This should only
+  // ever be invoked from top-level JavaScript.
+  bindToWindow() {
+    const pushParams = () => setWindowQueryStr(queryParamsToStr(this.grapherState.changedParams));
+    const debouncedPushParams = _.debounce(pushParams, 100);
+    reaction(
+      () => this.grapherState.changedParams,
+      () => this.debounceMode ? debouncedPushParams() : pushParams()
+    );
+    autorun(() => document.title = this.grapherState.currentTitle);
+  }
+  setUpWindowResizeEventHandler() {
+    const updateWindowDimensions = action(() => {
+      this.grapherState.windowInnerWidth = window.innerWidth;
+      this.grapherState.windowInnerHeight = window.innerHeight;
+    });
+    const onResize = _.debounce(updateWindowDimensions, 400, {
+      leading: true
+    });
+    if (typeof window !== "undefined") {
+      updateWindowDimensions();
+      window.addEventListener("resize", onResize);
+      this.grapherState.disposers.push(() => {
+        window.removeEventListener("resize", onResize);
+      });
+    }
+  }
+  componentDidMount() {
+    this.setBaseFontSize();
+    this.setUpIntersectionObserver();
+    this.setUpWindowResizeEventHandler();
+    exposeInstanceOnWindow(this, "grapher");
+    this.grapherState.disposers.push(
+      reaction(
+        () => this.grapherState.isReady,
+        () => {
+          if (this.grapherState.isReady) {
+            document.dispatchEvent(
+              new CustomEvent(GRAPHER_LOADED_EVENT_NAME, {
+                detail: { grapher: this }
+              })
+            );
+          }
+        }
+      ),
+      reaction(
+        () => this.grapherState.facetStrategy,
+        () => this.grapherState.focusArray.clear()
+      )
+    );
+    if (this.grapherState.bindUrlToWindow) this.bindToWindow();
+    if (this.grapherState.enableKeyboardShortcuts)
+      this.bindKeyboardShortcuts();
+  }
+  bindKeyboardShortcuts() {
+    if (this._shortcutsBound) return;
+    this.keyboardShortcuts.forEach((shortcut) => {
+      Mousetrap.bind(shortcut.combo, () => {
+        shortcut.fn();
+        this.grapherState.analytics.logKeyboardShortcut(
+          shortcut.title || "",
+          shortcut.combo
+        );
+        return false;
+      });
+    });
+    this._shortcutsBound = true;
+  }
+  unbindKeyboardShortcuts() {
+    if (!this._shortcutsBound) return;
+    this.keyboardShortcuts.forEach((shortcut) => {
+      Mousetrap.unbind(shortcut.combo);
+    });
+    this._shortcutsBound = false;
+  }
+  componentWillUnmount() {
+    this.unbindKeyboardShortcuts();
+    this.dispose();
+  }
+  componentDidUpdate() {
+    this.setBaseFontSize();
+  }
+  componentDidCatch(error) {
+    this.setError(error);
+    this.grapherState.analytics.logGrapherViewError(error);
+  }
+};
+__decorateClass([
+  computed
+], Grapher.prototype, "grapherState", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "_setInputTable", 1);
+__decorateClass([
+  action
+], Grapher.prototype, "rebuildInputChartsTable", 1);
+__decorateClass([
+  bind
+], Grapher.prototype, "dispose", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "setError", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "clearErrors", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "toggleTabCommand", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "togglePlayingCommand", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "toggleTimelineCommand", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "toggleYScaleTypeCommand", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "randomSelection", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "toggleFullScreenMode", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "dismissFullScreen", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "setUpIntersectionObserver", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "setBaseFontSize", 1);
+__decorateClass([
+  action.bound
+], Grapher.prototype, "setUpWindowResizeEventHandler", 1);
+Grapher = __decorateClass([
+  observer
+], Grapher);
+export {
+  DEFAULT_MS_PER_TICK,
+  Grapher
+};

package/dist/grapher/core/Grapher.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/core/Grapher.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport React from \"react\"\n\nimport {\n    observable,\n    computed,\n    action,\n    autorun,\n    reaction,\n    makeObservable,\n} from \"mobx\"\nimport {\n    bind,\n    next,\n    sampleFrom,\n    exposeInstanceOnWindow,\n    QueryParams,\n    MultipleVariableDataDimensionsMap,\n    Bounds,\n    strToQueryParams,\n    queryParamsToStr,\n    setWindowQueryStr,\n} from \"../../utils/index.js\"\nimport { BodyPortal } from \"../../components/index.js\"\nimport {\n    ScaleType,\n    AnnotationFieldsInTitle,\n    GrapherInterface,\n    LegacyGrapherInterface,\n    DetailDictionary,\n    GrapherTooltipAnchor,\n    NarrativeChartInfo,\n    ArchiveContext,\n    AdditionalGrapherDataFetchFn,\n    GrapherVariant,\n    Time,\n} from \"../../types/index.js\"\nimport { ChartsTable } from \"../../core-table/index.js\"\nimport {\n    GRAPHER_LOADED_EVENT_NAME,\n    GrapherModal,\n} from \"../core/GrapherConstants.js\"\n\nimport { FullScreen } from \"../fullScreen/FullScreen.js\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faExclamationTriangle } from \"@fortawesome/free-solid-svg-icons\"\nimport { TooltipContainer } from \"../tooltip/Tooltip.js\"\nimport { EntitySelectorModal } from \"../modal/EntitySelectorModal.js\"\nimport { DownloadModal } from \"../modal/DownloadModal.js\"\nimport { observer } from \"mobx-react\"\nimport \"d3-transition\"\nimport { SourcesModal } from \"../modal/SourcesModal.js\"\nimport { Command, CommandPalette } from \"../controls/CommandPalette.js\"\nimport { EmbedModal } from \"../modal/EmbedModal.js\"\nimport Mousetrap from \"mousetrap\"\nimport { SelectionArray } from \"../selection/SelectionArray.js\"\nimport { legacyToChartsTableAndDimensionsWithMandatorySlug } from \"./LegacyToChartsTable.js\"\nimport classnames from \"classnames\"\nimport { SidePanel } from \"../sidePanel/SidePanel.js\"\nimport { EntitySelector } from \"../entitySelector/EntitySelector.js\"\nimport { SlideInDrawer } from \"../slideInDrawer/SlideInDrawer.js\"\nimport { FocusArray } from \"../focus/FocusArray.js\"\nimport { Chart } from \"../chart/Chart.js\"\nimport { flushSync } from \"react-dom\"\nimport { GrapherState } from \"./GrapherState.js\"\n\ndeclare global {\n    interface Window {\n        details?: DetailDictionary\n        admin?: any // TODO: use stricter type\n    }\n}\n\nexport const DEFAULT_MS_PER_TICK = 100\n\n// Exactly the same as GrapherInterface, but contains options that developers want but authors won't be touching.\nexport interface GrapherProgrammaticInterface extends GrapherInterface {\n    queryStr?: string\n    bounds?: Bounds\n    table?: ChartsTable\n    baseUrl?: string\n    bakedGrapherURL?: string\n    adminBaseUrl?: string\n    env?: string\n    highlightedTimesInLineChart?: Time[]\n    baseFontSize?: number\n    staticBounds?: Bounds\n    variant?: GrapherVariant\n    isDisplayedAlongsideComplementaryTable?: boolean\n\n    hideTitle?: boolean\n    hideSubtitle?: boolean\n    hideNote?: boolean\n    hideOriginUrl?: boolean\n\n    hideEntityControls?: boolean\n    forceHideAnnotationFieldsInTitle?: AnnotationFieldsInTitle\n    hasTableTab?: boolean\n    hideShareButton?: boolean\n    hideExploreTheDataButton?: boolean\n    hideRelatedQuestion?: boolean\n    isSocialMediaExport?: boolean\n    enableMapSelection?: boolean\n\n    enableKeyboardShortcuts?: boolean\n    bindUrlToWindow?: boolean\n    isEmbeddedInPage?: boolean\n    isEmbeddedInADataPage?: boolean\n    isConfigReady?: boolean\n    isDataReady?: boolean\n    canHideExternalControlsInEmbed?: boolean\n\n    narrativeChartInfo?: MinimalNarrativeChartInfo\n    archiveContext?: ArchiveContext\n\n    manager?: GrapherManager\n    additionalDataLoaderFn?: AdditionalGrapherDataFetchFn\n}\n\nexport type MinimalNarrativeChartInfo = Pick<\n    NarrativeChartInfo,\n    \"name\" | \"parentChartSlug\" | \"queryParamsForParentChart\"\n>\n\ninterface AnalyticsContext {\n    mdimSlug?: string\n    mdimViewConfigId?: string\n}\n\nexport interface GrapherManager {\n    baseUrl?: string\n    canonicalUrl?: string\n    selection?: SelectionArray\n    focusArray?: FocusArray\n    adminEditPath?: string\n    adminCreateNarrativeChartPath?: string\n    analyticsContext?: AnalyticsContext\n}\n\nexport interface GrapherProps {\n    grapherState: GrapherState\n}\n\n@observer\nexport class Grapher extends React.Component<GrapherProps> {\n    @computed get grapherState(): GrapherState {\n        return this.props.grapherState\n    }\n\n    // #region Observable props not in any interface\n\n    // stored on Grapher so state is preserved when switching to full-screen mode\n\n    private legacyVariableDataJson:\n        | MultipleVariableDataDimensionsMap\n        | undefined = undefined\n    private hasLoggedGAViewEvent = false\n    private hasBeenVisible = false\n    private uncaughtError: Error | undefined = undefined\n\n    constructor(props: { grapherState: GrapherState }) {\n        super(props)\n\n        makeObservable<\n            Grapher,\n            \"legacyVariableDataJson\" | \"hasBeenVisible\" | \"uncaughtError\"\n        >(this, {\n            legacyVariableDataJson: observable,\n            hasBeenVisible: observable,\n            uncaughtError: observable,\n        })\n    }\n\n    // Convenience method for debugging\n    windowQueryParams(str = location.search): QueryParams {\n        return strToQueryParams(str)\n    }\n\n    @action.bound private _setInputTable(\n        json: MultipleVariableDataDimensionsMap,\n        legacyConfig: Partial<LegacyGrapherInterface>\n    ): void {\n        // TODO grapher model: switch this to downloading multiple data and metadata files\n\n        const startMark = performance.now()\n        const tableWithColors = legacyToChartsTableAndDimensionsWithMandatorySlug(\n            json,\n            legacyConfig.dimensions ?? [],\n            legacyConfig.selectedEntityColors\n        )\n        this.grapherState.createPerformanceMeasurement(\n            \"legacyToChartsTableAndDimensions\",\n            startMark\n        )\n\n        this.grapherState.inputTable = tableWithColors\n    }\n\n    @action rebuildInputChartsTable(): void {\n        // TODO grapher model: switch this to downloading multiple data and metadata files\n        if (!this.legacyVariableDataJson) return\n        this._setInputTable(\n            this.legacyVariableDataJson,\n            this.grapherState.legacyConfigAsAuthored\n        )\n    }\n\n    // Keeps a running cache of series colors at the Grapher level.\n\n    @bind dispose(): void {\n        this.grapherState.disposers.forEach((dispose) => dispose())\n    }\n\n    @action.bound setError(err: Error): void {\n        this.uncaughtError = err\n    }\n\n    @action.bound clearErrors(): void {\n        this.uncaughtError = undefined\n    }\n\n    private get commandPalette(): React.ReactElement | null {\n        return this.props.grapherState.enableKeyboardShortcuts ? (\n            <CommandPalette commands={this.keyboardShortcuts} display=\"none\" />\n        ) : null\n    }\n\n    @action.bound private toggleTabCommand(): void {\n        this.grapherState.setTab(\n            next(this.grapherState.availableTabs, this.grapherState.activeTab)\n        )\n    }\n\n    @action.bound private togglePlayingCommand(): void {\n        void this.grapherState.timelineController.togglePlay()\n    }\n\n    private get keyboardShortcuts(): Command[] {\n        const temporaryFacetTestCommands = _.range(0, 10).map((num) => {\n            return {\n                combo: `${num}`,\n                fn: (): void => this.randomSelection(num),\n            }\n        })\n        const shortcuts = [\n            ...temporaryFacetTestCommands,\n            {\n                combo: \"t\",\n                fn: (): void => this.toggleTabCommand(),\n                title: \"Toggle tab\",\n                category: \"Navigation\",\n            },\n            {\n                combo: \"?\",\n                fn: (): void => CommandPalette.togglePalette(),\n                title: `Toggle Help`,\n                category: \"Navigation\",\n            },\n            {\n                combo: \"a\",\n                fn: (): void => {\n                    if (this.grapherState.selection.hasSelection) {\n                        this.grapherState.selection.clearSelection()\n                        this.grapherState.focusArray.clear()\n                    } else {\n                        this.grapherState.selection.setSelectedEntities(\n                            this.grapherState.availableEntityNames\n                        )\n                    }\n                },\n                title: this.grapherState.selection.hasSelection\n                    ? `Select None`\n                    : `Select All`,\n                category: \"Selection\",\n            },\n            {\n                combo: \"f\",\n                fn: (): void => {\n                    this.grapherState.hideFacetControl =\n                        !this.grapherState.hideFacetControl\n                },\n                title: `Toggle Faceting`,\n                category: \"Chart\",\n            },\n            {\n                combo: \"p\",\n                fn: (): void => this.togglePlayingCommand(),\n                title: this.grapherState.isPlaying ? `Pause` : `Play`,\n                category: \"Timeline\",\n            },\n            {\n                combo: \"l\",\n                fn: (): void => this.toggleYScaleTypeCommand(),\n                title: \"Toggle Y log/linear\",\n                category: \"Chart\",\n            },\n            {\n                combo: \"w\",\n                fn: (): void => this.toggleFullScreenMode(),\n                title: `Toggle full-screen mode`,\n                category: \"Chart\",\n            },\n            {\n                combo: \"s\",\n                fn: (): void => {\n                    const isSourcesModalOpen =\n                        this.grapherState.activeModal === GrapherModal.Sources\n                    this.grapherState.activeModal = isSourcesModalOpen\n                        ? undefined\n                        : GrapherModal.Sources\n                },\n                title: `Toggle sources modal`,\n                category: \"Chart\",\n            },\n            {\n                combo: \"d\",\n                fn: (): void => {\n                    const isDownloadModalOpen =\n                        this.grapherState.activeModal === GrapherModal.Download\n                    this.grapherState.activeModal = isDownloadModalOpen\n                        ? undefined\n                        : GrapherModal.Download\n                },\n                title: \"Toggle download modal\",\n                category: \"Chart\",\n            },\n            { combo: \"esc\", fn: (): void => this.clearErrors() },\n            {\n                combo: \"z\",\n                fn: (): void => this.toggleTimelineCommand(),\n                title: \"Latest/Earliest/All period\",\n                category: \"Timeline\",\n            },\n            {\n                combo: \"shift+o\",\n                fn: (): void => this.grapherState.clearQueryParams(),\n                title: \"Reset to original\",\n                category: \"Navigation\",\n            },\n            {\n                combo: \"g\",\n                fn: (): void => this.grapherState.globeController.toggleGlobe(),\n                title: \"Toggle globe view\",\n                category: \"Map\",\n            },\n        ]\n\n        if (this.grapherState.slideShow) {\n            const slideShow = this.grapherState.slideShow\n            shortcuts.push({\n                combo: \"right\",\n                fn: () => slideShow.playNext(),\n                title: \"Next chart\",\n                category: \"Browse\",\n            })\n            shortcuts.push({\n                combo: \"left\",\n                fn: () => slideShow.playPrevious(),\n                title: \"Previous chart\",\n                category: \"Browse\",\n            })\n        }\n\n        return shortcuts\n    }\n\n    @action.bound private toggleTimelineCommand(): void {\n        // Todo: add tests for this\n        this.grapherState.setTimeFromTimeQueryParam(\n            next([\"latest\", \"earliest\", \"..\"], this.grapherState.timeParam!)\n        )\n    }\n\n    @action.bound private toggleYScaleTypeCommand(): void {\n        this.grapherState.yAxis.scaleType = next(\n            [ScaleType.linear, ScaleType.log],\n            this.grapherState.yAxis.scaleType\n        )\n    }\n\n    @action.bound randomSelection(num: number): void {\n        // Continent, Population, GDP PC, GDP, PopDens, UN, Language, etc.\n        this.clearErrors()\n        const currentSelection =\n            this.grapherState.selection.selectedEntityNames.length\n        const newNum = num ? num : currentSelection ? currentSelection * 2 : 10\n        this.grapherState.selection.setSelectedEntities(\n            sampleFrom(\n                this.grapherState.availableEntityNames,\n                newNum,\n                Date.now()\n            )\n        )\n    }\n    @action.bound toggleFullScreenMode(): void {\n        this.grapherState.isInFullScreenMode =\n            !this.grapherState.isInFullScreenMode\n    }\n\n    @action.bound dismissFullScreen(): void {\n        // if a modal is open, dismiss it instead of exiting full-screen mode\n        if (\n            this.grapherState.isModalOpen ||\n            this.grapherState.isShareMenuActive\n        ) {\n            this.grapherState.isEntitySelectorModalOrDrawerOpen = false\n            this.grapherState.activeModal = undefined\n            this.grapherState.isShareMenuActive = false\n        } else {\n            this.grapherState.isInFullScreenMode = false\n        }\n    }\n\n    private renderError(): React.ReactElement {\n        return (\n            <div\n                title={this.uncaughtError?.message}\n                style={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    position: \"relative\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    justifyContent: \"center\",\n                    textAlign: \"center\",\n                    lineHeight: 1.5,\n                    padding: \"48px\",\n                }}\n            >\n                <p style={{ color: \"#cc0000\", fontWeight: 700 }}>\n                    <FontAwesomeIcon icon={faExclamationTriangle} />\n                    There was a problem loading this chart\n                </p>\n                <p>\n                    We have been notified of this error, please check back later\n                    whether it's been fixed. If the error persists, get in touch\n                    with us at{\" \"}\n                    <a\n                        href={`mailto:info@ourworldindata.org?subject=Broken chart on page ${window.location.href}`}\n                    >\n                        info@ourworldindata.org\n                    </a>\n                    .\n                </p>\n                {this.uncaughtError && this.uncaughtError.message && (\n                    <pre style={{ fontSize: \"11px\" }}>\n                        Error: {this.uncaughtError.message}\n                    </pre>\n                )}\n            </div>\n        )\n    }\n\n    private renderGrapherComponent(): React.ReactElement {\n        const containerClasses = classnames({\n            GrapherComponent: true,\n            GrapherPortraitClass: this.grapherState.isPortrait,\n            isStatic: this.grapherState.isStatic,\n            isExportingToSvgOrPng: this.grapherState.isExportingToSvgOrPng,\n            GrapherComponentNarrow: this.grapherState.isNarrow,\n            GrapherComponentSemiNarrow: this.grapherState.isSemiNarrow,\n            GrapherComponentSmall: this.grapherState.isSmall,\n            GrapherComponentMedium: this.grapherState.isMedium,\n        })\n\n        const containerStyle = {\n            width: this.grapherState.activeBounds.width,\n            height: this.grapherState.activeBounds.height,\n            fontSize: this.grapherState.isExportingToSvgOrPng\n                ? 18\n                : Math.min(16, this.grapherState.fontSize), // cap font size at 16px\n        }\n\n        return (\n            <div\n                ref={this.grapherState.base}\n                className={containerClasses}\n                style={containerStyle}\n                data-grapher-url={JSON.stringify({\n                    grapherUrl: this.grapherState.canonicalUrl,\n                    narrativeChartName:\n                        this.grapherState.narrativeChartInfo?.name,\n                })}\n            >\n                {this.commandPalette}\n                {this.uncaughtError ? this.renderError() : this.renderReady()}\n            </div>\n        )\n    }\n\n    override render(): React.ReactElement | undefined {\n        // Used in the admin to render a static preview of the chart\n        if (this.grapherState.isExportingToSvgOrPng)\n            return <Chart manager={this.grapherState} />\n\n        if (this.grapherState.isInFullScreenMode) {\n            return (\n                <FullScreen\n                    onDismiss={this.dismissFullScreen}\n                    overlayColor={\n                        this.grapherState.isModalOpen ? \"#999999\" : \"#fff\"\n                    }\n                >\n                    {this.renderGrapherComponent()}\n                </FullScreen>\n            )\n        }\n\n        return this.renderGrapherComponent()\n    }\n\n    private renderReady(): React.ReactElement | null {\n        if (!this.hasBeenVisible) return null\n\n        const entitySelectorArray = this.grapherState.isOnMapTab\n            ? this.grapherState.mapConfig.selection\n            : this.grapherState.selection\n\n        return (\n            <>\n                {/* Chart and entity selector */}\n                <div className=\"CaptionedChartAndSidePanel\">\n                    <Chart manager={this.grapherState} />\n\n                    {this.grapherState.sidePanelBounds && (\n                        <SidePanel bounds={this.grapherState.sidePanelBounds}>\n                            <EntitySelector\n                                manager={this.grapherState}\n                                selection={entitySelectorArray}\n                            />\n                        </SidePanel>\n                    )}\n                </div>\n\n                {/* Modals */}\n                {this.grapherState.activeModal === GrapherModal.Sources &&\n                    this.grapherState.isReady && (\n                        <SourcesModal manager={this.grapherState} />\n                    )}\n                {this.grapherState.activeModal === GrapherModal.Download &&\n                    this.grapherState.isReady && (\n                        <DownloadModal manager={this.grapherState} />\n                    )}\n                {this.grapherState.activeModal === GrapherModal.Embed &&\n                    this.grapherState.isReady && (\n                        <EmbedModal manager={this.grapherState} />\n                    )}\n                {this.grapherState.isEntitySelectorModalOpen && (\n                    <EntitySelectorModal manager={this.grapherState} />\n                )}\n\n                {/* Entity selector in a slide-in drawer */}\n                <SlideInDrawer\n                    grapherRef={this.grapherState.base}\n                    active={this.grapherState.isEntitySelectorDrawerOpen}\n                    toggle={() => {\n                        this.grapherState.isEntitySelectorModalOrDrawerOpen =\n                            !this.grapherState.isEntitySelectorModalOrDrawerOpen\n                    }}\n                >\n                    <EntitySelector\n                        manager={this.grapherState}\n                        selection={entitySelectorArray}\n                        autoFocus={true}\n                    />\n                </SlideInDrawer>\n\n                {/* Tooltip: either pin to the bottom or render into the chart area */}\n                {this.grapherState.shouldPinTooltipToBottom ? (\n                    <BodyPortal>\n                        <TooltipContainer\n                            tooltipManager={this.grapherState}\n                            anchor={GrapherTooltipAnchor.bottom}\n                        />\n                    </BodyPortal>\n                ) : (\n                    <TooltipContainer\n                        tooltipManager={this.grapherState}\n                        containerBounds={this.grapherState.captionedChartBounds}\n                    />\n                )}\n            </>\n        )\n    }\n\n    // Chart should only render SVG when it's on the screen\n    @action.bound private setUpIntersectionObserver(): void {\n        if (typeof window !== \"undefined\" && \"IntersectionObserver\" in window) {\n            const observer = new IntersectionObserver(\n                (entries) => {\n                    entries.forEach((entry) => {\n                        if (entry.isIntersecting) {\n                            // We need to render this immediately to avoid a Safari bug, where Safari\n                            // is seemingly blocking rendering during the initial fetches, and will then\n                            // subsequently render using the wrong bounds.\n                            flushSync(\n                                action(() => {\n                                    this.hasBeenVisible = true\n                                })\n                            )\n\n                            if (!this.hasLoggedGAViewEvent) {\n                                this.hasLoggedGAViewEvent = true\n\n                                if (this.grapherState.narrativeChartInfo) {\n                                    this.grapherState.analytics.logGrapherView(\n                                        this.grapherState.narrativeChartInfo\n                                            .parentChartSlug,\n                                        {\n                                            narrativeChartName:\n                                                this.grapherState\n                                                    .narrativeChartInfo.name,\n                                        }\n                                    )\n                                    this.hasLoggedGAViewEvent = true\n                                } else if (this.grapherState.slug) {\n                                    this.grapherState.analytics.logGrapherView(\n                                        this.grapherState.slug\n                                    )\n                                    this.hasLoggedGAViewEvent = true\n                                }\n                            }\n\n                            // dismiss tooltip when less than 2/3 of the chart is visible\n                            const tooltip = this.grapherState.tooltip?.get()\n                            const isNotVisible = !entry.isIntersecting\n                            const isPartiallyVisible =\n                                entry.isIntersecting &&\n                                entry.intersectionRatio < 0.66\n                            if (\n                                tooltip &&\n                                (isNotVisible || isPartiallyVisible)\n                            ) {\n                                tooltip.dismiss?.()\n                            }\n                        }\n                    })\n                },\n                { threshold: [0, 0.66] }\n            )\n            observer.observe(this.grapherState.containerElement!)\n            this.grapherState.disposers.push(() => observer.disconnect())\n        } else {\n            // IntersectionObserver not available; we may be in a Node environment, just render\n            this.hasBeenVisible = true\n        }\n    }\n\n    @action.bound private setBaseFontSize(): void {\n        this.grapherState.baseFontSize =\n            this.grapherState.computeBaseFontSizeFromWidth(\n                this.grapherState.captionedChartBounds\n            )\n    }\n\n    // Binds chart properties to global window title and URL. This should only\n    // ever be invoked from top-level JavaScript.\n    private bindToWindow(): void {\n        // There is a surprisingly considerable performance overhead to updating the url\n        // while animating, so we debounce to allow e.g. smoother timelines\n        const pushParams = (): void =>\n            setWindowQueryStr(queryParamsToStr(this.grapherState.changedParams))\n        const debouncedPushParams = _.debounce(pushParams, 100)\n\n        reaction(\n            () => this.grapherState.changedParams,\n            () => (this.debounceMode ? debouncedPushParams() : pushParams())\n        )\n\n        autorun(() => (document.title = this.grapherState.currentTitle))\n    }\n\n    @action.bound private setUpWindowResizeEventHandler(): void {\n        const updateWindowDimensions = action((): void => {\n            this.grapherState.windowInnerWidth = window.innerWidth\n            this.grapherState.windowInnerHeight = window.innerHeight\n        })\n        const onResize = _.debounce(updateWindowDimensions, 400, {\n            leading: true,\n        })\n\n        if (typeof window !== \"undefined\") {\n            updateWindowDimensions()\n            window.addEventListener(\"resize\", onResize)\n            this.grapherState.disposers.push(() => {\n                window.removeEventListener(\"resize\", onResize)\n            })\n        }\n    }\n\n    override componentDidMount(): void {\n        this.setBaseFontSize()\n        this.setUpIntersectionObserver()\n        this.setUpWindowResizeEventHandler()\n        exposeInstanceOnWindow(this, \"grapher\")\n        // Emit a custom event when the grapher is ready\n        // We can use this in global scripts that depend on the grapher e.g. the site-screenshots tool\n        this.grapherState.disposers.push(\n            reaction(\n                () => this.grapherState.isReady,\n                () => {\n                    if (this.grapherState.isReady) {\n                        document.dispatchEvent(\n                            new CustomEvent(GRAPHER_LOADED_EVENT_NAME, {\n                                detail: { grapher: this },\n                            })\n                        )\n                    }\n                }\n            ),\n            reaction(\n                () => this.grapherState.facetStrategy,\n                () => this.grapherState.focusArray.clear()\n            )\n        )\n        if (this.grapherState.bindUrlToWindow) this.bindToWindow()\n        if (this.grapherState.enableKeyboardShortcuts)\n            this.bindKeyboardShortcuts()\n    }\n\n    private _shortcutsBound = false\n    private bindKeyboardShortcuts(): void {\n        if (this._shortcutsBound) return\n        this.keyboardShortcuts.forEach((shortcut) => {\n            Mousetrap.bind(shortcut.combo, () => {\n                shortcut.fn()\n                this.grapherState.analytics.logKeyboardShortcut(\n                    shortcut.title || \"\",\n                    shortcut.combo\n                )\n                return false\n            })\n        })\n        this._shortcutsBound = true\n    }\n\n    private unbindKeyboardShortcuts(): void {\n        if (!this._shortcutsBound) return\n        this.keyboardShortcuts.forEach((shortcut) => {\n            Mousetrap.unbind(shortcut.combo)\n        })\n        this._shortcutsBound = false\n    }\n\n    override componentWillUnmount(): void {\n        this.unbindKeyboardShortcuts()\n        this.dispose()\n    }\n\n    override componentDidUpdate(): void {\n        this.setBaseFontSize()\n    }\n\n    override componentDidCatch(error: Error): void {\n        this.setError(error)\n        this.grapherState.analytics.logGrapherViewError(error)\n    }\n\n    debounceMode = false\n}\n"],
+  "mappings": "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",
+  "names": ["observer"]
+}