Tsify mapColumn

CHANGES.md

@@ -239,6 +239,8 @@
 - Fix `SearchBoxAndResults` Trans values
 - Fix `generateCatalogIndex` for nested references
 - Fix `SearchBox` handling of `searchWithDebounce` when `debounceDuration` prop changes. It now fushes instead of cancels.
+- Move map credits to map column so it don't get hidden by chart panel
+- [The next improvement]
 
 #### 8.2.10 - 2022-08-02
 

lib/Models/Terria.ts

@@ -70,7 +70,7 @@ import TimeVarying from "../ModelMixins/TimeVarying";
 import { HelpContentItem } from "../ReactViewModels/defaultHelpContent";
 import { defaultTerms, Term } from "../ReactViewModels/defaultTerms";
 import NotificationState from "../ReactViewModels/NotificationState";
-import { ICredit } from "../ReactViews/Credits";
+import { ICredit } from "../ReactViews/Map/BottomBar/Credits";
 import { SHARE_VERSION } from "../ReactViews/Map/Panels/SharePanel/BuildShareLink";
 import { shareConvertNotification } from "../ReactViews/Notification/shareConvertNotification";
 import MappableTraits from "../Traits/TraitsClasses/MappableTraits";

lib/ReactViewModels/MouseCoords.ts

@@ -79,12 +79,13 @@ export default class MouseCoords {
     );
   }
 
-  @action
+  @action.bound
   toggleUseProjection() {
     this.useProjection = !this.useProjection;
     this.updateEvent.raiseEvent();
   }
 
