v1.7.1 (#39)

* DialogBase invisible title bar fix, TS small viewport handling, static TS data, break out jest config

* fix site map large feature bounds detection by down sampling, prepare v1.7.1

.eslintrc → .eslintrc.json

@@ -12,6 +12,16 @@
       "experimentalObjectRestSpread": true
     }
   },
+  "ignorePatterns": [
+    "src/registerServiceWorker.js",
+    "src/lib_components/components/**/*.d.ts",
+    "src/lib_components/remoteAssets",
+    "src/**/__tests__",
+    "src/**/__mocks__",
+    "lib/",
+    "config/",
+    "jest.config.js"
+  ],
   "rules": {
     "linebreak-style": 0,
     "react/jsx-props-no-spreading": 0,

jest.config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  verbose: true,
+  moduleNameMapper: {
+    'typeface-inter': '<rootDir>/src/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/src/__mocks__/styleMock.js',
+  },
+  transform: {
+    '\\.(js|jsx|ts|tsx)$': 'babel-jest',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/fileTransformer.js',
+  },
+  setupFiles: [
+    'jest-canvas-mock',
+  ],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
+  ],
+  testPathIgnorePatterns: [
+    '<rootDir>/lib/',
+  ],
+  collectCoverage: true,
+  coverageReporters: [
+    'lcov',
+    'text',
+  ],
+  coverageDirectory: 'test-coverage',
+  coverageThreshold: {
+    global: {
+      branches: 0,
+      functions: 0,
+      lines: 0,
+      statements: 0,
+    },
+  },
+  coveragePathIgnorePatterns: [
+    '/lib/',
+    '/node_modules/',
+    '/src/lib_components/remoteAssets/',
+    '/src/lib_components/types/',
+    '/src/lib_components/images/',
+    '/src/lib_components/components/SiteMap/svg/',
+    'src/sampleData',
+    'StyleGuide',
+  ],
+};

lib/components/DialogBase/DialogBase.js

