TerriaJS · soyarsauce · Oct 30, 2020 · May 29, 2019 · May 31, 2019 · May 31, 2019
diff --git a/CHANGES.md b/CHANGES.md
@@ -12,6 +12,12 @@ Change Log
 * Port `supportsColorScaleRange`, `colorScaleMinimum` and `colorScaleMaximimum` from `master` to `WebMapServiceCatalogItem` model.
 * Ported MapboxVectorTileCatalogItem ("mvt").
 * When expanding a chart from the feature info panel, we now place a colored dot on the map where the chart was generated from.
+* Add basic routing support
+* Add better page titles when on various routes of the application
+* Add prerendering support on `/catalog/` routes (via `prerender-end` event &
+  allowing TerriaMap to hit certain routes)
+* Update `WorkbenchButton` to allow for links rather than buttons, including
+  changing About Data to a link
 * [The next improvement]
 
 #### 8.0.0-alpha.58

diff --git a/buildprocess/karma-saucelabs.conf.js b/buildprocess/karma-saucelabs.conf.js
@@ -37,7 +37,7 @@ module.exports = function(config) {
 
         // start these browsers
         // browsers: ['sl_chrome', /*'sl_safari',*/ 'sl_firefox', 'sl_firefox_esr', 'sl_ie11'],
-        browsers: ['sl_chrome', 'sl_firefox', 'sl_firefox_esr'], 
+        browsers: ['sl_chrome', 'sl_firefox', 'sl_firefox_esr'],
 
         sauceLabels: {
             testName: 'TerriaJS Unit Tests',

diff --git a/doc/customizing/skinning.md b/doc/customizing/skinning.md
@@ -29,7 +29,7 @@ import React from 'react';
 
 import version from '../../version';
 
-import StandardUserInterface from 'terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface.jsx';
+import { StandardUserInterface } from 'terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface.jsx';
 import MenuItem from 'terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem';
 import RelatedMaps from './RelatedMaps';
 import { Menu, Nav } from 'terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups';

diff --git a/doc/deploying/deploying-terriamap.md b/doc/deploying/deploying-terriamap.md
@@ -30,6 +30,8 @@ And on the server, change to the directory where you copied those files and dire
 
 The server will start on port 3001. You can specify a different port by adding ` --port 1234` to the end of [the `args` configuration string](https://github.com/TerriaJS/TerriaMap/blob/6d3cc39d65f17f66fcadb41bfd732a33a00116f3/ecosystem-production.config.js#L16) in `ecosystem-production.config.js`.
 
+Ensure that you specify the `baseHref` path in your `devserverconfig.json` if you are serving your TerriaMap from a directory, and an `appBaseUrl` so a sitemap & other links can be generated.
+
 It is usually a good idea to run another web server, such as [nginx](https://nginx.org/en/) or [Varnish](https://varnish-cache.org/) on port 80 and then reverse-proxy to the Node.js server, rather than running terriajs-server on port 80 directly.   You will find a varnish VCL file with the TerriaMap source code in the [deploy/varnish directory](https://github.com/TerriaJS/TerriaMap/tree/master/deploy/varnish).  In addition to acting as a reverse proxy for the Node.js server, the supplied Varnish configuration also caches requests to proxied map data in order to improve performance.
 
 ### Using any web server
@@ -40,6 +42,7 @@ It is usually a good idea to run another web server, such as [nginx](https://ngi
 2. It includes a simple service at `/proxy` that allows TerriaJS to access geospatial data servers that don't support [CORS](../connecting-to-data/cross-origin-resource-sharing.md).  If this service is not available, TerriaJS won't be able to access any datasets that are on other servers and that don't support CORS.
 3. It includes another service at `/convert` that uses [GDAL](http://www.gdal.org/) and OGR to transform otherwise unsupported geospatial vector data (e.g. shapefiles) to GeoJSON for display by the TerriaJS client.  If this service is not available, these data formats will not be supported.  However, all the [formats that TerriaJS supports directly](../connecting-to-data/catalog-items.md) will work just fine.
 * When configured correctly, it persists blobs of JSON for use in the sharing feature.  If this service is not available, the JSON can be stored in the share URL, instead.  However, this makes for some extremely long URLs.
+4. It reroutes and serves up a build-time-prerendered index.html of your catalog URLs so they can be indexed by search engines.
 
 If these limitations are acceptable, you can run your TerriaMap on virtually any web server by simply copying the TerriaMap `wwwroot` onto the server!
 

diff --git a/doc/deploying/prerender-troubleshooting.md b/doc/deploying/prerender-troubleshooting.md
@@ -0,0 +1,16 @@
+# Prerender Troubleshooting
+TerriaMap prerenders pages through puppeteer.
+It should JustWork on MacOS. Linux will require some extra deps. Some more general troubleshooting at:
+https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md
+
+## WSL
+You'll need to tell PrerenderSPAPlugin to pass an `executablePath` down to puppeteer.
+
+via @steve9164's findings
+
+Add (changing the path to where your chrome is)
+`executablePath: '/mnt/c/Program\ Files\ \(x86\)/Google/Chrome/Application/chrome.exe'`
+
+to
+
+https://github.com/TerriaJS/TerriaMap/blob/c8675bc62cd5e37b6df490910f6ed7f7ae264d95/buildprocess/webpack.config.js#L155
diff --git a/lib/Core/ConsoleAnalytics.js b/lib/Core/ConsoleAnalytics.js
@@ -43,4 +43,10 @@ ConsoleAnalytics.prototype.logEvent = function(category, action, label, value) {
   }
 };
 
+ConsoleAnalytics.prototype.logPageView = function(location) {
+  if (this.logToConsole) {
+    console.log("New pageview at location: ", location);
+  }
+};
+
 module.exports = ConsoleAnalytics;
diff --git a/lib/Core/GoogleAnalytics.js b/lib/Core/GoogleAnalytics.js
@@ -24,6 +24,12 @@ GoogleAnalytics.prototype.logEvent = function(category, action, label, value) {
   ga("send", "event", category, action, label, value);
 };
 
+GoogleAnalytics.prototype.logPageView = function(location) {
+  initializeGoogleAnalytics(this);
+  ga("set", "page", location);
+  ga("send", "pageview");
+};
+
 function initializeGoogleAnalytics(that) {
   if (defined(window.ga)) {
     return;

diff --git a/lib/Language/en/translation.json b/lib/Language/en/translation.json
@@ -419,7 +419,9 @@
   },
   "preview": {
     "doesNotContainGeospatialData": "This file does not contain geospatial data.",
-    "selectToPreview": "<0>Select a dataset to see a preview </0><1>- OR -</1><2>Go to the map</2>",
+    "selectToPreview": "Select a dataset to see a preview",
+    "or": "- OR -",
+    "goToTheMap": "Go to the map",
     "loading": "PREVIEW LOADING...",
     "preview": "{{appName}} preview",
     "noPreviewAvailable": "NO PREVIEW AVAILABLE",

diff --git a/lib/ReactViewModels/TerriaRouting.ts b/lib/ReactViewModels/TerriaRouting.ts
@@ -0,0 +1,8 @@
+// Route paths for the app.
+
+export const ROOT_ROUTE = "/";
+
+export const CATALOG_ROUTE = `${ROOT_ROUTE}catalog/`;
+// var CATALOG_ROUTE = "/catalog/";
+
+export const CATALOG_MEMBER_ROUTE = `${CATALOG_ROUTE}:catalogMemberId`;
diff --git a/lib/ReactViewModels/ViewState.ts b/lib/ReactViewModels/ViewState.ts
@@ -7,6 +7,8 @@ import {
   runInAction
 } from "mobx";
 import { Ref } from "react";
+import { History } from "history";
+
 import clone from "terriajs-cesium/Source/Core/clone";
 import defined from "terriajs-cesium/Source/Core/defined";
 import CesiumEvent from "terriajs-cesium/Source/Core/Event";
@@ -68,6 +70,7 @@ export default class ViewState {
   readonly searchState: SearchState;
   readonly terria: Terria;
   readonly relativePosition = RelativePosition;
+  history: History | undefined;
 
   @observable previewedItem: BaseModel | undefined;
   @observable userDataPreviewedItem: BaseModel | undefined;

diff --git a/lib/ReactViews/DataCatalog/CatalogGroup.jsx b/lib/ReactViews/DataCatalog/CatalogGroup.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -15,8 +16,11 @@ import Styles from "./data-catalog-group.scss";
 import Box from "../../Styled/Box";
 import Text from "../../Styled/Text";
 
-const CatalogGroupButton = styled.button`
+// const CatalogGroupButton = styled.button`
+const CatalogGroupButton = styled(Link)`
   ${props => `
+    color: ${props.theme.textBlack};
+
     &:hover,
     &:focus {
       color: ${props.theme.textLight};
@@ -41,6 +45,7 @@ function CatalogGroup(props) {
     <li className={Styles.root}>
       <Text fullWidth primary={!props.selected && props.isPrivate}>
         <CatalogGroupButton
+          to={props.linkTo}
           type="button"
           className={classNames(
             Styles.btnCatalog,
@@ -122,6 +127,7 @@ CatalogGroup.propTypes = {
   text: PropTypes.string,
   isPrivate: PropTypes.bool,
   title: PropTypes.string,
+  linkTo: PropTypes.string,
   topLevel: PropTypes.bool,
   open: PropTypes.bool,
   loading: PropTypes.bool,

diff --git a/lib/ReactViews/DataCatalog/CatalogItem.jsx b/lib/ReactViews/DataCatalog/CatalogItem.jsx
@@ -1,5 +1,7 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 import classNames from "classnames";
 import Icon from "../Icon";
 import PrivateIndicator from "../PrivateIndicator/PrivateIndicator";
@@ -11,6 +13,22 @@ import Styles from "./data-catalog-item.scss";
 import Box from "../../Styled/Box";
 import Text from "../../Styled/Text";
 
+const CatalogItemLink = styled(Link)`
+  ${props => `
+    color: ${props.theme.textBlack};
+
+    &:hover,
+    &:focus {
+      color: ${props.theme.colorPrimary};
+    }
+    ${props.active &&
+      `
+        color: ${props.theme.colorPrimary};
+        font-weight: 600;
+      `}
+    `}
+`;
+
 const STATE_TO_ICONS = {
   loading: <Icon glyph={Icon.GLYPHS.loader} />,
   remove: <Icon glyph={Icon.GLYPHS.remove} />,
@@ -33,17 +51,19 @@ function CatalogItem(props) {
   return (
     <li className={classNames(Styles.root)}>
       <Text fullWidth primary={props.isPrivate}>
-        <button
+        <CatalogItemLink
+          to={props.linkTo}
           type="button"
           onClick={props.onTextClick}
           title={props.title}
           className={classNames(Styles.btnCatalogItem, {
             [Styles.btnCatalogItemIsPreviewed]: props.selected,
             [Styles.btnCatalogItemIsTrashable]: props.selected
           })}
+          active={props.selected}
         >
           {props.text}
-        </button>
+        </CatalogItemLink>
       </Text>
       <Box>
         {props.isPrivate && <PrivateIndicator />}
@@ -76,6 +96,7 @@ CatalogItem.propTypes = {
   selected: PropTypes.bool,
   text: PropTypes.string,
   title: PropTypes.string,
+  linkTo: PropTypes.string,
   trashable: PropTypes.bool,
   onTrashClick: PropTypes.func,
   onBtnClick: PropTypes.func,

diff --git a/lib/ReactViews/DataCatalog/DataCatalogGroup.jsx b/lib/ReactViews/DataCatalog/DataCatalogGroup.jsx
@@ -3,6 +3,8 @@ import { observer } from "mobx-react";
 import PropTypes from "prop-types";
 import React from "react";
 import { withTranslation } from "react-i18next";
+import { withRouter } from "react-router-dom";
+import URI from "urijs";
 import addedByUser from "../../Core/addedByUser";
 import getPath from "../../Core/getPath";
 import openGroup from "../../Models/openGroup";
@@ -17,6 +19,7 @@ const DataCatalogGroup = observer(
     propTypes: {
       group: PropTypes.object.isRequired,
       viewState: PropTypes.object.isRequired,
+      match: PropTypes.object.isRequired,
       /** Overrides whether to get the open state of the group from the group model or manage it internally */
       manageIsOpenLocally: PropTypes.bool,
       userData: PropTypes.bool,
@@ -70,9 +73,14 @@ const DataCatalogGroup = observer(
     },
 
     isSelected() {
-      return addedByUser(this.props.group)
-        ? this.props.viewState.userDataPreviewedItem === this.props.group
-        : this.props.viewState.previewedItem === this.props.group;
+      const match = this.props.match || {};
+      const { params } = match;
+      return (
+        (addedByUser(this.props.group)
+          ? this.props.viewState.userDataPreviewedItem === this.props.group
+          : this.props.viewState.previewedItem === this.props.group) ||
+        URI.decode(params.catalogMemberId) === this.props.group.uniqueId
+      );
     },
 
     getNameOrPrettyUrl() {
@@ -93,6 +101,7 @@ const DataCatalogGroup = observer(
       const { t } = this.props;
       return (
         <CatalogGroup
+          linkTo={URI.encode(group.uniqueId)}
           text={this.getNameOrPrettyUrl()}
           isPrivate={group.isPrivate}
           title={getPath(this.props.group, " → ")}
@@ -129,4 +138,4 @@ const DataCatalogGroup = observer(
   })
 );
 
-module.exports = withTranslation()(DataCatalogGroup);
+module.exports = withRouter(withTranslation()(DataCatalogGroup));
diff --git a/lib/ReactViews/DataCatalog/DataCatalogItem.jsx b/lib/ReactViews/DataCatalog/DataCatalogItem.jsx
@@ -5,10 +5,13 @@ import PropTypes from "prop-types";
 import React from "react";
 import { withTranslation } from "react-i18next";
 import defined from "terriajs-cesium/Source/Core/defined";
-import addedByUser from "../../Core/addedByUser";
+// import addedByUser from "../../Core/addedByUser";
 import getPath from "../../Core/getPath";
 import addToWorkbench from "../../Models/addToWorkbench";
 import raiseErrorOnRejectedPromise from "../../Models/raiseErrorOnRejectedPromise";
+import { withRouter } from "react-router-dom";
+import URI from "urijs";
+// import addedByUser from "../../Core/addedByUser";
 import removeUserAddedData from "../../Models/removeUserAddedData";
 import CatalogItem from "./CatalogItem";
 
@@ -18,6 +21,7 @@ export const DataCatalogItem = observer(
     displayName: "DataCatalogItem",
 
     propTypes: {
+      match: PropTypes.object.isRequired,
       item: PropTypes.object.isRequired,
       viewState: PropTypes.object.isRequired,
       overrideState: PropTypes.string,
@@ -104,9 +108,13 @@ export const DataCatalogItem = observer(
     },
 
     isSelected() {
-      return addedByUser(this.props.item)
-        ? this.props.viewState.userDataPreviewedItem === this.props.item
-        : this.props.viewState.previewedItem === this.props.item;
+      return (
+        this.props.item.uniqueId ===
+        URI.decode(this.props.match.params.catalogMemberId)
+      );
+      // return addedByUser(this.props.item)
+      //   ? this.props.viewState.userDataPreviewedItem === this.props.item
+      //   : this.props.viewState.previewedItem === this.props.item;
     },
 
     render() {
@@ -120,6 +128,7 @@ export const DataCatalogItem = observer(
       };
       return (
         <CatalogItem
+          linkTo={URI.encode(item.uniqueId)}
           onTextClick={this.setPreviewedItem}
           selected={this.isSelected()}
           text={item.nameInCatalog}
@@ -160,4 +169,4 @@ export const DataCatalogItem = observer(
   })
 );
 
-export default withTranslation()(DataCatalogItem);
+export default withRouter(withTranslation()(DataCatalogItem));
diff --git a/lib/ReactViews/DataCatalog/data-catalog-group.scss b/lib/ReactViews/DataCatalog/data-catalog-group.scss
@@ -29,6 +29,8 @@
   composes: btn from "../../Sass/common/_buttons.scss";
   @extend %wrap;
 
+  display: block;
+  // color: $text-black;
   text-align: left;
   font-size: $font-size-small;
   padding: 8px 30px + $padding;

diff --git a/lib/ReactViews/DataCatalog/data-catalog-item.scss b/lib/ReactViews/DataCatalog/data-catalog-item.scss
@@ -10,6 +10,8 @@
 }
 
 .btn-catalog-item {
+  display: block;
+  // color: $text-black;
   font-size: $font-size-small;
   composes: btn from "../../Sass/common/_buttons.scss";
   @extend %wrap;

diff --git a/lib/ReactViews/Disclaimer.jsx b/lib/ReactViews/Disclaimer.jsx
@@ -81,7 +81,13 @@ class Disclaimer extends React.Component {
       .useSmallScreenInterface;
     return disclaimer ? (
       <FadeIn isVisible={this.props.viewState.disclaimerVisible}>
-        <TopElementBox positionAbsolute fullWidth fullHeight centered>
+        <TopElementBox
+          className="TJS-Disclaimer"
+          positionAbsolute
+          fullWidth
+          fullHeight
+          centered
+        >
           <BackgroundImage
             // // Make the image slightly larger to deal with
             // // image shrinking a tad bit when blurred