Implemented timeline events !

8 files changed, 295 insertions, 86 deletions

diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml
new file mode 100644
index 000000000..c75ef41ee
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml
@@ -0,0 +1,93 @@
+<UserControl x:Class="Tango.MachineStudio.Logging.Views.EventDetailsView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI"
+             xmlns:vm="clr-namespace:Tango.MachineStudio.Logging.ViewModels"
+             xmlns:entities="clr-namespace:Tango.BL.Entities;assembly=Tango.BL"
+             xmlns:local="clr-namespace:Tango.MachineStudio.Logging.Views"
+             mc:Ignorable="d" 
+             Height="500" Width="800" Background="White" d:DataContext="{d:DesignInstance Type=vm:EventDetailsViewVM, IsDesignTimeCreatable=False}">
+
+    <UserControl.Resources>
+        <converters:DateTimeUTCToStringConverter x:Key="DateTimeUTCToStringConverter" />
+    </UserControl.Resources>
+
+    <Grid>
+        <Grid Grid.RowSpan="2">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="60"/>
+                <RowDefinition Height="31*"/>
+                <RowDefinition Height="50"/>
+            </Grid.RowDefinitions>
+
+            <StackPanel Orientation="Horizontal">
+                <materialDesign:PackIcon Width="42" Height="42" VerticalAlignment="Center">
+                    <materialDesign:PackIcon.Style>
+                        <Style TargetType="materialDesign:PackIcon">
+                            <Setter Property="Kind" Value="Alert"></Setter>
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding Event.Category}" Value="Info">
+                                    <Setter Property="Kind" Value="Information"></Setter>
+                                    <Setter Property="Foreground" Value="DimGray"></Setter>
+                                </DataTrigger>
+                                <DataTrigger Binding="{Binding Event.Category}" Value="Warning">
+                                    <Setter Property="Kind" Value="Alert"></Setter>
+                                    <Setter Property="Foreground" Value="#FFA300"></Setter>
+                                </DataTrigger>
+                                <DataTrigger Binding="{Binding Event.Category}" Value="Error">
+                                    <Setter Property="Kind" Value="AlertOctagon"></Setter>
+                                    <Setter Property="Foreground" Value="#FF5C5C"></Setter>
+                                </DataTrigger>
+                                <DataTrigger Binding="{Binding Event.Category}" Value="Critical">
+                                    <Setter Property="Kind" Value="BellPlus"></Setter>
+                                    <Setter Property="Foreground" Value="Red"></Setter>
+                                </DataTrigger>
+                                <DataTrigger Binding="{Binding Event.Type}" Value="ApplicationStarted">
+                                    <Setter Property="Kind" Value="ClockFast"></Setter>
+                                    <Setter Property="Foreground" Value="White"></Setter>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </materialDesign:PackIcon.Style>
+                </materialDesign:PackIcon>
+                <TextBlock VerticalAlignment="Center" Text="{Binding Event.EventType.Name}" Margin="10 0 0 0" FontSize="16"></TextBlock>
+            </StackPanel>
+
+            <Grid Grid.Row="1">
+                <DockPanel>
+                    <UniformGrid Columns="2" DockPanel.Dock="Top">
+                        <controls:TableGrid RowHeight="30">
+                            <TextBlock Text="Date:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.DateTime,Converter={StaticResource DateTimeUTCToStringConverter},ConverterParameter='MM/dd/yyyy HH:mm:ss.fff'}"></TextBlock>
+                            <TextBlock Text="Host Name:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.HostName}"></TextBlock>
+                            <TextBlock Text="Machine:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.Machine.SerialNumber}"></TextBlock>
+                            <TextBlock Text="User:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.User.Contact.FullName}"></TextBlock>
+                        </controls:TableGrid>
+
+                        <controls:TableGrid RowHeight="30">
+                            <TextBlock Text="Category:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.EventType.EventTypesCategory.Name}"></TextBlock>
+                            <TextBlock Text="Group:" FontWeight="SemiBold" />
+                            <TextBlock Text="{Binding Event.EventType.EventTypesGroup.Name}"></TextBlock>
+                        </controls:TableGrid>
+                    </UniformGrid>
+
+                    <Border Padding="5" BorderThickness="1" BorderBrush="Gainsboro">
+                        <TextBox BorderThickness="0" Text="{Binding Event.Description}" Style="{x:Null}" TextWrapping="Wrap" IsReadOnly="True" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Background="Transparent" />
+                    </Border>
+                </DockPanel>
+            </Grid>
+
+            <Grid Grid.Row="2">
+                <Button HorizontalAlignment="Right" Width="140" Command="{Binding CloseCommand}">CLOSE</Button>
+            </Grid>
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml.cs
new file mode 100644
index 000000000..dd447e1b6
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventDetailsView.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Tango.MachineStudio.Logging.Views
+{
+    /// <summary>
+    /// Interaction logic for EventDetailsView.xaml
+    /// </summary>
+    public partial class EventDetailsView : UserControl
+    {
+        public EventDetailsView()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventsView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventsView.xaml
index a3b4ae6bf..d92e56ddc 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventsView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/EventsView.xaml
@@ -16,6 +16,7 @@
     <UserControl.Resources>
         <autoCompleteMachine:MachinesProvider x:Key="MachinesProvider" />
         <converters:DateTimeUTCToShortDateTimeConverter x:Key="DateTimeUTCToShortDateTimeConverter" />
+        <converters:DateTimeUTCToStringConverter x:Key="DateTimeUTCToStringConverter" />
         <localConverters:DateIsInListToBooleanConverter x:Key="DateIsInListToBooleanConverter" />
 
         <Style x:Key="CustomCalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}" BasedOn="{StaticResource MaterialDesignCalendarDayButton}">
@@ -191,7 +192,7 @@
                                                 </DataTemplate>
                                             </DataGridTemplateColumn.CellTemplate>
                                         </DataGridTemplateColumn>
-                                        <DataGridTextColumn Header="DATE TIME" Binding="{Binding DateTime,Converter={StaticResource DateTimeUTCToShortDateTimeConverter}}" />
+                                        <DataGridTextColumn Header="DATE TIME" Binding="{Binding DateTime,Converter={StaticResource DateTimeUTCToStringConverter},ConverterParameter='MM/dd/yyyy HH:mm:ss.fff'}" />
                                         <DataGridTextColumn Header="HOST" Binding="{Binding HostName}" />
                                         <DataGridTextColumn Header="USER" Binding="{Binding User.Contact.FullName,Mode=OneTime}" />
                                         <DataGridTextColumn Header="GROUP" Binding="{Binding EventType.EventTypesGroup.Name}" />
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/MainView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/MainView.xaml
index 6d841149e..6d5f98b51 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/MainView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/MainView.xaml
@@ -22,7 +22,7 @@
                     <local:EventsView/>
                 </ContentControl>
                 <ContentControl Tag="TimelineView">
-                    <local:TimelineView/>
+                    <local:TimelineWrapperView />
                 </ContentControl>
             </controls:MultiTransitionControl.Controls>
         </controls:MultiTransitionControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml
index e746f67b3..504514cbb 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml
@@ -7,17 +7,19 @@
              xmlns:global="clr-namespace:Tango.MachineStudio.Logging"
              xmlns:localConverters="clr-namespace:Tango.MachineStudio.Logging.Converters"
              xmlns:entities="clr-namespace:Tango.BL.Entities;assembly=Tango.BL"
+             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:vm="clr-namespace:Tango.MachineStudio.Logging.ViewModels"
              xmlns:localControls="clr-namespace:Tango.MachineStudio.Logging.Controls"
              xmlns:local="clr-namespace:Tango.MachineStudio.Logging.Views"
              mc:Ignorable="d" 
-             d:DesignHeight="1080" d:DesignWidth="1920" Background="White" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}" MouseWheel="UserControl_MouseWheel">
+             d:DesignHeight="1080" d:DesignWidth="1920" Background="White" d:DataContext="{d:DesignInstance Type=vm:TimelineViewVM, IsDesignTimeCreatable=False}" MouseWheel="UserControl_MouseWheel">
 
     <UserControl.Resources>
         <localConverters:TimeSpanToXConverter x:Key="TimeSpanToXConverter" />
         <localConverters:MachineEventToXConverter x:Key="MachineEventToXConverter" />
         <localConverters:SecondsToWidthConverter x:Key="SecondsToWidthConverter" />
+        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
 
         <LinearGradientBrush x:Key="infoBrush" StartPoint="0.5,0" EndPoint="0.5,1">
             <GradientStop Color="White"/>
@@ -39,26 +41,14 @@
             <GradientStop Color="White" Offset="1"/>
         </LinearGradientBrush>
 
+        <LinearGradientBrush x:Key="hoverBrush" StartPoint="0.5,0" EndPoint="0.5,1">
+            <GradientStop Color="#9D9D9D"/>
+            <GradientStop Color="#F9F9F9" Offset="1"/>
+        </LinearGradientBrush>
     </UserControl.Resources>
 
     <Grid>
         <Grid>
-            <Grid.RowDefinitions>
-                <RowDefinition Height="70"/>
-                <RowDefinition Height="1*"/>
-            </Grid.RowDefinitions>
-
-            <Grid>
-                <StackPanel Orientation="Horizontal" Margin="10">
-                    <Button MinWidth="160" Height="50" Style="{StaticResource MaterialDesignFlatButton}" Command="{Binding NavigateToEventsCommand}" HorizontalContentAlignment="Left">
-                        <StackPanel Orientation="Horizontal" >
-                            <materialDesign:PackIcon Kind="KeyboardBackspace" Width="20" Height="20" />
-                            <TextBlock Margin="5 0 0 0" FontSize="16">BACK</TextBlock>
-                        </StackPanel>
-                    </Button>
-                </StackPanel>
-            </Grid>
-
             <Grid Grid.Row="1">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="30"/>
@@ -77,7 +67,7 @@
 
                 </Grid>
 
-                <ItemsControl ItemsSource="{Binding TimelineEventGroups}" Grid.Column="0" Grid.Row="1" Margin="0 -3 0 0">
+                <ItemsControl ItemsSource="{Binding TimelineEventGroups}" Grid.Column="0" Grid.Row="1" Margin="0 0 0 0" Background="#FCFCFC" Height="{Binding ElementName=scrollViewer,Path=ViewportHeight}" VerticalAlignment="Top">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <UniformGrid Columns="1" />
@@ -85,76 +75,112 @@
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate DataType="{x:Type vm:TimelineEventGroup}">
-                            <Border BorderThickness="1 1 1 1" BorderBrush="{StaticResource AccentColorBrush}" Margin="2 2 0 2">
+                            <Border BorderThickness="1 0.5 1 0.5" BorderBrush="{StaticResource AccentColorBrush}" Margin="2 0 0 0" Padding="5">
 
-                                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="28" FontWeight="SemiBold" Foreground="{StaticResource AccentColorBrush}"></TextBlock>
+                                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" TextWrapping="Wrap" TextAlignment="Center" FontWeight="SemiBold" Foreground="{StaticResource AccentColorBrush}"></TextBlock>
                             </Border>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
 
-                <ScrollViewer x:Name="scrollViewer" Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
-                    <ItemsControl ItemsSource="{Binding TimelineEventGroups}" HorizontalAlignment="Left">
-                        <ItemsControl.Width>
-                            <MultiBinding Converter="{StaticResource TimeSpanToXConverter}">
-                                <Binding Path="TimelineMaxTime" />
-                                <Binding Path="TimelineScaleFactor" />
-                            </MultiBinding>
-                        </ItemsControl.Width>
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <UniformGrid Columns="1" />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate DataType="{x:Type vm:TimelineEventGroup}">
-                                <ItemsControl ItemsSource="{Binding Events}">
-                                    <ItemsControl.ItemsPanel>
-                                        <ItemsPanelTemplate>
-                                            <UniformGrid IsItemsHost="True" Columns="1"></UniformGrid>
-                                        </ItemsPanelTemplate>
-                                    </ItemsControl.ItemsPanel>
-                                    <ItemsControl.ItemTemplate>
-                                        <DataTemplate DataType="{x:Type entities:MachinesEvent}">
-                                            <Canvas Margin="10">
-                                                <Grid Height="{Binding RelativeSource={RelativeSource AncestorType=Canvas},Path=ActualHeight}">
-                                                    <Canvas.Left>
-                                                        <MultiBinding Converter="{StaticResource MachineEventToXConverter}">
-                                                            <Binding Path="." />
-                                                            <Binding RelativeSource="{RelativeSource AncestorType=UserControl}" Path="DataContext.TimelineEventGroups" />
-                                                            <Binding RelativeSource="{RelativeSource AncestorType=UserControl}" Path="DataContext.TimelineScaleFactor" />
-                                                        </MultiBinding>
-                                                    </Canvas.Left>
-                                                    <Border BorderBrush="#4E4E4E" BorderThickness="1" Padding="10"  MinHeight="20" MinWidth="50">
-                                                        <Border.Style>
-                                                            <Style TargetType="Border">
-                                                                <Style.Triggers>
-                                                                    <DataTrigger Binding="{Binding Category}" Value="Info">
-                                                                        <Setter Property="Background" Value="{StaticResource infoBrush}"></Setter>
-                                                                    </DataTrigger>
-                                                                    <DataTrigger Binding="{Binding Category}" Value="Warning">
-                                                                        <Setter Property="Background" Value="{StaticResource warningBrush}"></Setter>
-                                                                    </DataTrigger>
-                                                                    <DataTrigger Binding="{Binding Category}" Value="Error">
-                                                                        <Setter Property="Background" Value="{StaticResource errorBrush}"></Setter>
-                                                                    </DataTrigger>
-                                                                    <DataTrigger Binding="{Binding Category}" Value="Crtitical">
-                                                                        <Setter Property="Background" Value="{StaticResource criticalBrush}"></Setter>
-                                                                    </DataTrigger>
-                                                                </Style.Triggers>
-                                                            </Style>
-                                                        </Border.Style>
-                                                        <TextBlock Text="{Binding Description}" Height="17"></TextBlock>
-                                                    </Border>
-                                                </Grid>
-                                            </Canvas>
-                                        </DataTemplate>
-                                    </ItemsControl.ItemTemplate>
-                                </ItemsControl>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
+                <localControls:TimelineScrollViewer x:Name="scrollViewer" Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
+                    <Grid HorizontalAlignment="Left">
+                        <ItemsControl ItemsSource="{Binding TimelineEventGroups}" HorizontalAlignment="Left" MinWidth="{Binding RelativeSource={RelativeSource AncestorType=localControls:TimelineScrollViewer},Path=ActualWidth}">
+                            <ItemsControl.Width>
+                                <MultiBinding Converter="{StaticResource TimeSpanToXConverter}" ConverterParameter="300">
+                                    <Binding Path="TimelineMaxTime" />
+                                    <Binding Path="TimelineScaleFactor" />
+                                </MultiBinding>
+                            </ItemsControl.Width>
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <UniformGrid Columns="1" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate DataType="{x:Type vm:TimelineEventGroup}">
+                                    <Border BorderThickness="0 0 0 1" BorderBrush="#98DEFF" Margin="0 0 0 0">
+                                        <ItemsControl ItemsSource="{Binding Events}">
+                                            <ItemsControl.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <UniformGrid IsItemsHost="True" Columns="1"></UniformGrid>
+                                                </ItemsPanelTemplate>
+                                            </ItemsControl.ItemsPanel>
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate DataType="{x:Type entities:MachinesEvent}">
+                                                    <Canvas Margin="0 5 0 5" MinHeight="20">
+                                                        <Grid Height="{Binding RelativeSource={RelativeSource AncestorType=Canvas},Path=ActualHeight}">
+                                                            <Canvas.Left>
+                                                                <MultiBinding Converter="{StaticResource MachineEventToXConverter}">
+                                                                    <Binding Path="." />
+                                                                    <Binding RelativeSource="{RelativeSource AncestorType=UserControl}" Path="DataContext.TimelineEventGroups" />
+                                                                    <Binding RelativeSource="{RelativeSource AncestorType=UserControl}" Path="DataContext.TimelineScaleFactor" />
+                                                                </MultiBinding>
+                                                            </Canvas.Left>
+                                                            <Border BorderBrush="#4E4E4E" BorderThickness="1" Padding="2" MinWidth="50" Cursor="Hand">
+                                                                <i:Interaction.Triggers>
+                                                                    <i:EventTrigger EventName="PreviewMouseUp">
+                                                                        <i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.EventSelectedCommand}" CommandParameter="{Binding}" />
+                                                                    </i:EventTrigger>
+                                                                </i:Interaction.Triggers>
+                                                                <Border.Style>
+                                                                    <Style TargetType="Border">
+                                                                        <Style.Triggers>
+                                                                            <DataTrigger Binding="{Binding Category}" Value="Info">
+                                                                                <Setter Property="Background" Value="{StaticResource infoBrush}"></Setter>
+                                                                            </DataTrigger>
+                                                                            <DataTrigger Binding="{Binding Category}" Value="Warning">
+                                                                                <Setter Property="Background" Value="{StaticResource warningBrush}"></Setter>
+                                                                            </DataTrigger>
+                                                                            <DataTrigger Binding="{Binding Category}" Value="Error">
+                                                                                <Setter Property="Background" Value="{StaticResource errorBrush}"></Setter>
+                                                                            </DataTrigger>
+                                                                            <DataTrigger Binding="{Binding Category}" Value="Crtitical">
+                                                                                <Setter Property="Background" Value="{StaticResource criticalBrush}"></Setter>
+                                                                            </DataTrigger>
+                                                                            <Trigger Property="IsMouseOver" Value="True">
+                                                                                <Setter Property="Opacity" Value="0.7"></Setter>
+                                                                            </Trigger>
+                                                                        </Style.Triggers>
+                                                                    </Style>
+                                                                </Border.Style>
+                                                                <StackPanel Orientation="Horizontal">
+                                                                    <TextBlock FontWeight="SemiBold" Text="{Binding EventType.Name}" Height="14" FontSize="11"></TextBlock>
+                                                                    <TextBlock Margin="10 0 0 0" Text="{Binding Description}" Height="14" FontSize="11"></TextBlock>
+                                                                </StackPanel>
+                                                            </Border>
+                                                        </Grid>
+                                                    </Canvas>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </Border>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+
+                        <Canvas Visibility="{Binding EnableTimeMarker,Converter={StaticResource BooleanToVisibilityConverter}}" MinWidth="{Binding RelativeSource={RelativeSource AncestorType=localControls:TimelineScrollViewer},Path=ActualWidth}" ClipToBounds="False" IsHitTestVisible="False">
+                            <Grid Height="{Binding RelativeSource={RelativeSource AncestorType=Canvas},Path=ActualHeight}" ClipToBounds="False">
+                                <Canvas.Left>
+                                    <MultiBinding Converter="{StaticResource TimeSpanToXConverter}">
+                                        <Binding Path="CurrentPosition" />
+                                        <Binding Path="TimelineScaleFactor" />
+                                    </MultiBinding>
+                                </Canvas.Left>
+
+                                <Rectangle Stroke="DodgerBlue" StrokeThickness="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
+                                <Polygon Fill="DodgerBlue" Points="0,0 16,0 8,15 0,0" Margin="-8 -5 0 0" VerticalAlignment="Top" />
+                            </Grid>
+                        </Canvas>
+                    </Grid>
+                </localControls:TimelineScrollViewer>
+
+                <Border Grid.Row="1" Grid.Column="1"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="20" Padding="10" Background="#7ECECECE" CornerRadius="5">
+                    <Grid>
+                        <materialDesign:PackIcon Kind="MagnifyPlus" Margin="0 -35 0 0" Width="20" Height="20" Foreground="Gray" />
+                        <Slider Minimum="0.5" Maximum="100" Value="{Binding TimelineScaleFactor}" Orientation="Vertical" Height="120"/>
+                    </Grid>
+                </Border>
             </Grid>
         </Grid>
     </Grid>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml.cs
