Fix discrepancies with legacy portal in station / history counts

.env

@@ -4,7 +4,8 @@ REACT_APP_BASE_MAP=BC
 #REACT_APP_BASE_MAP=YNWT
 REACT_APP_BC_BASE_MAP_TILES_URL=https://services.pacificclimate.org/tiles/bc-albers-lite/{z}/{x}/{y}.png
 REACT_APP_YNWT_BASE_MAP_TILES_URL=https://services.pacificclimate.org/tiles/yukon-albers-lite/{z}/{x}/{y}.png
-REACT_APP_SDS_URL=http://docker-dev02.pcic.uvic.ca:30512
+REACT_APP_SDS_URL=http://localhost:5000
+#REACT_APP_SDS_URL=http://docker-dev02.pcic.uvic.ca:30512
 REACT_APP_PDP_DATA_URL=https://services.pacificclimate.org/data
 REACT_APP_DEFAULT_NETWORK_COLOR=#000000
 # Values must be single-quoted to prevent errors created by processing dbl quotes.

src/components/info/StationMetadata/StationMetadata.css

@@ -5,4 +5,15 @@
 
 .ReactTable .rt-thead {
     overflow-y: scroll;
+}
+
+ul.compact {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 15px;
+    padding-right: 0;
+}
+
+ul.compact li {
+    margin-left: 0;
 }

src/components/info/StationMetadata/StationMetadata.js

@@ -3,102 +3,170 @@
 // passed into React Table.
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import ReactTable from 'react-table';
-import find from 'lodash/fp/find';
+
+import flow from 'lodash/fp/flow';
+import map from 'lodash/fp/map';
+
 import FrequencySelector from '../../selectors/FrequencySelector';
 import logger from '../../../logger';
+import {
+  stationNetwork,
+  uniqStationFreqs,
+  uniqStationLocations,
+  uniqStationNames,
+  uniqStationObsPeriods,
+  uniqStationVariableNames
+} from '../../../utils/station-info';
 
 import 'react-table/react-table.css';
 import './StationMetadata.css';
 
 
 logger.configure({ active: true });
 
+// TODO: Put these in a util module
 const formatDate = d => d ? d.toISOString().substr(0,10) : 'unknown';
 
+const lexCompare = (a, b) => {
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i += 1) {
+    if (a[i] < b[i]) {
+      return -1;
+    }
+    if (a[i] > b[i]) {
+      return 1;
+    }
+  }
+  return a.length - b.length;
+}
 
