gns-science / kororaa Goto Github PK
View Code? Open in Web Editor NEWKororaa - the public web UI of NSHM project.
License: GNU Affero General Public License v3.0
Kororaa - the public web UI of NSHM project.
License: GNU Affero General Public License v3.0
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
I also want to specify:
Then find the nearest point in the model where hazard has been pre-calculated
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:
Plot axis are empty to start. A submit button to generate the plots.
Buttons to:
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
Users need a Disaggregations page in Kororaa. The following needs to be added:
Disaggregations Page will serve static pages of disaggregation reports in an iframe (similar to TUI solution analysis)
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":
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
Please make use of the following ...
Warning, breaking API Changes
color_scale_vmax
argument and the API will work out the scale automatically (rounding up to nearest 0.5 interval) 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:
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
So we can demonstrate some interactive hazard curves.
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:
The format of the csv file should be
lat | lon | vs30 | period | quantile | accleration0 | acceleration1 | acceleration2 | ... |
---|---|---|---|---|---|---|---|---|
-43.0 | 175.0 | 250 | PGA | mean | poe0 | poe1 | poe2 | ... |
-43.0 | 175.0 | 250 | SA(1.0) | mean | poe0 | poe1 | poe2 | ... |
-43.0 | 175.0 | 400 | PGA | mean | poe0 | poe1 | poe2 | ... |
-43.0 | 175.0 | 400 | SA(1.0) | mean | poe0 | poe1 | poe2 | ... |
-44.5 | 174.1 | 250 | PGA | mean | poe0 | poe1 | poe2 | ... |
-44.5 | 174.1 | 240 | SA(1.0) | mean | poe0 | poe1 | poe2 | ... |
Where acceleration0
, acceleration1
are the x values of the hazard curve plot and poe0
, poe1
are the y values of the hazard curve plot
lat | lon | vs30 | period | 0.01 | 0.02 | 0.04 | ... |
---|---|---|---|---|---|---|---|
-43.0 | 175.0 | 250 | PGA | .43 | .32 | .19 | ... |
-43.0 | 175.0 | 250 | SA(1.0) | poe0 | poe1 | poe2 | ... |
-43.0 | 175.0 | 400 | PGA | poe0 | poe1 | poe2 | ... |
-43.0 | 175.0 | 400 | SA(1.0) | poe0 | poe1 | poe2 | ... |
-44.5 | 174.1 | 250 | PGA | poe0 | poe1 | poe2 | ... |
-44.5 | 174.1 | 240 | SA(1.0) | poe0 | poe1 | poe2 | ... |
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
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
Done when
-40,175
should be valid input-40.2,175;
should be valid inputclear
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:
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
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:
[250, 300, 350, 400, 450, 750 ]
['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)']
Note: for now use `"{'hazard_model": "TEST1", "aggs": "mean" }
also:
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
With
( )
for units in axes labels, not [ ]
poes
should be changed to be more obvious what they mean
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
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
)
}
}
}
As a Kororaa user I want to be able to enter hazard curve locations latitude and longitude pairs.
Done when
lat lon
field in the following format (lat and lon separated by ~
, each location separated by ,
lat1~lon1, lat2~lon2, lat3~lon3
etc.lat lon
field is updated with the lat lon for that city.lat~lon
are queried in the API to get hazard curves for plottingNotes:
Parked:
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.
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....
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 APIwhich has:
when changing spectral period on hazard map, user must select non-existant one to update
We want to improve the clarity of the hazard curve and spectra. Done when
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.