Merge pull request #457 from GNS-Science/deploy-test

Deploy test

cypress/e2e/HazardCurves.cy.ts

@@ -1,4 +1,3 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
 /* eslint-disable cypress/unsafe-to-chain-command */
 describe("Hazard Curves", () => {
   before(() => {
@@ -41,24 +40,21 @@ describe("Hazard Curves", () => {
     cy.get("div").contains("PGA").click();
     cy.get('li[data-value="SA(0.1)"]').click();
     cy.get('li[data-value="SA(0.2)"]').click();
-    cy.get('li[data-value="SA(0.3)"]').click();
     cy.get("body").click();
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should("have.length", 20);
+    cy.get('[role="curve"]').should("have.length", 15);
   });
 
   it("Displays tooltips for all selected spectral periods", () => {
     cy.get('div[class="visx-legend-label"]').should("contain.text", "PGA");
     cy.get('div[class="visx-legend-label"]').should("contain.text", "SA(0.1)");
     cy.get('div[class="visx-legend-label"]').should("contain.text", "SA(0.2)");
-    cy.get('div[class="visx-legend-label"]').should("contain.text", "SA(0.3)");
   });
 
   it("Displays one curve after user deselects spectral periods", () => {
     cy.get("div").contains("Multiple selected").click({ force: true });
     cy.get('li[data-value="SA(0.1)"]').click();
     cy.get('li[data-value="SA(0.2)"]').click();
-    cy.get('li[data-value="SA(0.3)"]').click();
     cy.get("body").click();
     cy.get('[type="submit"]').click({ force: true });
     cy.get('[role="curve"]').should("have.length", 5);

package.json

@@ -1,12 +1,12 @@
 {
   "name": "kororaa",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "private": true,
   "type": "module",
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@gns-science/toshi-nest": "^3.9.9",
+    "@gns-science/toshi-nest": "^3.9.14",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
@@ -40,7 +40,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "relay": "relay-compiler",
-    "test": "vitest"
+    "test": "vitest",
+    "changelog": "auto-changelog -p -o src/CHANGELOG.md -t keepachangelog"
   },
   "lint-staged": {
     "./src/**/*.{ts,tsx}": [

src/CHANGELOG.md

@@ -2,16 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
-## [v1.2.2](https://github.com/GNS-Science/kororaa/compare/v1.2.0...v1.2.2)
+## [v1.2.3](https://github.com/GNS-Science/kororaa/compare/v1.2.2...v1.2.3)
 
-### Merged
+### Added
+
+Hazard map opacity slider;
 
-- 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)
+### Changed
+Hazard curve charts update;
+Hazard curve line colour synced;
+Dynamic TechInfo page;
+Adds Error boundary to hazard charts page;
+
+## [v1.2.2](https://github.com/GNS-Science/kororaa/compare/v1.2.0...v1.2.2) - 2023-11-02
 
 ### Merged
 
+- Fix/410 hazard tooltips [`#412`](https://github.com/GNS-Science/kororaa/pull/412)
 - 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)
@@ -30,6 +37,8 @@ All notable changes to this project will be documented in this file.
 - 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.1.0...v1.2.0) - 2023-07-25
+
 ## [v1.1.0](https://github.com/GNS-Science/kororaa/compare/v1.0.7...v1.1.0) - 2023-07-25
 
 ### Merged

src/components/common/LeafletMap/LeafletMap.types.ts

@@ -19,7 +19,7 @@ export interface LeafletMapProps {
   timeDimension?: boolean;
   timeDimensionOptions?: TimeDimensionOptions;
   timeDimensionControlOptions?: TimeDimensionControlOptions;
-  timeDimensionGeoJsonData?: typeof GeoJsonObject[];
+  timeDimensionGeoJsonData?: (typeof GeoJsonObject)[];
   timeDimensionUnderlay?: typeof GeoJsonObject;
   setZoomLevel: (setZoomLevel: number) => void;
   setTimeDimensionNeedsMore?: (setTimeDimensionNeedsMore: boolean) => void;
@@ -57,7 +57,7 @@ export interface LeafletLayersProps {
   zoomLevel: number;
   setZoomLevel: (setZoomLevel: number) => void;
   timeDimension?: boolean;
-  timeDimensionGeoJsonData?: typeof GeoJsonObject[];
+  timeDimensionGeoJsonData?: (typeof GeoJsonObject)[];
   timeDimensionUnderlay?: typeof GeoJsonObject;
   setTimeDimensionHasNoMore?: (setTimeDimensionHasNoMore: boolean) => void;
   setTimeDimensionNeedsMore?: (setTimeDimensionNeedsMore: boolean) => void;
@@ -66,7 +66,7 @@ export interface LeafletLayersProps {
 }
 
 export interface TimeDimensionLayerProps {
-  geoJsonData: typeof GeoJsonObject[];
+  geoJsonData: (typeof GeoJsonObject)[];
   setTimeDimensionHasNoMore: (setTimeDimensionHasNoMore: boolean) => void;
   setTimeDimensionNeedsMore: (setTimeDimensionNeedsMore: boolean) => void;
   surfaceProperties: SurfaceProperties[];

src/components/common/SliderWithInput.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import MuiInput from "@mui/material/Input";
+import { Tooltip, Box, Grid, Typography, Slider, styled } from "@mui/material";
+
+const Input = styled(MuiInput)`
+  width: 42px;
+`;
+
+export interface SliderWithInputProps {
+  label: string;
+  value: number;
+  setValue: (value: number) => void;
+  tooltipContent?: string;
+}
+
+export const SliderWithInput: React.FC<SliderWithInputProps> = ({
+  label,
+  value,
+  setValue,
+  tooltipContent,
+}: SliderWithInputProps) => {
+  const handleSliderChange = (_event: Event, newValue: number | number[]) => {
+    setValue(newValue as number);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value === "" ? 0 : Number(event.target.value));
+  };
+
+  const handleBlur = () => {
+    if (value < 0) {
+      setValue(0);
+    } else if (value > 100) {
+      setValue(100);
+    }
+  };
+
+  return (
+    <Box sx={{ width: 200 }}>
+      <Tooltip title={tooltipContent || ""} arrow placement="top">
+        <Typography id="input-slider" gutterBottom>
+          {label}
+        </Typography>
+      </Tooltip>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item xs>
+          <Slider
+            value={typeof value === "number" ? value : 0}
+            step={10}
+            onChange={handleSliderChange}
+            aria-labelledby="input-slider"
+            min={10}
+            max={100}
+          />
+        </Grid>
+        <Grid item>
+          <Input
+            value={value}
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            inputProps={{
+              step: 10,
+              min: 10,
+              max: 100,
+              type: "number",
+              "aria-labelledby": "input-slider",
+            }}
+            sx={{ width: 50 }}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

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

@@ -1,8 +1,9 @@
 import colormap from "colormap";
 
 import { expected as calculateSpectralAccelCurveExpected } from "./testCases/calculateSpectralAccelCurveTestCase";
-import { addColorsToCurves, getSpectralAccelCurve, UncertaintyChartData } from "./spectralAccel.service";
+import { getSpectralAccelCurve, UncertaintyChartData } from "./spectralAccel.service";
 import { hazardPlotsViewQueryMockData } from "./testCases/hazardPlotViewsQueryMockData";
+import { addColorsToCurves } from "../../views/hazardCharts/hazardPage.service";
 import { HAZARD_COLOR_MAP } from "../../utils/environmentVariables";
 
 test("getAllOfCurveType function", () => {

src/services/spectralAccel/spectralAccel.service.ts

@@ -3,7 +3,6 @@ import * as mathjs from "mathjs";
 import { hazardPageOptions } from "../../views/hazardCharts/constants/hazardPageOptions";
 import { HazardChartsPlotsViewQuery$data } from "../../views/hazardCharts/__generated__/HazardChartsPlotsViewQuery.graphql";
 import { getLatLonFromLocationName, roundLatLon } from "../latLon/latLon.service";
-import { getColor } from "../../utils/colorUtils";
 import {
   SA_LOG_PGA_SUBSTITUTE,
   HAZARD_IMTS,
@@ -133,18 +132,38 @@ export const calculateSpectralAccelCurve = (
   return data;
 };
 
-export const addColorsToCurves = (curveGroups: UncertaintyChartData): UncertaintyChartData => {
-  const curveGroupLength = Object.keys(curveGroups).length;
+export const addColorsToUHSCurves = (
+  curveGroups: UncertaintyChartData,
+  hazardCurveGroups: UncertaintyChartData
+): UncertaintyChartData => {
+  const hazardCurveKeyObjects = Object.keys(hazardCurveGroups).map((key) => {
+    const keyArray = key.split(" ");
+    const curveGroupKey = `${keyArray[0]} ${
+      keyArray.length === 3 ? keyArray[2] : `${keyArray[2]} ${keyArray[3]}`
+    }`.trimEnd();
+    const keyObject = {
+      key: key,
+      curveGroupKey: curveGroupKey,
+      vs30: keyArray[0],
+      imt: keyArray[1],
+      location: keyArray.length === 3 ? keyArray[2] : `${keyArray[2]} ${keyArray[3]}`,
+      colour: hazardCurveGroups[key]["mean"]["strokeColor"],
+    };
 
-  Object.keys(curveGroups).forEach((key, index) => {
-    Object.keys(curveGroups[key]).forEach((curveType) => {
-      if (curveType === "mean") {
-        curveGroups[key][curveType]["strokeColor"] = getColor(curveGroupLength, index);
-      } else {
-        curveGroups[key][curveType]["strokeColor"] = getColor(curveGroupLength, index);
-        curveGroups[key][curveType]["strokeOpacity"] = 0.5;
-      }
-    });
+    return keyObject;
+  });
+
+  hazardCurveKeyObjects.forEach((keyObject) => {
+    if (curveGroups[keyObject.curveGroupKey]) {
+      Object.keys(curveGroups[keyObject.curveGroupKey]).forEach((curveType) => {
+        if (curveType === "mean") {
+          curveGroups[keyObject.curveGroupKey][curveType]["strokeColor"] = keyObject.colour;
+        } else {
+          curveGroups[keyObject.curveGroupKey][curveType]["strokeColor"] = keyObject.colour;
+          curveGroups[keyObject.curveGroupKey][curveType]["strokeOpacity"] = 0.5;
+        }
+      });
+    }
   });
 
   return curveGroups;

src/views/comboRuptureMap/ComboRuptureMapComponent.tsx

@@ -175,7 +175,7 @@ export const ComboRuptureMapComponent = (props: ComboRuptureMapComponentProps) =
   }, [data]);
 
   const timeDimensionLayerProps = {
-    geoJsonData: (ruptureData as typeof GeoJsonObject[]) || "",
+    geoJsonData: (ruptureData as (typeof GeoJsonObject)[]) || "",
     setTimeDimensionNeedsMore: setNeedsMore,
     setTimeDimensionHasNoMore: setHasNoMore,
     surfaceProperties: surfaceProperties || [],

src/views/comboRuptureMap/ComboRuptureMapPageControls.tsx

@@ -299,6 +299,7 @@ const ComboRuptureMapControls: React.FC<ComboRuptureMapControlsProps> = ({
         <Autocomplete
           multiple={true}
           disabled={faultSystem !== "Crustal"}
+          disableCloseOnSelect={true}
           options={parentFaultOptions}
           renderInput={(params) => (
             <Tooltip title={faultsMarkdown || ""} placement="right" arrow={true}>

src/views/hazardCharts/HazardCharts.tsx

@@ -5,15 +5,17 @@ import { GroupCurveChartResponsive } from "@gns-science/toshi-nest";
 
 import { HazardChartsPlotsViewQuery$data } from "./__generated__/HazardChartsPlotsViewQuery.graphql";
 import {
+  addDashArrayToCurves,
   getAllCurveGroups,
   getFilteredCurveGroups,
   getLocationList,
   getYScale,
   sortCurveGroups,
+  addColorsToCurves,
 } from "./hazardPage.service";
 import { HazardPageState } from "./hazardPageReducer";
 import {
-  addColorsToCurves,
+  addColorsToUHSCurves,
   getSpectralAccelUncertaintyCurves,
   sortSACurveGroups,
 } from "../../services/spectralAccel/spectralAccel.service";
@@ -60,7 +62,13 @@ const HazardCharts: React.FC<HazardChartsProps> = ({ data, state, dispatch }: Ha
       ),
     [locationList, state, data]
   );
-  const saCurvesWithColors = useMemo(() => addColorsToCurves(saCurvesUncertainty), [saCurvesUncertainty]);
+  const saCurvesWithColors = useMemo(
+    () => addColorsToUHSCurves(saCurvesUncertainty, curveGroupWithColors),
+    [saCurvesUncertainty, curveGroupWithColors]
+  );
+
+  addDashArrayToCurves(sortedCurveGroup);
+
   const sortedSaCurves = useMemo(() => sortSACurveGroups(saCurvesWithColors), [saCurvesWithColors]);
 
   const spectralYLimits = useMemo(() => {

src/views/hazardCharts/HazardChartsControls.tsx

@@ -46,7 +46,15 @@ import {
   getNamesFromLocationData,
   validateLatLon,
 } from "../../services/latLon/latLon.service";
-import { locationTooltip, tooManyCurves, latLonTooltip, noLocations, noVs30s, noImts } from "./constants/hazardCharts";
+import {
+  locationTooltip,
+  tooManyCurves,
+  latLonTooltip,
+  noLocations,
+  noVs30s,
+  noImts,
+  tooManyImts,
+} from "./constants/hazardCharts";
 import { imtTooltip, vs30Tooltip } from "../../constants/tooltips";
 
 interface HazardChartsControlsProps {
@@ -125,7 +133,7 @@ const HazardChartsControls: React.FC<HazardChartsControlsProps> = ({
 
   const handleSubmit = async () => {
     try {
-      validatePoeValue(poeInput);
+      validatePoeValue(poeInput, setPoeInputError);
       validateLatLon(latLon);
       validateLocationData(locationData, setLocationError);
       validateVs30s(vs30s, setVs30Error);
@@ -155,6 +163,9 @@ const HazardChartsControls: React.FC<HazardChartsControlsProps> = ({
       } else if (err === noImts) {
         setImtError(true);
         setControlsErrorMessage(err as string);
+      } else if (err === tooManyImts) {
+        setImtError(true);
+        setControlsErrorMessage(err as string);
       } else {
         setPoeInputError(true);
         setPoeInputErrorMessage(err as string);

src/views/hazardCharts/HazardChartsPage.tsx

@@ -10,6 +10,7 @@ import { hazardPageReducer, hazardPageReducerInitialState } from "./hazardPageRe
 import { InfoTooltip } from "../../components/common/InfoTooltip";
 import SimpleBackdrop from "../../components/common/SimpleBackdrop";
 import { HazardChartsPageQuery } from "./__generated__/HazardChartsPageQuery.graphql";
+import ErrorBoundary from "../../components/common/ErrorBoundary";
 
 const PageContainer = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -41,16 +42,18 @@ const HazardChartsPage: React.FC = () => {
 
   return (
     <PageContainer>
-      <TitleContainer>
-        <Typography variant="h2">
-          Hazard Curves and Uniform Hazard Spectra
-          <InfoTooltip content={markdown || ""} format={content_type === "Markdown"} />
-        </Typography>
-      </TitleContainer>
-      <HazardChartsControls state={state} dispatch={dispatch} printTargetRef={printTargetRef} />
-      <React.Suspense fallback={<SimpleBackdrop />}>
-        <HazardChartsPlotsView state={state} dispatch={dispatch} printTargetRef={printTargetRef} />
-      </React.Suspense>
+      <ErrorBoundary>
+        <TitleContainer>
+          <Typography variant="h2">
+            Hazard Curves and Uniform Hazard Spectra
+            <InfoTooltip content={markdown || ""} format={content_type === "Markdown"} />
+          </Typography>
+        </TitleContainer>
+        <HazardChartsControls state={state} dispatch={dispatch} printTargetRef={printTargetRef} />
+        <React.Suspense fallback={<SimpleBackdrop />}>
+          <HazardChartsPlotsView state={state} dispatch={dispatch} printTargetRef={printTargetRef} />
+        </React.Suspense>
+      </ErrorBoundary>
     </PageContainer>
   );
 };