Improvements to readability of the table and making this lighter

AdrianoDee · AdrianoDee · commit 08954db3eaf5 · 2024-05-24T16:57:40.000+02:00
diff --git a/Utilities/RelMon/python/definitions.py b/Utilities/RelMon/python/definitions.py
@@ -198,7 +198,10 @@
 data_pattern_blist_pairs=()
 
 ## colors for gauge
-
 from  matplotlib.colors import LinearSegmentedColormap
 gauge_cmap=LinearSegmentedColormap.from_list('rg',["r", "orange","y","lime"], N=256) 
 
+## cms logo
+cms_logo_url = "https://cms-docdb.cern.ch/cgi-bin/PublicDocDB/RetrieveFile?docid=3045&amp;filename=CMSlogo_color_label_1024_May2014.png&amp;version=3"
+
+
diff --git a/Utilities/RelMon/python/directories2html.py b/Utilities/RelMon/python/directories2html.py
@@ -25,6 +25,7 @@
 import os
 import hashlib
 import random
+from matplotlib.colors import to_hex
 
 if "RELMON_SA" in os.environ:
   from .dirstructure import Comparison,Directory
@@ -85,6 +86,9 @@ def get_page_header(directory=None, standalone=False, additional_header=""):
     style_location = "http://cms-service-reldqm.web.cern.ch/" + style_location +"/"
   javascripts=''
   style=''
+  tablestyle=''
+  thead_h = 400 
+  wrapper_h = 1500
   if directory!=None and len(directory.comparisons)>0:
     meta=directory.meta
     style='img.fail {border:1px solid #ff0000;}\n'+\
@@ -95,9 +99,23 @@ def get_page_header(directory=None, standalone=False, additional_header=""):
           'a.black_link:hover {color: #737373}\n'+\
           'a.black_link:visited {color: #333333}\n'+\
           'a.black_link:active {color: #333333}\n'
+    ## fixed first row and first column table
+    
+    wrapper_h = min(thead_h + (70 * len(directory.comparisons)),1800)
+
+  tablestyle = '\n.wrapper { overflow: auto; height: %dpx;} \n'%(wrapper_h)
+  tablestyle += 'table {  position: relative; border-collapse: separate; border-spacing: 0;} \n'
+  tablestyle += 'table { position: relative; border-collapse: separate; border-spacing: 0;} \n'
+  tablestyle += 'table th, table td { width: 50px; padding: 5px; background-color: white;} \n'
+  tablestyle += 'table th { position: sticky; top: 0; z-index: 2; height: %dpx;} \n'%(thead_h)
+  tablestyle += 'table th:nth-child(1) { left:0; z-index:3;} \n'
+  tablestyle += '.sticky-col { position: sticky; background-color: #C9FFD1  ; width: 200px; left:0}\n'
+  tablestyle += '.center_head { position: absolute; top: 50%; left: 50%;} \n'
+  tablestyle += '.vertical_head {top: 60%; -webkit-transform:  translateX(-50%) translateY(-50%) rotate(-90deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);} \n'
   javascripts=""
+
   
-  
+
   html='<html>'+\
        '<head>'+\
        '<title>RelMon Summary</title>'+\
@@ -108,6 +126,7 @@ def get_page_header(directory=None, standalone=False, additional_header=""):
        '<style type="text/css">'+\
        '.rotation {display: block;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); }'+\
        '%s'%style+\
+       '%s'%tablestyle +\
        '</style>'+\
        '%s'%javascripts+\
        '%s'%additional_header+\
@@ -125,10 +144,7 @@ def get_page_footer():
 #-------------------------------------------------------------------------------
 
 def get_title_section(directory, hashing_flag, standalone, depth=2):
-  if standalone:
-      cms_logo_url = "http://cms-service-reldqm.web.cern.ch/cms-service-reldqm/style/CMS.gif"
-  else:
-      cms_logo_url = "cms-service-reldqm/style/CMS.gif"
+  
   mother_name=basename(directory.mother_dir)
   mother_file_name=""
   if depth==1:
@@ -214,7 +230,7 @@ def get_subdirs_section(directory, hashing_flag):
     html+='</div>'
     
     html+='<div class="span-6 last">'
