wsba-hockey 1.0.3__py3-none-any.whl → 1.0.4__py3-none-any.whl

wsba_hockey/evidence/weakside-breakout/wsba_nhl_apps/wsba_nhl_apps/matchups/rink_plot.py

@@ -0,0 +1,245 @@
+
+import numpy as np
+import plotly.graph_objects as go
+import io
+import base64
+import requests as rs
+from PIL import Image
+
+def rink(setting = "full", vertical = False):
+    '''
+    Function to plot rink in Plotly. Takes 2 arguments :
+
+    setting : full (default) for full ice, offense positive half of the ice, ozone positive quarter of ice, defense for negative half of the ice, dzone for negative quarter of the ice, and neutral for the neutral zone
+    vertical : True if you want a vertical rink, False (default) is for an horizontal rink
+
+    '''
+
+    def faceoff_circle(x, y, outer=True):
+        segments = []
+        theta = np.linspace(0, 2*np.pi, 300)
+        if outer:
+            # Outer circle
+            x_outer = x + 15*np.cos(theta)
+            y_outer = y + 15*np.sin(theta)
+            outer_circle = go.Scatter(x=x_outer, y=y_outer, mode='lines', line=dict(width=2, color='red'), showlegend=False, hoverinfo='skip')
+
+            segments.append(outer_circle)
+
+        # Inner circle
+        x_inner = x + np.cos(theta)
+        y_inner = y + np.sin(theta)
+        inner_circle = go.Scatter(x=x_inner, y=y_inner, mode='lines', fill='toself', fillcolor='rgba(255, 0, 0, 0.43)', line=dict(color='rgba(255, 0, 0, 1)', width=2), showlegend=False, hoverinfo='skip')
+        
+        segments.append(inner_circle)
+        
+        return segments  #segments
+    
+    fig = go.Figure()
+
+    if vertical :
+        setting_dict = {
+            "full" : [-101, 101],
+            "offense" : [0, 101],
+            "ozone" : [25, 101],
+            "defense" : [-101, 0],
+            "dzone" : [-101, -25],
+            "neutral" : [-25,25]
+        }
+        fig.update_layout(xaxis=dict(range=[-42.6, 42.6], showgrid=False, zeroline=False, showticklabels=False, constrain="domain"), yaxis=dict(range=setting_dict[setting], showgrid=False, zeroline=False, showticklabels=False, constrain="domain"),
+                        showlegend=False, autosize=True, template="plotly_white")
+        fig.update_yaxes(
+            scaleanchor="x",
+            scaleratio=1,
+        )
+        def goal_crease(flip=1):
+            x_seq = np.linspace(-4, 4, 100)
+            x_goal = np.concatenate(([-4], x_seq, [4]))
+            y_goal = flip * np.concatenate(([89], 83 + x_seq**2/4**2*1.5, [89]))
+            goal_crease = go.Scatter(x=x_goal, y=y_goal, fill='toself', fillcolor='rgba(173, 216, 230, 0.3)', line=dict(color='red'))
+            return goal_crease
+
+        # Outer circle
+        theta = np.linspace(0, 2*np.pi, 300)
+        x_outer = 15 * np.cos(theta)
+        y_outer = 15 * np.sin(theta)
+        fig.add_trace(go.Scatter(x=x_outer, y=y_outer, mode='lines', line=dict(color='royalblue', width=2), showlegend=False, hoverinfo='skip'))
+        # Inner circle
+        theta2 = np.linspace(np.pi/2, 3*np.pi/2, 300)
+        x_inner = 42.5 + 10 * np.cos(theta2)
+        y_inner = 10 * np.sin(theta2)
+        fig.add_trace(go.Scatter(x=x_inner, y=y_inner, mode='lines', line=dict(color='red', width=2), showlegend=False, hoverinfo='skip'))
+        # Rink boundaries
+        fig.add_shape(type='rect', xref='x', yref='y', x0=-42.5, y0=25, x1=42.5, y1=26, line=dict(color='royalblue', width=1), fillcolor='royalblue', opacity=1)
+        fig.add_shape(type='rect', xref='x', yref='y', x0=-42.5, y0=-25, x1=42.5, y1=-26, line=dict(color='royalblue', width=1), fillcolor='royalblue', opacity=1)
+        fig.add_shape(type='rect', xref='x', yref='y', x0=-42.5, y0=-0.5, x1=42.5, y1=0.5, line=dict(color='red', width=2), fillcolor='red')
+        
+        # Goal crease
+        fig.add_trace(goal_crease())
+        fig.add_trace(goal_crease(-1))
+        # Goal lines
+        goal_line_extreme = 42.5 - 28 + np.sqrt(28**2 - (28-11)**2)
+        fig.add_shape(type='line', xref='x', yref='y', x0=-goal_line_extreme, y0=89, x1=goal_line_extreme, y1=89, line=dict(color='red', width=2))
+        fig.add_shape(type='line', xref='x', yref='y', x0=-goal_line_extreme, y0=-89, x1=goal_line_extreme, y1=-89, line=dict(color='red', width=2))
+
+        # Faceoff circles
+        fig.add_traces(faceoff_circle(-22, 69))
+        fig.add_traces(faceoff_circle(22, 69))
+        fig.add_traces(faceoff_circle(-22, -69))
+        fig.add_traces(faceoff_circle(22, -69))
+        fig.add_traces(faceoff_circle(-22, -20, False))
+        fig.add_traces(faceoff_circle(22, -20, False))
+        fig.add_traces(faceoff_circle(-22, 20, False))
+        fig.add_traces(faceoff_circle(22, 20, False))
+        
+        # Sidelines
+        theta_lines = np.linspace(0, np.pi/2, 20)
+        x_lines1 = np.concatenate(([-42.5], -42.5 + 28 - 28*np.cos(theta_lines), 42.5 - 28 + 28*np.cos(np.flip(theta_lines))))
+        y_lines1 = np.concatenate(([15], 72 + 28*np.sin(theta_lines), 72 + 28*np.sin(np.flip(theta_lines))))
+        x_lines2 = np.concatenate(([-42.5], -42.5 + 28 - 28*np.cos(theta_lines), 42.5 - 28 + 28*np.cos(np.flip(theta_lines))))
+        y_lines2 = np.concatenate(([15], -72 - 28*np.sin(theta_lines), -72 - 28*np.sin(np.flip(theta_lines))))
+        fig.add_trace(go.Scatter(x=x_lines1, y=y_lines1, mode='lines', line=dict(color='white', width=2), showlegend=False, hoverinfo='skip'))
+        fig.add_trace(go.Scatter(x=x_lines2, y=y_lines2, mode='lines', line=dict(color='white', width=2), showlegend=False, hoverinfo='skip'))
+        fig.add_shape(type='line', xref='x', yref='y', x0=42.5, y0=-72.5, x1=42.5, y1=72.5, line=dict(color='white', width=2))
+        fig.add_shape(type='line', xref='x', yref='y', x0=-42.5, y0=-72.5, x1=-42.5, y1=72.5, line=dict(color='white', width=2))
+        
+        # Add goals
+        goal_width = 6     # feet
+        goal_depth = 4     # feet
+
+        # Top goal
+        fig.add_shape(
+            type="rect",
+            xref="x",
+            yref="y",
+            x0=-goal_width / 2,
+            y0=89,
+            x1=goal_width / 2,
+            y1=89 + goal_depth,
+            line=dict(color="red", width=2),
+        )
+        # Bottom goal
+        fig.add_shape(
+            type="rect",
+            xref="x",
+            yref="y",
+            x0=-goal_width / 2,
+            y0=-89 - goal_depth,
+            x1=goal_width / 2,
+            y1=-89,
+            line=dict(color="red", width=2),
+        )
+
+    else : 
+        setting_dict = {
+            "full" : [-101, 101],
+            "offense" : [0, 101],
+            "ozone" : [25, 101],
+            "defense" : [-101, 0],
+            "dzone" : [-101, -25]
+        }
+        fig.update_layout(xaxis=dict(range=setting_dict[setting], showgrid=False, zeroline=False, showticklabels=False), yaxis=dict(range=[-42.6, 42.6], showgrid=False, zeroline=False, showticklabels=False, constrain="domain"),
+                        showlegend=True, autosize =True, template="plotly_white")
+        fig.update_yaxes(
+            scaleanchor="x",
+            scaleratio=1,
+        )
+        def goal_crease(flip=1):
+            y_seq = np.linspace(-4, 4, 100)
+            y_goal = np.concatenate(([-4], y_seq, [4]))
+            x_goal = flip * np.concatenate(([89], 83 + y_seq**2/4**2*1.5, [89]))
+            goal_crease = go.Scatter(x=x_goal, y=y_goal, fill='toself', fillcolor='rgba(173, 216, 230, 0.3)', line=dict(color='red'), showlegend=False, hoverinfo='skip')
+            return goal_crease
+        
+        # Outer circle
+        theta = np.linspace(0, 2 * np.pi, 300)
+        x_outer = 15 * np.sin(theta)
+        y_outer = 15 * np.cos(theta)
+        fig.add_trace(go.Scatter(x=x_outer, y=y_outer, mode='lines', line=dict(color='royalblue', width=2), showlegend=False, hoverinfo='skip'))
+        # Inner circle
+        theta2 = np.linspace(3 * np.pi / 2, np.pi / 2, 300)  # Update theta2 to rotate the plot by 180 degrees
+        x_inner = 10 * np.sin(theta2)  # Update x_inner to rotate the plot by 180 degrees
+        y_inner = -42.5 - 10 * np.cos(theta2)  # Update y_inner to rotate the plot by 180 degrees
+        fig.add_trace(go.Scatter(x=x_inner, y=y_inner, mode='lines', line=dict(color='red', width=2), showlegend=False, hoverinfo='skip'))
+        
+        # Rink boundaries
+        fig.add_shape(type='rect', xref='x', yref='y', x0=25, y0=-42.5, x1=26, y1=42.5, line=dict(color='royalblue', width=1), fillcolor='royalblue', opacity=1)
+        fig.add_shape(type='rect', xref='x', yref='y', x0=-25, y0=-42.5, x1=-26, y1=42.5, line=dict(color='royalblue', width=1), fillcolor='royalblue', opacity=1)
+        fig.add_shape(type='rect', xref='x', yref='y', x0=-0.5, y0=-42.5, x1=0.5, y1=42.5, line=dict(color='red', width=2), fillcolor='red')
+        # Goal crease
+        fig.add_trace(goal_crease())
+        fig.add_trace(goal_crease(-1))
+        # Goal lines
+        goal_line_extreme = 42.5 - 28 + np.sqrt(28 ** 2 - (28 - 11) ** 2)
+        fig.add_shape(type='line', xref='x', yref='y', x0=89, y0=-goal_line_extreme, x1=89, y1=goal_line_extreme, line=dict(color='red', width=2))
+        fig.add_shape(type='line', xref='x', yref='y', x0=-89, y0=-goal_line_extreme, x1=-89, y1=goal_line_extreme, line=dict(color='red', width=2))
+        # Faceoff circles
+        fig.add_traces(faceoff_circle(-69, -22))
+        fig.add_traces(faceoff_circle(-69, 22))
+        fig.add_traces(faceoff_circle(69, -22))
+        fig.add_traces(faceoff_circle(69, 22))
+        fig.add_traces(faceoff_circle(-20, -22, False))
+        fig.add_traces(faceoff_circle(-20, 22, False))
+        fig.add_traces(faceoff_circle(20, -22, False))
+        fig.add_traces(faceoff_circle(20, 22, False))
+
+        # Sidelines
+        theta_lines = np.linspace(0, np.pi / 2, 20)
+        x_lines1 = np.concatenate(([15], 72 + 28 * np.sin(theta_lines), 72 + 28 * np.sin(np.flip(theta_lines))))
+        y_lines1 = np.concatenate(([-42.5], -42.5 + 28 - 28 * np.cos(theta_lines), 42.5 - 28 + 28 * np.cos(np.flip(theta_lines))))
+        x_lines2 = np.concatenate(([15], -72 - 28 * np.sin(theta_lines), -72 - 28 * np.sin(np.flip(theta_lines))))
+        y_lines2 = np.concatenate(([-42.5], -42.5 + 28 - 28 * np.cos(theta_lines), 42.5 - 28 + 28 * np.cos(np.flip(theta_lines))))
+        fig.add_trace(go.Scatter(x=x_lines1, y=y_lines1, mode='lines', line=dict(color='white', width=2), showlegend=False, hoverinfo='skip'))
+        fig.add_trace(go.Scatter(x=x_lines2, y=y_lines2, mode='lines', line=dict(color='white', width=2), showlegend=False, hoverinfo='skip'))
+        fig.add_shape(type='line', xref='x', yref='y', x0=-72.5, y0=-42.5, x1=72.5, y1=-42.5, line=dict(color='white', width=2))
+        fig.add_shape(type='line', xref='x', yref='y', x0=-72.5, y0=42.5, x1=72.5, y1=42.5, line=dict(color='white', width=2))
+
+        # Add goals
+        goal_width = 6     # feet
+        goal_depth = 4     # feet
+
+        # Right goal
+        fig.add_shape(
+            type="rect",
+            xref="x",
+            yref="y",
+            x0=89,
+            y0=-goal_width / 2,
+            x1=89 + goal_depth,
+            y1=goal_width / 2,
+            line=dict(color="red", width=2),
+        )
+        # Left goal
+        fig.add_shape(
+            type="rect",
+            xref="x",
+            yref="y",
+            x0=-89 - goal_depth,
+            y0=-goal_width / 2,
+            x1=-89,
+            y1=goal_width / 2,
+            line=dict(color="red", width=2),
+        )
+
+    # Add logo
+    logo = Image.open(rs.get('https://f005.backblazeb2.com/file/weakside-breakout/utils/wsba.png',stream=True).raw)
+
+    fig.add_layout_image(
+        dict(
+            source=logo,
+            xref="x",
+            yref="y",
+            x=-12,
+            y=12,
+            sizex=24,
+            sizey=24,
+            sizing="stretch",
+            opacity=1)
+        )
+    
+    #Set background to transparent
+    fig.update_layout(
+        paper_bgcolor="rgba(0,0,0,0)", 
+        plot_bgcolor="rgba(0,0,0,0)"
+    )
+    return fig

