ff compatible

Makefile

@@ -25,9 +25,8 @@ jade:
 	@echo "\n ---------------------------"
 	@echo " * Building flask templates"
 	@echo " ---------------------------\n"
-
 	cd ./templates && node ../node_modules/jade/bin/jade.js -P *.jade
-
+	cp webcomponents/botapad-app.html static/
 
 rundev: 
 	. venv3/bin/activate; export APP_DEBUG=false; export FLASK_APP=botapadapp.py ;export FLASK_DEBUG=1; flask run 

static/main.js

@@ -12,13 +12,16 @@ var path = "../static/bower_components/"
         //backbone   : path + 'backbone/backbone-min',
         //jquery     : path + 'jquery/dist/jquery.min',
         
-        cello     : 'cello.min',
-        gviz      : 'gviz.min',
-        embed     : 'embed.min',
+        //cello     : 'cello.min',
+        //gviz      : 'gviz.min',
+        //embed     : 'embed.min',
         
+        cello     : 'cello',
+        gviz      : 'gviz',
+        embed     : 'embed',     
         
-        threejs   : 'three.min',
-        numeric   : 'numeric-1.2.6.min',
+        threejs   : 'three',
+        numeric   : 'numeric-1.2.6',
         //tween     : 'tween',
         //materials : 'materials',
         //pdgconst  : 'pdgconst',

static/padagraph-gviz-min.html

