Skip to content

Draft: WDFN-879 create data details component

Briggs, Aaron Shane requested to merge abriggs/waterdataui:WDFN-879_create_data_details_component into main

Before making a pull request

  • Put the appropriate EXEMPT flag if needed in the MR label (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
  • Run all linters (make lint)
  • Run all tests (make test)
  • Update the changelog appropriately
  • If making a release, update code.json metadataLastUpdated and bump CHANGELOG.md to next version.

Draft: WDFN-879 create data details component

This draft has covers the basic implementation of the Data details table It works with a single data type to show both the latest value and selected value Image - data details single data type

image

It works with two data types to show the latest and selected value

Image - data detail two data types

image

It works on mobile

Image - data details two data types mobile

image

It deals with data types with no data

Image -data details where second data type has no data

image

Image - data details where the primary data type has no data

image

It deals with field visits

Image - data details with field visits

image

It deals with masked data

Image - data details with two data types one of which is ice masked

image

So those image should indicate there a bunch of fringe cases that have been covered what this code does not cover is

  • converted temperature
  • masks that are not for ice: the categories that determine which masks to use are different for the sources that provide the 'latest' value vs the 'selected'. There is overlap but not all are the same, currently the logic for latest and selected are isolated into separated components and duplicated. I did not have time to dig into the details of how each and every mask is labeled in the data. The best way to consolidate this should be investigated
  • the latest value for the secondary parameter, will not know the method if there is no data in the time span so it currently picks the first method (which is right most of the time, but not always)
  • the css for the masks does not work
  • this circle markers need refinement - currently they all have a drop shadow (really a second black circle underneath), the circle markers also don't do the opacity change between primary and secondary data types as is on the graph and current tooltips (If implemented, I'm not sure if this would be visible to the user anyway)

Code structure -

Each of the rows in the 'table' are independent however they use common components

at the lowest level each uses the DataDetailsGridRow component to provide the structure to each row

the next component up is a logic layer that compartmentalizes the logic required for each row type (currently 'latest' and 'selected' (and the header row but that has no required logic))

the row components are then held in the DataDetails Grid which is the only component of the set the interacts with the application state

the DataDetailsGrid is in the IvTimeSeriesGraph container component which also hold the TimeSeriesGraph component, this allows the row to have access to tool tip data

. . . and that is the short version summary

After making a pull request

  • If appropriate, put the link to the PR in the JIRA ticket
  • Assign someone to review unless the change is trivial
  • Check the accessibility CI step and fix or explain any issues.
Edited by Briggs, Aaron Shane

Merge request reports