Skip to content

Commit

Permalink
Fixed bugs with basic notebook, added tooltip. (LLNL#111)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cscully-allison
cscully-allison authored Nov 9, 2023
1 parent 55b8631 commit 8e99ec2
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 10 deletions.
42 changes: 36 additions & 6 deletions thicket/vis/scripts/topdown/stackedbars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,30 @@ import * as d3 from 'd3';
export default class StackedBars{
constructor(div, width, height, data, external_scales){
//data
this.topdown_vars = ['any#topdown.retiring', 'any#topdown.frontend_bound', 'any#topdown.backend_bound', 'any#topdown.bad_speculation'];
this.topdown_vars = ['Retiring', 'Frontend bound', 'Backend bound', 'Bad speculation'];
this.nice_vars = ['Retiring', 'Frontend Bound', 'Backend Bound', 'Bad Speculation'];
this.records = this.test_normalize(data);
this.uniques = this.get_unique_nodes(this.records);
this.profs = this.get_unique_profs(this.records, this.uniques[0].nid);
this.num_profs = this.profs.length;
this.sortvar = 'any#topdown.backend_bound';
this.sortvar = 'Backend bound';
this.magic_ordinal = 'any#ProblemSize';
this.ordinal_groups = this.getOrdinalGroups();
this.grouped_records = this.getGroupedRecords();
this.longest_string = this.getLongestStringWidth(this.uniques);
this.external_scales = external_scales;


//layout
this.margin = 15;
this.row_chart_margin = 5;
this.group_margins = 10;
this.width = width;
this.height = height;
this.bar_chart_height = 60;

this.relatve_svg_offset = d3.select('#plot-area').node().getBoundingClientRect();


this.reset_scales();

//dom manip
Expand All @@ -36,9 +39,24 @@ export default class StackedBars{
this.svg = div.append('g')
.attr('width', width)
.attr('height', this.height);

}

this.tooltip = d3.select('#plot-area').select('svg').append('g')
.attr('id', 'bars-tooltip')
.attr('visibility', 'hidden');

this.tooltip.append('rect')
.attr('fill', 'rgb(200,200,200)')
.attr('width', 140)
.attr('height', 15);

this.tooltip.append('text')
.attr('fill', 'black')
.attr('x', 3)
.attr('y', 13)
.attr('font-family', 'monospace')
.attr('font-size', 12);

}

reset_scales(){
Expand Down Expand Up @@ -176,6 +194,7 @@ export default class StackedBars{
//update width scales
this.reset_scales();


this.svg.selectAll('.chart_rows')
.data(this.uniques)
.join(
Expand Down Expand Up @@ -276,6 +295,17 @@ export default class StackedBars{
})
.on('click', (e,d)=>{
console.log(d, d.varname, d.data);
})
.on('mouseenter', (e, d)=>{
this.relatve_svg_offset = d3.select('#plot-area').node().getBoundingClientRect();
let coords = [e.x - this.relatve_svg_offset.x, e.y - this.relatve_svg_offset.y];
self.tooltip.attr('visibility', 'visible');
self.tooltip.attr('transform', `translate(${coords[0]}, ${coords[1]})`);
self.tooltip.select('text').text(`${d.varname}: ${Number.parseFloat(d.data).toFixed(2)}`);
})
.on('mouseout', (e, d)=>{
self.tooltip.attr('visibility', 'hidden');
self.tooltip.attr('transform', `translate(${0}, ${0})`);
});

sub_bars.each(function(_, i, a){
Expand All @@ -288,7 +318,7 @@ export default class StackedBars{
.attr('class', 'legend')
.attr('width', this.width)
.attr('height', 70)
.attr('transform', `translate(${0}, ${(this.uniques.length+1)*this.bar_chart_height})`);
.attr('transform', `translate(${0}, ${(this.uniques.length+1)*(this.bar_chart_height + this.margin)})`);

legend.append('text')
.attr('')
Expand All @@ -315,7 +345,7 @@ export default class StackedBars{
}
)

this.set_height(this.svg.node().getBBox().height + legend.node().getBBox().height);
this.set_height(this.svg.node().getBBox().height + legend.node().getBBox().height + 200);

this.svg.selectAll('text').style('font-family', 'monospace');

Expand Down
22 changes: 18 additions & 4 deletions thicket/vis/static/topdown_bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5807,13 +5807,13 @@ var StackedBars = /*#__PURE__*/function () {
_classCallCheck(this, StackedBars);

//data
this.topdown_vars = ['any#topdown.retiring', 'any#topdown.frontend_bound', 'any#topdown.backend_bound', 'any#topdown.bad_speculation'];
this.topdown_vars = ['Retiring', 'Frontend bound', 'Backend bound', 'Bad speculation'];
this.nice_vars = ['Retiring', 'Frontend Bound', 'Backend Bound', 'Bad Speculation'];
this.records = this.test_normalize(data);
this.uniques = this.get_unique_nodes(this.records);
this.profs = this.get_unique_profs(this.records, this.uniques[0].nid);
this.num_profs = this.profs.length;
this.sortvar = 'any#topdown.backend_bound';
this.sortvar = 'Backend bound';
this.magic_ordinal = 'any#ProblemSize';
this.ordinal_groups = this.getOrdinalGroups();
this.grouped_records = this.getGroupedRecords();
Expand All @@ -5826,13 +5826,18 @@ var StackedBars = /*#__PURE__*/function () {
this.width = width;
this.height = height;
this.bar_chart_height = 60;
this.relatve_svg_offset = src_select('#plot-area').node().getBoundingClientRect();
this.reset_scales(); //dom manip

if (div.node().nodeName == 'div') {
this.svg = div.append('svg').attr('width', width).attr('height', this.height);
} else if (div.node().nodeName == 'svg' || div.node().nodeName == 'g') {
this.svg = div.append('g').attr('width', width).attr('height', this.height);
}

this.tooltip = src_select('#plot-area').select('svg').append('g').attr('id', 'bars-tooltip').attr('visibility', 'hidden');
this.tooltip.append('rect').attr('fill', 'rgb(200,200,200)').attr('width', 140).attr('height', 15);
this.tooltip.append('text').attr('fill', 'black').attr('x', 3).attr('y', 13).attr('font-family', 'monospace').attr('font-size', 12);
}

_createClass(StackedBars, [{
Expand Down Expand Up @@ -6190,12 +6195,21 @@ var StackedBars = /*#__PURE__*/function () {
return self.stacked_bar_scale(d.data);
}).on('click', function (e, d) {
console.log(d, d.varname, d.data);
}).on('mouseenter', function (e, d) {
_this2.relatve_svg_offset = src_select('#plot-area').node().getBoundingClientRect();
var coords = [e.x - _this2.relatve_svg_offset.x, e.y - _this2.relatve_svg_offset.y];
self.tooltip.attr('visibility', 'visible');
self.tooltip.attr('transform', "translate(".concat(coords[0], ", ").concat(coords[1], ")"));
self.tooltip.select('text').text("".concat(d.varname, ": ").concat(Number.parseFloat(d.data).toFixed(2)));
}).on('mouseout', function (e, d) {
self.tooltip.attr('visibility', 'hidden');
self.tooltip.attr('transform', "translate(".concat(0, ", ", 0, ")"));
});
sub_bars.each(function (_, i, a) {
this.getBBox().height;
});
});
var legend = this.svg.append('g').attr('class', 'legend').attr('width', this.width).attr('height', 70).attr('transform', "translate(".concat(0, ", ", (this.uniques.length + 1) * this.bar_chart_height, ")"));
var legend = this.svg.append('g').attr('class', 'legend').attr('width', this.width).attr('height', 70).attr('transform', "translate(".concat(0, ", ", (this.uniques.length + 1) * (this.bar_chart_height + this.margin), ")"));
legend.append('text').attr('');
legend.selectAll('.label-grp').data(this.topdown_vars).join(function (enter) {
var label = enter.append('g').attr('class', 'label-grp').attr('transform', function (d, i) {
Expand All @@ -6209,7 +6223,7 @@ var StackedBars = /*#__PURE__*/function () {
return self.nice_vars[i];
}).attr('x', 23).attr('y', 10).attr('dominant-baseline', 'middle');
});
this.set_height(this.svg.node().getBBox().height + legend.node().getBBox().height);
this.set_height(this.svg.node().getBBox().height + legend.node().getBBox().height + 200);
this.svg.selectAll('text').style('font-family', 'monospace');
}
}]);
Expand Down

0 comments on commit 8e99ec2

Please sign in to comment.