At the moment the Hazard Curves prop typing is not showing up in TS consumption environments, and optional props shows as required.

• display PGA chart plot
• user supplied series (data points) inspect SVG?? vs VisX API
• series metadata (name, color)
• user def axis range
• user def height width and/or responsive
• legend (optional)
• test coverage e.g. find(<g>).contains

See toshi-ui for template

There are some problems in the code base that eslint didn't pick up despite pre-merge testing

• Unused Imports not allowed
• Consistent wrapping
• Use single quotes

For <GroupCurveChart /> and <GroupCurveChartResponsive /> the axis label and legend font size are not proportionate to the size of the plots. Optimize this.

done when ControlBar component documentation added with

• Code example
• Screenshot of its usage
• Props table

Refactor drawer to use ref to resize height dynamically depending on scroll;

Hazard Uncertainty should show legend corresponding each curve groups.

We would like to option for the x-axis of hazard curves to be either linear or log

Migrate the MFD plot component from toshi

done when:

• MFDplot Component added
• Documentation added to Toshi Nest Wiki including code demo, image of usage, and props table

We want to be able to plot spectra curves with uncertainty bounds in the same way we do for hazard curves. Spectra curves are calculated on the fly depending on the PoE entry; therefore, we will need to calculate the upper1/2 and lower1/2 curves for spectra in the same way, using the corresponding hazard curves. Example output attached

We want to be able to draw multiple line types on a hazard chart to communicate uncertainty. The central value ("mean") is drawn as a thick line. Uncertainty boxes are drawn by filling with a light solid color between the "0.2" and "0.8" lines. The outer uncertainty are drawn with thin lines using the "0.025" and "0.975" curves. Curve names in quotes here refer to the tags in the sample data provided. Names of these curves as provided by the API may change. Keep flexibility to draw more or fewer curves than the example.

Done when

• plot can draw multiple curves of the same color
• plot can alter line thickness of lines (moved to #62 )
• plot can shade between two lines on the figure
• plot can alter style of lines (e.g. make them dashed rather than solid) (moved to #62 )

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

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

The above components should take a poe value and calculate, then plot the poe line.

Migrate the SelectControl component from toshi

done when:

• SelectControl Component added
• Documentation added to Toshi Nest Wiki

on the spectra plot, the legend should not include a line for PoE. See attached figure

Should Calculate using Math.log(1 - 0.02) / 50 : -Math.log(1 - 0.1) / 50;

move from Wiki to per-component MD files + master (Readme?)

so that any new PRS will include DOC, + Test + Component

and ideally no need to maintain Wiki manually

• y-axis on hazard curve should read "Annual Probability of Exceedance"
• PoE legend on hazard curve should read "PoE X% in 50 years"
• PoE can be any value

add .prettierrc to the code base

We want the ability to turn on and off various map layers.

• cities
• transport / roads

Future: map layers, such as faults should be clickable to get information about the object selected

NB: needs some refinement

The documentation has been moved to the Wiki page of this github repo, and the react app that is within this repo should be renamed as "playground" because it will be used for testing/playground purpose only. Some config items in rollup.config.js will need to be changed

done when:

• Documentation react app is replaced by another working react app called playground
• When yarn i-all is ran, the node_modules for playground directory is updated
• When yarn build or yarn build-watch is ran, toshi-nest source code is build into /playground/src/component-lib
• files in component-lib should be ignored by git and not present in the codebase

We want to be able to specify properties of the uncertainty hazard curve plot:

• log or linear x-scale
• x-limits
• y-limits
• grid color
• background color
• grid numticks for x
• grid numticks for y

Users want to be able to click on a colored tile of the hazard map and get the value of hazard (acceleration) at that location. Text should be "{value} (g)"

We want a widget on the chart that opens a box that can contain chart controls. Those controls will be customized by use to allow the user some control over chart behavior and appearance (e.g. switch between linear and log scale). The widget would be a faint gear icon in the upper right corner of the chart that when clicked opens up the chart controls

Use the openstreetmap basemap for leaflet

Users want to be able to view the contribution to hazard (a disaggregation) as a function of distance or magnitude. To do that we need a bar chart plot for the disaggregations.

Types

The chart will come in two flavors:

• distance on x axis
• magnitude on x axis

Controls

The chart will have the following controls

• tectonic region check boxes (3 across the top)
• a slider for magnitude range or distance range across the bottom
• The slider control has a lower and upper value. The range between is colored (blue)

Initial state

• The slide should start with the full range (lower at lowest setting, upper at highest setting)

What to plot

The bar chart will plot:

• the full range in white
• the range selected by the slider in front of the white bars in (blue)

The API will supply values for the full range and the filtered range (x values and y values for bar chart). So there are 3 arrays/lists

• x
• y_full
• y_filtered

The API will supply values depending on:

• the slider selection (y_filtered will change)
• the tectonic region check boxes (y_full and y_filtered will change)

Responsive behavior

The chart will be responsive. No "submit" button. When the user changes the check boxes or slider, the API query is made and new arrays plotted

We want to be able to switch the uncertainty bounds (fill and curves for upper2,1 lower2,1) off to just display the mean curve for each group

take a opensha geojson and make it a) work b) fancy.

