Skip to content

Commit

Permalink
Fix report formatting (#531)
Browse files Browse the repository at this point in the history 
* fix layout

* fix min-width of plotly plots

* merge main and add axes

* fix gap in selections

* fix plot width in collaps. sections

* plot slices w/ one pint
  • Loading branch information
@a-kore
a-kore authored Dec 12, 2023
1 parent f64f0e0 commit f96bef1
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 46 deletions.
134 changes: 99 additions & 35 deletions cyclops/report/templates/cyclops_generic_template.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
<div>
<span style="font-size: 18px; font-weight:bold;">
<div class="tooltip">
{{ card.name }}
{{ card.name|regex_replace('(?<!^)(?=[A-Z][a-z])', ' ') }}
<div class="tooltiptext">
{{ card.tooltip }}
<div class="arrow-up"></div>
Expand All @@ -161,8 +161,8 @@
<span style="font-size: 40px; color: gray;">&#9472;</span>
{% endif %}
</span>
<span style="display: inline-block; line-height:1;">
<span style="font-size: 14px">{{card.threshold}}<br>minimum<br>threshold</span>
<span style="display: inline-block; line-height:1; margin-bottom: 10px;">
<span style="font-size: 14px;">{{card.threshold}}<br>minimum<br>threshold</span>
</span>
<div id="model-card-plot-{{idx}}">
</div>
Expand All @@ -184,7 +184,7 @@
{% endmacro %}

{% macro render_perf_over_time(name, comp)%}
<div class="card" id={{name}} style="display: block; flex-basis: 100%">
<div class="card" id={{name}} style="display: block;">
<h3 style="color: black; font-weight:normal;">How is your model doing over time?</h3><br>
<h3 style="color: gray; font-weight:normal;">See how your model is performing over several metrics and subgroups over time.</h3>
<div style="display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 20px;">
Expand All @@ -197,7 +197,7 @@
</div>
</div>
<div class="column" style="float: left;">
<div class="subcard_overview" style="padding:10px; margin-bottom:20px; max-width:500px;">
<div class="subcard_overview" style="padding:10px; margin-bottom:20px; width:15vw;">
<h4>Metrics</h4>
<div class="radio-buttons" id="slice-selection">
<input type="radio" id="{{comp.metric_cards.metrics[0]}}" name="metric" value="{{comp.metric_cards.metrics[0]}}" checked>
Expand All @@ -212,7 +212,7 @@
</div>
{% else %}
<div class="tooltip">
<label for="{{comp.metric_cards.metrics[0]}}">{{comp.metric_cards.metrics[0]}}</label>
<label for="{{comp.metric_cards.metrics[0]}}">{{comp.metric_cards.metrics[0]|regex_replace('(?<!^)(?=[A-Z][a-z])', ' ')}}</label>
<div class="tooltiptext">
{{ comp.metric_cards.tooltips[0] }}
<div class="arrow-up"></div>
Expand All @@ -233,7 +233,7 @@
</div>
{% else %}
<div class="tooltip">
<label for="{{metric}}">{{metric}}</label>
<label for="{{metric}}">{{metric|regex_replace('(?<!^)(?=[A-Z][a-z])', ' ')}}</label>
<div class="tooltiptext">
{{ tooltip }}
<div class="arrow-up"></div>
Expand All @@ -244,36 +244,41 @@
</div>
</div>
{% for slice, values in comp.metric_cards.slices|zip(comp.metric_cards.values) %}
<div class="subcard_overview" style="padding:10px; margin-bottom:10px; max-width:500px;">
<h4>{{slice|regex_replace('(?<!^)(?=[A-Z])', ' ')|title}}</h4>
<div class="subcard_overview" style="padding:10px; margin-bottom:10px; width:15vw;">
<h4>{{slice|regex_replace('(?<!^)(?=[A-Z][a-z])', ' ')}}</h4>
<div class="radio-buttons" id="slice-selection">
<input type="radio" id="overall_{{slice}}" name="{{slice}}" value="overall_{{slice}}" checked>
<label for="overall_{{slice}}">All</label>
{% for value in values %}
<input type="radio" id="{{value}}" name="{{slice}}" value="{{value}}">
<label for="{{value}}">{{value|regex_replace('_+', ' ')|title}}</label>
{% if value|regex_search("\((.*?)\)")|length != 0 %}
{% set acronym = value|regex_search("\((.*?)\)") %}
<label for="{{value}}">{{acronym[0]}}</label>
{% else %}
<label for="{{value}}">{{value|regex_replace('(?<!^)(?=[A-Z][a-z])', ' ')}}</label>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<div class="subcard_overview" style="margin:auto; float:right;">
<div class="subcard_overview" style="margin: 0px; margin-left:25px; float:left; min-width:500px; max-width:100%;">
<div id="plot"></div>
</div>
</div>
{% endmacro %}

{% macro render_overview(name, comp) %}
{{ render_perf(name, comp) }}
{% set val = {'history': false} %}
{# {% set val = {'history': false} %}
{% for metric_card in comp.metric_cards.collection%}
{% if metric_card.history|length > 1 %}
{% set _ = val.update({'history':true}) %}
{% endif %}
{% endfor %}
{% if val['history'] %}
{{ render_perf_over_time(name, comp) }}
{% endif %}
{% if val['history'] %} #}
{{ render_perf_over_time(name, comp) }}
{# {% endif %} #}
{% endmacro %}

{% macro render_objects(section)%}
Expand Down Expand Up @@ -326,7 +331,7 @@
{% endfor %}
{# Display global plots from GraphicsCollection in Datasets, temporary fix #}
{% if section is hasattr "graphics" %}
<div class="subcard" style="min-width:1400px;">
<div class="subcard" style="flex-basis:100%;">
<h3>{{ "Graphics" }}</h3>
{{ render_if_exist_list(section.graphics) }}
</div>
Expand All @@ -339,7 +344,7 @@
{% endfor %}
{% if section is hasattr "graphics"%}
{% if section.graphics is not none%}
<div class="subcard" style="min-width:1400px;">
<div class="subcard" style="flex-basis:100%;">
<h3>{{ "Graphics" }}</h3>
{{ render_if_exist_list(section.graphics) }}
</div>
Expand Down Expand Up @@ -401,6 +406,7 @@
body {
font-family: Arial, Helvetica, sans-serif;
min-width: 1150px;
}
h2 {
Expand All @@ -412,7 +418,6 @@
color: #0073e4;
flex-basis: 100%;
}
.card {
display: flex;
flex-wrap: wrap;
Expand All @@ -432,7 +437,6 @@
background-color: #f3f4f6;
border-radius: 5px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
{# display: none; #}
}
.subcard_overview {
Expand All @@ -450,9 +454,6 @@
}
.img-item {
min-width: 1024px;
width: 100%;
height: auto;
flex-basis: 100%;
margin-top: 10px;
margin-bottom: 10px;
Expand Down Expand Up @@ -725,6 +726,7 @@
.radio-buttons {
display: flex;
row-gap: 15px;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
Expand All @@ -747,6 +749,7 @@
transition: background-color 0.3s ease;
background-color: #ffffff;
border: 2px solid #DADCE0;
white-space: nowrap;
}
.radio-buttons label:not(:first-child):not(:last-child) {
Expand Down Expand Up @@ -848,6 +851,15 @@
</body>
</html>
<script>
function multipleStringLines(title) {
if (title.length > 50) { // check if greater than threshold!
let y_axis = title.split(' '); //break into words
let interval = title.split(' ').length / 2; //2-lines
return y_axis.slice(0, interval).join(' ') + '<br>' + y_axis.slice(interval, y_axis.length).join(' ');
}
return title;
}
function isInView(element) {
// return true if element is in view
var rect = element.getBoundingClientRect(),
Expand Down Expand Up @@ -934,15 +946,21 @@
plot_bgcolor: "rgba(0,0,0,0)",
xaxis: {
zeroline: false,
showticklabels: false,
showgrid: false
showticklabels: true,
showgrid: false,
tickformat: '%b\n %Y'
},
yaxis: {
gridcolor: "#ffffff"
gridcolor: "#ffffff",
zeroline: false,
showticklabels: true,
showgrid: true,
range: [-0.10, 1.10],
},
margin: { l: 0, r: 0, t: 0, b: 0 },
height: 125,
width: 250
margin: { l: 30, r: 0, t: 0, b: 30 },
padding: { l: 0, r: 0, t: 0, b: 0 },
height: 150,
width: 300
}
};
if (history.length > 0) {
Expand Down Expand Up @@ -1261,7 +1279,6 @@
// create title for plot: Current {metric name} is trending {trend_keyword} and is {passed_keyword} the threshold.
// get number of nulls in selections, if 9 then plot title, else don't plot title
console.log(selections)
var nulls = 0;
for (let i = 0; i < selections.length; i++) {
if (selections[i] === null) {
Expand All @@ -1270,6 +1287,7 @@
}
if (nulls === 10) {
var plot_title = "Current " + name + " is trending " + trend_keyword + " and is " + passed_keyword + " the threshold.";
var plot_title = multipleStringLines(plot_title);
var showlegend = false;
}
else {
Expand Down Expand Up @@ -1324,6 +1342,7 @@
};
traces.push(threshold_trace);
}
var width = Math.max(parent.innerWidth - 900, 500);
var layout = {
title: {
text: plot_title,
Expand All @@ -1336,13 +1355,26 @@
plot_bgcolor: 'rgba(0,0,0,0)',
xaxis: {
zeroline: false,
showticklabels: false,
showticklabels: true,
showgrid: false,
tickformat: '%b\n %Y'
},
yaxis: {
gridcolor: '#ffffff',
zeroline: false,
showticklabels: true,
showgrid: true,
range: [-0.10, 1.10],
},
showlegend: showlegend,
// show legend at top
legend: {
orientation: "h",
yanchor: "top",
y: 1.1,
xanchor: "left",
x: 0.1
},
margin: {
l: 50,
r: 50,
Expand All @@ -1352,7 +1384,8 @@
},
// set height and width of plot to extra-wide to fit the plot
height: 500,
width: 900,
// get size of window and set width of plot to size of window
width: width,
}
Plotly.newPlot(plot, traces, layout, {displayModeBar: false});
}
Expand Down Expand Up @@ -1565,6 +1598,7 @@
}
if (nulls === 10) {
var plot_title = "Current " + name + " is trending " + trend_keyword + " and is " + passed_keyword + " the threshold.";
var plot_title = multipleStringLines(plot_title);
var showlegend = false;
}
else {
Expand Down Expand Up @@ -1619,6 +1653,7 @@
};
traces.push(threshold_trace);
}
var width = Math.max(parent.innerWidth - 900, 500);
var layout = {
title: {
text: plot_title,
Expand All @@ -1631,30 +1666,45 @@
plot_bgcolor: 'rgba(0,0,0,0)',
xaxis: {
zeroline: false,
showticklabels: false,
showticklabels: true,
showgrid: false,
tickformat: '%b\n %Y'
},
yaxis: {
gridcolor: '#ffffff',
zeroline: false,
showticklabels: true,
showgrid: true,
range: [-0.10, 1.10],
},
showlegend: showlegend,
// show legend at top
legend: {
orientation: "h",
yanchor: "top",
y: 1.1,
xanchor: "left",
x: 0.1
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
// set height and width of plot to extra-wide to fit the plot
// set height and width of plot to width of card minus 500px
height: 500,
width: 900,
width: width,
}
Plotly.newPlot(plot, traces, layout, {displayModeBar: false});
}
// Add event listeners to radio buttons
for (let input of inputs_all) {
input.addEventListener('change', updatePlot);
}
// Add event listener to update plot when window is resized
window.addEventListener('resize', updatePlot);
for (let selection of plot_selection) {
selection.addEventListener('change', updatePlotSelection);
}
Expand All @@ -1673,7 +1723,6 @@
for (let i = 0; i < collapsible.length; i++) {
collapsible[i].addEventListener("click", function() {
let arrow = collapsible[i];
if (arrow.classList.contains('down-arrow')) {
arrow.classList.add('right-arrow');
arrow.classList.remove('down-arrow');
Expand All @@ -1691,9 +1740,24 @@
let collapsible_bar = card.getElementsByClassName("collapsible-bar")[0];
collapsible_bar.style.display = collapsible_bar.style.display === 'block' ? 'none' : 'block';
refreshPlotlyPlots();
});
}
}
document.addEventListener('DOMContentLoaded', setCollapseButton);
// function to refresh plotly plots
function refreshPlotlyPlots() {
const img_items = document.getElementsByClassName("img-item");
for (let i = 0; i < img_items.length; i++) {
if (img_items[i].getElementsByTagName("div").length > 0) {
id = img_items[i].getElementsByClassName("plotly-graph-div")[0].id;
var gd = document.getElementById(id);
data = gd.data;
layout = gd.layout;
Plotly.update(id, data, layout);
}
}
}
</script>
11 changes: 0 additions & 11 deletions docs/source/tutorials/kaggle/heart_failure_prediction.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1126,17 +1126,6 @@
"fairness_plot.show()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Performance over time\n",
"\n",
"We can monitor the change of performance metrics over time by leveraging historical reports. This involves using the `get_metrics_trends` function to gather prior metrics and merge them with recent results. We can specify which metrics and slices we wish to observe. Once the data is collected, we generate the plot using the `metrics_trends` method from the plotter, which can then be integrated into the report.\n",
"\n",
"Please note, for the purpose of this tutorial, we will create three dummy reports to demonstrate the process of plotting these metric trends."
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand Down

0 comments on commit f96bef1

Please sign in to comment.