v2.12.0 (NEONScience#81)

* Disabling Fine Time Series at Threshold

The finer time series are disabled when the predicted calculation of data points exceeds a threshold (currently 250000)

* Update TimeSeriesViewerContext.jsx

calcPredictedPoints more precise with hours calculated using JS Date objects.

* Calm the Linter

* Calm the Linter

* Disabling Site and Position

Disabling UI controls for site and position selection when points might cross the performance limit threshold.

* Restricting in Positions Dialog

* Restricting Variables

* Tweak Prediction Calc

Calc was producing different results when either the variable or position had just one selection.  Now summing them to "normalize" them.

* Map Upper Limit Restricted

* Position Selection Fix

Fixed issue where position selection dialog did not account for positions selected for other sites.

* Date Pickers/Sliders Now Points Restricted

* Calc Change and Cleanup

* Cleanup

Code clean up to bring it up to original state of linter rules.

* Add Status Bar

* Status Bar Look/Feel Improvements

* Prediction Calc Back to What It Should Be

* Update TimeSeriesViewerSites.jsx

Improved styling and appearance trigger of "performance issues" warning

* Update TimeSeriesViewerContainer.jsx

"approaching limit" warning trigger improved to account for when variable/position UI elements disable

* Disabled Text

Add "(disabled)" Sites and Variables textbox placeholders when disabled to make it more obvious to the user

* Update index.html

Replace stylesheet link that was removed accidentally.

* Fixes and Lib Build

Fixes related to unit tests errors.
Build lib files.

* getLastDayInMonth

Function now uses JS date object for last day determination.
Function also now takes 'yyyy-mm' date range item to cut down on parsing.

* getDate() to getUTCDate()

* Update Version to 2.12.0

Author: fairbAtBattelle

.eslintrc.json

@@ -46,8 +46,7 @@
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "react/jsx-props-no-spreading": 0,
     "no-restricted-exports": 0,
-    "no-shadow": "off",
-    "no-use-before-define": "off"
+    "no-shadow": "off"
   },
   "overrides": [
     {

lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js

@@ -512,11 +512,13 @@ const TimeStepOption = () => {
     }
   }, Array.from(availableTimeSteps).map(timeStep => {
     const className = timeStep === selectedTimeStep ? "".concat(classes.optionButton, " ").concat(classes.optionButtonSelected) : classes.optionButton;
+    const isDisabled = _TimeSeriesViewerContext.default.calcPredictedPointsByTimeStep(state, timeStep) > _TimeSeriesViewerContext.POINTS_PERFORMANCE_LIMIT;
     return /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
       key: timeStep,
       value: timeStep,
       size: "small",
-      className: className
+      className: className,
+      disabled: isDisabled
     }, timeStep);
   }));
 };

lib/components/TimeSeriesViewer/TimeSeriesViewerContainer.js

@@ -26,6 +26,8 @@ var _Place = _interopRequireDefault(require("@material-ui/icons/Place"));
 var _DateRange = _interopRequireDefault(require("@material-ui/icons/DateRange"));
 var _Timeline = _interopRequireDefault(require("@material-ui/icons/Timeline"));
 var _BorderInner = _interopRequireDefault(require("@material-ui/icons/BorderInner"));
+var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _Computer = _interopRequireDefault(require("@material-ui/icons/Computer"));
 var _ReleaseChip = _interopRequireDefault(require("../Chip/ReleaseChip"));
 var _Theme = _interopRequireWildcard(require("../Theme/Theme"));
 var _RouteService = _interopRequireDefault(require("../../service/RouteService"));