-export default class StationMetadata extends Component {
-  static propTypes = {
-    stations: PropTypes.array,
-    allNetworks: PropTypes.array.isRequired,
-  };
-
-  render() {
-    const { stations, allNetworks, ...restProps } = this.props;
 
-    const columns = [
-      {
-        id: 'Network',
-        Header: 'Network',
-        minWidth: 80,
-        maxWidth: 100,
-        accessor: station => {
-          const network = find({ uri: station.network_uri })(allNetworks);
-          return network ? network.name : '?';
-        },
-      },
-      {
-        id: 'Native ID',
-        Header: 'Native ID',
-        minWidth: 80,
-        maxWidth: 100,
-        accessor: 'native_id'
-      },
-      {
-        id: 'Station Name',
-        Header: 'Station Name',
-        minWidth: 120,
-        maxWidth: 200,
-        accessor: station => station.histories[0].station_name,
+function StationMetadata({
+  stations, allNetworks, allVariables, ...restProps
+}) {
+  const columns = [
+    {
+      id: 'Network',
+      Header: 'Network',
+      minWidth: 80,
+      maxWidth: 100,
+      accessor: station => {
+        const network = stationNetwork(allNetworks, station);
+        return network ? network.name : '?';
       },
-      {
-        id: 'Location',
-        Header: 'Location',
-        minWidth: 120,
-        maxWidth: 200,
-        accessor: station => {
-          const hx = station.histories[0];
-          return (
-            <div>
-              {-hx.lon} W <br/>
-              {hx.lat} N <br/>
-              Elev. {hx.elevation} m
-            </div>
-          );
-        }
-      },
-      {
-        id: 'Record',
-        Header: 'Record',
-        minWidth: 100,
-        maxWidth: 200,
-        // accessor: station => 'record',
-        accessor: station => {
-          return (
-          <div>
-            {formatDate(station.min_obs_time)} to <br/>
-            {formatDate(station.max_obs_time)}
-          </div>
-        )}
-      },
-      {
-        minWidth: 80,
-        maxWidth: 100,
-        id: 'Obs Freq',
-        Header: 'Obs Freq',
-        accessor: station =>
-          FrequencySelector.valueToLabel(station.histories[0].freq),
-      },
-    ];
+    },
+    {
+      id: 'Native ID',
+      Header: 'Native ID',
+      minWidth: 80,
+      maxWidth: 100,
+      accessor: 'native_id'
+    },
+    {
+      id: 'Unique Names',
+      Header: 'Unique Names',
+      minWidth: 120,
+      maxWidth: 200,
+      accessor: uniqStationNames,
+      sortMethod: lexCompare,
+      Cell: row => (
+        <ul className={"compact"}>
+          {map(name => (<li>{name}</li>), row.value)}
+        </ul>
+      ),
+    },
+    {
+      id: 'Unique Locations',
+      Header: 'Unique Locations',
+      minWidth: 120,
+      maxWidth: 200,
+      sortable: false,
+      accessor: uniqStationLocations,
+      Cell: row => (
+        <ul className={"compact"}>
+          {
+              map(loc => (
+                <li>
+                  {-loc.lon} W <br/>
+                  {loc.lat} N <br/>
+                  Elev. {loc.elevation} m
+                </li>
+              ), row.value)
+          }
+        </ul>
+      ),
+    },
+    {
+      id: 'Unique Records',
+      Header: 'Unique Records',
+      minWidth: 100,
+      maxWidth: 100,
+      sortable: false,
+      accessor: uniqStationObsPeriods,
+      Cell: row => (
+        <ul className={"compact"}>
+          {
+              map(period => (
+                <li>
+                  {formatDate(period.min_obs_time)} to <br/>
+                  {formatDate(period.max_obs_time)}
+                </li>
+              ), row.value)
+          }
+        </ul>
+      ),
+    },
+    {
+      minWidth: 80,
+      maxWidth: 100,
+      id: 'Uniq Obs Freqs',
+      Header: 'Uniq Obs Freqs',
+      accessor: flow(uniqStationFreqs, map(FrequencySelector.valueToLabel)),
+      sortMethod: lexCompare,
+      Cell: row => (
+        <ul className={"compact"}>
+          {map(freq => (<li>{freq}</li>), row.value)}
+        </ul>
+      ),
+    },
+    {
+      minWidth: 100,
+      maxWidth: 250,
+      id: 'Variables',
+      Header: 'Variables',
+      accessor: uniqStationVariableNames(allVariables),
+      sortable: false,
+      Cell: row => (
+        <ul className={"compact"}>
+          {map(name => (<li>{name}</li>), row.value)}
+        </ul>
+      ),
+    },
+    {
+      id: '# Hx',
+      Header: '# Hx',
+      minWidth: 30,
+      maxWidth: 30,
+      accessor: station => station.histories.length,
+    },
+  ];
 
-    return (
-      <ReactTable
-        data={stations}
-        columns={columns}
-        defaultPageSize={100}
-        {...restProps}
-      />
-    );
-  }
+  return (
+    <ReactTable
+      data={stations}
+      columns={columns}
+      defaultPageSize={100}
+      {...restProps}
+    />
+  );
 }
+
+StationMetadata.propTypes = {
+  stations: PropTypes.array,
+  allNetworks: PropTypes.array.isRequired,
+  allVariables: PropTypes.array.isRequired,
+};
+
+export default StationMetadata;

src/components/main/VersionA/VersionA.js

@@ -231,6 +231,15 @@ class Portal extends Component {
                 <Panel.Body>
                   <Tabs defaultActiveKey={'Filters'} className={css.mainTabs}>
                     <Tab eventKey={'Filters'} title={'Station Filters'}>
+                      <Row>
+                        <Col lg={12} md={12} sm={12}>
+                          <p>
+                            <b>{filteredStations?.length}</b> stations selected
+                            of <b>{this.state.allStations?.length}</b> (see
+                            Station Data tab for details)
+                          </p>
+                        </Col>
+                      </Row>
                       <Row>
                         <Col lg={6} md={6} sm={6}>
                           {/*<Button bsSize={'small'} onClick={this.handleClickAll}>Select all criteria</Button>*/}
@@ -241,7 +250,7 @@ class Portal extends Component {
                             label={'Start Date'}
                           />
                         </Col>
-                          <Col lg={6} md={6} sm={6}>
+                        <Col lg={6} md={6} sm={6}>
                           <DateSelector
                             value={this.state.endDate}
                             onChange={this.handleChangeEndDate}
@@ -307,6 +316,7 @@ class Portal extends Component {
                       <StationMetadata
                         stations={filteredStations}
                         allNetworks={this.state.allNetworks}
+                        allVariables={this.state.allVariables}
                       />
 
                     </Tab>