wsba_hockey/evidence/weakside-breakout/wsba_nhl_apps/wsba_nhl_apps/pbp/app.py

@@ -0,0 +1,389 @@
+import pandas as pd
+import plotly.express as px
+import plot as wsba_plt
+import numpy as np
+from urllib.parse import *
+from shiny import *
+from shinywidgets import output_widget, render_widget 
+
+app_ui = ui.page_fluid(
+    ui.tags.link(
+        rel='stylesheet',
+        href='https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'
+    ),
+    ui.tags.style(
+        """
+        body {
+            background-color: #09090b;
+            color: white;
+            font-family: 'Bebas Neue', sans-serif;
+        }
+
+        .custom-input input.form-control,
+        .custom-input .selectize-control,
+        .custom-input .selectize-input {
+            background-color: #09090b !important;  /* black background */
+            color: white !important;               /* white font color */
+            border-radius: 4px;
+            border: 1px solid #444;
+        }
+
+        .custom-input .selectize-dropdown,
+        .custom-input .selectize-dropdown-content {
+            background-color: #09090b !important;
+            color: white !important;
+        }          
+
+        .custom-input .selectize-control.multi .item {
+            background-color: #09090b !important;
+            color: white !important;
+            border-radius: 4px;
+            padding: 2px 6px;
+            margin: 2px 4px 2px 0;
+        }
+
+        label.control-label {
+            color: white !important;
+        }   
+
+        .selectize-control.multi {
+            width: 300px !important;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .submit-button {
+            display: flex;
+            justify-content: center;
+        }
+
+        .hide {
+            display: none;
+        }
+
+        .table thead tr {
+            --bs-table-bg: #09090b;
+            --bs-table-color-state: white;
+        }
+
+        .table thead tr th {
+            white-space: nowrap;
+            text-align: center;
+            color: white;
+            background-color: #09090b;
+        }
+
+        .table tbody tr {
+            --bs-table-bg: #09090b;
+            --bs-table-color-state: white;
+        }
+
+        .table tbody tr td {
+            white-space: nowrap;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: white;
+            background-color: #09090b;
+        }
+
+        .table thead th {
+            text-align: center !important;
+        }
+    """
+    ),
+    ui.output_ui('add_filters'),
+    output_widget("plot_game"),
+    ui.output_ui('metrics'),
+    ui.output_ui('timeline_filter'),
+    ui.output_data_frame("plays"),
+    output_widget("timelines"),
+)
+
+def server(input, output, session):
+    query = reactive.Value(None)
+
+    def schedule():
+        schedule = pd.read_csv('https://f005.backblazeb2.com/file/weakside-breakout/info/schedule.csv')
+        
+        return schedule.loc[schedule['gameState'].isin(['OFF','FINAL'])]
+
+    @reactive.Effect
+    def query_params():
+        #Retreive query parameters
+        search = session.input[".clientdata_url_search"]()
+        q = parse_qs(urlparse(search).query)
+
+        print(q)
+        #If no input data is provided automatically provide a select game and plot all 5v5 fenwick shots
+        defaults = {
+            'game_id':[str(schedule()['id'].iloc[-1])],
+            'event_type':['missed-shot,shot-on-goal,goal'],
+            'strength_state':['all'],
+            'filters':['false'],
+            'table':['false']
+        }
+
+        for key in defaults.keys():
+            if key not in q.keys():
+                q.update({key:defaults[key]})
+        
+        query.set(q)
+        
+    def active_params():
+        return query.get() or {}
+
+    @output
+    @render.ui
+    def add_filters():
+        query = active_params()
+
+        games = schedule() 
+
+        game_title = games.loc[games['id'].astype(str)==query['game_id'][0],'game_title'].to_list()[0]
+        date = games.loc[games['id'].astype(str)==query['game_id'][0],'date'].to_list()[0]
+        all_strengths = ['3v3','3v4','3v5','4v3','4v4','4v5','4v6','5v3','5v4','5v5','5v6','6v4','6v5']
+        #If filters is true among the url parameters then display the filters with the url params setting the values of the filters
+        if query['filters'][0] == 'true':
+            #Iterate through query and parse params with multiple selections
+            for param in query.keys():
+                q_string = query[param][0]
+                query[param] = q_string.split(',')
+
+            return ui.panel_well(
+                ui.tags.div(
+                {"class": "form-row custom-input"},
+                    ui.input_date('game_date','Date',value=date),
+                    ui.input_selectize('game_title','Game',{query['game_id'][0]:game_title}),
+                    ui.input_selectize('event_type','Events',['blocked-shot','missed-shot','shot-on-goal','goal','hit','penalty','giveaway','takeaway','faceoff'],selected=query['event_type'],multiple=True),
+                    ui.input_selectize('strength_state','Strengths',all_strengths,selected=(all_strengths if query['strength_state'][0]=='all' else query['strength_state']),multiple=True),
+                ),
+                ui.tags.div(
+                {"class": "submit-button"},
+                    ui.input_action_button('submit','Submit')
+                )
+            )
+        else:
+            return ui.input_action_button('submit','Submit',class_='hide')
+    
+    @reactive.effect
+    @reactive.event(input.game_date)
+    def update_games():
+        query = active_params()
+        if query['filters'][0] == 'true':
+            games = schedule()
+
+            date_games = games.loc[games['date']==str(input.game_date())].set_index('id')['game_title'].to_dict()
+            ui.update_selectize(id='game_title',choices=date_games)
+
+    @reactive.calc
+    def params():
+        query = active_params()
+        
+        #Set params based on filters
+        if query['filters'][0] == 'true':
+            query['game_id'] = [str(input.game_title())]
+            query['event_type'] = [",".join(input.event_type())]
+            query['strength_state'] = [",".join(input.strength_state())]
+
+            return query
+        else:
+            return query
+    
+    submitted = reactive.Value(False)
+
+    @reactive.Effect
+    def startup():
+        if not submitted.get():
+            submitted.set(True)
+
+    game_df = reactive.Value(pd.DataFrame())
+    show_table = reactive.Value(False)
+    @reactive.effect
+    @reactive.event(input.submit, submitted)
+    def ret_game():
+        query = params()
+
+        #Iterate through query and parse params with multiple selections
+        #If it is already parsed skip this
+        for param in query.keys():
+            if len(query[param])>1:
+                ''
+            else:
+                q_string = query[param][0]
+                query[param] = q_string.split(',')
+
+        print(query)
+        #Determine which season to load based on the input game_id
+        front_year = int(query['game_id'][0][0:4])
+        season = f'{front_year}{front_year+1}'
+        #Load appropriate dataframe
+        df = pd.read_parquet(f'https://f005.backblazeb2.com/file/weakside-breakout/pbp/{season}.parquet')
+
+        #Prepare dataframe for plotting based on URL parameters
+        game_data = df.loc[df['game_id'].astype(str).isin(query['game_id'])].replace({np.nan: None})
+        game_data = wsba_plt.prep(game_data,events=query['event_type'],strengths=query['strength_state'])
+
+        game_df.set(game_data)
+
+        if query['table'][0]=='true':
+            show_table.set(True)
+    
+    @output()
+    @render_widget
+    @reactive.event(input.submit, submitted)
+    def plot_game():
+        #Retreive game
+        df = game_df.get().copy()
+
+        #Return empty rink if no data exists else continue
+        if df.empty:
+            return wsba_plt.wsba_rink()
+        else:
+            game_title = df['game_title'].to_list()[0]
+            colors = wsba_plt.colors(df)
+            rink = wsba_plt.wsba_rink()
+
+            plot = px.scatter(df,
+                              x='x', y='y',
+                              size='size',
+                              color='Team',
+                              color_discrete_map=colors,
+                              hover_name='Description',
+                              hover_data=['Event Num.', 'Period', 'Time (in seconds)',
+                                          'Strength',
+                                          'Away Score', 'Home Score', 'x', 'y',
+                                          'Event Distance from Attacking Net',
+                                          'Event Angle to Attacking Net',
+                                          'xG'])
+
+            for trace in plot.data:
+                rink.add_trace(trace)
+
+            return rink.update_layout(
+                title=dict(
+                    text=game_title,
+                    x=0.5, y=0.94,
+                    xanchor='center',
+                    yanchor='top',
+                    font=dict(color='white')
+                ),
+                           
+                legend=dict(
+                    orientation='h',
+                    x=0.49,
+                    y=-0.04,
+                    xanchor='center',
+                    yanchor='bottom',
+                    font=dict(color='white')
+                ),
+
+                hoverlabel=dict(
+                    font_size=10
+                )
+            )
+
+    @output
+    @render.ui
+    def metrics():
+        query = params()
+        if query['table'][0]=='true':
+            return ui.tags.div(
+                    {'class':'custom-input'},
+                    ui.input_selectize('metric_select','Metric',['Plays','Timelines'])
+                )
+        else:
+            return None
+        
+    @output
+    @render.ui
+    @reactive.event(input.metric_select)
+    def timeline_filter():
+        if input.metric_select()=='Timelines':
+            return ui.tags.div(
+                    {'class':'custom-input'},
+                    ui.input_selectize('timeline_select','Timeline',['xG','Fenwick','Shots','Goals'])
+                )
+        else:
+            return None
+
+    @output()
+    @render.data_frame
+    @reactive.event(input.submit,input.metric_select)
+    def plays():
+        if not show_table.get():
+            return None
+        else:
+            if input.metric_select()=='Timelines':
+                return None
+            else:
+                df = game_df.get().copy()[['event_num','period','seconds_elapsed','strength_state','event_type','Description','event_team_abbr','event_player_1_name','shot_type','zone_code','x','y','away_score','home_score','xG']].rename(columns={
+                    'event_num':'#',
+                    'period':'Period',
+                    'seconds_elapsed':'Seconds',
+                    'strength_state':'Strength State',
+                    'event_type':'Event',
+                    'event_team_abbr':'Team',
+                    'event_player_1_name':'Player',
+                    'shot_type':'Shot Type',
+                    'zone_code':'Zone Code',
+                    'away_score':'Away Score',
+                    'home_score':'Home Score'
+                })
+                
+                df['xG'] = df['xG'].round(4)
+                return render.DataTable(df)
+
+    @output()
+    @render_widget
+    @reactive.event(input.submit,input.metric_select,input.timeline_select)
+    def timelines():
+        if not show_table.get():
+            return None
+        else:
+            if input.metric_select()=='Plays':
+                return None
+            else:
+                data = wsba_plt.timelines(game_df.get().copy())
+                colors = wsba_plt.colors(data)
+                timelines = px.line(data,
+                                    x='Time (in seconds)',
+                                    y=input.timeline_select(),
+                                    color='Team',
+                                    color_discrete_map=colors,
+                                    hover_data=['Away Score','Home Score']
+                                    )
+
+                timelines.update_traces(
+                    line=dict(
+                        width=4
+                    ))
+
+                return timelines.update_layout(  
+                    paper_bgcolor="rgba(0,0,0,0)", 
+                    plot_bgcolor="rgba(0,0,0,0)",  
+                    font_color='white',         
+                    xaxis=dict(title=dict(text='Time (in seconds)'),showgrid=False),
+                    yaxis=dict(title=dict(text=input.timeline_select()),showgrid=False),
+
+                    legend=dict(
+                        title='Team',
+                        orientation='h',
+                        x=0.5,
+                        y=1,
+                        xanchor='center',
+                        yanchor='top',
+                        font=dict(color='white')
+                    ),
+
+                    hoverlabel=dict(
+                        font_size=10
+                    )
+            )
+
+app = App(app_ui, server)