Update map and x-section to use @observer

Since these components are passed an observable array, they won't
re-render automatically when the array's internals update, and instead
only re-render when a primitive value updates. This means that their
rendering is always a step behind in the simulation.

This makes the less pure-componenty, but seems to be the recommended way.
See:

mobxjs/mobx-state-tree#1060
https://github.com/mobxjs/mobx-react#faq
mobxjs/mobx#101

An alternative would be to use `getSnapshot(data)`, but this is claimed
to be less efficient. (Untested, and perhaps for our use-case is negligible
and the cleaner code would be preferred.)

src/components/cross-section-component.tsx

@@ -5,14 +5,16 @@ import styled from "styled-components";
 import { Stage, Text } from "@inlet/react-pixi";
 import { PixiTephraCrossSection } from "./pixi-tephra-cross-section";
 import * as Color from "color";
+import { inject, observer } from "mobx-react";
+import { BaseComponent, IBaseProps } from "./base";
 
 const CanvDiv = styled.div`
   border: 0px solid black; border-radius: 0px;
   margin: 1em;
 `;
 
 interface IState {}
-interface IProps {
+interface IProps extends IBaseProps {
   numRows: number;
   numCols: number;
   height: number;
@@ -22,7 +24,9 @@ interface IProps {
   // cities: CityType[];
 }
 
-export class CrossSectionComponent extends React.Component<IProps, IState>{
+@inject("stores")
+@observer
+export class CrossSectionComponent extends BaseComponent<IProps, IState>{
 
   private ref = React.createRef<HTMLDivElement>();
   private metrics: ICanvasShape;
@@ -36,7 +40,7 @@ export class CrossSectionComponent extends React.Component<IProps, IState>{
   }
 
   public render() {
-    if (! this.metrics) { return null; }
+    if (! this.metrics) { this.recomputeMetrics(); }
     const { volcanoX, data, height } = this.props;
     const { width, gridSize } = this.metrics;
 

src/components/map-component.tsx

@@ -10,14 +10,16 @@ import { PixiGrid } from "./pixi-grid";
 import Volcano from "./pixi-volcano";
 
 import * as Color from "color";
+import { observer, inject } from "mobx-react";
+import { BaseComponent, IBaseProps } from "./base";
 
 const CanvDiv = styled.div`
   border: 0px solid black; border-radius: 0px;
   margin: 1em;
 `;
 
 interface IState {}
-interface IProps {
+interface IProps extends IBaseProps {
   numRows: number;
   numCols: number;
   width: number;
@@ -33,7 +35,9 @@ interface IProps {
   cities: CityType[];
 }
 
-export class MapComponent extends React.Component<IProps, IState>{
+@inject("stores")
+@observer
+export class MapComponent extends BaseComponent<IProps, IState>{
 
   private ref = React.createRef<HTMLDivElement>();
   private metrics: ICanvasShape;
@@ -47,7 +51,7 @@ export class MapComponent extends React.Component<IProps, IState>{
   }
 
   public render() {
-    if (! this.metrics) { return null; }
+    if (! this.metrics) { this.recomputeMetrics(); }
     const {cities, volcanoX, volcanoY, data} = this.props;
     const {width, height, gridSize} = this.metrics;
     const cityItems = cities.map( (city) => {