@@ -133,6 +135,22 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center'
+  },
+  statusBar: {
+    marginLeft: '-4px',
+    marginRight: '-4px',
+    backgroundColor: _Theme.default.palette.grey[200],
+    padding: '4px 4px 4px 12px',
+    '& svg': {
+      verticalAlign: 'bottom',
+      marginRight: '4px'
+    },
+    '& .warningMessage': {
+      marginLeft: '20px',
+      '& svg': {
+        color: _Theme.default.colors.BROWN[300]
+      }
+    }
   }
 }));
 const useTabsStyles = (0, _styles.makeStyles)(theme => ({
@@ -579,6 +597,51 @@ function TimeSeriesViewerContainer() {
     }
     return null;
   };
+
+  // function complements of Battelle ANNI
+  // move to 'helper' file if one exists
+  const addThousandsSeparator = numStr => {
+    /* eslint-disable */
+    if (!numStr) {
+      return '0';
+    }
+    const numStrString = numStr.toString();
+    let [integer, decimal] = numStrString.split('.');
+    let result = '';
+    let count = 0;
+
+    // Process integer part from right to left
+    for (let i = integer.length - 1; i >= 0; i--) {
+      result = integer[i] + result;
+      count += 1;
+      // Add comma after every 3 digits, except at the start
+      if (count % 3 === 0 && i !== 0) {
+        result = ',' + result;
+      }
+    }
+
+    // Reattach decimal part if present
+    return decimal ? "".concat(result, ".").concat(decimal) : result;
+  };
+  const renderStatusBar = () => {
+    let showWarning = false;
+    const pointTotal = state.status !== _constants.TIME_SERIES_VIEWER_STATUS.READY ? '--' : addThousandsSeparator(state.pointTotal);
+    if (_TimeSeriesViewerContext.default.calcPredictedPointsForNewPosition(state) > _TimeSeriesViewerContext.POINTS_PERFORMANCE_LIMIT || _TimeSeriesViewerContext.default.calcPredictedPointsForNewVariable(state) > _TimeSeriesViewerContext.POINTS_PERFORMANCE_LIMIT) {
+      showWarning = true;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.statusBar
+    }, /*#__PURE__*/_react.default.createElement(_Computer.default, {
+      fontSize: "medium"
+    }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("b", null, "Data Points"), ":\xA0"), pointTotal, /*#__PURE__*/_react.default.createElement("span", null, " of "), addThousandsSeparator(_TimeSeriesViewerContext.POINTS_PERFORMANCE_LIMIT), /*#__PURE__*/_react.default.createElement("span", {
+      className: "warningMessage",
+      style: {
+        visibility: showWarning ? 'visible' : 'hidden'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Warning.default, {
+      fontSize: "medium"
+    }), "Data point total approaching limit; some options are disabled."));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%'
@@ -589,7 +652,7 @@ function TimeSeriesViewerContainer() {
     style: {
       position: 'relative'
     }
-  }, state.product.productCode === loadedProductCode ? /*#__PURE__*/_react.default.createElement(_TimeSeriesViewerGraph.default, null) : null, renderGraphOverlay()), /*#__PURE__*/_react.default.createElement("div", {
+  }, state.product.productCode === loadedProductCode ? /*#__PURE__*/_react.default.createElement(_TimeSeriesViewerGraph.default, null) : null, renderGraphOverlay()), renderStatusBar(), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.tabsContainer
   }, renderTabs(), renderTabPanels())));
 }

lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts

@@ -7,6 +7,7 @@ export namespace TIME_SERIES_VIEWER_STATUS_TITLES {
     const ERROR: null;
     const READY: null;
 }
