C#Bot Timelines Client-side Overview

Flow Chart of React Components

All Timeline Components are found in /clientside/src/Timelines with the exception of the Timeline Page which is found in /clientside/src/Views/Pages/Admin/Timelines/.

Timeline Page

/clientside/src/Views/Pages/Admin/Timelines/TimelinePage.tsx

Role

The page lives in the Admin area of the application and can be routed to using the route /admin/timelines or by clicking the Timeline link in the admin area.

Providing route props to the Timeline tile

The Timeline Page is wrapper for the Timeline Tile which performs routing for the Tile callback functions onClickViewItem, onRouteToListView and onRouteToGraphView. It also takes route props and passes them down to the Timeline Tile. i.e. when routing to /admin/timelines/list the Timeline Page will read /list from the route and tell the Timeline Tile to render the list view using the Timeline Tile component prop.

Props

• RouteComponentProps: The route used to access the page.

Timeline Tile

/clientside/Timelines/TimelineTile.tsx

Role

The Timeline tile is both responsible for deciding which Timeline View to display (Graph or List) and maintaining state between timeline views. It can be rendered without passing in any props.

Maintaining filter state between timeline views.

The Timeline tile initialises the TimelineFilter which contains all the filters applied to the timeline views (Search Term, Instance Id's, Start Date, End Date, Timeline Action Type, Timeline Entity). The properties of the TimelineFilter are exposed through the TimelineTopBar (the filter users can interact with) but are stored in the Timeline tile so the filter can be kept when changing between List and Graph views.

Display List and Graph Views

The Timeline tile accepts callback props to handle routing between List and Graph view. These are onRouteToListView and onRouteToGraphView. If these props are not provided, the Timeline tile is able to toggle between these views without using routing.

Props

• timelineEntity: [Optional] Which Timeline entity type to display in the timeline view.
• entityId: [Optional] Id of a specific entity to filter on.
• component: [Optional] Specify List or Graph view to be displayed initially. Will render Graph view initially be default.
• canChangeTimelineEntity: [Optional] Is the user able to change which Timeline entity is displayed in the view?
• onClickViewItem: [Optional] Callback function for when a user clicks on entry in the list or graph view. Can be used to route to CRUD view for the entity instance
• onRouteToListView: [Optional] Callback function for when a user has request to change from Graph to List view.;
• onRouteToGraphView: [Optional] Callback function for when a user has request to change from List to Graph view.;
• timelineViewDate: [Optional] The date to focus on when loading the either List or Graph view.;

Example Usage

<TimelineTile />

Timeline Top Bar

/clientside/Timelines/Shared/TimelineTopBar.tsx

Role

Control the contents of the TimelineFilter

The component controls the contents of the filter object passed through all of the Timeline components. The GraphViewGraph and ListViewList listen and react to changes in the filter object. The parameters of the filter object are exposed to the user through a SearchForm, DatePickers and MultiCombox.

Render ListViewControls or GraphViewControls component

The Timeline Top Bar is also responsible for rendering the ListViewControls and the GraphViewControls which can be passed in as children.

Props

• timelineFilter : TimelineFilter containing the filtering constraints for the data shown.

Example Usage

<TimelineTopBar
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
 />

Timeline List View

/clientside/Timelines/TimelineListView/TimelineListView.tsx

Role

The Timeline list view is a wrapper component which has little internal logic and renders the collection of components which makes up what is seen on the Timeline list view page.

Rendering list view sub-components

The list view renders the TimelineTopBar, ListViewControls, ListViewList and the ListViewSidebar.

Handling Quick Jump

The Timeline list view passes a callback function to the ListViewSidebar which is called when a user has selected a quick jump option. The selected date is then passed down into the ListViewList which will react by fetching new data and scrolling to the selected date.

Props

• timelineFilter : TimelineFilter containing the filtering constraints for the data shown.
• onClickViewItem : [Optional] Callback function for when an item in the ListViewList is clicked
• onSwitchToGraphView : Callback function for when the user the option to switch to graph view
• timelineViewDate : [Optional] The date to quickjump/focus on

Example Usage

<TimelineListView
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
    onSwitchToGraphView={() => undefined}
 />

List View List

/clientside/Timelines/TimelineListView/ListViewList.tsx

Role

Fetching and displaying data

The List View List uses the parameters in the TimelineFilter to create graphql queries to fetch and render Timeline Events.

Scroll Correction

The List View List will perform scroll corrections when a user has scrolled to the top of the list and more data is loaded in the top of the list. The scroll correction makes loading data into the top of the list appear seamless.

Reacting to TimelineFilter and QuickJumpDate changes

The List View List uses mobX reactions to react to changes in the timelineFilter and quickJumpDate props. When these props change the List View List will react by re-fetching data through graphQl.

Props

• timelineFilter : TimelineFilter containg the filtering constraints for the data shown.
• quickJumpDate: Date to quick jump to;
• onClickViewItem : [Optional] Callback function for when an item is clicked

Example Usage

<ListViewList
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
    quickJumpDate={undefined}
 />

List View Sidebar

/clientside/Timelines/TimelineListView/ListViewSidebar.tsx

Role

Fetching Quick Jump Options

The List View Sidebar will use the TimelineFilter to form a query to a Timeline entities quick-jump-options endpoint, and then render the list of quick jump options.

Notify parent of quick jump selection

The list view will call the onQuickJump prop when a user has clicked on a quick jump option, and pass through the selected DateRange.

Props

• timelineFilter : TimelineFilter containg the filtering constraints for the data shown.
• onQuickJump : Callback function for when a user has selected a quick jump options

<ListViewQuickJumpSidebar
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
    onQuickJump={() => undefined}
 />

List View Controls

/clientside/Timelines/TimelineListView/ListViewControls.tsx

Role

Listen for click on the Graph View button

The component is made up of a single button.

Props

• onClick : Callback for when the Switch to Graph View button is called.

<ListViewTopBarControls
    onClick={() => undefined}
 />

Timeline Graph View

/clientside/Timelines/TimelineGraphView/TimelineGraphView.tsx

Role

The Timeline graph view is a wrapper component that has little internal logic and renders the collection of components which makes up what is seen on the Timeline graph view page.

Rendering list view sub-components

The graph view renders the TimelineTopBar, GraphViewControls, GraphViewGraph and the GraphViewSidebar.

Handling Zoom and Panning

The Timeline graph view holds the date parameters that control the time-span displayed in the Graph (stored in the vairable GraphWindowLimits). It also contains the callback functions passed into the GraphViewControls and GraphViewGraph that can modify what the time-span is set to.

Props

• timelineFilter : TimelineFilter containing the filtering constraints for the data shown.
• onClickViewItem : [Optional] Callback function for when an item is clicked
• onSwitchToListView: Callback function for when the user the option to switch to list view

<TimelineGraphView
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
    onSwitchToListView={() => undefined}
 />

Graph View Graph

/clientside/Timelines/TimelineGraphView/GraphViewGraph.tsx

Role

Fetch Date-Time Clusters

The Graph View Graph will fetch date-time clusters from a Timeline entities timeline-graph-data endpoint using the timelineFilter and graphWindowLimits to construct the query.

Reacting to changes in the timelineFilter and graphWindowLimits props

The component uses mobX autorun to listen to changes in the component props and will fetch new graphing data when any of the props change.

Props

• onPanLeft: Callback function for when the user clicks the chevron to the left of the graph
• onPanRight: Callback function for when the user clicks the chevron to the right of the graph
• timelineFilter : TimelineFilter containing the filtering constraints for the data shown.
• graphWindowLimits: The time-span to be displayed in the graph view
• onClickViewInListView: Callback function for when user selects the option to view a cluster in the list view
• onClickViewItem: [Optional] Callback function for user selects to view an item from the cluster context menu
• animationClassName: Classname to be used for applying panning and zooming animations
• onClickZoomItem: Callback function for when a user clicks to zoom in on a cluster

<GraphViewGraph
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
    graphWindowLimits={{
        startDate: moment(Date.now()).subtract(1, "month"),
        endDate: moment(Date.now())}}
    onClickZoomItem={() => undefined}
    onPanLeft={() => undefined}
    onPanRight={() => undefined}
    onClickViewInListView={() => undefined}
    animationClassName={''}
 />

Graph View Sidebar

/clientside/Timelines/TimelineGraphView/GraphViewSidebar.tsx

Role

Display Recent Activity

Fetch recent events using TimelineFilter to construct graphQl queries.

Display Legend

Render the list of ‘Action Types’ contained in the TimelineFilter. This component does not fetch the list of action types, instead, the TimelineTile does.

Props

• timelineFilter : TimelineFilter containing the filtering constraints for the data shown.

<GraphViewSidebar
    timelineFilter={{
        searchTerm: '',
        instanceIds: [],
        startDate: undefined,
        endDate: undefined,
        selectedActionTypes: [],
        actionTypeOptions: [],
        selectedTimelineEntity: Models.SomeTimelineEntity,
        timelineEntityOptions: [Models.SomeTimelineEntity]}}
 />

Graph View Controls

/clientside/Timelines/TimelineGraphView/GraphViewControls.tsx

Role

Listen for clicks on the buttons and call the respective callback functions

The component is made up of a group of buttons that call functions passed into the component as props.

Props

• onJumpToToday: Callback function for when the user clicks on the ‘Jump To Today’ button
• onZoomBackToDefault: Callback function for when the user clicks on the ‘Back To Default’ button
• onZoomIn: Callback function for when the user clicks on the ‘Zoom In’ button
• onZoomOut: Callback function for when the user clicks on the ‘Zoom Out’ button
• onPanLeft: Callback function for when the user clicks on the ‘Pan Left’ button
• onPanRight: Callback function for when the user clicks on the ‘Pan Right’ button
• onSwitchToListView: Callback function for when the user clicks on the ‘List View’ button

<GraphViewTopBarControls
    onPanRight={() => undefined}
    onPanLeft={() => undefined}
    onJumpToToday={() => undefined}
    onZoomBackToDefault={() => undefined}
    onZoomIn={() => undefined}
    onZoomOut={() => undefined}
    onSwitchToListView={() => undefined}
 />