From 8d261aa1227a647a43ac7b09c255313a4acbfeb9 Mon Sep 17 00:00:00 2001
From: renato <rended83@gmail.com>
Date: Mon, 12 Sep 2016 11:00:12 +0200
Subject: [PATCH] creator

---
 controllet.html                                                                    |  37 +++++++++++++++++++++++++++++++++++++
 controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html |  10 +++++-----
 controllets/data-sevc-controllet/data-sevc-controllet_old.html                     | 210 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/data-sevc-controllet/datalets-modifier-controllet.html                 | 180 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/data-sevc-controllet/demo-data-sevc-controllet.html                    | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/data-sevc-controllet/static/css/reset.css                              |  78 ------------------------------------------------------------------------------
 controllets/data-sevc-controllet/static/images/UnderConstruction.png               | Bin 99862 -> 0 bytes
 controllets/data-sevc-controllet/static/images/or.png                              | Bin 733 -> 0 bytes
 controllets/datalet-selection-controllet/datalet-selection-controllet.html         | 953 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/datalet-selection-controllet/demo/index.html                           |  33 ---------------------------------
 controllets/dataset-selection-controllet/dataset-selection-controllet.html         | 389 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/dataset-selection-controllet/demo/index.html                           |  50 --------------------------------------------------
 controllets/dataset-selection-controllet/paper-input-search.html                   | 444 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/select-dataset-controllet/demo-select-dataset-controllet.html          | 495 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/select-dataset-controllet/select-dataset-controllet_old.html           | 818 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/select-dataset-controllet/select-dataset-controllet_purelist.html      | 728 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 demo.html                                                                          | 182 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------
 17 files changed, 787 insertions(+), 3982 deletions(-)
 create mode 100644 controllet.html
 delete mode 100755 controllets/data-sevc-controllet/data-sevc-controllet_old.html
 delete mode 100755 controllets/data-sevc-controllet/datalets-modifier-controllet.html
 create mode 100644 controllets/data-sevc-controllet/demo-data-sevc-controllet.html
 delete mode 100755 controllets/data-sevc-controllet/static/css/reset.css
 delete mode 100755 controllets/data-sevc-controllet/static/images/UnderConstruction.png
 delete mode 100755 controllets/data-sevc-controllet/static/images/or.png
 delete mode 100755 controllets/datalet-selection-controllet/datalet-selection-controllet.html
 delete mode 100755 controllets/datalet-selection-controllet/demo/index.html
 delete mode 100755 controllets/dataset-selection-controllet/dataset-selection-controllet.html
 delete mode 100755 controllets/dataset-selection-controllet/demo/index.html
 delete mode 100755 controllets/dataset-selection-controllet/paper-input-search.html
 create mode 100644 controllets/select-dataset-controllet/demo-select-dataset-controllet.html
 delete mode 100755 controllets/select-dataset-controllet/select-dataset-controllet_old.html
 delete mode 100755 controllets/select-dataset-controllet/select-dataset-controllet_purelist.html

diff --git a/controllet.html b/controllet.html
new file mode 100644
index 0000000..727dff7
--- /dev/null
+++ b/controllet.html
@@ -0,0 +1,37 @@
+<script type="text/javascript" src="controllets/shared_js/jquery-1.11.2.min.js"></script>
+<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="import" href="controllets/data-sevc-controllet/demo-data-sevc-controllet.html" />
+
+<style>
+    #controllet paper-material {
+        overflow: hidden;
+    }
+</style>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+        var datasets = {"result":{
+            "providers":{"1":{"title":"CKAN","api_url":"http://ckan.routetopa.eu","image_hash":"11","id":"1"}},
+            "datasets":[
+                {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"SPOD SUPER HEROES","url":"http:\/\/ckan.routetopa.eu\/\/api/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
+                {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Wonders of the World","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
+                {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Animal Sounds","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}
+            ]}};
+
+        var controllet = document.getElementById("controllet");
+        controllet.setAttribute("datasets", JSON.stringify(datasets));
+
+        window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
+    });
+
+    //http://ckan.routetopa.eu/api/action/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50
+
+</script>
+
+<demo-data-sevc-controllet id="controllet"
+                        deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
+                        datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"
+                        >
+</demo-data-sevc-controllet>
+
+<!--datasets='{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 1","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 2","url":"http:\/\/ckan2.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 3","url":"http:\/\/ckan3.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}]}}'-->
diff --git a/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
index 007b71a..86a2550 100755
--- a/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
+++ b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
@@ -186,10 +186,10 @@
                             <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
                         </div>
                     </div>
-                    <template is="dom-if" if="{{!checkRoomType(roomType)}}">
+                    <template is="dom-if" if="{{!_checkRoomType(roomType)}}">
                         <paper-fab mini icon="assessment" class="assessment" noink></paper-fab>
                     </template>
-                    <template is="dom-if" if="{{checkRoomType(roomType)}}">
+                    <template is="dom-if" if="{{_checkRoomType(roomType)}}">
                         <paper-fab mini icon="description" class="description" noink></paper-fab>
                     </template>
                 </div>
@@ -274,15 +274,15 @@
                 this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
             },
 
-            _handleDeleteClick: function(e){
+            _handleDeleteClick: function(){
                 this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId});
             },
 
