WebCompDev / COMPONENTS

Commit 0f6424fe52651098e8d3e06d372d7a05da2b130a

Authored by root
1 parent d2774aae

update new data-sevc-controllet

Inline Side-by-side
Showing 16 changed files with 487 additions and 1165 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html 100644 → 100755
  View file @0f6424f
@@ -28,8 +28,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -28,8 +28,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 } 28 }
29 29
30 /* ---- grid-item ---- */ 30 /* ---- grid-item ---- */
31 -  
32 -  
33 ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;} 31 ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
34 ::content .grid-sizer {width: 200px;} 32 ::content .grid-sizer {width: 200px;}
35 ::content .grid-item-w20 {width: 200px;} 33 ::content .grid-item-w20 {width: 200px;}
@@ -37,31 +35,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -37,31 +35,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
37 ::content .grid-item-w60 {width: 600px;} 35 ::content .grid-item-w60 {width: 600px;}
38 ::content .grid-item-w80 {width: 80%;} 36 ::content .grid-item-w80 {width: 80%;}
39 ::content .grid-item-w100 {width: 100%;} 37 ::content .grid-item-w100 {width: 100%;}
40 -  
41 ::content .grid-item-h200 {height: 200px;} 38 ::content .grid-item-h200 {height: 200px;}
42 ::content .grid-item-h400 {height: 400px;} 39 ::content .grid-item-h400 {height: 400px;}
43 ::content .grid-item-h600 {height: 600px;} 40 ::content .grid-item-h600 {height: 600px;}
44 ::content .grid-item-h800 {height: 800px;} 41 ::content .grid-item-h800 {height: 800px;}
  42 + ::content .grid-item-c4 {background-color: #2C29FF;}
  43 + /* ---- grid-item ---- */
45 44
46 - ::content .grid-item-c0 {background-color: #0D47A1;}  
47 - ::content .grid-item-c1 {background-color: #1976D2;}  
48 - ::content .grid-item-c2 {background-color: #2196F3;}  
49 - ::content .grid-item-c3 {background-color: #64B5F6;}  
50 - ::content .grid-item-c4 {background-color: #BBDEFB;}  
51 -  
52 - ::content .room-body {background-color: #BBDEFB;}  
53 - 45 + ::content .room-body {color:#FFFFFF;}
54 ::content .room-subject 46 ::content .room-subject
55 { 47 {
56 position: absolute; 48 position: absolute;
57 width: 100%; 49 width: 100%;
58 height: 30px; 50 height: 30px;
59 - bottom: 20px; 51 + bottom: 30px;
60 background-color: rgba(0,0,0,0.6); 52 background-color: rgba(0,0,0,0.6);
61 - vertical-align: middle;  
62 color: #FFFFFF; 53 color: #FFFFFF;
63 } 54 }
64 - 55 + ::content .room-subject span
  56 + {
  57 + top: 5px;
  58 + left: 5px;
  59 + position: relative;
  60 + text-overflow: ellipsis;
  61 + overflow: hidden;
  62 + white-space:nowrap;
  63 + text-overflow:ellipsis;
  64 + display:inline-block;
  65 + }
  66 + ::content .room-body span
  67 + {
  68 + top: 5px;
  69 + left: 5px;
  70 + position: relative;
  71 + text-overflow: ellipsis;
  72 + overflow: hidden;
  73 + text-overflow:ellipsis;
  74 + display:inline-block;
  75 + }
  76 + ::content .room-timestamp
  77 + {
  78 + position: absolute;
  79 + right:3px;
  80 + bottom: 3px;
  81 + font-size: 8px;
  82 + color: #CCCCCC;
  83 + }
65 </style> 84 </style>
66 85
67 <template> 86 <template>
@@ -146,8 +165,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -146,8 +165,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
146 165
147 var target = event.target; 166 var target = event.target;
148 167
149 - if(target.classList[0] != "grid-item")  
150 - return; 168 + while(target.classList[0] != "grid-item")
  169 + target = target.parentElement;
151 170
152 // configure the page animation 171 // configure the page animation
153 this.sharedElements = { 172 this.sharedElements = {
@@ -161,8 +180,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -161,8 +180,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
161 180
162 this.fire('tile-click', { 181 this.fire('tile-click', {
163 tile: target, 182 tile: target,
164 - //data: {color: target._templateInstance.item.c}  
165 - data: {color: target.classList[3], id:target.id} 183 + data: {color: target.style.backgroundColor, id:target.id}
166 }); 184 });
167 185
168 } 186 }
controllets/data-sevc-controllet/colors
  View file @0f6424f
@@ -32,4 +32,15 @@ E0E0E0 @@ -32,4 +32,15 @@ E0E0E0
32 32
33 33
34 34
35 -'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif  
36 \ No newline at end of file 35 \ No newline at end of file
  36 +'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif
  37 +
  38 +
  39 +
  40 +a {
  41 + color: #00BCD4 ; /** OW_Control type:color, key:accentColor, section:2. Colors, label:5. Accent **/
  42 + text-decoration: none;
  43 +}
  44 +a:hover {
  45 + color: #2db395;
  46 + text-decoration: underline;
  47 +}
37 \ No newline at end of file 48 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet-orig.html
  View file @0f6424f
@@ -54,8 +54,10 @@ @@ -54,8 +54,10 @@
54 <link rel="import" href="../items-list-controllet/item-list-controllet.html"> 54 <link rel="import" href="../items-list-controllet/item-list-controllet.html">
55 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> 55 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
56 <link rel="import" href="../tree-view-controllet/tree-view-controllet.html"> 56 <link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
  57 +<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html">
57 <link rel="import" href="../text-element-controllet/text-element-controllet.html"> 58 <link rel="import" href="../text-element-controllet/text-element-controllet.html">
58 <link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html"> 59 <link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html">
  60 +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
59 61
60 <!-- 62 <!--
61 The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required. 63 The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
@@ -210,12 +212,20 @@ Example: @@ -210,12 +212,20 @@ Example:
210 padding : 0.8em; 212 padding : 0.8em;
211 } 213 }
212 214
  215 + /*#fields_placeholder{*/
  216 + /*width: 40%;*/
  217 + /*height: 75vh;*/
  218 + /*position: relative;*/
  219 + /*float: left;*/
  220 + /*overflow: auto;*/
  221 + /*}*/
  222 +
213 #fields_placeholder{ 223 #fields_placeholder{
214 - width: 40%;  
215 - height: 75vh;  
216 - position: relative;  
217 - float: left;  
218 - overflow: auto; 224 + width: 100%;
  225 + /*height: 75vh;*/
  226 + /*position: relative;*/
  227 + /*float: right;*/
  228 + /*overflow: auto;*/
219 } 229 }
220 230
221 #table_fields_container{ 231 #table_fields_container{
@@ -329,8 +339,8 @@ Example: @@ -329,8 +339,8 @@ Example:
329 <paper-material elevation="2" class="area_container"> 339 <paper-material elevation="2" class="area_container">
330 <paper-tabs selected="{{DatasourceTabSelected}}"> 340 <paper-tabs selected="{{DatasourceTabSelected}}">
331 <paper-tab>Select data source</paper-tab> 341 <paper-tab>Select data source</paper-tab>
  342 + <paper-tab>Tree Map view</paper-tab>
332 <paper-tab>Most popular</paper-tab> 343 <paper-tab>Most popular</paper-tab>
333 - <paper-tab>Search</paper-tab>  
334 </paper-tabs> 344 </paper-tabs>
335 <iron-pages selected="{{DatasourceTabSelected}}"> 345 <iron-pages selected="{{DatasourceTabSelected}}">
336 <div> 346 <div>
@@ -353,7 +363,10 @@ Example: @@ -353,7 +363,10 @@ Example:
353 363
354 364
355 </div> 365 </div>
356 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> 366 + <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>-->
  367 + <div>
  368 + <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>
  369 + </div>
357 <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> 370 <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
358 </iron-pages> 371 </iron-pages>
359 </paper-material> 372 </paper-material>
@@ -378,13 +391,19 @@ Example: @@ -378,13 +391,19 @@ Example:
378 391
379 <div class="horizontal layout"> 392 <div class="horizontal layout">
380 393
381 - <paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
382 - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>  
383 - </paper-material> 394 + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
  395 + <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>-->
  396 + <!--</paper-material>-->
  397 +
  398 + <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">-->
  399 + <!--<div id="table_component_place_holder"></div>-->
  400 + <!--</paper-material>-->
384 401
385 - <paper-material elevation="2" id="table_fields_container" class="area_container flex2child">  
386 - <div id="table_component_place_holder"></div>  
387 - </paper-material> 402 + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
  403 + <div id="fields_placeholder">
  404 + <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>
  405 + </div>
  406 + <!--</paper-material>-->
388 407
389 </div> 408 </div>
390 409
@@ -534,7 +553,8 @@ Example: @@ -534,7 +553,8 @@ Example:
534 'items-list-controllet_item-selected' : '_dataletSelected', 553 'items-list-controllet_item-selected' : '_dataletSelected',
535 'draggable-element-controllet_content-dragged' : '_fieldsMapped', 554 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
536 'tree-view-controllet_selected-fields' : '_fieldsSelected', 555 'tree-view-controllet_selected-fields' : '_fieldsSelected',
537 - 'text-element-controllet_content-changed' : '_textElementChanged' 556 + 'text-element-controllet_content-changed' : '_textElementChanged',
  557 + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
538 }, 558 },
539 559
540 properties : { 560 properties : {
@@ -663,7 +683,7 @@ Example: @@ -663,7 +683,7 @@ Example:
663 683
664 ready : function(){ 684 ready : function(){
665 685
666 - $(this.$.fields_placeholder).perfectScrollbar(); 686 +// $(this.$.fields_placeholder).perfectScrollbar();
667 $(this.$.selectedFields_main_container).perfectScrollbar(); 687 $(this.$.selectedFields_main_container).perfectScrollbar();
668 $(this.$.idm_fields_main_container).perfectScrollbar(); 688 $(this.$.idm_fields_main_container).perfectScrollbar();
669 $(this.$.idm_layout_main_container).perfectScrollbar(); 689 $(this.$.idm_layout_main_container).perfectScrollbar();
@@ -1071,7 +1091,23 @@ Example: @@ -1071,7 +1091,23 @@ Example:
1071 1091
1072 this.fire('data-sevc-controllet.dataletCreated', {data : data}); 1092 this.fire('data-sevc-controllet.dataletCreated', {data : data});
1073 1093
1074 - } 1094 + },
  1095 +
  1096 + //tree map
  1097 + _selectDataUrl_treeMap : function(e){
  1098 + var url = e.detail.url;
  1099 +// url = url.split('/');
  1100 +// var index = url.indexOf('resource')
  1101 +// if (index != -1) { // ckan
  1102 +// var resourceId = url[index + 1];
  1103 +// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;
  1104 +//
  1105 +// } else
  1106 +// url = "sorry, data provider not supported yet";
  1107 +
  1108 + this.dataUrl = url;
  1109 + this.DatasourceTabSelected=0;
  1110 + },
1075 1111
1076 }); 1112 });
1077 1113
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @0f6424f
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 ---> 1 +/********************************************************************************************************************************
  2 +<!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->
  3 +<!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
  4 +<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  5 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  6 +/********************************************************************************************************************************
31 7
32 <link rel="import" href="../../bower_components/polymer/polymer.html"> 8 <link rel="import" href="../../bower_components/polymer/polymer.html">
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-material/paper-material.html">  
42 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
43 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
45 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
46 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
47 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
49 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
50 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
52 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
53 -  
54 -<link rel="import" href="../items-list-controllet/item-list-controllet.html">  
55 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
56 -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">  
57 -<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html">  
58 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
59 -<link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html">  
60 -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">  
61 -  
62 -<!--  
63 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
64 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
65 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
66 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
67 -is available every time a fields is dragged in the input data model fields area.  
68 -  
69 -Example:  
70 -  
71 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
72 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
73 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
74 - </data-sevc-controllet>  
75 -  
76 -  
77 -@element data-sevc-controllet  
78 -@status beta  
79 -@homepage  
80 -@group controllets  
81 --->  
82 9
  10 +<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
  11 +<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
  12 +<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" />
  13 +<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">
83 14
84 <dom-module id="data-sevc-controllet"> 15 <dom-module id="data-sevc-controllet">
85 - <template>  
86 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
87 -  
88 - <style is="custom-style">  
89 16
90 - ::content body {  
91 - font-family: 'Roboto', sans-serif;  
92 - }  
93 -  
94 - .flexchild  
95 - {  
96 - @apply(--layout-flex);  
97 - }  
98 -  
99 - .flex2child  
100 - {  
101 - @apply(--layout-flex-2);  
102 - }  
103 -  
104 - .avatar  
105 - {  
106 - display: inline-block;  
107 - height: 2em;  
108 - width: 2em;  
109 - border-radius: 50%;  
110 - background: var(--paper-blue-500);  
111 - color: white;  
112 - line-height: 2em;  
113 - font-size: 1.87em;  
114 - text-align: center;  
115 - }  
116 -  
117 - .title  
118 - {  
119 - position: relative;  
120 - top: 0.60vh;  
121 - margin-left: 20px;  
122 - }  
123 -  
124 - .big  
125 - {  
126 - font-size: 1.37em;  
127 - color: var(--google-grey-500);  
128 - }  
129 -  
130 - .medium  
131 - {  
132 - font-size: 1em;  
133 - padding-bottom: 0.5em;  
134 - color : #000000;  
135 - font-weight: bold;  
136 - }  
137 -  
138 - .small  
139 - {  
140 - font-size: 0.8em;  
141 - padding-top: 10px;  
142 - color: var(--paper-blue-500);  
143 - font-weight: bold;  
144 - }  
145 -  
146 - paper-input  
147 - {  
148 - width: 80%;  
149 - }  
150 -  
151 - paper-dropdown-menu  
152 - {  
153 - text-align: left;  
154 - margin: auto;  
155 - width: 100%;  
156 - }  
157 -  
158 - ::content paper-menu-button  
159 - {  
160 - display: block;  
161 - width: 100%;  
162 - }  
163 -  
164 - #visualization_slider_area  
165 - {  
166 - padding-top: 20px;  
167 - overflow: visible;  
168 - }  
169 -  
170 - #fields_mapping_area  
171 - {  
172 - min-width: 670px;  
173 - min-height: 180px;  
174 - }  
175 -  
176 - #datalet_placeholder  
177 - {  
178 - height: 60vh;  
179 - min-height: 60vh;  
180 - min-width: 45%;  
181 - margin-top:10px;  
182 - }  
183 -  
184 - .datalet_right_container  
185 - {  
186 - width: 100vh;  
187 - }  
188 -  
189 - .field-mapping-card  
190 - {  
191 - width: 50%;  
192 - float: left;  
193 - }  
194 -  
195 - .toolbar_button  
196 - {  
197 - --iron-icon-height: 32px;  
198 - --iron-icon-width: 32px;  
199 - }  
200 -  
201 - #finish_button  
202 - {  
203 - --iron-icon-height: 32px;  
204 - --iron-icon-width: 32px;  
205 - color: var(--paper-blue-500);  
206 - }  
207 -  
208 - .area_container  
209 - {  
210 - overflow: hidden;  
211 - margin : 0.8em;  
212 - padding : 0.8em;  
213 - }  
214 -  
215 - /*#fields_placeholder{*/  
216 - /*width: 40%;*/  
217 - /*height: 75vh;*/  
218 - /*position: relative;*/  
219 - /*float: left;*/  
220 - /*overflow: auto;*/  
221 - /*}*/  
222 -  
223 - #fields_placeholder{  
224 - width: 100%;  
225 - /*height: 75vh;*/  
226 - /*position: relative;*/  
227 - /*float: right;*/  
228 - /*overflow: auto;*/  
229 - }  
230 -  
231 - #table_fields_container{  
232 - height: 75vh;  
233 - width: 55%;  
234 - position: relative;  
235 - float: left;  
236 - overflow: auto;  
237 - }  
238 -  
239 - #idm_fields_main_container{  
240 - position: relative;  
241 - height: 60vh;  
242 - }  
243 -  
244 - #selectedFields_main_container{  
245 - position: relative;  
246 - height: 60vh;  
247 - }  
248 -  
249 - #idm_layout_main_container{  
250 - position: relative;  
251 - height: 50vh;  
252 - }  
253 -  
254 - #comment{  
255 - position: relative;  
256 - width: 35vw;  
257 - }  
258 -  
259 - paper-menu{  
260 - width: 100%;  
261 - }  
262 -  
263 - paper-dialog {  
264 - position: fixed;  
265 - top: 16px;  
266 - width: auto;  
267 - height: auto;  
268 - overflow: auto;  
269 - padding : 30px;  
270 - }  
271 -  
272 - paper-tabs, paper-toolbar  
273 - {  
274 - background-color: var(--paper-blue-500);  
275 - color: #ffffff;  
276 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
277 - --paper-tabs-selection-bar-color: var(--google-gray-500);  
278 - }  
279 -  
280 - paper-toolbar paper-tabs  
281 - {  
282 - box-shadow: none;  
283 - }  
284 -  
285 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
286 - {  
287 - background-color: var(--google-gray-500);  
288 - }  
289 -  
290 - paper-tabs[align-bottom]  
291 - {  
292 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
293 - }  
294 - </style>  
295 -  
296 - <iron-ajax  
297 - auto  
298 - id="data_request"  
299 - url={{dataUrl}}  
300 - verbose="true"  
301 - on-response="handleResponseData"  
302 - debounce-duration="300">  
303 - </iron-ajax>  
304 -  
305 - <iron-ajax  
306 - id="datales_list_request"  
307 - auto  
308 - url={{dataletsListUrl}}  
309 - handle-as="json"  
310 - on-response="handleResponseDatalets"  
311 - debounce-duration="300">  
312 - </iron-ajax>  
313 -  
314 - <iron-ajax  
315 - id="selectedDatalet_request"  
316 - url={{deepUrl}}  
317 - verbose="true"  
318 - on-response="handleSelectedDatalet"  
319 - debounce-duration="300">  
320 - </iron-ajax>  
321 -  
322 - <content>  
323 -  
324 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
325 -  
326 - <neon-animatable>  
327 -  
328 - <div class="vertical justified layout">  
329 -  
330 - <div class="horizontal layout">  
331 - <div class="avatar" style="margin-left:15px">1</div>  
332 - <div class="title flex">  
333 - <div id="toolbar_title" class="big">Dataset source</div>  
334 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
335 - </div>  
336 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
337 - </div>  
338 -  
339 - <paper-material elevation="2" class="area_container">  
340 - <paper-tabs selected="{{DatasourceTabSelected}}">  
341 - <paper-tab>Select data source</paper-tab>  
342 - <paper-tab>Tree Map view</paper-tab>  
343 - <paper-tab>Most popular</paper-tab>  
344 - </paper-tabs>  
345 - <iron-pages selected="{{DatasourceTabSelected}}">  
346 - <div>  
347 - <div class="card-content">  
348 - <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">  
349 - <paper-menu class="dropdown-content">  
350 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
351 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
352 - </template>  
353 - </paper-menu>  
354 - </paper-dropdown-menu>  
355 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
356 - </div>  
357 -  
358 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
359 -  
360 - <div class="card-content">  
361 - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
362 - </div>  
363 -  
364 -  
365 - </div>  
366 - <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>-->  
367 - <div>  
368 - <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>  
369 - </div>  
370 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
371 - </iron-pages>  
372 - </paper-material>  
373 -  
374 - </div>  
375 -  
376 - </neon-animatable>  
377 -  
378 - <neon-animatable>  
379 -  
380 - <div class="vertical justified layout">  
381 -  
382 - <div class="horizontal layout">  
383 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
384 - <div class="avatar">2</div>  
385 - <div class="title flex">  
386 - <div id="toolbar_title" class="big">Dataset source</div>  
387 - <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div>  
388 - </div>  
389 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
390 - </div>  
391 -  
392 - <div class="horizontal layout">  
393 -  
394 - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->  
395 - <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>-->  
396 - <!--</paper-material>-->  
397 -  
398 - <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">-->  
399 - <!--<div id="table_component_place_holder"></div>-->  
400 - <!--</paper-material>-->  
401 -  
402 - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->  
403 - <div id="fields_placeholder">  
404 - <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>  
405 - </div>  
406 - <!--</paper-material>-->  
407 -  
408 - </div>  
409 -  
410 - </div>  
411 -  
412 - </neon-animatable>  
413 -  
414 - <neon-animatable>  
415 -  
416 - <div class="vertical justified layout">  
417 -  
418 - <div class="horizontal layout">  
419 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
420 - <div class="avatar">3</div>  
421 - <div class="title flex">  
422 - <div id="toolbar_title" class="big">Data mapping</div>  
423 - <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div>  
424 - </div>  
425 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
426 - </div>  
427 -  
428 -  
429 - <div class="horizontal layout">  
430 -  
431 - <div class="">  
432 - <paper-material elevation="0" id="visualization_slider_area"></paper-material>  
433 - <paper-material elevation="2" id="fields_mapping_area" class="area_container">  
434 -  
435 - <div id="selectedFields_main_container" class="field-mapping-card">  
436 - <div class="title">  
437 - <div class="medium">Selected fields</div>  
438 - </div>  
439 - <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material>  
440 - </div>  
441 -  
442 - <div id="idm_fields_main_container" class="field-mapping-card">  
443 - <div class="title">  
444 - <div class="medium">Datalet fields</div>  
445 - </div>  
446 - <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material>  
447 - </div>  
448 - </paper-material>  
449 - </div>  
450 -  
451 - <div id="datalet_placeholder"></div>  
452 -  
453 - </div>  
454 -  
455 - </div>  
456 -  
457 - </neon-animatable> 17 + <template>
458 18
459 - <neon-animatable>  
460 - <div class="vertical justified layout"> 19 + <page-slider-controllet id="slider">
461 20
462 - <div class="horizontal layout">  
463 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
464 - <div class="avatar">4</div>  
465 - <div class="title flex">  
466 - <div id="toolbar_title" class="big">Finalize visualization</div>  
467 - <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div>  
468 - </div>  
469 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
470 - </div> 21 + <neon-animatable>
471 22
472 - <div class="horizontal layout">  
473 - <div style="margin-top: 10px;">  
474 - <div class="title">  
475 - <div class="medium">Layout fields</div>  
476 - </div>  
477 - <paper-material elevation="2" id="idm_layout_main_container" class="area_container">  
478 - <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material>  
479 - </paper-material> 23 + <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
480 24
481 - <div id="comment">  
482 - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea>  
483 - </div> 25 + </neon-animatable>
484 26
485 - </div> 27 + <neon-animatable>
486 28
487 - <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div> 29 + <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>
488 30
489 - </div>  
490 - </div> 31 + </neon-animatable>
491 32
492 - </neon-animatable> 33 + <neon-animatable>
493 34
494 - </neon-animated-pages> 35 + <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} fields={{fields}}></datalet-selection-controllet>
495 36
496 - <paper-toast id="message" text=""></paper-toast> 37 + </neon-animatable>
497 38
498 - <paper-dialog id="infoDialog">  
499 - <h2 id="infoDialogTitle"></h2>  
500 - <paper-dialog-scrollable id="infoDialogContent">  
501 - </paper-dialog-scrollable>  
502 - </paper-dialog> 39 + </page-slider-controllet>
503 40
504 - </content>  
505 </template> 41 </template>
506 42
507 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
508 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
509 -  
510 <script> 43 <script>
511 44
512 Polymer({ 45 Polymer({
513 46
514 is : 'data-sevc-controllet', 47 is : 'data-sevc-controllet',
515 48
516 - /**  
517 - * Received when the user selects a datalet from slider.  
518 - *  
519 - * @event items-list-controllet_item-selected  
520 - */  
521 -  
522 - /**  
523 - * Received when the user drags a selected fields in to one of the source input data model field  
524 - *  
525 - * @event draggable-element-controllet_content-dragged  
526 - */  
527 -  
528 - /**  
529 - * Received when the user selects one field from treeview controllet  
530 - *  
531 - * @event treeview-controllet-fileds-selected  
532 - */  
533 -  
534 - /**  
535 - * Received when the user drags a selected fields in to one of the source input data model field  
536 - *  
537 - * @event draggable-element-controllet_content-dragged  
538 - */  
539 -  
540 - /**  
541 - * Received when the user change text value of the selected datalet layout inputs  
542 - *  
543 - * @event text-element-controllet_content-changed  
544 - */  
545 -  
546 - /**  
547 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
548 - *  
549 - * @event data-sevc-controllet.dataletCreated  
550 - */  
551 -  
552 listeners : { 49 listeners : {
553 - 'items-list-controllet_item-selected' : '_dataletSelected',  
554 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
555 - 'tree-view-controllet_selected-fields' : '_fieldsSelected',  
556 - 'text-element-controllet_content-changed' : '_textElementChanged',  
557 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap' 50 + 'page-slider-controllet_selected' : '_updateSlider',
  51 + 'dataset-selection-controllet_data-url' : '_updateDataUrl'
558 }, 52 },
559 53
560 properties : { 54 properties : {
561 55
562 - entryAnimation : {  
563 - type : String,  
564 - value : ""  
565 - },  
566 -  
567 - exitAnimation : {  
568 - type : String,  
569 - value : ""  
570 - },  
571 -  
572 - selected : {  
573 - type : Number,  
574 - value : 0  
575 - },  
576 -  
577 - /**  
578 - * It represents the data url from CKAN api  
579 - *  
580 - * @attribute dataUrl  
581 - * @type string  
582 - * @default 'null'  
583 - */  
584 - dataUrl : {  
585 - type : String,  
586 - value : undefined,  
587 - observer : '_dataUrlChanged'  
588 - },  
589 - /**  
590 - * It represents the DEEP url to get information about the datalets  
591 - *  
592 - * @attribute deepUrl  
593 - * @type string  
594 - * @default 'null'  
595 - */  
596 deepUrl : { 56 deepUrl : {
597 type : String, 57 type : String,
598 value : undefined 58 value : undefined
599 }, 59 },
600 - /**  
601 - * It's used to store the list of datalets returned from DEEP  
602 - *  
603 - * @attribute datalets_list  
604 - * @type Array  
605 - * @default empty  
606 - */  
607 - datalets_list : {  
608 - type : Array ,  
609 - value : []  
610 - },  
611 - /**  
612 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-list-controllet_item-selected)  
613 - *  
614 - * @attribute selectedDatalet  
615 - * @type String  
616 - * @default ''  
617 - */  
618 - selectedDatalet : {  
619 - type : String, 60 +
  61 + dataletsListUrl : {
  62 + type : String ,
620 value : undefined 63 value : undefined
621 }, 64 },
622 - /**  
623 - * It's used to store the list of selected fields by user  
624 - *  
625 - * @attribute selectedFields  
626 - * @type Array  
627 - * @default empty  
628 - */  
629 - selectedFields : { 65 +
  66 + datasets : {
630 type : Array, 67 type : Array,
631 value : undefined 68 value : undefined
632 }, 69 },
633 - /**  
634 - * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet.  
635 - */  
636 - dataletPreset:{  
637 - type: Object,  
638 - value: undefined  
639 - },  
640 - /**  
641 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
642 - *  
643 - * @attribute paramsFields  
644 - * @type Object  
645 - * @default empty  
646 - */  
647 - paramsFields:{  
648 - type: Object,  
649 - value: undefined  
650 - },  
651 - /**  
652 - * It's used to store the tab index in the first pass  
653 - *  
654 - * @attribute DatasourceTabSelected  
655 - * @type Number  
656 - * @default 0  
657 - */  
658 - DatasourceTabSelected : {  
659 - type : Number,  
660 - value : 0  
661 - },  
662 - /**  
663 - * It's used to store the datasets to show in the contexual menu  
664 - *  
665 - * @attribute datasets  
666 - * @type Array  
667 - * @default empty  
668 - */  
669 - datasets :  
670 - {  
671 - type : Array,  
672 - value : []  
673 - }  
674 - },  
675 - /**  
676 - * It is called after the element�s template has been stamped and all elements inside the element�s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
677 - * In this phase the scrollbar will be initialized  
678 - *  
679 - * @method handleResponseData  
680 - *  
681 - * @param {Event} e  
682 - */  
683 -  
684 - ready : function(){  
685 -  
686 -// $(this.$.fields_placeholder).perfectScrollbar();  
687 - $(this.$.selectedFields_main_container).perfectScrollbar();  
688 - $(this.$.idm_fields_main_container).perfectScrollbar();  
689 - $(this.$.idm_layout_main_container).perfectScrollbar();  
690 - $(this.$.table_fields_container).perfectScrollbar();  
691 -  
692 - if(this.dataletPreset != undefined) {  
693 - this.$.data_url.value = this.dataletPreset['data-url'];  
694 - this.selected = 1;  
695 - }  
696 -  
697 - //Fiefox force :O  
698 - var table_params ={  
699 - component : "datatable-datalet",  
700 - params :{  
701 - 'data-url' : this.dataUrl  
702 - },  
703 - fields : [],  
704 - placeHolder : this.$.table_component_place_holder  
705 - };  
706 -  
707 - ComponentService.deep_url = this.deepUrl;  
708 - ComponentService.getComponent(table_params);  
709 - },  
710 - /**  
711 - * Utility function to inject datalet in a placeholder  
712 - */  
713 - injectDatalet: function(place_holder){  
714 -  
715 - var datalet_params ={  
716 - component : this.selectedDatalet,  
717 - params : this.paramsFields,  
718 - fields : this.selectedFields,  
719 - placeHolder : place_holder  
720 - };  
721 - ComponentService.deep_url = this.deepUrl;  
722 - ComponentService.getComponent(datalet_params);  
723 - },  
724 -  
725 - /**  
726 - * Callback to parse the data requested when dataUrl change its value  
727 - *  
728 - * @method handleResponseData  
729 - *  
730 - * @param {Event} e  
731 - */  
732 - handleResponseData : function(e){  
733 - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));  
734 - this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));  
735 - this.$.fields_treeview.ready();//chrome  
736 - },  
737 -  
738 - /**  
739 - * Callback to parse the components response object  
740 - *  
741 - * @method handleResponseDatalets  
742 - *  
743 - * @param {Event} e  
744 - */  
745 - handleResponseDatalets : function(e){  
746 - this.datalets_list = new Array();  
747 - for(var i=0;i < e.detail.response.length;i++){  
748 - var datalet_info = { name : e.detail.response[i].name ,  
749 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
750 - };  
751 -  
752 - this.datalets_list.push(datalet_info);  
753 - }  
754 -  
755 - if(this.selectedDatalet == undefined)  
756 - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
757 - '<items-list-controllet' +  
758 - ' replace-string="-datalet"' +  
759 - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +  
760 - '</items-list-controllet>' +  
761 - '</animated-button-container-controllet>';  
762 - else  
763 - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
764 - '<items-list-controllet' +  
765 - ' replace-string="-datalet"' +  
766 - ' selected-card=\'' + this.selectedDatalet + '\'' +  
767 - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +  
768 - '</items-list-controllet>' +  
769 - '</animated-button-container-controllet>';  
770 -  
771 - },  
772 - /**  
773 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
774 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
775 - *  
776 - * @method handleSelectedDatalet  
777 - *  
778 - * @param {Event} e  
779 - */  
780 - handleSelectedDatalet : function(e){  
781 -  
782 - var response = e.detail.response;  
783 - this.$.datalet_idm_fields_container.innerHTML = "";  
784 - this.$.idm_layout_container.innerHTML = "";  
785 -  
786 - var input;  
787 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
788 -  
789 - if(response.idm.inputs.input.constructor == Object) {  
790 - if(response.idm.inputs.input.selection == "*")  
791 - {  
792 - var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet');  
793 - input = response.idm.inputs.input;  
794 - response.idm.inputs.input = new Array();  
795 - for(var i=0;i<fields.length;i++){  
796 - var newInput = jQuery.extend(true, {}, input);  
797 - newInput.name = input.name + ' ' + (i + 1);  
798 - response.idm.inputs.input.push(newInput);  
799 - }  
800 - }  
801 - }  
802 -  
803 - var heading;  
804 - var id;  
805 -  
806 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
807 - var html = '<draggable-element-controllet is-target="true" ';  
808 - input = response.idm.inputs.input[i];  
809 -  
810 - heading = ' heading="' + input.name + '"';  
811 - id = ' id="' + (i + 1) + '"';  
812 -  
813 - html += heading + id;  
814 - html += ' description="' + input.description + '"' +  
815 - ' number="' + (i + 1) + '"';  
816 -  
817 - if(this.selectedFields != undefined) {  
818 - if(this.selectedFields[i] != undefined) {  
819 - html += ' value="' + this.selectedFields[i] + '"' +  
820 - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"';  
821 - }  
822 - }  
823 -  
824 - html += '></draggable-element-controllet>';  
825 - this.$.datalet_idm_fields_container.innerHTML += html;  
826 -  
827 - }  
828 70
829 - if(layouts.input != undefined) {  
830 - if(layouts.input.constructor == Object){  
831 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
832 - }  
833 -  
834 - html = '<text-element-controllet ';  
835 - for (var i = 0; i < layouts.input.length; i++) {  
836 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
837 - 'description="' + layouts.input[i].description + '" ' +  
838 - 'number="' + (i + 1) + '" ';  
839 - if(this.dataletPreset != undefined){  
840 - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';  
841 - } 71 + dataUrl : {
  72 + type : String,
  73 + value : undefined
  74 + },
842 75
843 - html += '></text-element-controllet>';  
844 - }  
845 - this.$.idm_layout_container.innerHTML = html; 76 + jsonData : {
  77 + type : Object,
  78 + value : undefined
846 } 79 }
847 80
848 - if(this.selectedFields != undefined) this.generateDataletPreview();  
849 -  
850 }, 81 },
851 - /**  
852 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
853 - *  
854 - * @method generateDataletPreview  
855 - */  
856 - generateDataletPreview : function(){  
857 -  
858 - var input_mapped_fields = this.$.datalet_idm_fields_container.querySelectorAll('draggable-element-controllet[is-target=true]');  
859 - this.selectedFields = Array();  
860 -  
861 - for (var i = 0; i < input_mapped_fields.length; i++) {  
862 - if (input_mapped_fields[i].value != "") {  
863 - this.selectedFields.push(input_mapped_fields[i].value);  
864 - }  
865 - }  
866 -  
867 - var input_layouts_fields = this.$.idm_layout_container.querySelectorAll('text-element-controllet');  
868 - this.paramsFields = {'data-url' : this.dataUrl};  
869 -  
870 - for (var i = 0; i < input_layouts_fields.length; i++) {  
871 - if (input_layouts_fields[i].value != "") {  
872 - this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
873 - }  
874 - }  
875 -  
876 - this.injectDatalet(this.$.datalet_placeholder);  
877 82
  83 + ready : function(){
878 }, 84 },
879 - /**  
880 - * Validate the current pass in order to access to next one.  
881 - *  
882 - * @method validateCurrentPass  
883 - *  
884 - * @param {Number} next_selected_pass  
885 - */  
886 - validateCurrentPass : function(next_selected_pass){  
887 85
888 - switch(next_selected_pass){ 86 + _updateSlider : function(e){
  87 + switch (e.detail.selected) {
889 case 0: 88 case 0:
890 - this.$.data_url.value = "";  
891 - this.$.fields_treeview.setAttribute("json-data", null);  
892 - this.$.fields_treeview.setAttribute("preselected-fields", null);  
893 - this.$.fields_treeview.ready();//chrome  
894 - return true; 89 + slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
  90 + slider.chevronLeft(false);
  91 + slider.chevronRight(false);
  92 + this.$.dataset_selection._fireDataUrl();
  93 +// http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
  94 + break;
895 case 1: 95 case 1:
896 - var x = this.$.fields_treeview.getAttribute("json-data");  
897 - if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){  
898 - this.$.message.text = "You have to select a dataset to access to pass 2. It's possible that the data you selected are not available.";  
899 - this.$.message.show();  
900 - return false;  
901 - }else{  
902 - return true;  
903 - }  
904 - 96 + slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
  97 +// slider.chevronRight(false);
  98 + this.$.tree_view_multi_table.ready();
  99 + break;
905 case 2: 100 case 2:
906 - if(this.selectedFields == undefined || this.selectedFields.length == 0){  
907 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
908 - this.$.message.show();  
909 - return false;  
910 - }else{  
911 - this.$.datalet_placeholder_2.innerHTML = "";  
912 - if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder);  
913 - return true;  
914 - }  
915 - case 3:  
916 - if(this.paramsFields == undefined){  
917 - this.$.message.text = "You have to select a datalet and map the selected fields to datalets fields(by drag and drop) to access to pass 4.";  
918 - this.$.message.show();  
919 - return false;  
920 - }else{  
921 - this.$.datalet_placeholder.innerHTML = "";  
922 - this.injectDatalet(this.$.datalet_placeholder_2);  
923 - return true;  
924 - } 101 + slider.setTitle("SELECT DATALET", "Select a visualization, fill out inputs and labels (optional).");
  102 + slider.chevronRight(false);
  103 + this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields());//???
  104 + this.$.datalet_selection.ready();//???
925 } 105 }
926 -  
927 - },  
928 - /**  
929 - * Callback for manage the previous pass button  
930 - *  
931 - * @method _onPrevClick  
932 - *  
933 - */  
934 - _onPrevClick : function() {  
935 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
936 -  
937 - this.entryAnimation = 'slide-from-left-animation';  
938 - this.exitAnimation = 'slide-right-animation';  
939 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
940 - },  
941 - /**  
942 - * Callback to manage the next pass button  
943 - *  
944 - * @method _onNextClick  
945 - *  
946 - */  
947 - _onNextClick : function() {  
948 -  
949 - if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;  
950 -  
951 - this.entryAnimation = 'slide-from-right-animation';  
952 - this.exitAnimation = 'slide-left-animation';  
953 - this.selected = this.selected === 3 ? 3 : (this.selected + 1);  
954 - },  
955 - /**  
956 - * Callback to manage InfoButton click to give user information about the selected dataset  
957 - *  
958 - */  
959 - _onInfoClick : function(){  
960 -  
961 - this.$.infoDialog.open();  
962 -  
963 }, 106 },
964 - /**  
965 - * Callback related to datasource selection from select menu  
966 - *  
967 - * @method _datasourceSelected  
968 - *  
969 - * @param {Event} e  
970 - */  
971 - _datasourceSelected : function(e){  
972 107
973 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
974 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
975 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description; 108 + _updateDataUrl : function(e){
  109 + this.dataUrl = e.detail.url;
976 110
977 - },  
978 - /**  
979 - * Callback related to data url change  
980 - *  
981 - * @method _dataUrlChanged  
982 - *  
983 - * @param {Event} e  
984 - */  
985 - _dataUrlChanged : function(newValue, oldValue){  
986 - this.$.data_request.generateRequest();  
987 - },  
988 - /**  
989 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
990 - *  
991 - * @method _dataletSelected  
992 - *  
993 - * @param {Event} e  
994 - */  
995 - _dataletSelected : function(e){  
996 - this.selectedDatalet = e.detail.datalet;  
997 - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet;  
998 - this.$.selectedDatalet_request.generateRequest();  
999 -  
1000 - },  
1001 - /**  
1002 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
1003 - *  
1004 - * @method _fieldsSelected  
1005 - *  
1006 - * @param {Event} e  
1007 - */  
1008 - _fieldsSelected : function(e){  
1009 -  
1010 - this.selectedFields = e.detail.fields;  
1011 - this.$.selectedFields_container.innerHTML = "";  
1012 - for(var i=0;i<e.detail.fields.length;i++) {  
1013 - this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
1014 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
1015 - '"></draggable-element-controllet><br>';  
1016 - }  
1017 -  
1018 - var table_params ={  
1019 - component : "datatable-datalet",  
1020 - params :{  
1021 - 'data-url' : this.dataUrl 111 + $.ajax({
  112 + url: e.detail.url,
  113 + dataType: "json",
  114 + success: function(data){
  115 +// this.dataUrl = e.detail.url
  116 +// this.jsonData = JSON.stringify(data);
  117 + slider.chevronRight(true);
1022 }, 118 },
1023 - fields : e.detail.fields,  
1024 - placeHolder : this.$.table_component_place_holder  
1025 - };  
1026 -  
1027 - ComponentService.deep_url = this.deepUrl;  
1028 - ComponentService.getComponent(table_params);  
1029 -  
1030 -  
1031 - },  
1032 - /**  
1033 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
1034 - *  
1035 - * @method _fieldsMapped  
1036 - *  
1037 - * @param {Event} e  
1038 - */  
1039 - _fieldsMapped : function(e){  
1040 -  
1041 - this.generateDataletPreview();  
1042 -  
1043 - },  
1044 - /**  
1045 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
1046 - *  
1047 - * @method _textElementChanged  
1048 - *  
1049 - * @param {Event} e  
1050 - */  
1051 - _textElementChanged : function(e){  
1052 - if(this.selected == 3) {  
1053 - this.generateDataletPreview();  
1054 - this.$.datalet_placeholder.innerHTML = "";  
1055 - this.injectDatalet(this.$.datalet_placeholder_2);  
1056 - }  
1057 - },  
1058 - /**  
1059 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
1060 - *  
1061 - * @method _handleDatasourceDragOver  
1062 - *  
1063 - * @param {Event} e  
1064 - */  
1065 - _handleDatasourceDragOver : function(e){  
1066 - this.$.data_url.value = "";  
1067 - },  
1068 - /**  
1069 - * Callback related to the finish button.  
1070 - *  
1071 - * @method _onFinish  
1072 - *  
1073 - * @param {Event} e  
1074 - */  
1075 - _onFinish : function(e){  
1076 -  
1077 - if((this.selectedFields.length == 0) || this.selectedDatalet == ""){  
1078 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
1079 - this.$.message.show();  
1080 - return;  
1081 - }  
1082 -  
1083 - var data = {  
1084 - dataUrl : this.dataUrl,  
1085 - params : this.paramsFields,  
1086 - fields : this.selectedFields,  
1087 - datalet : this.selectedDatalet,  
1088 - comment : this.$.commentArea.value,  
1089 - staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data)  
1090 - }  
1091 -  
1092 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
1093 -  
1094 - },  
1095 -  
1096 - //tree map  
1097 - _selectDataUrl_treeMap : function(e){  
1098 - var url = e.detail.url;  
1099 -// url = url.split('/');  
1100 -// var index = url.indexOf('resource')  
1101 -// if (index != -1) { // ckan  
1102 -// var resourceId = url[index + 1];  
1103 -// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;  
1104 -//  
1105 -// } else  
1106 -// url = "sorry, data provider not supported yet";  
1107 -  
1108 - this.dataUrl = url;  
1109 - this.DatasourceTabSelected=0;  
1110 - }, 119 + error: function(){
  120 +// this.jsonData = undefined;
  121 + slider.chevronRight(false);
  122 + }
  123 + });
  124 + }
1111 125
1112 }); 126 });
1113 127
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @0f6424f
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 16
17 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" /> 17 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
18 18
19 -<link rel="import" href="../../datalets/datatable-datalet/datatable-datalet.html" /> 19 +<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
20 20
21 <dom-module id="datalet-selection-controllet"> 21 <dom-module id="datalet-selection-controllet">
22 22
@@ -28,6 +28,7 @@ @@ -28,6 +28,7 @@
28 display: flex; 28 display: flex;
29 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 29 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
30 font-size: 16px; 30 font-size: 16px;
  31 + margin-top: 8px;
31 } 32 }
32 33
33 #datalet_selection_inputs { 34 #datalet_selection_inputs {
@@ -145,9 +146,13 @@ @@ -145,9 +146,13 @@
145 paper-button:hover { 146 paper-button:hover {
146 background-color: #00AABF; 147 background-color: #00AABF;
147 } 148 }
  149 +
  150 + paper-button[disabled] {
  151 + background-color: #B6B6B6;
  152 + }
148 </style> 153 </style>
149 154
150 - <iron-ajax id="selectedDatalet_request" on-response="handleSelectedDatalet"></iron-ajax> 155 + <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
151 156
152 <div id="datalet_selection_container"> 157 <div id="datalet_selection_container">
153 <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet> 158 <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet>
@@ -165,7 +170,7 @@ @@ -165,7 +170,7 @@
165 </div> 170 </div>
166 <paper-dropdown-menu no-label-float label={{item.name}}> 171 <paper-dropdown-menu no-label-float label={{item.name}}>
167 <paper-menu class="dropdown-content"> 172 <paper-menu class="dropdown-content">
168 - <template is="dom-repeat" items={{fields}}> 173 + <template is="dom-repeat" items={{selectableFields}}>
169 <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item> 174 <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item>
170 </template> 175 </template>
171 </paper-menu> 176 </paper-menu>
@@ -193,7 +198,7 @@ @@ -193,7 +198,7 @@
193 <div id="datalet_selection_column"> 198 <div id="datalet_selection_column">
194 <paper-material id="datalet_selection_comment" elevation="5"> 199 <paper-material id="datalet_selection_comment" elevation="5">
195 <div class="input_header">COMMENT</div> 200 <div class="input_header">COMMENT</div>
196 - <paper-textarea no-label-float label="comment (max 100 characters)"></paper-textarea> 201 + <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
197 </paper-material> 202 </paper-material>
198 203
199 <paper-material id="datalet_selection_datalet" elevation="5"> 204 <paper-material id="datalet_selection_datalet" elevation="5">
@@ -202,7 +207,7 @@ @@ -202,7 +207,7 @@
202 207
203 </paper-material> 208 </paper-material>
204 209
205 - <paper-button raised>ADD DATALET</paper-button> 210 + <paper-button id="add_button" disabled raised on-click="_addDatalet">ADD DATALET</paper-button>
206 211
207 </div> 212 </div>
208 213
@@ -245,18 +250,29 @@ @@ -245,18 +250,29 @@
245 250
246 fields : { 251 fields : {
247 type : Array, 252 type : Array,
248 - value : ["result,records,Lat","result,records,Lng"] 253 + value : []
  254 + },
  255 +
  256 + selectedFields : {
  257 + type : Array,
  258 + value : []
  259 + },
  260 +
  261 + selectableFields : {
  262 + type : Array,
  263 + value : []
249 }, 264 },
250 265
251 dataUrl : { 266 dataUrl : {
252 type : String, 267 type : String,
253 - value : " http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000" 268 + value : undefined
254 } 269 }
255 270
256 }, 271 },
257 272
258 listeners: { 273 listeners: {
259 'items-vslider-controllet_selected-datalet': '_dataletSelected' 274 'items-vslider-controllet_selected-datalet': '_dataletSelected'
  275 +// 'tree-view-controllet_selected-fields': '_updateSelectedFields'
260 }, 276 },
261 277
262 ready : function() { 278 ready : function() {
@@ -264,6 +280,8 @@ @@ -264,6 +280,8 @@
264 $(this.$.datalet_selection_inputs).perfectScrollbar(); 280 $(this.$.datalet_selection_inputs).perfectScrollbar();
265 $(this.$.datalet_selection_labels).perfectScrollbar(); 281 $(this.$.datalet_selection_labels).perfectScrollbar();
266 $(this.$.datalet_selection_datalet).perfectScrollbar(); 282 $(this.$.datalet_selection_datalet).perfectScrollbar();
  283 +
  284 + this.selectableFields = this._copy(this.fields);
267 }, 285 },
268 286
269 attached : function() { 287 attached : function() {
@@ -272,26 +290,68 @@ @@ -272,26 +290,68 @@
272 window.addEventListener("resize", function() { that._resize(); }); 290 window.addEventListener("resize", function() { that._resize(); });
273 }, 291 },
274 292
  293 + setFields : function(fields) {
  294 + this.fields = fields;
  295 + },
  296 +
  297 + _loadPreview : function() {
  298 +// if(!this.selectedDatalet)
  299 +// return false;//delete load
  300 +//
  301 +// for(var i in this.inputs){
  302 +// console.log(this.inputs[i]);
  303 +// }
  304 +//
  305 +//
  306 +// var inputs = document.getElementsByClassName("prova");
  307 +// console.log(inputs);
  308 +//
  309 +// return true;
  310 + },
  311 +
  312 +// _updateSelectedFields : function(e) {//////male male
  313 +// console.log(e.detail);
  314 +// console.log("ciao");
  315 +// },
  316 +
275 _dataletSelected : function(e){ 317 _dataletSelected : function(e){
  318 + this.$.add_button.setAttribute("disabled", "true");
  319 +
276 this.selectedDatalet = e.detail.datalet; 320 this.selectedDatalet = e.detail.datalet;
  321 + this.inputs = [];
  322 + this.labels = [];
  323 +
277 if(this.selectedDatalet){ 324 if(this.selectedDatalet){
278 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet"; 325 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
279 this.$.selectedDatalet_request.generateRequest(); 326 this.$.selectedDatalet_request.generateRequest();
280 } 327 }
281 - else  
282 - this.inputs = [] 328 +// else {
  329 +// this.inputs = [];
  330 +// this.labels = [];
  331 +// }
  332 +
  333 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  334 + this.selectedFields = [];
  335 +
  336 +// this.async(function(){this._loadPreview();}, 1000);
  337 + this._loadPreview();
283 }, 338 },
284 339
285 - handleSelectedDatalet : function(e){ 340 + _handleSelectedDatalet : function(e){
  341 +
  342 +
  343 +// console.log(e.detail.response.idm.inputs);
286 // console.log(e.detail.response.idm.inputs.layouts.input); 344 // console.log(e.detail.response.idm.inputs.layouts.input);
287 var inputs = e.detail.response.idm.inputs.input; 345 var inputs = e.detail.response.idm.inputs.input;
288 var labels = e.detail.response.idm.inputs.layouts.input; 346 var labels = e.detail.response.idm.inputs.layouts.input;
289 347
290 if(inputs.constructor == Object) {//not Array && inputs.input.selection == "*" 348 if(inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
291 var name = inputs.name; 349 var name = inputs.name;
  350 + var description = inputs.description;
  351 + var selection = inputs.selection;
292 inputs = []; 352 inputs = [];
293 for(var i in this.fields) 353 for(var i in this.fields)
294 - inputs.push({name: name + " " + i}); 354 + inputs.push({name: name + " " + i, description: description, selection: selection});
295 355
296 } 356 }
297 357
@@ -299,15 +359,83 @@ @@ -299,15 +359,83 @@
299 this.labels = labels; 359 this.labels = labels;
300 }, 360 },
301 361
302 - _loadDatalet : function(){  
303 -// this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\""+this.dataUrl+"\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'></datatable-datalet>";  
304 - 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"; 362 + _copy : function(o) {
  363 + var out, v, key;
  364 + out = Array.isArray(o) ? [] : {};
  365 + for (key in o) {
  366 + v = o[key];
  367 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  368 + }
  369 + return out;
  370 + },
  371 +
  372 + _loadDatalet : function(e){
  373 + var selectedFields = this._copy(this.selectedFields);
  374 +// var selectableFields = this._copy(this.selectableFields);
  375 +
  376 + if($(e.target).parents("paper-dropdown-menu")[0].selectedItem) {
  377 + var prevSelected = $(e.target).parents("paper-dropdown-menu")[0].selectedItem.innerText;
  378 + var index = this.selectedFields.indexOf(prevSelected);
  379 + selectedFields.splice(index, 1);
  380 +// selectableFields.push(prevSelected);
  381 + }
  382 +
  383 + var selected = e.target.innerText;
  384 +// var index = this.selectableFields.indexOf(selected);
  385 +// selectableFields.splice(index, 1);
  386 + selectedFields.push(selected);
  387 +
  388 + this.selectedFields = selectedFields;
  389 +// this.selectableFields = selectableFields;
  390 +
  391 +// console.log(this.selectedFields);
  392 +// console.log(this.selectableFields);
  393 +
  394 + var load = false;
  395 + if(this.selectedFields.length > 0 && this.inputs[0].selection == "*")
  396 + load = true;
  397 + else if(this.selectedFields.length == this.inputs.length)
  398 + load = true;
  399 +
  400 + if(load){
  401 + var params = {'data-url' : this.dataUrl};
  402 +
  403 + var dataletParams ={
  404 + component : this.selectedDatalet+"-datalet",
  405 + params : params,
  406 + fields : this.selectedFields,
  407 + placeHolder : datalet_selection_datalet_placeholder
  408 + };
  409 +
  410 + ComponentService.deep_url = this.deepUrl;
  411 + ComponentService.getComponent(dataletParams);
  412 +
  413 + this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
  414 + }
  415 +
  416 +// 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";
  417 +// this.$.datalet_selection_datalet_placeholder.innerHTML = "<"+this.selectedDatalet+"-datalet data-url=\""+this.dataUrl+"\" fields='"+JSON.stringify(this.fields)+"'></"+this.selectedDatalet+">";
305 418
306 // $("#base_datalet_container").html(""); 419 // $("#base_datalet_container").html("");
307 $("#base_datalet_container").css('visibility','hidden'); 420 $("#base_datalet_container").css('visibility','hidden');
308 $("#base_datalet_container").css('padding','0px'); 421 $("#base_datalet_container").css('padding','0px');
309 $("#base_datalet_container").css('height','0px'); 422 $("#base_datalet_container").css('height','0px');
310 // console.log($("#base_datalet_container")); 423 // console.log($("#base_datalet_container"));
  424 + },
  425 +
  426 + _addDatalet : function(){console.log("we");
  427 +
  428 + var data = {
  429 + dataUrl : this.dataUrl,
  430 +// params : this.paramsFields,
  431 + params : {'data-url' : this.dataUrl},
  432 + fields : this.selectedFields,
  433 + datalet : this.selectedDatalet+"-datalet",
  434 + comment : this.$.comment.value,
  435 + staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
  436 + }
  437 +
  438 + this.fire('data-sevc-controllet.dataletCreated', {data : data});
311 439
312 }, 440 },
313 441
controllets/datalet-selection-controllet/demo/index.html
  View file @0f6424f
@@ -13,6 +13,13 @@ @@ -13,6 +13,13 @@
13 13
14 <body> 14 <body>
15 15
16 -<datalet-selection-controllet deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet> 16 +<datalet-selection-controllet deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list" fields='["result,records,Lat","result,records,Lng"]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"></datalet-selection-controllet>
17 17
18 </body> 18 </body>
  19 +
  20 +<!--urls:-->
  21 +<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
  22 +<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
  23 +<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
  24 +<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->
  25 +<!--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',-->
19 \ No newline at end of file 26 \ No newline at end of file
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @0f6424f
@@ -56,12 +56,22 @@ @@ -56,12 +56,22 @@
56 color: #B6B6B6; 56 color: #B6B6B6;
57 } 57 }
58 58
59 - paper-dropdown-menu { 59 + /*paper-dropdown-menu {*/
  60 + /*width: 45%;*/
  61 + /*margin-bottom: 32px;*/
  62 + /*--paper-input-container-focus-color: #2196F3;*/
  63 + /*}*/
  64 +
  65 + paper-input-search {
60 width: 45%; 66 width: 45%;
61 margin-bottom: 32px; 67 margin-bottom: 32px;
62 --paper-input-container-focus-color: #2196F3; 68 --paper-input-container-focus-color: #2196F3;
63 } 69 }
64 70
  71 + paper-input-search paper-item {
  72 + white-space: nowrap;
  73 + }
  74 +
65 paper-item.iron-selected { 75 paper-item.iron-selected {
66 background-color: #2196F3; 76 background-color: #2196F3;
67 color: #FFFFFF; 77 color: #FFFFFF;
@@ -120,7 +130,7 @@ @@ -120,7 +130,7 @@
120 130
121 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap"> 131 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap">
122 <paper-tab noink>SELECT DATA SOURCE</paper-tab> 132 <paper-tab noink>SELECT DATA SOURCE</paper-tab>
123 - <paper-tab noink>TREE MAP SEARCH</paper-tab> 133 + <paper-tab noink>TREE MAP VIEW</paper-tab>
124 <paper-tab noink disabled>MOST POPULAR</paper-tab> 134 <paper-tab noink disabled>MOST POPULAR</paper-tab>
125 </paper-tabs> 135 </paper-tabs>
126 136
@@ -129,16 +139,18 @@ @@ -129,16 +139,18 @@
129 <neon-animatable> 139 <neon-animatable>
130 140
131 <div id="div_selection"> 141 <div id="div_selection">
  142 +
132 <paper-input-search label="Available datasets"> 143 <paper-input-search label="Available datasets">
133 <paper-menu class="dropdown-content"> 144 <paper-menu class="dropdown-content">
134 - <template is="dom-repeat" items={{datasets}} as="dataset"> 145 + <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
135 <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> 146 <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  147 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
136 </template> 148 </template>
137 </paper-menu> 149 </paper-menu>
138 </paper-input-search> 150 </paper-input-search>
139 151
140 <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> 152 <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
141 - 153 + <!--aggiustami anche dialog...-->
142 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea> 154 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
143 155
144 <paper-dialog id="dialog_info"> 156 <paper-dialog id="dialog_info">
@@ -182,6 +194,11 @@ @@ -182,6 +194,11 @@
182 value : undefined 194 value : undefined
183 }, 195 },
184 196
  197 + filteredDatasets : {
  198 + type : Array,
  199 + value : []
  200 + },
  201 +
185 dataUrl : { 202 dataUrl : {
186 type : String, 203 type : String,
187 value : undefined, 204 value : undefined,
@@ -191,7 +208,8 @@ @@ -191,7 +208,8 @@
191 }, 208 },
192 209
193 listeners: { 210 listeners: {
194 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap' 211 + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap',
  212 + 'paper-input-search_input-value' : '_filterDatasets'
195 }, 213 },
196 214
197 ready : function(){ 215 ready : function(){
@@ -202,6 +220,19 @@ @@ -202,6 +220,19 @@
202 this._resize(); 220 this._resize();
203 var that = this; 221 var that = this;
204 window.addEventListener("resize", function() { that._resize(); }); 222 window.addEventListener("resize", function() { that._resize(); });
  223 +
  224 + this.filteredDatasets = this.datasets;
  225 + },
  226 +
  227 + _filterDatasets : function(e){
  228 + var filter = e.detail.inputValue;console.log(filter);
  229 + var filteredDatasets = [];
  230 + for (var i in this.datasets){
  231 + if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1)
  232 + filteredDatasets.push(this.datasets[i]);
  233 + }
  234 +
  235 + this.filteredDatasets = filteredDatasets;
205 }, 236 },
206 237
207 _loadTreeMap : function(){ 238 _loadTreeMap : function(){
@@ -246,6 +277,10 @@ @@ -246,6 +277,10 @@
246 this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); 277 this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
247 }, 278 },
248 279
  280 +// _addHTMLSpace : function(name){
  281 +// return name.replace(/ /g, '&nbsp;');
  282 +// },
  283 +
249 _resize : function(){ 284 _resize : function(){
250 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; 285 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
251 h = h - 64 - 8; //height with page scroller 286 h = h - 64 - 8; //height with page scroller
controllets/dataset-selection-controllet/demo/index.html
  View file @0f6424f
@@ -38,6 +38,7 @@ @@ -38,6 +38,7 @@
38 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"}; 38 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
39 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"}; 39 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"};
40 var datasets = [dataset1, dataset2, dataset3]; 40 var datasets = [dataset1, dataset2, dataset3];
  41 + var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
41 42
42 var ds = document.getElementById('ds'); 43 var ds = document.getElementById('ds');
43 ds.setAttribute("datasets", JSON.stringify(datasets)); 44 ds.setAttribute("datasets", JSON.stringify(datasets));
controllets/dataset-selection-controllet/paper-input-search.html
  View file @0f6424f
@@ -79,7 +79,7 @@ respectively. @@ -79,7 +79,7 @@ respectively.
79 display: inline-block; 79 display: inline-block;
80 position: relative; 80 position: relative;
81 text-align: left; 81 text-align: left;
82 - /*cursor: pointer;*/ 82 + cursor: pointer;
83 83
84 /* NOTE(cdata): Both values are needed, since some phones require the 84 /* NOTE(cdata): Both values are needed, since some phones require the
85 * value to be `transparent`. 85 * value to be `transparent`.
@@ -131,7 +131,8 @@ respectively. @@ -131,7 +131,8 @@ respectively.
131 } 131 }
132 132
133 iron-icon { 133 iron-icon {
134 - color: var(--disabled-text-color); 134 + /*color: var(--disabled-text-color);*/
  135 + color: #2196F3;
135 136
136 @apply(--paper-dropdown-menu-icon); 137 @apply(--paper-dropdown-menu-icon);
137 } 138 }
@@ -141,7 +142,7 @@ respectively. @@ -141,7 +142,7 @@ respectively.
141 <paper-menu-button 142 <paper-menu-button
142 id="menuButton" 143 id="menuButton"
143 vertical-align="top" 144 vertical-align="top"
144 - horizontal-align="right" 145 + horizontal-align="left"
145 vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" 146 vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
146 disabled="[[disabled]]" 147 disabled="[[disabled]]"
147 no-animations="[[noAnimations]]" 148 no-animations="[[noAnimations]]"
@@ -149,14 +150,16 @@ respectively. @@ -149,14 +150,16 @@ respectively.
149 on-iron-deselect="_onIronDeselect" 150 on-iron-deselect="_onIronDeselect"
150 opened="{{opened}}"> 151 opened="{{opened}}">
151 <div class="dropdown-trigger"> 152 <div class="dropdown-trigger">
152 - <paper-ripple></paper-ripple> 153 + <!--<paper-ripple></paper-ripple>-->
153 <paper-input 154 <paper-input
  155 + id="inputField"
154 invalid="[[invalid]]" 156 invalid="[[invalid]]"
155 - value="[[selectedItemLabel]]" 157 + value="{{inputValue}}"
156 placeholder="[[placeholder]]" 158 placeholder="[[placeholder]]"
157 always-float-label="[[alwaysFloatLabel]]" 159 always-float-label="[[alwaysFloatLabel]]"
158 no-label-float="[[noLabelFloat]]" 160 no-label-float="[[noLabelFloat]]"
159 label="[[label]]"> 161 label="[[label]]">
  162 + <iron-icon icon="search" prefix></iron-icon>
160 <iron-icon icon="arrow-drop-down" suffix></iron-icon> 163 <iron-icon icon="arrow-drop-down" suffix></iron-icon>
161 </paper-input> 164 </paper-input>
162 </div> 165 </div>
@@ -199,7 +202,7 @@ respectively. @@ -199,7 +202,7 @@ respectively.
199 selectedItemLabel: { 202 selectedItemLabel: {
200 type: String, 203 type: String,
201 notify: true, 204 notify: true,
202 - readOnly: true, 205 + readOnly: true
203 }, 206 },
204 207
205 /** 208 /**
@@ -275,6 +278,17 @@ respectively. @@ -275,6 +278,17 @@ respectively.
275 noAnimations: { 278 noAnimations: {
276 type: Boolean, 279 type: Boolean,
277 value: false 280 value: false
  281 + },
  282 +
  283 + inputValue: {
  284 + type: String,
  285 + value: undefined,
  286 + observer: '_fireInputValue'
  287 + },
  288 +
  289 + fireInputValue: {
  290 + type: Boolean,
  291 + value: true,
278 } 292 }
279 }, 293 },
280 294
@@ -293,7 +307,7 @@ respectively. @@ -293,7 +307,7 @@ respectively.
293 }, 307 },
294 308
295 observers: [ 309 observers: [
296 - '_selectedItemChanged(selectedItem)' 310 +// '_selectedItemChanged(selectedItem)'
297 ], 311 ],
298 312
299 attached: function() { 313 attached: function() {
@@ -307,6 +321,19 @@ respectively. @@ -307,6 +321,19 @@ respectively.
307 } 321 }
308 }, 322 },
309 323
  324 + _fireInputValue: function() {console.log(this.inputValue);
  325 + if(this.fireInputValue) {//change NO DDL
  326 + this.fire('paper-input-search_input-value', {inputValue: this.inputValue});
  327 + if(this.contentElement.selectedItem){
  328 +// this._setSelectedItem(null);
  329 + this.contentElement.select(-1);
  330 + console.log("deselected");
  331 + }
  332 + }
  333 +
  334 + this.fireInputValue = true;
  335 + },
  336 +
310 /** 337 /**
311 * The content element that is contained by the dropdown menu, if any. 338 * The content element that is contained by the dropdown menu, if any.
312 */ 339 */
@@ -334,7 +361,10 @@ respectively. @@ -334,7 +361,10 @@ respectively.
334 * @param {CustomEvent} event An `iron-select` event. 361 * @param {CustomEvent} event An `iron-select` event.
335 */ 362 */
336 _onIronSelect: function(event) { 363 _onIronSelect: function(event) {
  364 +// console.log("select");
  365 + this.fireInputValue = false;
337 this._setSelectedItem(event.detail.item); 366 this._setSelectedItem(event.detail.item);
  367 + this.inputValue = event.detail.item.label || event.detail.item.textContent.trim();
338 }, 368 },
339 369
340 /** 370 /**
@@ -343,6 +373,8 @@ respectively. @@ -343,6 +373,8 @@ respectively.
343 * @param {CustomEvent} event An `iron-deselect` event. 373 * @param {CustomEvent} event An `iron-deselect` event.
344 */ 374 */
345 _onIronDeselect: function(event) { 375 _onIronDeselect: function(event) {
  376 +// console.log("deselect");
  377 + this.fireInputValue = false;
346 this._setSelectedItem(null); 378 this._setSelectedItem(null);
347 }, 379 },
348 380
@@ -355,6 +387,11 @@ respectively. @@ -355,6 +387,11 @@ respectively.
355 if (Polymer.Gestures.findOriginalTarget(event) === this) { 387 if (Polymer.Gestures.findOriginalTarget(event) === this) {
356 this.open(); 388 this.open();
357 } 389 }
  390 + this.async(function(){this.$.inputField.$.input.focus();},200);//to improve
  391 +// console.log(this.selectedItemLabel);
  392 +// console.log(this.value);
  393 +// console.log(this.$.inputField.value);
  394 +// console.log(this.inputValue);
358 }, 395 },
359 396
360 /** 397 /**
@@ -363,17 +400,18 @@ respectively. @@ -363,17 +400,18 @@ respectively.
363 * @param {Element} selectedItem A selected Element item, with an 400 * @param {Element} selectedItem A selected Element item, with an
364 * optional `label` property. 401 * optional `label` property.
365 */ 402 */
366 - _selectedItemChanged: function(selectedItem) {  
367 - var value = '';  
368 - if (!selectedItem) {  
369 - value = '';  
370 - } else {  
371 - value = selectedItem.label || selectedItem.textContent.trim();  
372 - }  
373 -  
374 - this._setValue(value);  
375 - this._setSelectedItemLabel(value);  
376 - }, 403 +// _selectedItemChanged: function(selectedItem) {
  404 +// var value = '';
  405 +// if (!selectedItem) {
  406 +// value = '';
  407 +// } else {
  408 +// value = selectedItem.label || selectedItem.textContent.trim();
  409 +// }
  410 +//
  411 +// this._setValue(value);
  412 +// this._setSelectedItemLabel(value);
  413 +// this.inputValue = selectedItem.label || selectedItem.textContent.trim();
  414 +// },
377 415
378 /** 416 /**
379 * Compute the vertical offset of the menu based on the value of 417 * Compute the vertical offset of the menu based on the value of
@@ -388,7 +426,8 @@ respectively. @@ -388,7 +426,8 @@ respectively.
388 // template. The metrics will change depending on whether or not the 426 // template. The metrics will change depending on whether or not the
389 // input has a floating label. 427 // input has a floating label.
390 // return noLabelFloat ? -4 : 8; 428 // return noLabelFloat ? -4 : 8;
391 - return 64; 429 + return noLabelFloat ? 46-4 : 46+8;
  430 +// return 64;
392 }, 431 },
393 432
394 /** 433 /**
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html 100644 → 100755
  View file @0f6424f
@@ -31,24 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -31,24 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
31 height: 90%; 31 height: 90%;
32 } 32 }
33 33
34 - .grid-item-c0 {background-color: #0D47A1;}  
35 - .grid-item-c1 {background-color: #1976D2;}  
36 - .grid-item-c2 {background-color: #2196F3;}  
37 - .grid-item-c3 {background-color: #64B5F6;}  
38 - .grid-item-c4 {background-color: #BBDEFB;}  
39 -  
40 - .grid-item-c0-l {background-color: #1565C0;}  
41 - .grid-item-c1-l {background-color: #1E88E5;}  
42 - .grid-item-c2-l {background-color: #42A5F5;}  
43 - .grid-item-c3-l {background-color: #90CAF9;}  
44 - .grid-item-c4-l {background-color: #E3F2FD;}  
45 -  
46 </style> 34 </style>
47 35
48 <template> 36 <template>
49 37
50 - <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>  
51 - <div id="card" class$="[[_computeCardClass(color)]]"> 38 + <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
  39 + <div id="card" class="card" style$="background-color:{{color}}">
52 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}"> 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
53 <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe> 41 <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
54 </template> 42 </template>
@@ -129,13 +117,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -129,13 +117,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
129 }, 117 },
130 118
131 _computeCardClass: function(color) { 119 _computeCardClass: function(color) {
132 - var cls = 'card';  
133 - return cls + ' ' + color; 120 + //var cls = 'card';
  121 + //return cls + ' ' + color;
  122 + this.$.card = color;
134 }, 123 },
135 124
136 _computeFixedBackgroundClass: function(color) { 125 _computeFixedBackgroundClass: function(color) {
137 - var cls = 'fixed';  
138 - return cls + ' ' + color + '-l'; 126 + //var cls = 'fixed';
  127 + //return cls + ' ' + color + '-l';
  128 + this.$.fixed = color;
139 } 129 }
140 130
141 }); 131 });
controllets/page-slider-controllet/page-slider-controllet.html
  View file @0f6424f
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 77
78 .subtitle { 78 .subtitle {
79 font-size: 16px; 79 font-size: 16px;
80 - color: #727272; 80 + color: #727272;/*#00BCD4*/
81 } 81 }
82 </style> 82 </style>
83 83
datalets/base-datalet/base-datalet.html
  View file @0f6424f
@@ -55,6 +55,14 @@ Example : @@ -55,6 +55,14 @@ Example :
55 <dom-module id="base-datalet"> 55 <dom-module id="base-datalet">
56 <template> 56 <template>
57 <style> 57 <style>
  58 + a {
  59 + color: #00BCD4;
  60 + text-decoration: none;
  61 + }
  62 + a:hover {
  63 + color: #2db395;
  64 + text-decoration: underline;
  65 + }
58 #base_datalet_container { 66 #base_datalet_container {
59 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 67 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
60 padding: 16px; 68 padding: 16px;
@@ -63,34 +71,34 @@ Example : @@ -63,34 +71,34 @@ Example :
63 display: flex; 71 display: flex;
64 padding-top: 8px; 72 padding-top: 8px;
65 } 73 }
66 - #rtp{ 74 + #rtp {
67 padding-top: 8px; 75 padding-top: 8px;
68 padding-right: 8px; 76 padding-right: 8px;
69 font-size: small; 77 font-size: small;
70 } 78 }
71 - #rtpalogo{ 79 + #rtpalogo {
72 height:32px; 80 height:32px;
73 width: 32px; 81 width: 32px;
74 } 82 }
75 - #image_spin {  
76 - height:32px;  
77 - width: 32px; 83 + #base_datalet_spin {
  84 + height:256px;
  85 + width: 256px;
78 position: relative; 86 position: relative;
79 center: center; 87 center: center;
80 width: 100%; 88 width: 100%;
81 } 89 }
82 -  
83 -  
84 </style> 90 </style>
85 91
86 <div id="base_datalet_imgWaitDatalet"> 92 <div id="base_datalet_imgWaitDatalet">
87 - <img id="image_spin" src="static/images/spin.svg">  
88 - 93 + <img id="base_datalet_spin" src="static/images/spin.svg">
89 </div> 94 </div>
  95 +
90 <div id="base_datalet_container"> 96 <div id="base_datalet_container">
91 - <b> Source:</b><span id="domain"></span>  
92 - <b> </b><span id="domainPage">  
93 - </span> 97 + <!--<b>Source:</b><span id="domain"></span>-->
  98 + <!--<b></b><span id="domainPage"></span>-->
  99 +
  100 + <b>Source:</b> <a id="base_datalet_source"></a> ( <a id="base_datalet_link">dataset</a> )
  101 +
94 <div id="base_datalet_rtp"> 102 <div id="base_datalet_rtp">
95 <div id="rtp">Powered by ROUTE-TO-PA</div> 103 <div id="rtp">Powered by ROUTE-TO-PA</div>
96 <div><a href="http://www.routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div> 104 <div><a href="http://www.routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>
@@ -132,6 +140,9 @@ Example : @@ -132,6 +140,9 @@ Example :
132 * @method ready 140 * @method ready
133 */ 141 */
134 ready: function(){ 142 ready: function(){
  143 +
  144 +
  145 +
135 var urlDatalet; 146 var urlDatalet;
136 if(this.dataUrl != undefined){ 147 if(this.dataUrl != undefined){
137 148
@@ -149,7 +160,11 @@ Example : @@ -149,7 +160,11 @@ Example :
149 urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet; 160 urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
150 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2]; 161 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
151 162
152 - this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ; 163 +// this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
  164 +
  165 + this.$.base_datalet_source.innerHTML = urlSource;
  166 + this.$.base_datalet_source.setAttribute("href", urlSource);
  167 +
153 this.requestDataletData(urlDatalet); 168 this.requestDataletData(urlDatalet);
154 } 169 }
155 }, 170 },
@@ -209,12 +224,11 @@ Example : @@ -209,12 +224,11 @@ Example :
209 resourceId = lastStringResourceId.split('=')[1]; 224 resourceId = lastStringResourceId.split('=')[1];
210 var urlDatalet = this.dataUrl.split("/")[0]+ "//" + this.dataUrl.split("/")[2] + "/dataset/" + packageIdDatalet +"/resource/" +resourceId; 225 var urlDatalet = this.dataUrl.split("/")[0]+ "//" + this.dataUrl.split("/")[2] + "/dataset/" + packageIdDatalet +"/resource/" +resourceId;
211 226
212 -  
213 urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, ''); 227 urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, '');
214 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2]; 228 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
215 229
216 -  
217 - this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )"; 230 + this.$.base_datalet_link.setAttribute("href", urlDatalet);
  231 +// this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
218 232
219 } 233 }
220 } 234 }
datalets/base-datalet/static/images/spin.svg 100644 → 100755
  View file @0f6424f
datalets/graph-datalet/graph-datalet.html 100644 → 100755
  View file @0f6424f
@@ -130,6 +130,32 @@ Example: @@ -130,6 +130,32 @@ Example:
130 .attr("width", width) 130 .attr("width", width)
131 .attr("height", height); 131 .attr("height", height);
132 132
  133 + //pezzotto
  134 + this.svg.append("filter")
  135 + .attr("id","filter1")
  136 + .attr("x","0%")
  137 + .attr("y","0%")
  138 + .attr("width","100%")
  139 + .attr("height","100%")
  140 + .append("feImage")
  141 + .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
  142 +
  143 + /*this.svg.append("defs")
  144 + .append("pattern")
  145 + .attr("id","urlimage")
  146 + //.attr("patternUnits","userSpaceOnUse")
  147 + .attr("width","100%")
  148 + .attr("height","100%")
  149 + .append("image")
  150 + .attr("xlink:href","http://lorempixel.com/400/200")
  151 + //.attr("patternUnits","userSpaceOnUse")
  152 + .attr("x","0%")
  153 + .attr("y","0%")
  154 + .attr("width","100%")
  155 + .attr("height","100%");*/
  156 + //end pezzotto
  157 +
  158 +
133 var graph = {}; 159 var graph = {};
134 160
135 graph.nodes = t.nodes; 161 graph.nodes = t.nodes;
@@ -157,10 +183,13 @@ Example: @@ -157,10 +183,13 @@ Example:
157 return t.fixed ? "" : "drag" 183 return t.fixed ? "" : "drag"
158 }).attr("r", function (t) { 184 }).attr("r", function (t) {
159 return t.r ? t.r : 15 185 return t.r ? t.r : 15
160 - }).attr("style", function (t) { 186 + })
  187 + .attr("style", function (t) {
161 return t.color ? "stroke:" + t.color : !1 188 return t.color ? "stroke:" + t.color : !1
162 }); 189 });
163 190
  191 + d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""});
  192 +
164 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); 193 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
165 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 194 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
166 195
@@ -217,7 +246,7 @@ Example: @@ -217,7 +246,7 @@ Example:
217 mouseover : function (t) { 246 mouseover : function (t) {
218 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) { 247 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
219 //return 1 == t.fixed ? 1.4 * t.r : 15 248 //return 1 == t.fixed ? 1.4 * t.r : 15
220 - return 1 == t.fixed ? 1.4 * t.r : 15 249 + return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
221 }); 250 });
222 251
223 }, 252 },
datalets/graph-datalet/static/css/graphStyle.css 100644 → 100755
  View file @0f6424f
datalets/graph-datalet/static/js/d3.v3.js 100644 → 100755
  View file @0f6424f