from ipythond3sankey.widgets import D3Sankey

"""
Explanation: D3Sankey Widget

<i class="fa fa-info-circle fa-2x text-primary"></i> Execute each of these cells in order, such as with <label class="label label-default">Shift+Enter</label>

First, load D3Sankey:
End of explanation
"""


d3sankeyExample = D3Sankey(
    nodes = [
        {'name': 'A'},
        {'name': 'B'},
        {'name': 'C'},
    ],
    links = [
        {'source': 0, 'target': 1, 'value': 2},
        {'source': 0, 'target': 2, 'value': 3},
    ],
    height = 300,
    width = 600
)

"""
Explanation: Then, create an instance of D3Sankey:
End of explanation
"""


d3sankeyExample

"""
Explanation: Display the widget:
End of explanation
"""


d3sankeyExample.nodes[0]['name'] = 'Node A'
d3sankeyExample.send_state()

"""
Explanation: <i class="fa fa-image fa-2x"></i> You should see a Sankey diagram with 3 nodes and 2 flows.

Now, you can update the nodes and links:
End of explanation
"""


d3sankeyExample.nodes.append({'name': 'D'})
d3sankeyExample.links.append({'source': 3, 'target': 1, 'value': 1})
d3sankeyExample.send_state()

"""
Explanation: <i class="fa fa-image fa-2x"></i> You should see the label of the left-hand node change.
End of explanation
"""


from IPython.html import widgets

def update(name, value):
    d3sankeyExample.links[0]['value'] = value
    d3sankeyExample.send_state()

w = widgets.FloatSlider()
w.on_trait_change(update, 'value')
widgets.VBox([w, d3sankeyExample])

"""
Explanation: <i class="fa fa-image fa-2x"></i> You should see a new node and link appear

Node that send_state() is required when changing the contents of nodes and links. Changing properties directly automatically updates the diagram (although currently the only other properties are the dimensions and margins, which are not updated onces the diagram has been created).
Here is an example of changing the Sankey diagram interactively:
End of explanation
"""


