Deploy test

.github/workflows/deploy_prod_to_s3.yml

@@ -47,7 +47,7 @@ jobs:
           echo "REACT_APP_HAZARD_COLOR_UNCERTAINTY_OPACITY=0.8" >> .env
           echo "REACT_APP_MAP_IMTS=PGA,SA(0.1),SA(0.2),SA(0.3),SA(0.4),SA(0.5),SA(0.7),SA(1.0),SA(1.5),SA(2.0),SA(3.0),SA(4.0),SA(5.0),SA(6.0),SA(7.5),SA(10.0)" >> .env
           echo "REACT_APP_MAP_VS30S=150,175,200,225,250,275,300,350,375,400,450,500,600,750,900,1000,1500" >> .env
-          echo "REACT_APP_MAP_STATISTICS=mean,cov,0.1,0.2,0.5,0.8,0.9" >> .env
+          echo "REACT_APP_MAP_STATISTICS=mean,cov,0.05,0.1,0.2,0.5,0.8,0.9,0.95" >> .env
           echo "REACT_APP_MAP_POES=0.1,0.02" >> .env
           echo "REACT_APP_MAP_COLOR_SCALE=jet,inferno,viridis,plasma,magma,cividis" >> .env
           echo "REACT_APP_MAP_ZOOM_MIN=2" >> .env

.github/workflows/deploy_test_to_s3.yml

@@ -50,7 +50,7 @@ jobs:
           echo "REACT_APP_HAZARD_COLOR_UNCERTAINTY_OPACITY=0.8" >> .env
           echo "REACT_APP_MAP_IMTS=PGA,SA(0.1),SA(0.2),SA(0.3),SA(0.4),SA(0.5),SA(0.7),SA(1.0),SA(1.5),SA(2.0),SA(3.0),SA(4.0),SA(5.0),SA(6.0),SA(7.5),SA(10.0)" >> .env
           echo "REACT_APP_MAP_VS30S=150,175,200,225,250,275,300,350,375,400,450,500,600,750,900,1000,1500" >> .env
-          echo "REACT_APP_MAP_STATISTICS=mean,cov,0.1,0.2,0.5,0.8,0.9" >> .env
+          echo "REACT_APP_MAP_STATISTICS=mean,cov,0.05,0.1,0.2,0.5,0.8,0.9,0.95" >> .env
           echo "REACT_APP_MAP_POES=0.1,0.02" >> .env
           echo "REACT_APP_MAP_COLOR_SCALE=jet,inferno,viridis,plasma,magma,cividis" >> .env
           echo "REACT_APP_MAP_ZOOM_MIN=2" >> .env

cypress/e2e/HazardCurves.cy.ts

@@ -67,7 +67,7 @@ describe('Hazard Curves', () => {
     cy.get('[data-testid="ArrowDropDownIcon"]').first().click({ force: true });
     cy.get('li').contains('Christchurch').click({ force: true });
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should('have.length', 10);
+    cy.wait(1000);
     cy.get('div[class="visx-legend-label"]').should('contain.text', '400m/s PGA Christchurch 400m/s PGA Wellington');
   });
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "kororaa",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@gns-science/toshi-nest": "^3.9.7",
+    "@gns-science/toshi-nest": "^3.9.9",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "adblock-detect-react": "^1.1.0",
@@ -38,7 +38,7 @@
     "lint": "eslint ./src/**/*.{ts,tsx} --quiet --fix",
     "prepush": "yarn test",
     "prepare": "husky install",
