Fix remaining compilation errors.

src/Charts/Scales.js

@@ -14,11 +14,11 @@ const Scales = {
   /**
    * Calculates the appropriate d3 scales.
    *
-   * @param  {Size} size Dimensions of plot area, as returned by Size class.
-   * @param  {Object} [domain] Optional, object containing [minimum, maximum] arrays for each axis.
+   * @param  {Object} size Dimensions of plot area, as returned by Size class.
+   * @param  {Object} domain Optional, object containing [minimum, maximum] arrays for each axis.
    * @param  {Number[]} domain.x [x-minimum, x-maximum].
    * @param  {Object} domain.y An object whose keys are units ("undefined" for unknown), values being [y-minimum, y-maximum].
-   * @param  {ChartData[]} data The data for each line. This is required to extract units. Also if no domain is provided, it is calculated from the data.
+   * @param  {Object[]} data The data for each line. This is required to extract units. Also if no domain is provided, it is calculated from the data.
    * @return {Object} {x, y: { [unit1], [unit2] ... }} where values are D3-scale objects.
    */
   calculate(size, domain, data, xPadding = 0) {
@@ -172,8 +172,8 @@ const Scales = {
 
   /**
    * Return the automatically-generated tick values, but with the last one removed if it is too close to the end.
-   * @param  {d3.scale} scale The scale along which to calculate the tick values.
-   * @param  {Integer} numberOfTicks Number of ticks.
+   * @param  {Object} scale The scale along which to calculate the tick values.
+   * @param  {Number} numberOfTicks Number of ticks.
    * @return {Array} Tick values.
    */
   truncatedTickValues(scale, numberOfTicks) {

src/Core/loadText.js

@@ -1,6 +1,6 @@
 import { Resource } from "cesium";
 
-function loadText(urlOrResource, headers) {
+function loadText(urlOrResource, headers = undefined) {
   var resource = Resource.createIfNeeded(urlOrResource);
   return resource.fetchText({
     headers: headers

src/ReactViews/BottomDock/Timeline/DateTimePicker.tsx

@@ -9,7 +9,7 @@ import {
 import { observer } from "mobx-react";
 import moment from "moment";
 import React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
+import { TFunction } from "react-i18next";
 import styled from "styled-components";
 import isDefined from "../../../Core/isDefined";
 import {
@@ -21,6 +21,7 @@ import { scrollBars } from "../../../Styled/mixins";
 import Spacing from "../../../Styled/Spacing";
 import Icon from "../../../Styled/Icon";
 import { formatDateTime } from "./DateFormats";
+import workingWithTranslation from "../../workingWithTranslation";
 
 const dateFormat = require("dateformat");
 const DatePicker = require("react-datepicker").default;
@@ -141,7 +142,7 @@ export const DateButton = styled(Button).attrs({
   border-radius: 4px;
 `;
 
-interface PropsType extends WithTranslation {
+interface PropsType {
   dates: ObjectifiedDates;
   currentDate?: Date; // JS Date object - must be an element of props.dates, or null/undefined.
   onChange: (date: Date) => void;
@@ -150,6 +151,7 @@ interface PropsType extends WithTranslation {
   onOpen: () => void;
   onClose: () => void;
   dateFormat?: string;
+  t: TFunction;
 }
 
 type Granularity = "century" | "year" | "month" | "day" | "time" | "hour";
@@ -732,4 +734,4 @@ class DateTimePicker extends React.Component<PropsType> {
   }
 }
 
-export default withTranslation()(DateTimePicker);
+export default workingWithTranslation(DateTimePicker);

src/ReactViews/BottomDock/Timeline/Timeline.jsx

@@ -12,6 +12,7 @@ import { formatDateTime } from "./DateFormats";
 import DateTimePicker from "./DateTimePicker";
 import Styles from "./timeline.scss";
 import TimelineControls from "./TimelineControls";
+import workingWithTranslation from "../../workingWithTranslation";
 
 @observer
 class Timeline extends React.Component {
@@ -130,4 +131,4 @@ class Timeline extends React.Component {
   }
 }
 
-export default withControlledVisibility(withTranslation()(Timeline));
+export default withControlledVisibility(workingWithTranslation(Timeline));

src/ReactViews/Custom/Chart/ChartExpandAndDownloadButtons.tsx

@@ -11,10 +11,11 @@ import Terria from "../../../Models/Terria";
 import Icon from "../../../Styled/Icon";
 import UrlTraits from "../../../Traits/TraitsClasses/UrlTraits";
 import Styles from "./chart-expand-and-download-buttons.scss";
+import workingWithTranslation from "../../workingWithTranslation";
 
 const Dropdown = require("../../Generic/Dropdown");
 
-interface PropsType extends WithTranslation {
+interface PropsType {
   terria: Terria;
   sourceItems: Promise<ChartableMixin.Instance | undefined>[]; // Array of items or Promise returning item
   sourceNames?: string[];
@@ -212,4 +213,4 @@ const ExpandAndDownloadButtons = function (props: {
   );
 };
 
-export default withTranslation()(ChartExpandAndDownloadButtons);
+export default workingWithTranslation(ChartExpandAndDownloadButtons);

src/ReactViews/DataCatalog/DataCatalog.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { observer } from "mobx-react";
+
+import { useTranslation } from "react-i18next";
+
+import { defined } from "cesium";
+
+import DataCatalogMember from "./DataCatalogMember";
+import SearchHeader from "../Search/SearchHeader";
+
+import Styles from "./data-catalog.scss";
+import Terria from "../../Models/Terria";
+import ViewState from "../../ReactViewModels/ViewState";
+import { BaseModel } from "../../Models/Definition/Model";
+import SearchProvider from "../../Models/SearchProviders/SearchProvider";
+
+interface PropsType {
+  terria: Terria;
+  viewState: ViewState;
+  items: BaseModel[];
+  onActionButtonClicked?: () => void;
+  removable: boolean;
+}
+
+interface ItemRenderDetails {
+  isSearching: boolean;
+  catalogSearchProvider: SearchProvider | undefined;
+}
+
+function renderItem(
+  props: PropsType,
+  details: ItemRenderDetails,
+  item: BaseModel | undefined
+) {
+  if (!item || item === props.terria.catalog.userAddedDataGroup)
+    return undefined;
+
+  return (
+    <DataCatalogMember
+      viewState={props.viewState}
+      member={item}
+      // manage group `isOpen` flag locally if searching through models dynamically (i.e. not using catalog index)
+      // This must be false if resultsAreReferences - so group references open correctly in the search
+      manageIsOpenLocally={
+        details.isSearching &&
+        !details.catalogSearchProvider?.resultsAreReferences
+      }
+      key={item.uniqueId}
+      onActionButtonClicked={props.onActionButtonClicked}
+      removable={props.removable}
+      terria={props.terria}
+      isTopLevel={true}
+    />
+  );
+}
+
+// Displays the data catalog.
+
+const DataCatalog: React.FC<PropsType> = observer((props: PropsType) => {
+  const searchState = props.viewState.searchState;
+  const isSearching = searchState.catalogSearchText.length > 0;
+  const catalogSearchProvider = searchState.catalogSearchProvider;
+  const unfilteredItems =
+    isSearching &&
+    catalogSearchProvider &&
+    searchState.catalogSearchResults?.results
+      ? searchState.catalogSearchResults.results.map(
+          (result) => result.catalogItem
+        )
+      : props.items;
+  const items = (unfilteredItems || []).filter(defined);
+
+  const { t } = useTranslation();
+
+  return (
+    <ul className={Styles.dataCatalog}>
+      {isSearching && catalogSearchProvider
+        ? [
+            <label className={Styles.label}>{t("search.resultsLabel")}</label>,
+            <SearchHeader
+              searchResults={catalogSearchProvider}
+              isWaitingForSearchToStart={
+                searchState.isWaitingToStartCatalogSearch
+              }
+            />
+          ]
+        : undefined}
+      {items.map((item) =>
+        renderItem(props, { isSearching, catalogSearchProvider }, item)
+      )}
+    </ul>
+  );
+});
+
+export default DataCatalog;

src/ReactViews/FeatureInfo/FeatureInfoPanel.tsx

@@ -3,7 +3,7 @@ import { TFunction } from "i18next";
 import { action, reaction, runInAction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
-import { withTranslation } from "react-i18next";
+import { useTranslation, withTranslation } from "react-i18next";
 import { Cartesian3 } from "cesium";
 import { Ellipsoid } from "cesium";
 import { Math as CesiumMath } from "cesium";
@@ -33,6 +33,7 @@ import { withViewState } from "../StandardUserInterface/ViewStateContext";
 import Styles from "./feature-info-panel.scss";
 import FeatureInfoCatalogItem from "./FeatureInfoCatalogItem";
 import DragWrapper from "../DragWrapper";
+import workingWithTranslation from "../workingWithTranslation";
 
 interface Props {
   viewState: ViewState;
@@ -465,4 +466,4 @@ function recurseIntoMembers(catalogItem: BaseModel): BaseModel[] {
 }
 
 export { FeatureInfoPanel };
-export default withTranslation()(withViewState(FeatureInfoPanel));
+export default workingWithTranslation(withViewState(FeatureInfoPanel));

src/ReactViews/FeatureInfo/FeatureInfoSection.tsx

@@ -48,6 +48,8 @@ import {
   mustacheURLEncodeText,
   mustacheURLEncodeTextComponent
 } from "./mustacheExpressions";
+import workingWithTranslation from "../workingWithTranslation";
+import ViewState from "../../ReactViewModels/ViewState";
 
 // We use Mustache templates inside React views, where React does the escaping; don't escape twice, or eg. " => "
 Mustache.escape = function (string) {
@@ -526,4 +528,4 @@ const ButtonsContainer = styled.div`
   padding: 7px 0 10px 0;
 `;
 
-export default withTranslation()(withViewState(FeatureInfoSection));
+export default workingWithTranslation(withViewState(FeatureInfoSection));

src/ReactViews/Loader.tsx

@@ -1,19 +1,19 @@
 import { TFunction } from "i18next";
 import React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import Box from "../Styled/Box";
 import { TextSpan } from "../Styled/Text";
 import AnimatedSpinnerIcon from "../Styled/AnimatedSpinnerIcon";
 
-export interface PropsType extends WithTranslation {
+export interface PropsType {
   message?: string;
   boxProps?: any;
   textProps?: any;
-  t: TFunction;
   [spread: string]: any;
 }
 const Loader: React.FC<PropsType> = (props: PropsType) => {
-  const { message, t, boxProps, textProps, ...rest }: PropsType = props;
+  const { t } = useTranslation();
+  const { message, boxProps, textProps, ...rest }: PropsType = props;
   return (
     <Box fullWidth centered {...boxProps}>
       <AnimatedSpinnerIcon styledWidth={"15px"} css={"margin: 5px"} {...rest} />
@@ -24,4 +24,4 @@ const Loader: React.FC<PropsType> = (props: PropsType) => {
   );
 };
 
-export default withTranslation()(Loader);
+export default Loader;

src/ReactViews/Map/Panels/HelpPanel/HelpPanelItem.jsx

@@ -12,6 +12,7 @@ import Icon, { StyledIcon } from "../../../../Styled/Icon";
 import Text from "../../../../Styled/Text";
 import { applyTranslationIfExists } from "./../../../../Language/languageHelpers";
 import HelpVideoPanel from "./HelpVideoPanel";
+import workingWithTranslation from "../../../workingWithTranslation";
 
 @observer
 class HelpPanelItem extends React.Component {
@@ -135,4 +136,4 @@ const MenuItemText = styled(Text).attrs({
   text-align: left;
 `;
 
-export default withTranslation()(withTheme(HelpPanelItem));
+export default workingWithTranslation(withTheme(HelpPanelItem));

src/ReactViews/Map/Panels/HelpPanel/HelpVideoPanel.jsx

@@ -12,6 +12,7 @@ import VideoGuide from "./VideoGuide";
 import TrainerPane from "./TrainerPane";
 import StyledHtml from "./StyledHtml";
 import SatelliteGuide from "../../../Guide/SatelliteGuide";
+import workingWithTranslation from "../../../workingWithTranslation";
 
 const HELP_VIDEO_NAME = "helpVideo";
 
@@ -127,4 +128,4 @@ class HelpVideoPanel extends React.Component {
   }
 }
 
-export default withTranslation()(withTheme(HelpVideoPanel));
+export default workingWithTranslation(withTheme(HelpVideoPanel));