• revolve 3d
• popup/hover fault info

We want to be able to plot dissagregation data as 2D and/or 3D bar charts. There are 4 possible independent variables that a dissag chart could be plotted on:

• TRT (tectonic region type)
• magnitude
• distance
• epsilon

We want to user to be able to choose up to 2 variables for the spatial (x-y) axes of the plot and up to 1 for the color.

• If the user chooses 1 variable for the spatial axis the result is a 2D bar chart:
  
• If the user chooses 2 variables for the spatial axes, the result is a 3D bar chart:
  

Assume the application API will handle serving the correct data when axes are chosen by the user (i.e., collapsing of the data along certain axes must happen to create the correct data, this will be handled by either Kororaa or the API, it is not in scope for this ticket).

The color of the bars is plotted according to the color axis chosen by the user. The API will supply them in the order to be plotted and their contribution to the height of the bar, the component only needs to render them e.g.

For the uncertainty hazard curve we want to be able to specify curve and area fill style.

Properties of curve are:

• name
• stroke size (default ?)
• stroke opacity (default ?)
• stroke color
• stroke style (list of possible styles to be provided by @0qy (default ?)
• data (x,y)

For Area:

• name
• color
• opacity

Add solvis leaflet component to nest;
done when:

• leaflet component added to repo
• component has playground page and renders correctly
• component has good test coverage
• documentation added

Spectral charts don't display in storybook when set to log;

Users want to know what hazard data on the map is being displayed without the drawer open and need information about the units of the scale.

• text above the colorbar: Vs30 = {vs30}m/s, {spectral period} {poe}% in 50 years
• text below the colorbar: "Acceleration (g)"
• add background so underlying maps don't matter
• add api setting for z layer (we don't want this being the topmost layer)

Make leaflet map component render Geojson layer according to the styles present within each feature

Migrate the MultiSelect plot component from toshi

done when:

• Component added
• Documentation added to Toshi Nest Wiki including code demo, image of usage, and props table

We want a drawer component that can be used to control particular layers on a map (e.g. the seismic hazard or rupture set). Done when

• the drawer can be incorporated with a map
• it can be expanded to make controls available or collapsed to view more of the map
• it is configurable with entry boxes and drop down menus used to control a map layer

example of a drawer feature from google maps is attached. Example of a drawer feature as used in Kororaa can be found here https://www.figma.com/file/ggot2VddYVPGIF3u9TNl17/Korora?node-id=0%3A1

Q: is there any way to make plots more legible when user has zoomed in a long way....

Matt provided this example from TUI with zoom 240...