Skip to content

Commit 64e645f

Browse files
benjaminbeer256benjaminbeer256
committed
Added second row for more options
1 parent 556b753 commit 64e645f

2 files changed

Lines changed: 215 additions & 24 deletions

File tree

‎js/widgets/settings_table.js‎

Lines changed: 202 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,14 @@ $(function() {
3030

3131
// Add a new row to the table
3232
add_row: function(ids=[]) {
33-
let new_row = this._elements.table.append("tr"),
33+
let new_row = this._elements.table.append("row"),
3434
color = this.colors[this.rows_added % this.colors.length];
3535
$(new_row.node()).settings_row({idx: this._elements.rows.length, name: "Composite " + this.rows_added, color: color, ids: ids, separate_color: this.separate_color});
3636
this._elements.rows.push(new_row);
3737

3838
// Add a new composite to the plot
39-
$("#main-plot").main_plot("add_composite", "Composite " + this.rows_added++, color)
39+
$("#main-plot").main_plot("add_composite", "Composite " + this.rows_added++, color);
40+
$(new_row.node()).settings_row("change_name", this.rows_added, true);
4041
},
4142

4243
// Remove a row from the table
@@ -194,19 +195,22 @@ $(function() {
194195

195196
// Create a new row
196197
_create: function() {
198+
let self = this;
197199
if (this.options.ids.length > 0) {
198200
this.xmin = Math.min(...this.options.ids.map(id => individual_composites[id].xmin));
199201
this.xmax = Math.max(...this.options.ids.map(id => individual_composites[id].xmax));
200202
this.load_data(this.options.ids, plot=false)
201203
};
202204

203205
// Add event listeners
204-
let row = d3.select(this.element.context)
205-
.classed("added-row", true)
206+
let row = d3.select(this.element.context)
207+
208+
options_table = row.append("table")
206209
.attr("draggable", true)
210+
.classed("added-table", true)
207211
.on("mouseover", function(e) {$(row.node()).settings_row("highlight_row", e, "mouse-highlight")})
208212
.on("mouseleave", function(e) {$(row.node()).settings_row("unhighlight_row", e, "mouse-highlight")})
209-
.on("dragstart", function(e) {e.dataTransfer.setData("text/plain", $(row.node()).settings_row("option", "idx"))})
213+
.on("dragstart", function(e) {e.dataTransfer.setData("text/plain", self.options.idx)})
210214
.on("dragover", function(e) {$(row.node()).settings_row("highlight_row", e, "drag-highlight")})
211215
.on("dragleave", function(e) {$(row.node()).settings_row("unhighlight_row", e, "drag-highlight")})
212216
.on("drop", function(e) {
@@ -215,29 +219,33 @@ $(function() {
215219
}),
216220

217221
// Add sliders and buttons
218-
drag_col = row.append("td")
222+
primary_row = options_table.append("tr")
223+
.classed("settings-row", true);
224+
drag_col = primary_row.append("td")
219225
.classed("drag-col", true)
220226
.style("width", "48px"),
221-
name_col = row.append("td")
227+
name_col = primary_row.append("td")
222228
.classed("name-col", true),
223-
color_col = row.append("td")
229+
color_col = primary_row.append("td")
224230
.classed("color-col", true),
225-
scale_col = row.append("td")
231+
scale_col = primary_row.append("td")
226232
.classed("scale-col", true),
227-
opacity_col = row.append("td")
233+
opacity_col = primary_row.append("td")
228234
.classed("opacity-col", true),
229-
smoothing_col = row.append("td")
235+
smoothing_col = primary_row.append("td")
230236
.classed("smoothing-col", true),
231-
shift_col = row.append("td")
237+
shift_col = primary_row.append("td")
232238
.classed("shift-col", true),
233-
hide_col = row.append("td")
239+
hide_col = primary_row.append("td")
234240
.classed("hide-col", true),
235-
upload_col = row.append("td")
241+
upload_col = primary_row.append("td")
236242
.classed("upload-col", true),
237-
id_col = row.append("td")
243+
id_col = primary_row.append("td")
244+
.style("width", "30%")
245+
.style("white-space", "normal")
238246
.classed("id-col", true),
239-
reset_col = row.append("td")
240-
.classed("reset-col", true);
247+
more_options_col = primary_row.append("td")
248+
.classed("more-options-col", true);
241249

242250
// Add drag handle
243251
drag_col.append("div")
@@ -263,6 +271,7 @@ $(function() {
263271
name_col.append("div")
264272
.attr("contenteditable", true)
265273
.text(this.options.name)
274+
.style("width", "auto")
266275
.on("input", function() {$(row.node()).settings_row("change_name", this.textContent)})
267276
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
268277
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
@@ -426,9 +435,159 @@ $(function() {
426435
.text(this.options.ids.join(", "));
427436

428437
// Add reset button
438+
more_options_col.append("input")
439+
.attr("type", "button")
440+
.attr("value", "More Options")
441+
.style("float", "right")
442+
.on("click", function() {$(row.node()).settings_row("toggle_second_row")});
443+
444+
let more_options = options_table.append("tr")
445+
.classed("settings-row", true)
446+
.classed("second-row", true)
447+
.style("margin-right", "0px")
448+
.style("display", "none");
449+
450+
col_one = more_options.append("td"),
451+
col_two = more_options.append("td"),
452+
baseline_col = more_options.append("td")
453+
.classed("baseline-col", true)
454+
.attr("colspan", "2"),
455+
col_four = more_options.append("td"),
456+
col_five = more_options.append("td"),
457+
hide_strand_col = more_options.append("td")
458+
.classed("hide-strand-col", true)
459+
.attr("colspan", "3")
460+
.style("white-space", "nowrap"),
461+
col_seven = more_options.append("td")
462+
.style("width", "30%")
463+
.style("white-space", "normal"),
464+
reset_col = more_options.append("td")
465+
.classed("reset-col", true);
466+
467+
baseline_col.append("label")
468+
.text("Shift occupancy:");
469+
baseline_col.append("input")
470+
.attr("type", "text")
471+
.classed("setting-text", true)
472+
.attr("value", 1)
473+
.on("change", function() {$(row.node()).settings_row("change_scale", this.value)})
474+
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
475+
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
476+
.on("mouseleave", function() {$(row.node()).settings_row("toggle_draggable", true)});
477+
478+
//creates a new slider for the scale input
479+
baseline_col.append("input")
480+
.style("margin-left","10px")
481+
.attr("type", "range")
482+
.classed("scale-slider", true)
483+
.attr("value", 50)
484+
.attr("min", 1)
485+
.attr("max", 100)
486+
.on("input", function() {$(row.node()).settings_row("change_scale", 10 ** ((this.value - 50)/50))})
487+
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
488+
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
489+
490+
positive = hide_strand_col.append("div")
491+
.attr("title", "positive")
492+
.style("float", "left")
493+
.style("margin-right", "15px")
494+
positive.append("label")
495+
.text("Positive:")
496+
let positive_open = positive.append("div")
497+
.attr("title", "Hide")
498+
.style("display", "inline")
499+
.append("svg")
500+
.classed("hide-icon", true)
501+
.classed("eye-open", true)
502+
.attr("baseProfile", "full")
503+
.attr("viewBox", "-100 -100 200 200")
504+
.attr("version", "1.1")
505+
.attr("xmlns", "http://www.w3.org/2000/svg")
506+
.on("click", function() {$(row.node()).settings_row("toggle_positive", true)})
507+
.append("g");
508+
positive_open.append("path")
509+
.attr("d", "M-100 0C-50 60 50 60 100 0C50 -60 -50 -60 -100 0")
510+
.attr("fill", "none")
511+
.attr("stroke", "black")
512+
.attr("stroke-width", 3);
513+
positive_open.append("circle")
514+
.attr("cx", 0)
515+
.attr("cy", 0)
516+
.attr("r", 30)
517+
.attr("fill", "black")
518+
.attr("stroke", "none");
519+
let positive_closed = positive.append("div")
520+
.attr("title", "Show")
521+
.append("svg")
522+
.classed("hide-icon", true)
523+
.classed("eye-closed", true)
524+
.attr("title", "Show")
525+
.attr("baseProfile", "full")
526+
.attr("viewBox", "-100 -100 200 200")
527+
.attr("version", "1.1")
528+
.attr("xmlns", "http://www.w3.org/2000/svg")
529+
.style("display", "none")
530+
.on("click", function() {$(row.node()).settings_row("toggle_positive", false)})
531+
.append("g");
532+
positive_closed.append("path")
533+
.attr("d", "M-100 0C-50 60 50 60 100 0M-66.77 27.7L-74.21 40.78M-24.62 42.82L-27.26 57.58M24.62 42.82L27.26 57.58M66.77 27.7L74.21 40.78")
534+
.attr("fill", "none")
535+
.attr("stroke", "black")
536+
.attr("stroke-width", 3);
537+
538+
negative = hide_strand_col.append("div")
539+
.attr("title", "negative")
540+
negative.append("label")
541+
.text("Negative:")
542+
.style("display", "inline")
543+
544+
let negative_open = negative.append("div")
545+
.attr("title", "Hide Negative")
546+
.style("display", "inline")
547+
.append("svg")
548+
.classed("hide-icon", true)
549+
.classed("eye-open", true)
550+
.attr("baseProfile", "full")
551+
.attr("viewBox", "-100 -100 200 200")
552+
.attr("version", "1.1")
553+
.attr("xmlns", "http://www.w3.org/2000/svg")
554+
.on("click", function() {$(row.node()).settings_row("toggle_positive", true)})
555+
.append("g");
556+
negative_open.append("path")
557+
.attr("d", "M-100 0C-50 60 50 60 100 0C50 -60 -50 -60 -100 0")
558+
.attr("fill", "none")
559+
.attr("stroke", "black")
560+
.attr("stroke-width", 3);
561+
negative_open.append("circle")
562+
.attr("cx", 0)
563+
.attr("cy", 0)
564+
.attr("r", 30)
565+
.attr("fill", "black")
566+
.attr("stroke", "none");
567+
let negative_closed = negative.append("div")
568+
.attr("title", "Show")
569+
.append("svg")
570+
.classed("hide-icon", true)
571+
.classed("eye-closed", true)
572+
.attr("title", "Show")
573+
.attr("baseProfile", "full")
574+
.attr("viewBox", "-100 -100 200 200")
575+
.attr("version", "1.1")
576+
.attr("xmlns", "http://www.w3.org/2000/svg")
577+
.style("display", "none")
578+
.on("click", function() {$(row.node()).settings_row("toggle_positive", false)})
579+
.append("g");
580+
negative_closed.append("path")
581+
.attr("d", "M-100 0C-50 60 50 60 100 0M-66.77 27.7L-74.21 40.78M-24.62 42.82L-27.26 57.58M24.62 42.82L27.26 57.58M66.77 27.7L74.21 40.78")
582+
.attr("fill", "none")
583+
.attr("stroke", "black")
584+
.attr("stroke-width", 3);
585+
429586
reset_col.append("input")
430587
.attr("type", "button")
431588
.attr("value", "Reset")
589+
.style("float", "right")
590+
.style("color", "red")
432591
.on("click", function() {$(row.node()).settings_row("reset")});
433592
},
434593

@@ -445,14 +604,14 @@ $(function() {
445604
// Highlight the row
446605
highlight_row: function(ev, hl_class) {
447606
ev.preventDefault();
448-
d3.select(this.element.context).classed(hl_class, true);
607+
d3.select(this.element.context).select("table").classed(hl_class, true);
449608
$("#metadata-table").metadata_table("highlight_row", this.options.idx)
450609
},
451610

452611
// Unhighlight the row
453612
unhighlight_row: function(ev, hl_class) {
454613
ev.preventDefault();
455-
d3.select(this.element.context).classed(hl_class, false);
614+
d3.select(this.element.context).select("table").classed(hl_class, false);
456615
$("#metadata-table").metadata_table("unhighlight_row", this.options.idx)
457616
},
458617

@@ -587,13 +746,25 @@ $(function() {
587746
},
588747

589748
toggle_draggable: function(val) {
590-
d3.select(this.element.context).attr("draggable", val)
749+
d3.select(this.element.context).select("table").attr("draggable", val)
591750
},
592751

593752
change_name: function(new_name, change_text=false) {
594753
this.options.name = new_name;
595754
$("#main-plot").main_plot("change_name", this.options.idx, new_name);
596755

756+
let largestWidth = 0;
757+
d3.selectAll('.name-col').each(function() {
758+
let box = d3.select(this);
759+
box.style("min-width", "0px");
760+
let width = parseFloat(box.style('width'));
761+
largestWidth = Math.max(largestWidth, width);
762+
});
763+
764+
console.log(largestWidth);
765+
d3.selectAll(".name-col")
766+
.style("min-width", largestWidth + "px");
767+
597768
if (change_text) {
598769
d3.select(this.element.context).select("td.name-col div").text(new_name)
599770
}
@@ -738,6 +909,17 @@ $(function() {
738909
}
739910
},
740911

912+
toggle_second_row: function(){
913+
let button = d3.select(this.element.context).select("td.more-options-col input");
914+
if (button.attr("value") === "More Options"){
915+
button.attr("value", "Less Options");
916+
d3.select(this.element.context).select("tr.second-row").style("display", "revert");
917+
} else {
918+
button.attr("value", "More Options");
919+
d3.select(this.element.context).select("tr.second-row").style("display", "none");
920+
}
921+
},
922+
741923
reset: function() {
742924
this.files_loaded = 0;
743925
this.xmin = Infinity;

‎style.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,25 @@ td.remove-row {
122122
cursor: pointer
123123
}
124124

125-
#settings-table .added-row {
126-
cursor: grab
125+
#settings-table .added-table {
126+
width: 100%;
127+
cursor: grab;
128+
}
129+
130+
#settings-table .settings-row {
131+
width: 100%;
132+
height: 50px;
133+
border: 1px solid;
134+
white-space: nowrap;
127135
}
128136

129-
#settings-table .added-row label {
137+
#settings-table .added-table label {
130138
cursor: grab
131139
}
132140

133141
.mouse-highlight {
134-
border: 3px solid #8888FF
142+
border: 3px solid #8888FF;
143+
position: relative;
135144
}
136145

137146
.drag-highlight {

0 commit comments

Comments
 (0)