> For the complete documentation index, see [llms.txt](https://nccr-liri.gitbook.io/annotation-web-interface-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nccr-liri.gitbook.io/annotation-web-interface-docs/technical/timeaxis-and-viewport.md).

# Timeaxis and Viewport

## TimeAxis.jsx

The Timeaxis is the horizontal bar at the top of Callmark. It is a child component of App.jsx and a singular component. It works in a similar way as in audio software such as Audacity or Adobe Audition. The user has an overview over all the different tracks, their length, as well as annotations in them.

```jsx
TimeAxis({
        height,
        width,
        maxPossibleTime,
        duration,
        startTime,
        endTime,
    })
```

`height` and `width` are values passed down from App.jsx to set the time axis dimensions.

`maxPossibleTime` is always the duration of the longest audio file.

`duration` is the duration of the currently visible audio (e.g. when a user is zoomed in and only 5 seconds out of a 20 seconds file are visible on the time axis. 

`startTime` the start time of the currently displayed audio. 

`endTime` the end time of the urrently displayed audio. 

```jsx
const timeAxisRef = useRef(null)
```

`timeAxisRef` is the reference object to tie the timeaxis canvas into the DOM.

## Viewport.jsx

The Viewport is the white rectangle that represents the currently visible section of audio (as opposed to the timeaxis, which shows the entire audio length). The user can resize and drag it freely to browse across the audio. Increasing the size is the equivalent to zooming out, decreasing it is the equivalent of zooming in, dragging to the left is the equivalent of going to the beginning of the file and dragging it to the right is going to the end.

```jsx
// Overview Window
const overviewRef = useRef(null)
let newViewportStartFrame = null
let newViewportEndFrame = null
let widthBetween_xStartTime_mouseX = null
let widthBetween_xEndTime_mouseX = null
```

`overviewAxisRef` is the reference object to tie the overview canvas into the DOM.

`newViewportStartFrame` and `newViewportEndFrame` store the start- and end-frame of the viewport bar in seconds and are updated in real-time upon drag events by the user to allow for a smooth animation.

`widthBetween_xStartTime_mouseX` and `widthBetween_xEndTime_mouseX` store the the width in pixels and are used for real-time calculation of the overview bars position when the user drags it.