@buildcanada/charts 0.3.7 → 0.3.8

package/dist/explorer/Explorer.js

@@ -0,0 +1,996 @@
+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 { faChartLine } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  ColumnTypeNames,
+  GRAPHER_TAB_QUERY_PARAMS
+} from "../types/index.js";
+import {
+  BlankChartsTable,
+  extractPotentialDataSlugsFromTransform
+} from "../core-table/index.js";
+import {
+  EntityPicker,
+  Grapher,
+  SelectionArray,
+  setSelectedEntityNamesParam,
+  SlideShowController,
+  DEFAULT_GRAPHER_ENTITY_TYPE,
+  GrapherAnalytics,
+  GrapherState,
+  fetchInputTableForConfig,
+  loadVariableDataAndMetadata
+} from "../grapher/index.js";
+import {
+  Bounds,
+  DimensionProperty,
+  excludeUndefined,
+  exposeInstanceOnWindow,
+  isInIFrame,
+  keyMap,
+  mergeGrapherConfigs,
+  omitUndefinedValues,
+  parseIntOrUndefined,
+  PromiseCache,
+  PromiseSwitcher,
+  setWindowUrl,
+  Tippy,
+  Url
+} from "../utils/index.js";
+import { MarkdownTextWrap } from "../components/index.js";
+import classNames from "classnames";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { ExplorerControlBar, ExplorerControlPanel } from "./ExplorerControls.js";
+import { ExplorerProgram } from "./ExplorerProgram.js";
+import {
+  ExplorerChartCreationMode,
+  ExplorerContainerId,
+  EXPLORERS_PREVIEW_ROUTE,
+  EXPLORERS_ROUTE_FOLDER,
+  UNSAVED_EXPLORER_DRAFT,
+  UNSAVED_EXPLORER_PREVIEW_QUERYPARAMS
+} from "./ExplorerConstants.js";
+import {
+  explorerUrlMigrationsById,
+  migrateExplorerUrl
+} from "./urlMigrations/ExplorerUrlMigrations.js";
+const LivePreviewComponent = (props) => {
+  const [useLocalStorage, setUseLocalStorage] = useState(true);
+  const [renderedProgram, setRenderedProgram] = useState("");
+  const [hasLocalStorage, setHasLocalStorage] = useState(false);
+  const updateProgram = useCallback(() => {
+    const localStorageProgram = localStorage.getItem(
+      UNSAVED_EXPLORER_DRAFT + props.slug
+    );
+    let program;
+    if (useLocalStorage) program = localStorageProgram ?? props.program;
+    else program = props.program;
+    setHasLocalStorage(!!localStorageProgram);
+    setRenderedProgram((previousProgram) => {
+      if (program === previousProgram) return previousProgram;
+      return program;
+    });
+  }, [props.program, props.slug, useLocalStorage]);
+  useEffect(() => {
+    updateProgram();
+    const interval = setInterval(updateProgram, 1e3);
+    return () => clearInterval(interval);
+  }, [updateProgram]);
+  const newProps = { ...props, program: renderedProgram };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasLocalStorage && /* @__PURE__ */ React.createElement("div", { className: "admin-only-locally-edited-checkbox" }, /* @__PURE__ */ React.createElement(
+    Tippy,
+    {
+      content: /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "Checked"), ": Use the explorer version with changes as present in the admin."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "Unchecked"), ": Use the currently-saved version."), /* @__PURE__ */ React.createElement("hr", null), /* @__PURE__ */ React.createElement("p", null, "Note that some features may only work correctly when this checkbox is unchecked: in particular, using ", /* @__PURE__ */ React.createElement("kbd", null, "catalogPath"), "s and ", /* @__PURE__ */ React.createElement("kbd", null, "grapherId"), "s and variable IDs.")),
+      placement: "bottom"
+    },
+    /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        id: "useLocalStorage",
+        onChange: (e) => setUseLocalStorage(e.target.checked),
+        checked: useLocalStorage
+      }
+    ), "Display locally edited explorer")
+  )), /* @__PURE__ */ React.createElement(
+    Explorer,
+    {
+      ...newProps,
+      queryStr: window?.location?.search ?? "",
+      key: Date.now(),
+      isPreview: true
+    }
+  ));
+};
+const renderLivePreviewVersion = (props) => {
+  const elem = document.getElementById(ExplorerContainerId);
+  if (!elem) throw new Error("ExplorerContainerId not found in DOM");
+  const root = createRoot(elem);
+  root.render(/* @__PURE__ */ React.createElement(LivePreviewComponent, { ...props }));
+};
+const isNarrow = () => typeof window === "undefined" ? false : window.screen.width < 450 || document.documentElement.clientWidth <= 800;
+let Explorer = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.analytics = new GrapherAnalytics();
+    this.inputTableTransformer = (table) => table;
+    this.initialQueryParams = Url.fromQueryStr(this.props.queryStr ?? "").queryParams;
+    this.explorerProgram = ExplorerProgram.fromJson(this.props).initDecisionMatrix(
+      this.initialQueryParams
+    );
+    this.bakedBaseUrl = this.props.bakedBaseUrl;
+    this.dataApiUrl = this.props.dataApiUrl;
+    this.adminBaseUrl = this.props.adminBaseUrl;
+    this.bakedGrapherUrl = this.props.bakedGrapherUrl;
+    this.selection = this.props.selection?.hasSelection ? this.props.selection : new SelectionArray(this.explorerProgram.selection);
+    this.entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE;
+    // We want to ensure that unavailable entity are shown in the explorer entity
+    // that's why we employ an append-only version of `grapher.availableEntityNames`
+    this.appendOnlyAvailableEntityNames = /* @__PURE__ */ new Set();
+    this.grapher = void 0;
+    this.disposers = [];
+    this.persistedGrapherQueryParamsBySelectedRow = /* @__PURE__ */ new Map();
+    this.futureGrapherTable = new PromiseSwitcher({
+      onResolve: (table) => this.setGrapherTable(table),
+      onReject: (error) => this.grapher?.setError(error)
+    });
+    this.tableLoader = new PromiseCache(
+      (slug) => this.explorerProgram.constructTable(slug)
+    );
+    this.onChangeChoice = (choiceTitle) => async (value) => {
+      const { currentlySelectedGrapherRow } = this.explorerProgram;
+      this.explorerProgram.decisionMatrix.setValueCommand(choiceTitle, value);
+      if (currentlySelectedGrapherRow)
+        await this.reactToUserChangingSelection(currentlySelectedGrapherRow);
+    };
+    this.isNarrow = this.props.forceWideMode ? false : isNarrow();
+    this.grapherContainerRef = React.createRef();
+    this.grapherRef = React.createRef();
+    this.showMobileControlsPopup = false;
+    this.entityPickerMetric = this.initialQueryParams.pickerMetric;
+    this.entityPickerSort = this.initialQueryParams.pickerSort;
+    this.entityPickerTable = void 0;
+    this.entityPickerTableIsLoading = false;
+    this.futureEntityPickerTable = new PromiseSwitcher({
+      onResolve: (table) => {
+        this.entityPickerTable = table;
+        this.entityPickerTableIsLoading = false;
+      },
+      onReject: () => {
+        this.entityPickerTableIsLoading = false;
+      }
+    });
+    makeObservable(this, {
+      appendOnlyAvailableEntityNames: observable,
+      grapher: observable.ref,
+      isNarrow: observable,
+      grapherContainerRef: observable,
+      grapherRef: observable.ref,
+      showMobileControlsPopup: observable,
+      entityPickerMetric: observable,
+      entityPickerSort: observable,
+      entityPickerTable: observable.ref,
+      entityPickerTableIsLoading: observable.ref
+    });
+    this.explorerProgram = ExplorerProgram.fromJson(
+      props
+    ).initDecisionMatrix(this.initialQueryParams);
+    const { archiveContext } = props;
+    const isOnArchivalPage = archiveContext?.type === "archive-page";
+    const assetMaps = isOnArchivalPage ? archiveContext?.assets : void 0;
+    this.isOnArchivalPage = isOnArchivalPage;
+    this.grapherState = new GrapherState({
+      staticBounds: props.staticBounds,
+      bounds: props.bounds,
+      enableKeyboardShortcuts: this.props.isInStandalonePage,
+      manager: this,
+      isEmbeddedInPage: this.props.isEmbeddedInPage,
+      adminBaseUrl: this.adminBaseUrl,
+      canHideExternalControlsInEmbed: true,
+      archiveContext: props.archiveContext,
+      additionalDataLoaderFn: (varId, loadMetadataOnly) => loadVariableDataAndMetadata(varId, this.dataApiUrl, {
+        assetMap: assetMaps?.runtime,
+        noCache: props.isPreview,
+        loadMetadataOnly
+      })
+    });
+    if (props.setupGrapher !== false)
+      this.grapher = new Grapher({ grapherState: this.grapherState });
+  }
+  // caution: do a ctrl+f to find untyped usages
+  static renderSingleExplorerOnExplorerPage(program, grapherConfigs, partialGrapherConfigs, explorerConstants, urlMigrationSpec, archiveContext) {
+    const props = {
+      ...program,
+      ...explorerConstants,
+      grapherConfigs,
+      partialGrapherConfigs,
+      isEmbeddedInPage: false,
+      isInStandalonePage: true,
+      archiveContext
+    };
+    if (window.location.href.includes(EXPLORERS_PREVIEW_ROUTE)) {
+      renderLivePreviewVersion(props);
+      return;
+    }
+    let url = Url.fromURL(window.location.href);
+    if (urlMigrationSpec) {
+      const { explorerUrlMigrationId, baseQueryStr } = urlMigrationSpec;
+      const migration = explorerUrlMigrationsById[explorerUrlMigrationId];
+      if (migration) {
+        url = migration.migrateUrl(url, baseQueryStr);
+      } else {
+        console.error(
+          `No explorer URL migration with id ${explorerUrlMigrationId}`
+        );
+      }
+    }
+    url = migrateExplorerUrl(url);
+    setWindowUrl(url);
+    const elem = document.getElementById(ExplorerContainerId);
+    if (!elem) throw new Error("ExplorerContainerId not found in DOM");
+    const root = createRoot(elem);
+    root.render(/* @__PURE__ */ React.createElement(Explorer, { ...props, queryStr: url.queryStr }));
+  }
+  setGrapher(grapher) {
+    this.grapher = grapher;
+  }
+  // Note: Can't use @computed here because this.props isn't observable in mobx-react
+  get grapherConfigs() {
+    const arr = this.props.grapherConfigs || [];
+    return new Map(arr.map((config) => [config.id, config]));
+  }
+  // Note: Can't use @computed here because this.props isn't observable in mobx-react
+  get partialGrapherConfigsByVariableId() {
+    const arr = this.props.partialGrapherConfigs || [];
+    return new Map(arr.map((config) => [config.id, config]));
+  }
+  get partialGrapherConfigsBySlug() {
+    const configsBySlug = /* @__PURE__ */ new Map();
+    for (const columnDef of this.explorerProgram.columnDefsWithoutTableSlug) {
+      if (columnDef.transform?.startsWith("duplicate")) {
+        const indicatorId = +columnDef.transform.replace("duplicate", "").trim();
+        const partialGrapherConfig = this.partialGrapherConfigsByVariableId.get(indicatorId);
+        if (partialGrapherConfig)
+          configsBySlug.set(columnDef.slug, partialGrapherConfig);
+      }
+    }
+    return configsBySlug;
+  }
+  setUpIntersectionObserver() {
+    if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+      const observer2 = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.analytics.logExplorerView(
+              this.explorerProgram.slug,
+              this.explorerProgram.decisionMatrix.currentParams
+            );
+            observer2.disconnect();
+          }
+        });
+      });
+      observer2.observe(this.grapherContainerRef.current);
+      this.disposers.push(() => observer2.disconnect());
+    }
+  }
+  async componentDidMount() {
+    this.setGrapher(this.grapherRef.current);
+    let url = Url.fromQueryParams({
+      ...this.initialQueryParams,
+      ...this.currentChoiceParams
+      // Needed for Grapher's embedArchivedUrl.
+    });
+    if (this.props.selection?.hasSelection) {
+      url = setSelectedEntityNamesParam(
+        url,
+        this.props.selection.selectedEntityNames
+      );
+    }
+    void this.updateGrapherFromExplorer();
+    this.grapherState.populateFromQueryParams(url.queryParams);
+    exposeInstanceOnWindow(this, "explorer");
+    this.setUpIntersectionObserver();
+    this.attachEventListeners();
+    this.updateEntityPickerTable();
+  }
+  attachEventListeners() {
+    if (typeof window !== "undefined" && "ResizeObserver" in window) {
+      const onResizeThrottled = _.debounce(this.onResize, 200, {
+        leading: true
+      });
+      const resizeObserver = new ResizeObserver(onResizeThrottled);
+      resizeObserver.observe(this.grapherContainerRef.current);
+      this.disposers.push(() => {
+        resizeObserver.disconnect();
+      });
+    } else if (typeof window === "object" && typeof document === "object") {
+      console.warn(
+        "ResizeObserver not available; the explorer will not be responsive to window resizes"
+      );
+      this.onResize();
+    }
+    this.disposers.push(
+      reaction(
+        () => [
+          this.entityPickerMetric,
+          this.explorerProgram.explorerGrapherConfig.tableSlug
+        ],
+        () => this.updateEntityPickerTable()
+      )
+    );
+    this.disposers.push(
+      reaction(
+        () => this.grapherState.availableEntityNames,
+        (availableEntityNames) => {
+          availableEntityNames?.forEach(
+            (entity) => this.appendOnlyAvailableEntityNames.add(entity)
+          );
+        }
+      )
+    );
+    if (this.props.isInStandalonePage) this.bindToWindow();
+  }
+  componentWillUnmount() {
+    this.disposers.forEach((dispose) => dispose());
+  }
+  initSlideshow() {
+    if (this.grapherState.slideShow) return;
+    this.grapherState.slideShow = new SlideShowController(
+      this.explorerProgram.decisionMatrix.allDecisionsAsQueryParams(),
+      0,
+      this
+    );
+  }
+  async reactToUserChangingSelection(oldSelectedRow) {
+    if (!this.explorerProgram.currentlySelectedGrapherRow) return;
+    this.initSlideshow();
+    const oldGrapherParams = this.grapherState.changedParams;
+    this.persistedGrapherQueryParamsBySelectedRow.set(
+      oldSelectedRow,
+      oldGrapherParams
+    );
+    const newGrapherParams = {
+      ...this.currentChoiceParams,
+      // Needed for Grapher's embedArchivedUrl.
+      ...this.persistedGrapherQueryParamsBySelectedRow.get(
+        this.explorerProgram.currentlySelectedGrapherRow
+      ),
+      country: oldGrapherParams.country,
+      region: oldGrapherParams.region,
+      time: this.grapherState.timeParam
+    };
+    const previousTab = this.grapherState.activeTab;
+    await this.updateGrapherFromExplorer();
+    newGrapherParams.tab = this.grapherState.mapGrapherTabToQueryParam(previousTab);
+    if (newGrapherParams.tab !== GRAPHER_TAB_QUERY_PARAMS.map) {
+      newGrapherParams.globe = "0";
+      newGrapherParams.mapSelect = "";
+    }
+    this.grapherState.populateFromQueryParams(newGrapherParams);
+    const currentTab = this.grapherState.activeTab;
+    if (previousTab !== currentTab)
+      this.grapherState.onChartSwitching(previousTab, currentTab);
+    this.analytics.logExplorerView(
+      this.explorerProgram.slug,
+      this.explorerProgram.decisionMatrix.currentParams
+    );
+  }
+  setGrapherTable(table) {
+    this.grapherState.inputTable = this.inputTableTransformer(table);
+  }
+  get availableEntityNames() {
+    const entityNameSet = this.appendOnlyAvailableEntityNames;
+    return Array.from(entityNameSet);
+  }
+  get enableMapSelection() {
+    return !this.isNarrow;
+  }
+  async updateGrapherFromExplorer() {
+    switch (this.explorerProgram.chartCreationMode) {
+      case ExplorerChartCreationMode.FromGrapherId:
+        return this.updateGrapherFromExplorerUsingGrapherId();
+      case ExplorerChartCreationMode.FromVariableIds:
+        return this.updateGrapherFromExplorerUsingVariableIds();
+      case ExplorerChartCreationMode.FromExplorerTableColumnSlugs:
+        return this.updateGrapherFromExplorerUsingColumnSlugs();
+    }
+  }
+  get columnDefsWithoutTableSlugByIdOrSlug() {
+    const { columnDefsWithoutTableSlug } = this.explorerProgram;
+    return _.keyBy(
+      columnDefsWithoutTableSlug,
+      (def) => def.variableId ?? def.slug
+    );
+  }
+  // gets the slugs of all base and intermediate columns that a
+  // transformed column depends on; for example, if a column's transform
+  // is 'divideBy 170775 other_slug' and 'other_slug' is also a transformed
+  // column defined by 'multiplyBy 539022 2', then this function
+  // returns ['539022', '170775', 'other_slug']
+  getBaseColumnsForColumnWithTransform(slug) {
+    const def = this.columnDefsWithoutTableSlugByIdOrSlug[slug];
+    if (!def?.transform) return [];
+    const dataSlugs = extractPotentialDataSlugsFromTransform(def.transform) ?? [];
+    return dataSlugs.flatMap((dataSlug) => [
+      ...this.getBaseColumnsForColumnWithTransform(dataSlug),
+      dataSlug
+    ]);
+  }
+  // gets the IDs of all variables that a transformed column depends on;
+  // for example, if a there are two columns, 'slug' and 'other_slug', that
+  // are defined by the transforms 'divideBy 170775 other_slug' and 'multiplyBy 539022 2',
+  // respectively, then getBaseVariableIdsForColumnWithTransform('slug')
+  // returns ['539022', '170775'] as these are the IDs of the two variables
+  // that the 'slug' column depends on
+  getBaseVariableIdsForColumnWithTransform(slug) {
+    const { columnDefsWithoutTableSlug } = this.explorerProgram;
+    const baseVariableIdsAndColumnSlugs = this.getBaseColumnsForColumnWithTransform(slug);
+    const slugsInColumnBlock = columnDefsWithoutTableSlug.filter((def) => !def.variableId).map((def) => def.slug);
+    return baseVariableIdsAndColumnSlugs.filter(
+      (variableIdOrColumnSlug) => !slugsInColumnBlock.includes(variableIdOrColumnSlug)
+    );
+  }
+  async updateGrapherFromExplorerUsingGrapherId() {
+    const grapherState = this.grapherState;
+    const { grapherId } = this.explorerProgram.explorerGrapherConfig;
+    const grapherConfig = this.grapherConfigs.get(grapherId);
+    if (!grapherConfig) {
+      if (this.props.throwOnMissingGrapher) {
+        throw new Error(`Grapher config not found for ID: ${grapherId}`);
+      }
+    }
+    const finalGrapherConfig = grapherConfig ?? {};
+    const config = {
+      ...mergeGrapherConfigs(
+        finalGrapherConfig,
+        this.explorerProgram.grapherConfig
+      ),
+      baseUrl: this.baseUrl,
+      bakedGrapherURL: this.bakedBaseUrl,
+      adminBaseUrl: this.adminBaseUrl,
+      hideEntityControls: this.showExplorerControls,
+      enableMapSelection: this.enableMapSelection
+    };
+    if (this.selection.hasSelection) {
+      config.selectedEntityNames = this.selection.selectedEntityNames;
+    }
+    grapherState.setAuthoredVersion(config);
+    grapherState.reset();
+    grapherState.inputTable = BlankChartsTable();
+    grapherState.updateFromObject(config);
+    if (!config.table) {
+      const loadFn = this.props.loadInputTableForConfig ?? fetchInputTableForConfig;
+      const inputTable = loadFn({
+        dimensions: config.dimensions,
+        selectedEntityColors: config.selectedEntityColors,
+        dataApiUrl: this.props.dataApiUrl,
+        archiveContext: this.props.archiveContext,
+        noCache: this.props.isPreview,
+        loadMetadataOnly: this.props.loadMetadataOnly
+      }).then((dataTable) => dataTable ? dataTable : BlankChartsTable());
+      await this.futureGrapherTable.set(inputTable);
+    } else {
+      grapherState.inputTable = this.inputTableTransformer(config.table);
+    }
+  }
+  async updateGrapherFromExplorerUsingVariableIds() {
+    const grapherState = this.grapherState;
+    const {
+      yVariableIds = "",
+      xVariableId,
+      colorVariableId,
+      sizeVariableId,
+      ySlugs = "",
+      xSlug,
+      colorSlug,
+      sizeSlug
+    } = this.explorerProgram.explorerGrapherConfig;
+    const yVariableIdsList = yVariableIds.split(" ").map(parseIntOrUndefined).filter((item) => item !== void 0);
+    const ySlugList = ySlugs.split(" ");
+    const partialGrapherConfig = this.partialGrapherConfigsByVariableId.get(yVariableIdsList[0]) ?? // if ySlug references a column that duplicates an indicator via the
+    // `duplicate` transform, make sure the partial grapher config for
+    // that indicator is pulled in
+    this.partialGrapherConfigsBySlug.get(ySlugList[0]) ?? {};
+    const config = {
+      ...mergeGrapherConfigs(
+        partialGrapherConfig,
+        this.explorerProgram.grapherConfig
+      ),
+      bakedGrapherURL: this.bakedBaseUrl,
+      adminBaseUrl: this.adminBaseUrl,
+      hideEntityControls: this.showExplorerControls,
+      enableMapSelection: this.enableMapSelection
+    };
+    if (this.selection.hasSelection) {
+      config.selectedEntityNames = this.selection.selectedEntityNames;
+    }
+    const dimensions = config.dimensions?.slice() ?? [];
+    yVariableIdsList.forEach((yVariableId) => {
+      dimensions.push({
+        variableId: yVariableId,
+        property: DimensionProperty.y
+      });
+    });
+    if (xVariableId) {
+      const maybeXVariableId = parseIntOrUndefined(xVariableId);
+      if (maybeXVariableId !== void 0)
+        dimensions.push({
+          variableId: maybeXVariableId,
+          property: DimensionProperty.x
+        });
+    }
+    if (colorVariableId) {
+      const maybeColorVariableId = parseIntOrUndefined(colorVariableId);
+      if (maybeColorVariableId !== void 0)
+        dimensions.push({
+          variableId: maybeColorVariableId,
+          property: DimensionProperty.color
+        });
+    }
+    if (sizeVariableId) {
+      const maybeSizeVariableId = parseIntOrUndefined(sizeVariableId);
+      if (maybeSizeVariableId !== void 0)
+        dimensions.push({
+          variableId: maybeSizeVariableId,
+          property: DimensionProperty.size
+        });
+    }
+    const uniqueSlugsInGrapherRow = _.uniq(
+      [...ySlugs.split(" "), xSlug, colorSlug, sizeSlug].filter(
+        _.identity
+      )
+    );
+    if (uniqueSlugsInGrapherRow.length) {
+      const baseVariableIds = _.uniq(
+        uniqueSlugsInGrapherRow.flatMap(
+          (slug) => this.getBaseVariableIdsForColumnWithTransform(slug)
+        )
+      ).map((id) => parseInt(id, 10)).filter((id) => !isNaN(id));
+      baseVariableIds.forEach((variableId) => {
+        const hasDimension = dimensions.some(
+          (d) => d.variableId === variableId
+        );
+        if (!hasDimension) {
+          dimensions.push({
+            variableId,
+            property: DimensionProperty.table
+            // no specific dimension
+          });
+        }
+      });
+    }
+    config.dimensions = dimensions;
+    if (ySlugs && yVariableIds) config.ySlugs = ySlugs + " " + yVariableIds;
+    this.inputTableTransformer = (table) => {
+      if (uniqueSlugsInGrapherRow.length) {
+        const allColumnSlugs = _.uniq(
+          uniqueSlugsInGrapherRow.flatMap((slug) => [
+            ...this.getBaseColumnsForColumnWithTransform(slug),
+            slug
+          ])
+        );
+        const existingColumnSlugs = table.columnSlugs;
+        const outstandingColumnSlugs = allColumnSlugs.filter(
+          (slug) => !existingColumnSlugs.includes(slug)
+        );
+        const requiredColumnDefs = outstandingColumnSlugs.map(
+          (slug) => this.columnDefsWithoutTableSlugByIdOrSlug[slug]
+        ).filter(_.identity);
+        table = table.appendColumns(requiredColumnDefs);
+      }
+      table = table.updateDefs((def) => {
+        const manuallyProvidedDef = this.columnDefsWithoutTableSlugByIdOrSlug[def.slug] ?? {};
+        const mergedDef = { ...def, ...manuallyProvidedDef };
+        mergedDef.display ??= {};
+        if (manuallyProvidedDef.name)
+          mergedDef.display.name = manuallyProvidedDef.name;
+        if (manuallyProvidedDef.unit)
+          mergedDef.display.unit = manuallyProvidedDef.unit;
+        if (manuallyProvidedDef.shortUnit)
+          mergedDef.display.shortUnit = manuallyProvidedDef.shortUnit;
+        return mergedDef;
+      });
+      return table;
+    };
+    grapherState.setAuthoredVersion(config);
+    grapherState.reset();
+    grapherState.updateFromObject(config);
+    if (dimensions.length === 0) {
+      grapherState.inputTable = BlankChartsTable();
+    } else {
+      const loadFn = this.props.loadInputTableForConfig ?? fetchInputTableForConfig;
+      const inputTable = loadFn({
+        dimensions: config.dimensions,
+        selectedEntityColors: config.selectedEntityColors,
+        archiveContext: this.props.archiveContext,
+        dataApiUrl: this.props.dataApiUrl,
+        noCache: this.props.isPreview,
+        loadMetadataOnly: this.props.loadMetadataOnly
+      }).then((dataTable) => dataTable ? dataTable : BlankChartsTable());
+      await this.futureGrapherTable.set(inputTable);
+    }
+  }
+  async updateGrapherFromExplorerUsingColumnSlugs() {
+    const grapherState = this.grapherState;
+    const { tableSlug } = this.explorerProgram.explorerGrapherConfig;
+    const config = {
+      ...this.explorerProgram.grapherConfig,
+      bakedGrapherURL: this.bakedBaseUrl,
+      adminBaseUrl: this.adminBaseUrl,
+      hideEntityControls: this.showExplorerControls,
+      enableMapSelection: this.enableMapSelection
+    };
+    if (this.selection.hasSelection) {
+      config.selectedEntityNames = this.selection.selectedEntityNames;
+    }
+    grapherState.setAuthoredVersion(config);
+    grapherState.reset();
+    grapherState.updateFromObject(config);
+    this.grapher?.clearErrors();
+    this.setGrapherTable(
+      BlankChartsTable(tableSlug, `Loading table '${tableSlug}'`)
+    );
+    await this.futureGrapherTable.set(this.tableLoader.get(tableSlug));
+  }
+  setSlide(choiceParams) {
+    this.explorerProgram.decisionMatrix.setValuesFromChoiceParams(
+      choiceParams
+    );
+  }
+  get currentChoiceParams() {
+    const { decisionMatrix } = this.explorerProgram;
+    return decisionMatrix.currentParams;
+  }
+  get queryParams() {
+    if (typeof window !== "undefined" && window.location.href.includes(EXPLORERS_PREVIEW_ROUTE))
+      localStorage.setItem(
+        UNSAVED_EXPLORER_PREVIEW_QUERYPARAMS + this.explorerProgram.slug,
+        JSON.stringify(this.currentChoiceParams)
+      );
+    let url = Url.fromQueryParams(
+      omitUndefinedValues({
+        ...this.grapherState.changedParams,
+        pickerSort: this.entityPickerSort,
+        pickerMetric: this.entityPickerMetric,
+        hideControls: this.initialQueryParams.hideControls || void 0,
+        ...this.currentChoiceParams
+      })
+    );
+    url = setSelectedEntityNamesParam(
+      url,
+      this.selection.hasSelection ? this.selection.selectedEntityNames : void 0
+    );
+    return url.queryParams;
+  }
+  get currentUrl() {
+    if (this.props.isPreview) return Url.fromQueryParams(this.queryParams);
+    return Url.fromURL(window.location.href).setQueryParams(
+      this.queryParams
+    );
+  }
+  bindToWindow() {
+    const pushParams = () => setWindowUrl(Url.fromQueryParams(this.queryParams));
+    const debouncedPushParams = _.debounce(pushParams, 100);
+    this.disposers.push(
+      reaction(
+        () => this.queryParams,
+        () => this.grapher?.debounceMode ? debouncedPushParams() : pushParams()
+      )
+    );
+  }
+  get panels() {
+    return this.explorerProgram.decisionMatrix.choicesWithAvailability.map(
+      (choice) => /* @__PURE__ */ React.createElement(
+        ExplorerControlPanel,
+        {
+          key: choice.title,
+          explorerSlug: this.explorerProgram.slug,
+          choice,
+          onChange: this.onChangeChoice(choice.title),
+          isMobile: this.isNarrow
+        }
+      )
+    );
+  }
+  renderHeaderElement() {
+    return /* @__PURE__ */ React.createElement("div", { className: "ExplorerHeaderBox" }, /* @__PURE__ */ React.createElement("div", { className: "ExplorerTitle" }, this.explorerProgram.explorerTitle, " Data Explorer"), /* @__PURE__ */ React.createElement("div", { className: "ExplorerSubtitle" }, /* @__PURE__ */ React.createElement(
+      MarkdownTextWrap,
+      {
+        fontSize: 12,
+        text: this.explorerProgram.explorerSubtitle || ""
+      }
+    )), this.explorerProgram.downloadDataLink && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: this.explorerProgram.downloadDataLink,
+        className: "ExplorerDownloadLink"
+      },
+      "Download this dataset"
+    ));
+  }
+  get isInIFrame() {
+    return isInIFrame();
+  }
+  get showExplorerControls() {
+    if (!this.props.isEmbeddedInPage && !this.isInIFrame) return true;
+    return !(this.explorerProgram.hideControls || this.initialQueryParams.hideControls === "true");
+  }
+  get downloadDataLink() {
+    return this.explorerProgram.downloadDataLink;
+  }
+  renderControlBar() {
+    return /* @__PURE__ */ React.createElement(
+      ExplorerControlBar,
+      {
+        isMobile: this.isNarrow,
+        showControls: this.showMobileControlsPopup,
+        closeControls: this.closeControls
+      },
+      this.panels
+    );
+  }
+  renderEntityPicker() {
+    const selection = this.grapherState.isOnMapTab && this.enableMapSelection ? this.grapherState.mapConfig.selection : this.selection;
+    return /* @__PURE__ */ React.createElement(
+      EntityPicker,
+      {
+        key: "entityPicker",
+        manager: this,
+        selection,
+        onSelectEntity: this.grapherState.onSelectEntity,
+        onDeselectEntity: this.grapherState.onDeselectEntity,
+        onClearEntities: this.grapherState.onClearEntities,
+        isDropdownMenu: this.isNarrow
+      }
+    );
+  }
+  toggleMobileControls() {
+    this.showMobileControlsPopup = !this.showMobileControlsPopup;
+  }
+  onResize() {
+    if (this.grapherContainerRef.current?.offsetParent === null) return;
+    const oldIsNarrow = this.isNarrow;
+    this.isNarrow = this.props.forceWideMode ? false : isNarrow();
+    this.updateGrapherBounds();
+    if (this.isNarrow !== oldIsNarrow)
+      window.setTimeout(() => this.updateGrapherBounds(), 0);
+  }
+  // Todo: add better logic to maximize the size of the Grapher
+  updateGrapherBounds() {
+    const grapherContainer = this.grapherContainerRef.current;
+    if (grapherContainer)
+      this.grapherState.externalBounds = new Bounds(
+        0,
+        0,
+        grapherContainer.clientWidth,
+        grapherContainer.clientHeight
+      );
+  }
+  get mobileCustomizeButton() {
+    return /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: "btn btn-primary mobile-button",
+        onClick: this.toggleMobileControls,
+        "data-track-note": "explorer_customize_chart_mobile"
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faChartLine }),
+      " Customize chart"
+    );
+  }
+  closeControls() {
+    this.showMobileControlsPopup = false;
+  }
+  get showHeaderElement() {
+    return this.showExplorerControls && this.explorerProgram.explorerTitle && this.panels.length > 0;
+  }
+  render() {
+    const { showExplorerControls, showHeaderElement } = this;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames({
+          Explorer: true,
+          "mobile-explorer": this.isNarrow,
+          HideControls: !showExplorerControls,
+          "is-embed": this.props.isEmbeddedInPage
+        })
+      },
+      showHeaderElement && this.renderHeaderElement(),
+      showHeaderElement && this.renderControlBar(),
+      showExplorerControls && this.renderEntityPicker(),
+      showExplorerControls && this.isNarrow && this.mobileCustomizeButton,
+      /* @__PURE__ */ React.createElement("div", { className: "ExplorerFigure", ref: this.grapherContainerRef }, /* @__PURE__ */ React.createElement(
+        Grapher,
+        {
+          ref: this.grapherRef,
+          grapherState: this.grapherState
+        }
+      ))
+    );
+  }
+  get editUrl() {
+    return `${EXPLORERS_ROUTE_FOLDER}/${this.props.slug}`;
+  }
+  get baseUrl() {
+    let archiveUrl = void 0;
+    if (this.isOnArchivalPage) {
+      archiveUrl = this.props.archiveContext?.archiveUrl;
+    }
+    return archiveUrl ?? `${this.bakedBaseUrl}/${EXPLORERS_ROUTE_FOLDER}/${this.props.slug}`;
+  }
+  get canonicalUrl() {
+    return this.props.canonicalUrl ?? Url.fromURL(this.baseUrl).setQueryParams(this.queryParams).fullUrl;
+  }
+  get grapherTable() {
+    return this.grapherState?.tableAfterAuthorTimelineAndEntityFilter;
+  }
+  updateEntityPickerTable() {
+    const tableSlugToLoad = this.entityPickerMetric ? this.getTableSlugOfColumnSlug(this.entityPickerMetric) : this.explorerProgram.explorerGrapherConfig.tableSlug;
+    this.entityPickerTableIsLoading = true;
+    void this.futureEntityPickerTable.set(
+      this.tableLoader.get(tableSlugToLoad)
+    );
+  }
+  setEntityPicker({
+    metric,
+    sort
+  }) {
+    this.entityPickerMetric = metric;
+    if (sort) this.entityPickerSort = sort;
+  }
+  tableSlugHasColumnSlug(tableSlug, columnSlug, columnDefsByTableSlug) {
+    return !!columnDefsByTableSlug.get(tableSlug)?.find((def) => def.slug === columnSlug);
+  }
+  getTableSlugOfColumnSlug(columnSlug) {
+    const columnDefsByTableSlug = this.explorerProgram.columnDefsByTableSlug;
+    const grapherTableSlug = this.explorerProgram.explorerGrapherConfig.tableSlug;
+    if (this.tableSlugHasColumnSlug(
+      grapherTableSlug,
+      columnSlug,
+      columnDefsByTableSlug
+    )) {
+      return grapherTableSlug;
+    }
+    return this.explorerProgram.tableSlugs.find(
+      (tableSlug) => this.tableSlugHasColumnSlug(
+        tableSlug,
+        columnSlug,
+        columnDefsByTableSlug
+      )
+    );
+  }
+  get entityPickerColumnDefs() {
+    const allColumnDefs = _.uniqBy(
+      Array.from(
+        this.explorerProgram.columnDefsByTableSlug.values()
+      ).flat(),
+      (def) => def.slug
+    );
+    if (this.explorerProgram.pickerColumnSlugs) {
+      const columnDefsBySlug = keyMap(allColumnDefs, (def) => def.slug);
+      return excludeUndefined(
+        this.explorerProgram.pickerColumnSlugs.map(
+          (slug) => columnDefsBySlug.get(slug)
+        )
+      );
+    } else {
+      const discardColumnTypes = /* @__PURE__ */ new Set([
+        ColumnTypeNames.Year,
+        ColumnTypeNames.Date,
+        ColumnTypeNames.Day,
+        ColumnTypeNames.EntityId,
+        ColumnTypeNames.EntityCode
+      ]);
+      return allColumnDefs.filter(
+        (def) => (def.type === void 0 || !discardColumnTypes.has(def.type)) && def.slug !== void 0
+      );
+    }
+  }
+  get requiredColumnSlugs() {
+    return this.grapherState?.newSlugs ?? [];
+  }
+};
+__decorateClass([
+  action.bound
+], Explorer.prototype, "setGrapher", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "partialGrapherConfigsBySlug", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "reactToUserChangingSelection", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "setGrapherTable", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "availableEntityNames", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "enableMapSelection", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "updateGrapherFromExplorer", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "columnDefsWithoutTableSlugByIdOrSlug", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "updateGrapherFromExplorerUsingGrapherId", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "updateGrapherFromExplorerUsingVariableIds", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "updateGrapherFromExplorerUsingColumnSlugs", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "setSlide", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "currentChoiceParams", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "queryParams", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "currentUrl", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "isInIFrame", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "showExplorerControls", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "downloadDataLink", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "toggleMobileControls", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "onResize", 1);
+__decorateClass([
+  action.bound
+], Explorer.prototype, "closeControls", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "showHeaderElement", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "editUrl", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "baseUrl", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "canonicalUrl", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "grapherTable", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "entityPickerColumnDefs", 1);
+__decorateClass([
+  computed
+], Explorer.prototype, "requiredColumnSlugs", 1);
+Explorer = __decorateClass([
+  observer
+], Explorer);
+export {
+  Explorer
+};