Skip to content

Technical Documentation

emmorris edited this page Nov 9, 2017 · 26 revisions
  • View the timeline for an overview of clinical events
  • Option to view reference lines for a point of time in the study
  • 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

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.

Filter by Participant ID

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'.

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.

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.

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.

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.

Sort by Subject IDs

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', but the default can be adjusted to any group upon the project team's request. Selecting a group will display the participant data by group.

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.

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 day the event started, the 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.

Export Data

Users can download the data as a CSV by clicking on the 'CSV' button located underneath the chart within the detailed view. 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.

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
  • 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 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 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 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
  • 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 entering the following settings removes the ongoing status icons 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 y-axis by earliest event
  • Confirm that the user can sort the y-axis alphanumerically
  • 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 other functionality (filter, sort, search, etc.) works while grouping is active

Chart

  • Confirm that adding the following settings to the CAT produces vertical reference lines: {"referenceLines": [ {"studyDay":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

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 and demographic data appear in the top left corner
  • Confirm that entering the following settings changes the columns 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 day the event started, the day the event stopped, the participant's id, the site associated with the event, and whether or not it is ongoing
  • 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 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
  • 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: {"listingConfig": { "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
Clone this wiki locally