From e0e4a976d80f2a0c8112e9e5d009c1bbaf86dfb6 Mon Sep 17 00:00:00 2001
From: Renato De Donato <renato@isislab01.isis.lab>
Date: Thu, 26 Nov 2015 15:26:56 +0100
Subject: [PATCH] data-sevc-controlled: MODIFY-view + michellaneus

---
 controllets/data-sevc-controllet/data-sevc-controllet.html                         |  67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++------------
 controllets/data-sevc-controllet/data-sevc-controllet_ddr.html                     | 124 ----------------------------------------------------------------------------------------------------------------------------
 controllets/data-sevc-controllet/demo/index.html                                   |   3 +++
 controllets/datalet-selection-controllet/datalet-selection-controllet.html         | 285 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------
 controllets/dataset-selection-controllet/dataset-selection-controllet.html         | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
 controllets/dataset-selection-controllet/paper-input-search.html                   |   4 ++--
 controllets/items-vslider-controllet/items-vslider-controllet.html                 |  22 ++++++++++++++++++++--
 controllets/items-vslider-controllet/items-vslider-controllet2.html                | 299 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/items-vslider-controllet/items-vslider-controllet3.html                | 458 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/multi-table-controllet/multi-table-controllet.html                     |   2 +-
 controllets/page-slider-controllet/page-slider-controllet.html                     |  11 +++++++++++
 controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html |   4 ++--
 datalets/dynamic-datatable-datalet/datatable-datalet.html                          | 141 ---------------------------------------------------------------------------------------------------------------------------------------------
 datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html                  | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 14 files changed, 502 insertions(+), 1175 deletions(-)
 delete mode 100755 controllets/data-sevc-controllet/data-sevc-controllet_ddr.html
 delete mode 100755 controllets/items-vslider-controllet/items-vslider-controllet2.html
 delete mode 100755 controllets/items-vslider-controllet/items-vslider-controllet3.html
 delete mode 100755 datalets/dynamic-datatable-datalet/datatable-datalet.html
 create mode 100755 datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html

diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 6010de7..8330826 100755
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -19,20 +19,20 @@
         <page-slider-controllet id="slider">
 
             <neon-animatable>
-
-                <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
-
+                <template is="dom-if" if={{!modify}}>
+                    <dataset-selection-controllet id="dataset_selection" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>
+                </template>
             </neon-animatable>
 
             <neon-animatable>
 
-                <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}}></tree-view-multi-table-controllet>
+                <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}} preselected-fields={{selectedFields}}></tree-view-multi-table-controllet>
 
             </neon-animatable>
 
             <neon-animatable>
 
-                <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} fields={{fields}}></datalet-selection-controllet>
+                <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}}></datalet-selection-controllet>
 
             </neon-animatable>
 
@@ -69,6 +69,11 @@
                     value : undefined
                 },
 
+                suggestedDatasets : {
+                    type : Array,
+                    value : undefined
+                },
+
                 dataUrl : {
                     type  : String,
                     value : undefined
@@ -77,11 +82,38 @@
                 jsonData : {
                     type  : Object,
                     value : undefined
+                },
+
+                modify : {
+                    type  : Boolean,
+                    value : false
+                },
+
+                selectedDatalet : {
+                    type  : String,
+                    value : undefined
+                },
+
+                selectedFields : {
+                    type  : Array,
+                    value : []
+                },
+
+                dataletPreset : {
+                    type  : Object,
+                    value : []
                 }
 
             },
 
             ready : function(){
+                if(this.selectedDatalet){
+                    this.modify = true;
+                    this.$.slider.selected = 1;
+//                    console.log(this.selectedDatalet);
+                    this.dataUrl = this.dataletPreset["data-url"];
+
+                }
             },
 
             _updateSlider : function(e){
@@ -90,18 +122,27 @@
                         slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
                         slider.chevronLeft("invisible");
                         slider.chevronRight(false);
-                        this.$.dataset_selection._fireDataUrl();
-//                        http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
-                                break;
+                        if(slider.getPrevSelected() == 1)
+                            slider.chevronRight(true);
+
+//                        this.$.dataset_selection._fireDataUrl();
+//                        console.log(this.$.dataset_selection);
+                        break;
                     case 1:
-                        slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
-                        slider.chevronLeft(true);
+                        slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
+                        if(this.modify){
+                            slider.chevronLeft("invisible");
+                            slider.setAvatar("2");
+                        }
+                        else{
+                            slider.chevronLeft(true);
+                        }
                         slider.chevronRight(false);
                         this.$.tree_view_multi_table.ready();
-                        this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}})
+                        this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
                         break;
                     case 2:
-                        slider.setTitle("SELECT DATALET", "Select a visualization, fill out inputs and labels (optional).");
+                        slider.setTitle("SELECT VISUALIZATION", "Select a visualization, fill out inputs and labels (optional).");
                         slider.chevronLeft(true);
                         slider.chevronRight("invisible");
                             //reset when?
@@ -126,6 +167,8 @@
                         slider.chevronRight(false);
                     }
                 });
+
+                this.$.datalet_selection.reset();
             },
 
             _allowThirdStep : function(e){
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet_ddr.html b/controllets/data-sevc-controllet/data-sevc-controllet_ddr.html
deleted file mode 100755
index 975f416..0000000
--- a/controllets/data-sevc-controllet/data-sevc-controllet_ddr.html
+++ /dev/null
@@ -1,124 +0,0 @@
-/********************************************************************************************************************************
-<!--<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="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
-<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
-<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" />
-
-<dom-module id="data-sevc-controllet">
-
-    <template>
-
-        <page-slider-controllet id="slider">
-
-            <neon-animatable>
-
-                <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
-
-            </neon-animatable>
-
-            <neon-animatable>
-
-                <tree-view-multi-table-controllet id="tree_view_multi_table" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>
-
-            </neon-animatable>
-
-            <neon-animatable>
-                <div class="page" style="background-color: #BBDEFB;"><p>Pagina due</p><p>Page two</p><p>P&aacute;gina dos</p></div>
-            </neon-animatable>
-
-        </page-slider-controllet>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'data-sevc-controllet',
-
-            listeners : {
-                'page-slider-controllet_selected' : '_updateSlider',
-                'dataset-selection-controllet_data-url' : '_updateDataUrl'
-            },
-
-            properties : {
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String ,
-                    value : undefined
-                },
-
-                datasets : {
-                    type : Array,
-                    value : undefined
-                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined
-                },
-
-                jsonData : {
-                    type  : Object,
-                    value : undefined
-                }
-
-            },
-
-            ready : function(){
-            },
-
-            _updateSlider : function(e){
-                switch (e.detail.selected) {
-                    case 0:
-                        slider.setTitle("SELECT DATASET", "Select, copy and paste or search the url of dataset.");
-                        slider.chevronLeft(false);
-                        slider.chevronRight(false);
-                        this.$.dataset_selection._fireDataUrl();
-                        http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
-                        break;
-                    case 1:
-                        slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
-                        slider.chevronRight(false);
-                        this.$.tree_view_multi_table.ready();
-                        break;
-                    case 2:
-                        slider.setTitle("SELECT DATALET", "Sbiricuda antani siempre!");
-                }
-            },
-
-            _updateDataUrl : function(e){
-                this.dataUrl = e.detail.url;
-
-                $.ajax({
-                    url: e.detail.url,
-                    dataType: "json",
-                    success: function(data){
-//                        this.dataUrl = e.detail.url
-//                        this.jsonData = JSON.stringify(data);
-                        slider.chevronRight(true);
-                    },
-                    error: function(){
-//                        this.jsonData = undefined;
-                        slider.chevronRight(false);
-                    }
-                });
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/data-sevc-controllet/demo/index.html b/controllets/data-sevc-controllet/demo/index.html
index 38b5160..0335139 100755
--- a/controllets/data-sevc-controllet/demo/index.html
+++ b/controllets/data-sevc-controllet/demo/index.html
@@ -39,9 +39,12 @@
     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 s_datasets = [dataset1, dataset3];
 
     var dsc = document.getElementById('dsc');
     dsc.setAttribute("datasets", JSON.stringify(datasets));
+
+    dsc.setAttribute("suggested-datasets", JSON.stringify(s_datasets));
 </script>
 
 </body>
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
index 6b3d76d..679a49b 100755
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
@@ -23,6 +23,11 @@
     <template>
 
         <style is="custom-style">
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #2196F3;
+             };
+            }
 
             #datalet_selection_container {
                 display: flex;
@@ -35,14 +40,16 @@
                 position: relative;
                 height: 100vh;
                 margin-left: 32px;
-                width: 344px;
+                /*width: 344px;*/
+                min-width: 258px;
             }
 
             #datalet_selection_labels {
                 position: relative;
                 height: 100vh;
                 margin-left: 32px;
-                width: 344px;
+                /*width: 344px;*/
+                min-width: 258px;
             }
 
             #datalet_selection_column {
@@ -62,6 +69,7 @@
 
             #datalet_selection_comment{
                 width: 100%;
+                /*height: 112px;*/
                 margin-bottom: 32px;
             }
 
@@ -75,39 +83,54 @@
                 /*margin-right: 16px;*/
             }
 
-            .input_name{
-                height: 16px;
-                padding: 16px;
-                /*background-color: #B6B6B6;*/
+            /*.input_name{*/
+                /*height: 16px;*/
+                /*padding: 16px;*/
+                /*/!*background-color: #B6B6B6;*!/*/
 
-                background-color: #2196F3;
-                color: #FFFFFF;
-                font-weight: 700;
-            }
+                /*background-color: #2196F3;*/
+                /*color: #FFFFFF;*/
+                /*font-weight: 700;*/
+            /*}*/
 
             .input_header{
-                /*height: 16px;*/
-                padding: 16px;
+                height: 32px;
+                padding-top: 16px;
+                /*padding: 16px;*/
                 background-color: #B6B6B6;
                 text-align: center;
                 font-weight: 700;
             }
 
             .info_button {
+                /*background-color: red;*/
                 position: absolute;
-                top: 4px;
+                top: 18px;
                 right: 0px;
             }
 
             paper-textarea {
+                display: inline-block;
                 height: 48px;
-                padding: 0px 8px;
+                /*padding: 0px 8px;*/
+                width: 210px;
+                padding-left: 8px;
+                padding-bottom: 8px;
                 --paper-input-container-focus-color: #2196F3;
             }
 
+            #datalet_selection_comment paper-textarea {
+                padding-bottom: 0px;
+                width: calc(100% - 16px);
+            }
+
             paper-dropdown-menu {
+                /*display: inline-block;*/
                 height: 48px;
-                padding: 0px 8px;
+                width: 210px;;
+                /*padding: 0px 8px;*/
+                padding-left: 8px;
+                padding-bottom: 8px;
                 --paper-input-container-focus-color: #2196F3;
             }
 
@@ -117,9 +140,11 @@
             }
 
             paper-icon-button {
-                /*color: #2196F3;*/
-                color: #FFFFFF;
+                /*display: inline-block;*/
+                color: #2196F3;
+                /*color: #FFFFFF;*/
                 --paper-icon-button-ink-color: #2196F3;
+                margin: 0px;
                 /*padding: 0px;*/
             }
 
@@ -149,26 +174,29 @@
         <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
 
         <div id="datalet_selection_container">
-            <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet>
+            <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
 
 
             <paper-material id="datalet_selection_inputs" elevation="5">
                 <div class="input_header">INPUTS</div>
-                <template is="dom-repeat" items="{{inputs}}" index-as="index">
+                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
                     <div class="inputs">
-                        <div class="input_name">
-                            {{item.name}}
-                            <div class="info_button">
-                                <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
-                            </div>
-                        </div>
-                        <paper-dropdown-menu no-label-float label={{item.name}}>
+                        <!--<div class="input_name">-->
+                            <!--{{item.name}}-->
+                            <!--<div class="info_button">-->
+                                <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
                             <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{selectableFields}}>
-                                    <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item>
+                                <template is="dom-repeat" items={{fields}}>
+                                    <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
                                 </template>
                             </paper-menu>
                         </paper-dropdown-menu>
+                        <div class="info_button">
+                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
+                        </div>
                     </div>
                 </template>
             </paper-material>
@@ -177,23 +205,29 @@
                 <div class="input_header">LABELS</div>
                 <template is="dom-repeat" items="{{labels}}" index-as="index">
                     <div class="inputs">
-                        <div class="input_name">
-                            {{item.name}}
-                            <div class="info_button">
-                                <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
-                            </div>
+                        <!--<div class="input_name">-->
+                            <!--{{item.name}}-->
+                            <!--<div class="info_button">-->
+                                <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <paper-textarea label={{item.name}}></paper-textarea>
+                        <div class="info_button">
+                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                         </div>
-                        <paper-textarea no-label-float label={{item.name}}></paper-textarea>
                     </div>
                 </template>
             </paper-material>
 
 
             <div id="datalet_selection_column">
-                <paper-material id="datalet_selection_comment" elevation="5">
-                    <div class="input_header">COMMENT</div>
-                    <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
-                </paper-material>
+
+                <template is="dom-if" if={{modify}}>
+                    <paper-material id="datalet_selection_comment" elevation="5">
+                        <div class="input_header">COMMENT</div>
+                        <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
+                    </paper-material>
+                </template>
 
                 <paper-material id="datalet_selection_datalet" elevation="5">
                     <div class="input_header">DATALET PREVIEW</div>
@@ -232,6 +266,11 @@
                     value : undefined
                 },
 
+                preselectedDatalet : {
+                    type  : String,
+                    value : undefined
+                },
+
                 inputs : {
                     type : Array,
                     value : []
@@ -252,20 +291,25 @@
                     value : []
                 },
 
-                selectableFields : {
-                    type : Array,
-                    value : []
-                },
+//                selectableFields : {
+//                    type : Array,
+//                    value : []
+//                },
 
                 dataUrl : {
                     type  : String,
                     value : undefined
+                },
+
+                modify : {
+                    type  : Boolean,
+                    value : false
                 }
 
             },
 
             listeners: {
-                'items-vslider-controllet_selected-datalet': '_dataletSelected'
+                'items-vslider-controllet_selected-datalet': '_selectDatalet'
 //                'tree-view-controllet_selected-fields': '_updateSelectedFields'
             },
 
@@ -275,20 +319,38 @@
                 $(this.$.datalet_selection_labels).perfectScrollbar();
                 $(this.$.datalet_selection_datalet).perfectScrollbar();
 
-                this.selectableFields = this._copy(this.fields);
+                if(this.preselectedDatalet){
+                    this.modify = true;
+                    this._preselectDatalet();
+                    this.preselectedDatalet = undefined;
+                }
             },
 
             attached : function() {
                 this._resize();
                 var that = this;
                 window.addEventListener("resize", function() { that._resize(); });
+
+//                var inputs = document.getElementsByTagName("paper-dropdown-menu");
+//                console.log(inputs);
+//                for(var i in inputs)
+//                    console.log(i);
+//                for(var i=0; i < inputs.length; i++)
+//                    console.log($(inputs[i]).children("paper-menu"));
             },
 
             setFields : function(fields) {
                 this.fields = fields;
             },
 
-            _dataletSelected : function(e){
+            reset : function() {
+                this.selectedDatalet = undefined;
+                this.inputs = [];
+                this.labels = [];
+                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
+            },
+
+            _selectDatalet : function(e){
                 this.$.add_button.setAttribute("disabled", "true");
 
                 this.selectedDatalet = e.detail.datalet;
@@ -304,19 +366,27 @@
 //                    this.labels = [];
 //                }
 
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-                this.selectedFields = [];
-                this.selectableFields =  this._copy(this.fields);
+//                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
+//                this.selectedFields = [];
+            },
 
-//                this.async(function(){this._loadPreview();}, 1000);
-                this._loadPreview();
+            _preselectDatalet : function() {
+                this.$.add_button.innerText = "MODIFY DATALET";
+
+
+                this.selectedDatalet = this.preselectedDatalet;
+                this.selectedFields = this._copy(this.fields);
+
+                var inputs = document.getElementsByTagName("paper-dropdown-menu");
+                for(var i=0; i < inputs.length; i++)
+                    $(inputs[i]).find("paper-menu")[0].select(i);
+
+                this._loadDatalet(this.selectedFields);
             },
 
             _handleSelectedDatalet : function(e){
+                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
 
-
-//                console.log(e.detail.response.idm.inputs);
-//                console.log(e.detail.response.idm.inputs.layouts.input);
                 var inputs = e.detail.response.idm.inputs.input;
                 var labels = e.detail.response.idm.inputs.layouts.input;
 
@@ -327,78 +397,70 @@
                     inputs = [];
                     for(var i in this.fields)
                         inputs.push({name: name + " " + i, description: description, selection: selection});
-
                 }
 
                 this.inputs = inputs;
                 this.labels = labels;
-            },
 
-            _copy : function(o) {
-                var out, v, key;
-                out = Array.isArray(o) ? [] : {};
-                for (key in o) {
-                    v = o[key];
-                    out[key] = (typeof v === "object") ? this._copy(v) : v;
-                }
-                return out;
+//                if(this.inputs[0].selection == "*")
+//                    this.selectedFields = [];
+//                else
+                    this.selectedFields = new Array(inputs.length);
             },
 
-            _loadDatalet : function(e){
+            _addInput : function(e){
                 var selectedFields = this._copy(this.selectedFields);
-                var selectableFields = this._copy(this.selectableFields);
-
-                if($(e.target).parents("paper-dropdown-menu")[0].selectedItem) {
-                    var prevSelected = $(e.target).parents("paper-dropdown-menu")[0].selectedItem.innerText;
-                    var index = this.selectedFields.indexOf(prevSelected);
-                    selectedFields.splice(index, 1);
-//                    selectableFields.push(prevSelected);
-                }
 
-                var selected = e.target.innerText;
-//                var index = this.selectableFields.indexOf(selected);
-//                selectableFields.splice(index, 1);
-                selectedFields.push(selected);
+                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
+                selectedFields[index] = e.target.innerText;
 
-                this.selectedFields = selectedFields;
-                this.selectableFields = selectableFields;
+                this.selectedFields = this._copy(selectedFields);
 
-                console.log(this.selectedFields);
-                console.log(this.selectableFields);
+                var load = true;
 
-                var load = false;
-                if(this.selectedFields.length > 0 && this.inputs[0].selection == "*")
-                    load = true;
-                else if(this.selectedFields.length == this.inputs.length)
-                    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){
-                    var params = {'data-url' : this.dataUrl};
+                    this._loadDatalet(selectedFields);
+                }
 
-                    var dataletParams ={
-                        component   : this.selectedDatalet+"-datalet",
-                        params      : params,
-                        fields      : this.selectedFields,
-                        placeHolder : datalet_selection_datalet_placeholder
-                    };
+//                $("#base_datalet_container").html("");
+//                $("#base_datalet_container").css('visibility','hidden');
+//                $("#base_datalet_container").css('padding','0px');
+//                $("#base_datalet_container").css('height','0px');
+//                console.log($("#base_datalet_container"));
+            },
 
-                    ComponentService.deep_url = this.deepUrl;
-                    ComponentService.getComponent(dataletParams);
+            _loadDatalet : function(selectedFields){
+                var params = {'data-url' : this.dataUrl};
 
-                    this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
-                }
+                var dataletParams ={
+                    component   : this.selectedDatalet+"-datalet",
+                    params      : params,
+                    fields      : selectedFields,
+                    placeHolder : this.$.datalet_selection_datalet_placeholder
+                };
 
-//                this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'>we";
-//                this.$.datalet_selection_datalet_placeholder.innerHTML = "<"+this.selectedDatalet+"-datalet data-url=\""+this.dataUrl+"\" fields='"+JSON.stringify(this.fields)+"'></"+this.selectedDatalet+">";
+                ComponentService.deep_url = this.deepUrl;
+                ComponentService.getComponent(dataletParams);
 
-//                $("#base_datalet_container").html("");
-                $("#base_datalet_container").css('visibility','hidden');
-                $("#base_datalet_container").css('padding','0px');
-                $("#base_datalet_container").css('height','0px');
-//                console.log($("#base_datalet_container"));
+                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
             },
 
-            _addDatalet : function(){console.log("we");
+            _addDatalet : function(){
 
                 var data = {
                     dataUrl : this.dataUrl,
@@ -414,6 +476,16 @@
 
             },
 
+            _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;
+            },
+
             _resize : function(){
                 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                 h = h - 64 - 8; //height with page scroller
@@ -422,7 +494,10 @@
 
                 $("#datalet_selection_inputs").height(h);
                 $("#datalet_selection_labels").height(h);
-                $("#datalet_selection_datalet").height(h-132);
+                if(this.modify)
+                    $("#datalet_selection_datalet").height(h-128);
+                else
+                    $("#datalet_selection_datalet").height(h);
             }
 
         });
diff --git a/controllets/dataset-selection-controllet/dataset-selection-controllet.html b/controllets/dataset-selection-controllet/dataset-selection-controllet.html
index eb47454..f5fe723 100755
--- a/controllets/dataset-selection-controllet/dataset-selection-controllet.html
+++ b/controllets/dataset-selection-controllet/dataset-selection-controllet.html
@@ -33,6 +33,12 @@
     <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;
@@ -56,11 +62,16 @@
                 color: #B6B6B6;
             }
 
-            /*paper-dropdown-menu {*/
-                /*width: 45%;*/
-                /*margin-bottom: 32px;*/
-                /*--paper-input-container-focus-color: #2196F3;*/
-            /*}*/
+            paper-dropdown-menu {
+                /*display: block;*/
+                width: 45%;
+                margin-bottom: 32px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-dropdown-menu paper-item {
+                white-space: nowrap;
+            }
 
             paper-input-search {
                 width: 45%;
@@ -77,10 +88,21 @@
                 color: #FFFFFF;
             }
 
-            paper-menu{
-                /*visibility: visible ! important;*/
+            .ddl_container {
+                position: relative;
             }
 
+            .info_button {
+                /*background-color: red;*/
+                position: absolute;
+                top: 18px;
+                left: 45%;
+            }
+
+            /*paper-menu{*/
+                /*/!*visibility: visible ! important;*!/*/
+            /*}*/
+
             /*paper-item[focused] {*/
                 /*background: #FFFFFF;*/
             /*}*/
@@ -129,7 +151,7 @@
         <paper-material id="material_container" elevation="5">
 
             <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap">
-                <paper-tab noink>SELECT DATA SOURCE</paper-tab>
+                <paper-tab noink>LIST VIEW</paper-tab>
                 <paper-tab noink>TREE MAP VIEW</paper-tab>
                 <paper-tab noink disabled>MOST POPULAR</paper-tab>
             </paper-tabs>
@@ -139,20 +161,42 @@
                 <neon-animatable>
 
                     <div id="div_selection">
+                        <div class="ddl_container">
+                            <paper-input-search id="input_search" 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>
+                                        <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(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 label="Suggested datasets">
+                                    <paper-menu class="dropdown-content">
+                                        <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
+                                            <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
+                                            <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(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-input-search 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>
-                                    <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
-                                </template>
-                            </paper-menu>
-                        </paper-input-search>
-
-                        <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
-                            <!--aggiustami anche dialog...-->
                         <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
 
+                        <!--aggiustami anche dialog...-->
                         <paper-dialog id="dialog_info">
                             <h2 id="dialog_name"></h2>
                             <p id="dialog_description"></p>
@@ -163,11 +207,13 @@
 
                 <neon-animatable>
                     <div id="div_datasetexplorer">
-                        <datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
+                        <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
+                        <!--<datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>-->
                     </div>
                 </neon-animatable>
 
                 <neon-animatable>
+                    <!--popular-->
                 </neon-animatable>
 
             </neon-animated-pages>
@@ -199,6 +245,11 @@
                     value : []
                 },
 
+                suggestedDatasets : {
+                    type : Array,
+                    value : undefined
+                },
+
                 dataUrl : {
                     type  : String,
                     value : undefined,
@@ -224,6 +275,12 @@
                 this.filteredDatasets = this.datasets;
             },
 
+            _isSuggested : function(){
+                if(this.suggestedDatasets)
+                    return true;
+                return false;
+            },
+
             _filterDatasets : function(e){
                 var filter = e.detail.inputValue;
                 var filteredDatasets = [];
@@ -236,8 +293,8 @@
             },
 
             _loadTreeMap : function(){
-                if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")
-                    this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
+//                if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")
+//                    this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
             },
 
             _selectDataUrl_treeMap : function(e){
@@ -258,15 +315,16 @@
             _selectDataUrl : function(e){
                 var dataset = this.filteredDatasets[parseInt(e.target.id)]
 
+//                this.$.input_search.value = "";
                 this.dataUrl = dataset.url;
 
-                if(dataset.description != ""){
-                    this.$.info_button.removeAttribute("disabled");
-                    this.$.dialog_name.innerHTML = dataset.name;
-                    this.$.dialog_description.innerHTML = dataset.description;
-                }
-                else
-                    this.$.info_button.setAttribute("disabled", "true");
+//                if(dataset.description != ""){
+//                    this.$.info_button.removeAttribute("disabled");
+//                    this.$.dialog_name.innerHTML = dataset.name;
+//                    this.$.dialog_description.innerHTML = dataset.description;
+//                }
+//                else
+//                    this.$.info_button.setAttribute("disabled", "true");
             },
 
             _showInfo : function(){
diff --git a/controllets/dataset-selection-controllet/paper-input-search.html b/controllets/dataset-selection-controllet/paper-input-search.html
index 929d144..1730302 100755
--- a/controllets/dataset-selection-controllet/paper-input-search.html
+++ b/controllets/dataset-selection-controllet/paper-input-search.html
@@ -321,13 +321,13 @@ respectively.
                 }
             },
 
-            _fireInputValue: function() {console.log(this.inputValue);
+            _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");
+//                        console.log("deselected");
                     }
                 }
 
diff --git a/controllets/items-vslider-controllet/items-vslider-controllet.html b/controllets/items-vslider-controllet/items-vslider-controllet.html
index 9455bce..a7f0884 100755
--- a/controllets/items-vslider-controllet/items-vslider-controllet.html
+++ b/controllets/items-vslider-controllet/items-vslider-controllet.html
@@ -108,7 +108,7 @@
 
         <paper-material id="items_vslider_container" elevation="5">
 
-            <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search datalet">
+            <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search">
                 <iron-icon class="search" icon="search" prefix></iron-icon>
                 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button>
             </paper-input>
@@ -152,6 +152,11 @@
                     value : undefined
                 },
 
+                preselectedDatalet : {
+                    type  : String,
+                    value : undefined
+                },
+
                 datalets : {
                     type  : Array,
                     value : []
@@ -182,6 +187,11 @@
 //                this._resize();
 //                var that = this;
 //                window.addEventListener("resize", function() { that._resize(); });
+
+                if(this.preselectedDatalet){
+                    this._preselectDatalet();
+                    this.preselectedDatalet = undefined;
+                }
             },
 
             _clearInput : function() {
@@ -238,7 +248,7 @@
                     dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
                 }
 
-                if(e.currentTarget.id != this.selectedDatalet){
+                if (e.currentTarget.id != this.selectedDatalet) {
                     e.currentTarget.elevation = "5";
                     e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected";
                     this.selectedDatalet = e.currentTarget.id;
@@ -249,6 +259,14 @@
                 this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
             },
 
+            _preselectDatalet : function(){
+                var dataletCard = document.getElementById(this.preselectedDatalet);
+                dataletCard.elevation = "5";
+                dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
+                this.selectedDatalet = this.preselectedDatalet;
+
+                this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
+            },
 
             _getImageUrl : function(index){
                 return this.datalets[index].imageUrl;
diff --git a/controllets/items-vslider-controllet/items-vslider-controllet2.html b/controllets/items-vslider-controllet/items-vslider-controllet2.html
deleted file mode 100755
index 675d431..0000000
--- a/controllets/items-vslider-controllet/items-vslider-controllet2.html
+++ /dev/null
@@ -1,299 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html" />
-
-<!--<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">-->
-<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.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-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-material">
-
-<dom-module id="items-vslider-controllet">
-
-    <template>
-
-        <style is="custom-style">
-            paper-icon-button{
-                color: #00BCD4;
-                height: 48px;
-                width: 48px;
-                --paper-icon-button-ink-color: #00BCD4;
-            }
-
-            paper-icon-button:hover{
-            }
-
-            .header{
-                width: 100%;
-                /*padding-bottom: 8px;*/
-                /*border-bottom: 2px solid #B6B6B6;*/
-            }
-
-            .chevron-left{
-                float: left;
-                margin-top: 8px;
-            }
-
-            .chevron-right{
-                float: right;
-                margin-top: 8px;
-            }
-
-            .box{
-                overflow: auto;
-            }
-
-            .avatar {
-                display: inline-block;
-                height: 64px;
-                width: 64px;
-                border-radius: 50%;
-                background: #2196F3;
-                color: #FFFFFF;
-                line-height: 64px;
-                font-size: 32px;
-                vertical-align: middle;
-                text-align: center;
-            }
-
-            .text {
-                display: inline-block;
-                height: 64px;
-                vertical-align: middle;
-                padding-left: 20px;
-            }
-
-            .title {
-                font-size: 32px;
-                color: #2196F3;
-            }
-
-            .subtitle {
-                font-size: 16px;
-                color: #727272;
-            }
-        </style>
-
-        <iron-ajax
-                auto
-                handle-as="json"
-                url={{dataletsListUrl}}
-                on-response="getDatalets">
-        </iron-ajax>
-
-        <div class="header">
-            <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
-            <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
-
-            <div class="box">
-                <div class="avatar">[[avatar]]</div>
-                <div class="text">
-                    <div class="title">[[title]]</div>
-                    <div class="subtitle">[[subtitle]]</div>
-                </div>
-            </div>
-        </div>
-
-        <paper-material id="material_tree_view" elevation="5">
-
-            <neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
-            <!--<neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="slide-from-bottom-animation" exit-animation="slide-down-animation">-->
-
-                <template is="dom-repeat" items="{{pages}}" as="page">
-
-                    <neon-animatable>
-
-                        <template is="dom-repeat" items="{{dataletsPerPage}}" as="index">
-
-                        <!--<span> {{item.name}}</span>-->
-                        <!--<img src={{getdatalets.image}}>-->
-                            <img src={{_getImage(page,index)}}>
-
-                        </template>
-                    </neon-animatable>
-
-                    <!--<neon-animated-pages id="neon_animated_pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">-->
-                    <!--<template is="dom-repeat" items="{{pages}}" as="page">-->
-                    <!--<neon-animatable>-->
-                    <!--<template is="dom-repeat" items="{{dataletsPerPage}}" as="index">-->
-                    <!--<paper-material elevation="1" class='content-card'>-->
-                    <!--<div class="legend"><span>sbiricuda siempre!</span></div>-->
-                    <!--<div class="card-content-image">-->
-                    <!--<img src="{{_getImageUrl(page,index)}}">-->
-                    <!--</div>-->
-                    <!--</paper-material>-->
-                    <!--</template>-->
-                    <!--</neon-animatable>-->
-                    <!--</template>-->
-                    <!--</neon-animated-pages>-->
-
-                </template>
-
-            </neon-animated-pages>
-
-        </paper-material>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'items-vslider-controllet',
-
-            properties : {
-
-                entryAnimation : {
-                    type  : String,
-                    value : ""
-                },
-
-                exitAnimation  : {
-                    type  : String,
-                    value : ""
-                },
-
-                selected : {
-                    type  : Number,
-                    value : 0
-                },
-
-                title : {
-                    type  : String,
-                    value : ""
-                },
-
-                subtitle : {
-                    type  : String,
-                    value : ""
-                },
-
-                avatar : {
-                    type  : String,
-                    value : "1"
-                },
-
-                datalets : {
-                    type  : Array,
-                    value : []
-                },
-
-                pages : {
-                    type  : Array,
-                    value : []
-                },
-
-                dataletsPerPage : {
-                    type  : Array,
-                    value : []
-                }
-
-
-                //dataletsListUrl or datalets as input
-            },
-
-            getDatalets : function(e){//imageUrllllllllllllllllllllllllllllllllllllllll
-                datalets = new Array();
-                for(var i=0; i < e.detail.response.length; i++){
-                    var datalet = { name : e.detail.response[i].name, image : e.detail.response[i].url + e.detail.response[i].name + ".png" };
-                    datalets.push(datalet);
-                }
-                this.datalets = datalets;
-
-                console.log(this.datalets);
-                this.pages = [0,1,2];
-                this.dataletsPerPage = [0,1,2];
-
-            },
-
-//            getName : function(name){
-//                return name;
-//            },
-//
-            _getImage : function(page, index){
-                console.log(this.datalets[3*page+index].image);
-                return this.datalets[3*page+index].image;
-            },
-
-            _resize : function(){//da cambiare rispetto al div container!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                h = h - 64; //height with page scroller
-                $("#material_tree_view").height(h);
-            },
-
-            attached : function() {
-//                this.fire('items-vslider-controllet_selected', {selected : this.selected});
-                this._resize();
-            },
-
-            setTitle : function(title, subtitle) {
-                this.title = title;
-                this.subtitle = subtitle;
-            },
-
-            setAvatar : function(innerText) {
-                this.avatar = innerText;
-            },
-
-            chevronLeft : function(flag) {
-                var buttons = document.getElementsByTagName("paper-icon-button");
-                if(flag)
-                    buttons[0].removeAttribute("disabled");
-                else
-                    buttons[0].setAttribute("disabled", "true");
-            },
-
-            chevronRight : function(flag) {
-                var buttons = document.getElementsByTagName("paper-icon-button");
-                if(flag)
-                    buttons[1].removeAttribute("disabled");
-                else
-                    buttons[1].setAttribute("disabled", "true");
-            },
-
-            _onPrevClick : function() {
-                var buttons = document.getElementsByTagName("paper-icon-button");
-                buttons[0].setAttribute("disabled", "true");
-                buttons[1].setAttribute("disabled", "true");
-
-//                this.entryAnimation = 'slide-from-left-animation';
-//                this.exitAnimation  = 'slide-right-animation';
-
-                this.entryAnimation = '';
-                this.exitAnimation = 'slide-up-animation';
-
-                this.selected = this.selected === 0 ? (this.pages.length-1) : (this.selected - 1);
-            },
-
-            _onNextClick : function() {
-                var buttons = document.getElementsByTagName("paper-icon-button");
-                buttons[0].setAttribute("disabled", "true");
-                buttons[1].setAttribute("disabled", "true");
-
-//                this.entryAnimation = 'slide-from-right-animation';
-//                this.exitAnimation  = 'slide-left-animation';
-
-                this.entryAnimation = 'slide-down-animation';
-                this.exitAnimation = '';
-
-                this.selected = this.selected === (this.pages.length-1) ? 0 : (this.selected + 1);
-            },
-
-            _onNeonAnimationFinish: function() {
-                var buttons = document.getElementsByTagName("paper-icon-button");
-                buttons[0].removeAttribute("disabled");
-                buttons[1].removeAttribute("disabled");
-
-                this.avatar = this.selected+1;
-
-                this.fire('page-slider-controllet_selected', {selected : this.selected});
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/items-vslider-controllet/items-vslider-controllet3.html b/controllets/items-vslider-controllet/items-vslider-controllet3.html
deleted file mode 100755
index b0c0ec1..0000000
--- a/controllets/items-vslider-controllet/items-vslider-controllet3.html
+++ /dev/null
@@ -1,458 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html" />
-
-<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.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-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-material">
-
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
-<!--<link rel="import" href="../paper-input.html">-->
-<!--<link rel="import" href="../paper-input-container.html">-->
-<!--<link rel="import" href="../paper-input-error.html">-->
-<!--<link rel="import" href="../paper-input-char-counter.html">-->
-<!--<link rel="import" href="../paper-textarea.html">-->
-<!--<link rel="import" href="../../iron-input/iron-input.html">-->
-<!--<link rel="import" href="../../iron-icon/iron-icon.html">-->
-<!--<link rel="import" href="../../iron-icons/iron-icons.html">-->
-<!--<link rel="import" href="../../paper-icon-button/paper-icon-button.html">-->
-
-
-<dom-module id="items-vslider-controllet">
-
-    <template>
-
-        <style is="custom-style">
-            #material_items_vslider{
-                display: flex;
-                flex-direction: column;
-                width: 172px;
-                background-color: #E0E0E0;
-            }
-
-            paper-icon-button{
-                color: #FFFFFF;
-                /*color: #2196F3;*/
-                height: 48px;
-                width: 48px;
-                padding: 0px;
-                margin: 0px;
-                --paper-icon-button-ink-color: white;
-                /*--paper-icon-button-ink-color: #2196F3;*/
-
-                /*margin-left: 63px;*/
-            }
-
-            paper-icon-button:hover{
-            }
-
-            .arrow-up{
-                background-color: #2196F3;
-                /*float: left;*/
-                /*margin-top: 8px;*/
-                padding-left: 63px;
-            }
-
-            .arrow-down{
-                background-color: #2196F3;
-                /*float: right;*/
-                /*margin-top: 8px;*/
-                padding-left: 63px;
-            }
-
-            neon-animatable {
-                position: relative;
-                color: white;
-                /*width: 248px;*/
-                /*height: 100%;*/
-                height: auto;/*???*/
-                /*background-color: red;*/
-                overflow: hidden;
-            }
-
-            #div_datalets_container {
-                position: relative;
-                /*color: white;*/
-                /*width: 248px;*/
-                /*height: 100%;*/
-                /*height: auto;/!*???*!/*/
-                /*background-color: red;*/
-                /*overflow: hidden;*/
-            }
-
-            .content-card{
-                position: relative;
-                /*float: left;*/
-                margin : 16px;
-                /*width: 80px;*/
-                /*height: 72px;*/
-                background: #fff;
-                padding: 8px;
-
-                height: 124px;
-                width: 124px;
-
-                cursor: pointer;
-            }
-
-            img{
-                height: 100%;
-                width: 100%;
-            }
-
-            .legend {
-                position: absolute;
-                /*background: rgba(0,0,0,0.8);*/
-                background: #9E9E9E;/*#9e9e9e;*/
-                color: #FFFFFF;
-                /*height: 32px;*/
-                /*padding-left: 8px;*/
-                /*padding: 0px 8px 0px 8px;*/
-                padding: 8px;
-                left: 0;
-                bottom: 16px;
-                z-index: 1;
-                opacity: 0.87;
-                width: 124px;
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-            }
-
-            .legend.selected {
-                font-weight: 700;
-                background-color: #2196F3;
-                opacity: 1;
-            }
-
-            .legend span{
-                /*position: relative;*/
-                /*top: 8px;*/
-            }
-
-            .div_search{
-                /*height: 64px;*/
-                height: 48px;
-                padding: 0px 8px;
-                background-color: #B6B6B6;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            .search{
-                color: #FFFFFF
-                /*height: 32px;*/
-            }
-
-            .clear {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-                width: 16px; /* 15px + 2*4px for padding */
-                height: 16px;
-                /*padding: 0px 4px;*/
-                margin-bottom: 3px;
-            }
-
-
-
-        </style>
-
-        <iron-ajax auto handle-as="json" url={{dataletsListUrl}} on-response="_getDatalets"></iron-ajax>
-
-        <paper-material id="material_items_vslider" elevation="5">
-
-            <!--<div class="div_search">-->
-                <!--<paper-icon-button class="search"  icon="icons:search"></paper-icon-button>-->
-
-                <paper-input id="div_search" value={{filter}} class="div_search" no-label-float label="search datalet" id="input_search">
-                    <iron-icon class="search" icon="search" prefix></iron-icon>
-                    <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" ></paper-icon-button><!--tabindex="0"-->
-                </paper-input>
-
-            <!--</div>-->
-
-
-
-            <div class="arrow-up"><paper-icon-button on-click="_onPrevClick" icon="hardware:keyboard-arrow-up"></paper-icon-button></div>
-
-            <div id="div_datalets_container" class="flex">
-                        <template is="dom-repeat" items="{{filteredDatalets}}">
-                            <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet">
-                                <div class="legend">{{item.imageName}}</div>
-                                <div class="card-content-image">
-                                    <img src={{item.imageUrl}}>
-                                </div>
-                            </paper-material>
-                        </template>
-            </div>
-
-            <div class="arrow-down"><paper-icon-button on-click="_onNextClick" icon="hardware:keyboard-arrow-down"></paper-icon-button></div>
-
-        </paper-material>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'items-vslider-controllet',
-
-            properties : {
-
-//                entryAnimation : {
-//                    type  : String,
-//                    value : ""
-//                },
-//
-//                exitAnimation  : {
-//                    type  : String,
-//                    value : ""
-//                },
-
-                selectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-//                prevSelectedCard : {
-//                    type  : Object,
-//                    value : undefined
-//                },
-
-                datalets : {
-                    type  : Array,
-                    value : []
-                },
-
-                filteredDatalets : {
-                    type  : Array,
-                    value : []
-                },
-
-                pages : {
-                    type  : Array,
-                    value : []
-                },
-
-                dataletsPerPage : {
-                    type  : Array,
-                    value : []
-                },
-
-                filter : {
-                    type  : String,
-                    value : "",
-                    observer : '_filterDatalets'
-                }
-            },
-
-            listeners: {
-                'dom-change': '_onDomChange'
-            },
-
-            ready : function() {
-                $(this.$.div_datalets_container).perfectScrollbar();
-
-                this._resize();
-                var that = this;
-                window.addEventListener("resize", function() { that._resize(); });
-            },
-
-            _clearInput : function() {
-                this.$.div_search.value = "";
-                ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-            },
-//            attached : function() {
-//                this._resize();
-//                var that = this;
-//                window.addEventListener("resize", function() { that._resize(); });
-//            },
-
-            _getDatalets : function(e){
-                var datalets = new Array();
-                for(var i=0; i < e.detail.response.length; i++){
-                    var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" };
-                    datalets.push(datalet);
-//                    datalets.push(datalet);
-                }
-
-                {{}}
-                this.pages = [0,1,2];
-                this.dataletsPerPage = [0,1,2];
-
-                this.datalets = datalets;
-                this.filteredDatalets = datalets;
-
-//                console.log(this.datalets);
-            },
-
-            _filterDatalets : function(){//console.log(this.filter);
-                var datalets = new Array();
-                for(var i=0; i < this.datalets.length; i++){
-                    var datalet = this.datalets[i];
-//                    console.log(datalet.imageName.indexOf(this.filter));
-//                    console.log(datalet.imageName);
-                    if(datalet.imageName.indexOf(this.filter) != -1){
-                        datalets.push(datalet);
-//                        console.log("we");
-                    }
-
-                }
-
-//                console.log(datalets);
-                this.filteredDatalets = datalets;
-
-
-
-                ///////////////
-//
-//                console.log(this.selectedDatalet);
-//                if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet)) != null ){
-//
-//                    var datalet = document.getElementById(this.selectedDatalet);
-//                    console.log(datalet);
-//                    datalet.elevation = "5";
-//                    datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";
-//                }
-
-                //////////////
-
-
-                $("#div_datalets_container").animate({ scrollTop: 0}, 0);
-
-            },
-
-            _onDomChange : function() {
-                console.log("dom changed");
-                console.log(this.filteredDatalets);
-
-                if(this.selectedDatalet != undefined ){
-//                    console.log(this.selectedDatalet);
-//                    var datalets = document.getElementsByClassName("content-card");
-//                    var datalets = document.getElementsByTagName("paper-material");
-
-                    for(var i=0; i < this.filteredDatalets.length; i++){
-                        var datalet = this.filteredDatalets[i];
-//                        console.log(datalet.imageName);
-                        datalet = document.getElementById(datalet.imageName);//dataletCarDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
-                        console.log(datalet);
-                        datalet.elevation = "1";
-                        datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");
-                    }
-//
-                    if(document.getElementById(this.selectedDatalet) != null ){
-
-                        var datalet = document.getElementById(this.selectedDatalet);
-                        console.log(datalet);
-                        datalet.elevation = "5";
-                        datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";
-                    }
-
-                }
-            },
-
-            _selectDatalet : function(e){
-//                var dataletId = e.currentTarget.id;
-//                console.log(dataletId)
-
-                if(this.selectedDatalet != undefined){
-                    var datalet = document.getElementById(this.selectedDatalet);
-                    datalet.elevation = "1";
-                    datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");
-                }
-
-                e.currentTarget.elevation = "5";
-                e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
-
-                console.log("weeeeeeeeeeeeeeeeee");
-                this.selectedDatalet = e.currentTarget.id;
-            },
-
-//            _onCardClick : function(e){//prevSelectedCard-->selectedCard, no selected!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-//
-////                console.log(e.currentTarget);
-//
-//
-//                //controlla sul search......................................................................
-//
-////                dai ID alle card e modifica funzione!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-////                disabilita pulsante top o bottom e multiclick
-//                if(this.prevSelectedCard != undefined){
-//                    this.prevSelectedCard.elevation = "1";
-//                    this.prevSelectedCard.childNodes[2].className = this.prevSelectedCard.childNodes[2].className.replace("selected", "");
-//                }
-//
-//
-//                e.currentTarget.elevation = "5";
-//                e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
-//
-//                var b = document.getElementById("barchart");
-//
-////                b.elevation = "5";
-////                b.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
-//
-//                this.prevSelectedCard = e.currentTarget;
-//
-////                this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});
-//
-//            },
-
-//            _getImageUrl : function(page, index){
-//                return this.datalets[3*page+index].imageUrl;
-//            },
-
-            _getImageUrl : function(index){
-                return this.datalets[index].imageUrl;
-            },
-
-            _onPrevClick : function() {
-
-                var container = $("#div_datalets_container");
-                var h = container.height();
-                var dataletPerPage = parseInt(h/156);
-                var scroll = $("#div_datalets_container").scrollTop()-156*dataletPerPage;
-                var diff = scroll % 156;
-//                scroll += 156-diff;
-                scroll -= diff;
-                $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
-
-
-//                var scroll = $("#div_datalets_container").scrollTop()-156*3;
-//                console.log(scroll);
-
-//                    console.log(scroll);
-            },
-
-            _onNextClick : function() {
-                var container = $("#div_datalets_container");
-                var h = container.height();
-                var dataletPerPage = parseInt(h/156);
-                var scroll = $("#div_datalets_container").scrollTop()+156*dataletPerPage;
-                var diff = scroll % 156;
-                scroll -= diff;
-                $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
-
-//                var scroll = $("#div_datalets_container").scrollTop()+156*3;
-////                console.log(scroll);
-//                    $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
-////                    console.log(scroll);
-            },
-
-            _resize : function(){console.log("we");
-                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                h = h - 64 - 8; //height with page scroller
-                $("#material_items_vslider").height(h);
-            }
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/multi-table-controllet/multi-table-controllet.html b/controllets/multi-table-controllet/multi-table-controllet.html
index 43d501a..6f4d463 100755
--- a/controllets/multi-table-controllet/multi-table-controllet.html
+++ b/controllets/multi-table-controllet/multi-table-controllet.html
@@ -7,7 +7,7 @@
 <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="../../datalets/dynamic-datatable-datalet/datatable-datalet.html" />
+<link rel="import" href="../../datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html" />
 
 <dom-module id="multi-table-controllet">
 
diff --git a/controllets/page-slider-controllet/page-slider-controllet.html b/controllets/page-slider-controllet/page-slider-controllet.html
index e69c522..51dea2b 100755
--- a/controllets/page-slider-controllet/page-slider-controllet.html
+++ b/controllets/page-slider-controllet/page-slider-controllet.html
@@ -123,6 +123,11 @@
                     value : 0
                 },
 
+                prevSelected : {
+                    type  : Number,
+                    value : 0
+                },
+
                 pages : {
                     type  : Number,
                     value : document.querySelectorAll('neon-animatable').length
@@ -190,6 +195,10 @@
                     buttons[1].setAttribute("disabled", "true");
             },
 
+            getPrevSelected : function() {
+                return this.prevSelected;
+            },
+
             _onPrevClick : function() {
                 var buttons = document.getElementsByTagName("paper-icon-button");
                 buttons[0].setAttribute("disabled", "true");
@@ -198,6 +207,7 @@
                 this.entryAnimation = 'slide-from-left-animation';
                 this.exitAnimation  = 'slide-right-animation';
 
+                this.prevSelected = this.selected;
                 this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1);
             },
 
@@ -209,6 +219,7 @@
                 this.entryAnimation = 'slide-from-right-animation';
                 this.exitAnimation  = 'slide-left-animation';
 
+                this.prevSelected = this.selected;
                 this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1);
             },
 
diff --git a/controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html b/controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
index 0cf2d52..265f953 100755
--- a/controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
+++ b/controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
@@ -117,8 +117,8 @@
             },
 
             _filterJson : function(data){
-                console.log(data);
-                console.log(this.dataUrl);
+//                console.log(data);
+//                console.log(this.dataUrl);
                 if(data.result != undefined && data.result.resource_id != undefined) {
                     this.rootName = "result,records"
                     return data.result.records;
diff --git a/datalets/dynamic-datatable-datalet/datatable-datalet.html b/datalets/dynamic-datatable-datalet/datatable-datalet.html
deleted file mode 100755
index 7c1e925..0000000
--- a/datalets/dynamic-datatable-datalet/datatable-datalet.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!--
-@license
-    The MIT License (MIT)
-
-    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in
-    all copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-    THE SOFTWARE.
--->
-<!--
-* Developed by :
-* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
-*
--->
-
-<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
-
-<!--
-The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.
-Pass to this component a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-table with data and query attributes with all Datatables library features.
-
-Example:
-
-    <datatable-datalet
-        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
-        fields='["field1","field2"]'>
-    </datatables-datalet>
-
-@element datatable-datalet
-@status v0.1
-@demo demo/index.html
-@group datalets
--->
-
-<dom-module id="dynamic-datatable-datalet">
-    <template>
-        <link rel="stylesheet" type="text/css" href="js/DataTables/datatables.css"/>
-
-        <span id="_span"></span>
-
-        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
-    </template>
-
-    <script type="text/javascript" src="js/DataTables/datatables.js"></script>
-
-    <script>
-        var DatatableBehavior = {
-
-            presentData: function(){
-                var html = "<table id=\"dynamic-datatable\" class=\"stripe row-border\" cellspacing=\"0\"  style=\"height: auto; width: auto;\">";
-
-                if(!this.data || this.data[0] == undefined) return;
-                html += '<thead>'+
-                           '<tr>';
-                for(var x = 0; x<this.data.length; x++){
-                   html += '<th>' + this.data[x].name + '</th>';
-                }
-                html +=  '</tr>' +
-                         '</thead>' +
-                        '<tbody>';
-                for(var i = 0; i<this.data[0].data.length; i++){
-                    html += '<tr>';
-                    for(var x = 0; x<this.data.length; x++){
-                      html += '<td>' + this.data[x].data[i] + '</td>';
-                    }
-                    html += '</tr>';
-                }
-                html += '</tbody></table>';
-
-                $(this._component.$._span).html(html);
-                $(this._component.$._span.childNodes[0]).DataTable();
-            },
-
-            _destroy: function(){
-                if(this._component){//evita caso init
-                    $(this._component.$._span).html("");
-                    //$(this._component.$.datatable).DataTable().destroy();
-                    this._component.behavior.selectData();
-                    this._component.behavior.presentData();
-                }
-            }
-
-        };
-
-        Polymer({
-            is : 'dynamic-datatable-datalet' ,
-
-            properties: {
-                /**
-                 * It's the component behavior
-                 *
-                 * @attribute behavior
-                 * @type Object
-                 * @default {}
-                 */
-                behavior : {
-                    type : Object,
-                    value : {}
-                },
-
-                fields : {
-                    observer: '_reload'
-                }
-
-            },
-
-            ready: function(){
-                this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatatableBehavior);
-                this.async(function(){this.behavior.init(this)}, 0);
-            },
-
-            _reload: function(){
-
-                if(this.fields.constructor == Array);//fields in selectData --> from Array to String
-                else{
-                    this.behavior._destroy();
-//                    this.behavior.selectData();
-//                    this.behavior.presentData();
-                }
-            }
-        });
-
-    </script>
-</dom-module>
-
diff --git a/datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html b/datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
new file mode 100755
index 0000000..7c1e925
--- /dev/null
+++ b/datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
@@ -0,0 +1,141 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
+
+<!--
+The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.
+Pass to this component a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
+table with data and query attributes with all Datatables library features.
+
+Example:
+
+    <datatable-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2"]'>
+    </datatables-datalet>
+
+@element datatable-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module id="dynamic-datatable-datalet">
+    <template>
+        <link rel="stylesheet" type="text/css" href="js/DataTables/datatables.css"/>
+
+        <span id="_span"></span>
+
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+    </template>
+
+    <script type="text/javascript" src="js/DataTables/datatables.js"></script>
+
+    <script>
+        var DatatableBehavior = {
+
+            presentData: function(){
+                var html = "<table id=\"dynamic-datatable\" class=\"stripe row-border\" cellspacing=\"0\"  style=\"height: auto; width: auto;\">";
+
+                if(!this.data || this.data[0] == undefined) return;
+                html += '<thead>'+
+                           '<tr>';
+                for(var x = 0; x<this.data.length; x++){
+                   html += '<th>' + this.data[x].name + '</th>';
+                }
+                html +=  '</tr>' +
+                         '</thead>' +
+                        '<tbody>';
+                for(var i = 0; i<this.data[0].data.length; i++){
+                    html += '<tr>';
+                    for(var x = 0; x<this.data.length; x++){
+                      html += '<td>' + this.data[x].data[i] + '</td>';
+                    }
+                    html += '</tr>';
+                }
+                html += '</tbody></table>';
+
+                $(this._component.$._span).html(html);
+                $(this._component.$._span.childNodes[0]).DataTable();
+            },
+
+            _destroy: function(){
+                if(this._component){//evita caso init
+                    $(this._component.$._span).html("");
+                    //$(this._component.$.datatable).DataTable().destroy();
+                    this._component.behavior.selectData();
+                    this._component.behavior.presentData();
+                }
+            }
+
+        };
+
+        Polymer({
+            is : 'dynamic-datatable-datalet' ,
+
+            properties: {
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                },
+
+                fields : {
+                    observer: '_reload'
+                }
+
+            },
+
+            ready: function(){
+                this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatatableBehavior);
+                this.async(function(){this.behavior.init(this)}, 0);
+            },
+
+            _reload: function(){
+
+                if(this.fields.constructor == Array);//fields in selectData --> from Array to String
+                else{
+                    this.behavior._destroy();
+//                    this.behavior.selectData();
+//                    this.behavior.presentData();
+                }
+            }
+        });
+
+    </script>
+</dom-module>
+
--
libgit2 0.21.4