+export const POINTS_PERFORMANCE_LIMIT: 250000;
 export namespace Y_AXIS_RANGE_MODES {
     const CENTERED: string;
     const FROM_ZERO: string;
@@ -53,6 +54,7 @@ export namespace DEFAULT_STATE {
     export const dataFetches: {};
     export const dataFetchProgress: number;
     export const variables: {};
+    export const pointTotal: number;
     export namespace product {
         const productCode: null;
         const productName: null;
@@ -204,6 +206,7 @@ export function getTestableItems(): {
         dataFetches: {};
         dataFetchProgress: number;
         variables: {};
+        pointTotal: number;
         product: {
             productCode: null;
             productName: null;
@@ -325,6 +328,11 @@ declare namespace TimeSeriesViewerContext {
     export { Provider };
     export { useTimeSeriesViewerState };
     export { TimeSeriesViewerPropTypes };
+    export { calcPredictedPointsForNewPosition };
+    export { calcPredictedPointsByTimeStep };
+    export { calcPredictedPointsForNewVariable };
+    export { calcPredictedPointsByDateRange };
+    export { getPositionCount };
 }
 /**
    Context Provider
@@ -367,6 +375,7 @@ declare function useTimeSeriesViewerState(): {
     dataFetches: {};
     dataFetchProgress: number;
     variables: {};
+    pointTotal: number;
     product: {
         productCode: null;
         productName: null;
@@ -442,6 +451,7 @@ declare function useTimeSeriesViewerState(): {
     dataFetches: {};
     dataFetchProgress: number;
     variables: {};
+    pointTotal: number;
     product: {
         productCode: null;
         productName: null;
@@ -512,4 +522,9 @@ declare namespace TimeSeriesViewerPropTypes {
     export function productData_2(props: any, propName: any, componentName: any): Error | null;
     export { productData_2 as productData };
 }
+declare function calcPredictedPointsForNewPosition(state: any, numPositionsOverride: any): number;
+declare function calcPredictedPointsByTimeStep(state: any, timeStep: any): number;
+declare function calcPredictedPointsForNewVariable(state: any): number;
+declare function calcPredictedPointsByDateRange(state: any, startDate: any, endDate: any): number;
+declare function getPositionCount(sitesArray: any, siteCodeToExclude: any): number;
 import { number } from "prop-types";

lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.summarizeTimeSteps = exports.getTestableItems = exports.default = exports.Y_AXIS_RANGE_MODE_DETAILS = exports.Y_AXIS_RANGE_MODES = exports.TabComponentPropTypes = exports.TIME_STEPS = exports.TIME_SERIES_VIEWER_STATUS_TITLES = exports.DEFAULT_STATE = void 0;
+exports.summarizeTimeSteps = exports.getTestableItems = exports.default = exports.Y_AXIS_RANGE_MODE_DETAILS = exports.Y_AXIS_RANGE_MODES = exports.TabComponentPropTypes = exports.TIME_STEPS = exports.TIME_SERIES_VIEWER_STATUS_TITLES = exports.POINTS_PERFORMANCE_LIMIT = exports.DEFAULT_STATE = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireWildcard(require("prop-types"));
 var _moment = _interopRequireDefault(require("moment"));
@@ -53,6 +53,7 @@ const TIME_SERIES_VIEWER_STATUS_TITLES = exports.TIME_SERIES_VIEWER_STATUS_TITLE
   ERROR: null,
   READY: null
 };
+const POINTS_PERFORMANCE_LIMIT = exports.POINTS_PERFORMANCE_LIMIT = 250000;
 
 // List of common date-time variable names to verify against
 // The variables file ultimately controls the datetime variable that will
@@ -146,6 +147,7 @@ const DEFAULT_STATE = exports.DEFAULT_STATE = {
   dataFetches: {},
   dataFetchProgress: 0,
   variables: {},
+  pointTotal: 0,
   product: {
     productCode: null,
     productName: null,
@@ -297,9 +299,104 @@ const summarizeTimeSteps = function (steps) {
   const plural = pluralize ? 's' : '';
   return "".concat(value, " ").concat(intervals[breakIdx]).concat(plural);
 };
+exports.summarizeTimeSteps = summarizeTimeSteps;
+const getPositionCount = (sitesArray, siteCodeToExclude) => {
+  let total = 0;
+  sitesArray.forEach(site => {
+    if (site.siteCode !== siteCodeToExclude) {
+      total += site.positions.length;
+    }
+  });
+  return total;
+};
+
+// yearMonth param is in the format of 'yyyy-mm' which is
+// a typical dateRange item
+const getLastDayInMonth = yearMonth => {
+  const date = new Date("".concat(yearMonth, "-01T00:00:00Z"));
+  date.setUTCMonth(date.getUTCMonth() + 1);
+  date.setUTCSeconds(date.getUTCSeconds() - 1);
+  return date.getUTCDate();
+};
+const getTotalHoursCustom = (startDate, endDate) => {
+  const date1 = new Date("".concat(startDate, "-01T00:00:00Z"));
+  const lastDay = getLastDayInMonth(endDate);
+  const date2 = new Date("".concat(endDate, "-").concat(lastDay, "T23:59:59Z"));
+  return Math.round((date2.getTime() - date1.getTime()) / 1000 / 60 / 60);
+};
+const getTotalHours = state => {
+  const date1 = new Date("".concat(state.selection.dateRange[0], "-01T00:00:00Z"));
+  let date2;
+  if (state.selection.continuousDateRange.length === 1) {
+    const lastDay = getLastDayInMonth(state.selection.continuousDateRange[0]);
+    date2 = new Date("".concat(state.selection.continuousDateRange[0], "-").concat(lastDay, "T23:59:59Z"));
+  } else if (state.selection.dateRange.length === 2) {
+    const lastDay = getLastDayInMonth(state.selection.dateRange[1]);
+    date2 = new Date("".concat(state.selection.dateRange[1], "-").concat(lastDay, "T23:59:59Z"));
+  } else {
+    // eslint-disable-next-line no-console
+    console.error('Unknown date range');
+  }
+  return Math.round((date2.getTime() - date1.getTime()) / 1000 / 60 / 60);
+};
+const getPointsPerHour = (state, currentTimeStep) => {
+  const secondsInHour = 3600;
+  const timeStep = currentTimeStep === 'auto' ? state.selection.autoTimeStep : currentTimeStep;
+  const timeStepSeconds = TIME_STEPS[timeStep].seconds;
+  return secondsInHour / timeStepSeconds;
+};
+const calcPointTotal = data => {
+  if (!data) {
+    return 0;
+  }
+  let varsAndPositions = 0;
+  if (data.length > 0 && data[0].length > 1) {
+    // first array position is dateTime.  Count items after it
+    varsAndPositions = data[0].length - 1;
+  }
+  return data.length * varsAndPositions;
+};
+const calcPredictedPointsByTimeStep = (state, timeStep) => {
+  if (!state.selection.autoTimeStep) return 0;
+
+  // formula: points per hour (seconds in hour / Time Step seconds)
+  // x hours (months selected converted to hours) x positions * variables
+  // using seconds for points per hour since that is what TIME_STEPS has.
+  const positions = getPositionCount(state.selection.sites);
+  const pointPerHour = getPointsPerHour(state, timeStep);
+  const variables = state.selection.variables.length === 0 ? 1 : state.selection.variables.length;
+  const totalHours = getTotalHours(state);
+  return pointPerHour * totalHours * positions * variables;
+};
+const calcPredictedPointsForNewPosition = (state, numPositionsOverride) => {
+  if (!state.selection.autoTimeStep) return 0;
+  const positions = numPositionsOverride !== null && numPositionsOverride !== void 0 ? numPositionsOverride : getPositionCount(state.selection.sites) + 1;
+  const pointPerHour = getPointsPerHour(state, state.selection.timeStep);
+  const variables = state.selection.variables.length === 0 ? 1 : state.selection.variables.length;
+  const totalHours = getTotalHours(state);
+  return pointPerHour * totalHours * positions * variables;
+};
+const calcPredictedPointsForNewVariable = state => {
+  if (!state.selection.autoTimeStep) return 0;
+  const positions = getPositionCount(state.selection.sites);
+  const pointPerHour = getPointsPerHour(state, state.selection.timeStep);
+  const totalHours = getTotalHours(state);
+  const variables = state.selection.variables.length === 0 ? 1 : state.selection.variables.length + 1;
+  return pointPerHour * totalHours * positions * variables;
+};
+
+// note that the dates are not JS dates but from dateRange and should be
+// in the format of 'yyyy-mm'.
+const calcPredictedPointsByDateRange = (state, startDate, endDate) => {
+  if (!state.selection.autoTimeStep) return 0;
+  const positions = getPositionCount(state.selection.sites);
+  const pointPerHour = getPointsPerHour(state, state.selection.timeStep);
+  const variables = state.selection.variables.length === 0 ? 1 : state.selection.variables.length;
+  const totalHours = getTotalHoursCustom(startDate, endDate);
+  return pointPerHour * totalHours * positions * variables;
+};
 
 // Array offsets and validators for use when splitting a data file URL
-exports.summarizeTimeSteps = summarizeTimeSteps;
 const DATA_FILE_PARTS = {
   POSITION_H: {
     offset: 6,
@@ -1144,6 +1241,7 @@ const reducer = (state, action) => {
         return softFail('Current selection of dates/sites/positions/variables does not have any valid numeric data.');
       }
       newState.graphData = action.graphData;
+      newState.pointTotal = calcPointTotal(action.graphData.data);
       newState.status = _constants.TIME_SERIES_VIEWER_STATUS.READY;
       return newState;
 
@@ -1218,6 +1316,22 @@ const reducer = (state, action) => {
     case 'fetchDataFileSucceeded':
       newState.product.sites[action.siteCode].positions[action.position].data[action.month][action.downloadPkg][action.timeStep][action.table].status = FETCH_STATUS.SUCCESS;
       newState.product.sites[action.siteCode].positions[action.position].data[action.month][action.downloadPkg][action.timeStep][action.table].series = action.series;
+      /*  uncomment for troubleshooting to get number of points downloaded
+      try {
+        if (!newState.product.pointTotal || isNaN(newState.product.pointTotal)) {
+          newState.product.pointTotal = 0;
+        }
+         newState.product.pointTotal += action.series.endDateTime.data.length;
+        console.log("newState", newState);
+        // console.log("action", action);
+        console.log("fetchDataFileSucceeded - pointTotal", newState.product.pointTotal);
+        // console.log("newState.selection.continuousDateRange.length",
+        // newState.selection.continuousDateRange.length);
+      } catch (error) {
+        console.log("my derpy code crashed", action);
+      }
+      */
+
       return newState;
 
     // Core Selection Actions
@@ -1819,6 +1933,9 @@ const Provider = props => {
           token: masterFetchToken,
           fetches: dataActions
         });
+        // this is the point where we can capture the user fetch criteria
+        // eslint-disable-next-line no-console
+        // console.log('Fetching data', state, dataFetches);
         (0, _rxUtil.forkJoinWithProgress)(dataFetches).pipe((0, _rxjs.mergeMap)(_ref => {
           let [finalResult, progress] = _ref;
           return (0, _rxjs.merge)(progress.pipe((0, _rxjs.tap)(value => dispatch({
@@ -1906,7 +2023,12 @@ Provider.defaultProps = {
 const TimeSeriesViewerContext = {
   Provider,
   useTimeSeriesViewerState,
-  TimeSeriesViewerPropTypes
+  TimeSeriesViewerPropTypes,
+  calcPredictedPointsForNewPosition,
+  calcPredictedPointsByTimeStep,
+  calcPredictedPointsForNewVariable,
+  calcPredictedPointsByDateRange,
+  getPositionCount
 };
 var _default = exports.default = TimeSeriesViewerContext; // Additional items exported for unit testing
 const getTestableItems = () => process.env.NODE_ENV !== 'test' ? {} : {