-    html+= subdir.get_piechart_js(150,link)
+    html+= subdir.get_piechart_js(120,link)
     html+='</div>'
     
     html+='<hr>'
@@ -265,7 +281,7 @@ def get_summary_section(directory,matrix_page=True):
   html+='</div>'
         
   html+='<div class="span-7 colborder">'+\
-        '%s'%(directory.get_piechart_js(200)) +\
+        '%s'%(directory.get_piechart_js(150)) +\
         '</div>'+\
         '<div class="span-9 last">'
   if matrix_page:
@@ -493,42 +509,33 @@ def directory2html(directory, hashing, standalone, depth=0):
 
   #chdir(old_cwd)
 
-def to_rgba(t):
-    ''' Convert a RGBA tuple to string'''
-    return "rgba(%f,%f,%f,%f)"%(t)
-
-def build_gauge_js(rate,w=100,minrate=.80):
+def build_gauge_js(rate,w=100,minrate=.80,add_rate=False):
 
-  color = to_rgba(gauge_cmap(rate-minrate))
-  font_size = int(w/5)
-  text_offs = int(w/8)
+  color = to_hex(gauge_cmap((rate-minrate)/(1.0-minrate)))
+  font_size = int(w/9)
   gauge_max = 1. - rate
 
   name = random.getrandbits(64) # just a random has for the canvas
   html = "" 
-  html += '<div style="width:100%%;max-width:%d; position: relative;">'%(w)
-  html += '<div style="width: 100%%; position: absolute; top: 75%%; margin-top: -%dpx; text-align: center;">'%(text_offs)
-  html += '<span style="color: %s; font-family: courier; font-size: %dpx;">%.2f%%</span>'%(color,font_size,rate*100.)
-  html += '<canvas id="%s"></canvas>'%(name)
+  html += '<canvas id="%s" style="width:100%%;max-width:%d"></canvas>'%(name,w)
 
   # "gauge" chart
   html += '<script> new Chart("%s",'%(name) 
   html += '{ type: "doughnut",'
 
   # data
   html += 'data: {'
-  html += 'datasets: [{ backgroundColor: ["%s", "rgba(0, 0, 0, 0.1)"],'%(color)
+  html += 'labels: ["Success", "Failure"],'
+  html += 'datasets: [{ backgroundColor: ["%s", "#C7C7C7"],'%(color)
   html += 'data: [%f,%f]}] },'%(rate,gauge_max)
 
   #options
-  html += 'options: { responsive: true, rotation: -90, circumference: 180 },'
-
-  html += '}); </script> </div> </div>'
-
-  print("here")
-
-  img_link="https://upload.wikimedia.org/wikipedia/commons/a/a8/Circle_Davys-Grey_Solid.svg"
-  html='<img src="%s" title="%s" height=50 width=50>' %(img_link,"test")
+  html += 'options: { responsive: true, rotation: -3.1415926536, circumference: 3.1415926536 ,' ## in radiants
+  html += ' legend: { display: false }, tooltips: {enabled: false}, hover: {mode: null}},'
+  html += '}); </script>'
+  if add_rate:
+    html += '<div style="width: 100%%; position: relative; left: %d; margin-top: -%dpx; font-align: center">'%(int(2*w/7),font_size)
+    html += '<span style="color: %s; font-family: courier; font-size:  %dpx;">%.2f%%</span></div>'%(color,font_size,rate*100.)
 
   return html
 #-------------------------------------------------------------------------------
@@ -633,7 +640,7 @@ def make_categories_summary(dir_dict,aggregation_rules):
     html+='</div>'
     
     html+='<div class="span-6 last">'
-    html+=build_gauge_js(average_success_rate)
+    html+=build_gauge_js(average_success_rate,add_rate=True)
     html+='</div>'
     
     html+='<hr>'
@@ -710,7 +717,7 @@ def make_barchart_summary(dir_dict,name="the_chart",title="DQM directory",the_ag
                          });
       }
     </script>
-    """%(name,40*counter,title)
+    """%(name,35*counter,title)
   return script
 
 
