Developer Docs

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

Image

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.

Image

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

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

Image
Props
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.

Image
Props
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.

Image
Props
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.

Image
Props
<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.

Image
Props
<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.

Image
Props
<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.

Image
Props
<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.

Image
Props
<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.

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

On this page