Skip to content

Technical Documentation

Britt Sikora edited this page Jun 27, 2018 · 26 revisions
  • View the timeline for an overview of clinical events
  • Option to view reference lines for a point of time in the study
  • Option to view a frequency table for events that overlap with the reference line date
  • View points for events occurring on a single day
  • View lines for events that occur over multiple days
  • Option to view symbols that indicate that an event is on-going
  • View a legend that identifies the marks (points and lines) used in the chart
  • Click on the legend to filter on an event type
  • View the number and percentage of row identifiers displayed in the current view (updates with each user interaction)
  • Toggle the x-axis to display different time measures (e.g. study day, visit, or visit number)
  • Group items on the y-axis using a pre-selected variable
  • Change the input on the site filter and see an updated chart
  • Change the input on the row identifier filter and see an updated chart
  • Change the input on the event type filter and see an updated chart
  • Change the input on the ongoing filter and see an updated chart
  • Specify whether or not the ongoing filter should be displayed
  • Highlight an event type
  • Sort row identifiers by earliest event or alphanumerically and see an updated chart
  • Display metadata by hovering over a mark
  • Specify a custom tooltip
  • Click on a y-axis tick label to see a detailed view of the clinical events and the underlying data of that row identifier
  • Specify detail columns to appear in the summary table
  • Specify demographics to appear in participant summary view
  • Specify configuration settings for data listing: searchable, sortable, pagination, exportable
  • Search the data listing
  • Sort the data listing
  • Navigate the data listing via pagination controls
  • Export the data listing to a .csv file
  • Navigate from the detailed view back to the main page

Functional Specifications

Export Data

Users can download the data as a CSV by clicking on the download data button located underneath the chart title. The user can also view the download button when looking at a participant's data listing; this button is located under their individual data listing. The CSV file will contain all of the data if no filters have been utilized. If filters have been used, the CSV file will contain the resulting data. The file will also capture any sorting that has been initialized in the data. The CSV download will be named using the following convention: webchartsTableExport, date, and time. This feature can be turned on/off by configuring the chart settings.

Population Statistics

Displayed in the top left corner of the page, this statement describes the number of currently selected row identifiers, the total number of row identifiers, and the corresponding sample/population rate formatted as a percentage to one decimal place. Initially all events are visible in the chart and the sample/population rate is set to the number of row identifiers with any event divided by the total number of row identifiers, unless the project team requests otherwise. Filters affect the sample count and the population statistics are updated accordingly.

Mark Type Legend

Located above the chart, the mark type legend communicates what each type of line means for the events shown in the chart. A singular timepoint is shown as a circle; a completed event is shown as a line going through a time interval that begins and ends with a circle; and an ongoing event appears as a line stretching over a time interval that ends with an arrow.

Filter by Participant View

This drop-down lists all row identifiers included in the data. Selecting a specific row identifier displays a more detailed view of events experienced by that row identifier. This filter defaults to 'All'. Users can select a participant from the list even if they are not included in the filtered results in the chart.

Highlight Event Type

This drop-down highlights the selected event type in a bold, black fill within the display and also outlines the event type box within the legend. The default is set to 'None', but can be changed to highlight one event type at a time in the chart.

Filter by X-Axis Scale

The drop-down appears when the data contains both study days and dates. Users are able to select either variable to set as the chart's x-axis.

Time Controls

The drop-down allows users to select a range of time to apply to the chart. Users can select pre-specified time intervals or use the interactive time controls below the drop-down to select a custom time range. The Start and End controls accepts text input and offers the user an option to open a calendar for input. Manipulating the Start and End time controls will automatically change the time range drop-down to display "User Input".

Filter by Site

This drop-down lists all the sites included in the data. The default is set to include all sites, but users can select a specific site to subset the data and alter the chart.

Y-Axis Sort Filter

This toggle can sort the participant IDs included in the data set. This option can sort the data by the participants with the earliest occurring clinical event(s) or the participants that appear first alphabetically in descending order. This option defaults to the earliest occurring clinical events and their related participants.

Y-Axis Grouping Filter

This drop-down filter allows users to view the y-axis by a selected group. One group by variable can be selected at a time. The default group variable is set to 'None', and there are no available groupings to select, but the default can be adjusted to any group upon the project team's request. Once groupings are added, selecting a group will display the participant data by group.

