Fix report formatting (#531)

* 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

Author: a-kore

cyclops/report/templates/cyclops_generic_template.jinja

@@ -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>
@@ -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>
@@ -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;">
@@ -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>
@@ -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>
@@ -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>
@@ -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)%}
@@ -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>
@@ -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>
@@ -401,6 +406,7 @@
 
       body {
         font-family: Arial, Helvetica, sans-serif;
+        min-width: 1150px;
       }
 
       h2 {
@@ -412,7 +418,6 @@
         color: #0073e4;
         flex-basis: 100%;
       }
-
       .card {
         display: flex;
         flex-wrap: wrap;
@@ -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 {
@@ -450,9 +454,6 @@
       }
 
       .img-item {
-        min-width: 1024px;
-        width: 100%;
-        height: auto;
         flex-basis: 100%;
         margin-top: 10px;
         margin-bottom: 10px;
@@ -725,6 +726,7 @@
 
       .radio-buttons {
         display: flex;
+        row-gap: 15px;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: left;
@@ -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) {
@@ -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(),
@@ -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) {
@@ -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) {
@@ -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 {
@@ -1324,6 +1342,7 @@
       };
       traces.push(threshold_trace);
     }
+    var width = Math.max(parent.innerWidth - 900, 500);
     var layout = {
       title: {
         text: plot_title,
@@ -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,
@@ -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});
   }
@@ -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 {
@@ -1619,6 +1653,7 @@
       };
       traces.push(threshold_trace);
     }
+    var width = Math.max(parent.innerWidth - 900, 500);
     var layout = {
       title: {
         text: plot_title,
@@ -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);
   }
@@ -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');
@@ -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>

docs/source/tutorials/kaggle/heart_failure_prediction.ipynb

@@ -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": {},