@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/controls/entityPicker/EntityPicker.js

@@ -0,0 +1,694 @@
+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 * as React from "react";
+import * as R from "remeda";
+import {
+  action,
+  computed,
+  observable,
+  runInAction,
+  reaction,
+  makeObservable
+} from "mobx";
+import { observer } from "mobx-react";
+import { Flipper, Flipped } from "react-flip-toolkit";
+import {
+  bind,
+  FuzzySearch,
+  scrollIntoViewIfNeeded,
+  sortByUndefinedLast,
+  getUserCountryInformation,
+  regions,
+  SortOrder,
+  ChartsTableSlugs
+} from "../../../utils/index.js";
+import classnames from "classnames";
+import { scaleLinear } from "d3-scale";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { VerticalScrollContainer } from "../../controls/VerticalScrollContainer.js";
+import { SortIcon } from "../../controls/SortIcon.js";
+import { Dropdown } from "../Dropdown.js";
+import {
+  ColumnTypeMap
+} from "../../../core-table/index.js";
+const toggleSort = (order) => order === SortOrder.desc ? SortOrder.asc : SortOrder.desc;
+var FocusDirection = /* @__PURE__ */ ((FocusDirection2) => {
+  FocusDirection2["first"] = "first";
+  FocusDirection2["last"] = "last";
+  FocusDirection2["up"] = "up";
+  FocusDirection2["down"] = "down";
+  return FocusDirection2;
+})(FocusDirection || {});
+const mod = (n, m) => (n % m + m) % m;
+let EntityPicker = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.searchInput = void 0;
+    this.searchInputRef = React.createRef();
+    this.focusIndex = void 0;
+    this.focusRef = React.createRef();
+    this.scrollFocusedIntoViewOnUpdate = false;
+    this.blockOptionHover = false;
+    this.mostRecentlySelectedEntityName = null;
+    this.scrollContainerRef = React.createRef();
+    this.isOpen = false;
+    this.localEntityNames = void 0;
+    makeObservable(this, {
+      searchInput: observable,
+      searchInputRef: observable,
+      focusIndex: observable,
+      focusRef: observable,
+      scrollFocusedIntoViewOnUpdate: observable,
+      blockOptionHover: observable,
+      mostRecentlySelectedEntityName: observable,
+      scrollContainerRef: observable,
+      isOpen: observable,
+      localEntityNames: observable
+    });
+  }
+  get isDropdownMenu() {
+    return !!this.props.isDropdownMenu;
+  }
+  selectEntity(name, checked) {
+    this.props.selection.toggleSelection(name);
+    if (this.props.selection.selectedSet.has(name)) {
+      this.props.onSelectEntity?.(name);
+    } else {
+      this.props.onDeselectEntity?.(name);
+    }
+    this.searchInput = "";
+    this.manager.analytics?.logEntityPickerEvent(
+      checked ? "select" : "deselect",
+      name
+    );
+    this.mostRecentlySelectedEntityName = name;
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get metric() {
+    return this.manager.entityPickerMetric;
+  }
+  get sortOrder() {
+    if (this.isDropdownMenu) return SortOrder.asc;
+    return this.manager.entityPickerSort ?? SortOrder.asc;
+  }
+  get pickerColumnDefs() {
+    return this.manager.entityPickerColumnDefs ?? [];
+  }
+  get metricOptions() {
+    const entityNameColumn = this.grapherTable?.entityNameColumn;
+    const entityNameColumnInPickerColumnDefs = !!this.pickerColumnDefs.find(
+      (col) => col.slug === entityNameColumn?.slug
+    );
+    return _.compact([
+      { label: "Relevance", value: void 0 },
+      !entityNameColumnInPickerColumnDefs && entityNameColumn && {
+        label: _.upperFirst(this.manager.entityType) || "Name",
+        value: entityNameColumn?.slug
+      },
+      ...this.pickerColumnDefs.map(
+        (col) => {
+          return {
+            label: col.name || col.slug,
+            value: col.slug
+          };
+        }
+      )
+    ]);
+  }
+  get metricDropdownOptions() {
+    return this.metricOptions.map((option) => ({
+      // Use a special string value for undefined metric (relevance)
+      value: option.value ?? "",
+      label: option.label
+    }));
+  }
+  get selectedMetricDropdownOption() {
+    const targetValue = this.metric ?? "";
+    return this.metricDropdownOptions.find(
+      (option) => option.value === targetValue
+    );
+  }
+  get metricTable() {
+    if (this.metric === void 0) return void 0;
+    if (this.metric === ChartsTableSlugs.entityName && this.grapherTable?.has(this.metric))
+      return this.grapherTable;
+    return this.pickerTable;
+  }
+  get activePickerMetricColumn() {
+    return this.metricTable?.get(this.metric);
+  }
+  get availableEntitiesForCurrentView() {
+    if (!this.grapherTable)
+      return new Set(this.manager.availableEntityNames);
+    if (!this.manager.requiredColumnSlugs?.length)
+      return this.grapherTable.availableEntityNameSet;
+    return this.grapherTable.entitiesWith(this.manager.requiredColumnSlugs);
+  }
+  async populateLocalEntity() {
+    try {
+      const localCountryInfo = await getUserCountryInformation();
+      if (!localCountryInfo) return;
+      const userEntityCodes = [
+        localCountryInfo.code,
+        ...localCountryInfo.regions ?? [],
+        "WRL"
+      ];
+      const userRegionNames = _.sortBy(
+        regions.filter(
+          (region) => userEntityCodes.includes(region.code)
+        ),
+        (region) => userEntityCodes.indexOf(region.code)
+      ).map((region) => region.name);
+      if (userRegionNames) this.localEntityNames = userRegionNames;
+    } catch {
+    }
+  }
+  get entitiesWithMetricValue() {
+    const { metricTable, localEntityNames } = this;
+    const col = this.activePickerMetricColumn;
+    const entityNames = this.manager.availableEntityNames?.toSorted() ?? [];
+    return entityNames.map((entityName) => {
+      const plotValue = col && metricTable?.has(col.slug) ? metricTable.getLatestValueForEntity(
+        entityName,
+        col.slug
+      ) : void 0;
+      const formattedValue = plotValue !== void 0 ? col?.formatValueShortWithAbbreviations(plotValue) : void 0;
+      const localEntitiesIndex = localEntityNames?.indexOf(entityName);
+      return {
+        entityName,
+        plotValue,
+        formattedValue,
+        localEntitiesIndex: localEntitiesIndex !== void 0 && localEntitiesIndex >= 0 ? localEntitiesIndex : void 0
+      };
+    });
+  }
+  get grapherTable() {
+    return this.manager.grapherTable;
+  }
+  get pickerTable() {
+    return this.manager.entityPickerTable;
+  }
+  get selection() {
+    return this.props.selection;
+  }
+  get selectionSet() {
+    return new Set(this.selection.selectedEntityNames);
+  }
+  get fuzzy() {
+    return FuzzySearch.withKey(
+      this.entitiesWithMetricValue,
+      (entity) => entity.entityName
+    );
+  }
+  get searchResults() {
+    if (this.searchInput) return this.fuzzy.search(this.searchInput);
+    const { entitiesWithMetricValue, sortOrder, selectionSet } = this;
+    const sorted = sortByUndefinedLast(
+      entitiesWithMetricValue,
+      (option) => option.plotValue,
+      sortOrder
+    );
+    let [selected, unselected] = _.partition(
+      sorted,
+      (option) => selectionSet.has(option.entityName)
+    );
+    if (this.metric === void 0) {
+      unselected = sortByUndefinedLast(
+        unselected,
+        (option) => option.localEntitiesIndex
+      );
+    }
+    return [...selected, ...unselected];
+  }
+  normalizeFocusIndex(index) {
+    if (this.searchResults.length === 0) return void 0;
+    return mod(index, this.searchResults.length);
+  }
+  get focusedOption() {
+    return this.focusIndex !== void 0 ? this.searchResults[this.focusIndex].entityName : void 0;
+  }
+  get showDoneButton() {
+    return this.isDropdownMenu && this.isOpen;
+  }
+  focusOptionDirection(direction) {
+    if (direction === "first" /* first */)
+      this.focusIndex = this.normalizeFocusIndex(0);
+    else if (direction === "last" /* last */)
+      this.focusIndex = this.normalizeFocusIndex(-1);
+    else if (direction === "up" /* up */) {
+      const newIndex = this.focusIndex === void 0 ? -1 : this.focusIndex - 1;
+      this.focusIndex = this.normalizeFocusIndex(newIndex);
+    } else if (direction === "down" /* down */) {
+      const newIndex = this.focusIndex === void 0 ? 0 : this.focusIndex + 1;
+      this.focusIndex = this.normalizeFocusIndex(newIndex);
+    } else return;
+    this.scrollFocusedIntoViewOnUpdate = true;
+  }
+  clearSearchInput() {
+    if (this.searchInput) this.searchInput = "";
+  }
+  onKeyDown(event) {
+    this.blockHover();
+    switch (event.key) {
+      case "Enter": {
+        if (event.keyCode === 229) {
+          break;
+        }
+        if (!this.focusedOption) return;
+        const name = this.focusedOption;
+        this.selectEntity(name);
+        this.clearSearchInput();
+        this.manager.analytics?.logEntityPickerEvent("enter", name);
+        break;
+      }
+      case "ArrowUp":
+        this.focusOptionDirection("up" /* up */);
+        break;
+      case "ArrowDown":
+        this.focusOptionDirection("down" /* down */);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  }
+  focusSearch() {
+    this.searchInputRef.current?.focus();
+  }
+  onSearchFocus() {
+    this.isOpen = true;
+    if (this.focusIndex === void 0)
+      this.focusOptionDirection("first" /* first */);
+  }
+  onSearchBlur() {
+    if (this.scrollContainerRef.current && this.scrollContainerRef.current.contains(document.activeElement)) {
+      this.focusSearch();
+      return;
+    }
+    this.isOpen = false;
+    this.focusIndex = void 0;
+  }
+  onHover(index) {
+    if (!this.blockOptionHover) this.focusIndex = index;
+  }
+  blockHover() {
+    this.blockOptionHover = true;
+  }
+  unblockHover() {
+    this.blockOptionHover = false;
+  }
+  onMenuMouseDown(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.focusSearch();
+  }
+  highlightLabel(label) {
+    if (!this.searchInput) return label;
+    const result = this.fuzzy.single(this.searchInput, label);
+    if (!result) return label;
+    const tokens = [];
+    for (let i = 0; i < result.target.length; i++) {
+      const currentToken = R.last(tokens);
+      const match = result.indexes.includes(i);
+      const char = result.target[i];
+      if (!currentToken || currentToken.match !== match) {
+        tokens.push({
+          match,
+          text: char
+        });
+      } else currentToken.text += char;
+    }
+    return /* @__PURE__ */ React.createElement("span", { translate: "no" }, tokens.map(
+      (token, i) => token.match ? /* @__PURE__ */ React.createElement("mark", { key: i }, token.text) : /* @__PURE__ */ React.createElement("span", { key: i }, token.text)
+    ));
+  }
+  get barScale() {
+    const maxValue = _.max(
+      this.entitiesWithMetricValue.map((option) => option.plotValue).filter(_.isNumber)
+    );
+    return scaleLinear().domain([0, maxValue ?? 1]).range([0, 1]);
+  }
+  componentDidMount() {
+    reaction(
+      () => this.searchInput,
+      () => this.focusOptionDirection("first" /* first */)
+    );
+    void this.populateLocalEntity();
+  }
+  componentDidUpdate() {
+    if (this.focusIndex !== void 0 && this.scrollFocusedIntoViewOnUpdate && this.scrollContainerRef.current && this.focusRef.current) {
+      scrollIntoViewIfNeeded(
+        this.scrollContainerRef.current,
+        this.focusRef.current
+      );
+      runInAction(() => this.scrollFocusedIntoViewOnUpdate = false);
+    }
+  }
+  onMetricSelectionChange(option) {
+    if (!option) return;
+    const columnSlug = option.value === "" ? void 0 : option.value;
+    this.updateMetric(columnSlug);
+  }
+  updateMetric(columnSlug) {
+    const col = this.pickerTable?.get(columnSlug);
+    this.manager.setEntityPicker?.({
+      metric: columnSlug,
+      sort: this.isColumnTypeNumeric(columnSlug, col) ? SortOrder.desc : SortOrder.asc
+    });
+    this.manager.analytics?.logEntityPickerEvent("sortBy", columnSlug);
+  }
+  isColumnTypeNumeric(columnSlug, col) {
+    return (
+      // If columnSlug is undefined, we're sorting by relevance, which is (mostly) by country name.
+      // If the column is currently missing (not loaded yet), assume it is numeric.
+      columnSlug !== void 0 && columnSlug !== ChartsTableSlugs.entityName && (col === void 0 || col.isMissing || col instanceof ColumnTypeMap.Numeric)
+    );
+  }
+  get pickerMenu() {
+    if (this.isDropdownMenu) return null;
+    return /* @__PURE__ */ React.createElement("div", { className: "MetricSettings" }, /* @__PURE__ */ React.createElement("label", { id: "metric-dropdown-label", className: "mainLabel" }, "Sort by"), /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        className: "metricDropdown",
+        options: this.metricDropdownOptions,
+        value: this.selectedMetricDropdownOption ?? null,
+        onChange: this.onMetricSelectionChange,
+        isLoading: this.manager.entityPickerTableIsLoading,
+        "aria-labelledby": "metric-dropdown-label"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "sort",
+        onClick: () => {
+          const sortOrder = toggleSort(this.sortOrder);
+          this.manager.setEntityPicker?.({
+            metric: this.metric,
+            sort: sortOrder
+          });
+          this.manager.analytics?.logEntityPickerEvent(
+            "sortOrder",
+            sortOrder
+          );
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        SortIcon,
+        {
+          type: this.isColumnTypeNumeric(
+            this.metric,
+            this.activePickerMetricColumn
+          ) ? "numeric" : "text",
+          order: this.sortOrder
+        }
+      )
+    ));
+  }
+  render() {
+    const { selection } = this;
+    const { entityType } = this.manager;
+    const entities = this.searchResults;
+    const selectedEntityNames = selection.selectedEntityNames;
+    const availableEntities = this.availableEntitiesForCurrentView;
+    const selectedDebugMessage = `${selectedEntityNames.length} selected. ${availableEntities.size} available. ${this.entitiesWithMetricValue.length} options total.`;
+    return /* @__PURE__ */ React.createElement("div", { className: "EntityPicker" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "EntityPickerSearchInput",
+        onKeyDown: this.onKeyDown
+      },
+      /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          className: classnames("input-field", {
+            "with-done-button": this.showDoneButton
+          }),
+          type: "text",
+          placeholder: `Type to add a ${entityType}...`,
+          value: this.searchInput ?? "",
+          onChange: (e) => this.searchInput = e.currentTarget.value,
+          onFocus: this.onSearchFocus,
+          onBlur: this.onSearchBlur,
+          ref: this.searchInputRef,
+          "data-track-note": "entity_picker_search_input"
+        }
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "search-icon" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faSearch })),
+      this.showDoneButton && /* @__PURE__ */ React.createElement("div", { className: "done" }, /* @__PURE__ */ React.createElement("button", null, "Done"))
+    ), this.pickerMenu, /* @__PURE__ */ React.createElement("div", { className: "EntityListContainer", onKeyDown: this.onKeyDown }, (!this.isDropdownMenu || this.isOpen) && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames("EntityList", {
+          isDropdown: this.isDropdownMenu
+        }),
+        onMouseDown: this.onMenuMouseDown
+      },
+      /* @__PURE__ */ React.createElement(
+        VerticalScrollContainer,
+        {
+          scrollingShadows: true,
+          scrollLock: true,
+          className: "EntitySearchResults",
+          contentsId: entities.map((c) => c.entityName).join(","),
+          onMouseMove: this.unblockHover,
+          ref: this.scrollContainerRef
+        },
+        /* @__PURE__ */ React.createElement(
+          Flipper,
+          {
+            spring: {
+              stiffness: 300,
+              damping: 33
+            },
+            flipKey: selectedEntityNames.join(",")
+          },
+          entities.map((option, index) => /* @__PURE__ */ React.createElement(
+            PickerOption,
+            {
+              key: index,
+              hasDataForActiveMetric: availableEntities.has(
+                option.entityName
+              ),
+              optionWithMetricValue: option,
+              highlight: this.highlightLabel,
+              barScale: this.barScale,
+              onChange: this.selectEntity,
+              onHover: () => this.onHover(index),
+              isSelected: this.selectionSet.has(
+                option.entityName
+              ),
+              isFocused: this.focusIndex === index,
+              innerRef: this.focusIndex === index ? this.focusRef : void 0,
+              className: this.mostRecentlySelectedEntityName === option.entityName ? "most-recently-selected" : void 0
+            }
+          ))
+        )
+      ),
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          title: selectedDebugMessage,
+          className: "ClearSelectionButton",
+          "data-track-note": "entity_picker_clear_selection",
+          onClick: () => {
+            selection.clearSelection();
+            this.props.onClearEntities?.();
+          }
+        },
+        /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faTimes }),
+        " Clear selection"
+      ))
+    )));
+  }
+};
+__decorateClass([
+  computed
+], EntityPicker.prototype, "isDropdownMenu", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "selectEntity", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "manager", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "metric", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "sortOrder", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "pickerColumnDefs", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "metricOptions", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "metricDropdownOptions", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "selectedMetricDropdownOption", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "metricTable", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "activePickerMetricColumn", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "availableEntitiesForCurrentView", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "populateLocalEntity", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "entitiesWithMetricValue", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "grapherTable", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "pickerTable", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "selection", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "selectionSet", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "fuzzy", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "searchResults", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "focusedOption", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "showDoneButton", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "focusOptionDirection", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "clearSearchInput", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onKeyDown", 1);
+__decorateClass([
+  bind
+], EntityPicker.prototype, "focusSearch", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onSearchFocus", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onSearchBlur", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onHover", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "blockHover", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "unblockHover", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onMenuMouseDown", 1);
+__decorateClass([
+  bind
+], EntityPicker.prototype, "highlightLabel", 1);
+__decorateClass([
+  computed
+], EntityPicker.prototype, "barScale", 1);
+__decorateClass([
+  action.bound
+], EntityPicker.prototype, "onMetricSelectionChange", 1);
+__decorateClass([
+  action
+], EntityPicker.prototype, "updateMetric", 1);
+EntityPicker = __decorateClass([
+  observer
+], EntityPicker);
+class PickerOption extends React.Component {
+  onClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.props.onChange(
+      this.props.optionWithMetricValue.entityName,
+      !this.props.isSelected
+    );
+  }
+  render() {
+    const {
+      barScale,
+      optionWithMetricValue,
+      innerRef,
+      isSelected,
+      isFocused,
+      hasDataForActiveMetric,
+      highlight,
+      className
+    } = this.props;
+    const { entityName, plotValue, formattedValue } = optionWithMetricValue;
+    const metricValue = formattedValue === entityName ? "" : formattedValue;
+    return /* @__PURE__ */ React.createElement(Flipped, { flipId: entityName, translate: true, opacity: true }, /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        className: classnames(
+          "EntityPickerOption",
+          className,
+          {
+            selected: isSelected,
+            focused: isFocused,
+            "local-country": optionWithMetricValue.localEntitiesIndex !== void 0
+          },
+          hasDataForActiveMetric ? void 0 : "MissingData"
+        ),
+        onMouseMove: this.props.onHover,
+        onMouseOver: this.props.onHover,
+        onClick: this.onClick,
+        ref: innerRef
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "checkbox",
+          checked: isSelected,
+          value: entityName,
+          tabIndex: -1,
+          readOnly: true
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "info-container" }, /* @__PURE__ */ React.createElement("div", { className: "labels-container" }, /* @__PURE__ */ React.createElement("div", { className: "name" }, highlight(entityName)), plotValue !== void 0 && /* @__PURE__ */ React.createElement("div", { className: "metric" }, metricValue)), barScale && _.isNumber(plotValue) ? /* @__PURE__ */ React.createElement("div", { className: "plot" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "bar",
+          style: {
+            width: `${barScale(plotValue) * 100}%`
+          }
+        }
+      )) : /* @__PURE__ */ React.createElement("div", { className: "plot" }))
+    ));
+  }
+}
+__decorateClass([
+  bind
+], PickerOption.prototype, "onClick", 1);
+export {
+  EntityPicker
+};