Filter by Ongoing Status

This drop-down allows users to select if they would like to view all data, only view ongoing event data, or exclude ongoing event data. Events that are classified as ongoing are capped on the end of the right side with a right arrow symbol indicating this status.

Filter by Event Type

This menu is used to filter on various clinical events in the data set. The default is set to include all events, but users can select one or more events using CTRL + click. Each event type corresponds to a colored dot in the legend above the chart. Selecting an event type will display data that corresponds with the appropriate colored event, so events can be viewed in the timeline at a glance.

Filter using Legend

In addition to the event type filter, users can filter the data by event type using the legend. This feature can be employed by clicking on a colored box or the event type description next to it. If an event type is already selected, then clicking it in the legend will filter the data so that event type is no longer displayed and it will also deselect the event type within the filter picklist.

Reference Lines

Users can opt to view a vertical dotted reference line that marks a study day or another label within the chart. These lines are not included in the default set up because the lines must be specified by the user. Along with the vertical dotted line marking, the lines also have hover capabilities that users can mouse over to see more information about the line.

Symbols

Each symbol in the chart represents a point in the data. User can specify a type of mark to represent a variable using the 'event_symbols' setting control. The user can choose from circles ( default, squares, diamonds, and multi-directional triangles. The user can also specify the thickness of the black outline surrounding the mark to make it more prominent using the 'mark_thickness'. The user can use the same setting to dictate circle radius.

Frequency Table

When the reference lines are in use, there will be a frequency table breaking down the events that overlap the reference line by event type, and if the timelines are grouped, by the group variable.

Hover

By moving a mouse cursor over an event in the chart, users can display metadata for some variables. Hovering the cursor over a particular point will display the name of the event, the day the event started, and the day the event stopped. More information about the event can be accessed by clicking on the participant ID to the left of the chart or filtering on the ID. Additional settings can be applied to display different variable data within the tooltip.

Details View

Hovering the cursor over a particular data point will display some data, but clicking on the participant ID to the left of the chart or filtering on participant ID will load a more detailed view of all events. This view displays an individual clinical timeline for the participant and the raw data for a participant's clinical events. When initiated, the top left corner of the page will list the participant ID that the user is viewing. Users can also add additional participant characteristics, such as demographic information, underneath the participant ID in the details view by configuring the chart settings.

Individual Subject Timeline

The individual subject timeline shows all of the clinical events for a single participant in a timeline graphic. This display shows events broken out by type and includes the same information displayed on hover. The filtering options for participant and event type can also be used in this view. If a combination of participant and event type is selected that returns no results, then a message stating 'No data selected.' is displayed.

Data Table

The detailed view shows the raw data for each event associated with a single participant. This data is listed in a table and it shows the event name, sequence number for the event, the date and study day the event started, the date and study day the event stopped, the participant's id, and the site associated with the event. Users can add additional columns to this summary table by configuring the chart settings.

Pagination

If the data doesn't fit on the initial page, then pagination options appear at the bottom right corner. Each page defaults to show 10 records, so the pagination allows users to explore more data records than what is presented on the default page. This feature can be turned on/off by configuring the chart settings.

Search box

The detailed view allows the user to search for a specific term to locate it in the data. To initiate this feature, users can type text into the box and the entry automatically searches through the data listing and displays results with matching text. The number of records displayed is shown to the right of the search box. To return to the default data display, the user can click in the search box and delete the entered text. The search feature can be turned on/off by configuring the chart settings.

Sort using Column Header

Users can click on a column header and sort the data within a column in ascending and descending order. The first time a user clicks the column header, the column is sorted in ascending order and a box appears above the data listing containing the variable name that has been selected and an arrow indicating the direction of the ordered data. When a user clicks the column header a second time, the data will be sorted in descending order and the direction of the arrow in the box above the data listing will change to match the new sort. Clicking on the red 'x' within the box containing the variable name both removes the sorting and closes the box. The sort feature can be turned on/off by configuring the chart settings.

Return to the Clinical Timeline

The 'Back' button is only visible if users have clicked on the detailed view for a given participant. Clicking on this button returns users to the default Clinical Timelines view.

Regression Tests

Filters and Controls

  • Confirm that the number and percentage of participants is displayed in their own container, above the controls, in the top left corner
  • Confirm that A ⇓ Data button is displayed in the population details container and that the button exports the currently filtered data to .csv with one record per ID per event.
  • Confirm that the Controls and Filters are positioned vertically on the left side of the chart, in a container below the population/participant details
  • Confirm that legend renders at the top of the chart with a legend item for each event type present in the data
  • Confirm that each event type is represented by a distinct color
  • Confirm that clicking on and off event types in the legend acts to update the Event Type filter and which events are seen in the table
  • Confirm that the participants displayed is working correctly by using a filter and noting a change in the number and percentage of participants shown
  • Confirm that filtering by participant ID brings the user to the details view for that user
  • Confirm that within the participant details view, there is a prominent Back button in the participant details container in the top left corner.
  • Confirm that within the details view, selecting to view all participants brings the user back to the original chart screen
  • Confirm that filtering by event type shows data for only that event type
  • Confirm that clicking a legend item with a gray background removes that event type from the chart
  • Confirm that clicking a legend item with a white background adds that event type to the chart
  • Confirm that clicking a legend item updates the event type filter accordingly
  • Confirm that Site is not one of the default filters, but that it can be added using: {"filters":[ {"value_col":"SITE","label":"Site"} ]}
  • Confirm that if added, filtering by site changes the data points shown and alters the number and percentage of participants displayed
  • Confirm that filtering to "Y" on ongoing status only shows data points with the right arrow icon on the end and some single day events that are designated as ongoing
  • Confirm that filtering to "N" on ongoing status shows all data points except the ones with the right arrow icon on the end
  • Confirm that when filters are applied, a subject not shown in the chart can be selected from the Participant View and their details listing appears as expected
  • Confirm that entering the following settings removes the ongoing status icons and corresponding filter from the chart: "ongo_col":null
  • Confirm that the user can highlight any one event type and it receives a bold, black fill and also outlines the event type box within the legend
  • Confirm that the user can sort the x-axis by Day
  • Confirm that the user can sort the x-axis by Date
  • Confirm that the user can sort the y-axis by earliest event
  • Confirm that the user can sort the y-axis alphanumerically
  • Confirm that the default view does not contain the Y-axis grouping filter, but Y-axis grouping options can be added via custom settings. Ex: {"groupings":["SITE","AGE","SEX","RACE"]}
  • Confirm that grouping the participants by a y-axis variable shows a timeline for each variable in the group
  • Confirm that grouped variables can still be sorted using the y-axis sort dropdown
  • Confirm that Start and End controls appear in the controls section, defaulted to the current time range. When the x-axis scale is set to date, the Start and End controls display a date range, when set to day, the Start and End controls will be numbers.
  • Confirm that the Start and End controls for date accept input via a date picker that opens when you click on the field, and that the controls for day accept text input and may contain up and down arrows that increment or decrement the time range.
  • Confirm that the Start control cannot be greater than the End control, and vice versa.
  • Confirm that other functionality (filter, sort, search, etc.) works while grouping is active
  • Confirm that the tools work when there are missing values for either day or date variables. Can use the "testData/ADTIMELINES_partialMissing.csv" dataset and note that there are 10 participants with no "Day" info, and 5 participants with no "Date" info in this data set. Participant numbers should change accordingly when switching the x-axis type between Date and Day.
  • Confirm that all ID with missing day or date info are included in the Participant drop down. (In particular, 01-011 through 01-015 in ADTIMELINES_PartialMissing.csv should be visible in the dropdown when x-axis scale is filtered to date and those participants are not visible in the chart).
  • Confirm that a chart can be drawn with only one x-axis type, and that in this case, the x-axis control is hidden. Use ADTIMELINES_noDays.csv - which only has date information, but not day information to make sure the X-axis control does not display.

Chart

  • Confirm that hovering anywhere other than over a mark displays a tooltip with the x-position of the mouse (Study Day or Date)
  • Confirm that adding the following settings to the CAT produces vertical reference lines: {"reference_lines": [ {"timepoint":100,"label":"More than 99"}, 150 ]}
  • Confirm that hovering over a vertical line displays a text that matches the reference line specification
  • Confirm that hovering the mouse over a data point displays metadata (the name of the event, the day the event started, the day the event stopped) about that point
  • Confirm that custom tooltips appear on mouseover by default
  • Change the "tooltip_col" setting in CAT to another variable (e.g. "STDY") and confirm that the variable is shown within the tooltip
  • Confirm that a reference line can be added and a corresponding frequency table appears in the left column beneath the controls, where the title of the frequency table matches the reference line tooltip, and the frequency table breaks down the events that overlap the reference line by event type, and if the timelines are grouped, by the group variable. Ex settings: {"groupings":[{"value_col":"SEX","label":"sex"}],"reference_lines":[{"timepoint":"2015-05-01","label":"timepoint"}]}
  • Confirm that horizontal group annotations have a white background and that reference lines that overlap horizontal grouping annotations are not visible behind the horizontal grouping annotations. Ex settings: {groupings: ['RACE'], grouping_initial: 'RACE', reference_lines: ['2015-02-07']}
  • Confirm that reference lines are draggable. Hovering over the reference lines displays a pointer hand, and clicking and dragging the reference line moves the reference line. When moved, the reference line should update the reference line's tooltip to the corresponding timepoint, and the tooltip should appear beside the cursor. When the reference line is moved, the frequency table should update accordingly as well.

Details View

  • Confirm that clicking on an individual's ID will take the user to the individual's participant timeline
  • Confirm that the participant's ID appears in the top left corner
  • Confirm that legend renders at the top of the chart with a legend item for each event type present in the data
  • Confirm that each event type is represented by a distinct color
  • Confirm that clicking on and off event types in the legend acts to update the Event Type filter and which events are seen in the table
  • Confirm that all controls except the Participant view, Event highlighting, and X-axis scale; and all Filters except the Event Type; are hidden in the individual participant view.
  • Confirm that entering the following settings adds the demographic values to the participant ID presented in the participant details in the top left corner: {"id_characteristics": ["RFSTDTC", "ARM", "SEX"]}
  • Confirm that entering the following settings changes the participant details and detail labels in the top left corner: {"id_characteristics": [ {"value_col": "RFSTDTC", "label": "Reference Start Date"}, {"value_col": "ARM", "label": "Treatment Group"}, {"value_col": "SEX", "label": "Sex"} ]}
  • Confirm that a data listing for the participant appears below the timeline with default columns of: event type, sequence number for the event, the date and study day the event started, the date and study day the event stopped, the site associated with the event, and whether or not it is ongoing. The participant ID should not appear in the details listing, as it is shown in the participant details container at the top left of the chart. The tooltip_col variable should appear in the details listing (by default, this will be the Details column, but it can be configured).
  • Confirm that entering the following settings changes the columns presented in the participant detail listing: {"details": ["RFSTDTC", "ARM", "SEX"]}
  • Confirm that entering the following settings changes the columns and column headers presented in the participant detail listing: {"details": [ {"value_col": "RFSTDTC", "label": "Reference Start Date"}, {"value_col": "ARM", "label": "Treatment Group"}, {"value_col": "SEX", "label": "Sex"} ]}
  • Confirm that changing the input on the data filters updates the timeline and listing as expected
  • Confirm that a message stating 'No data selected.' is displayed when a combination of participant and event type is selected that returns no results
  • Confirm the participant timeline and listing only display events that correspond with the filters selected
  • Confirm that the table at the bottom of the participant details page has Search, sort, pagination, and CSV export turned on by default
  • Confirm pagination is listed at the bottom of the page and the page links work
  • Type a value into the search box and confirm that the data listing and the "records displayed" value to the right of the box both update
  • Delete the entered value from the search bar and confirm that the data listing resets
  • Confirm that a message stating 'No data selected.' is displayed when the search returns no results
  • Click a column header to confirm that it sorts the data values
  • Click the “x” on the sorted column name box and confirm that the box disappears and the sorting is no longer in effect
  • Confirm that selecting the CSV export button allows the user to download a CSV of the data shown
  • Confirm that entering the following settings turns off the corresponding functionality in the participant detail listing: {"details_config": { "searchable": false, "sortable": false, "pagination": false, "exportable": false }}
  • Confirm that selecting the 'Back' button above the timeline takes the user to the main clinical timeline
  • Confirm that no error is thrown when the x-axis time scale is toggled in the participant view, regardless of whether that ID is missing data for one or both time scales. (Use the testData/ADTIMELINES_partialMissing.csv dataset, and a participant with no Participant 01-010 or 01-011.)