-            _onExplore: function(e){
+            _onExplore: function(){
                 window.location = this.roomUrl;
             },
 
-            checkRoomType: function(type){
+            _checkRoomType: function(type){
                return (type == "knowledge") ? true : false;
             }
         })
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet_old.html b/controllets/data-sevc-controllet/data-sevc-controllet_old.html
deleted file mode 100755
index 27f6702..0000000
--- a/controllets/data-sevc-controllet/data-sevc-controllet_old.html
+++ /dev/null
@@ -1,210 +0,0 @@
-<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-
-<script src="../../locales/controllet_ln.js"></script>
-
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
-
-<link rel="import" href="../select-dataset-controllet/select-dataset-controllet.html">
-<link rel="import" href="../select-data-controllet/select-data-controllet.html" />
-<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
-
-<dom-module id="data-sevc-controllet">
-
-    <template>
-
-        <page-slider-controllet id="slider">
-
-            <neon-animatable>
-
-                <template is="dom-if" if={{!modify}}>
-                    <select-dataset-controllet id="select_dataset" data={{data}} datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></select-dataset-controllet>
-                </template>
-
-            </neon-animatable>
-
-            <neon-animatable>
-
-                <select-data-controllet id="select_data" data-url={{dataUrl}} preselected-fields={{selectedFields}} datalet-preset="{{dataletPreset}}"></select-data-controllet>
-
-            </neon-animatable>
-
-            <neon-animatable>
-
-                <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></select-visualization-controllet>
-
-            </neon-animatable>
-
-        </page-slider-controllet>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'data-sevc-controllet',
-
-            listeners : {
-                'page-slider-controllet_selected' : '_updateSlider',
-                'dataset-selection-controllet_data-url' : '_allowSecondStep',
-                'tree-view-controllet_selected-fields' : '_allowThirdStep'
-            },
-
-            properties : {
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String ,
-                    value : undefined
-                },
-
-                datasets : {
-                    type : Array,
-                    value : undefined
-                },
-
-                suggestedDatasets : {
-                    type : Array,
-                    value : undefined
-                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined
-                },
-
-                jsonData : {
-                    type  : Object,
-                    value : undefined
-                },
-
-                modify : {
-                    type  : Boolean,
-                    value : false
-                },
-
-                selectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                selectedFields : {
-                    type  : Array,
-                    value : []
-                },
-
-                dataletPreset : {
-                    type  : Object,
-                    value : []
-                },
-
-                localization : {
-                    type : String,
-                    value : "en"
-                }
-
-            },
-
-            ready : function(){
-                if(this.selectedDatalet){
-                    this.modify = true;
-                    this.$.slider.selected = 1;
-                    this.dataUrl = this.dataletPreset["data-url"];
-                }
-                ln["localization"] = this.localization;
-            },
-
-            _updateSlider : function(e){
-                switch (e.detail.selected) {
-                    case 0:
-                        slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
-                        slider.chevronLeft("invisible");
-                        slider.chevronRight(false);
-                        if(slider.getPrevSelected() == 1)
-                            slider.chevronRight(true);
-                        break;
-                    case 1:
-                        slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
-                        if(this.modify){
-                            slider.chevronLeft("invisible");
-                        }
-                        else{
-                            slider.chevronLeft(true);
-                        }
-                        slider.chevronRight(false);
-                        this._allowThirdStep({detail: {fields: select_data.getSelectedFields()}});
-                        if(this.modify){
-                            this.$.select_visualization.setFields(select_data.getSelectedFields());
-                            this.$.select_visualization.setFilters(select_data.getFilters());
-                        }
-                        break;
-                    case 2:
-                        slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
-                        slider.chevronLeft(true);
-                        slider.chevronRight("invisible");
-
-                        this.$.select_visualization.setFields(select_data.getSelectedFields());
-                        this.$.select_visualization.setFilters(select_data.getFilters());
-                        if(this.modify) {
-                            this.$.select_visualization.show();//resize
-                        }
-                }
-            },
-
-            _allowSecondStep : function(e){
-                if(e.detail.url == "") {
-                    slider.chevronRight(false);
-                    select_dataset.$.selected_url.invalid = false;
-                    return;
-                }
-
-                this.dataUrl = e.detail.url;
-
-                var that = this;
-
-                $.ajax({
-                    url: e.detail.url,
-                    dataType: "json",
-                    success: function(data){
-//                        this.dataUrl = e.detail.url
-//                        this.jsonData = JSON.stringify(data);
-                        slider.chevronRight(true);
-                        select_dataset.$.selected_url.invalid = false;
-
-                        that.$.select_data._init();
-                    },
-                    error: function(){
-//                        this.jsonData = undefined;
-                        slider.chevronRight(false);
-                        select_dataset.$.selected_url.invalid = true;
-
-                        that.$.select_data._reset();
-                    }
-                });
-
-                //NOT HERE ma quando VADO al secondo passo e l'url è cambiato
-//                this.$.select_data._init();
-                this.$.select_visualization.reset();
-            },
-
-            _allowThirdStep : function(e){
-                if(e.detail.fields.length > 0)
-                    slider.chevronRight(true);
-                else
-                    slider.chevronRight(false);
-
-                //this.$.select_visualization.reset();
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/data-sevc-controllet/datalets-modifier-controllet.html b/controllets/data-sevc-controllet/datalets-modifier-controllet.html
deleted file mode 100755
index 86caf36..0000000
--- a/controllets/data-sevc-controllet/datalets-modifier-controllet.html
+++ /dev/null
@@ -1,180 +0,0 @@
-<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-
-<script src="../../locales/controllet_ln.js"></script>
-
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
-
-<link rel="import" href="../select-data-controllet/select-data-controllet.html" />
-<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
-
-<dom-module id="datalets-modifier-controllet">
-
-    <template>
-
-        <page-slider-controllet id="slider">
-
-            <neon-animatable>
-
-                <select-data-controllet id="select_data"></select-data-controllet>
-
-            </neon-animatable>
-
-            <neon-animatable>
-
-                <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}}></select-visualization-controllet>
-
-            </neon-animatable>
-
-        </page-slider-controllet>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'datalets-modifier-controllet',
-
-            listeners : {
-                'page-slider-controllet_selected' : '_updateSlider',
-                'dataset-selection-controllet_data-url' : '_allowSecondStep',
-                'tree-view-controllet_selected-fields' : '_allowThirdStep'
-            },
-
-            properties : {
-//                dataUrl : {
-//                    type  : String,
-//                    value : undefined
-//                },
-
-                preselectedDatalet : { //datalet
-                    type  : String,
-                    value : undefined
-                },
-
-                preselectedFields : { //fields
-                    type  : Array,
-                    value : undefined
-                },
-
-                dataletPreset : { //params
-                    type  : String,
-                    value : undefined
-                },
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String ,
-                    value : undefined
-                },
-
-                localization : {
-                    type : String,
-                    value : "en"
-                }
-
-            },
-
-            ready : function(){
-                if(this.selectedDatalet){
-                    this.modify = true;
-                    this.$.slider.selected = 1;
-                    this.dataUrl = this.dataletPreset["data-url"];
-                }
-                ln["localization"] = this.localization;
-            },
-
-            _updateSlider : function(e){
-                switch (e.detail.selected) {
-                    case 0:
-                        slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
-                        slider.chevronLeft("invisible");
-                        slider.chevronRight(false);
-                        if(slider.getPrevSelected() == 1)
-                            slider.chevronRight(true);
-                        break;
-                    case 1:
-                        slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
-                        if(this.modify){
-                            slider.chevronLeft("invisible");
-                        }
-                        else{
-                            slider.chevronLeft(true);
-                        }
-                        slider.chevronRight(false);
-                        this._allowThirdStep({detail: {fields: select_data.getSelectedFields()}});
-                        if(this.modify){
-                            this.$.select_visualization.setFields(select_data.getSelectedFields());
-                            this.$.select_visualization.setFilters(select_data.getFilters());
-                        }
-                        break;
-                    case 2:
-                        slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
-                        slider.chevronLeft(true);
-                        slider.chevronRight("invisible");
-
-                        this.$.select_visualization.setFields(select_data.getSelectedFields());
-                        this.$.select_visualization.setFilters(select_data.getFilters());
-                        if(this.modify) {
-                            this.$.select_visualization.show();//resize
-                        }
-                }
-            },
-
-            _allowSecondStep : function(e){
-                if(e.detail.url == "") {
-                    slider.chevronRight(false);
-                    select_dataset.$.selected_url.invalid = false;
-                    return;
-                }
-
-                this.dataUrl = e.detail.url;
-
-                var that = this;
-
-                $.ajax({
-                    url: e.detail.url,
-                    dataType: "json",
-                    success: function(data){
-//                        this.dataUrl = e.detail.url
-//                        this.jsonData = JSON.stringify(data);
-                        slider.chevronRight(true);
-                        select_dataset.$.selected_url.invalid = false;
-
-                        that.$.select_data._init();
-                    },
-                    error: function(){
-//                        this.jsonData = undefined;
-                        slider.chevronRight(false);
-                        select_dataset.$.selected_url.invalid = true;
-
-                        that.$.select_data._reset();
-                    }
-                });
-
-                //NOT HERE ma quando VADO al secondo passo e l'url è cambiato
-//                this.$.select_data._init();
-                this.$.select_visualization.reset();
-            },
-
-            _allowThirdStep : function(e){
-                if(e.detail.fields.length > 0)
-                    slider.chevronRight(true);
-                else
-                    slider.chevronRight(false);
-
-                //this.$.select_visualization.reset();
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/data-sevc-controllet/demo-data-sevc-controllet.html b/controllets/data-sevc-controllet/demo-data-sevc-controllet.html
new file mode 100644
index 0000000..19dae8e
--- /dev/null
+++ b/controllets/data-sevc-controllet/demo-data-sevc-controllet.html
@@ -0,0 +1,162 @@
+<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+
+<script src="../../locales/controllet_ln.js"></script>
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
+
+<link rel="import" href="../select-dataset-controllet/demo-select-dataset-controllet.html">
+<link rel="import" href="../select-data-controllet/select-data-controllet.html" />
+<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
+
+<dom-module id="demo-data-sevc-controllet">
+
+    <template>
+
+        <page-slider-controllet id="slider">
+
+            <neon-animatable>
+
+                <demo-select-dataset-controllet id="select_dataset" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></demo-select-dataset-controllet>
+
+            </neon-animatable>
+
+            <neon-animatable>
+
+                <select-data-controllet id="select_data"></select-data-controllet>
+
+            </neon-animatable>
+
+            <neon-animatable>
+
+                <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}}></select-visualization-controllet>
+
+            </neon-animatable>
+
+        </page-slider-controllet>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'demo-data-sevc-controllet',
+
+            listeners : {
+                'page-slider-controllet_selected' : '_updateSlider',
+                'select-dataset-controllet_data-url' : '_allowSecondStep',
+                'select-fields-controllet_selected-fields' : '_allowThirdStep',
+                'filters-controllet_filters': '_allowThirdStep',
+                'aggregators-controllet_aggregators': '_allowThirdStep',
+                'data-ready': '_dataReady'
+            },
+
+            properties : {
+
+                datasets : {
+                    type : Object,
+                    value : undefined
+                },
+
+                suggestedDatasets : {
+                    type : Array,
+                    value : undefined
+                },
+
+                deepUrl : {
+                    type : String,
+                    value : undefined
+                },
+
+                dataletsListUrl : {
+                    type : String ,
+                    value : undefined
+                },
+
+                localization : {
+                    type : String,
+                    value : "en"
+                }
+
+            },
+
+            ready : function(){
+                ln["localization"] = this.localization;
+            },
+
+            _updateSlider : function(e){
+                switch (e.detail.selected) {
+                    case 0:
+                        this.$.slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
+
+                        this.$.slider.chevronLeft("invisible");
+                        this.$.slider.chevronRight(false);
+
+                        if(this.$.slider.getPrevSelected() == 1)
+                            this.$.slider.chevronRight(true);
+                        break;
+                    case 1:
+                        this.$.slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
+
+                        this.$.slider.chevronLeft(true);
+                        this.$.slider.chevronRight(false);
+
+                        if(this.$.slider.getPrevSelected() == 2)
+                            this.$.slider.chevronRight(true);
+                        break;
+                    case 2:
+                        this.$.slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
+
+                        this.$.slider.chevronLeft(true);
+                        this.$.slider.chevronRight("invisible");
+                }
+            },
+
+            _allowSecondStep : function(e){
+                this.$.slider.chevronRight(false);
+
+                var f = Object.create(providerFactory);
+                var provider = f.getProvider(e.detail.url);
+                var dataUrl = provider.addLimit(e.detail.url);
+
+                this.$.select_data.dataUrl = dataUrl;
+                this.$.select_data.init();
+                this.$.select_visualization.dataUrl = dataUrl;
+                this.$.select_visualization.init();
+            },
+
+            _dataReady : function(e){
+                if(e.detail.ready) {
+                    this.$.slider.chevronRight(true);
+                    this.$.select_dataset.$.selected_url.invalid = false;
+                }
+                else
+                    this.$.select_dataset.$.selected_url.invalid = true;
+
+                this.$.select_dataset.showDatasetInfo();
+            },
+
+            _allowThirdStep : function(){
+                this.$.slider.chevronRight(false);
+                var selectedFields = this.$.select_data.getSelectedFields();
+                var filters = this.$.select_data.getFilters();
+                var aggregators = this.$.select_data.getAggregators();
+                var data = this.$.select_data.getData();
+                if(selectedFields.length > 0) {
+                    this.$.select_visualization.init();
+                    this.$.select_visualization.setSelectedFields(selectedFields);
+                    this.$.select_visualization.setFilters(filters);
+                    this.$.select_visualization.setAggregators(aggregators);
+                    this.$.select_visualization.setData(data);
+                    this.$.slider.chevronRight(true);
+                }
+            }
+
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/data-sevc-controllet/static/css/reset.css b/controllets/data-sevc-controllet/static/css/reset.css
deleted file mode 100755
index 1914369..0000000
--- a/controllets/data-sevc-controllet/static/css/reset.css
+++ /dev/null
@@ -1,78 +0,0 @@
-::content html {
-    color: #000;
-    background: #FFF;
-}
-
-::content body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
-h4, h5, h6, pre, code, form, fieldset, legend,
-input, button, textarea, p, blockquote, th, td {
-    margin: 0;
-    padding: 0;
-}
-
-::content table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-::content fieldset, img {
-    border: 0;
-}
-
-::content address, caption, cite, code, dfn, em, strong,
-th, var, optgroup {
-    font-style: inherit;
-    font-weight: inherit;
-}
-
-::content del, ins {
-    text-decoration: none;
-}
-
-::content li {
-    list-style: none;
-}
-
-::content caption, th {
-    text-align: left;
-}
-
-::content h1, h2, h3, h4, h5, h6 {
-    font-size: 100%;
-    font-weight: normal;
-}
-
-::content q:before, q:after {
-    content: '';
-}
-
-::content abbr, acronym {
-    border: 0;
-    font-variant: normal;
-}
-
-::content sup {
-    vertical-align: baseline;
-}
-
-::content sub {
-    vertical-align: baseline;
-}
-
-/*because legend doesn't inherit in IE */
-::content legend {
-    color: #000;
-}
-
-::content input, button, textarea, select, optgroup, option {
-    font-family: inherit;
-    font-size: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-}
-
-/*@purpose To enable resizing for IE */
-/*@branch For IE6-Win, IE7-Win */
-::content input, button, textarea, select {
-    *font-size: 100%;
-}
\ No newline at end of file
diff --git a/controllets/data-sevc-controllet/static/images/UnderConstruction.png b/controllets/data-sevc-controllet/static/images/UnderConstruction.png
deleted file mode 100755
index fd03947..0000000
Binary files a/controllets/data-sevc-controllet/static/images/UnderConstruction.png and /dev/null differ
diff --git a/controllets/data-sevc-controllet/static/images/or.png b/controllets/data-sevc-controllet/static/images/or.png
deleted file mode 100755
index 5b62d26..0000000
Binary files a/controllets/data-sevc-controllet/static/images/or.png and /dev/null differ
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
deleted file mode 100755
index ae89580..0000000
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ /dev/null
@@ -1,953 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html" />
-
-<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-
-<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
-
-<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
-
-<dom-module id="datalet-selection-controllet">
-
-    <template>
-
-        <style is="custom-style">
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #2196F3;
-             };
-            }
-
-            #datalet_selection_container {
-                display: flex;
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                margin-top: 8px;
-            }
-
-            #items_vslider_controllet {
-                position: relative;
-                min-width: 172px;
-            }
-
-            #datalet_selection_inputs {
-                position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
-            }
-
-            #datalet_selection_labels {
-                position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
-            }
-
-            #datalet_selection_column {
-                position: relative;
-                width: 100%;
-                margin-left: 32px;
-            }
-
-            #datalet_selection_datalet {
-                position: relative;
-                height: 100vh;
-                width: 100%;
-            }
-
-            #datalet_selection_datalet_placeholder {
-                padding: 16px;
-            }
-
-            .inputs{
-                position: relative;
-            }
-
-            .input_header {
-                height: 32px;
-                padding-top: 16px;
-                text-align: center;
-                font-weight: 700;
-                background-color: #B6B6B6;
-            }
-
-            #expert_container {
-                display: none;
-            }
-
-            #expert_header {
-                display: none;
-
-                height: 32px;
-                padding-top: 16px;
-                margin-top: 8px;
-                text-align: center;
-                font-weight: 700;
-                color: #00BCD4;
-                cursor: pointer;
-            }
-
-            .field_nema {
-                height: 40px;
-                padding-top: 8px;
-
-                margin-top: 8px;
-                padding-left: 16px;
-                font-weight: 700;
-                color: #2196F3;
-                background-color: #E0E0E0;
-            }
-
-            .info_button {
-                position: absolute;
-                top: 18px;
-                right: 0px;
-            }
-
-            paper-input {
-                display: inline-block;
-                height: 48px;
-                /*padding: 0px 8px;*/
-                width: 210px;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input.base_input {
-                width: 242px;
-            }
-
-            paper-textarea {
-                width: 242px;
-                padding-left: 8px;
-                padding-bottom: 4px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-dropdown-menu {
-                height: 48px;
-                width: 210px;;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-icon-button {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-                margin: 0px;
-            }
-
-            paper-button {
-                position: absolute;
-                bottom: 16px;
-                right: 11px;
-
-                height: 48px;
-                width: 172px;
-                background-color: #00BCD4;
-                color: white;
-                font-weight: 700;
-                padding: 16px;
-            }
-
-            paper-button:hover {
-                background-color: #00AABF;
-
-                box-shadow: 0px 8px 12px #888;
-                -webkit-box-shadow: 0px 8px 12px #888;
-                -moz-box-shadow: 0px 8px 12px #888;
-            }
-
-            paper-button[disabled] {
-                background-color: #B6B6B6;
-            }
-
-            #dialog_info_input {
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-                min-width: 248px;
-            }
-        </style>
-
-        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
-
-        <div id="datalet_selection_container">
-
-            <div id="items_vslider_controllet">
-                <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
-            </div>
-
-            <paper-material id="datalet_selection_inputs" elevation="5">
-                <div class="input_header"><span id="inputs"></span></div>
-                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
-                    <div class="inputs">
-                        <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
-                                    <!--{{_fieldName(item)}}-->
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-                <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
-
-                <div id="expert_container">
-
-                    <div class="inputs">
-                        <paper-dropdown-menu id="group_by">
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
-                        </div>
-                    </div>
-
-                    <template is="dom-repeat" items="{{groupedFields}}">
-                        <div class="inputs">
-                            <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
-                                <paper-menu class="dropdown-content">
-                                    <!--foreach functions-->
-                                    <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>
-                                </paper-menu>
-                            </paper-dropdown-menu>
-                            <div class="info_button">
-                                <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
-                            </div>
-                        </div>
-                    </template>
-
-                </div>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-            </paper-material>
-
-            <paper-material id="datalet_selection_labels" elevation="5">
-                <div class="input_header"><span id="baseInfo"></span></div>
-
-                <div class="inputs">
-                    <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>
-                </div>
-
-                <div class="inputs">
-                    <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>
-                </div>
-
-                <div class="input_header"><span id="layouts"></span></div>
-
-                <template is="dom-repeat" items="{{labels}}" index-as="index">
-                    <div class="inputs">
-                        <paper-input label={{_getLabelName(item.name)}}></paper-input>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
-                </template>
-            </paper-material>
-
-
-            <div id="datalet_selection_column">
-
-                <paper-material id="datalet_selection_datalet" elevation="5">
-                    <div class="input_header"><span id="dataletPreview"></span></div>
-                    <div id="datalet_selection_datalet_placeholder"></div>
-
-                </paper-material>
-
-                <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
-
-            </div>
-
-            <paper-dialog id="dialog_info_input">
-                <h2 id="dialog_name"></h2>
-                <p id="dialog_description"></p>
-            </paper-dialog>
-
-        </div>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'datalet-selection-controllet',
-
-            properties : {
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                selectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                preselectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                loadPreview : {
-                    type :  Boolean,
-                    value : false
-                },
-
-                type : {
-                    type : String,
-                    value : undefined
-                },
-
-                inputs : {
-                    type : Array,
-                    value : []
-                },
-
-                labels : {
-                    type : Array,
-                    value : []
-                },
-
-                filters : {
-                    type : Array,
-                    value : []
-                },
-
-                aggregators : {
-                    type : Array,
-                    value : []
-                },
-
-                orders : {
-                    type : Array,
-                    value : []
-                },
-
-                fields : {
-                    type : Array,
-                    value : []
-                },
-
-                selectedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                groupedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                dataletPreset : {
-                    type  : Object,
-                    value : []
-                },
-
-//                selectableFields : {
-//                    type : Array,
-//                    value : []
-//                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined
-                },
-
-                params:{
-                    type: Object,
-                    value: undefined
-                },
-
-                expert : {
-                    type  : Boolean,
-                    value : false
-                },
-
-                functions : {
-                    type  : Array,
-                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
-                },
-
-                modify : {
-                    type  : Boolean,
-                    value : false
-                }
-
-            },
-
-            listeners: {
-                'items-vslider-controllet_selected-datalet': '_selectDatalet',
-//                'tree-view-controllet_selected-fields': '_updateSelectedFields'
-                'change': '_paramsChanged'
-            },
-
-            _showExpertMode : function() {
-                if(!this.expert) {
-                    this.$.expert_header.style.color = "#000000";
-                    this.$.expert_header.style.background = "#B6B6B6";
-                    this.$.expert_container.style.display = "block";
-                }
-                else {
-                    this.$.expert_header.style.color = "#00BCD4";
-                    this.$.expert_header.style.background = "#FFFFFF";
-                    this.$.expert_container.style.display = "none";
-                }
-
-                this.expert = !this.expert;
-            },
-
-            _showGroupedFields : function(e) {
-                var index = e.target.id;
-                var temp = [];
-
-//                var isSelected = false;
-//                for (var i = 0; i < this.selectedFields.length; i++) {
-//                    if (this.selectedFields[i]) {
-//                        if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {
-//                            isSelected = true;
-//                        }
-//                        else {
-//                            temp.push(this.selectedFields[i]);
-//                        }
-//                    }
-//                }
-//
-//                if (isSelected)
-//                    this.groupedFields = this._copy(temp);
-//                else
-//                    this.groupedFields =[];
-
-                for (var i = 0; i < this.selectedFields.length; i++) {
-                    if (this.selectedFields[i]) {
-                        if (i != index) {
-                            temp.push(this.selectedFields[i]);
-                        }
-                    }
-                }
-
-                this.groupedFields = this._copy(temp);
-
-                this.async(function() {
-                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < ddls.length; i++){
-                        var id = ddls[i].id;
-                        if(id.indexOf("calculate") > -1) {
-                            $(ddls[i]).find("paper-menu")[0].select(-1);
-                            $(ddls[i]).find("paper-menu")[0].select(0);
-                        }
-                    }
-                }, 0);
-
-                this._addGroupByInput();
-            },
-
-            ready : function() {
-                this._resize();
-                $(this.$.datalet_selection_inputs).perfectScrollbar();
-                $(this.$.datalet_selection_labels).perfectScrollbar();
-                $(this.$.datalet_selection_datalet).perfectScrollbar();
-
-                this.params = {'data-url' : this.dataUrl};
-
-                //this.modify = true;//da eliminare in futuro
-                if(this.preselectedDatalet){
-                    if(this.modify)
-                        this._preselectDatalet();
-
-                    this.modify = true;
-                    this.preselectedDatalet = undefined;
-                }
-            },
-
-            attached : function() {
-                this._resize();
-                var that = this;
-                window.addEventListener("resize", function() { that._resize(); });
-
-                this._translate();
-            },
-
-            setFilters : function(filters) {
-                this.filters = filters;
-            },
-
-            setFields : function(fields) {
-                this.fields = fields;
-            },
-
-            reset : function() {
-                this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                this.preselectedDatalet = undefined;
-                this.type = undefined;
-                this.inputs = [];
-                this.labels = [];
-                this.$.expert_header.style.display = "none";
-                this.expert = true;
-                this._showExpertMode();
-                this.loadPreview = false;
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-                this._resetGroupBy();
-            },
-
-            _translate : function(){
-
-                this.$.add_button.innerHTML     = ln["addDatalet_" + ln["localization"]];
-                this.$.inputs.innerHTML         = ln["inputs_" + ln["localization"]];
-                this.$.baseInfo.innerHTML       = ln["baseInfo_" + ln["localization"]];
-                this.$.layouts.innerHTML        = ln["layouts_" + ln["localization"]];
-                this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
-
-                this.$.base_title.label = ln["title_" + ln["localization"]];
-                this.$.base_description.label = ln["description_" + ln["localization"]];
-
-                this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
-                this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
-
-                if(this.modify)
-                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
-            },
-
-            _selectDatalet : function(e){
-                this.$.add_button.setAttribute("disabled", "true");
-
-                this.selectedDatalet = e.detail.datalet;
-
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-
-                if(!this.selectedDatalet){
-                    this.type = undefined;
-                    this.inputs = [];
-                    this.labels = [];
-                    this.$.expert_header.style.display = "none";
-                    this.expert = true;
-                    this._showExpertMode();
-                    this.loadPreview = false;
-                }
-                else{
-                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
-                    this.$.selectedDatalet_request.generateRequest();
-                    this.$.expert_header.style.display = "block";
-                }
-            },
-
-            _preselectDatalet : function() {
-                this.type = "undefined";
-                this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";
-                this.$.selectedDatalet_request.generateRequest();
-
-                this.selectedDatalet = this.preselectedDatalet;
-                this.selectedFields = this._copy(this.fields);
-
-//                this.filters = JSON.parse(this.dataletPreset["filters"]);
-//                this.aggregators = JSON.parse(this.dataletPreset["aggregators"]);
-//                this.orders = JSON.parse(this.dataletPreset["orders"]);
-
-                this.async(function() {
-                    this.selectedFields = this._copy(this.fields);
-
-                    //set info labels options
-                    var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                    textarea[0].value = this.dataletPreset["description"];
-
-                    var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                    inputs[0].value = this.dataletPreset["title"];
-
-                    for (var i = 1; i < inputs.length; i++)
-                        inputs[i].value = this.dataletPreset[this.labels[i-1].name];
-
-                    //set inputs --> prima apri GB e riempi CALCULATE e poi gli ORDERBY???
-                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < ddls.length; i++) {
-                        var id = ddls[i].id;
-                        if (!isNaN(id)) {
-//                            id = parseInt(id);
-                            $(ddls[i]).find("paper-menu")[0].select(id);
-                        }
-                        else if (id.indexOf("group_by") > -1) {
-                            ;
-                        }
-                        else if (id.indexOf("calculate") > -1) {
-                            ;
-                        }
-                    }
-
-                    this.loadPreview = true;
-                    this._loadDatalet(this.selectedFields);
-                }, 300);
-            },
-
-            _handleSelectedDatalet : function(e){
-
-                if(this.type != e.detail.response.type) {
-
-                    this.inputs = [];
-                    this.labels = [];
-
-                    var inputs = e.detail.response.idm.inputs.input;
-
-                    if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
-                        var name = inputs.name;
-                        var description = inputs.description;
-                        var selection = inputs.selection;
-                        inputs = [];
-                        for (var i in this.fields)
-                            inputs.push({name: name + " " + i, description: description, selection: selection});
-                    }
-
-                    this.async(function(){
-                        this.type = e.detail.response.type;
-                        this.inputs = inputs;
-                        this.labels = e.detail.response.idm.inputs.layouts.input;
-
-                        this.selectedFields = new Array(inputs.length);
-                    },0);
-
-                    this._resetGroupBy();
-
-                    this.loadPreview = false;
-                }
-
-                else if (this.loadPreview)
-                    this._loadDatalet(this.selectedFields);
-            },
-
-            _resetGroupBy : function(){
-                $(this.$.group_by).find("paper-menu")[0].select(-1);
-                this.groupedFields = [];
-                this.aggregators = [];
-            },
-
-            _addGroupByInput : function(){
-                this.async(function() {//codice reprlicato!
-                    var selectedFields = this.selectedFields;
-
-                    var load = true;
-
-                    if(this.inputs[0].selection == "*"){
-                        var temp = [];
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if(selectedFields[i])
-                                temp.push(selectedFields[i]);
-                        selectedFields = temp;
-                    }
-                    else {
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if (!selectedFields[i]) {
-                                load = false;
-                                break;
-                            }
-                    }
-
-                    if(load){
-                        this.loadPreview = true;
-                        this._loadDatalet(selectedFields);
-                    }
-                }, 0);
-            },
-
-            _addOrder : function(e){
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") > -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-                var icon = t.getAttribute("icon");
-                var name = t.getAttribute("id");
-
-                if(name.indexOf("gb") > -1){
-                    var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;
-                    if(selectedItem)
-                        name = selectedItem.textContent.trim();
-//                        name = "[" + selectedItem.textContent.trim() + "]";
-                    else
-                        return;
-                }// else {
-//                    var i = name;
-//                    var ddl = $("#calculate_"+i);
-//
-//                    var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();
-//                    var index = label.split(" ", 2).join(" ").length;
-//                    var field = label.substring(index+1, label.length);
-//                    var operation = label.substring(0, label.indexOf(" "));
-//                    name = operation + "([" + field + "])";
-//                }
-
-                if(icon.indexOf("unfold-more") > -1){
-                    t.setAttribute("icon", "expand-less");
-                    t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "ASC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-less") > -1){
-                    t.setAttribute("icon", "expand-more");
-                    t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "DESC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-more") > -1){
-                    t.setAttribute("icon", "unfold-more");
-                    t.setAttribute("title", ln["unsort_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    this.orders = this._copy(orders);
-                }
-
-                this._addGroupByInput();//no buoono
-//                if(load){
-//                    this.loadPreview = true;
-//                    this._loadDatalet(selectedFields);
-//                }
-            },
-
-            _addInput : function(e){
-                var selectedFields = this._copy(this.selectedFields);
-
-//                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
-//                selectedFields[index] = e.target.innerHTML.trim();
-
-                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
-                var index = e.target.id;
-                selectedFields[ddl_index] = this.fields[index];
-
-                this.selectedFields = this._copy(selectedFields);
-
-                var load = true;
-
-                if(this.inputs[0].selection == "*"){
-                    var temp = [];
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if(selectedFields[i])
-                            temp.push(selectedFields[i]);
-                    selectedFields = temp;
-                }
-                else {
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if (!selectedFields[i]) {
-                            load = false;
-                            break;
-                        }
-                }
-
-                this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
-
-                if(load){
-                    this.loadPreview = true;
-                    this._loadDatalet(selectedFields);
-                }
-            },
-
-            _updateParams : function(){
-                var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                this.params["description"] = textarea[0].value;
-
-                if(!textarea[0].value)
-                    this.params[textarea[0].label] = "";
-
-                var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                this.params["title"] = inputs[0].value;
-
-                for (var i = 1; i < inputs.length; i++)
-                    this.params[this.labels[i-1].name] = inputs[i].value;
-
-                this.aggregators = [];
-
-                var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                for (var i = 0; i < ddls.length; i++){
-                    var id = ddls[i].id;
-                    if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {
-                        var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
-                        this.aggregators.push({"field": label, "operation": "GROUP BY"});
-                    }
-                    if(id.indexOf("calculate") > -1) {
-                        var menu = $(ddls[i]).find("paper-menu")[0];
-                        var label = menu.selectedItem.textContent.trim();
-                        var index = menu.selectedItem.id;
-                        var ii = label.split(" ", 2).join(" ").length;
-                        //attenzione BUG --> non funziona se la traduzione non ha solo 1 spazio
-                        var field = label.substring(ii+1, label.length);
-//                        var operation = label.substring(0, label.indexOf(" "));
-                        this.aggregators.push({"field": field, "operation": this.functions[index]});
-                    }
-                }
-            },
-
-            _paramsChanged : function(){
-
-                this._updateParams();
-
-                if(this.$.datalet_selection_datalet_placeholder.children[1])
-                    this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
-            },
-
-            _loadDatalet : function(selectedFields){
-
-                this._updateParams();
-
-                this.params["filters"] = JSON.stringify(this.filters);
-                this.params["aggregators"] = JSON.stringify(this.aggregators);
-                this.params["orders"] = JSON.stringify(this.orders);
-
-//                this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';
-//                this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';
-//                this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';
-
-                //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';
-                //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';
-
-                var dataletParams ={
-                    component   : this.selectedDatalet+"-datalet",
-                    params      : this.params,
-                    fields      : selectedFields,
-                    placeHolder : this.$.datalet_selection_datalet_placeholder
-                };
-
-                ComponentService.deep_url = this.deepUrl;
-                ComponentService.getComponent(dataletParams);
-
-                this.$.add_button.removeAttribute("disabled");
-            },
-
-            _addDatalet : function(){
-
-                this._updateParams();
-
-                var selectedFields = [];
-                for (var i = 0; i < this.selectedFields.length; i++)
-                    if(this.selectedFields[i])
-                        selectedFields.push(this.selectedFields[i]);
-
-                var data = {
-                    dataUrl : this.dataUrl,
-                    params :  this.params,
-                    fields :  selectedFields,
-                    datalet : this.selectedDatalet+"-datalet",
-//                    comment : "",//DEPRECATED!!!
-                    staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
-                }
-
-                this.fire('data-sevc-controllet.dataletCreated', {data : data});
-
-            },
-
-            _showInfo : function(e){
-//                var that = this;
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") != -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-//                var name = t.getAttribute("title").replace(" info", "");
-                var name = t.getAttribute("id");
-
-                var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
-                if(!dataset)
-                    dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
-
-                this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);
-                this.$.dialog_description.innerHTML = ln[dataset.description + "_" +  ln["localization"]];
-                this.$.dialog_info_input.open();
-
-                var pos = t.getBoundingClientRect();
-                $("#dialog_info_input").css("top", pos.top - 4);
-                $("#dialog_info_input").css("left", pos.left - 4);
-            },
-
-            _fieldName : function(field) {
-                if(!field)//when?
-                    return "";
-                return field.substring(field.lastIndexOf(",")+1, field.length);
-            },
-
-            _copy : function(o) {
-                var out, v, key;
-                out = Array.isArray(o) ? new Array(o.length) : {};
-                for (key in o) {
-                    v = o[key];
-                    out[key] = (typeof v === "object") ? this._copy(v) : v;
-                }
-                return out;
-            },
-
-            _getLabelName: function(key) {
-                //* exceptions
-                if(key.indexOf("Cell") > -1) {
-                    return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);
-                }
-                if(key.indexOf("Level") > -1) {
-                    return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
-                }
-
-                return ln[key + "_" +ln["localization"]];
-            },
-
-            _calculateLabel: function() {
-                return ln["calculate" + "_" +ln["localization"]];
-            },
-
-            _operationName: function(index) {
-                var key = this.functions[index];
-                return ln[key + "_" +ln["localization"]];
-            },
-
-            _resize : function(){
-                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                h = h - 64 - 8; //height with page scroller
-
-                $("#items_vslider_container").height(h);//vslider controllet
-
-                $("#datalet_selection_inputs").height(h);
-                $("#datalet_selection_labels").height(h);
-                $("#datalet_selection_datalet").height(h);
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/datalet-selection-controllet/demo/index.html b/controllets/datalet-selection-controllet/demo/index.html
deleted file mode 100755
index 7e36d6f..0000000
--- a/controllets/datalet-selection-controllet/demo/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<html>
-
-<head>
-    <script src="../../shared_js/jquery-1.11.2.min.js"></script>
-
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-
-    <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-    <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-
-    <script src="../../../locales/controllet_ln.js"></script>
-    <script>
-        ln["localization"] = "en";
-    </script>
-
-    <link rel="import" href="../datalet-selection-controllet.html" />
-</head>
-
-<body>
-
-<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
-
-<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
-<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
-
-</body>
-
-<!--urls:-->
-<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
-<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
-<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
-<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->
-<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015',-->
\ No newline at end of file
diff --git a/controllets/dataset-selection-controllet/dataset-selection-controllet.html b/controllets/dataset-selection-controllet/dataset-selection-controllet.html
deleted file mode 100755
index f9ef224..0000000
--- a/controllets/dataset-selection-controllet/dataset-selection-controllet.html
+++ /dev/null
@@ -1,389 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
-<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
-
-<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-
-<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
-
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-
-<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
-
-<link rel="import" href="paper-input-search.html">
-
-<dom-module id="dataset-selection-controllet">
-
-    <template>
-
-        <style is="custom-style">
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #2196F3;
-             };
-            }
-
-            paper-tabs {
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                font-weight: bold;
-                --paper-tabs-selection-bar-color: #2196F3;
-            }
-
-            paper-tab {
-                transition: all 1.0s;
-            }
-
-            paper-tab.iron-selected {
-                background-color: #B6B6B6;
-            }
-
-            paper-tab:hover {
-                color: #2196F3;
-            }
-
-            paper-tab[disabled] {
-                color: #B6B6B6;
-            }
-
-            paper-dropdown-menu {
-                width: 45%;
-                margin-bottom: 32px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-dropdown-menu paper-item {
-                white-space: nowrap;
-            }
-
-            paper-input-search {
-                width: 45%;
-                margin-bottom: 32px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input-search paper-item {
-                white-space: nowrap;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            .ddl_container {
-                position: relative;
-            }
-
-            .info_button {
-                position: absolute;
-                top: 18px;
-                left: 45%;
-            }
-
-            paper-textarea {
-                width: 90%;
-                margin-bottom: 32px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-icon-button {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-            }
-
-            paper-icon-button[disabled] {
-                color: #B6B6B6;
-            }
-
-            #material_container {
-                margin-top: 8px;
-            }
-
-            #div_selection {
-                padding-left: 10%;
-                padding-top: 64px;
-            }
-
-            #dialog_info {
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-            }
-        </style>
-
-        <paper-material id="material_container" elevation="5">
-
-            <paper-tabs selected="{{selected}}">
-                <paper-tab noink><span id="listView"></span></paper-tab>
-                <paper-tab noink><span id="treeMapView"></span></paper-tab>
-                <!--<paper-tab noink disabled><span data-l10n-id="mostPopular"></span></paper-tab>-->
-            </paper-tabs>
-
-            <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
-
-                <neon-animatable>
-
-                    <div id="div_selection">
-                        <div class="ddl_container">
-                            <paper-input-search id="_datasets" label="Available datasets">
-                                <paper-menu class="dropdown-content">
-                                    <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
-                                        <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
-                                    </template>
-                                </paper-menu>
-                            </paper-input-search>
-
-                            <div class="info_button">
-                                <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
-                            </div>
-                        </div>
-
-                        <template is="dom-if" if={{isSuggested}}>
-
-                            <div class="ddl_container">
-                                <paper-dropdown-menu id="s_datasets" label="Suggested datasets">
-                                    <paper-menu class="dropdown-content">
-                                        <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
-                                            <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{dataset.name}}</paper-item>
-                                        </template>
-                                    </paper-menu>
-                                </paper-dropdown-menu>
-
-                                <div class="info_button">
-                                    <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
-                                </div>
-                            </div>
-
-                        </template>
-
-                        <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
-
-                        <paper-dialog id="dialog_info">
-                            <h2 id="dialog_name"></h2>
-                            <p id="dialog_description"></p>
-                        </paper-dialog>
-                    </div>
-
-                </neon-animatable>
-
-                <neon-animatable>
-                    <div id="div_datasetexplorer"></div>
-                </neon-animatable>
-
-                <neon-animatable>
-                    <!--popular-->
-                </neon-animatable>
-
-            </neon-animated-pages>
-
-        </paper-material>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'dataset-selection-controllet',
-
-            properties : {
-
-                selected : {
-                    type  : Number,
-                    value : 0
-                },
-
-                datasets : {
-                    type : Array,
-                    value : undefined
-                },
-
-                filteredDatasets : {
-                    type : Array,
-                    value : []
-                },
-
-                suggestedDatasets : {
-                    type : Array,
-                    value : undefined
-                },
-
-                isSuggested : {
-                    type : Boolean,
-                    value : false
-                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined,
-                    observer : '_fireDataUrl'
-                },
-
-                errorMessage : {
-                    type  : String,
-                    value : "",
-                }
-
-            },
-
-            listeners: {
-                'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap',
-                'paper-input-search_input-value' : '_filterDatasets'
-            },
-
-            ready : function(){
-                $(this.$.material_container).perfectScrollbar();
-                $(this.$.dialog_info).perfectScrollbar();
-
-                this.errorMessage = ln["wrongUrl_" + ln["localization"]];
-            },
-
-            attached : function(){
-                this._resize();
-                var that = this;
-                window.addEventListener("resize", function() { that._resize(); });
-
-                this.filteredDatasets = this.datasets;
-
-                if(this.suggestedDatasets)
-                    this.isSuggested = true;
-
-                this._loadTreeMap();
-
-                this.async(function(){this._translate();},100);
-            },
-
-            _translate : function(){
-                this.$._datasets.setAttribute("label", ln["availableDatasets_" + ln["localization"]]);
-                this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
-                this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
-
-                if(this.isSuggested)
-                    this.$$("#s_datasets").setAttribute("label", ln["suggestedDatasets_" + ln["localization"]]);
-                this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
-            },
-
-            _filterDatasets : function(e){
-                var filter = e.detail.inputValue;
-                var filteredDatasets = [];
-                for (var i in this.datasets){
-                    if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1)
-                        filteredDatasets.push(this.datasets[i]);
-                }
-
-                this.filteredDatasets = filteredDatasets;
-            },
-
-            _loadTreeMap : function(){
-                var h = $("#material_container").height() - 48;
-                var w = $("#material_container").width();
-
-                this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet data='"+this.data+"' width=\""+w+"\" height=\""+h+"\" data-url=\"/openwall/api/datasetTree\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]'></datasetexplorer-datalet>";
-            },
-
-            _selectDataUrl_treeMap : function(e) {
-                $("#_datasets")[0]._setSelectedItem(null);
-                $("#_datasets")[0].inputValue = "";
-                $("#info_dataset")[0].setAttribute("disabled", "true");
-
-                if (this.isSuggested) {
-                    $("#s_datasets")[0]._setSelectedItem(null);
-                    $("#s_datasets")[0].contentElement.select(-1);
-                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
-                }
-
-                this.dataUrl = this._addlimitUrl(e.detail.url);
-                this.selected=0;
-            },
-
-            _selectDataUrl : function(e){this._translate();
-                if (this.isSuggested) {
-                    $("#s_datasets")[0]._setSelectedItem(null);
-                    $("#s_datasets")[0].contentElement.select(-1);
-                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
-                }
-
-                var dataset = this.filteredDatasets[parseInt(e.target.id)]
-
-                this.dataUrl = this._addlimitUrl(dataset.url);
-
-                if(dataset.description != ""){
-                    $("#info_dataset")[0].removeAttribute("disabled");
-                    this.$.dialog_name.innerHTML = dataset.name;
-                    this.$.dialog_description.innerHTML = dataset.description;
-                }
-                else
-                    $("#info_dataset")[0].setAttribute("disabled", "true");
-            },
-
-            _selectSuggestedDataUrl : function(e){
-                $("#_datasets")[0]._setSelectedItem(null);
-                $("#_datasets")[0].inputValue = "";
-                $("#info_dataset")[0].setAttribute("disabled", "true");
-
-                var dataset = this.suggestedDatasets[parseInt(e.target.id)]
-
-                this.dataUrl = this._addlimitUrl(dataset.url);
-
-                if(dataset.description != ""){
-                    $("#info_s_dataset")[0].removeAttribute("disabled");
-                    this.$.dialog_name.innerHTML = dataset.name;
-                    this.$.dialog_description.innerHTML = dataset.description;
-                }
-                else
-                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
-            },
-
-            _showInfo : function(e){
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") != -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-                this.$.dialog_info.open();
-
-                var pos = t.getBoundingClientRect();
-                $("#dialog_info").css("top", pos.top - 4);
-                $("#dialog_info").css("left", pos.left - 4);
-            },
-
-            _fireDataUrl : function(){
-                this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
-            },
-
-            _addlimitUrl : function(url){
-                //CKAN --> action no limit
-                if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
-                {
-                    url += "&limit=99999";
-                }
-                //OpenDataSoft --> action no limit
-                if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
-                    url += "&rows=10000";
-                }
-                return url;
-            },
-
-            _resize : function(){
-                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                h = h - 64 - 8; //height with page scroller
-                $("#material_container").height(h);
-            }
-
-        });
-
-    </script>
-
-</dom-module>
diff --git a/controllets/dataset-selection-controllet/demo/index.html b/controllets/dataset-selection-controllet/demo/index.html
deleted file mode 100755
index 5f43f5d..0000000
--- a/controllets/dataset-selection-controllet/demo/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<html>
-
-<head>
-    <script src="../../shared_js/jquery-1.11.2.min.js"></script>
-
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-
-    <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-    <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-
-    <link rel="import" href="../dataset-selection-controllet.html" />
-</head>
-
-<body>
-
-<dataset-selection-controllet id="ds"></dataset-selection-controllet>
-
-<script>
-    var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
-            " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
-            " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
-            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa";
-
-    var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"};
-    var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
-    var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};
-    var datasets = [dataset1, dataset2, dataset3];
-    var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
-
-    var ds = document.getElementById('ds');
-    ds.setAttribute("datasets", JSON.stringify(datasets));
-
-</script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/controllets/dataset-selection-controllet/paper-input-search.html b/controllets/dataset-selection-controllet/paper-input-search.html
deleted file mode 100755
index 411b5d9..0000000
--- a/controllets/dataset-selection-controllet/paper-input-search.html
+++ /dev/null
@@ -1,444 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-styles/default-theme.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">
-<link rel="import" href="../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
-<link rel="import" href="../../bower_components/iron-behaviors/iron-control-state.html">
-<link rel="import" href="../../bower_components/iron-behaviors/iron-button-state.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../bower_components/iron-selector/iron-selectable.html">
-<link rel="import" href="../../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
-<link rel="import" href="../../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">
-
-<!--
-Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
-
-`paper-dropdown-menu` is similar to a native browser select element.
-`paper-dropdown-menu` works with selectable content. The currently selected
-item is displayed in the control. If no item is selected, the `label` is
-displayed instead.
-
-The child element with the class `dropdown-content` will be used as the dropdown
-menu. It could be a `paper-menu` or element that triggers `iron-select` when
-selecting its children.
-
-Example:
-
-    <paper-dropdown-menu label="Your favourite pastry">
-      <paper-menu class="dropdown-content">
-        <paper-item>Croissant</paper-item>
-        <paper-item>Donut</paper-item>
-        <paper-item>Financier</paper-item>
-        <paper-item>Madeleine</paper-item>
-      </paper-menu>
-    </paper-dropdown-menu>
-
-This example renders a dropdown menu with 4 options.
-
-Similarly to using `iron-select`, `iron-deselect` events will cause the
-current selection of the `paper-dropdown-menu` to be cleared.
-
-### Styling
-
-The following custom properties and mixins are also available for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
-`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
-`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
-`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
-`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
-`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
-
-You can also use any of the `paper-input-container` and `paper-menu-button`
-style mixins and custom properties to style the internal input and menu button
-respectively.
-
-@group Paper Elements
-@element paper-dropdown-menu
-@hero hero.svg
-@demo demo/index.html
--->
-
-<dom-module id="paper-input-search">
-    <style>
-        :host {
-            display: inline-block;
-            position: relative;
-            text-align: left;
-            cursor: pointer;
-
-            /* NOTE(cdata): Both values are needed, since some phones require the
-             * value to be `transparent`.
-             */
-            -webkit-tap-highlight-color: rgba(0,0,0,0);
-            -webkit-tap-highlight-color: transparent;
-
-        --paper-input-container-input: {
-             overflow: hidden;
-             white-space: nowrap;
-             text-overflow: ellipsis;
-             max-width: 100%;
-             box-sizing: border-box;
-             /*cursor: pointer;*/
-         };
-
-        @apply(--paper-dropdown-menu);
-        }
-
-        :host([disabled]) {
-        @apply(--paper-dropdown-menu-disabled);
-        }
-
-        :host([noink]) paper-ripple {
-            display: none;
-        }
-
-        :host([no-label-float]) paper-ripple {
-            top: 8px;
-        }
-
-        paper-ripple {
-            top: 12px;
-            left: 0px;
-            bottom: 8px;
-            right: 0px;
-
-        @apply(--paper-dropdown-menu-ripple);
-        }
-
-        paper-menu-button {
-            display: block;
-            padding: 0;
-        @apply(--paper-dropdown-menu-button);
-        }
-
-        paper-input {
-        @apply(--paper-dropdown-menu-input);
-        }
-
-        iron-icon {
-            /*color: var(--disabled-text-color);*/
-            color: #2196F3;
-
-        @apply(--paper-dropdown-menu-icon);
-        }
-
-    </style>
-    <template>
-        <paper-menu-button
-                id="menuButton"
-                vertical-align="top"
-                horizontal-align="left"
-                vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
-                disabled="[[disabled]]"
-                no-animations="[[noAnimations]]"
-                on-iron-select="_onIronSelect"
-                on-iron-deselect="_onIronDeselect"
-                opened="{{opened}}">
-            <div class="dropdown-trigger">
-                <!--<paper-ripple></paper-ripple>-->
-                <paper-input
-                        id="inputField"
-                        invalid="[[invalid]]"
-                        value="{{inputValue}}"
-                        placeholder="[[placeholder]]"
-                        always-float-label="[[alwaysFloatLabel]]"
-                        no-label-float="[[noLabelFloat]]"
-                        label="[[label]]">
-                    <iron-icon icon="search" prefix></iron-icon>
-                    <iron-icon icon="arrow-drop-down" suffix></iron-icon>
-                </paper-input>
-            </div>
-            <content id="content" select=".dropdown-content"></content>
-        </paper-menu-button>
-    </template>
-</dom-module>
-<script>
-    (function() {
-        'use strict';
-
-        Polymer({
-            is: 'paper-input-search',
-
-            /**
-             * Fired when the dropdown opens.
-             *
-             * @event paper-dropdown-open
-             */
-
-            /**
-             * Fired when the dropdown closes.
-             *
-             * @event paper-dropdown-close
-             */
-
-            behaviors: [
-                Polymer.IronControlState,
-                Polymer.IronButtonState,
-                Polymer.IronFormElementBehavior,
-                Polymer.IronValidatableBehavior
-            ],
-
-            properties: {
-                /**
-                 * The derived "label" of the currently selected item. This value
-                 * is the `label` property on the selected item if set, or else the
-                 * trimmed text content of the selected item.
-                 */
-                selectedItemLabel: {
-                    type: String,
-                    notify: true,
-                    readOnly: true
-                },
-
-                /**
-                 * The last selected item. An item is selected if the dropdown menu has
-                 * a child with class `dropdown-content`, and that child triggers an
-                 * `iron-select` event with the selected `item` in the `detail`.
-                 *
-                 * @type {?Object}
-                 */
-                selectedItem: {
-                    type: Object,
-                    notify: true,
-                    readOnly: true
-                },
-
-                /**
-                 * The value for this element that will be used when submitting in
-                 * a form. It is read only, and will always have the same value
-                 * as `selectedItemLabel`.
-                 */
-                value: {
-                    type: String,
-                    notify: true,
-                    readOnly: true
-                },
-
-                /**
-                 * The label for the dropdown.
-                 */
-                label: {
-                    type: String
-                },
-
-                /**
-                 * The placeholder for the dropdown.
-                 */
-                placeholder: {
-                    type: String
-                },
-
-                /**
-                 * True if the dropdown is open. Otherwise, false.
-                 */
-                opened: {
-                    type: Boolean,
-                    notify: true,
-                    value: false
-                },
-
-                /**
-                 * Set to true to disable the floating label. Bind this to the
-                 * `<paper-input-container>`'s `noLabelFloat` property.
-                 */
-                noLabelFloat: {
-                    type: Boolean,
-                    value: false,
-                    reflectToAttribute: true
-                },
-
-                /**
-                 * Set to true to always float the label. Bind this to the
-                 * `<paper-input-container>`'s `alwaysFloatLabel` property.
-                 */
-                alwaysFloatLabel: {
-                    type: Boolean,
-                    value: false
-                },
-
-                /**
-                 * Set to true to disable animations when opening and closing the
-                 * dropdown.
-                 */
-                noAnimations: {
-                    type: Boolean,
-                    value: false
-                },
-
-                inputValue: {
-                    type: String,
-                    value: undefined,
-                    observer: '_fireInputValue'
-                },
-
-                fireInputValue: {
-                    type: Boolean,
-                    value: true,
-                }
-            },
-
-            listeners: {
-                'tap': '_onTap'
-            },
-
-            keyBindings: {
-                'up down': 'open',
-                'esc': 'close'
-            },
-
-            hostAttributes: {
-                role: 'group',
-                'aria-haspopup': 'true'
-            },
-
-            observers: [
-//                '_selectedItemChanged(selectedItem)'
-            ],
-
-            attached: function() {
-                // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
-                // child will cause an `iron-select` event to fire while the element is
-                // still in a `DocumentFragment`. This has the effect of causing
-                // handlers not to fire. So, we double check this value on attached:
-                var contentElement = this.contentElement;
-                if (contentElement && contentElement.selectedItem) {
-                    this._setSelectedItem(contentElement.selectedItem);
-                }
-            },
-
-            _fireInputValue: function() {//console.log(this.inputValue);
-                if(this.fireInputValue) {//change NO DDL
-                    this.fire('paper-input-search_input-value', {inputValue: this.inputValue});
-                    if(this.contentElement.selectedItem){
-//                        this._setSelectedItem(null);
-                        this.contentElement.select(-1);
-//                        console.log("deselected");
-                    }
-                }
-
-                this.fireInputValue = true;
-            },
-
-            /**
-             * The content element that is contained by the dropdown menu, if any.
-             */
-            get contentElement() {
-                return Polymer.dom(this.$.content).getDistributedNodes()[0];
-            },
-
-            /**
-             * Show the dropdown content.
-             */
-            open: function() {
-                this.$.menuButton.open();
-            },
-
-            /**
-             * Hide the dropdown content.
-             */
-            close: function() {
-                this.$.menuButton.close();
-            },
-
-            /**
-             * A handler that is called when `iron-select` is fired.
-             *
-             * @param {CustomEvent} event An `iron-select` event.
-             */
-            _onIronSelect: function(event) {
-//                console.log("select");
-                this.fireInputValue = false;
-                this._setSelectedItem(event.detail.item);
-                this.inputValue = event.detail.item.label || event.detail.item.textContent.trim();
-            },
-
-            /**
-             * A handler that is called when `iron-deselect` is fired.
-             *
-             * @param {CustomEvent} event An `iron-deselect` event.
-             */
-            _onIronDeselect: function(event) {
-//                console.log("deselect");
-                this.fireInputValue = false;
-                this._setSelectedItem(null);
-            },
-
-            /**
-             * A handler that is called when the dropdown is tapped.
-             *
-             * @param {CustomEvent} event A tap event.
-             */
-            _onTap: function(event) {
-                if (Polymer.Gestures.findOriginalTarget(event) === this) {
-                    this.open();
-                }
-                this.async(function(){this.$.inputField.$.input.focus();},200);//to improve
-//                console.log(this.selectedItemLabel);
-//                console.log(this.value);
-//                console.log(this.$.inputField.value);
-//                console.log(this.inputValue);
-            },
-
-            /**
-             * Compute the label for the dropdown given a selected item.
-             *
-             * @param {Element} selectedItem A selected Element item, with an
-             * optional `label` property.
-             */
-//            _selectedItemChanged: function(selectedItem) {
-//                var value = '';
-//                if (!selectedItem) {
-//                    value = '';
-//                } else {
-//                    value = selectedItem.label || selectedItem.textContent.trim();
-//                }
-//
-//                this._setValue(value);
-//                this._setSelectedItemLabel(value);
-//                this.inputValue = selectedItem.label || selectedItem.textContent.trim();
-//            },
-
-            /**
-             * Compute the vertical offset of the menu based on the value of
-             * `noLabelFloat`.
-             *
-             * @param {boolean} noLabelFloat True if the label should not float
-             * above the input, otherwise false.
-             */
-            _computeMenuVerticalOffset: function(noLabelFloat) {
-                // NOTE(cdata): These numbers are somewhat magical because they are
-                // derived from the metrics of elements internal to `paper-input`'s
-                // template. The metrics will change depending on whether or not the
-                // input has a floating label.
-//                return noLabelFloat ? -4 : 8;
-                return noLabelFloat ? 46-4 : 46+8;
-//                return 64;
-            },
-
-            /**
-             * Returns false if the element is required and does not have a selection,
-             * and true otherwise.
-             * @return {Boolean} true if `required` is false, or if `required` is true
-             * and the element has a valid selection.
-             */
-            _getValidity: function() {
-                return this.disabled || !this.required || (this.required && this.value);
-            }
-        });
-    })();
-</script>
\ No newline at end of file
diff --git a/controllets/select-dataset-controllet/demo-select-dataset-controllet.html b/controllets/select-dataset-controllet/demo-select-dataset-controllet.html
new file mode 100644
index 0000000..5f8fb34
--- /dev/null
+++ b/controllets/select-dataset-controllet/demo-select-dataset-controllet.html
@@ -0,0 +1,495 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
+
+<link rel="import" href="../datasets-list-controllet/datasets-list-controllet.html">
+
+<dom-module id="demo-select-dataset-controllet">
+    <template>
+        <style>
+
+            #select_dataset_container {
+                margin-top: 8px;
+            }
+
+            #select_dataset_container * {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+            #select_dataset_container #options {
+                display: flex;
+                flex-direction: row;
+
+                height: 48px;
+                padding: 0;
+                font-weight: 700;
+                background: #B6B6B6;
+
+                margin-top: 2px;
+
+                overflow: hidden;
+            }
+
+            #select_dataset_container #options_header {
+                width: calc(100% - 96px);
+                text-align: center;
+                padding: 12px 0 12px 48px;
+            }
+
+            #select_dataset_container .header_block {
+                /*width: calc((100% - 48px) / 2);*/
+                /*max-width: 400px;*/
+                width: calc(50% - 24px);
+                padding:0 12px;
+
+                line-height: 40px;
+
+                display: none;
+            }
+
+            #select_dataset_container #url {
+                padding: 0 12px 12px 12px;
+                height: 60px;
+
+                border: 2px solid #B6B6B6;
+                border-top: 0;
+            }
+
+            #select_dataset_container #datasets_list_container {
+                height: calc(100% - 96px - 2px - 74px);
+                width: 100%;
+            }
+
+            paper-tabs {
+                background: #B6B6B6;
+            }
+
+            paper-tab {
+                font-weight: 700;
+                border-right: 2px solid #FFFFFF;
+            }
+
+            paper-tab:nth-last-child(2) {
+                border-right: 0;
+            }
+
+            paper-tab.iron-selected {
+                color: #FFFFFF;
+                background: #2196F3;;
+            }
+
+            paper-tab:not(.iron-selected):hover {
+                color: #2196F3;
+            }
+
+            paper-input {
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-icon-button {
+                height: 48px;
+                width: 48px;
+                padding: 8px;
+            }
+
+            paper-icon-button[icon="settings"] {
+                cursor: pointer;
+                color: #00BCD4;
+                --paper-icon-button-ink-color: #00BCD4;
+
+                background: #E0E0E0;
+                float: right;
+                position: absolute;
+                right: 0;
+            }
+
+            paper-icon-button[icon="info-outline"] {
+                cursor: help;
+            }
+
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #000000;
+             };
+            --paper-dropdown-menu-ripple: {
+                 color: #FFFFFF;
+             };
+            }
+
+            paper-dropdown-menu {
+                /*width: 200px;*/
+                width: 50%;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item {
+                min-width: 128px;
+                white-space: nowrap;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-tooltip {
+                min-width: 400px;
+                --paper-tooltip-background: black;
+            }
+
+            #select_dataset_container br {
+                display: block;
+                margin-top: 8px;
+                content: " ";
+            }
+
+            #select_dataset_container p {
+                margin: 0;
+                padding: 0;
+            }
+
+            #select_dataset_container p .option {
+                color: #2196F3;;
+                font-weight: 700;
+            }
+
+            #select_dataset_container p .description {
+            }
+
+        </style>
+
+        <paper-material id="select_dataset_container" elevation="5">
+            <paper-tabs selected={{tabIndex}} no-bar>
+                <paper-tab noink on-tap="">EXAMPLE DATASETS LIST</paper-tab>
+                <!--<paper-tab noink on-tap="_setLocalDatasets"><span id="spod_users_datasets"></span></paper-tab>-->
+                <!--<paper-tab noink on-tap="_setExtendedDatasets"><span id="extended_datasets"></span></paper-tab>-->
+            </paper-tabs>
+
+            <div id="options">
+
+                <div id="options_header"></div>
+
+                <div id="provider_option" class="header_block">
+                    {{_getLocalization('provider')}}:&nbsp;
+                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
+                        <paper-menu id="menu_provider" class="dropdown-content">
+                            <paper-item id="0" on-tap="_setProvidersDatasets"><span id="all"></span></paper-item>
+                            <template is="dom-repeat" items={{_toArray(providers)}}>
+                                <paper-item id={{item.value.id}} on-tap="_setProvidersDatasets">{{item.value.title}}</paper-item>
+                            </template>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                    <paper-icon-button id="info_provider" icon="info-outline" noink></paper-icon-button>
+                    <paper-tooltip id="tooltip_provider" for="info_provider" offset="8">
+                        <p>
+                            <span class="option">{{_getLocalization('all')}}</span><br>
+                            <span class="description">{{_getLocalization('allDescription')}}</span><br>
+                            <span class="option">{{_getLocalization('providerName')}}</span><br>
+                            <span class="description">{{_getLocalization('providerNameDescription')}}</span><br>
+                        </p>
+                    </paper-tooltip>
+                </div>
+
+                <!--<div id="view_option" class="header_block">-->
+                <!--{{_getLocalization('view')}}:&nbsp;-->
+                <!--<paper-dropdown-menu id="ddl_view" label="" no-label-float>-->
+                <!--<paper-menu id="menu_view" class="dropdown-content">-->
+                <!--<paper-item id="0" on-tap=""><span id="list"></span></paper-item>-->
+                <!--<paper-item id="1" on-tap="" disabled><span id="tree"></span></paper-item>-->
+                <!--</paper-menu>-->
+                <!--</paper-dropdown-menu>-->
+                <!--<paper-icon-button id="info_view" icon="info-outline" noink></paper-icon-button>-->
+                <!--<paper-tooltip id="tooltip_view" for="info_view" offset="8">-->
+                <!--<p>-->
+                <!--<span class="option">{{_getLocalization('list')}}</span><br>-->
+                <!--<span class="description">{{_getLocalization('listDescription')}}</span><br>-->
+                <!--<span class="option">{{_getLocalization('tree')}}</span><br>-->
+                <!--<span class="description">{{_getLocalization('treeDescription')}}</span><br>-->
+                <!--</p>-->
+                <!--</paper-tooltip>-->
+                <!--</div>-->
+
+                <!--<div id="search_option" class="header_block">-->
+                <!--{{_getLocalization('search')}}:&nbsp;-->
+                <!--<paper-dropdown-menu id="ddl_search" label="" no-label-float>-->
+                <!--<paper-menu id="menu_search" class="dropdown-content">-->
+                <!--<paper-item><span id="standard"></span></paper-item>-->
+                <!--<paper-item disabled><span id="extended"></span></paper-item>-->
+                <!--</paper-menu>-->
+                <!--</paper-dropdown-menu>-->
+                <!--<paper-icon-button id="info_search" icon="info-outline" noink></paper-icon-button>-->
+                <!--<paper-tooltip id="tooltip_search" for="info_search" offset="8">-->
+                <!--<p>-->
+                <!--<span class="option">{{_getLocalization('standard')}}</span><br>-->
+                <!--<span class="description">{{_getLocalization('standardDescription')}}</span><br>-->
+                <!--<span class="option">{{_getLocalization('extended')}}</span><br>-->
+                <!--<span class="description">{{_getLocalization('extendedDescription')}}</span><br>-->
+                <!--</p>-->
+                <!--</paper-tooltip>-->
+                <!--</div>-->
+
+                <div id="version_option" class="header_block">
+                    {{_getLocalization('version')}}:&nbsp;
+                    <paper-dropdown-menu id="ddl_version" label="" no-label-float>
+                        <paper-menu id="menu_version" class="dropdown-content">
+                            <paper-item id="0" on-tap="_showLast"><span id="show_last"></span></paper-item>
+                            <paper-item id="1" on-tap="_showAll"><span id="show_all"></span></paper-item>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                    <paper-icon-button id="tooltip_version" icon="info-outline" noink></paper-icon-button>
+                    <paper-tooltip id="tooltip_version" for="tooltip_version" offset="8">
+                        <p>
+                            <span class="option">{{_getLocalization('showLast')}}</span><br>
+                            <span class="description">{{_getLocalization('showLastDescription')}}</span><br>
+                            <span class="option">{{_getLocalization('showAll')}}</span><br>
+                            <span class="description">{{_getLocalization('showAllDescription')}}</span><br>
+                        </p>
+                    </paper-tooltip>
+                </div>
+
+                <!--<paper-icon-button icon="settings" on-click="_optionsMenu"></paper-icon-button>-->
+
+            </div>
+
+            <div id="datasets_list_container">
+                <datasets-list-controllet id="datasets_list"></datasets-list-controllet>
+            </div>
+
+            <div id="url"><paper-input id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-input></div>
+        </paper-material>
+
+    </template>
+
+    <script>
+        HTMLImports.whenReady(function() {
+            Polymer({
+                is: 'demo-select-dataset-controllet',
+
+                properties: {
+
+                    tabIndex: {
+                        type: Number,
+                        value: 0
+                    },
+
+                    datasets: {
+                        type: Object,
+                        value: undefined
+                    },
+
+                    suggestedDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+
+                    dataUrl : {
+                        type  : String,
+                        value : undefined,
+                        observer : '_fireDataUrl'
+                    }
+
+                },
+
+                listeners: {
+                    'datasets-list-controllet_dataset' : '_selectDataUrl'
+                },
+
+                ready : function() {
+                    this._translate();
+
+                    $(this.$.list_container).perfectScrollbar();
+                    $(this.$.info).perfectScrollbar();
+
+                    this.options = true;
+                },
+
+                attached : function() {
+                    this._translate();
+
+                    this._resize();
+                    var that = this;
+                    window.addEventListener("resize", function() { that._resize() });
+
+                    this.providers = this.datasets["result"]["providers"];
+                    this.providersDatasets = this.datasets["result"]["datasets"];
+
+                    if(this.suggestedDatasets)
+                        this.providersDatasets = this.suggestedDatasets.concat(this.providersDatasets);
+
+                    $.ajax({
+                        url: "/cocreation/ajax/get-all-dataset",
+                        dataType: "json",
+                        success: function(localDatasets){
+                            that.localDatasets = localDatasets;
+                            that.lastLocalDatasets = [];
+                            var resource_name = "";
+                            for(var i in localDatasets)
+                                if(localDatasets[i].resource_name != resource_name) {
+                                    that.lastLocalDatasets.push(localDatasets[i]);
+                                    resource_name = localDatasets[i].resource_name;
+                                }
+                        },
+                        error: function(){
+                            that.localDatasets = [];
+                            that.lastLocalDatasets = [];
+                        }
+                    });
+
+                    this._setProvidersDatasets();
+                },
+
+                showDatasetInfo : function() {
+                    this.$.datasets_list.showDatasetInfo();
+                },
+
+                _translate : function(){
+                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
+                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
+
+//                    this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]];
+//                    this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]];
+//                    this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]];
+
+                    this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]];
+
+                    this.$.all.innerHTML = ln["all_" + ln["localization"]];
+//                    this.$.list.innerHTML = ln["list_" + ln["localization"]];
+//                    this.$.tree.innerHTML = ln["tree_" + ln["localization"]];
+//                    this.$.standard.innerHTML = ln["standard_" + ln["localization"]];
+//                    this.$.extended.innerHTML = ln["extended_" + ln["localization"]];
+                    this.$.show_last.innerHTML = ln["showLast_" + ln["localization"]];
+                    this.$.show_all.innerHTML = ln["showAll_" + ln["localization"]];
+
+                    this.$.menu_provider.select(0);
+//                    this.$.menu_view.select(0);
+//                    this.$.menu_search.select(0);
+                    this.$.menu_version.select(0);
+                },
+
+                _setProvidersDatasets : function() {
+                    this.async(function () {
+                        var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                        var name = ddl_provider.innerHTML.trim();
+                        var id = this._getIdByProviderName(name);
+                        if (id) {
+                            var providerDatasets = this.providersDatasets.filter(function (el) {
+                                return el.provider_name == "p:" + id;
+                            });
+                            this.$.datasets_list.setDatasets(providerDatasets);
+                        }
+                        else
+                            this.$.datasets_list.setDatasets(this.providersDatasets);
+
+                        this._showOptions();
+                    }, 0);
+                },
+
+                _setLocalDatasets : function() {
+                    if(this.$.ddl_version.selectedItem.id == 0)
+                        this._showLast();
+                    else
+                        this._showAll();
+                    this._showOptions();
+                },
+
+                _setExtendedDatasets : function() {
+                    this.$.datasets_list.setDatasets([]);//tutto molto bello, clap, clap, clapù
+                    this._showOptions()
+                },
+
+                _getIdByProviderName : function(name) {
+                    for(var id in this.providers) {
+                        if (this.providers[id].title == name)
+                            return this.providers[id].id;
+                    }
+                },
+
+                _optionsMenu : function() {
+                    this.options = !this.options;
+                    this._showOptions();
+                },
+
+                _showOptions : function() {
+                    this.async(function () {
+                        if(!this.options) {
+                            this.$.options_header.style.display = "block";
+                            this.$.provider_option.style.display = "none";
+//                            this.$.view_option.style.display = "none";
+//                            this.$.search_option.style.display = "none";
+                            this.$.version_option.style.display = "none";
+                        }
+                        else if(this.tabIndex == 0) {
+                            this.$.options_header.style.display = "none";
+                            this.$.provider_option.style.display = "block";
+//                            this.$.view_option.style.display = "block";
+//                            this.$.search_option.style.display = "block";
+                            this.$.version_option.style.display = "none";
+                        }
+                        else if(this.tabIndex == 1) {
+                            this.$.options_header.style.display = "none";
+                            this.$.provider_option.style.display = "none";
+//                            this.$.view_option.style.display = "none";
+//                            this.$.search_option.style.display = "none";
+                            this.$.version_option.style.display = "block";
+                        }
+                        else if(this.tabIndex == 2) {
+                            this.$.options_header.style.display = "block";
+                            this.$.provider_option.style.display = "none";
+//                            this.$.view_option.style.display = "none";
+//                            this.$.search_option.style.display = "none";
+                            this.$.version_option.style.display = "none";
+                        }
+                    }, 0);
+                },
+
+                _showAll : function() {
+                    this.$.datasets_list.showVersion(true);
+                    this.$.datasets_list.setDatasets(this.localDatasets);
+                },
+
+                _showLast : function() {
+                    this.$.datasets_list.showVersion(false);
+                    this.$.datasets_list.setDatasets(this.lastLocalDatasets);
+                },
+
+                _getLocalization : function(text){
+                    return ln[text + "_" + ln["localization"]];
+                },
+
+                _toArray: function(obj) {
+                    return Object.keys(obj).map(function(key) {
+                        return {
+                            name: key,
+                            value: obj[key]
+                        };
+                    });
+                },
+
+                _selectDataUrl : function(e){
+                    this.async(function () {
+                        this.dataUrl = e.detail.dataset.url;
+                    }, 0);
+                },
+
+                _fireDataUrl : function(){
+                    this.fire('select-dataset-controllet_data-url', {url: this.dataUrl});
+                },
+
+                _resize : function(){
+                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
+                    h = h - 64 - 8; //height with page scroller
+                    $("#select_dataset_container").height(h);
+                }
+            });
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet_old.html b/controllets/select-dataset-controllet/select-dataset-controllet_old.html
deleted file mode 100755
index 3dcc522..0000000
--- a/controllets/select-dataset-controllet/select-dataset-controllet_old.html
+++ /dev/null
@@ -1,818 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
-<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
-
-<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
-
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/paper-styles/color.html">
-<link rel="import" href="../../bower_components/paper-styles/typography.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-
-<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
-
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
-<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
-
-<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
-
-<link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html">
-<link rel="import" href="ortelio-controllet.html">
-<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
-
-<dom-module id="select-dataset-controllet">
-    <template>
-        <style>
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #000000;
-             };
-            --paper-dropdown-menu-ripple: {
-                 color: #FFFFFF;
-             };
-            /*--paper-tab-ink: {*/
-                 /*color: #FFFFFF;*/
-             /*};*/
-            }
-
-            iron-list {
-            --iron-list-items-container: {
-                margin:16px 16px 8px 16px;
-             };
-            }
-
-            paper-textarea {
-                width: 100%;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input {
-                --paper-input-container-focus-color: #2196F3;
-            }
-            paper-dropdown-menu {
-                width: 100%;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-checkbox {
-                height: 24px;
-                /*margin-top: 8px*/
-                --paper-checkbox-checked-color: #2196F3;
-                --paper-checkbox-checked-ink-color: #FFFFFF;
-                --paper-checkbox-unchecked-color: #000000;
-                --paper-checkbox-unchecked-ink-color: #FFFFFF;
-                --paper-checkbox-label-color: #000000;
-            }
-
-            paper-icon-button{
-                height: 48px;
-                width: 48px;
-                padding: 0px;
-                --paper-icon-button-ink-color: #FFFFFF;
-            }
-
-            paper-icon-button:hover{
-                color: #2196F3;
-            }
-
-            paper-icon-button[disabled]{
-                color: #B6B6B6;
-            }
-
-            paper-icon-button.clear {
-                width: 24px;
-                height: 24px;
-                padding: 0px 4px;
-                color: #F44336;
-                --paper-icon-button-ink-color: #FFFFFF;
-            }
-
-            paper-tabs {
-                font-weight: bold;
-            }
-
-            paper-tab {
-                transition: all 1.0s;
-            }
-
-            paper-tab.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-tab:not(.iron-selected):hover {
-                color: #2196F3;
-            }
-
-            .item {
-                /*@apply(--layout-horizontal);*/
-                display: flex;
-                padding: 11px;
-                border: 1px solid #B6B6B6;
-                border-radius: 4px;
-                cursor: pointer;
-                margin-bottom: 8px;
-                background-color: #E0E0E0;
-            }
-
-            .item.expanded {
-                /*border: 2px solid #2196F3;*/
-                border-color: #2196F3;
-            }
-
-            .pad {
-                @apply(--layout-flex);
-                /*@apply(--layout-vertical);*/
-            }
-
-            .primary {
-                font-weight: bold;
-            }
-
-            .item.expanded .primary {
-                color: #2196F3;
-            }
-
-            .longText {
-                display: none;
-            }
-
-            .item.expanded .longText {
-                display: block;
-            }
-
-            #select_dataset_container {
-                margin-top: 8px;
-            }
-
-            #select_dataset_container * {
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                line-height: 24px;
-            }
-
-            #select_dataset_container #neon_container {
-                height: calc(100% - 172px);
-                width: calc(100% - 8px);
-            }
-
-            #select_dataset_container #list_info {
-                display: flex;
-                height: calc(100% - 48px);
-                width: calc(100% + 8px);/*bad*/
-            }
-
-            #select_dataset_container #list_container {
-                position: relative;
-                height: 100%;
-                width: 50%;
-                border-left: 4px solid #B6B6B6;
-            }
-
-            #select_dataset_container #info_container {
-                position: relative;
-                height: 100%;
-                width: 50%;
-                border-right: 4px solid #B6B6B6;
-            }
-
-            #select_dataset_container #info {
-                position: relative;
-                height: calc(100% - 56px);
-                width: calc(100% - 56px);
-                padding: 11px;
-                border: 1px solid #B6B6B6;
-                border-radius: 4px;
-                background-color: #E0E0E0;
-                margin: 16px;
-            }
-
-            #select_dataset_container #treemap_container {
-                /*height: calc(100% - 244px);*/
-                /*width: calc(100% - 8px);*/
-                height: calc(100% - 48px);
-                width: 100%;
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                border-bottom: 0px;
-                position: relative;
-            }
-
-            #select_dataset_container #header {
-                position: relative;
-                z-index: 1;
-                -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-                -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-                box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-
-                background-color: #B6B6B6;
-                display: flex;
-                padding: 0px 4px;
-            }
-
-            #select_dataset_container #footer_list {
-                position: relative;
-                z-index: 1;
-                -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-                -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-                box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-            }
-
-            .noshadow {
-                -webkit-box-shadow: none !important;
-                -moz-box-shadow: none !important;
-                box-shadow: none !important;
-            }
-
-            #select_dataset_container #footer_list,
-            #select_dataset_container #footer_treemap {
-                width: 100%;
-                background-color: #B6B6B6;
-                display: flex;
-                padding: 0px 4px;
-            }
-
-            #select_dataset_container #url {
-                height: 76px;/*100*/
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                padding: 0px 16px;
-                margin-top: -4px;
-            }
-
-            #header .header_block {
-                width: 20%;
-                height: 40px;
-                padding: 4px 16px 4px 16px;
-            }
-
-            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
-                /*visibility: hidden;*/
-            /*}*/
-
-            #header .header_block:nth-child(4) {
-                text-align: center;
-            }
-
-            .footer_block {
-                width: calc((100% - 0px) / 3);
-                height: 24px;
-                padding: 12px 8px 12px 8px;
-                text-align: center;
-            }
-
-            .footer_block:nth-child(2) {
-                height: 48px;
-                padding: 0px 8px;
-            }
-
-            #suggested_div {
-                visibility: hidden;
-            }
-
-            /*.info_resource_name {*/
-                /*color: #2196F3;*/
-                /*font-weight: bold;*/
-                /*line-height: 48px;*/
-            /*}*/
-
-            /*#ortelio {*/
-                /*/!*height: calc(100% - 172px);*!/*/
-                /*/!*width: calc(100% - 8px);*!/*/
-                /*height: 100%;*/
-                /*width: 100%;*/
-                /*background-color: red;*/
-            /*}*/
-        </style>
-
-        <paper-material id="select_dataset_container" elevation="5">
-
-            <paper-tabs selected="{{selected}}" no-bar>
-                <paper-tab on-tap="_refreshList" noink><span id="listView"></span></paper-tab>
-                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
-                <paper-tab on-tap="_hideSearch" noink><span id="extendedSearch"></span></paper-tab>
-            </paper-tabs>
-
-            <div id="header">
-                <div class="header_block">
-                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
-                        <paper-menu class="dropdown-content" selected="0">
-                            <paper-item id="0" on-tap="_filter"></paper-item>
-                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
-                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
-                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
-                            </template>
-                        </paper-menu>
-                    </paper-dropdown-menu>
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                    <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
-                        <iron-icon class="search" icon="search" prefix></iron-icon>
-                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
-                    </paper-input>
-                </div>
-            </div>
-
-            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
-
-                <neon-animatable>
-                    <div id="list_info">
-                        <div id="list_container">
-                            <iron-list id="list" items="{{shownDatasets}}" selection-enabled>
-                                <template>
-                                    <div>
-                                        <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
-                                            <span style="display:none;">{{item.url}}</span>
-                                            <div class="pad">
-                                                <div class="primary">{{item.resource_name}}</div>
-                                                <!--<div class="longText">-->
-                                                    <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">-->
-                                                        <!--<b>{{mata.name}}:</b>-->
-                                                        <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>-->
-                                                    <!--</template>-->
-                                                <!--</div>-->
-                                            </div>
-                                            <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
-                                        </div>
-                                    </div>
-                                </template>
-                            </iron-list>
-                        </div>
-                        <div id="info_container">
-                            <div id="info">
-                            </div>
-                        </div>
-                    </div>
-
-                    <div id="footer_list">
-                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
-                        <div class="footer_block">
-                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
-                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
-                        </div>
-                        <div id="suggested_div" class="footer_block">
-                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
-                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
-                            <!--</template>-->
-                        </div>
-                    </div>
-                </neon-animatable>
-
-                <neon-animatable>
-                    <div id="treemap_container"></div>
-
-                    <div id="footer_treemap">
-                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
-                        <div class="footer_block"></div>
-                        <div class="footer_block"></div>
-                    </div>
-                </neon-animatable>
-
-                <neon-animatable>
-                    <!--<div id="ortelio">-->
-                        <ortelio-controllet datasets={{datasets}}></ortelio-controllet>
-                    <!--</div>-->
-                </neon-animatable>
-
-            </neon-animated-pages>
-
-            <div id="url">
-                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
-            </div>
-
-        </paper-material>
-
-    </template>
-
-    <script>
-        HTMLImports.whenReady(function() {
-            Polymer({
-                is: 'select-dataset-controllet',
-                properties: {
-                    datasets: {
-                        type: Object,
-                        value: undefined
-                    },
-                    filteredDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-                    shownDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-                    suggestedDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-
-                    providers : {
-                        type : Array,
-                        value : undefined
-                    },
-                    dataUrl : {
-                        type  : String,
-                        value : undefined,
-                        observer : '_fireDataUrl'
-                    },
-                    filter : {
-                        type  : String,
-                        value : "",
-                        observer : '_filter'
-                    },
-                    selected : {
-                        type  : Number,
-                        value : 0
-                    },
-                    prev : {type  : Number, value : undefined},
-                    next : {type  : Number, value : undefined},
-                    shownPrev : {type  : Number, value : undefined},
-                    shownNext : {type  : Number, value : undefined},
-                    length : {type  : Number, value : undefined},
-                    tLength : {type  : Number, computed : 'treemapLength(length)'},
-                    step : {type  : Number, value : 20},
-                    colors : {
-                        type : Array,
-                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
-                    }
-                },
-
-                listeners: {
-                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
-                },
-
-                ready : function() {
-                    $(this.$.list_container).perfectScrollbar();
-                    $(this.$.info).perfectScrollbar();
-
-//                    this.$.selected_url.invalid = true;
-                },
-
-                attached: function() {
-                    this._resize();
-                    var that = this;
-                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
-
-//                    this.providers = that.datasets["result"]["providers"];
-//                    this.datasets = that.datasets["result"]["datasets"];
-
-                    $.ajax({
-                        url: "/cocreation/ajax/get-all-dataset",
-                        dataType: "json",
-                        success: function(spodDatasets){
-
-                            that.providers = $.extend(that.datasets["result"]["providers"], {99: {api_url: "/cocreation/ajax/get-all-dataset", id: "99", image_hash: "SPOD", title: "SPOD"}});
-                            that.datasets = $.merge(spodDatasets, that.datasets["result"]["datasets"]);
-
-                            if(that.suggestedDatasets) {
-                                that.tempDatasets = that.datasets;
-                                that.datasets = that.suggestedDatasets.concat(that.datasets);
-                                that.$.suggested_div.style.visibility = "visible";
-                            }
-
-                            that.filteredDatasets = that.datasets;
-
-                            that.prev = 1;
-                            that.next = that.step;
-                            that.length = that.filteredDatasets.length;
-
-                            that.shownPrev = Math.min(that.prev, that.length);
-                            that.shownNext = Math.min(that.next, that.length);
-                            that.shownDatasets = that.filteredDatasets.slice(that.prev-1, that.next);
-
-                            that.$.list.scrollTarget = that.ownerDocument.documentElement;
-
-                            that._translate();
-
-                            that._loadTreeMap();
-                        }
-                    });
-                },
-
-                _translate : function(){
-                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
-                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
-                    this.$.extendedSearch.innerHTML = ln["extendedSearch_" + ln["localization"]];
-
-                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
-                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
-
-                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
-
-                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
-                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
-                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
-                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
-                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
-                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
-
-                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
-                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
-                },
-
-                showSuggested : function(e) {
-                    if(e.target.checked)
-                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
-                    else
-                        this.datasets = this.tempDatasets;
-                    this._filter();
-                },
-
-                _loadTreeMap : function(){
-                    var h = $("#neon_container").height() - 48;
-                    var w = $("#neon_container").width();
-
-                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
-
-                    if(this.filteredDatasets.length > 0)
-                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"provider_name\",\"organization_name\",\"package_name\",\"resource_name\",\"url\",\"w\",\"metas\"]'></datasetexplorer-datalet>";
-                    else
-                        this.$.treemap_container.innerHTML = "";
-                },
-
-                _filter : function() {
-                    if(this.filteredDatasets) {
-                        this.async(function () {
-                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                            var name = ddl_provider.innerHTML.trim();
-                            var id = this._getIdByProviderName(name);
-                            this.prev = 1;
-                            this.next = this.step;
-                            if (id) {
-                                //filtered by provider name
-                                this.filteredDatasets = this.datasets.filter(function (el) {
-                                    return el.provider_name == "p:" + id;
-                                });
-                            }
-                            else {
-                                this.filteredDatasets = this.datasets;
-                            }
-
-                            //filtered by filter
-                            var filter = this.filter;
-                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
-                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
-                            });
-
-                            this.length = this.filteredDatasets.length;
-
-                            this.shownPrev = Math.min(this.prev, this.length);
-                            this.shownNext = Math.min(this.next, this.length);
-                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-
-                            $("#list_container").animate({scrollTop: 0}, 0);
-
-                            this._loadTreeMap();
-                        }, 0);
-                    }
-                },
-
-                _refreshList : function() {
-                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-
-                    this.$.header.style.display = "flex";
-                    this.$.header.style.visibility = "visible";
-//                    this.$.url.style.marginTop = "-4px";
-
-                    this.$.header.className = this.$.header.className.replace(" noshadow", "");
-                },
-
-                _noShadow : function() {
-                    this.$.header.style.display = "flex";
-                    this.$.header.style.visibility = "visible";
-//                    this.$.url.style.marginTop = "-4px";
-
-                    this.$.header.className += " noshadow";
-                },
-
-                _hideSearch : function() {
-//                    this.$.header.style.display = "none";
-                    this.$.header.style.visibility = "hidden";
-//                    this.$.url.style.marginTop = "44px";
-                },
-
-                _clearInput : function() {
-                    this.$.datasets_filter.value = "";
-                },
-
-                _getIdByProviderName : function(name) {
-                    for(var id in this.providers) {
-                        if (this.providers[id].title == name)
-                            return this.providers[id].id;
-                    }
-                },
-
-//                iconForItem: function(item) {
-//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
-//                },
-
-                treemapLength : function(length) {
-                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                    var name = ddl_provider.innerHTML.trim();
-                    var id = this._getIdByProviderName(name);
-
-                    if(this.suggestedDatasets && !id)
-                        return Math.max(length - this.suggestedDatasets.length, 0);
-                    return length;
-                },
-
-                _getColorForIcon : function(item) {
-                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                    var name = ddl_provider.innerHTML.trim();
-                    var id = this._getIdByProviderName(name);
-                    if (id) {
-                        return this.colors[0];
-                    }
-                    if(!item.provider_name) {
-                        return "#00BCD4";
-                    }
-                    var id = item.provider_name.substring(2, item.provider_name.length);
-                    var i = this.getProviderById(id) % this.colors.length;
-                    return this.colors[i];
-                },
-
-                _getColorForItem : function(item) {
-//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-//                    var name = ddl_provider.innerHTML.trim();
-//                    var id = this._getIdByProviderName(name);
-//                    if (id) {
-//                        return this.colors[0];
-//                    }
-                    if(!item.provider_name) {
-                        return "#FFEB3B";
-                    }
-//                    var id = item.provider_name.substring(2, item.provider_name.length);
-//                    var i = this.getProviderById(id) % this.colors.length;
-//                    return this.colors[i];
-                },
-
-                _getIconForItem : function(item) {
-                    return item.provider_name ? 'bookmark' : 'star';
-                },
-
-//                _getProviderColor: function(id) {
-//                    var i = this.getProviderById(id) % this.colors.length;
-//                    return this.colors[i];
-//                },
-
-                getClassForItem: function(selected) {
-                    return selected ? 'item expanded' : 'item';
-                },
-
-                getProviderById: function(providerId) {
-                    var i = 0;
-                    for(var id in this.providers){
-                        if(this.providers[id].id == providerId)
-                            return i;
-                        i++;
-                    }
-                },
-
-                _onPrevClick : function(){
-                    if(this.prev != 1) {
-                        this.prev -= this.step;
-                        this.next -= this.step;
-
-                        this.shownPrev = Math.min(this.prev, this.length);
-                        this.shownNext = Math.min(this.next, this.length);
-                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-                    }
-                    $("#list_container").animate({ scrollTop: 0}, 0);
-                },
-
-                _onNextClick : function(){
-                    if(this.next < this.length) {
-                        this.prev += this.step;
-                        this.next += this.step;
-
-                        this.shownPrev = Math.min(this.prev, this.length);
-                        this.shownNext = Math.min(this.next, this.length);
-                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-                    }
-                    $("#list_container").animate({ scrollTop: 0}, 0);
-                },
-
-                _stringToArray: function(obj) {
-                    obj = JSON.parse(obj);
-                    return Object.keys(obj).map(function(key) {
-                        return {
-                            name: key,
-                            value: obj[key]
-                        };
-                    });
-                },
-
-                _toArray: function(obj) {
-                    return Object.keys(obj).map(function(key) {
-                        return {
-                            name: key,
-                            value: obj[key]
-                        };
-                    });
-                },
-
-                _selectDataUrl : function(){
-                    this.async(function () {
-                        if(this.$.list.selectedItem) {
-
-                            var metas = JSON.parse(this.$.list.selectedItem.metas);
-                            var html = "<span style=\"color: #2196F3; font-weight: bold;\">" + this.$.list.selectedItem.resource_name + "</span><br><br>";
-                            /*font-weight: bold;*/
-                            /*line-height: 48px;*/
-                            for(var i in metas)
-                                html += "<b>" + i + ":</b> " + metas[i] + "<br>";
-                            this.$.info.innerHTML = html;
-
-                            this.dataUrl = this.$.list.selectedItem.url;
-//                            var url = this.$.list.selectedItem.url;
-
-//                            url = utility_getResourceUrl(url);
-
-//                            // Check if CKAN
-//                            var strDatasetPos = url.indexOf('/dataset/');
-//                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
-//                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
-//                                var urlSegment1 = url.substring(0, strDatasetPos);
-//                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
-//                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
-//                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
-//                            }
-//
-//                            // Check if OPENDATASOFT
-//                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
-//                            if (strExploreDatasetPos >= 0) {
-//                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
-//                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
-//                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
-//                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
-//                            }
-
-//                            this.dataUrl = this._addlimitUrl(url);
-//                            this.dataUrl = url;
-                        }
-                        else {
-                            this.dataUrl = "";
-                            this.$.info.innerHTML = "";
-                        }
-                    }, 0);
-                },
-
-                _selectDataUrl_treeMap : function(e) {
-//                    this.dataUrl = this._addlimitUrl(e.detail.url);
-                    this.dataUrl = e.detail.url;
-                },
-
-                _fireDataUrl : function(){
-                    this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
-                },
-
-//                _addlimitUrl : function(url){
-//                    //CKAN --> action no limit
-//                    if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
-//                    {
-//                        url += "&limit=99999";
-//                    }
-//                    //OpenDataSoft --> action no limit
-//                    if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
-//                        url += "&rows=10000";
-//                    }
-//                    return url;
-//                },
-
-                _resize : function(){
-                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                    h = h - 64 - 8; //height with page scroller
-                    $("#select_dataset_container").height(h);
-                }
-            });
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html b/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
deleted file mode 100755
index 434758f..0000000
--- a/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
+++ /dev/null
@@ -1,728 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
-<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
-
-<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
-<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
-
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/paper-styles/color.html">
-<link rel="import" href="../../bower_components/paper-styles/typography.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-
-<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
-
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
-<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
-
-<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
-
-<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
-
-<dom-module id="select-dataset-controllet">
-    <template>
-        <style>
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #000000;
-             };
-            --paper-dropdown-menu-ripple: {
-                 color: #FFFFFF;
-             };
-            /*--paper-tab-ink: {*/
-                 /*color: #FFFFFF;*/
-             /*};*/
-            }
-
-            iron-list {
-            --iron-list-items-container: {
-                margin:16px 16px 8px 16px;
-             };
-            }
-
-            paper-textarea {
-                width: 100%;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input {
-                --paper-input-container-focus-color: #2196F3;
-            }
-            paper-dropdown-menu {
-                width: 100%;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-checkbox {
-                height: 24px;
-                /*margin-top: 8px*/
-                --paper-checkbox-checked-color: #2196F3;
-                --paper-checkbox-checked-ink-color: #FFFFFF;
-                --paper-checkbox-unchecked-color: #000000;
-                --paper-checkbox-unchecked-ink-color: #FFFFFF;
-                --paper-checkbox-label-color: #000000;
-            }
-
-            paper-icon-button{
-                height: 48px;
-                width: 48px;
-                padding: 0px;
-                --paper-icon-button-ink-color: #FFFFFF;
-            }
-
-            paper-icon-button:hover{
-                color: #2196F3;
-            }
-
-            paper-icon-button[disabled]{
-                color: #B6B6B6;
-            }
-
-            paper-icon-button.clear {
-                width: 24px;
-                height: 24px;
-                padding: 0px 4px;
-                color: #F44336;
-                --paper-icon-button-ink-color: #FFFFFF;
-            }
-
-            paper-tabs {
-                font-weight: bold;
-            }
-
-            paper-tab {
-                transition: all 1.0s;
-            }
-
-            paper-tab.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-tab:not(.iron-selected):hover {
-                color: #2196F3;
-            }
-
-            .item {
-                /*@apply(--layout-horizontal);*/
-                display: flex;
-                padding: 11px;
-                border: 1px solid #B6B6B6;
-                border-radius: 4px;
-                cursor: pointer;
-                margin-bottom: 8px;
-                background-color: #E0E0E0;
-            }
-
-            .pad {
-                @apply(--layout-flex);
-                /*@apply(--layout-vertical);*/
-            }
-
-            .primary {
-                font-weight: bold;
-            }
-
-            .item.expanded .primary {
-                color: #2196F3;
-            }
-
-            .longText {
-                display: none;
-            }
-
-            .item.expanded .longText {
-                display: block;
-            }
-
-            #select_dataset_container {
-                margin-top: 8px;
-            }
-
-            #select_dataset_container * {
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                line-height: 24px;
-            }
-
-            #select_dataset_container #neon_container {
-                height: calc(100% - 172px);
-                width: calc(100% - 8px);
-            }
-
-            #select_dataset_container #list_container {
-                /*height: calc(100% - 244px);*/
-                /*width: calc(100% - 8px);*/
-                height: calc(100% - 48px);
-                width: 100%;
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                border-bottom: 0px;
-                position: relative;
-            }
-
-            #select_dataset_container #treemap_container {
-                /*height: calc(100% - 244px);*/
-                /*width: calc(100% - 8px);*/
-                height: calc(100% - 48px);
-                width: 100%;
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                border-bottom: 0px;
-                position: relative;
-            }
-
-            #select_dataset_container #header {
-                position: relative;
-                z-index: 1;
-                -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-                -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-                box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
-
-                background-color: #B6B6B6;
-                display: flex;
-                padding: 0px 4px;
-            }
-
-            #select_dataset_container #footer_list {
-                position: relative;
-                z-index: 1;
-                -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-                -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-                box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
-            }
-
-            .noshadow {
-                -webkit-box-shadow: none !important;
-                -moz-box-shadow: none !important;
-                box-shadow: none !important;
-            }
-
-            #select_dataset_container #footer_list,
-            #select_dataset_container #footer_treemap {
-                width: 100%;
-                background-color: #B6B6B6;
-                display: flex;
-                padding: 0px 4px;
-            }
-
-            #select_dataset_container #url {
-                height: 76px;/*100*/
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                padding: 0px 16px;
-                margin-top: -4px;
-            }
-
-            #header .header_block {
-                width: 20%;
-                height: 40px;
-                padding: 4px 16px 4px 16px;
-            }
-
-            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
-                /*visibility: hidden;*/
-            /*}*/
-
-            #header .header_block:nth-child(4) {
-                text-align: center;
-            }
-
-            .footer_block {
-                width: calc((100% - 0px) / 3);
-                height: 24px;
-                padding: 12px 8px 12px 8px;
-                text-align: center;
-            }
-
-            .footer_block:nth-child(2) {
-                height: 48px;
-                padding: 0px 8px;
-            }
-
-            #suggested_div {
-                visibility: hidden;
-            }
-        </style>
-
-        <paper-material id="select_dataset_container" elevation="5">
-
-            <paper-tabs selected="{{selected}}" no-bar>
-                <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
-                <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
-                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
-            </paper-tabs>
-
-            <div id="header">
-                <div class="header_block">
-                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
-                        <paper-menu class="dropdown-content" selected="0">
-                            <paper-item id="0" on-tap="_filter"></paper-item>
-                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
-                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
-                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
-                            </template>
-                        </paper-menu>
-                    </paper-dropdown-menu>
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                </div>
-                <div class="header_block">
-                    <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
-                        <iron-icon class="search" icon="search" prefix></iron-icon>
-                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
-                    </paper-input>
-                </div>
-            </div>
-
-            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
-
-                <neon-animatable>
-                    <div id="list_container">
-                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
-                            <template>
-                                <div>
-                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
-                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
-                                        <span style="display:none;">{{item.url}}</span>
-                                        <div class="pad">
-                                            <div class="primary">{{item.resource_name}}</div>
-                                            <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
-                                            <div class="longText">
-                                                <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
-                                                    <b>{{mata.name}}:</b>
-                                                    <span inner-h-t-m-l="{{mata.value}}"></span> <br>
-                                                </template>
-                                            </div>
-                                        </div>
-                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
-                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
-                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
-                                    </div>
-                                </div>
-                            </template>
-                        </iron-list>
-                    </div>
-
-                    <div id="footer_list">
-                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
-                        <div class="footer_block">
-                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
-                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
-                        </div>
-                        <div id="suggested_div" class="footer_block">
-                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
-                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
-                            <!--</template>-->
-                        </div>
-                    </div>
-                </neon-animatable>
-
-                <neon-animatable>
-                    <div id="treemap_container"></div>
-
-                    <div id="footer_treemap">
-                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
-                        <div class="footer_block"></div>
-                        <div class="footer_block"></div>
-                    </div>
-                </neon-animatable>
-
-            </neon-animated-pages>
-
-            <div id="url">
-                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
-            </div>
-
-        </paper-material>
-
-    </template>
-
-    <script>
-        HTMLImports.whenReady(function() {
-            Polymer({
-                is: 'select-dataset-controllet',
-                properties: {
-                    datasets: {
-                        type: Object,
-                        value: undefined
-                    },
-                    filteredDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-                    shownDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-                    suggestedDatasets : {
-                        type : Array,
-                        value : undefined
-                    },
-
-                    providers : {
-                        type : Array,
-                        value : undefined
-                    },
-                    dataUrl : {
-                        type  : String,
-                        value : undefined,
-                        observer : '_fireDataUrl'
-                    },
-                    filter : {
-                        type  : String,
-                        value : "",
-                        observer : '_filter'
-                    },
-                    selected : {
-                        type  : Number,
-                        value : 0
-                    },
-                    prev : {type  : Number, value : undefined},
-                    next : {type  : Number, value : undefined},
-                    shownPrev : {type  : Number, value : undefined},
-                    shownNext : {type  : Number, value : undefined},
-                    length : {type  : Number, value : undefined},
-                    tLength : {type  : Number, computed : 'treemapLength(length)'},
-                    step : {type  : Number, value : 20},
-                    colors : {
-                        type : Array,
-                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
-                    }
-                },
-
-                listeners: {
-                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
-                },
-
-                ready : function() {
-                    $(this.$.list_container).perfectScrollbar();
-
-//                    this.$.selected_url.invalid = true;
-                },
-
-                attached: function() {
-                    this._resize();
-                    var that = this;
-                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
-
-                    this.providers = this.datasets["result"]["providers"];
-                    this.datasets = this.datasets["result"]["datasets"];
-
-                    if(this.suggestedDatasets) {
-                        this.tempDatasets = this.datasets;
-                        this.datasets = this.suggestedDatasets.concat(this.datasets);
-                        this.$.suggested_div.style.visibility = "visible";
-                    }
-
-                    this.filteredDatasets = this.datasets;
-
-                    this.prev = 1;
-                    this.next = this.step;
-                    this.length = this.filteredDatasets.length;
-
-                    this.shownPrev = Math.min(this.prev, this.length);
-                    this.shownNext = Math.min(this.next, this.length);
-                    this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
-
-                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
-
-                    this._translate();
-
-                    this._loadTreeMap();
-                },
-
-                _translate : function(){
-                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
-                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
-
-                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
-                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
-
-                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
-
-                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
-                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
-                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
-                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
-                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
-                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
-
-                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
-                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
-                },
-
-                showSuggested : function(e) {
-                    if(e.target.checked)
-                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
-                    else
-                        this.datasets = this.tempDatasets;
-                    this._filter();
-                },
-
-                _loadTreeMap : function(){
-                    var h = $("#neon_container").height() - 48;
-                    var w = $("#neon_container").width();
-
-                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
-
-                    if(this.filteredDatasets.length > 0)
-                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";
-                    else
-                        this.$.treemap_container.innerHTML = "";
-                },
-
-                _filter : function() {
-                    if(this.filteredDatasets) {
-                        this.async(function () {
-                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                            var name = ddl_provider.innerHTML.trim();
-                            var id = this._getIdByProviderName(name);
-                            this.prev = 1;
-                            this.next = this.step;
-                            if (id) {
-                                //filtered by provider name
-                                this.filteredDatasets = this.datasets.filter(function (el) {
-                                    return el.provider_name == "p:" + id;
-                                });
-                            }
-                            else {
-                                this.filteredDatasets = this.datasets;
-                            }
-
-                            //filtered by filter
-                            var filter = this.filter;
-                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
-                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
-                            });
-
-                            this.length = this.filteredDatasets.length;
-
-                            this.shownPrev = Math.min(this.prev, this.length);
-                            this.shownNext = Math.min(this.next, this.length);
-                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-
-                            $("#list_container").animate({scrollTop: 0}, 0);
-
-                            this._loadTreeMap();
-                        }, 0);
-                    }
-                },
-
-                _refreshList : function() {
-                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-                    this.$.header.className = this.$.header.className.replace(" noshadow", "");
-                },
-
-                _noShadow : function() {
-                    console.log(this.$.header);
-                    this.$.header.className += " noshadow";
-                },
-
-                _clearInput : function() {
-                    this.$.datasets_filter.value = "";
-                },
-
-                _getIdByProviderName : function(name) {
-                    for(var id in this.providers) {
-                        if (this.providers[id].title == name)
-                            return this.providers[id].id;
-                    }
-                },
-
-//                iconForItem: function(item) {
-//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
-//                },
-
-                treemapLength : function(length) {
-                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                    var name = ddl_provider.innerHTML.trim();
-                    var id = this._getIdByProviderName(name);
-
-                    if(this.suggestedDatasets && !id)
-                        return Math.max(length - this.suggestedDatasets.length, 0);
-                    return length;
-                },
-
-                _getColorForIcon : function(item) {
-                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-                    var name = ddl_provider.innerHTML.trim();
-                    var id = this._getIdByProviderName(name);
-                    if (id) {
-                        return this.colors[0];
-                    }
-                    if(!item.provider_name) {
-                        return "#00BCD4";
-                    }
-                    var id = item.provider_name.substring(2, item.provider_name.length);
-                    var i = this.getProviderById(id) % this.colors.length;
-                    return this.colors[i];
-                },
-
-                _getColorForItem : function(item) {
-//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
-//                    var name = ddl_provider.innerHTML.trim();
-//                    var id = this._getIdByProviderName(name);
-//                    if (id) {
-//                        return this.colors[0];
-//                    }
-                    if(!item.provider_name) {
-                        return "#FFEB3B";
-                    }
-//                    var id = item.provider_name.substring(2, item.provider_name.length);
-//                    var i = this.getProviderById(id) % this.colors.length;
-//                    return this.colors[i];
-                },
-
-                _getIconForItem : function(item) {
-                    return item.provider_name ? 'bookmark' : 'star';
-                },
-
-//                _getProviderColor: function(id) {
-//                    var i = this.getProviderById(id) % this.colors.length;
-//                    return this.colors[i];
-//                },
-
-                getClassForItem: function(selected) {
-                    return selected ? 'item expanded' : 'item';
-                },
-
-                getProviderById: function(providerId) {
-                    var i = 0;
-                    for(var id in this.providers){
-                        if(this.providers[id].id == providerId)
-                            return i;
-                        i++;
-                    }
-                },
-
-                _onPrevClick : function(){
-                    if(this.prev != 1) {
-                        this.prev -= this.step;
-                        this.next -= this.step;
-
-                        this.shownPrev = Math.min(this.prev, this.length);
-                        this.shownNext = Math.min(this.next, this.length);
-                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-                    }
-                    $("#list_container").animate({ scrollTop: 0}, 0);
-                },
-
-                _onNextClick : function(){
-                    if(this.next < this.length) {
-                        this.prev += this.step;
-                        this.next += this.step;
-
-                        this.shownPrev = Math.min(this.prev, this.length);
-                        this.shownNext = Math.min(this.next, this.length);
-                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
-                    }
-                    $("#list_container").animate({ scrollTop: 0}, 0);
-                },
-
-                _stringToArray: function(obj) {
-                    obj = JSON.parse(obj);
-                    return Object.keys(obj).map(function(key) {
-                        return {
-                            name: key,
-                            value: obj[key]
-                        };
-                    });
-                },
-
-                _toArray: function(obj) {
-                    return Object.keys(obj).map(function(key) {
-                        return {
-                            name: key,
-                            value: obj[key]
-                        };
-                    });
-                },
-
-                _selectDataUrl : function(){
-                    this.async(function () {
-                        if(this.$.list.selectedItem) {
-                            var url = this.$.list.selectedItem.url;
-
-                            // Check if CKAN
-                            var strDatasetPos = url.indexOf('/dataset/');
-                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
-                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
-                                var urlSegment1 = url.substring(0, strDatasetPos);
-                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
-                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
-                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
-                            }
-
-                            // Check if OPENDATASOFT
-                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
-                            if (strExploreDatasetPos >= 0) {
-                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
-                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
-                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
-                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
-                            }
-
-                            this.dataUrl = this._addlimitUrl(url);
-                        }
-                        else {
-                            this.dataUrl = "";
-                        }
-                    }, 0);
-                },
-
-                _selectDataUrl_treeMap : function(e) {
-                    this.dataUrl = this._addlimitUrl(e.detail.url);
-                },
-
-                _fireDataUrl : function(){
-                    this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
-                },
-
-                _addlimitUrl : function(url){
-                    //CKAN --> action no limit
-                    if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
-                    {
-                        url += "&limit=99999";
-                    }
-                    //OpenDataSoft --> action no limit
-                    if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
-                        url += "&rows=10000";
-                    }
-                    return url;
-                },
-
-                _resize : function(){
-                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                    h = h - 64 - 8; //height with page scroller
-                    $("#select_dataset_container").height(h);
-                }
-            });
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/demo.html b/demo.html
index 6b684a2..9fd0dc5 100755
--- a/demo.html
+++ b/demo.html
@@ -5,21 +5,18 @@
 
     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 
+    <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
+    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+
     <link rel="import"  href="bower_components/iron-component-page/iron-component-page.html">
-    <link rel="import"  href="bower_components/paper-item/paper-item.html">
-    <link rel="import"  href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
     <link rel="import"  href="bower_components/paper-icon-button/paper-icon-button.html">
-    <link rel="import"  href="bower_components/iron-flex-layout/iron-flex-layout.html">
 
-    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
     <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
 
-
     <script type="text/javascript">
         $(document).ready(function () {
             editAreaLoader.init({
-                id : "sbiricuda",         // textarea id
+                id : "text_area",         // textarea id
                 syntax: "html",           // syntax to be uses for highgliting
                 start_highlight: true,    // to display with highlight mode on start-up
                 replace_tab_by_spaces: 4,
@@ -51,118 +48,115 @@
 
             var dataletLink     = '<link rel="import" href="http://deep.routetopa.eu/deep_1_7/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
 
-            editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
+            editAreaLoader.setValue("text_area", dataletImport+dataletLink+dataletHTML);
         }
 
     </script>
 
-    <style>
+    <style is="custom-style">
+
+        #creator_container {
+            width: 100%;
+            height: 100%;
+        }
+
+        #creator_container * {
+            font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        #text_container {
+            padding: 8px;
+            background: #BBDEFB;
+
+            margin-top: 8px;
+        }
+
+        #controllet_iframe {
+            height: 100%;
+            width: 100%;
+        }
+
+        #iframe_container {
+            border: 2px solid #BBDEFB;
+            border-top: 0;
+            width: calc(100% - 4px);
+            height: 698px;
+        }
 
-        body {
-            font-family: 'Roboto', sans-serif;
+        #toolbar {
+            background: #2196F3;
         }
 
-        #toolbar{
-            background: #2196F3 ;
+        .title {
+            font-weight: 700 !important;
         }
 
         #logo{
-            width: 56px;
-            height: 56px;
-            background-image: url("http://spod.routetopa.eu/ow_static/themes/rtpa_matter/images/logo.png");
-            background-size: auto 41px;
+            width: 64px;
+            height: 64px;
+            background-image: url("http://spod.routetopa.eu/ow_static/themes/spod_theme_matter/images/logo.png");
             background-repeat: no-repeat;
             background-position: center center;
+        }
+
+        paper-icon-button {
+            --paper-icon-button-ink-color: #FFFFFF;
+            height: 48px;
+            width: 48px;
+            padding: 8px;
+        }
+
+        a {
+            color: #FFFFFF;
+            text-decoration: none;
+        }
+        #text_area_container {
+            width: 100%;
+            height: calc(100vh - 884px);
+            min-height: 192px;
 
+            margin-top: 8px;
+            /*background: red;*/
         }
+
+        #text_area {
+            width: calc(100% - 18px);
+            height: calc(100% - 18px);
+            margin: 0;
+            padding: 8px;
+        }
+
     </style>
 
 </head>
 <body>
 
-    <paper-toolbar id="toolbar">
-        <paper-menu-button>
-            <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
-            <paper-menu class="dropdown-content">
-                <paper-item><a href="http://routetopa.eu/" target="_blank">ROUTE-TO PA European Project</a></paper-item>
-                <paper-item><a href="docs/docs.html" target="_blank">DEEP Documentation</a></paper-item>
-            </paper-menu>
-        </paper-menu-button>
-        <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
-        <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
-    </paper-toolbar>
-
-    <div class="">
-        <p>
+    <div id="creator_container">
+
+        <paper-toolbar id="toolbar">
+            <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" title="ROUTE-TO PA European Project"></paper-icon-button></a>
+            <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
+            <a href="docs/docs.html" target="_blank"><paper-icon-button icon="description" title="DEEP Documentation"></paper-icon-button></a>
+            <a href="http://routetopa.eu/" target="_blank"><paper-icon-button icon="forward" title="ROUTE-TO PA European Project"></paper-icon-button></a>
+        </paper-toolbar>
+
+        <div id="text_container">
             Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
             query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
             Datalet are reusable since they can be placed in every web page, like institutional web-sites,
             blogs, forums and so on, without any knowledge on how it effectively is implemented.
-        </p>
-    </div>
+        </div>
 
-    <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
-        <head>
-            <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-            <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
-            <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
-            <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-            <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-            <script type="text/javascript">
-                $(document).ready(function () {
-
-                    var datasets = [
-                        {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
-                        {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
-                        {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
-                        {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
-                        {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
-                        {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
-                        {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
-                        {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
-                        {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
-                        {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
-                        {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
-                        {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
-                        {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
-                        {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
-                        {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
-                        {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
-                        {decription:"", name:"Issy -  3d pie chart", url:"https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"}
-                    ];
-
-                    var dsc = document.getElementById("dsc");
-                    dsc.setAttribute("datasets", JSON.stringify(datasets));
-
-                    $("#treeMapView").parent().parent().hide();
-                    window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
-
-                    /*var h = $("#material_container").height() - 48;
-                    var w = $("#material_container").width();
-                    console.log($("#div_datasetexplorer"));
-                    console.log($("#div_datasetexplorer").html());
-                    $("#div_datasetexplorer").html("CIAO !!");
-                    console.log($("#div_datasetexplorer").html());
-                    $("#div_datasetexplorer").html("<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"http://spod.routetopa.eu/openwall/api/datasetTree\" fields=\"[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]\"></datasetexplorer-datalet>");
-                    console.log($("#div_datasetexplorer").html());*/
-                });
-            </script>
-        </head>
-        <body>
-            <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/deep_1_7/DEEP/" datalets-list-url="http://deep.routetopa.eu/deep_1_7/DEEP/datalets-list"></data-sevc-controllet>
-        </body>
-    '>
-    </iframe>
-
-    <div id="code_area">
-        <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
-Copy and paste this code to inject the datalet in you page.
-        </textarea>
-    </div>
+        <div id="iframe_container">
+            <iframe id="controllet_iframe" frameborder="0" src="./controllet.html"></iframe>
+        </div>
 
-    <!--<div>
-        <textarea style="width: 90%; margin-left:10px; height: 110px"  id="code-textarea"></textarea>
-    </div>-->
+        <div id="text_area_container">
+            <textarea id="text_area">Copy and paste this code to inject the datalet in you page.</textarea>
+        </div>
+    </div>
 
 </body>
 </html>
\ No newline at end of file
--
libgit2 0.21.4