@@ -2040,7 +2040,7 @@ require(['backbone', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbo
             this.create_once(app, graph, options);
         },
 
-        create_once: function create_once(app, graph, vizoptions) {
+        create_once: function create_once(app, graph, options) {
 
             if (app === undefined || graph === undefined) return;
             if (!app || graph == null || !graph.vs) return;
@@ -2087,8 +2087,8 @@ require(['backbone', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbo
                 ctrl.graph = graph;
             }
 
-            var options = _.extend({}, Gviz.DEFAULTS, vizoptions);
-            if (!options['el']) options['el'] = "#vz_threejs_main" + Math.round(Math.random() * 10000);
+            options = _.extend({}, Gviz.DEFAULTS, options);
+            if (!options.el) options.el = "#vz_threejs_main" + Math.round(Math.random() * 10000);
 
             options.materials = Materials;
 
@@ -2102,7 +2102,7 @@ require(['backbone', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbo
                 this.appendChild("<div class='gviz-debug'></div>");
             }
 
-            this.options.wnode_scale = function (vtx) {
+            options.wnode_scale = function (vtx) {
                 var v = vtx.get('_size') * 8;
                 return gviz.initial_size + gviz.user_vtx_size + v;
             };
@@ -3120,7 +3120,7 @@ require(['backbone', 'jquery', 'semantic'], function (Backbone, $, semantic) {
         }
     });
 });</script></dom-module><dom-module id="padagraph-gviz-control" assetpath="./"><style>a.link.icon { padding: 4px; }
-a i.icon { margin: 0px; }</style><template><div class="ui segment"><h2 class="header">Visualisation</h2><div class="ui small form"><fieldset><div class="field"><a id="vtx_size_inc" class="link icon"><i class="large zoom icon"></i></a><a id="vtx_size_dec" class="link icon"><i class="large zoom out icon"></i></a><a id="font_size_inc" class="link icon"><i class="large fitted font icon"></i><i class="small fitted add icon"></i></a><a id="font_size_dec" class="link icon"><i class="large fitted font icon"></i><i class="small fitted minus icon"></i></a></div></fieldset></div></div></template><script>"use strict";
+a i.icon { margin: 0px; }</style><template><a id="vtx_size_inc" class="ui item"><i class="large zoom icon"></i></a><a id="vtx_size_dec" class="ui item"><i class="large zoom out icon"></i></a><a id="font_size_inc" class="ui item"><i class="large fitted font icon"></i><i class="small fitted add icon"></i></a><a id="font_size_dec" class="ui item"><i class="large fitted font icon"></i><i class="small fitted minus icon"></i></a></template><script>"use strict";
 
 require(['jquery'], function ($) {
   Polymer({

templates/botapadapp.jade

@@ -159,6 +159,7 @@ html
                 li
                   | Can't download document at 
                   a(href='{{error.url}}') {{error.url}}
+                li {{error.message}}  
 
               {% elif error.class == "BotapadCsvError" %}
               ul.list

templates/graph.jade

@@ -3,6 +3,11 @@ html
     title "graph botapad title"
     link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css')
 
+    script( src="{{static_host}}/static/webcomponents-lite.js" )
+    script( data-main="{{static_host}}/static/main", src="{{static_host}}/static/require.js")
+    link( rel="import", href="{{static_host}}/static/polymer/polymer.html")
+    link( rel="import", href="{{static_host}}/static/padagraph-gviz-min.html")
+    link( rel="import", href="{{static_host}}/static/botapad-app.html")
         
     style.
 
@@ -116,28 +121,6 @@ html
             height:100%;
         }
 
-        #cardmenu {
-            position: absolute;
-            top: 4px;
-            right: 15px;
-            min-height: 25px;
-            background: white;
-            border-radius: 4px;
-        }
-        
-        #cardmenu .item {
-            line-height: 0.1;
-            padding: 12px;
-        }
-
-        #cardmenu a.active {
-            background: #FAFAFA;
-        }
-        
-        #cardmenu i.icon {
-            height:0px;
-            padding-right: 4px;
-        }
 
         padagraph-collection {
             position: absolute;
@@ -184,215 +167,20 @@ html
             margin: 12px;
             overflow-y: auto;
             z-index: 10;
-            height: calc(100% - 36px);
+            max-height: calc(100% - 56px);
+            font-family: monospace;
         }
        
         padagraph-model-popup .propvalue {  color: #333; }
  body
-    {% if footer%}  
-    h4.ui.inverted.horizontal.divider
-    Import complete
-    p
-    .ui.inverted.link.list
-    a.active.item( href="{{padurl}}") Imported from {{padurl}}
-    {% endif %}  
-
-    script( src="{{static_host}}/static/webcomponents-lite.js" )
-    script( data-main="{{static_host}}/static/main" src="{{static_host}}/static/require.js")
-    link( rel="import" href="{{static_host}}/static/polymer/polymer.html")
-    link( rel="import" href="{{static_host}}/static/padagraph-gviz-min.html")
-
-
-    dom-module(id='graph-app')
-      template
-       #boo
-         padagraph-gviz-json( sync="{{sync}}" routes="{{routes}}" data="{{data}}" )
-          padagraph-gviz( options="{{options}}")
-            div#viz()
-
-            // liste and card details 
-            .ui.compact.menu#cardmenu
-                a.link.item#listbutton( on-click="togglelist" )
-                    i.list.alternate.outline.icon
-                    | list
-                a.link.item.active#cardbutton( on-click="togglecard" )
-                    i.id.card.outline.icon
-                    | details
-
-            padagraph-model-popup( id="gvizpopup" hidden$="{{'\{{is_hidden(display_card)}\}'}}" )
-            
-            padagraph-collection(mode="node" hidden$="{{'\{{is_hidden(display_list)}\}'}}" )
-
-           
-            .ui.icon.borderless.vertical.menu#menu
-                  padagraph-collection-filter( mode="node" asitem="asitem" filters="all selected label types")
-                  padagraph-collection-filter( mode="edge" asitem="asitem" filters="all types")
-
-                  .ui.divider          
-                  padagraph-engine-control( engine="layout" asitem="asitem")
-                  //padagraph-engine-control( engine="clustering" asitem="asitem")
-                  //padagraph-engine-control( engine="explore" asitem="asitem")
-              
-                  .ui.divider
-                  a.ui.item#keb_settings
-                    i.settings.icon
-                            
-
-            .ui.grid#labels
-             .six.wide.column
-
-              padagraph-labels-control
-             .six.wide.column
-              padagraph-node-search(actions="add,explore")
-              {% if graphurl %}   
-              a.ui.tiny.active.refresh.button( href="{{graphurl}}") refresh
-              {% endif %}
-             .four.wide.column
-                #loading
-                  
-      script.
-        require(['backbone', 'jquery', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbone, $, Cello, Gviz, Materials, Const ) {
-         Polymer({
-          is: "graph-app",
-
-          properties : {
-            display_card : Boolean,
-            display_list : Boolean,
-          },
-
-          ready(){
-            this.display_card = true;
-            this.display_list = false;
-          },
-          
-          togglecard(){
-              
-            var element = document.getElementById("cardbutton");
-            element.classList.toggle("active");
-            
-            var card = document.getElementById("listbutton")
-            if ( element.classList.contains("active") && card.classList.contains("active") )
-                card.classList.remove("active")
-
-            this.toggle();
-          },
-          
-          togglelist(){
-            var e ="listbutton"
-            var element = document.getElementById(e);
-            element.classList.toggle("active");
-
-            var card = document.getElementById("cardbutton")
-            if ( element.classList.contains("active") && card.classList.contains("active") )
-                card.classList.remove("active") 
-
-            this.toggle();
-          },
-          
-          toggle(){
-            this.display_card = document.getElementById("cardbutton") ? document.getElementById("cardbutton").classList.contains("active") : true; 
-            this.display_list = document.getElementById("listbutton") ? document.getElementById("listbutton").classList.contains("active") : false;
-          },
-
-          is_hidden(e) { return !e },
-
-          
-          attached() {
-            var start = this.startapp.bind(this);  
-            this._observer =
-                Polymer.dom(this.$.boo).observeNodes(function(info) {
-                 info.addedNodes.filter(function(node) {
-                  if (node.tagName === "PADAGRAPH-GVIZ-JSON")
-                    document.querySelector('padagraph-gviz-json').addEventListener('engines-complete', start );
-                 });
-            });
-          },
-          startapp(e) {
-            document.querySelector('padagraph-model-popup').hidden = true;
-            this.toggle();
-            
-            var _window_resized = function(){
-                var e = document.getElementById('gviz');
-                //e.style.height = ( window.innerHeight - 32 )+ "px";
-                e.style.height = ( window.innerHeight )+ "px";
-                var app = document.querySelector('padagraph-gviz').app
-                if ( app.gviz ) app.gviz.resize_rendering();
-            }
-            
-            window.onresize = _window_resized;
-
-            var loading = function(e, name, engine, show){
-                console.log("loading",e,  name, engine, show)
-                var element = document.getElementById("loading");
-                if ( show && !element.classList.contains("show") )
-                    element.classList.toggle("show");
-                if ( !show && element.classList.contains("show") )
-                    element.classList.toggle("show");
-            };      
-            
-            console.log(e.detail.app); // true
-            var app = e.detail.app;
-            
-            var engines = [];
-            var app_engines = {
-                'explore':app.engines.explore,
-                //'expand':app.engines.expand_px,
-                'layout':app.engines.layout,
-                'clustering':app.engines.clustering,
-            };
-            
-            for (var k in app_engines){
-                var engine = app_engines[k]
-                engine.name = k;
-                engines.push(engine);
-            }
-
-            $('padagraph-collection')[0].app = app;
-            $('padagraph-collection')[0].graph = app.models.graph;
-            
-            var comps = $("padagraph-collection-filter");
-            comps.map((e)=>{
-              e.app = app;
-              e.graph = app.models.graph;                         
-            }) ;
-            
-            app.listenTo(app.engines.explore, 'play:success', function(response, args, state) {
-                $("padagraph-collection-filter").each( function(i,e) {
-                   if ( e.graph && e.reset_filters ) e.reset_filters();
-                });
-            });
-
-            app.listenTo(app.engines.additive_nodes, 'play:success', function(response, args, state) {
-                $("padagraph-collection-filter").each( function(i,e) { if (e.graph) e.reset_filters(); });
-            });
-
-            app.models.graph.on('sync', function(){
-              $("padagraph-collection-filter").each(function(i,e) { if (e.graph) e.reset_filters(); });
-            });
-             
-            var keb = document.createElement("padagraph-keb")
-            keb.engines = engines;
-            $("#keb")
-                .sidebar('setting', 'dimPage', false)
-                .sidebar('setting', 'transition', 'overlay')
-            $("#kebcontent").append(keb)
-            $("#keb .close i.close.icon").click( ()=>{ $("#keb").sidebar('hide') } )
-            $("#keb_settings").click( ()=>{ $("#keb").sidebar('show') } )
-
-            _window_resized();
-          }
-         })
-        });
-
-
-
+   
     #keb.ui.left.vertical.sidebar( style="background:#FAFAFA" )
       a(name="kebup")
       .close
         a.ui.link.icon
           i.close.icon
       #kebcontent
-        padagraph-gviz-control
+        
       
       .close
         a.ui.link.icon(href="#kebup")
@@ -402,5 +190,5 @@ html
       .ui.vertical.center.aligned.segment
         div#gviz(class="{{ 'nofoot' if not footer else '' }}")
 
-            graph-app
+            botapad-app( options="{{options}}" , routes="{{routes}}", data="{{data}}",  sync="{{sync}}",graphurl="{{graphurl}}" )