Merge pull request #7 from USEPA/feature/update-input-validation

Feature/update input validation

epa-avert-webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "epa-avert-webapp",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "private": true,
   "description": "EPA's Avoided Emissions and Generation Tools (AVERT) is a free tool that estimates the emissions benefits of energy efficiency and renewable energy policies and programs.",
   "author": "Eastern Research Group, Inc.",
@@ -19,23 +19,23 @@
   "homepage": ".",
   "devDependencies": {
     "react-scripts": "1.1.4",
-    "redux-mock-store": "1.5.1"
+    "redux-mock-store": "1.5.3"
   },
   "dependencies": {
     "blob": "0.0.4",
     "file-saver": "1.3.8",
-    "flow-bin": "0.72.0",
+    "flow-bin": "0.78.0",
     "highcharts-exporting": "0.1.7",
     "husky": "0.14.3",
-    "json2csv": "4.1.2",
-    "lint-staged": "7.1.1",
-    "prettier": "1.12.1",
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
+    "json2csv": "4.2.1",
+    "lint-staged": "7.2.0",
+    "prettier": "1.14.0",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
     "react-highcharts": "16.0.2",
     "react-redux": "5.0.7",
     "redux": "4.0.0",
-    "redux-thunk": "2.2.0",
+    "redux-thunk": "2.3.0",
     "stats-lite": "2.1.1"
   },
   "lint-staged": {
@@ -48,6 +48,7 @@
     "precommit": "lint-staged",
     "start": "react-scripts start",
     "build:pcf": "REACT_APP_URL=https://avert-dev.cfapps.io npm run build",
+    "build:dev": "REACT_APP_URL=https://avert-dev.app.cloud.gov npm run build",
     "build": "react-scripts build && ./sync-build-with-public.sh",
     "test": "react-scripts test --verbose",
     "coverage": "react-scripts test --coverage",

epa-avert-webapp/src/app/components/App/styles.css

@@ -31,7 +31,8 @@ body {
 /* --- typography --- */
 h1,
 h2,
-h3 {
+h3,
+h4 {
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   font-size: 1rem;
@@ -170,19 +171,29 @@ fieldset {
 }
 
 /* --- chart titles --- */
-.avert-chart-title {
-  font-size: 0.75rem;
+.avert-chart-title,
+.avert-chart-subtitle {
   line-height: 1.125;
   font-weight: bold;
   text-align: center;
   color: #444;
 }
 
+.avert-chart-title {
+  font-size: 0.75rem;
+}
+
+.avert-chart-subtitle {
+  margin-top: 0.5rem;
+  font-size: 0.625rem;
+}
+
 /* --- media queries --- */
 @media (min-width: 25em) {
   h1,
   h2,
-  h3 {
+  h3,
+  h4 {
     margin-top: 1.125rem;
     font-size: 1.0625rem;
   }
@@ -240,7 +251,8 @@ fieldset {
 @media (min-width: 30em) {
   h1,
   h2,
-  h3 {
+  h3,
+  h4 {
     margin-top: 1.25rem;
     font-size: 1.125rem;
   }
@@ -293,12 +305,17 @@ fieldset {
   .avert-chart-title {
     font-size: 0.875rem;
   }
+
+  .avert-chart-subtitle {
+    font-size: 0.6875rem;
+  }
 }
 
 @media (min-width: 35em) {
   h1,
   h2,
-  h3 {
+  h3,
+  h4 {
     margin-top: 1.375rem;
     font-size: 1.1875rem;
   }
@@ -361,7 +378,8 @@ fieldset {
 @media (min-width: 40em) {
   h1,
   h2,
-  h3 {
+  h3,
+  h4 {
     margin-top: 1.5rem;
     font-size: 1.25rem;
   }
@@ -414,4 +432,8 @@ fieldset {
   .avert-chart-title {
     font-size: 1rem;
   }
+
+  .avert-chart-subtitle {
+    font-size: 0.75rem;
+  }
 }

epa-avert-webapp/src/app/components/EEREChart/index.js

@@ -39,6 +39,7 @@ type Eere = {
 
 type Props = {
   heading: string,
+  subheading: string,
   // redux connected props
   softValid: boolean,
   softTopExceedanceValue: number,
@@ -141,13 +142,16 @@ const EEREChart = (props: Props) => {
           {props.heading}{' '}
           <Tooltip id={8}>
             This graph shows the hourly changes in load that will result from
-            the inputs entered above, along with adjustments for avoided
-            transmission and distribution line loss, where applicable. This
-            hourly EE/RE profile will be used to calculate the avoided emissions
-            for this AVERT region.
+            the inputs entered above. It reflects a combination of all inputs,
+            typical capacity factors for wind and solar, and adjustments for
+            avoided transmission and distribution line loss, where applicable.
+            This hourly EE/RE profile will be used to calculate the avoided
+            emissions for this AVERT region.
           </Tooltip>
         </h3>
 
+        <h4 className="avert-chart-subtitle">{props.subheading}</h4>
+
         <Highcharts config={chartConfig} callback={afterRender} />
 
         <p className="avert-small-text">

epa-avert-webapp/src/app/components/EEREInputs/index.js

@@ -24,6 +24,7 @@ type Props = {
     annualGwh: boolean | number,
     constantMwh: boolean | number,
     renewables: boolean | number,
+    percent: boolean | number,
   },
   onConstantMwChange: (string) => void,
   onAnnualGwhChange: (string) => void,
@@ -71,10 +72,11 @@ const EEREInputs = (props: Props) => {
               Please enter a number between 0 and {input.max}.
             </span>
             This will help ensure that each of your proposed programs displaces
-            no more than 15% of hourly regional fossil generation, which is the
-            recommended limit for AVERT. AVERT is designed to simulate marginal
-            operational changes in load, rather than large-scale changes that
-            may change fundamental dynamics.
+            no more than approximately 30% of regional fossil generation in any
+            given hour. After you enter all your inputs and calculate your
+            hourly EE/RE profile below, AVERT will check more precisely to
+            ensure that your combined inputs are within AVERT’s recommended
+            limits.
           </span>
         );
       } else {
@@ -218,7 +220,7 @@ const EEREInputs = (props: Props) => {
                 {displayError({
                   name: 'reduction',
                   value: broadProgram,
-                  max: 15,
+                  max: limits.percent,
                 })}
               </li>
 
@@ -250,7 +252,7 @@ const EEREInputs = (props: Props) => {
                 {displayError({
                   name: 'reduction',
                   value: reduction,
-                  max: 15,
+                  max: limits.percent,
                 })}
 
                 {displayError({

epa-avert-webapp/src/app/components/StepPanels/index.js

@@ -96,9 +96,10 @@ const StepPanels = (props: Props) => {
           <p>
             AVERT splits the contiguous 48 states into 10 regions. AVERT regions
             are aggregated based on EPA’s{' '}
-            <a href="https://www.epa.gov/energy/egrid">eGRID subregions</a>.
-            Select a region for analysis by either using the dropdown menu or
-            clicking the map. Selecting a region loads the power plants
+            <a href="https://www.epa.gov/energy/egrid" target="_parent">
+              eGRID subregions
+            </a>. Select a region for analysis by either using the dropdown menu
+            or clicking the map. Selecting a region loads the power plants
             operating within each region and region-specific wind and solar
             capacity data.
           </p>
@@ -111,7 +112,10 @@ const StepPanels = (props: Props) => {
             The online version of AVERT can run analyses using 2017 emissions
             and generation data. The Excel version of AVERT (available for
             download{' '}
-            <a href="https://www.epa.gov/statelocalenergy/download-avert">
+            <a
+              href="https://www.epa.gov/statelocalenergy/download-avert"
+              target="_parent"
+            >
               here
             </a>) allows analyses for years 2007–2017 or for a future year
             scenario.
@@ -130,7 +134,10 @@ const StepPanels = (props: Props) => {
             displaced by EE/RE policies and programs. Specify the impacts of
             EE/RE programs below, and AVERT will use these inputs to generate
             results. For more information about inputs, please consult the{' '}
-            <a href="https://www.epa.gov/statelocalenergy/avert-user-manual">
+            <a
+              href="https://www.epa.gov/statelocalenergy/avert-user-manual"
+              target="_parent"
+            >
               AVERT user manual
             </a>{' '}
             or click the <span className="avert-modal-link" /> icon for each
@@ -145,7 +152,10 @@ const StepPanels = (props: Props) => {
 
           <EEREInputs />
 
-          <EEREChart heading="EE/RE profile based on values entered:" />
+          <EEREChart
+            heading="EE/RE profile based on values entered:"
+            subheading="Adjusted for transmission and distribution line loss and wind and solar capacity factors, where applicable."
+          />
         </PanelBody>
 
         <PanelFooter

epa-avert-webapp/src/app/components/UnitConversion/index.js

@@ -71,7 +71,7 @@ class UnitConversion extends React.Component<Props, State> {
           <span className="avert-unit-conversion-heading">
             Helpful Unit Conversions
           </span>{' '}
-          <Tooltip id={8}>
+          <Tooltip id={9}>
             To convert units from power (<strong>kW, MW, GW</strong>) to energy
             (<strong>kWh, MWh, GWh</strong>), multiply by the total number of
             hours in the year. To convert in the other direction, divide by the

epa-avert-webapp/src/app/engines/EereProfile.js

@@ -4,7 +4,7 @@ class EereProfile {
       annualGwh: false,
       constantMwh: false,
       renewables: false,
-      softPercent: 15,
+      percent: false,
     };
     this._errors = [];
     this._annualGwh = 0;
@@ -18,12 +18,12 @@ class EereProfile {
 
   set limits(obj) {
     // calculate constantMwh (hourly) from annualGwh (total for year)
-    const hourly = obj.annualGwh * 1000 / obj.hours;
+    const hourly = (obj.annualGwh * 1000) / obj.hours;
     this._limits = {
-      annualGwh: obj.annualGwh,
+      annualGwh: obj.annualGwh * 2,
       constantMwh: Math.round(hourly * 100) / 100,
-      renewables: obj.renewables,
-      softPercent: 15,
+      renewables: obj.renewables * 2,
+      percent: obj.percent * 2,
     };
   }
 
@@ -93,7 +93,7 @@ class EereProfile {
 
   set reduction(input) {
     this._removeError('reduction');
-    if (this._isNegativeOrNaN(input) || input > this._limits.softPercent) {
+    if (this._isNegativeOrNaN(input) || input > this._limits.percent) {
       this._addError('reduction');
     }
     this._reduction = input;

epa-avert-webapp/src/app/engines/Rdf.js

@@ -3,6 +3,7 @@ class Rdf {
     this._regionName = ''; // not actually used (for debugging)
     this._maxAnnualGwh = null;
     this._maxRenewableMwh = null;
+    this._maxEEPercent = null;
     this._regionalLoads = [];
     this._softLimits = [];
     this._hardLimits = [];
@@ -24,6 +25,7 @@ class Rdf {
     this._regionName = rdf.region.region_name;
     this._maxAnnualGwh = rdf.limits.max_ee_yearly_gwh;
     this._maxRenewableMwh = rdf.limits.max_solar_wind_mwh;
+    this._maxEEPercent = rdf.limits.max_ee_percent;
     this._regionalLoads = [];
     this._softLimits = [];
     this._hardLimits = [];
@@ -32,7 +34,7 @@ class Rdf {
     rdf.regional_load.forEach((item) => {
       const load = item.regional_load_mw;
       this._regionalLoads.push(load);
-      this._softLimits.push(load * -1 * rdf.limits.max_ee_percent / 100); // -0.15
+      this._softLimits.push((load * -1 * rdf.limits.max_ee_percent) / 100); // -0.15
       this._hardLimits.push(load * -0.3);
       this._months.push(item.month);
     });
@@ -50,6 +52,10 @@ class Rdf {
     return this._maxRenewableMwh;
   }
 
+  get maxEEPercent() {
+    return this._maxEEPercent;
+  }
+
   get regionalLoads() {
     return this._regionalLoads;
   }

epa-avert-webapp/src/app/redux/eere.js

@@ -36,6 +36,7 @@ const initialState = {
     annualGwh: false,
     constantMwh: false,
     renewables: false,
+    percent: false,
   },
   softLimit: {
     valid: true,

epa-avert-webapp/src/app/redux/rdfs.js

@@ -51,6 +51,7 @@ export const fetchRegion = () => {
           hours: avert.rdf.months.length,
           annualGwh: avert.rdf.maxAnnualGwh,
           renewables: avert.rdf.maxRenewableMwh,
+          percent: avert.rdf.maxEEPercent,
         };
 
         dispatch({