HTMLView.py

Go to the documentation of this file.

import common_tools as tools
from PageMaker import PageMaker
import naming_schema
import os
import glob

class HTMLView():

    def __init__(self, controller_view, breadcrumb=False, reuse_histograms=False, verbose=True, testing=False):
        self.verbose    = verbose
        self.testing    = testing
        self.reuse_histograms = reuse_histograms
        self.controller_view = controller_view
        self.breadcrumb = breadcrumb

    def write_component_html(self):
        if self.testing:
            self.directory_base = "%s/%s/v%s"%(os.environ["NOVAANAVALID_WEB_TEST"],self.controller_view.controller.name,self.controller_view.controller.version)
        else:
            self.directory_base = "%s/%s/v%s"%(os.environ["NOVAANAVALID_WEB"],self.controller_view.controller.name,self.controller_view.controller.version)
        tools.mkdir(self.directory_base)
        self.url_base = tools.directoryToURL(self.directory_base)
        if self.verbose:
            print "vhtml: Directory base: %s"%self.directory_base
            print "vhtml: URL base:       %s"%self.url_base

        # Fill a map for the cross linking
        pages = []
        page_info = []
        components = []
        dropdowns = {}
        plot_map = {}

        for component_type in self.controller_view.component_type_keys:
            if component_type not in self.controller_view.plot_groups.keys(): continue
            if self.verbose: print "vhtml: component type: %s, %i plot groups"%(component_type,len(self.controller_view.plot_groups[component_type]))
            component_directory_base = "%s/%s"%(self.directory_base,component_type)
            tools.mkdir(component_directory_base)
            component_url_base = tools.directoryToURL(component_directory_base)

            if component_type not in dropdowns.keys(): dropdowns[component_type] = []

            for plot_group in self.controller_view.plot_groups[component_type]:
                if self.verbose: print "vhtml:     group: %s"%(plot_group)
                if plot_group not in dropdowns[component_type]: dropdowns[component_type].append(plot_group)

                html_page = PageMaker(plot_group.replace(" ","_")+".html", component_directory_base, component_url_base)
                if self.breadcrumb:
                    breadcrumb = self.breadcrumb
                    breadcrumb += '<li><a href="%s/index.html">%s</a></li>'%(component_url_base, naming_schema.componentName(component_type))
                    breadcrumb += '<li class="active">%s</li>'%plot_group
                    html_page.addContent("<!--BREADCRUMB_HOOK-->", breadcrumb)
                self.add_navbar_hook(html_page)
                self.add_sidebar_hook(html_page)
                self.add_controls(html_page, plot_group.replace(" ","_"))

                plots = self.controller_view.plot_information[component_type].keys()
                plots = tools.sortPlotList(plots)

                title = '<h1 class="page-header">%s: %s</h1>'%(naming_schema.componentName(component_type), plot_group)
                html_page.addContent("<!--BODY_HOOK-->",title)

                current_category = False
                self.sidebar_index = -1
                any_truth = False
                previous_observable = False
                reco_levels = []
                for i,plot in enumerate(plots):
                    plot_info = self.controller_view.plot_information[component_type][plot]
                    if plot_info.group != plot_group: continue
                    plot_name = plot.split("/")[-1].split(".")[0]
                    true_level = tools.getHistogramTrueLevel(plot_name)
                    reco_level = tools.getHistogramRecoLevel(plot_name)
                    if plot_info.true_components: any_truth = True
                    # true levels are added as options
                    if (true_level != ""): continue
                    # check if this is the same observable as previously - if so we're in a reco group
                    observable = tools.getHistogramObservable(plot_name)
                    if (observable == previous_observable):
                        reco_levels.append(reco_level)
                        self.add_plot_information(html_page, plot_name, plot_info)
                        continue
                    # if not, then we're in a new observable
                    self.add_reco_level_controls(html_page, reco_levels)
                    previous_observable = observable
                    reco_levels = [reco_level]
                    
                    # populate the sidebar and body headings on category change
                    this_category = tools.getHistogramCategory(plot_name)
                    if (this_category == "meta"): continue
                    if (this_category == "true") and ("data" in plot_group): continue
                    if this_category != current_category:
                        current_category = this_category
                        self.add_sidebar_section(current_category, html_page)
                        subtitle = '<h2 id="%s">%s</h2><hr>'%(current_category,naming_schema.categoryName(current_category))
                        html_page.addContent("<!--BODY_HOOK-->",subtitle)

                    # Are we expecting a ratio plot
                    ratio = (len(plot_info.names) > 1) and ("contour" not in observable)

                    # print plot_name, plot_info.names, true_level
                    folder = plot_group.replace(" ","_")
                    self.copy_figure(plot,"%s/%s/"%(component_directory_base, folder))
                    self.add_figure(plot_name, folder, plot_info, html_page, component_type, plot_group, ratio=ratio, normalisations=plot_info.normalisations, truth=any_truth, reco_level=reco_level)
                    self.add_plot_information(html_page, plot_name, plot_info)
                # add in the final reco level control
                self.add_reco_level_controls(html_page, reco_levels)
                # print html_page.content
                html_page.addContent("<!--BODY_HOOK-->","<!--FOOTER_HOOK-->")
                pages.append(html_page)
                page_info.append([component_type, plot_group])

        # go over all pages and fill in links
        for i,page in enumerate(pages):
            self.add_navbar_dropdowns(page, page_info[i], dropdowns)
            page.write()

    def add_controls(self, page, folder):
        html = \
        """
        <script>
          var DATA = {}
          DATA.folder = "%s"
          DATA.statistics = {};
          var VIEW = {};
          VIEW.plot_selections = {};
          // JS_HOOK

        </script>
        <script src="http://nusoft.fnal.gov/nova/production/static/d3.v3.min.js"></script>
        <script src="http://nusoft.fnal.gov/nova/users/tamsett/validation/static/d3_controls_local.js"></script>
        """%(folder)
        page.addContent("<!--JS_HOOK-->",html)

    def copy_figure(self, full_path, target):
        tools.mkdir(target)
        path = "/".join(full_path.split("/")[:-1])
        name_base = full_path.split("/")[-1][:-4]
        category   = tools.getHistogramCategory(name_base)
        observable = tools.getHistogramObservable(name_base)
        plot_type = "%s-%s"%(category,observable)

        files = glob.glob("%s/*%s*"%(path,plot_type))
        for path in files:
            if self.reuse_histograms:
                name = path.split("/")[-1]
                if os.path.exists("%s/%s"%(name_base,name)): continue
            cmd = "cp %s %s"%(path,target)
            os.system(cmd)

    def add_navbar_hook(self, page):
        html = \
        """
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Datasets <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <!--NAVBAR_DATASET_HOOK-->
            </ul>
          </li>
        </ul>
        """
        page.addContent("<!--NAVBAR_HOOK-->", html)

    def add_navbar_dropdowns(self, page, info, dropdowns):
        plot_groups = dropdowns[info[0]]
        plot_groups.sort()
        for plot_group in plot_groups:
            if plot_group == info[1]:
                suffix = ' class="active"'
            else:
                suffix = ''
            html = '<li%s><a href="%s/%s/%s">%s</a></li>'%(suffix, self.url_base, info[0], plot_group.replace(" ","_")+".html", plot_group)
            page.addContent("<!--NAVBAR_DATASET_HOOK-->", html)

    def add_sidebar_hook(self, page):
        page.addContent("<!--FOOTER_HOOK-->", "", destructive=True)
        html = \
        """
        <div class="col-sm-3 col-md-2 sidebar">
          <!--SIDEBAR_HOOK-->
        </div>  <!-- end of side bar -->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <!--MODAL_HOOK-->
          <!--BODY_HOOK-->
        </div> <!-- end of main body -->
        """
        page.addContent("<!--BODY_HOOK-->", html, destructive=True)
        
    def add_sidebar_section(self, category, page):
        self.sidebar_index += 1
        title = \
        """
        <h4>%s</h4>
        <!--SIDEBAR_SECTION_%i_HOOK-->
        <hr>
        """%(naming_schema.categoryName(category),self.sidebar_index)
        page.addContent("<!--SIDEBAR_HOOK-->",title)

    def add_figure(self, name, folder, information, page, component_type, plot_group, ratio=False, reco_level="", reco_level_controls=True, normalisations=False, truth=False):
        histogram_name = naming_schema.observableName(tools.getHistogramObservable(name))
        if reco_level != "": 
            reco_value = "-%s"%reco_level
            name_wo_reco = name.replace("-%s"%reco_level,"")
        else:
            reco_value = reco_level
            name_wo_reco = name

        if len(normalisations): default_prefix = "area_norm_"
        else:                   default_prefix = ""

        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"] = {};'%name_wo_reco)
        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"]["log"]        = "";'%name_wo_reco)
        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"]["norm"]       = "%s";'%(name_wo_reco,default_prefix))
        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"]["truth"]      = "";'%name_wo_reco)
        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"]["zoom"]       = "";'%name_wo_reco)
        page.addContent("// JS_HOOK",'VIEW.plot_selections["%s"]["reco_level"] = "%s";'%(name_wo_reco,reco_value))

        sidebar_link = '<p><a href="#row_%s">%s</a></p>'%(name_wo_reco, histogram_name)
        page.addContent("<!--SIDEBAR_SECTION_%i_HOOK-->"%self.sidebar_index, sidebar_link)

        row = \
        """
          <div class="row" id="row_%s">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" id="figure" value="%s", ratio="False">
              <a href="#" data-toggle="modal" data-target="#%s">
                <img src="./%s/%s%s.png" class="img-responsive" alt="..." id="%s">
              </a>
              <p class="text-right" id="download_%s">
                <text><a href="./%s/%s.png" download>png</a> </text>
              </p>
              <!--RATIO_HOOK-->
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <br>
              <div class="panel panel-default">
                <div class="panel-heading text-left">
                  <h3 class="panel-title">%s</h3>
                </div>
                <div class="panel-body text-left">
                  
                  <!--TEXT_HOOK-->
                  <!--TABLE_HOOK-->

                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading text-left">
                  <h3 class="panel-title">Controls</h3>
                </div>
                <div class="panel-body text-left">
                  <div class="row">
                    <div class="form-group">
                      <label for="log_control_%s" class="col-lg-4 control-label">Log y:</label>
                      <div class="col-lg-8">
                        <select id="log_control_%s">
                          <option value="">disable</option>
                          <option value="log_">enable</option>
                        </select>
                      </div>
                    </div>
                  </div>
                <!--PLOT_CONTROL_HOOK-->
                </div>
              </div>
            <p class="text-right"><a href="#top">Top of page</a></p>
            </div>
          </div> <!-- end of this plot row -->
          <hr>
        """%(name_wo_reco,
             name_wo_reco,
             name_wo_reco,
             folder,default_prefix,name,name_wo_reco,
             name_wo_reco,
             folder,name,
             histogram_name,name_wo_reco,name_wo_reco)

        modal = \
        """
        <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-body">
                <img src="./%s/%s%s.png" class="img-responsive" alt="..." id="%s">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        """%(name_wo_reco,name_wo_reco,
             folder,default_prefix,name,name_wo_reco)
        page.addContent("<!--MODAL_HOOK-->",modal)

        if (len(normalisations) > 1):
            norm_control = \
            """
            <div class="row">
              <div class="form-group">
                <label for="norm_control_%s" class="col-lg-4 control-label">Normalisation:</label>
                <div class="col-lg-8">
                  <select id="norm_control_%s">
                    <!--NORM_CONTROL_HOOK-->
                  </select>
                </div>
              </div>
            </div>
            """%(name_wo_reco,name_wo_reco)
            for norm in normalisations:
                this_option = '<option value="%s">%s</option>'%(norm[1],norm[0])
                norm_control = norm_control.replace("<!--NORM_CONTROL_HOOK-->","%s<!--NORM_CONTROL_HOOK-->"%this_option)
            row = row.replace("<!--PLOT_CONTROL_HOOK-->","%s<!--PLOT_CONTROL_HOOK-->"%norm_control)

        if (truth):
            truth_control = \
            """
            <div class="row">
              <div class="form-group">
                <label for="truth_control_%s" class="col-lg-4 control-label">Truth:</label>
                <div class="col-lg-8">
                  <select id="truth_control_%s">
                    <option value="">All</option>
                    <option value="-truth-components">By component</option>
                  </select>
                </div>
              </div>
            </div>
            """%(name_wo_reco,name_wo_reco)
            row = row.replace("<!--PLOT_CONTROL_HOOK-->","%s<!--PLOT_CONTROL_HOOK-->"%truth_control)

        if (ratio):
            ratio_html = \
            """
            <br>
            <a href="#" data-toggle="modal" data-target="#ratio_%s">
              <img src="./%s/ratio_%s%s.png" class="img-responsive" alt="..." id="ratio_%s">
            </a>
            <p class="text-right" download id="download_ratio_%s">
              <text><a href="./%s/ratio_%s.png">png</a> </text>
            </p>
            """%(name_wo_reco,folder,default_prefix,name,name_wo_reco,
                 name_wo_reco,
                 folder,name
                )
            row = row.replace("<!--RATIO_HOOK-->", ratio_html)
            row = row.replace('ratio="False"', 'ratio="True"')
            row_control = \
            """
            <div class="row">
              <div class="form-group">
                <label for="zoom_control_%s" class="col-lg-4 control-label">Ratio zoom:</label>
                <div class="col-lg-8">
                  <select id="zoom_control_%s">
                    <option value="">none</option>
                    <option value="zoom_">zoom</option>
                  </select>
                </div>
              </div>
            </div>
            """%(name_wo_reco,name_wo_reco)
            row = row.replace("<!--PLOT_CONTROL_HOOK-->","%s<!--PLOT_CONTROL_HOOK-->"%row_control)

            modal = \
            """
            <div class="modal fade" id="ratio_%s" tabindex="-1" role="dialog" aria-labelledby="ratio_%sLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-body">
                    <img src="./%s/ratio_%s%s.png" class="img-responsive" alt="..." id="ratio_%s">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            """%(name_wo_reco,name_wo_reco,
                 folder,default_prefix,name,name_wo_reco)
            page.addContent("<!--MODAL_HOOK-->",modal)

        if (reco_level_controls):
            level_control = \
            """
            <div class="row">
              <div class="form-group">
                <label for="reco_level_control_%s" class="col-lg-4 control-label">Reco cuts:</label>
                <div class="col-lg-8">
                  <select id="reco_level_control_%s">
                    <!--RECO_LEVEL_CONTROL_HOOK-->
                  </select>
                </div>
              </div>
            </div>
            """%(name_wo_reco,name_wo_reco)
            row = row.replace("<!--PLOT_CONTROL_HOOK-->","%s"%level_control)

        dataset_list = ""
        for i,dataset in enumerate(information.datasets):
            dataset_html = \
            """
            <div class="row">
              <div class="col-lg-4">
                <strong>%s:</strong>
              </div>
              <div class="col-lg-8">
                %s
              </div>
            </div>
            """%(information.names[i],dataset)
            dataset_list += dataset_html

        text = dataset_list
      
        table_rows = ""
        for i in range(len(information.datasets)):
            table_rows += \
            """
            <tr id="content">
              <td>{}</td>
              <td>{:,}</td>
              <td>{:.2f}</td>
              <td>{:.2f}</td>
            </tr>
            """.format(information.names[i],
                 int(information.entries[i]),
                 # information.modes[i],
                 # information.medians[i],
                 information.means[i],
                 information.mean_diffs[i])
       
        table = \
        """
        <table class="table table-striped">
          <tbody id="table_%s">
            <tr>
              <th>Dataset</th>
              <th>Entries</th>
              <th>Mean</th>
              <th>Mean diff [%%]</th>
            </tr>
            %s
          </tbody>
        </table>
        """%(name_wo_reco,table_rows)

        row = row.replace("<!--TEXT_HOOK-->", text)
        row = row.replace("<!--TABLE_HOOK-->",table)

        page.addContent("<!--BODY_HOOK-->",row)

    def add_plot_information(self, page, name, information):
        page.addContent("// JS_HOOK",'DATA.statistics["%s"] = [];'%name)
        for i,label in enumerate(information.names):
            info_core = '"name":"{}","entries":"{:,}","mean":"{:.2f}","mean_diff":"{:.2f}"'.format(label,int(information.entries[i]),information.means[i],information.mean_diffs[i])
            info = "{%s}"%info_core
            page.addContent("// JS_HOOK",'DATA.statistics["%s"].push(%s);'%(name,info))

    def add_reco_level_controls(self, page, reco_levels):
        html = ""
        for reco_level in reco_levels:
            if reco_level != "": reco_value = "-%s"%reco_level
            else:                reco_value = reco_level
            html += '<option value="%s">%s</option>'%(reco_value,naming_schema.recoLevelName(reco_level))
        page.addContent("<!--RECO_LEVEL_CONTROL_HOOK-->", html, destructive=True)