cytoscapejs.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>CytoscapeJS Weave Tool</title>
    <link href="cytoscapejs.css" rel="stylesheet" type="text/css"/>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-2.2.4/cytoscape.js"></script>
    <!-- script src="cytoscape.js"></script -->
    <script src="arbor.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="cubehelix.js" charset="utf-8"></script>
    <script src="WeaveExternalHelper.js"></script>
</head>
<body>
    <div id="cy">
        
    </div>
    <div id="controls">
            <button title="Zoom to Fit" onclick="cy.fit()">Z</button>
            <select name="layout_dropdown"></select>
            <button title="Run layout" onclick="run_layout()">&#8634;</button>
            <button title="Open Attribute Selector" onclick="open_attribute_selector()"><bold>&#9082;</bold></button>
    </div>

<script>
    cytoscape_style = 
        cytoscape.stylesheet()
            .selector('node')
                .css({
                        'content': 'data(name)',
                        'text-valign': 'center',
                        'color': 'white',
                        'text-outline-width': 2,
                        'text-outline-color': '#888'
                        })
            .selector('edge')
                .css({
                        'target-arrow-shape': 'triangle',
                        'target-arrow-color': '#888',
                        'content': 'data(name)',
                        'color':'#888',
                        'curve-style': 'bezier'
                        })
            .selector(':selected')
                .css({
                        'background-color': 'black',
                        'line-color': 'black',
                        'target-arrow-color': 'black',
                        'source-arrow-color': 'black'
                        })
            .selector('.faded')
                .css({
                        'opacity': 0.25,
                        'text-opacity': 0
                        })
            .selector('.hidden')
                .css({
                        'opacity': 0,
                        'text-opacity': 0
                        })
            .selector('.probed')
                .css({
                        'background-color': 'red',
                        'line-color': 'red',
                        'line-width': 3
                });

    /* Session variable names */
    var NODE_LABEL = "Node Label";
    var NODE_COLOR = "Node Color";
    var NODE_SIZE = "Node Size";
    var NODE_PARENT = "Node Parent";
    var EDGE_SOURCE = "Edge Source";
    var EDGE_TARGET = "Edge Target";
    var EDGE_COLOR = "Edge Color";
    var EDGE_LABEL = "Edge Label";
    var LAYOUT_NAME = "Layout Name";
    var LAYOUT_PARAMS = "Layout Parameters";
    var POSITIONS = "Positions";
    var VIEWPORT = "Viewport";
    var DIRECTIONAL = "Directional";

    var column_to_prop_mappings = {};
    column_to_prop_mappings[NODE_LABEL] = "name";
    column_to_prop_mappings[EDGE_SOURCE] = "source";
    column_to_prop_mappings[EDGE_TARGET] = "target";
    column_to_prop_mappings[NODE_PARENT] = "parent";
    column_to_prop_mappings[EDGE_LABEL] = "name";

    var node_column_names = [NODE_LABEL, NODE_COLOR, NODE_PARENT];
    var edge_column_names = [EDGE_SOURCE, EDGE_TARGET, EDGE_LABEL];

    function data_updated()
    {
        var node_keytype = toolPath.push(NODE_LABEL).getValue("getMetadata('keyType')");

        var node_data = toolPath.retrieveColumns(node_column_names);
        var edge_data = toolPath.retrieveColumns(edge_column_names);

        function fixNodeReferences(column)
        {
            for (var row = 0; row < column.length; row++)
            {
                if (column[row] === undefined) continue;
                new_entry = { localName: column[row], keyType: node_keytype };
                column[row] = toolPath.qkeyToString(new_entry);
            }
        }

        fixNodeReferences(edge_data[1]); // EDGE_SOURCE

        fixNodeReferences(edge_data[2]); // EDGE_TARGET

        fixNodeReferences(node_data[3]); // NODE_PARENT

        var nodes = Array(node_data[0].length);
        for (var row = 0; row < node_data[0].length; row++)
        {
            new_node = {};
            new_node.id = node_data[0][row];
            for (var col = 0; col < node_column_names.length; col++)
            {
                property = column_to_prop_mappings[node_column_names[col]];
                var value = node_data[col+1][row];
                if (typeof value == String)
                    new_node[property] = value.trim();
                else
                    new_node[property] = value;
            }
            nodes[row] = {data: new_node};
        }

        var edges = Array(edge_data[0].length);
        for (var row = 0; row < edge_data[0].length; row++)
        {
            new_edge = {};
            new_edge.id = edge_data[0][row];
            for (var col = 0; col < edge_column_names.length; col++)
            {
                property = column_to_prop_mappings[edge_column_names[col]];
                new_edge[property] = edge_data[col+1][row];
            }
            edges[row] = {data: new_edge};
        }

        cy.load({nodes: nodes, edges: edges});
        run_layout();
    };

    
    var selection_changed_calls = 0;


    function probe_changed()
    {

        var local_probes = array_to_set(toolPath.probe_keyset.getKeys());

        cy.filter(function(i, ele) { return is_in(ele.id(), local_probes); }).toggleClass("probed", true);
        cy.filter(function(i, ele) { return !is_in(ele.id(), local_probes); }).toggleClass("probed", false);

    };

    function probe(evt)
    {
        var ele = evt.cyTarget;
        ele.toggleClass("probed", true);
        toolPath.probe_keyset.setKeys([ele.id()]);
    };

    function unprobe(evt)
    {
        toolPath.probe_keyset.setKeys([]);
    };
    var local_selection = {};
    var selection_timeout_id = null;

    function selection_changed()
    {
        local_selection = array_to_set(toolPath.selection_keyset.getKeys());

        cy.off({select: add_to_selection, unselect: remove_from_selection});

        cy.elements().unselect();

        cy.filter(function(i, ele) { return is_in(ele.id(), local_selection); }).select();

        cy.on({select: add_to_selection, unselect: remove_from_selection});
    };

    function send_selection()
    {
        toolPath.selection_keyset.setKeys(Object.keys(local_selection));

        selection_timeout_id = null;
    }
    function add_to_selection(evt)
    {
        ele = evt.cyTarget;
        local_selection[ele.id()] = true;
        if (selection_timeout_id == null)
            selection_timeout_id = window.setTimeout(send_selection, 50);
    }
    function remove_from_selection(evt)
    {
        ele = evt.cyTarget;
        delete local_selection[ele.id()];
        if (selection_timeout_id == null)
            selection_timeout_id = window.setTimeout(send_selection, 50);
    }

    function qkeyStringToString(qkey_string)
    {
        return toolPath.qkeyToString(JSON.parse(qkey_string));
    }
    function stringToQKeyString(str)
    {
        return JSON.stringify(toolPath.stringToQKey(str));
    }

    function positions_changed()
    {
        if (position_change_ignore)
        {
            return;
        }
        var positions = toolPath.push(POSITIONS).getState();

        if (positions == null || positions == "")
        {
            cy.layout(layout_params);
        }

        cy.nodes().positions(function (i, ele) { return positions[stringToQKeyString(ele.id())]; });
    }

    var position_timeout_id = null;

    function send_positions(evt)
    {
        var nodes = cy.nodes();
        var idx;
        var positions = {};
        for (idx = 0; idx < nodes.length; idx++)
        {
            var id = stringToQKeyString(nodes[idx].id());
            var pos = nodes[idx].position();
            if (pos.x === undefined && pos.y === undefined)
            {
                continue;
            }
            positions[id] = pos;
        }
        toolPath.push(POSITIONS).state(positions);

        position_timeout_id = null;
    }
    function update_positions(evt)
    {
        if (position_timeout_id == null)
            position_timeout_id = window.setTimeout(send_positions, 50);
    }

    function array_to_set(arr)
    {
        new_set = {};
        for (var i in arr)
        {
            new_set[arr[i]] = true;
        }
        return new_set;
    }
    function is_in(key, set)
    {
        if (typeof key != "string") throw "is_in takes a string, not an object.";

        if (Array.isArray(set))
            return is_in(key, array_to_set(set));
        else
            return set[key] ? true : false;
    }

    var valid_layouts = {null: 'Null', random: 'Random', preset: 'Preset', 
                         grid: 'Grid', circle: 'Circle', concentric: 'Concentric', 
                         breadthfirst: 'Breadth-First', arbor: 'Arbor (Force-Directed)', 
                         cose: "CompoundSpring"};

    function run_layout()
    {
        var layout_name = toolPath.push(LAYOUT_NAME).getState();
        var layout_params = toolPath.push(LAYOUT_PARAMS).getState();

        if (!layout_params)
        {
            toolPath.push(LAYOUT_PARAMS).state({});
            layout_params = {};
        }
        if (layout_name == null || !is_in(layout_name, valid_layouts))
        {
            toolPath.push(LAYOUT_NAME).state("circle");
            layout_name = "circle";
        }
        layout_params['name'] = layout_name;

        cy.layout(layout_params);
    };

    function open_attribute_selector()
    {
        toolPath.push(NODE_LABEL).libs("weave.ui.AttributeSelectorPanel").exec("AttributeSelectorPanel.open(this)");
        return;
    }

    var position_change_ignore = false;
    function disable_position_change()
    {
        position_change_ignore = true;
    }
    function enable_position_change()
    {
        position_change_ignore = false;
    }

    $('select[name="layout_dropdown"]').change(function ()
    {
        var new_value = $('select[name="layout_dropdown"] option:selected').attr("value");
        toolPath.push(LAYOUT_NAME).state(new_value);
    });

    function layout_changed()
    {
        var layout_value = toolPath.push(LAYOUT_NAME).getState();
        $('select[name="layout_dropdown"] option:selected').removeAttr("selected")
        $('select[name="layout_dropdown"] option[value="' + layout_value + '"]').attr("selected", "yes");
    }

    function update_viewport()
    {
        if (update_viewport_disabled)
        {
            return;
        }
        var viewport_value = cy.pan();
        viewport_value['zoom'] = cy.zoom();

        toolPath.push(VIEWPORT).state(viewport_value);
        console.log("Setting session state:", viewport_value)
    }
    var update_viewport_disabled = false;
    function viewport_changed()
    {
        console.log("BOO");
        var viewport_value = toolPath.push(VIEWPORT).getState();
        if (viewport_value == null || viewport_value == undefined || 
             (viewport_value.x == undefined) || 
             (viewport_value.y == undefined) || 
             (viewport_value.zoom == undefined))
        {
            update_viewport();
            console.log("Invalid viewport value, setting from current.")
            return;
        };
        var pan_to = {x: viewport_value.x, y: viewport_value.y};
        var zoom_level = viewport_value.zoom;
        
        console.log("Moving viewport:", pan_to);
        update_viewport_disabled = true;
        cy.pan(pan_to);
        console.log("Changing zoom to:", zoom_level);
        cy.zoom(zoom_level);
        update_viewport_disabled = false;
    }

    var toolPath;

    $(function() {
    $('#cy').cytoscape( { style: cytoscape_style, ready: function () { 
        window.cy = this
        toolPath = weaveExternalInit();

        toolPath.newProperty(LAYOUT_NAME, 'LinkableString', layout_changed)
                .request(LAYOUT_PARAMS, 'LinkableVariable')
                .newProperty(NODE_LABEL, 'DynamicColumn', data_updated)
                .newProperty(NODE_COLOR, 'DynamicColumn', data_updated) // TODO
                .newProperty(NODE_SIZE, 'DynamicColumn', data_updated) // TODO
                .newProperty(NODE_PARENT, 'DynamicColumn', data_updated)
                .newProperty(EDGE_SOURCE, 'DynamicColumn', data_updated)
                .newProperty(EDGE_TARGET, 'DynamicColumn', data_updated)
                .newProperty(EDGE_LABEL, 'DynamicColumn', data_updated)
                .newProperty(POSITIONS, 'LinkableVariable', positions_changed)
                .newProperty(VIEWPORT, 'LinkableVariable', viewport_changed);
        
        toolPath.selection_keyset.addCallback(selection_changed, true);
        toolPath.probe_keyset.addCallback(probe_changed, true);

        cy.on({select: add_to_selection, unselect: remove_from_selection});
        cy.on({position: update_positions}, 'node');
        cy.on({mouseover: probe, mouseout: unprobe}, 'node');
        cy.on({mouseover: probe, mouseout: unprobe}, 'edge');
        cy.on({drag: disable_position_change, free: enable_position_change});
        cy.on({zoom: update_viewport, pan: update_viewport});

        } })
        

        $.each(valid_layouts, function(key, value)
        {
            $('select[name="layout_dropdown"]')
                .append($('<option></option>')
                .text(value).attr("value",key));
        });
    });

</script>
</body>
</html>