gns-science / kororaa Goto Github PK

We want a page to display hazard curves and spectra based on the mockup https://www.figma.com/file/ggot2VddYVPGIF3u9TNl17/Korora?node-id=0%3A1

As a user I want to enter a latitude and longitude as free form entries. These then need to be sanity checked

• future: convert deg:min:sec to decimal degrees
• convert E/W N/S to +/-
• check that the point is on land in NZ

I also want to specify:

• site condition (Vs30) from a list of possible options [250, 300, 350, 400, 450, 750 ] (units m/s)
• one spectral periods from a list of possible options
  [PGA, 0.1s, 0.2s, 0.5s, 1.0s, 2.0s, 5.0s, 10.0s]

Then find the nearest point in the model where hazard has been pre-calculated

• report requested point and nearest point to user
• plot hazard curve for nearest point

As a user I want to specify a probability of exceedance (PoE) to get a spectral acceleration (aka UHS) plot. the PoE is a free form entry and needs to be sanity checked:

• future: should be in the rage of 1 - 90
• future: allow for and properly process entries such as ""2"", ""2%"", ""2pct"", ""2 percent"""

Plot axis are empty to start. A submit button to generate the plots.

Buttons to:

• download data
• export plots to image file
• share

The tool tips for the hazard curve chart and spectral chart should include the name of the curve as displayed on the legend

The download hazard curves feature should download all Vs30 and locations selected by the user

1. white space when no graphs displayed (move footer to bottom)
2. working buttons ("save data", "print")
3. move save button to top right, rename "share"
4. responsive

Users need a Disaggregations page in Kororaa. The following needs to be added:

• Disaggregations tile on the landing page (see comment with image to use)
• Disaggregations menu item
• Disaggregations page. Use the mock-up here

Disaggregations Page will serve static pages of disaggregation reports in an iframe (similar to TUI solution analysis)

• title with "info" icon
• dropdown menus of location, Vs30, Spectral Period, Probability in 50 Years (single select only)
• frame containing report page served from S3 static reports bucket

Once the user has selected one of each from the dropdown menus they will be served the frame with the static report

Order of Menu items for selecting a disagg are (NB: caplitalization and change of name from "IMT" to "Spectral Period":

• Location
• Vs30
• Spectral Period
• PoE

API info

List of disaggregations (aka the TOC) and links to report page will come from a K-API query (see GNS-Science/kororaa-graphql-api#30). sample:

query demo_disaggs{
  disaggregation_reports {
    reports {
      location {
        name
        key
        code
        lat
        lon
      }
      vs30
      inv_time
      poe
      imt
      report_url
    }
  }
}

returns

{
  "data": {
    "disaggregation_reports": {
      "reports": [
        {
          "location": {
            "name": "Wellington",
            "key": "WLG",
            "code": "-41.30~174.78",
            "lat": -41.3,
            "lon": 174.78
          },
          "vs30": 400,
          "inv_time": 50,
          "poe": 0.02,
          "imt": "PGA",
          "report_url": "http://fake-plastic-trees/DATA/slt_v8_gmm_v2/diagreport_report/XXX"
        },
        {
          "location": {
            "name": "Wellington",
            "key": "WLG",
            "code": "-41.30~174.78",
            "lat": -41.3,
            "lon": 174.78
          },
          "vs30": 400,
          "inv_time": 50,
          "poe": 0.02,
          "imt": "SA(0.5)",
          "report_url": "http://fake-plastic-trees/DATA/slt_v8_gmm_v2/diagreport_report/XXX"
        },
        {
          "location": {
            "name": "Wellington",
            "key": "WLG",
            "code": "-41.30~174.78",
            "lat": -41.3,
            "lon": 174.78
          },
          "vs30": 400,
          "inv_time": 50,
          "poe": 0.1,
          "imt": "SA(0.5)",
          "report_url": "http://fake-plastic-trees/DATA/slt_v8_gmm_v2/diagreport_report/XXX"
        }
      ]
    }
  }
}

documentation

• About
• Technical Info

Please make use of the following ...

Warning, breaking API Changes

• the geojson prop is pushed down one layer by hazard_map.
• the args that were on geojson are now on hazard_map instead, and the apply to both geojson and colour_scale
• omit the color_scale_vmax argument and the API will work out the scale automatically (rounding up to nearest 0.5 interval)
• colour_scale intervals are fixed at 0.1.

  gridded_hazard(grid_id: NZ_0_1_NB_1_0, 
    hazard_model_ids: ["SLT_TAG_FINAL"], 
    imts: ["PGA"], 
    aggs: ["mean"], 
    vs30s: [400, 250], 
    poes: [0.1],
  ) {
    ok
    gridded_hazard {
      grid_id
      hazard_model
      imt
      agg
      hazard_map(color_scale:"inferno"){
        colour_scale{ levels hexrgbs}
        #geojson as 
      }
    }
  }
}

returning ....

{
  "data": {
    "gridded_hazard": {
      "ok": true,
      "gridded_hazard": [
        {
          "grid_id": "NZ_0_1_NB_1_0",
          "hazard_model": "SLT_TAG_FINAL",
          "imt": "PGA",
          "agg": "mean",
          "hazard_map": {
            "colour_scale": {
              "levels": [
                0,
                0.1,
                0.2,
                0.3,
                0.4,
                0.5,
                0.6,
                0.7,
                0.8,
                0.9,
                1,
                1.1,
                1.2,
                1.3,
                1.4,
                1.5
              ],
              "hexrgbs": [
                "#000004",
                "#0c0826",
                "#240c4f",
                "#420a68",
                "#5d126e",
                "#781c6d",
                "#932667",
                "#ae305c",
                "#c73e4c",
                "#dd513a",
                "#ed6925",
                "#f8850f",
                "#fca50a",
                "#fac62d",
                "#f2e661",
                "#fcffa4"
              ]
            }
          }
        }
      ]
    }
  }
}

The tooltip for the hazard and spectral charts does not snap to the nearest point corretly. When moving the cursor left and right (the x-axis direction) the tool tip snaps to the closest point greater than the location (to the right) of the cursor. It should snap to the nearest location whether that is left or right

On the hazard curve page: For the plots that have a download image control on the chart. On clicking it should:

• start a download for an image (jpeg, png, etc. whatever is best supported by the library used)
• file name should reflect the values of the inputs used to generate the plot (e.g. hazard_plot_{location}_{vs30}_{period}_{PoE}.jpg)

As a Kororaa user I want to be able to enter any probability of exceedance for the given timespan (50 years). Done when

• the PoE entry field is free form entry
• a range of entry types are accepted (e.g. "2%" "0.02" and "2" all give the same result)
• Entry expects a number
• The entry value is checked against the acceptable range >0 <100 (with user feedback)
• the PoE is correctly plotted on the annual probability of exceedance hazard plot (see @chrisdicaprio for details)
• the PoE is used to calculate a hazard spectrum curve (see @chrisdicaprio for details)
• Testing

So we can demonstrate some interactive hazard curves.

• #117
• Kororaa Feature: add Technical resources page to Info/resources
• Kororaa Feature: add Model Components Page to Info/resources

Users want to download hazard curves as csv files. On the HazardCurve page, when the SAVE DATA button is pressed, a csv file of the data should be downloaded. The content of the csv file includes:

• hazard curves (annual probability of exceedence vs acceleration) for every site and vs30 currently selected by the user.
• Every period available should be included, independent of the user's selection

The format of the csv file should be

Where acceleration0, acceleration1 are the x values of the hazard curve plot and poe0, poe1 are the y values of the hazard curve plot

Add hazard curves view as per design on Figma

We want to improve the user experience by showing details of Named Locations in the Hazard Curves view.

This uses GNS-Science/kororaa-graphql-api#17

Note that it is possible for a user to enter accurate named location cooordinates in the lat/lon field, and the K-API will resolve these correctly.

Done when

• construct K-API queries to make is easy to reconcile Named Locations when they're entered/selected.
• when a Named Location is entered (in any input field ) the chart legends should show the location name (or optionally, the key (3 letters) of that location. decide is Key code is the better option for legends??
• provde a APP ENV variable to allow us to choose a valid arbitrary resolution (float, typically 0.1 or 0.2 degrees).
• provde a APP ENV variable to allow us to choose the hazard_model (string e.g SLT_TAG_FINAL or SLT_v7_gmm_v1

Users want a short description of what the data is that they are viewing and some guidance on how to use the webapp. A "i" icon to the right of the title reveals a pop-up with text describing the feature. Use dummy text for now

• working link from menu and landing page to the rupture set page
• rupture set page has leaflet map
• simple controls as in in Figma mock-up
• controls bring up geojson fault set

Done when

• allow no spaces in lat/lon string e.g -40,175 should be valid input
• allow trailing delimiter character regardless whether it's needed e.g. -40.2,175; should be valid input
• if easy, pls add a clear control to the field (same as for named locations)

we would like the option for the y-axis of the spectra plot to auto-rescale to a given factor of the largest value being plotted. The default scale should be 1.2

e.g. pseudo code ylim = [0,1.2*max(y)]

We need more colours please, or some other distinguishing feature (line style)

one way to reproduce:

1. choose 1 location
2. choose 1 vs30
3. choose all the IMTs
4. Hit [Submit]
   BOOM (when data arrives back)

the team want to see low-res wireframes of the main views and controls needed by public users

so that we can try out user journeys and test UX ideas and so that the basic UI components can be identified

• landing page
• site hazard tools (plots, maps, disaggs)
• location finder
• title
• menu
• about
• search ????
• ?? links to other NSHM info

Users want to be able to download the hazard data desplayed on the map as a csv table. The downlaod button should be below the controls for the map (e.g. vs30, IMT, etc). The format of the file should be

vs30={vs30}, spectral period={period}, PoE={poe}% in 50 years
lat0, lon0, hazard00
lat0, lon1, hazard01
...
lat1, lon0, hazard10
...

We want Kororoa Hazards Curve view to be demonstrabe using the new API so that we can show some 'real' hazard and more complete behaviour. Details of the Query are below.

Done when:

• user can select one item from location list (using the 35 sites list - same as TUI)
• user can select one item from vs30 list [250, 300, 350, 400, 450, 750 ]
• user can select one item from imt list ['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)']
• when user hits [Submit] the API query is executed and the chart(s) are updated.

Note: for now use `"{'hazard_model": "TEST1", "aggs": "mean" }

also:

• lat/lon combo text field is updated as location is selected (lowest priority)

new query form ....
uses variables input like : {"hazard_model": "TEST1" , "vs30s": [250], "imts": ["PGA"], "locs": ["ROT"], "aggs": ["mean"] }

query HazardCurveQuery ($hazard_model:String 
	$vs30s: [Float]
  $imts: [String]
  $locs: [String]
  $aggs: [String]
){
  #about
  hazard_curves (
  	hazard_model: $hazard_model
    vs30s: $vs30s
    imts: $imts
  	locs: $locs
    aggs: $aggs
  ) {
    ok
    curves {
      loc   
      imt
      agg
      vs30
      curve {
        levels
        values
      }
    }
  }
}

Look into using preloaded query for hazard charts page for a more graceful loading experience

For the Hazard Curve view, we want the Vs30, location, and spectral period selections to allow multi-select rather than single value. Done when

• The user can select multiple Vs30
• multiple locations
• multiple periods
• The legend reflects the Vs30, location, and period of the respective line
• limit the number of selections so that the total combinations of options results in less than or equal to 8 curves. A dialog box should warn the user when they attempt to select more options than allowed

With

• clean NSHM logo
• minimalist GNS atomic logo
• menu items A B C
• GNS Colour band

• click on menu button instead of word
• tool tip numerical precision should be 1 digit after the decimal place
• no PoE line in spectra plot legend
• remove share button
• tool tip x,y replaced with labels of x and y axes on chart
• use ( ) for units in axes labels, not [ ]
• landing page icons clickable
• remove logos in footer except for landing page and info page
• remove rupture set links
• change names of hazard map controls
  • Imts ==> Spectral Period
  • Aggs ==> Statistic
  • Vs30s ==> Vs30
  • poes ==> Probability of Exceedence
• hazard map controls for poes should be changed to be more obvious what they mean
  • 0.1 ==> "10% in 50 years"
  • 0.02 ==> "2% in 50 years"
• download map data, fix spectral typo in header

Hazard chart toggles for uncertainty and log/linear should be moved to be under a settings icon (gear) at the top left of the hazard chart. Clicking the gear should open a menu to control the look and feel of the chart. Mockup of the controls:

In Kororaa the user wants to zoomable map of NZ with a color scale overlay representing the Hazard Level of ground acceleration in units (g) that could be experienced.

User can choose any combination

• imt e.g. PGA
• agg e.g mean
• vs30 e.g. 400
• poe level: (0.1, 02)

K-API now supports this feature like so ....

query gh {
  gridded_hazard(grid_id: NZ_0_1_NB_1_0, 
    hazard_model_ids: ["SLT_TAG_FINAL"], 
    imts: ["PGA"], #"SA(0.5)", 
    aggs: ["mean", "0.8"], 
    vs30s: [400, 750], 
    poes: [0.1],
  ) {
    ok
    gridded_hazard {
      grid_id
      hazard_model
      imt
      agg
      values
      geojson(color_scale:"inferno"
      	color_scale_vmax: 2.0 #AUTO ??
        fill_opacity: 0.5
        stroke_width: 0.1
        stroke_opacity: 0.5
      )
    }
  }
}

e.g.

As a Kororaa user I want to be able to enter hazard curve locations latitude and longitude pairs.

Done when

• User enters one or more locations in lat lon field in the following format (lat and lon separated by ~, each location separated by ,
lat1~lon1, lat2~lon2, lat3~lon3 etc.
• If user selects a location from the drop-down list, the lat lon field is updated with the lat lon for that city.
  The lat lon for a city will be available from an API query we have it in js already, with no round trip required.
• locations as lat~lon are queried in the API to get hazard curves for plotting

Notes:

• API will resolve the latitude and longitude to a location on the calculation grid, if possible
• locations outside the grid will not return any values from the API

Parked:

• entry can handle multiple formats, e.g. separated by comma or white space
• entry can handle multiple lat lon pair formats and separators e.g. decimal degrees or DEG:MM:SS.SS e.g. https://www.rapidtables.com/convert/number/degrees-minutes-seconds-to-degrees.html)
• value of lat and lon is range checked to be within New Zealand (lon > 165, lon < 179, lat > -47.5, lat < -34)
• feedback for users for location resolved on calculation grid
• feedback for requested locations outside of calculation grid

Kororaa users want to be able to download the hazard map as an image file (png). The map will have a download button (leaflet feature)

Hazard maps need a colorbar so that users can quantify the hazard level they are viewing.

• #71
  example:

On the hazard and spectral charts the axis values should be set by an environment variable
env vars are:

hazard chart
HAZARD.GMAX: x-axis max
HAZARD.GMIN: x-axis min
HAZARD.POEMAX: y-axis max
HAZARD.POEMIN y-axis min

spectral chart
SA.PERIODMAX: x-axis max
SA.PERIODMIN: x-axis min
SA.GMAX: float or auto . If auto, set scale to 1.2x the max value of the curves plotted
SA.GMIN: y-axis min

We want legalese to be accpeted by the end user and we might want to revise this from time to time...

Done when....

• Disclaimer is a modal form, showing the legal text (and maybe a title & a logo) (to CDC design)
• Disclaimer has an [Accept] button
• on Accept action => stores the current NSHM_DISCLAIMER_VERSION locally and the disclaimer form disappears YAY!!
• if users browser has stored a matching NSHM_DISCLAIMER_VERSION, don't show the disclaimer
• Disclaimer works on any route /* (whether manually entered or not)
• we have a NSHM_DISCLAIMER_VERSION in the app (set at build time)
• if users browser version doesn't match (or doesn't exist ), show the disclaimer

The tooltip for hazard and spectral charts only snaps to two of the curves even when there are more than 2 curves plotted. We should be able to get a tooltip for the nearest mean curve for as many as there are shown

Currently, the hazard curve and spectral acceleration charts disappear and the frame containing them collapses when SUBMIT is clicked and the charts are re-drawn. Behavior instead should keep axis in place and re-draw curves only

Kororaa users want to be able to enter latitude and longitude in a number of different formats when specifying a location for a hazard curve and spectra

Acceptable formats and examples

• lat1, lon1; lat2, lon2 example: -45.45, 174.3245; -36.7, 175 This is the default format and what should be displayed when a user chooses a city (instead of the current lat~lon format used by the API

which has:

• Title H1
• Body text - description
• 4 cards each with H2 Title, description, + images
• #7

when changing spectral period on hazard map, user must select non-existant one to update

• [ ]CDC TODO

When multiple locations are selected the spectral chart does not display correctly:

both these jave just 2 locations set (WLG, GIS)

with uncertainty

without uncertainty

We want to improve the clarity of the hazard curve and spectra. Done when

• Spectral chart title reads "Spectral Acceleration Chart" rather than "Spectral Acceleration Chart Responsive"
• subHeading on spectral chart updates to reflect Probability of Exceedance. e.g. if user selects 2%, then it should read "2% in 50 years"
• y-axis on hazard curve should read "Annual Probability of Exceedance"
• PoE legend on hazard curve should read "PoE X% in 50 years"
• Selection box for Probability of Exceedance should read "Probability of Exceedance in 50 Years"
• subheading for Hazard Curves should be the Spectral Period
• Title of Hazard curve plot should read "Hazard Curves" rather than "Responsive Hazard Curves"

download map data button moved to drawer

The NSHM branding color has changed from orange to blue. Banners, buttons, toggles, etc should be changed to GNS Blue (#072B61) R:7 G:43 B:97.

can we use this to reduce page jitter in our hazard curve page ...
https://mui.com/material-ui/react-skeleton/
mui.com
React Skeleton component - Material UI

The spectral chart legend shows lat,lon rather than location name when a location is selected. The format should be the same as the hazard chart (except the spectral period is not shown).

Note: also remove the PoE line from the spectral legend