<!DOCTYPE>
<html>
    <head>
        <title>Lineage</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

        <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
        <script src="https://unpkg.com/dagre@0.8.2/dist/dagre.js"></script>
        <script src="https://unpkg.com/cytoscape-dagre@2.3.2/cytoscape-dagre.js"></script>

        <style>
            body {
                font-family: helvetica;
                font-size: 15px;
                height: 1000px;
            }

            #cy {
                width: 100%;
                height: 90%;
                z-index: 999;
            }

            h1 {
                opacity: 0.5;
                font-size: 1em;
                font-weight: bold;
            }

            button {
                font-size: 15px;
                margin-right: 10px;
            }

            .line {
                clear:left;
                height:25px;
                margin-top:6px;
                margin-right:6px;
                margin-bottom:6px;
            }

            .radio {
                margin-left:25px;
            }

            div.graph {
                height: 1000px;
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function(){

                var cy = window.cy = cytoscape({
                    container: document.getElementById('cy'),
                    layout: {
                        name: 'dagre'
                    },
                    boxSelectionEnabled: false,
                    autounselectify: true,
                    style: [
                        {
                            selector: 'node',
                            style: {
                                'shape': 'round-rectangle',
                                'label': 'data(id)',
                                'width': 'label',
                                'padding': '10px 20px 10px 20px',
                                'text-valign': 'center',
                                'text-halign': 'center',
                                'background-color': '#fff',
                                'font-size': '22px'
                            },
                        },
                        {
                            selector: 'node[points]',
                            style: {
                                'shape-polygon-points': 'data(points)',
                                'label': 'polygon(custom points)',
                                'text-wrap': 'wrap'
                            },
                        },
                        {
                            selector: 'node[type = "inputDataset"]',
                            style: {
                                'background-color': '#FFFFE0'
                            },
                        },
                        {
                            selector: 'node[type = "outputDataset"]',
                            style: {
                                'background-color': '#ADD8E6'
                            },
                        },
                        {
                            selector: 'node[type = "function"]',
                            style: {
                                'background-color': '#C0C0C0'
                            },
                        },
                        {
                            selector: 'node[type = "layer"]',
                            style: {
                                'background-color': '#036bfc',
                                'padding': '30px',
                            },
                        },
                        {
                            selector: 'node[type = "feature"]',
                            style: {
                                'background-color': '#4CFF00',
                            },
                        },
                        {
                            selector: 'node[layer_name = "bronze"]',
                            style: {
                                'background-color': '#cd7f32',
                                'padding': '30px',
                            },
                        },
                        {
                            selector: 'node[layer_name = "silver"]',
                            style: {
                                'background-color': '#C0C0C0',
                                'padding': '30px',
                            },
                        },
                        {
                            selector: 'node[layer_name = "gold"]',
                            style: {
                                'background-color': '#FFD700',
                                'padding': '30px',
                            },
                        },
                        {
                            selector: 'edge',
                            style: {
                                'curve-style': 'bezier',
                                'target-arrow-shape': 'triangle',
                                'width': 2,
                                'line-color': '#000',
                                'target-arrow-color': '#000',
                            }
                        },
                        {
                            selector: ':parent',
                            css: {
                                'text-valign': 'top',
                                'text-halign': 'center',
                            }
                        }
                    ],

                    elements: {
                        nodes: [
                           NODES_PLACEHOLDER
                        ],
                        edges: [
                            EDGES_PLACEHOLDER
                        ]
                    }
                });

                ON_TAP_LISTENER

                cy.makeLayout({
                    name: 'dagre',
                    rankDir: 'TB',
                    nodeSep: 150
                }).run()
            });
        </script>
    </head>

    <body>
        <h1>Lineage</h1>

        <div id="cy"></div>

    </body>

</html>