import plotly.plotly as py
from plotly.graph_objs import *

from plotly.widgets import GraphWidget

help(GraphWidget)

url = py.plot([Scatter(x=[1, 2, 3], y=[4, 6, 9]), Scatter(x=[1, 2, 3], y=[10, 30, 20])], filename='widget template', auto_open=False)
print url

graph = GraphWidget(url)
g = graph
graph

help(graph.restyle)

graph.restyle({'name': ['control', 'experiment']})

graph.relayout({'xaxis.title': 'samples'})

graph.add_traces(Scatter(x=[1,2,3], y=[5, 4, 5], name='another sample'))

g.restyle({'x': [[1,2,3], 
               [1, 2, 4]],
         'y': [[10,20,35],
               [5, 8, 14]]
}, indices=[0, 1])

from IPython.display import display, clear_output
def message_handler(widget, msg):
    clear_output()
    print widget._graph_url
    display(msg)

g.on_click(message_handler)
g.on_hover(message_handler)
g.on_zoom(message_handler)

g.hover({'xval': 2, 'yval': 8})

from IPython.display import Image
Image(url='http://i.imgur.com/69wyqjV.gif')

from IPython.html import widgets # Widget definitions
import json
import time

def info_popup(info):
    popup = widgets.PopupWidget(
        description='Scroll up to see the embedded plotly graph update',
        children=[widgets.HTMLWidget(value=json.dumps(info,indent=4).replace('\n', '<br>').replace(' ', '&nbsp'))]
    )
    popup.set_css('display', 'none', selector='.btn')
    return popup

style_sequence = [
    # Clear graph
    {
        'data': {
            'x': [],
            'y': [],
            'marker.color': '',
            'marker.size': '',
            'marker.symbol': '',
            'line.color': '',
            'line.width': '',
            'name': ''
        },
        'layout': {
            'title': '',
            'showlegend': False,
            'legend.x': '',
            'legend.y': '',
            'legend.bgcolor': ''
        },
        'hover': {}
    },
    # Add data
    {
        'data': {
            'x': [[1,2,3], 
                  [1, 2, 4]], 
         'y': [[10,20,30],
               [5, 8, 14]]
        },
        'traces': [0, 1]
    },
    # Restyle markers
    {
        'data': {
            'marker.color': ['rgb(0, 67, 88)', 'rgb(31, 138, 112)'],
            'marker.size': 10,
            'marker.symbol': 'hexagon-open'
        },
        'traces': [0, 1]
    },
    # Restyle lines
    {
        'data': {
            'line.color': ['rgb(0, 67, 88)', 'rgb(31, 138, 112)'],
            'line.width': 3
        }
    },
    # Add title
    {
        'layout': {
            'title': 'Trials',
        }
    },
    # Add legend
    {
        'layout': {
            'showlegend': True,
        }
    },
    # Add legend names
    {
        'data': {
            'name': ['Control', 'Experiment']
        },
        'traces': [0, 1]
    },
    # Move legend
    {
        'layout': {
            'legend.x': 0.02,
            'legend.y': 1,
            'legend.bgcolor': 'rgba(255, 255, 255, 0.5)'
        }
    },
    {'hover': {'xval': 2, 'yval': 8}},
    {'hover': {'xval': 2, 'yval': 8, 'hovermode': 'closest'}},
    {'xval': 2, 'yval': 8, 'hovermode': 'x'},
    {'hover': [{'curveNumber': 0, 'pointNumber': 0}]},
    {'hover': [{'curveNumber': 0, 'pointNumber': 0},
     {'curveNumber': 0, 'pointNumber': 1}]},
    {'hover': [{'curveNumber': 0, 'pointNumber': 2},
     {'curveNumber': 1, 'pointNumber': 1}]},
    {'hover': [{'curveNumber': 0, 'xval': 1, 'yval': 10},
     {'curveNumber': 0, 'xval': 2, 'yval': 20},
     {'curveNumber': 0, 'xval': 3, 'yval': 30},
     {'curveNumber': 1, 'xval': 1, 'yval': 5},
     {'curveNumber': 1, 'xval': 2, 'yval': 8},
     {'curveNumber': 1, 'xval': 4, 'yval': 14}
    ]}
]

for s in style_sequence:
    popup = info_popup(s)
    # display(popup)
    if 'data' in s:
        if 'traces' in s:
            g.restyle(s['data'], indices=s['traces'])
        else:
            g.restyle(s['data'])
    if 'layout' in s:
        g.relayout(s['layout'])
    if 'hover' in s:
        g.hover(s['hover'])
    time.sleep(3)

    popup.close()
    clear_output()

# CSS styling within IPython notebook - feel free to re-use
from IPython.core.display import HTML
import urllib2

HTML(urllib2.urlopen('http://bit.ly/1Bf5Hft').read())