In [1]:

    

import requests
import ipywidgets as widgets
import time
from IPython.display import display, HTML
from traitlets import Int, Unicode, observe


    

In [2]:

    

class TabsWidget(widgets.DOMWidget):
    
    _view_name = Unicode('TabsView').tag(sync=True)
    _view_module = Unicode('tabsDemo').tag(sync=True)
    frameHeight = Int(300).tag(sync=True)

    def setHeight(self, height):
       print("setHeight(%d) "% height)
       self.frameHeight = height


    

In [3]:

    

display(HTML(data="""
<style>
    div#notebook-container    { width: 97%; }
    div#menubar-container     { width: 65%; }
    div#maintoolbar-container { width: 99%; }
</style>
"""))


    

In [4]:

    

%%javascript
"use strict"
require.config({
    paths: {'jquery'    :   'http://code.jquery.com/jquery-1.12.4.min',
            'jquery-ui' :   'http://code.jquery.com/ui/1.12.1/jquery-ui.min',
            'cytoscape' :   'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min'
           }
      });

require.undef('tabsDemo')

define('tabsDemo', ["jupyter-js-widgets", "jquery", "jquery-ui", "cytoscape"], 
       function(widgets, $, ui, cytoscape) {
    
    var TabsView = widgets.DOMWidgetView.extend({

        initialize: function() {
           this.options = {}
           console.log("constructing TabsView");
           this.frameHeight = "800px";
           },

        resizeHandler: function(){
           console.log("TabsView resizeHandler")            
           },
        
        createMasterTabsDiv: function(){
           var masterTabsDiv = $("<div id='masterTabsDiv' style='border:1px solid gray; height: 400px; width: 97%'></div>");
            
           var list = $("<ul/>");
           list.append("<li><a href='#tab-2'>cytoscape</a></li>");
           list.append("<li><a href='#tab-3'>three</a></li>");
           masterTabsDiv.append(list);
            
           var tab2 = $("<div id='tab-2'></div>");
           tab2.append("<div id='cyDiv' style='border:1px solid blue; height:500px;'></div>");
            
           var tab3 = $("<div id='tab-3'>contents 3</div>");
            
           masterTabsDiv.append(tab2);
           masterTabsDiv.append(tab3);
            
           return(masterTabsDiv);
           },
         
        getCyOptions: function(){
           var value = {container: $("#cyDiv"), 
                                      elements: {nodes: [{data: {id:'a'}}],
                                                 edges: [{data:{source:'a', target:'a'}}]},
                                      style: cytoscape.stylesheet()
                                        .selector('node').style({'background-color': '#d22',
                                                                 'label': 'data(id)',
                                                                 'text-valign': 'center',
                                                                 'text-halign': 'center',
                                                                 'border-width': 1})
                                         .selector('edge').style({'line-color': 'black',
                                                                  'target-arrow-shape': 'triangle',
                                                                  'target-arrow-color': 'black',
                                                                  'curve-style': 'bezier'})
                       };
            return(value);
            }, 
        
        render: function() { 
            console.log("entering render");
            this.masterTabsDiv = this.createMasterTabsDiv();
            this.$el.append(this.masterTabsDiv);
            this.listenTo(this.model, 'change:frameHeight', this.frameDimensionsChanged, this);
            var self = this;  // the current subclassed widget
            setTimeout(function(){
               $("#masterTabsDiv").tabs();
               window.cy = cytoscape(self.getCyOptions());
               }, 0);
            },

           
        frameDimensionsChanged: function(){
           console.log("frameDimensionsChanged");
           var oldHeight = $("#mainDiv").height()
           var oldWidth = $("#mainDiv").width()
           var newHeight = this.model.get("frameHeight");
           var msg = "<center>tabs demo, height: " + oldHeight + " -> " + newHeight + "</center>";
           $("#mainDiv").html(msg);
           $("#masterTabsDiv").height(newHeight);
        }, 
        

    });
    return {
        TabsView: TabsView
    };
});


    

In [5]:

    

app = TabsWidget()
display(app)


    

In [ ]:

    




    

In [ ]: