Skip to content

Commit 2edca30

Browse files
josenavasjosenavas
committed
Disabling sorting and reducing font
1 parent 26642f5 commit 2edca30

File tree

3 files changed

+173
-35
lines changed

3 files changed

+173
-35
lines changed

‎qiita_pet/handlers/study_handlers/sample_template.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ def _build_sample_summary(study_id, user_id):
4242
study_id, user_id)['samples']}
4343
all_samps = set(samps_table.keys())
4444
columns = [{"id": "sample", "name": "Sample", "field": "sample",
45-
"width": 240, "sortable": True}]
45+
"width": 240, "sortable": False}]
4646
# Add one column per prep template highlighting what samples exist
4747
preps = study_prep_get_req(study_id, user_id)["info"]
4848
for dt in preps:
@@ -52,7 +52,7 @@ def _build_sample_summary(study_id, user_id):
5252
columns.append({"id": col_field,
5353
"name": col_name,
5454
"field": col_field,
55-
"sortable": True,
55+
"sortable": False,
5656
"width": 240})
5757

5858
prep_samples = prep_template_samples_get_req(

‎qiita_pet/handlers/study_handlers/tests/test_sample_template.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ class TestHelpers(TestHandlerBase):
1717
def test_build_sample_summary(self):
1818
cols, table = _build_sample_summary(1, 'test@foo.bar')
1919
# Make sure header filled properly
20-
cols_exp = [{'field': 'sample', 'width': 240, 'sortable': True,
20+
cols_exp = [{'field': 'sample', 'width': 240, 'sortable': False,
2121
'id': 'sample', 'name': 'Sample'},
22-
{'field': 'prep1', 'width': 240, 'sortable': True,
22+
{'field': 'prep1', 'width': 240, 'sortable': False,
2323
'id': 'prep1', 'name': 'PREP 1 NAME - 1'}]
2424
self.assertEqual(cols, cols_exp)
2525
table_exp = [{'sample': '1.SKB2.640194', 'prep1': 'X'},

‎qiita_pet/templates/study_ajax/sample_prep_summary.html‎

Lines changed: 169 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<style>
2-
.slick-header.ui-state-default,.slick-headerrow.ui-state-default{width:100%;overflow:hidden;border-left:0!important}.slick-header-columns,.slick-headerrow-columns{position:relative;white-space:nowrap;cursor:default;overflow:hidden}.slick-header-column.ui-state-default{position:relative;display:inline-block;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;height:100%;line-height:16px;margin:0;padding:4px;border-right:1px solid silver;border-left:0!important;border-top:0!important;border-bottom:0!important;float:left}.slick-headerrow-column.ui-state-default{padding:4px}.slick-header-column-sorted{font-style:italic}.slick-sort-indicator{display:inline-block;width:8px;height:5px;margin-left:4px;margin-top:6px;float:left}.slick-sort-indicator-desc{background:url(/static/vendor/css/images/sort-desc.gif)}.slick-sort-indicator-asc{background:url(/static/vendor/css/images/sort-asc.gif)}.slick-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:col-resize;width:4px;right:0;top:0;height:100%}.slick-group-toggle,.slick-reorder-guide,.slick-reorder-proxy{display:inline-block}.slick-sortable-placeholder{background:silver}.grid-canvas{position:relative;outline:0}.slick-row.ui-state-active,.slick-row.ui-widget-content{position:absolute;border:0;width:100%}.slick-cell,.slick-headerrow-column{position:absolute;border:1px solid transparent;border-right:1px dotted silver;border-bottom-color:silver;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;vertical-align:middle;z-index:1;padding:1px 2px 2px 1px;margin:0;white-space:nowrap;cursor:default}.slick-cell.highlighted{background:#87cefa;background:rgba(0,0,255,.2);-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}.slick-cell.flashing{border:1px solid red!important}.slick-cell.editable{z-index:11;overflow:visible;background:#fff;border-color:#000;border-style:solid}.slick-cell:focus{outline:0}.slick-reorder-proxy{background:#00f;opacity:.15;filter:alpha(opacity=15);cursor:move}.slick-reorder-guide{height:2px;background:#00f;opacity:.7;filter:alpha(opacity=70)}.slick-selection{z-index:10;position:absolute;border:2px dashed #000}
3-
</style>
4-
5-
<p><table style='width:100%'><tr><td><h3>Sample Summary</h3></td><td style="text-align: right">
6-
Add sample column information to table
7-
<select id="meta_col" name="meta_col">
8-
<option value=""></option>
9-
{% for col in meta_available %}
10-
<option value="{{col}}">{{col}}</option>
11-
{% end %}
12-
</select>
13-
<button class="btn btn-info btn-sm" onclick="add_meta()">Add column</button>
14-
</td></tr></table>
15-
<div id="samples-div" style="width:100%;height:800px;"></div>
16-
171
<script src="/static/vendor/js/jquery.event.drag-2.2.js"></script>
182
<script src="/static/vendor/js/slick.core.js"></script>
193
<script src="/static/vendor/js/slick.grid.js"></script>
@@ -32,24 +16,178 @@
3216
.done( function ( data ) {
3317
if(data.status == "success"){
3418
addColumn(meta_val, data.values);
35-
} else {
19+
}
20+
else {
3621
bootstrapAlert(data.message.replace("\n", "<br/>"), "danger");
3722
}
3823
});
3924
}
4025

41-
function addColumn(header, values)
42-
{
43-
//add column data
44-
for(i=0;i<table.length;i++) {
45-
var sample = table[i]['sample'];
46-
table[i][header] = values[sample];
47-
}
48-
; //add new column header
49-
var columns = grid.getColumns();
50-
columns.push({id: header, name: header, field: header, width: 240, sortable: true});
51-
grid.setColumns(columns);
52-
grid.invalidateAllRows();
53-
grid.render();
54-
}
26+
function addColumn(header, values) {
27+
//add column data
28+
for(var i=0;i<table.length;i++) {
29+
var sample = table[i]['sample'];
30+
table[i][header] = values[sample];
31+
}
32+
33+
//add new column header
34+
var columns = grid.getColumns();
35+
columns.push({id: header, name: header, field: header, width: 240, sortable: false});
36+
grid.setColumns(columns);
37+
grid.invalidateAllRows();
38+
grid.render();
39+
}
5540
</script>
41+
42+
<style>
43+
.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
44+
width:100%;
45+
overflow:hidden;
46+
border-left:0 !important
47+
}
48+
.slick-header-columns, .slick-headerrow-columns {
49+
position:relative;
50+
white-space:nowrap;
51+
cursor:default;
52+
overflow:hidden
53+
}
54+
.slick-header-column.ui-state-default {
55+
position:relative;
56+
display:inline-block;
57+
overflow:hidden;
58+
-o-text-overflow:ellipsis;
59+
text-overflow:ellipsis;
60+
height:100%;
61+
line-height:16px;
62+
margin:0;
63+
padding:4px;
64+
border-right:1px solid silver;
65+
border-left:0 !important;
66+
border-top:0!important;
67+
border-bottom:0!important;
68+
float:left
69+
}
70+
.slick-headerrow-column.ui-state-default {
71+
padding:4px
72+
}
73+
.slick-header-column-sorted {
74+
font-style:italic
75+
}
76+
.slick-sort-indicator {
77+
display:inline-block;
78+
width:8px;
79+
height:5px;
80+
margin-left:4px;
81+
margin-top:6px;
82+
float:left
83+
}
84+
.slick-sort-indicator-desc{
85+
background:url(/static/vendor/css/images/sort-desc.gif)
86+
}
87+
.slick-sort-indicator-asc {
88+
background:url(/static/vendor/css/images/sort-asc.gif)
89+
}
90+
.slick-resizable-handle {
91+
position:absolute;
92+
font-size:.1px;
93+
display:block;
94+
cursor:col-resize;
95+
width:4px;
96+
right:0;
97+
top:0;
98+
height:100%
99+
}
100+
.slick-group-toggle, .slick-reorder-guide, .slick-reorder-proxy {
101+
display:inline-block
102+
}
103+
.slick-sortable-placeholder{
104+
background:silver
105+
}
106+
.grid-canvas {
107+
position:relative;
108+
outline:0
109+
}
110+
.slick-row.ui-state-active, .slick-row.ui-widget-content {
111+
position:absolute;
112+
border:0;
113+
width:100%
114+
}
115+
.slick-cell, .slick-headerrow-column {
116+
position:absolute;
117+
border:1px solid transparent;
118+
border-right:1px dotted silver;
119+
border-bottom-color:silver;
120+
overflow:hidden;
121+
-o-text-overflow:ellipsis;
122+
text-overflow:ellipsis;
123+
vertical-align:middle;
124+
z-index:1;
125+
padding:1px 2px 2px 1px;
126+
margin:0;
127+
white-space:nowrap;
128+
cursor:default
129+
}
130+
.slick-cell.highlighted {
131+
background:#87cefa;
132+
background:rgba(0,0,255,.2);
133+
-webkit-transition:all .5s;
134+
-moz-transition:all .5s;
135+
-o-transition:all .5s;
136+
transition:all .5s
137+
}
138+
.slick-cell.flashing {
139+
border:1px solid red!important
140+
}
141+
.slick-cell.editable {
142+
z-index:11;
143+
overflow:visible;
144+
background:#fff;
145+
border-color:#000;
146+
border-style:solid
147+
}
148+
.slick-cell:focus {
149+
outline:0
150+
}
151+
.slick-reorder-proxy{
152+
background:#00f;
153+
opacity:.15;
154+
filter:alpha(opacity=15);
155+
cursor:move
156+
}
157+
.slick-reorder-guide{
158+
height:2px;
159+
background:#00f;
160+
opacity:.7;
161+
filter:alpha(opacity=70)
162+
}
163+
.slick-selection{
164+
z-index:10;
165+
position:absolute;
166+
border:2px dashed #000
167+
}
168+
.slick-row.ui-widget-content, .slick-cell {
169+
font-size: 14px;
170+
}
171+
</style>
172+
173+
<p>
174+
<table style='width:100%'>
175+
<tr>
176+
<td>
177+
<h3>Sample Summary</h3>
178+
</td>
179+
<td style="text-align: right">
180+
Add sample column information to table
181+
<select id="meta_col" name="meta_col">
182+
<option value=""></option>
183+
{% for col in meta_available %}
184+
<option value="{{col}}">{{col}}</option>
185+
{% end %}
186+
</select>
187+
<button class="btn btn-info btn-sm" onclick="add_meta()">Add column</button>
188+
</td>
189+
</tr>
190+
</table>
191+
</p>
192+
193+
<div id="samples-div" style="width:100%;height:800px;"></div>

0 commit comments

Comments
 (0)