index 53e2362dc..e1c09e49f 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineView.xaml.cs
@@ -21,12 +21,12 @@ namespace Tango.MachineStudio.Logging.Views
     /// </summary>
     public partial class TimelineView : UserControl
     {
-        private MainViewVM _vm;
+        private TimelineViewVM _vm;
 
         public TimelineView()
         {
             InitializeComponent();
-            this.Loaded += (_, __) => _vm = DataContext as MainViewVM;
+            this.Loaded += (_, __) => _vm = DataContext as TimelineViewVM;
         }
 
         private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml
new file mode 100644
index 000000000..abab55264
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml
@@ -0,0 +1,33 @@
+<UserControl x:Class="Tango.MachineStudio.Logging.Views.TimelineWrapperView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:global="clr-namespace:Tango.MachineStudio.Logging"
+             xmlns:vm="clr-namespace:Tango.MachineStudio.Logging.ViewModels"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:local="clr-namespace:Tango.MachineStudio.Logging.Views"
+             mc:Ignorable="d" 
+             d:DesignHeight="1080" d:DesignWidth="1920" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="70"/>
+            <RowDefinition Height="1*"/>
+        </Grid.RowDefinitions>
+
+        <Grid>
+            <StackPanel Orientation="Horizontal" Margin="10">
+                <Button MinWidth="160" Height="50" Style="{StaticResource MaterialDesignFlatButton}" Command="{Binding NavigateToEventsCommand}" HorizontalContentAlignment="Left">
+                    <StackPanel Orientation="Horizontal" >
+                        <materialDesign:PackIcon Kind="KeyboardBackspace" Width="20" Height="20" />
+                        <TextBlock Margin="5 0 0 0" FontSize="16">BACK</TextBlock>
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </Grid>
+
+        <Grid Grid.Row="1">
+            <local:TimelineView DataContext="{Binding TimelineViewVM}" />
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml.cs
new file mode 100644
index 000000000..1ca2c30cb
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Logging/Views/TimelineWrapperView.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Tango.MachineStudio.Logging.Views
+{
+    /// <summary>
+    /// Interaction logic for TimelineWrapperView.xaml
+    /// </summary>
+    public partial class TimelineWrapperView : UserControl
+    {
+        public TimelineWrapperView()
+        {
+            InitializeComponent();
+        }
+    }
+}