@@ -821,7 +828,7 @@ def make_summary_table(indir,aggregation_rules,aggregation_rules_twiki, hashing_
   page_html+=make_categories_summary(dir_dict,aggregation_rules)
 
   # Make the Directories chart
-  page_html+='<div class="span-24"><h2 class="alt"><a name="detailed_barchart">Detailed Barchart</a></h2></div>'
+  # page_html+='<div class="span-24"><h2 class="alt"><a name="detailed_barchart">Detailed Barchart</a></h2></div>'
   page_html+='<div id="dir_chart"></div> <a href="#top">Top...</a><hr>'
   
   # Barbarian vertical space. Suggestions are welcome
@@ -830,24 +837,31 @@ def make_summary_table(indir,aggregation_rules,aggregation_rules_twiki, hashing_
 
  
   # Prepare the table
-  page_html+='<div class="span-24"><h2 class="alt"><a name="summary_table">Summary Table</a></h2></div>'
+  page_html+='<div class="span-24"><h2 class="alt"><a name="summary_table">Summary Table</a></h2> <h4> <span class="alt"> (scrollable) </span> </h4> </div>'
 
-  for i in range(5):
-    page_html+='<div class="span-24"><p></p></div>\n'
-    
+  # for i in range(5):
+  #   page_html+='<div class="span-24"><p></p></div>\n'
+  
+  div_width= min(len(dir_dict.keys()) * 70 + 500,1500) #80 px per column + 200 for the first column
+  page_html+='<div class="wrapper" style = "width: %dpx;">'%(div_width)
   page_html+="""
-        <table border="1" >
+        <table>
+        <thead>
           <tr>
-          <td> </td>          
+          <th> <p class = "vertical_head center_head"></p> </th>        
   """
   
   # First row with samples
   page_html+="""
-          <td><div class="span-1"><p class="rotation" style="alt"><b>Summary</b></p></div></td>"""
+          <th> <p class = "vertical_head center_head">Summary</p></th>"""
 
   sorted_samples=sorted(dir_dict.keys())
   for sample in sorted_samples:
-    sample_nick=sample
+    if "_" in sample:
+      sample_nick="_".join(sample.split("X_")[0].split("_")[:-1]) 
+      #slightly cleaner: _X is for the GT string, the _ split take away the 123X
+    else:
+      sample_nick = sample
     ## For runs: put only the number after the _
     #if "_" in sample:
       #run_number=sample.split("_")[-1]      
@@ -856,34 +870,34 @@ def make_summary_table(indir,aggregation_rules,aggregation_rules_twiki, hashing_
       
       
     page_html+="""
-          <td><div class="span-1"><p class="rotation" style="">%s</p></div></td>"""%sample_nick
-  page_html+="          </tr>\n"
+          <th> <p class = "vertical_head center_head">%s</th></p>"""%sample_nick
+  page_html+="</tr> \n </thead> \n </tbody> \n"
 
 
  # FIRST ROW
  # Now the summaries  at the beginning of the table
   page_html+="<tr>"
-  page_html+='<td  style="background-color:white;"><div class="span-1">'
+  page_html+='<td class="sticky-col">'
   
-  page_html+='<b>Summary</b></div></td>'
-  page_html+='<td style="background-color:white;" class = "colborder" ><div class="span-1"> %s </div></td>'%(global_dir.get_piechart_js(55))
+  page_html+='<b>Summary</b></td>'
+  page_html+='<td><div class="span-1"> %s </div></td>'%(global_dir.get_piechart_js(50))
   for sample in sorted_samples:
     col=dir_dict[sample]
     # check if the directory was a top one or not
     summary_page_name="RelMonSummary.html"
     if col.name!="":
       summary_page_name=hash_name(col.name, hashing_flag)+".html"
     title = get_pie_tooltip(col)
-    chart = col.get_piechart_js(55,sample+"/"+summary_page_name,title)
-    page_html+='<td  style="background-color:white;"><div class="span-1">'
-    page_html+='%s </a></div></td>' %(chart)
+    chart = col.get_piechart_js(50,sample+"/"+summary_page_name)
+    page_html+='<td>'
+    page_html+='%s </a></td>' %(chart)
   page_html+="</tr>"
 
   # Now the content
   for subdir_name in all_subdirs:  
 
     page_html+='          <tr>\n'
-    page_html+='          <td style="background-color:white;">%s</td>\n' %subdir_name  
+    page_html+='          <td class="sticky-col" style="font-weight:bold;">%s</td>\n' %subdir_name  
 
     row_summary=Directory("row_summary","")
     sample_counter=0
@@ -899,8 +913,8 @@ def make_summary_table(indir,aggregation_rules,aggregation_rules_twiki, hashing_
     # one first row for the summary!
     row_summary.calcStats()
     title = get_pie_tooltip(col)
-    chart = row_summary.get_piechart_js(55,None,title)
-    page_html+='<td  style="background-color:white;"><div class="span-1">'
+    chart = row_summary.get_piechart_js(50)
+    page_html+='<td><div>'#<div class="span-1">'
     page_html+= chart + '</div></td>'
 
     for sample in sorted_samples:
@@ -925,27 +939,26 @@ def make_summary_table(indir,aggregation_rules,aggregation_rules_twiki, hashing_
       dir_is_there=subdir_name in subdirs_dict
 
       img_link="https://upload.wikimedia.org/wikipedia/commons/a/a8/Circle_Davys-Grey_Solid.svg"
-      img_tooltip="N/A"
-      page_html+='<td  style="background-color:white;"><div class="span-1">'
+      page_html+='<td><div class="span-1">'
 
       if dir_is_there:
         #row_summary.subdirs.append(subdirs_dict[subdir_name])
-        img_tooltip=get_pie_tooltip(subdirs_dict[subdir_name])
-        chart=subdirs_dict[subdir_name].get_piechart_js(50,summary_page,img_tooltip)
+        chart=subdirs_dict[subdir_name].get_piechart_js(50,summary_page)
         page_html+='%s'%chart
       else:
-        page_html+='<img src="%s" title="%s" height=50 width=50>' %(img_link,img_tooltip)
+        page_html+='<img src="%s" title="%s" height=50 width=50>' %(img_link)
       page_html+='</div></td>' 
 
     page_html+="          </tr>\n"        
 
 
 
-  page_html+='</table> <a href="#top">Top...</a><hr>'
+  page_html+='</tbody> </table> </div> <a href="#top">Top...</a><hr>'
 
   page_html+=get_rank_section(global_dir)
 
-  page_html+=make_twiki_table(dir_dict,aggregation_rules_twiki)
+  #page_html+=make_twiki_table(dir_dict,aggregation_rules_twiki) 
+  # ^ commenting out for the moment, not really useful nor used
 
   page_html+=get_page_footer()
   return page_html  
diff --git a/Utilities/RelMon/python/dirstructure.py b/Utilities/RelMon/python/dirstructure.py
@@ -168,14 +168,21 @@ def get_subdirs_names(self):
       subdirnames.append(subdir.name)
     return subdirnames
 
-  def get_piechart_js(self,w=400,link=None,title=None):
+  def get_piechart_js(self,w=400,link=None):
+
     """
     Build the HTML snippet to render a piechart with chart.js
     """
+    if self.get_success_rate()>=99.9: # if the success rate is very high let's make the page lighter 
+      img_link = "https://raw.githubusercontent.com/cms-PdmV/RelMonService2/5ee98db210c0898fd34b4deac3653fa2bdff269b/report_website/lime_circle.png"
+      html ='<img src="%s" height=%d width=%d>' %(img_link,w,w)
+      if link is not None:
+        html = '<a href="%s"> %s </a>' %(link,html) 
+      return html
 
     name = random.getrandbits(64) # just a random has for the canvas
     html = "" 
-    html += '<canvas id="%s" style="width:100%%;max-width:%d"></canvas>'%(name,w)
+    html += '<canvas id="%s" height=%d width=%d></canvas>'%(name,w,w)
     # piechart
     html += '<script> new Chart("%s",'%(name) 
     html += '{ type: "pie",'
@@ -191,12 +198,10 @@ def get_piechart_js(self,w=400,link=None,title=None):
 
     if link is not None:
       html += 'onClick : function(event) { window.open("%s", "_blank");},'%(link)
-    
-    if title is not None:
-      html += 'title: { display: true, text: "%s"},'%(title)
-
-    html +='legend: { display: false },'
+  
 
+    html +='legend: { display: false }, responsive : false, hover: {mode: null}, tooltips: {enabled: false}' 
+    #tooltips: {enabled: false}, hover: {mode: null},'
 
     html += '}}); </script>'
 