+  @action
   updateCoordinatesFromCesium(terria: Terria, position: Cartesian2) {
     if (!terria.cesium) {
       return;
@@ -187,6 +188,7 @@ export default class MouseCoords {
     }
   }
 
+  @action
   updateCoordinatesFromLeaflet(terria: Terria, mouseMoveEvent: MouseEvent) {
     if (!terria.leaflet) {
       return;

lib/ReactViews/ActionBar/ActionBar.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import styled from "styled-components";
 import Box from "../../Styled/Box";
 import { PortalChild } from "../StandardUserInterface/Portal";
-import { useViewState } from "../StandardUserInterface/ViewStateContext";
+import { useViewState } from "../Context";
 import { ActionBarPortalId } from "./ActionBarPortal";
 
 /**

lib/ReactViews/BottomDock/BottomDock.tsx

@@ -10,13 +10,13 @@ import Styles from "./bottom-dock.scss";
 import ChartDisclaimer from "./ChartDisclaimer";
 import Timeline from "./Timeline/Timeline";
 
-interface PropsType extends MeasureElementProps {
+interface PropsType {
   terria: Terria;
   viewState: ViewState;
 }
 
 @observer
-class BottomDock extends React.Component<PropsType> {
+class BottomDock extends React.Component<PropsType & MeasureElementProps> {
   refToMeasure: HTMLDivElement | null = null;
 
   handleClick() {
@@ -25,7 +25,7 @@ class BottomDock extends React.Component<PropsType> {
     });
   }
 
-  componentDidUpdate(prevProps: PropsType) {
+  componentDidUpdate(prevProps: PropsType & MeasureElementProps) {
     if (
       prevProps.heightFromMeasureElementHOC !==
       this.props.heightFromMeasureElementHOC

lib/ReactViews/StandardUserInterface/ContextProviders.tsx → lib/ReactViews/Context/ContextProviders.tsx

@@ -3,7 +3,7 @@ import { DefaultTheme, ThemeProvider } from "styled-components";
 import ViewState from "../../ReactViewModels/ViewState";
 import { ViewStateProvider } from "./ViewStateContext";
 
-export default (props: {
+export const ContextProviders = (props: {
   viewState: ViewState;
   theme: DefaultTheme | ((theme: DefaultTheme) => DefaultTheme);
   children: React.ReactNode[];

lib/ReactViews/Context/index.ts

@@ -0,0 +1,2 @@
+export * from "./ViewStateContext";
+export * from "./ContextProviders";

lib/ReactViews/Custom/ExternalLink.tsx

@@ -1,7 +1,7 @@
 import { AnchorHTMLAttributes, default as React } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { useViewState } from "../StandardUserInterface/ViewStateContext";
+import { useViewState } from "../Context";
 
 const Icon = require("../../Styled/Icon").default;
 const { StyledIcon } = require("../../Styled/Icon");

lib/ReactViews/Disclaimer.jsx

@@ -12,7 +12,7 @@ import Button from "../Styled/Button";
 import Spacing from "../Styled/Spacing";
 import Text from "../Styled/Text";
 import parseCustomMarkdownToReact from "./Custom/parseCustomMarkdownToReact";
-import { withViewState } from "./StandardUserInterface/ViewStateContext";
+import { withViewState } from "./Context";
 import FadeIn from "./Transitions/FadeIn/FadeIn";
 
 const TopElementBox = styled(Box)`

lib/ReactViews/DragDropFile.tsx

@@ -14,10 +14,7 @@ import MappableMixin from "../ModelMixins/MappableMixin";
 import addUserFiles from "../Models/Catalog/addUserFiles";
 import { BaseModel } from "../Models/Definition/Model";
 import Styles from "./drag-drop-file.scss";
-import {
-  WithViewState,
-  withViewState
-} from "./StandardUserInterface/ViewStateContext";
+import { WithViewState, withViewState } from "./Context";
 import { raiseFileDragDropEvent } from "../ViewModels/FileDragDropListener";
 
 interface PropsType extends WithTranslation, WithViewState {}

lib/ReactViews/DragDropNotification.jsx

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import Icon from "../Styled/Icon";
 import Styles from "./drag-drop-notification.scss";
-import { withViewState } from "./StandardUserInterface/ViewStateContext";
+import { withViewState } from "./Context";
 
 @observer
 class DragDropNotification extends React.Component {

lib/ReactViews/ExplorerWindow/ExplorerWindow.tsx

@@ -2,7 +2,7 @@ import { action } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import ViewState from "../../ReactViewModels/ViewState";
-import { useViewState } from "../StandardUserInterface/ViewStateContext";
+import { useViewState } from "../Context";
 import ModalPopup from "./ModalPopup";
 import Tabs from "./Tabs";
 

lib/ReactViews/FeatureInfo/FeatureInfoDownload.tsx

@@ -6,7 +6,7 @@ import filterOutUndefined from "../../Core/filterOutUndefined";
 import JsonValue, { JsonObject } from "../../Core/Json";
 import ViewState from "../../ReactViewModels/ViewState";
 import Icon from "../../Styled/Icon";
-import { withViewState } from "../StandardUserInterface/ViewStateContext";
+import { withViewState } from "../Context";
 import Styles from "./feature-info-download.scss";
 
 const Dropdown = require("../Generic/Dropdown");

lib/ReactViews/FeatureInfo/FeatureInfoPanel.tsx

@@ -29,7 +29,7 @@ import Workbench from "../../Models/Workbench";
 import ViewState from "../../ReactViewModels/ViewState";
 import Icon from "../../Styled/Icon";
 import Loader from "../Loader";
-import { withViewState } from "../StandardUserInterface/ViewStateContext";
+import { withViewState } from "../Context";
 import Styles from "./feature-info-panel.scss";
 import FeatureInfoCatalogItem from "./FeatureInfoCatalogItem";
 

lib/ReactViews/FeatureInfo/FeatureInfoSection.tsx

@@ -31,10 +31,7 @@ import FeatureInfoContext from "../../Models/Feature/FeatureInfoContext";
 import Icon from "../../Styled/Icon";
 import { FeatureInfoPanelButton as FeatureInfoPanelButtonModel } from "../../ViewModels/FeatureInfoPanel";
 import parseCustomMarkdownToReact from "../Custom/parseCustomMarkdownToReact";
-import {
-  withViewState,
-  WithViewState
-} from "../StandardUserInterface/ViewStateContext";
+import { withViewState, WithViewState } from "../Context";
 import Styles from "./feature-info-section.scss";
 import FeatureInfoDownload from "./FeatureInfoDownload";
 import FeatureInfoPanelButton from "./FeatureInfoPanelButton";

lib/ReactViews/Feedback/FeedbackForm.tsx

@@ -16,10 +16,7 @@ import Text from "../../Styled/Text";
 import parseCustomMarkdownToReact, {
   parseCustomMarkdownToReactWithOptions
 } from "../Custom/parseCustomMarkdownToReact";
-import {
-  WithViewState,
-  withViewState
-} from "../StandardUserInterface/ViewStateContext";
+import { WithViewState, withViewState } from "../Context";
 import { applyTranslationIfExists } from "./../../Language/languageHelpers";
 
 interface IProps extends WithTranslation, WithViewState {

lib/ReactViews/HelpScreens/SatelliteHelpPrompt.jsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useViewState } from "../StandardUserInterface/ViewStateContext";
+import { useViewState } from "../Context";
 import HelpPrompt from "./HelpPrompt";
 
 export const SATELLITE_HELP_PROMPT_KEY = "satelliteGuidance";

lib/ReactViews/Map/BottomBar/BottomBar.tsx

@@ -0,0 +1,32 @@
+import { VFC } from "react";
+import Box from "../../../Styled/Box";
+import { useViewState } from "../../Context";
+import { MapCredits } from "./Credits";
+import { DistanceLegend } from "./DistanceLegend";
+import { LocationBar } from "./LocationBar";
+import React from "react";
+
+export const BottomBar: VFC = () => {
+  const viewState = useViewState();
+  return (
+    <Box
+      fullWidth
+      justifySpaceBetween
+      css={`
+        background: linear-gradient(180deg, #000000 0%, #000000 100%);
+        font-size: 0.7rem;
+        opacity: 0.75;
+      `}
+    >
+      <MapCredits
+        hideTerriaLogo={!!viewState.terria.configParameters.hideTerriaLogo}
+        credits={viewState.terria.configParameters.extraCreditLinks?.slice()}
+        currentViewer={viewState.terria.mainViewer.currentViewer}
+      />
+      <Box paddedHorizontally={4} gap={2}>
+        <LocationBar mouseCoords={viewState.terria.currentViewer.mouseCoords} />
+        <DistanceLegend />
+      </Box>
+    </Box>
+  );
+};

lib/ReactViews/Credits/Credit.tsx → lib/ReactViews/Map/BottomBar/Credits/Credit.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { ExternalLinkIcon } from "../Custom/ExternalLink";
+import { ExternalLinkIcon } from "../../../Custom/ExternalLink";
 import { ICredit } from "./Credit.type";
 import { Spacer } from "./Spacer";
 

lib/ReactViews/Credits/CreditsContainer.tsx → lib/ReactViews/Map/BottomBar/Credits/CreditsContainer.tsx

@@ -1,27 +1,19 @@
 import styled from "styled-components";
-import Box from "../../Styled/Box";
+import Box from "../../../../Styled/Box";
 
 export const CreditsContainer = styled(Box).attrs(() => ({
-  fullWidth: true,
   styledHeight: "30px",
   styledMaxHeight: "30px",
   verticalCenter: true,
-  gap: true,
-  position: "absolute"
+  gap: true
 }))`
-  z-index: 0;
-  bottom: 0;
-  background: linear-gradient(180deg, #000000 0%, #000000 100%);
-  font-size: 0.7rem;
-  opacity: 0.75;
   a {
     text-decoration: underline;
     cursor: pointer;
     color: ${(props) => props.theme.textLight};
     display: flex;
     align-items: center;
   }
-
   img {
     height: 24px;
   }

lib/ReactViews/Credits/DataAttribution/DataAttributionModal.tsx → lib/ReactViews/Map/BottomBar/Credits/DataAttribution/DataAttributionModal.tsx

@@ -3,13 +3,13 @@ import React, { FC } from "react";
 import ReactDOM from "react-dom";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Box from "../../../Styled/Box";
-import { Li } from "../../../Styled/List";
-import Spacing from "../../../Styled/Spacing";
-import Text from "../../../Styled/Text";
-import parseCustomHtmlToReact from "../../Custom/parseCustomHtmlToReact";
-import CloseButton from "../../Generic/CloseButton";
-import { PrefaceBox } from "../../Generic/PrefaceBox";
+import Box from "../../../../../Styled/Box";
+import { Li } from "../../../../../Styled/List";
+import Spacing from "../../../../../Styled/Spacing";
+import Text from "../../../../../Styled/Text";
+import parseCustomHtmlToReact from "../../../../Custom/parseCustomHtmlToReact";
+import CloseButton from "../../../../Generic/CloseButton";
+import { PrefaceBox } from "../../../../Generic/PrefaceBox";
 
 interface IDataAttributionModalProps {
   closeModal: () => void;
@@ -20,7 +20,6 @@ const AttributionText = styled(Text).attrs(() => ({ medium: true }))`
   a {
     color: ${(props) => props.theme.textDark};
     text-decoration: underline;
-
     img {
       height: 19px;
       vertical-align: middle;

lib/ReactViews/Credits/MapCredits/MapCreditLogo.tsx → lib/ReactViews/Map/BottomBar/Credits/MapCreditLogo.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
 import CreditDisplay from "terriajs-cesium/Source/Scene/CreditDisplay";
-import GlobeOrMap from "../../../Models/GlobeOrMap";
-import Leaflet from "../../../Models/Leaflet";
-import parseCustomHtmlToReact from "../../Custom/parseCustomHtmlToReact";
+import GlobeOrMap from "../../../../Models/GlobeOrMap";
+import Leaflet from "../../../../Models/Leaflet";
+import parseCustomHtmlToReact from "../../../Custom/parseCustomHtmlToReact";
 
 interface IMapCreditLogoProps {
   currentViewer: GlobeOrMap;

lib/ReactViews/Credits/MapCredits/MapCredits.tsx → lib/ReactViews/Map/BottomBar/Credits/MapCredits.tsx

@@ -2,13 +2,13 @@ import { reaction } from "mobx";
 import { observer } from "mobx-react";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import GlobeOrMap from "../../../Models/GlobeOrMap";
-import { ICredit } from "../Credit.type";
-import { Credits } from "../Credits";
-import { CreditsContainer } from "../CreditsContainer";
-import { DataAttributionModal } from "../DataAttribution/DataAttributionModal";
-import { Spacer } from "../Spacer";
-import { TerriaLogo } from "../TerriaLogo";
+import GlobeOrMap from "../../../../Models/GlobeOrMap";
+import { ICredit } from "./Credit.type";
+import { Credits } from "./Credits";
+import { CreditsContainer } from "./CreditsContainer";
+import { DataAttributionModal } from "./DataAttribution/DataAttributionModal";
+import { Spacer } from "./Spacer";
+import { TerriaLogo } from "./TerriaLogo";
 import { MapCreditLogo } from "./MapCreditLogo";
 
 interface IMapCreditsProps {

lib/ReactViews/Credits/TerriaLogo.tsx → lib/ReactViews/Map/BottomBar/Credits/TerriaLogo.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
-import Box from "../../Styled/Box";
+import Box from "../../../../Styled/Box";
 
-const logo = require("../../../wwwroot/images/terria-watermark.svg");
+const logo = require("../../../../../wwwroot/images/terria-watermark.svg");
 
 export const TerriaLogo: FC = () => {
   return (

lib/ReactViews/Map/BottomBar/Credits/index.ts

@@ -0,0 +1,2 @@
+export { ICredit } from "./Credit.type";
+export { MapCredits } from "./MapCredits";