-    "version": "auto-changelog -p -o src/CHANGELOG.md --template keepachangelog --commitLimit 10 && git add src/CHANGELOG.md"
+    "version": "auto-changelog -p -o src/CHANGELOG.md --template keepachangelog && git add src/CHANGELOG.md"
   },
   "lint-staged": {
     "./src/**/*.{ts,tsx}": [
@@ -70,6 +70,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.0.4",

src/CHANGELOG.md

@@ -2,12 +2,35 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [v1.2.2](https://github.com/GNS-Science/kororaa/compare/v1.2.0...v1.2.2)
 
-Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+### Merged
+
+- update hazard curve tooltips; [`#412`](https://github.com/GNS-Science/kororaa/pull/412)
+
+## [v1.2.0](https://github.com/GNS-Science/kororaa/compare/v1.1.0...v1.2.0)
+
+### Merged
+
+- move cypress fix to right test; [`#409`](https://github.com/GNS-Science/kororaa/pull/409)
+- Feature/406 hazard poe [`#408`](https://github.com/GNS-Science/kororaa/pull/408)
+- update hazard curve poe controls; [`#407`](https://github.com/GNS-Science/kororaa/pull/407)
+- Feature/401 hazard button feedback [`#402`](https://github.com/GNS-Science/kororaa/pull/402)
+- Feature/398 time scales [`#400`](https://github.com/GNS-Science/kororaa/pull/400)
+- fix chrome not scrolling to hash links; [`#397`](https://github.com/GNS-Science/kororaa/pull/397)
+- Feature/390 fault label [`#394`](https://github.com/GNS-Science/kororaa/pull/394)
+- change rate label; [`#391`](https://github.com/GNS-Science/kororaa/pull/391)
+- feature/389 rate tooltip [`#390`](https://github.com/GNS-Science/kororaa/pull/390)
+- Fix/386 menu caps [`#387`](https://github.com/GNS-Science/kororaa/pull/387)
+- update rupture map tooltips; format geojson downloads; reformat tech info page; add ids to tech info headers;   [`#380`](https://github.com/GNS-Science/kororaa/pull/380)
+
+### Commits
+
+- fix cypress tests; [`df848f7`](https://github.com/GNS-Science/kororaa/commit/df848f7a39b3a6e30364be33d04cb4d0431f4d71)
+- skip tests; [`8cc347a`](https://github.com/GNS-Science/kororaa/commit/8cc347a67680fa73efefbfa0850a18ab3ec19e58)
+- add tooltip to rupture map rate control; update mock for cypress; [`094a4ad`](https://github.com/GNS-Science/kororaa/commit/094a4ad10070f5cdaf02eea953f6cad93eb76110)
 
-## [v1.2.0](https://github.com/GNS-Science/kororaa/compare/v1.2.0...v1.2.0)
+## [v1.1.0](https://github.com/GNS-Science/kororaa/compare/v1.0.7...v1.1.0) - 2023-07-25
 
 ### Merged
 

src/constants/tooltips.ts

@@ -1,4 +1,4 @@
-export const vs30Tooltip = 'Vs30 is the site-specific shear wave velocity average. Use a Vs30 value estimated for your site. The NSHM does not include a national Vs30 map.';
+export const vs30Tooltip = 'Vs30 is the time-averaged shear wave velocity in top 30m beneath the site. Use a Vs30 value estimated for your site. The NSHM does not include a national Vs30 map.';
 
 export const imtTooltip = `Intensity Measure Types (IMT) include Peak Ground Acceleration (PGA),
 	 and Spectral Acceleration (SA) where bracketed values indicate the period in seconds.`;

src/services/spectralAccel/spectralAccel.service.test.ts

@@ -6,7 +6,7 @@ import { hazardPlotsViewQueryMockData } from './testCases/hazardPlotViewsQueryMo
 import { HAZARD_COLOR_MAP } from '../../utils/environmentVariables';
 
 test('getAllOfCurveType function', () => {
-  expect(getSpectralAccelCurve('mean', 400, 'WLG', hazardPlotsViewQueryMockData, 0.02, 'log')).toEqual(calculateSpectralAccelCurveExpected);
+  expect(getSpectralAccelCurve('mean', 400, 'WLG', hazardPlotsViewQueryMockData, 0.02, 'log', 50)).toEqual(calculateSpectralAccelCurveExpected);
 });
 
 test('addColorsToCurves function adds strokColor property to each curve', () => {

src/services/spectralAccel/spectralAccel.service.ts

@@ -23,7 +23,14 @@ export type Curves = NonNullable<HazardCurves['curves']>;
 
 const curveTypes = ['upper2', 'upper1', 'mean', 'lower1', 'lower2'];
 
-export const getSpectralAccelUncertaintyCurves = (vs30s: number[], locs: string[], data: HazardChartsPlotsViewQuery$data, poe: number | undefined, scaleType: string): UncertaintyChartData => {
+export const getSpectralAccelUncertaintyCurves = (
+  vs30s: number[],
+  locs: string[],
+  data: HazardChartsPlotsViewQuery$data,
+  poe: number | undefined,
+  scaleType: string,
+  timePeriod: number,
+): UncertaintyChartData => {
   const saCurveGroups: UncertaintyChartData = {};
   poe &&
     vs30s.forEach((vs30) => {
@@ -34,7 +41,7 @@ export const getSpectralAccelUncertaintyCurves = (vs30s: number[], locs: string[
           saCurveGroups[key] = {};
         }
         curveTypes.forEach((curveType) => {
-          const saCurve = getSpectralAccelCurve(curveType, vs30, loc, data, poe, scaleType);
+          const saCurve = getSpectralAccelCurve(curveType, vs30, loc, data, poe, scaleType, timePeriod);
           if (saCurve) {
             saCurveGroups[key][curveType] = { data: saCurve };
           }
@@ -44,19 +51,19 @@ export const getSpectralAccelUncertaintyCurves = (vs30s: number[], locs: string[
   return saCurveGroups;
 };
 
-export const getSpectralAccelCurve = (curveType: string, vs30: number, loc: string, data: HazardChartsPlotsViewQuery$data, poe: number, scaleType: string) => {
+export const getSpectralAccelCurve = (curveType: string, vs30: number, loc: string, data: HazardChartsPlotsViewQuery$data, poe: number, scaleType: string, timePeriod: number) => {
   if (data.hazard_curves?.curves?.length) {
     const curves: Curves = data.hazard_curves?.curves?.filter((curve) => curve !== null && curve?.vs30 === vs30 && curve?.loc === loc && convertAgg(curve?.agg as string) === curveType);
-    const saCurve = calculateSpectralAccelCurve(curves, poe, scaleType);
+    const saCurve = calculateSpectralAccelCurve(curves, poe, scaleType, timePeriod);
     const sortedCurve = saCurve.sort((a, b) => a[0] - b[0]);
     return sortedCurve;
   }
 };
 
 //TODO: add this function as utility method in toshi-nest as it is shared between Kororaa and TUI
-export const calculateSpectralAccelCurve = (curves: Curves, poe: number, scaleType: string): number[][] => {
+export const calculateSpectralAccelCurve = (curves: Curves, poe: number, scaleType: string, timePeriod: number): number[][] => {
   const data: number[][] = [];
-  const yValue: number = -Math.log(1 - poe) / 50;
+  const yValue: number = -Math.log(1 - poe) / timePeriod;
 
   curves.forEach((currentCurve) => {
     if (currentCurve) {
@@ -137,9 +144,9 @@ export const tryParseLatLon = (loc: string): string[] => {
   } else return loc.split(',').map((l) => l.trim());
 };
 
-export const getSpectralCSVData = (curves: UncertaintyChartData, poe: number | undefined): string[][] => {
+export const getSpectralCSVData = (curves: UncertaintyChartData, poe: number | undefined, timePeriod: number): string[][] => {
   const datetimeAndVersion = [`date-time: ${new Date().toLocaleString('en-GB', { timeZone: 'UTC' })}, (UTC)`, `NSHM model version: ${HAZARD_MODEL}`];
-  const saHeaderArray = ['lat', 'lon', 'vs30', 'PoE (% in 50 years)', 'statistic', ...HAZARD_IMTS];
+  const saHeaderArray = ['lat', 'lon', 'vs30', `PoE (% in ${timePeriod} years)`, 'statistic', ...HAZARD_IMTS];
   const csvData: string[][] = [];
   Object.fromEntries(
     Object.entries(curves).map((curve) => {

src/utils/environmentVariables.ts

@@ -35,6 +35,8 @@ export const HAZARD_IMTS = process.env.REACT_APP_HAZARD_IMTS?.split(',') || [
   'SA(10.0)',
 ];
 
+export const TIME_PERIODS = process.env.REACT_APP_TIME_PERIODS?.split(',').map((num) => Number(num)) || [50, 100];
+
 export const HAZARD_COLOR_MAP = process.env.REACT_APP_HAZARD_COLOR_MAP || 'jet';
 export const HAZARD_COLOR_LIMIT: number = Number(process.env.REACT_APP_HAZARD_COLOR_LIMIT) || 30;
 export const HAZARD_COLOR_UNCERTAINTY_OPACITY = process.env.REACT_APP_HAZARD_COLOR_UNCERTAINTY_OPACITY || 0.5;

src/views/comboRuptureMap/ComboRuptureMapPageControls.tsx

@@ -109,6 +109,12 @@ const ComboRuptureMapControls: React.FC<ComboRuptureMapControlsProps> = ({
   const [sortBy2, setSortBy2] = useState<string>('');
   const [sortOptionsAnchorEl, setSortOptionsAnchorEl] = React.useState<null | HTMLElement>(null);
   const [mapOptionsAnchorEl, setMapOptionsAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [dataFetched, setDataFetched] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDataFetched(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [faultSystem, locations, parentFaultArray, magnitudeRange, rateRange, radius, sortBy1, sortBy2]);
 
   const mapOptionsOpen = Boolean(mapOptionsAnchorEl);
   const handleMapOptionsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -211,6 +217,7 @@ const ComboRuptureMapControls: React.FC<ComboRuptureMapControlsProps> = ({
   const handleClickMfdDownload = () => handleDownloadData(mfdData, 'mfd-data.json', 'JSON');
 
   const handleSubmit = async () => {
+    setDataFetched(true);
     startTransition(() => {
       dispatch({
         faultSystem: faultSystem,
@@ -276,7 +283,7 @@ const ComboRuptureMapControls: React.FC<ComboRuptureMapControlsProps> = ({
       </StyledCustomControlsBar>
       {geoJsonError && <Alert severity="error">{geoJsonError}</Alert>}
       <Box sx={{ ...flexParentCenter, flexDirection: 'row' }}>
-        <StyledButton disabled={isPending || !!radiusError} variant="contained" type="submit" onClick={handleSubmit}>
+        <StyledButton disabled={isPending || !!radiusError || dataFetched} variant="contained" type="submit" onClick={handleSubmit}>
           Submit
         </StyledButton>
         <Fab onClick={handleMapOptionsClick} color="primary" size="small">

src/views/hazardCharts/HazardCharts.tsx

@@ -35,7 +35,7 @@ const HazardCharts: React.FC<HazardChartsProps> = ({ data, state, dispatch }: Ha
   const filteredCurveGroups = useMemo(() => getFilteredCurveGroups(allCurveGroups, state.imts), [allCurveGroups, state.imts]);
   const curveGroupWithColors = useMemo(() => addColorsToCurves(filteredCurveGroups), [filteredCurveGroups]);
   const sortedCurveGroup = useMemo(() => sortCurveGroups(curveGroupWithColors), [curveGroupWithColors]);
-  const saCurvesUncertainty = useMemo(() => getSpectralAccelUncertaintyCurves(state.vs30s, locationList, data, state.poe, state.spectraXScale), [locationList, state, data]);
+  const saCurvesUncertainty = useMemo(() => getSpectralAccelUncertaintyCurves(state.vs30s, locationList, data, state.poe, state.spectraXScale, state.timePeriod), [locationList, state, data]);
   const saCurvesWithColors = useMemo(() => addColorsToCurves(saCurvesUncertainty), [saCurvesUncertainty]);
   const sortedSaCurves = useMemo(() => sortSACurveGroups(saCurvesWithColors), [saCurvesWithColors]);
 
@@ -87,6 +87,7 @@ const HazardCharts: React.FC<HazardChartsProps> = ({ data, state, dispatch }: Ha
               curves={sortedCurveGroup}
               poe={state.poe}
               uncertainty={state.hazardUncertainty}
+              timePeriod={state.timePeriod}
             />
           </div>
         </ChartContainer>
@@ -106,10 +107,11 @@ const HazardCharts: React.FC<HazardChartsProps> = ({ data, state, dispatch }: Ha
                 tooltip={true}
                 crosshair={true}
                 heading="Uniform Hazard Spectrum"
-                subHeading={`${(state.poe * 100).toFixed(1)}% in 50 years`}
+                subHeading={`${(state.poe * 100).toFixed(1)}% in ${state.timePeriod} years`}
                 curves={sortedSaCurves}
                 poe={state.poe}
                 uncertainty={state.spectralUncertainty}
+                timePeriod={state.timePeriod}
               />
             </div>
           </ChartContainer>