Skip to content

Commit

Permalink
Merge pull request #185 from choosehappy/feat/ui-cohortfinder
Browse files Browse the repository at this point in the history 
Upgrade UI to support Cohort Finder result
  • Loading branch information
@choosehappy
choosehappy committed Dec 16, 2020
2 parents 4eb23a9 + 9c6d5a0 commit 7c130fe
Show file tree
Hide file tree
Showing 12 changed files with 698 additions and 347 deletions.
14 changes: 8 additions & 6 deletions UserInterface/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ th {
margin-top: 15%;
}

#upload-input {
#upload-input,
#cf-input {
display: none;
}

Expand Down Expand Up @@ -297,15 +298,15 @@ th {
}

.selected-bar {
fill: orangered;
fill: var(--selected-color)!important;
}

.bar {
fill: var(--foreground-color);
}

.bar:hover {
fill: orangered;
fill: orangered!important;
}

.y.axis path,
Expand Down Expand Up @@ -532,7 +533,7 @@ table.dataTable {

.selected-foreground-path {
fill: none;
stroke: var(--selected-color);
stroke: var(--selected-color)!important;
stroke-width: 2;
opacity: 1;
}
Expand Down Expand Up @@ -585,7 +586,8 @@ table.dataTable {
}

.selected-dot {
fill: var(--selected-color);
stroke: #aaa;
fill: var(--selected-color)!important;
stroke: #ddd;
stroke-width: 0.4;
fill-opacity: 1;
}
15 changes: 10 additions & 5 deletions UserInterface/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,26 @@
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom">
<h5 id="page-title" class="my-0 mr-md-auto font-weight-normal"><strong>HistoQc</strong></h5>
<nav id="view-mngmt-btn-group" class="my-2 ml-md-3 my-md-0 mr-md-auto">
<button id="table-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden" value="table">Table</button>
<button id="chart-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden" value="chart">Chart</button>
<button id="image-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden" value="image">Image</button>
<button id="table-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden view-disabled" value="table">Table</button>
<button id="chart-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden view-disabled" value="chart">Chart</button>
<button id="image-btn" class="view-mngmt-btn btn btn-light view-mngmt-btn-hidden view-disabled" value="image">Image</button>
</nav>
<nav class="my-2 my-md-0 mr-md-3">
<span id="dataset-tag" class="p-4 font-weight-light">Current Dataset: reslut.tsv</span>
<a class="p-2 text-dark" href="#">About</a>
<a class="p-2 text-dark" href="#">Instruction</a>
</nav>
<button id="reset-button" class="btn btn-outline-primary">Reset</button>
<label style="margin-bottom: 0; margin-right: 0.5rem">
<span id="cf-upload-button" class="btn btn-primary disabled">
CohortFinder <input id="cf-input" type="file" accept=".tsv" multiple disabled>
</span>
</label>
<button id="reset-button" class="btn btn-outline-danger">Reset</button>
</header>

<div id="upload-button" class="container pt-md-5 text-center">
<label>
<span class="btn btn-outline-secondary btn-lg">
<span class="btn btn-primary btn-lg">
View Results <input id="upload-input" type="file" accept=".tsv" multiple>
</span>
</label>
Expand Down
84 changes: 64 additions & 20 deletions UserInterface/scripts/bar_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ function init_bar_canvas () {
.attr("width", $CHART.width())
.attr("height", $CHART.height())
.append("g")
.attr("transform", "translate(" + CHART_MARGIN.left + "," + CHART_MARGIN.top + ")");
.attr(
"transform",
"translate(" + CHART_MARGIN.left + "," + CHART_MARGIN.top + ")"
);
}


Expand All @@ -18,6 +21,7 @@ function init_bar_chart (dataset) {
var data = ORIGINAL_DATASET.map(function (d) {
return {
case_name: d["filename"],
groupid: d["groupid"],
attr_value: d[CURRENT_CHART_ATTRIBUTE]
};
});
Expand Down Expand Up @@ -47,9 +51,11 @@ function init_bar_chart (dataset) {
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<span style='color:#f94; font-size:10px'>" + d.case_name + "</span>" +
"</br>" +
"<span style='font-weight:100; font-size:10px'>" + d.attr_value.toFixed(5) + "</span>";
return "<span style='color:#f94; font-size:10px'>" +
d.case_name + "</span>" +
"</br>" +
"<span style='font-weight:100; font-size:10px'>" +
d.attr_value.toFixed(5) + "</span>";
});

svg.call(TIP);
Expand Down Expand Up @@ -86,10 +92,16 @@ function init_bar_chart (dataset) {
.data(data)
.enter().append("rect")
.attr("class", "background-bar")
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});

