Timeline Qwidget - AudacySpace/quindar-ux GitHub Wiki

The purpose of this qwidget is to display mission event timeline data in a “swimlane” chart with time related information, with the current time as a vertical line across the center view. This is used for mission planning and tracking.

The qwidget layout has three views:

  • Main View (Default view)
  • Delete Menu
  • Settings Menu

Main View

On opening the qwidget, this view is displayed. This viewing window has the following main elements.

  • Real time button
  • Date – Time selector
  • Set Time button
  • Swim lane chart

Real Time button

This button is used to display the current mission time indicator on the mission timeline. The color of the button is green when the current time indicator is displayed in the mission timeline.

Date – Time Selector

This selector is like a calendar which helps in selecting the date and time.On selection,the date-time selector field is displayed with the selected date and time in utc.

Set Time button

This button is used to set the current time indicator to the date - time selected from date - time selector. To set back to the mission’s current time, the user can click the real time button.

  • This is a chart which displays different events which occur during the timeline of the mission, displayed below different timezones(with UTC timezone being the default displayed timezone) with the current time indicator displayed vertically over the timezones and the events.
  • The events can be a single events or group of events categorized with an event header.
  • Each event has event bars with a start and stop time. The event meta data is displayed on hover on the event bar.On selecting an event bar,the color of the bar turns to yellow.
  • The chart view can be zoomed in to view longer time frame(event bars displayed shorter) and zoomed out to view shorter time frames(event bars displayed longer).
  • The chart view can be panned (left/right) to view different time frame.To get back to the current time, the user can click the real-time button on the top row of the qwidget.
  • A current time indicator displaying the current time on the chart.The indicator is a vertical line in red color overlaid on the events and timezones.
  • The top rows of the chart other than events are time axis for different timezones. The user can add different timezones from the settings menu to view the mission timeline.The default timezone is UTC.
  • Each event inside an event group has a menu button(arrow button on the left of the event name).The options inside the menu can be performed only for the selected event.The options are as follows
    • Hide: This option is used to hide the event row. On click on the event group header, the hidden event is unhidden.
    • Move Up: This option is used to move the event row above one level(except for the first event in the event group).
    • Move Down: This option is used to move the event row below one level(except for the last event in the event group).

Delete Menu

This menu can be viewed by clicking the trash icon on the qwidget header.This menu has yes and no buttons.This menu is used to delete the qwidget from the dashboard.

Settings Menu

This menu can be viewed by clicking the settings button(cog icon) on the qwidget header.This menu is used to select time zone or to select events.This menu has the following main elements.

  • A select type dropdown to select either time zone or events.
  • A dropdown to select timezone (this element is displayed only when Timezone is selected from select type dropdown).
  • A dropdown to select events (this element is displayed only when Events is selected from select type dropdown).The events/event groups data listed in the dropdown are uploaded using an excel file from the timeline data upload page on the mega proxy application.All the events occurring in the mission timeline are mentioned in an excel file.The excel file has two sheets, whith sheet 1 representing event name,event info and event group and sheet2 having each event's event bar information(start and stop time in each field of an event column).
  • A scrollable text area(this element is displayed only when Events is selected from select type dropdown) to arrange the order of display of the events or event groups.The events/eventgroups can be moved up and down by drag and drop.
  • Save and Close buttons

Timezone Selection

The time axis for different timezones are available for selection using select timezone dropdown.Each list item in the dropdown list is a timezone name.

Required: one or none selection

The following section explains how to select timezone and add its time axis it to the qwidget main layout.

  1. From Select Type dropdown, select Timezone. This will show the dropdown to select the time zone.
  2. From Select Timezone dropdown, select a time zone. The available time zones to select are UTC, San Francisco, Luxembourg and Singapore. This selection is required to add the time axis to the main layout.

Event Selection

The events currently available for the mission timeline are available for selection from select events dropdown.The list has options to check all,uncheck all,search event or event group,select group or an event.All the events are displayed below the search bar in the dropdown list. The default view of the main layout displays all the events.

Required: atleast one event selection.

The following section explains how to select events and add them to the qwidget main layout.

  1. From Select Type dropdown, select Events. This will show the dropdown to select the events.
  2. From Select Events dropdown, select one or more events. This selection is required to add the events to the main layout.The order of the event rows can be managed using event order text area.

Save

This is used to save the selected timezone or events. On successful save,the qwidget layout changes from settings menu to main view layout displaying the selected timezones(if no timezone selected,displays the UTC time axis) and the selected events and event groups.

Close

This is used to close the settings menu and view the main layout.Any changes made before close are lost if not saved.