@@ -51,29 +51,32 @@ var Transition = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref
   }, props));
 });
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    dialogTitle: {
-      marginLeft: theme.spacing(2),
-      flex: 1
-    },
-    dialogPaper: {
-      backgroundColor: theme.palette.grey[200],
-      position: 'relative'
-    },
-    noPaper: {
-      margin: theme.spacing(2)
-    },
-    contentPaper: {
-      margin: theme.spacing(2),
-      padding: theme.spacing(3)
-    }
-  };
-});
+
+var useStyles = function useStyles(belowSm) {
+  return (0, _styles.makeStyles)(function (theme) {
+    return {
+      dialogTitle: {
+        marginLeft: theme.spacing(2),
+        flex: 1
+      },
+      dialogPaper: {
+        backgroundColor: theme.palette.grey[200],
+        position: 'relative'
+      },
+      noPaper: {
+        margin: theme.spacing(10, 2, belowSm ? 9 : 2, 2)
+      },
+      contentPaper: {
+        margin: theme.spacing(10, 2, belowSm ? 9 : 2, 2),
+        padding: theme.spacing(3)
+      }
+    };
+  });
+};
 
 var DialogBase = function DialogBase(props) {
-  var classes = useStyles(_Theme.default);
   var belowSm = (0, _useMediaQuery.default)(_Theme.default.breakpoints.only('xs'));
+  var classes = useStyles(belowSm)(_Theme.default);
 
   var open = props.open,
       onClose = props.onClose,
@@ -91,11 +94,7 @@ var DialogBase = function DialogBase(props) {
     TransitionComponent: Transition,
     fullScreen: true,
     PaperProps: {
-      className: classes.dialogPaper,
-      style: {
-        top: _Theme.default.spacing(belowSm ? 0.5 : 4),
-        height: "calc(100% - ".concat(_Theme.default.spacing(belowSm ? 13 : 8), "px)")
-      }
+      className: classes.dialogPaper
     },
     style: _extends({}, style, {
       zIndex: _Theme.default.zIndex.fullScreenBackdrop

lib/components/SiteMap/SiteMapUtils.d.ts

@@ -3,6 +3,7 @@ export const OBSERVATORY_CENTER: number[];
 export const MIN_CONTAINER_HEIGHT: 300;
 export const MIN_TABLE_MAX_BODY_HEIGHT: 100;
 export const KM2_TO_ACRES: 247.10538146717;
+export const LOCATION_BOUNDS_SAMPLING_MAX: 10000;
 export const SITE_LOCATION_HIERARCHIES_MIN_ZOOM: 9;
 export namespace SORT_DIRECTIONS {
     export const ASC: string;

lib/components/SiteMap/SiteMapUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deriveFullObservatoryZoomLevel = exports.calculateLocationsInBounds = exports.boundsAreValid = exports.getDynamicAspectRatio = exports.hydrateNeonContextData = exports.parseManualLocationFeatureData = exports.getMapStateForManualLocationData = exports.findCentroid = exports.getMapStateForFocusLocation = exports.mapIsAtFocusLocation = exports.getPhantomLeafletMap = exports.getZoomedIcons = exports.getZoomedIcon = exports.SITE_MAP_DEFAULT_PROPS = exports.SITE_MAP_PROP_TYPES = exports.DEFAULT_STATE = exports.OVERLAYS = exports.OVERLAY_GROUPS_BY_TITLE = exports.OVERLAY_GROUPS = exports.BASE_LAYERS_BY_TITLE = exports.BASE_LAYERS = exports.getHref = exports.calculateFeatureAvailability = exports.BOUNDARY_COLORS = exports.GRAPHQL_LOCATIONS_API_CONSTANTS = exports.FEATURES = exports.LOCATION_ICON_SVG_SHAPES = exports.NLCD_CLASSES = exports.PLOT_SAMPLING_MODULES = exports.FETCH_STATUS = exports.MAP_MOUSE_MODES = exports.VIEWS = exports.HIGHLIGHT_STATUS = exports.UNSELECTABLE_MARKER_FILTER = exports.SELECTION_STATUS = exports.SELECTION_PORTIONS = exports.FEATURE_DATA_SOURCES = exports.FEATURE_TYPES = exports.MANUAL_LOCATION_TYPES = exports.SITE_TERRAINS = exports.SORT_DIRECTIONS = exports.SITE_LOCATION_HIERARCHIES_MIN_ZOOM = exports.KM2_TO_ACRES = exports.MIN_TABLE_MAX_BODY_HEIGHT = exports.MIN_CONTAINER_HEIGHT = exports.OBSERVATORY_CENTER = exports.MAP_ZOOM_RANGE = void 0;
+exports.deriveFullObservatoryZoomLevel = exports.calculateLocationsInBounds = exports.boundsAreValid = exports.getDynamicAspectRatio = exports.hydrateNeonContextData = exports.parseManualLocationFeatureData = exports.getMapStateForManualLocationData = exports.findCentroid = exports.getMapStateForFocusLocation = exports.mapIsAtFocusLocation = exports.getPhantomLeafletMap = exports.getZoomedIcons = exports.getZoomedIcon = exports.SITE_MAP_DEFAULT_PROPS = exports.SITE_MAP_PROP_TYPES = exports.DEFAULT_STATE = exports.OVERLAYS = exports.OVERLAY_GROUPS_BY_TITLE = exports.OVERLAY_GROUPS = exports.BASE_LAYERS_BY_TITLE = exports.BASE_LAYERS = exports.getHref = exports.calculateFeatureAvailability = exports.BOUNDARY_COLORS = exports.GRAPHQL_LOCATIONS_API_CONSTANTS = exports.FEATURES = exports.LOCATION_ICON_SVG_SHAPES = exports.NLCD_CLASSES = exports.PLOT_SAMPLING_MODULES = exports.FETCH_STATUS = exports.MAP_MOUSE_MODES = exports.VIEWS = exports.HIGHLIGHT_STATUS = exports.UNSELECTABLE_MARKER_FILTER = exports.SELECTION_STATUS = exports.SELECTION_PORTIONS = exports.FEATURE_DATA_SOURCES = exports.FEATURE_TYPES = exports.MANUAL_LOCATION_TYPES = exports.SITE_TERRAINS = exports.SORT_DIRECTIONS = exports.SITE_LOCATION_HIERARCHIES_MIN_ZOOM = exports.LOCATION_BOUNDS_SAMPLING_MAX = exports.KM2_TO_ACRES = exports.MIN_TABLE_MAX_BODY_HEIGHT = exports.MIN_CONTAINER_HEIGHT = exports.OBSERVATORY_CENTER = exports.MAP_ZOOM_RANGE = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -149,13 +149,18 @@ var MIN_CONTAINER_HEIGHT = 300;
 exports.MIN_CONTAINER_HEIGHT = MIN_CONTAINER_HEIGHT;
 var MIN_TABLE_MAX_BODY_HEIGHT = 100;
 exports.MIN_TABLE_MAX_BODY_HEIGHT = MIN_TABLE_MAX_BODY_HEIGHT;
-var KM2_TO_ACRES = 247.10538146717; // Minimum zoom level at which location hierarchy fetches are done on a per-domain basis
+var KM2_TO_ACRES = 247.10538146717; // Maximum number of points that will be used for determining whether or not
+// a location is within the current bounds of the viewport of the map.
+// This will control how a large set of coordinates is down sampled.
+
+exports.KM2_TO_ACRES = KM2_TO_ACRES;
+var LOCATION_BOUNDS_SAMPLING_MAX = 10000; // Minimum zoom level at which location hierarchy fetches are done on a per-domain basis
 // We don't do per-site because hierarchy query performance is a function of number of immediate
 // children. Domains top out at 8 or so sites, while sites may have over a hundred children (plots)
 // Note that while we FETCH at the domain level we parse down to the site level as that's what's
 // most useful for generating subsequent fetches
 
-exports.KM2_TO_ACRES = KM2_TO_ACRES;
+exports.LOCATION_BOUNDS_SAMPLING_MAX = LOCATION_BOUNDS_SAMPLING_MAX;
 var SITE_LOCATION_HIERARCHIES_MIN_ZOOM = 9;
 /**
    Key Sets
@@ -2301,10 +2306,63 @@ var boundsAreValid = function boundsAreValid(bounds) {
       return typeof v === 'number';
     }) && bounds[key][1] > bounds[key][0];
   });
-};
+}; // For large sets of coordinates, down sample to compute a general idea
+// of the location. A "good enough" approximation of the location's coordinates
+// such that a bounds calculation can be performed in a reasonable space and time
+// complexity and still yield a relevant result for the view port of the map.
+
 
 exports.boundsAreValid = boundsAreValid;
 
+var downSample = function downSample(items) {
+  if (items.length < LOCATION_BOUNDS_SAMPLING_MAX) return items;
+  var sampled = [];
+  var mod = Math.floor(items.length / LOCATION_BOUNDS_SAMPLING_MAX);
+  items.forEach(function (item, index) {
+    if (index % mod === 0) {
+      sampled.push(item);
+    }
+  });
+  return sampled;
+}; // This function flattens a geometry object to just coordinates so we can check if a boundary
+// is in the map. NOTE: extendPoints does not work with boundaries, only solitary points.
+
+
+var flatten = function flatten(items) {
+  var flat = [];
+  items.forEach(function (item) {
+    if (Array.isArray(item) && !isCoord(item)) {
+      flat.push.apply(flat, _toConsumableArray(flatten(downSample(item))));
+    } else {
+      flat.push(item);
+    }
+  });
+  return flat;
+};
+
+var isInBounds = function isInBounds(loc, extendedBounds) {
+  var extendPoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+
+  if (Number.isFinite(loc.latitude) && Number.isFinite(loc.longitude)) {
+    if (extendPoints > 0) {
+      var lats = [loc.latitude - extendPoints, loc.latitude + extendPoints];
+      var lngs = [loc.longitude - extendPoints, loc.longitude + extendPoints];
+      return !(lats[0] > extendedBounds.lat[1] || lats[1] < extendedBounds.lat[0] || lngs[0] > extendedBounds.lng[1] || lngs[1] < extendedBounds.lng[0]);
+    }
+
+    return loc.latitude >= extendedBounds.lat[0] && loc.latitude <= extendedBounds.lat[1] && loc.longitude >= extendedBounds.lng[0] && loc.longitude <= extendedBounds.lng[1];
+  }
+
+  if (loc.geometry && loc.geometry.coordinates) {
+    var flatCoords = flatten(loc.geometry.coordinates);
+    return flatCoords.some(function (coord) {
+      return coord[0] >= extendedBounds.lat[0] && coord[0] <= extendedBounds.lat[1] && coord[1] >= extendedBounds.lng[0] && coord[1] <= extendedBounds.lng[1];
+    });
+  }
+
+  return false;
+};
+
 var calculateLocationsInBounds = function calculateLocationsInBounds(locations) // Number, a margin to add/subtract to lat/lon for a point's hit box
 {
   var bounds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -2326,44 +2384,9 @@ var calculateLocationsInBounds = function calculateLocationsInBounds(locations)
   var extendedBounds = !extendMap ? bounds : Object.fromEntries(Object.keys(bounds).map(function (dir) {
     var buffer = (bounds[dir][1] - bounds[dir][0]) / 2;
     return [dir, [bounds[dir][0] - buffer, bounds[dir][1] + buffer]];
-  })); // This function flattens a geometry object to just coordinates so we can check if a boundary
-  // is in the map. NOTE: extendPoints does not work with boundaries, only solitary points.
-
-  var flatten = function flatten(items) {
-    var flat = [];
-    items.forEach(function (item) {
-      if (Array.isArray(item) && !isCoord(item)) {
-        flat.push.apply(flat, _toConsumableArray(flatten(item)));
-      } else {
-        flat.push(item);
-      }
-    });
-    return flat;
-  };
-
-  var isInBounds = function isInBounds(loc) {
-    if (Number.isFinite(loc.latitude) && Number.isFinite(loc.longitude)) {
-      if (extendPoints > 0) {
-        var lats = [loc.latitude - extendPoints, loc.latitude + extendPoints];
-        var lngs = [loc.longitude - extendPoints, loc.longitude + extendPoints];
-        return !(lats[0] > extendedBounds.lat[1] || lats[1] < extendedBounds.lat[0] || lngs[0] > extendedBounds.lng[1] || lngs[1] < extendedBounds.lng[0]);
-      }
-
-      return loc.latitude >= extendedBounds.lat[0] && loc.latitude <= extendedBounds.lat[1] && loc.longitude >= extendedBounds.lng[0] && loc.longitude <= extendedBounds.lng[1];
-    }
-
-    if (loc.geometry && loc.geometry.coordinates) {
-      var flatCoords = flatten(loc.geometry.coordinates);
-      return flatCoords.some(function (coord) {
-        return coord[0] >= extendedBounds.lat[0] && coord[0] <= extendedBounds.lat[1] && coord[1] >= extendedBounds.lng[0] && coord[1] <= extendedBounds.lng[1];
-      });
-    }
-
-    return false;
-  };
-
+  }));
   return Object.keys(locations).filter(function (locId) {
-    return isInBounds(locations[locId]);
+    return isInBounds(locations[locId], extendedBounds, extendPoints);
   });
 };
 

lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts

@@ -57,6 +57,8 @@ export namespace TabComponentPropTypes {
     }>;
 }
 export namespace DEFAULT_STATE {
+    import mode = DEFAULT;
+    export { mode };
     import status = INIT_PRODUCT;
     export { status };
     export const displayError: null;
@@ -177,6 +179,7 @@ export function getTestableItems(): {
     TimeSeriesViewerPropTypes?: undefined;
 } | {
     DEFAULT_STATE: {
+        mode: string;
         status: string;
         displayError: null;
         fetchProduct: {
@@ -268,6 +271,10 @@ export type ParseSiteVariablesReturn = {
     variablesObject: Object;
 };
 import PropTypes from "prop-types";
+declare namespace VIEWER_MODE {
+    export const DEFAULT: string;
+    export const STATIC: string;
+}
 declare namespace FETCH_STATUS {
     export const AWAITING_CALL: string;
     export const FETCHING: string;
@@ -286,13 +293,17 @@ declare namespace TimeSeriesViewerContext {
 declare function Provider(props: any): JSX.Element;
 declare namespace Provider {
     export namespace propTypes {
+        const mode_1: PropTypes.Requireable<string>;
+        export { mode_1 as mode };
         import productCode_1 = productCode;
         export { productCode_1 as productCode };
         import productData = productData;
         export { productData };
         export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     }
     export namespace defaultProps {
+        import mode_2 = DEFAULT;
+        export { mode_2 as mode };
         const productCode_2: null;
         export { productCode_2 as productCode };
         const productData_1: null;