// Add blue foreground bar for focus.
foreground = svg.append("g")
Expand All @@ -105,16 +117,22 @@ function init_bar_chart (dataset) {
}
})
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
})
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); })
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
})
.on('mouseover', TIP.show)
.on('mouseout', TIP.hide)
.on('click', function (d) {
Expand Down Expand Up @@ -146,6 +164,7 @@ function update_bar_chart (dataset) {
var data = ORIGINAL_DATASET.map(function (d) {
return {
case_name: d["filename"],
groupid: d["groupid"],
attr_value: d[CURRENT_CHART_ATTRIBUTE]
};
});
Expand Down Expand Up @@ -201,18 +220,26 @@ function update_bar_chart (dataset) {
.call(yAxis);

// update bars
var background_bars = CHART_SVG.select("g.background-bar-group").selectAll("rect").data(data);
var background_bars = CHART_SVG.select("g.background-bar-group")
.selectAll("rect").data(data);
background_bars.exit().remove();
background_bars.enter().append("rect");
background_bars.transition()
.duration(500)
.attr("class", "background-bar")
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});

var foreground_bars = CHART_SVG.select("g.foreground-bar-group").selectAll("rect").data(data);
var foreground_bars = CHART_SVG.select("g.foreground-bar-group").
selectAll("rect").data(data);
foreground_bars.exit().remove();
foreground_bars.enter().append("rect")
.on('mouseover', TIP.show)
Expand All @@ -234,16 +261,33 @@ function update_bar_chart (dataset) {
}
})
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
})
.attr("x", function (d) { return xScale(d.case_name); })
.style("fill", function (d) {
if (CURRENT_SELECTED === d.case_name) {
return "orangered";
} else {
if (d["groupid"] === -1) {
return FOREGROUND_COLOR;
} else {
return COLOR_PLATE[d["groupid"]];
}
}
})
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});
}


Expand Down
44 changes: 16 additions & 28 deletions UserInterface/scripts/chart_init.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
function update_chart_width () {
$("#dimension-reduction-view").outerWidth($("#dimension-reduction-view").outerHeight());
$("#original-feature-view").outerWidth($("#chart-view").width() - $("#dimension-reduction-view").outerWidth() - 10);
$("#dimension-reduction-view").outerWidth(
$("#dimension-reduction-view").outerHeight()
);
$("#original-feature-view").outerWidth(
$("#chart-view").width() -
$("#dimension-reduction-view").outerWidth() - 10
);
}


function initialize_chart_view (dataset, vis_type="bar_chart") {

show_view("chart");
update_chart_width();

init_bar_canvas();
Expand All @@ -29,16 +33,17 @@ function update_chart_view (vis_type, dataset) {

update_chart_width();

// can be optimized by differentiate update type (just switch from chart to parallel coordiate?)
// can be optimized by differentiate update type
// (just switch from chart to parallel coordiate?)
show_chosen_vis(vis_type);

if (vis_type == "bar_chart") {
if (vis_type === "bar_chart") {
update_bar_chart(dataset);
} else if (vis_type == "parallel_coordinate") {
} else if (vis_type === "parallel_coordinate") {
update_parallel_coordinate(dataset);
} else if (vis_type == "scatter_plot") {
} else if (vis_type === "scatter_plot") {
update_scatter_plot(ORIGINAL_DATASET, dataset);
} else if (vis_type == "both") {
} else {
update_bar_chart(dataset);
update_parallel_coordinate(dataset);
update_scatter_plot(ORIGINAL_DATASET, dataset);
Expand All @@ -49,11 +54,6 @@ function update_chart_view (vis_type, dataset) {
function enter_select_chart_view (case_name) {
exit_select_chart_view();

// DRPLT_SVG.select("g.foreground-dot-group")
// .selectAll("circle")
// .filter(function (d) {return d.case_name==case_name;})
// .classed({"selected-dot": true, "foreground-dot": false});

CHART_SVG.select("g.foreground-bar-group")
.selectAll("rect")
.filter(function (d) {return d.case_name==case_name;})
Expand All @@ -77,9 +77,6 @@ function exit_select_chart_view () {
.selectAll(".selected-foreground-path")
.classed({"selected-foreground-path": false, "foreground-path": true});

// DRPLT_SVG.select("g.foreground-dot-group")
// .selectAll(".selected-dot")
// .classed({"selected-dot": false, "foreground-dot": true});
exit_select_scatter_plot();
}

Expand All @@ -90,28 +87,19 @@ function update_multi_selected_chart_view (selected_cases) {
.transition()
.duration(500)
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
});

// DRPLT_SVG.select("g.foreground-dot-group")
// .selectAll("circle")
// .style("display", function (d) {
// if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
// return null;
// } else {
// return "none";
// }
// });
enter_multi_select_scatter_plot(selected_cases);

PARAC_SVG.select("g.foreground")
.selectAll("path")
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
Expand All @@ -138,7 +126,7 @@ function init_chart_selector () {
var sort_attribute = CURRENT_CHART_ATTRIBUTE;
var sort_attribute_index = ORIGINAL_FEATURE_LIST.indexOf(sort_attribute);
TABLE.order([sort_attribute_index, 'desc']).draw();
data_sorting(sort_attribute, true);
sort_data(sort_attribute, true);
update_views();
})
}
Expand Down
Loading

0 comments on commit 7c130fe

Please sign in to comment.