Develop with FastTrack

To change the timeline's range, click and drag along the timeline. Tablet or trackpad users can also use the spread and pinch gestures or commands.

This example shows a /v1/search response payload. Each result in the response has an array of event information in an activities property. These events can be displayed on a timeline and associated with their entity instance (which in this case is a person).

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "active",
                            "activities": [
                                {
                                    "description": "Started at Fadeo",
                                    "ts": "2013-06-22"
                                },
                                {
                                    "description": "Promoted",
                                    "ts": "2019-08-15"
                                }
                            ]
                        }
                    }
                ]
            }
        },
        // more results...
    ],
    // more metadata...
}

This React application includes the Timeline widget configured to display the example payload:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, Timeline } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  const TimelineConfig = {
    entityTypeConfig: {
      path: "extracted.content[0].envelope.entityType"
    },
    entities: [
      {
          entityType: 'person',
          path: 'extracted.content[0].envelope',
          label: 'lastName',
          eventPath: 'activities',
          items: [
              {
                  label: 'description',
                  timePath: 'ts'
              },           
          ],
          detailConfig: [
              {
                  label: 'First Name',
                  path: 'firstName'
              },
              {
                label: 'Last Name',
                path: 'lastName'
              },
          ]
      }
    ]
  }
 
  const TimelineSettings = {
    entityTypes: {
        default: {
            labelColor: 'white'
        },
        person: {
            labelColor: 'tomato'
        },
        organization: {
            labelColor: '#D4886A'
        }
    },
    eventTypes: {
            default: {
                showArrows: true,
            },
            "2013-06-22": {
                color: 'fuchsia'
            }
        }
    }
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div>
          <div style={{height: '400px'}}>
          <Timeline
            data={context?.searchResponse?.results}
            config={TimelineConfig}
            theme={'light'}
            onTimelineClick={(event) => console.log('Timeline!', event)}
            settings={TimelineSettings}
          />
          </div>
      </div>
    </div>
  );
}
  
export default App;

In the example:

The Timeline widget supports event handlers corresponding to user interactions on the timeline. In the example, the onTimelineClick event handler responds to clicks on timeline events. For details about supported event handlers, see API.

The Example React application renders this:

This is an example response for a person document:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "active",
                            "activities": [
                                {
                                    "description": "Started at Fadeo",
                                    "ts": "2013-06-22"
                                },
                                {
                                    "description": "Promoted",
                                    "ts": "2019-08-15"
                                }
                            ]
                        }
                    }
                ]
            }
        },
        // more results...
    ],
    // more metadata...
}

This is a React application with the Timeline widget configured to display the data from the response:

import { useContext, useEffect } from "react";
import './App.css';
import { MarkLogicContext, Timeline } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  useEffect(() => {
    context.getDocument('/person/1001.json');
  }, []);
 
  const TimelineConfig = {
      entityTypeConfig: {
        path: "data.envelope.entityType"
      },
      entities: [
        {
            entityType: 'person',
            path: 'data.envelope',
            label: 'firstName',
            eventPath: 'activities',
            items: [
                {
                    label: 'description',
                    timePath: 'ts'
                },           
            ]
        }
      ]
  }
  
  return (
    <div className="App">
      <div>
          <div style={{height: '240px'}}>
          <Timeline
            data={context?.documentResponse}
            config={TimelineConfig}
          />
          </div>
      </div>
    </div>
  );
}
  
export default App;

In the example  application:

The Timeline widget configured with the example code renders this:

A row represents the events in the document.

The settings prop accepts an entityTypes property for specifying entity styles and an eventTypes property for specifying event styles. This code defines a TimelineSettings variable to use for the settings prop:

const TimelineSettings = {
    entityTypes: {
        Persons: {
          labelColor: "darkslategray",
          color: "purple",
          lineWidth: 6
        }
    },
    eventTypes: {
        default: {
            fontIcon: {
              fontFamily: "Font Awesome 5 Free",
              fontWeight: 900,
              text: "\uf101"
            }
        },
        "Started at Fadeo": {
            color: "orange"
        },
        Promoted: {
            color: "fuchsia"
 
        }
    }
}

This is sample React application code when the settings prop is added to the Timeline widget:

import '@fortawesome/fontawesome-free/css/fontawesome.css';
import '@fortawesome/fontawesome-free/css/all.css';
 
<Timeline
  data={context?.documentResponse}
  config={TimelineConfig}
  settings={TimelineSettings}
/>

Styling the entities and events using the settings prop described in Styling Entities and Events renders this:

For more information, see the third-party documentation included with FastTrack.

This example shows a detailConfig array. The array defines a popup window that displays the first and last name of the person entity instance associated with the event:

const TimelineConfig = {
    entityTypeConfig: {
      path: "data.envelope.entityType"
    },
    entities: [
      {
          entityType: 'person',
          path: 'data.envelope',
          label: 'firstName',
          eventPath: 'activities',
          items: [
              {
                  label: 'description',
                  timePath: 'ts'
              },           
          ],
          detailConfig: [
              {
                  label: "First Name",
                  path: "firstName"
              },
              {
                  label: "Last Name",
                  path: "lastName"
              }
          ]
      }
    ]
}

For each detailConfig array element, the window displays a label followed by the value determined by a path configuration (which is relative to the parent path value). 

The popup window is based on the Kendo Window component. 

The window can be styled by passing a windowSettings prop into the Timeline widget. This configuration object sets the window title, window height and width, and also makes the window draggable:

onst WindowConfig = {
  title: "Event Info",
  initialHeight: 150,
  initialWidth: 240,
  draggable: true
}

The React application code looks like this with the popup window configuration added to the windowSettings prop for the Timeline widget:

<Timeline
  data={context?.documentResponse}
  config={TimelineConfig}
  windowSettings={WindowConfig}
/>

Adding the popup window configuration information results in this window appearing when an event is clicked: